From e1b79003a75c796e365f7e672f12790aa15c56af Mon Sep 17 00:00:00 2001
From: stefano bovio <stefano.bovio@geosolutionsgroup.com>
Date: Wed, 14 Jul 2021 16:10:38 +0200
Subject: [PATCH] refactor of templates and add new theme in geonode pages
 (#325)

---
 geonode_mapstore_client/apps.py               |   2 +-
 .../client/js/api/geonode/config/index.js     |   1 -
 .../{adapter => v2}/__tests__/index-test.js   |   2 +-
 .../js/apps/{gn-viewer.js => gn-catalogue.js} |  36 +-
 .../client/js/apps/gn-home.jsx                |  29 +-
 .../components/ActionNavbar/ActionNavbar.jsx  |  50 +-
 .../__test__/ActionNavbar-test.jsx            |   6 +-
 .../{home => CardGrid}/CardGrid.jsx           |  68 +-
 .../client/js/components/CardGrid/index.js    |   1 +
 .../ContentsEditable/ThumbnailEditable.jsx    |   2 +-
 .../{home => DetailsPanel}/DetailsPanel.jsx   |   2 +-
 .../js/components/DetailsPanel/index.js       |   1 +
 .../js/components/{home => FaIcon}/FaIcon.jsx |   0
 .../client/js/components/FaIcon/index.js      |   1 +
 .../{home => FeaturedList}/FeaturedList.jsx   |   4 +-
 .../js/components/FeaturedList/index.js       |   1 +
 .../js/components/FiltersForm/FiltersForm.jsx |   2 +-
 .../{home => FiltersMenu}/FiltersMenu.jsx     |  66 +-
 .../client/js/components/FiltersMenu/index.js |   1 +
 .../client/js/components/Menu/BurgerMenu.jsx  |   3 +-
 .../js/components/Menu/DropdownList.jsx       |   2 +-
 .../client/js/components/Menu/MenuItem.js     |  24 +-
 .../{home => ResourceCard}/ResourceCard.jsx   |   4 +-
 .../js/components/ResourceCard/index.js       |   1 +
 .../client/js/components/Router/Router.jsx    |   3 +-
 .../js/components/{home => Tag}/Tag.jsx       |   2 +-
 .../client/js/components/Tag/index.js         |   1 +
 .../client/js/components/home/BrandNavbar.jsx |  91 ---
 .../client/js/components/home/Footer.jsx      |  34 -
 .../client/js/components/home/Hero.jsx        |  44 --
 .../js/components/home/LanguageSelector.jsx   |  90 ---
 .../client/js/components/home/MenuIndex.jsx   |  81 ---
 .../client/js/components/home/SearchBar.jsx   | 154 -----
 .../client/js/plugins/ActionNavbar.jsx        |   2 +
 .../client/js/plugins/BrandNavbar.jsx         |  79 ---
 .../client/js/plugins/DetailViewer.jsx        |  18 +-
 .../client/js/plugins/Save.jsx                |   4 +-
 .../client/js/plugins/SaveAs.jsx              |   4 +-
 .../client/js/plugins/Share.jsx               |   4 +-
 .../client/js/plugins/ViewerLayout.jsx        |   2 +-
 .../js/plugins/actionnavbar/buttons.jsx       |  36 +-
 .../client/js/plugins/index.js                |   4 -
 .../client/js/routes/Detail.jsx               | 256 +++++++-
 .../client/js/routes/Home.jsx                 | 524 ++--------------
 .../client/js/routes/Search.jsx               | 364 ++++++++++-
 .../client/js/utils/AppUtils.js               |   2 +-
 .../client/js/utils/GNSearchUtils.js          |  12 +-
 .../static/mapstore/configs/localConfig.json  |  34 +-
 .../themes/geonode/less/_action-navbar.less   | 158 -----
 .../client/themes/geonode/less/_base.less     |  49 ++
 .../themes/geonode/less/_brand-navbar.less    |  79 ---
 .../themes/geonode/less/_card-grid.less       |  15 +
 .../themes/geonode/less/_details-panel.less   |  26 +-
 .../themes/geonode/less/_filter-form.less     |  34 +-
 .../themes/geonode/less/_filter-menu.less     |  68 --
 .../themes/geonode/less/_home-container.less  |   8 +-
 .../themes/geonode/less/_menu-index.less      |  96 ---
 .../client/themes/geonode/less/_menu.less     | 165 ++++-
 .../themes/geonode/less/_search-bar.less      |  12 +
 .../themes/geonode/less/geonode-legacy.less   | 588 +++++++++++++++++-
 .../client/themes/geonode/less/geonode.less   |   4 -
 geonode_mapstore_client/hooksets.py           |   4 +-
 geonode_mapstore_client/templates/base.html   |  28 +
 .../geonode-mapstore-client/catalogue.html    |  59 ++
 .../snippets/brand_navbar.html                |  34 +
 .../snippets/footer.html                      |  21 +
 .../snippets/header.html                      |  29 +
 .../snippets/hero.html                        |  11 +
 .../snippets/language_selector.html           |  90 +++
 .../snippets/loader.html                      |   0
 .../snippets/loader_style.html                |  57 ++
 .../snippets/menu_item.html                   |  59 ++
 .../snippets/menu_item_compact.html           |  34 +
 .../snippets/search_bar.html                  | 238 +++++++
 .../snippets/topbar.html                      | 107 ++++
 .../geonode-mapstore-client/viewer.html       |  96 ---
 geonode_mapstore_client/templates/index.html  | 112 ++--
 .../templatetags/get_menu_json.py             | 211 +++++++
 .../templatetags/local_config.py              |  29 +
 79 files changed, 2830 insertions(+), 1845 deletions(-)
 rename geonode_mapstore_client/client/js/api/geonode/{adapter => v2}/__tests__/index-test.js (97%)
 rename geonode_mapstore_client/client/js/apps/{gn-viewer.js => gn-catalogue.js} (90%)
 rename geonode_mapstore_client/client/js/components/{home => CardGrid}/CardGrid.jsx (77%)
 create mode 100644 geonode_mapstore_client/client/js/components/CardGrid/index.js
 rename geonode_mapstore_client/client/js/components/{home => DetailsPanel}/DetailsPanel.jsx (99%)
 create mode 100644 geonode_mapstore_client/client/js/components/DetailsPanel/index.js
 rename geonode_mapstore_client/client/js/components/{home => FaIcon}/FaIcon.jsx (100%)
 create mode 100644 geonode_mapstore_client/client/js/components/FaIcon/index.js
 rename geonode_mapstore_client/client/js/components/{home => FeaturedList}/FeaturedList.jsx (98%)
 create mode 100644 geonode_mapstore_client/client/js/components/FeaturedList/index.js
 rename geonode_mapstore_client/client/js/components/{home => FiltersMenu}/FiltersMenu.jsx (69%)
 create mode 100644 geonode_mapstore_client/client/js/components/FiltersMenu/index.js
 rename geonode_mapstore_client/client/js/components/{home => ResourceCard}/ResourceCard.jsx (98%)
 create mode 100644 geonode_mapstore_client/client/js/components/ResourceCard/index.js
 rename geonode_mapstore_client/client/js/components/{home => Tag}/Tag.jsx (94%)
 create mode 100644 geonode_mapstore_client/client/js/components/Tag/index.js
 delete mode 100644 geonode_mapstore_client/client/js/components/home/BrandNavbar.jsx
 delete mode 100644 geonode_mapstore_client/client/js/components/home/Footer.jsx
 delete mode 100644 geonode_mapstore_client/client/js/components/home/Hero.jsx
 delete mode 100644 geonode_mapstore_client/client/js/components/home/LanguageSelector.jsx
 delete mode 100644 geonode_mapstore_client/client/js/components/home/MenuIndex.jsx
 delete mode 100644 geonode_mapstore_client/client/js/components/home/SearchBar.jsx
 delete mode 100644 geonode_mapstore_client/client/js/plugins/BrandNavbar.jsx
 delete mode 100644 geonode_mapstore_client/client/themes/geonode/less/_action-navbar.less
 delete mode 100644 geonode_mapstore_client/client/themes/geonode/less/_brand-navbar.less
 delete mode 100644 geonode_mapstore_client/client/themes/geonode/less/_filter-menu.less
 delete mode 100644 geonode_mapstore_client/client/themes/geonode/less/_menu-index.less
 create mode 100644 geonode_mapstore_client/templates/base.html
 create mode 100644 geonode_mapstore_client/templates/geonode-mapstore-client/catalogue.html
 create mode 100644 geonode_mapstore_client/templates/geonode-mapstore-client/snippets/brand_navbar.html
 create mode 100644 geonode_mapstore_client/templates/geonode-mapstore-client/snippets/footer.html
 create mode 100644 geonode_mapstore_client/templates/geonode-mapstore-client/snippets/header.html
 create mode 100644 geonode_mapstore_client/templates/geonode-mapstore-client/snippets/hero.html
 create mode 100644 geonode_mapstore_client/templates/geonode-mapstore-client/snippets/language_selector.html
 create mode 100644 geonode_mapstore_client/templates/geonode-mapstore-client/snippets/loader.html
 create mode 100644 geonode_mapstore_client/templates/geonode-mapstore-client/snippets/loader_style.html
 create mode 100644 geonode_mapstore_client/templates/geonode-mapstore-client/snippets/menu_item.html
 create mode 100644 geonode_mapstore_client/templates/geonode-mapstore-client/snippets/menu_item_compact.html
 create mode 100644 geonode_mapstore_client/templates/geonode-mapstore-client/snippets/search_bar.html
 create mode 100644 geonode_mapstore_client/templates/geonode-mapstore-client/snippets/topbar.html
 delete mode 100644 geonode_mapstore_client/templates/geonode-mapstore-client/viewer.html
 create mode 100644 geonode_mapstore_client/templatetags/local_config.py

diff --git a/geonode_mapstore_client/apps.py b/geonode_mapstore_client/apps.py
index a6fe8bb542..ff8163106d 100644
--- a/geonode_mapstore_client/apps.py
+++ b/geonode_mapstore_client/apps.py
@@ -23,7 +23,7 @@ def run_setup_hooks(*args, **kwargs):
     urlpatterns += [
         url(r'^mapstore/', include('mapstore2_adapter.urls')),
         url(r'^', include('mapstore2_adapter.geoapps.geostories.api.urls')),
-        url(r'^viewer/', TemplateView.as_view(template_name='geonode-mapstore-client/viewer.html')),
+        url(r'^catalogue/', TemplateView.as_view(template_name='geonode-mapstore-client/catalogue.html')),
     ]
 
 
diff --git a/geonode_mapstore_client/client/js/api/geonode/config/index.js b/geonode_mapstore_client/client/js/api/geonode/config/index.js
index a7c6c32fcd..b2957e93c7 100644
--- a/geonode_mapstore_client/client/js/api/geonode/config/index.js
+++ b/geonode_mapstore_client/client/js/api/geonode/config/index.js
@@ -22,4 +22,3 @@ export default {
     getNewMapConfiguration,
     getNewGeoStoryConfig
 };
-
diff --git a/geonode_mapstore_client/client/js/api/geonode/adapter/__tests__/index-test.js b/geonode_mapstore_client/client/js/api/geonode/v2/__tests__/index-test.js
similarity index 97%
rename from geonode_mapstore_client/client/js/api/geonode/adapter/__tests__/index-test.js
rename to geonode_mapstore_client/client/js/api/geonode/v2/__tests__/index-test.js
index 7083a3faac..8cba169427 100644
--- a/geonode_mapstore_client/client/js/api/geonode/adapter/__tests__/index-test.js
+++ b/geonode_mapstore_client/client/js/api/geonode/v2/__tests__/index-test.js
@@ -16,7 +16,7 @@ import {
 
 let mockAxios;
 
-describe('GeoNode adapter api', () => {
+describe('GeoNode v2 api', () => {
     beforeEach(done => {
         global.__DEVTOOLS__ = true;
         mockAxios = new MockAdapter(axios);
diff --git a/geonode_mapstore_client/client/js/apps/gn-viewer.js b/geonode_mapstore_client/client/js/apps/gn-catalogue.js
similarity index 90%
rename from geonode_mapstore_client/client/js/apps/gn-viewer.js
rename to geonode_mapstore_client/client/js/apps/gn-catalogue.js
index 67e12ce091..81e40befae 100644
--- a/geonode_mapstore_client/client/js/apps/gn-viewer.js
+++ b/geonode_mapstore_client/client/js/apps/gn-catalogue.js
@@ -36,11 +36,14 @@ import searchconfig from '@mapstore/framework/reducers/searchconfig';
 import widgets from '@mapstore/framework/reducers/widgets';
 // end
 
+import SearchRoute from '@js/routes/Search';
+import DetailRoute from '@js/routes/Detail';
 import LayerViewerRoute from '@js/routes/LayerViewer';
 import MapViewerRoute from '@js/routes/MapViewer';
 import GeoStoryViewerRoute from '@js/routes/GeoStoryViewer';
 import DocumentViewerRoute from '@js/routes/DocumentViewer';
 
+import gnsearch from '@js/reducers/gnsearch';
 import gnresource from '@js/reducers/gnresource';
 import gnsettings from '@js/reducers/gnsettings';
 
@@ -52,7 +55,6 @@ import {
 
 import {
     setupConfiguration,
-    getVersion,
     initializeApp,
     getPluginsConfiguration
 } from '@js/utils/AppUtils';
@@ -64,6 +66,8 @@ import {
     gnSetLayersPermissions
 } from '@js/epics';
 import gnviewerEpics from '@js/epics/gnviewer';
+import gnsearchEpics from '@js/epics/gnsearch';
+import gnlocaleEpics from '@js/epics/gnlocale';
 import maplayout from '@mapstore/framework/reducers/maplayout';
 
 import pluginsDefinition from '@js/plugins/index';
@@ -126,6 +130,23 @@ const routes = [
             '/document/:pk'
         ],
         component: DocumentViewerRoute
+    },
+    {
+        name: 'resources',
+        path: [
+            '/',
+            '/search/',
+            '/search/filter'
+        ],
+        component: SearchRoute
+    },
+    {
+        name: 'detail',
+        path: [
+            '/detail/:pk',
+            '/detail/:ctype/:pk'
+        ],
+        component: DetailRoute
     }
 ];
 
@@ -172,13 +193,7 @@ Promise.all([
                             }
                         }
                     },
-                    themeCfg: {
-                        path: '/static/mapstore/dist/themes',
-                        prefixContainer: undefined,
-                        version: getVersion(),
-                        prefix: 'msgapi',
-                        theme: 'geonode'
-                    },
+                    themeCfg: null,
                     pluginsConfig: getPluginsConfiguration(localConfig.plugins, pluginsConfigKey),
                     lazyPlugins: pluginsDefinition.lazyPlugins,
                     pluginsDef: {
@@ -210,6 +225,7 @@ Promise.all([
                         searchconfig,
                         widgets,
                         geostory,
+                        gnsearch,
                         ...pluginsDefinition.reducers
                     },
                     appEpics: {
@@ -218,7 +234,9 @@ Promise.all([
                         gnCheckSelectedLayerPermissions,
                         gnSetLayersPermissions,
                         ...pluginsDefinition.epics,
-                        ...gnviewerEpics
+                        ...gnviewerEpics,
+                        ...gnsearchEpics,
+                        ...gnlocaleEpics
                     },
                     geoNodeConfiguration,
                     initialActions: [
diff --git a/geonode_mapstore_client/client/js/apps/gn-home.jsx b/geonode_mapstore_client/client/js/apps/gn-home.jsx
index 22b169516a..c16cc2e2ac 100644
--- a/geonode_mapstore_client/client/js/apps/gn-home.jsx
+++ b/geonode_mapstore_client/client/js/apps/gn-home.jsx
@@ -15,8 +15,6 @@ import security from '@mapstore/framework/reducers/security';
 import controls from '@mapstore/framework/reducers/controls';
 
 import Home from '@js/routes/Home';
-import SearchRoute from '@js/routes/Search';
-import DetailRoute from '@js/routes/Detail';
 
 import gnsearch from '@js/reducers/gnsearch';
 import gnresource from '@js/reducers/gnresource';
@@ -33,8 +31,7 @@ import {
 
 import {
     setupConfiguration,
-    initializeApp,
-    getVersion
+    initializeApp
 } from '@js/utils/AppUtils';
 
 const DEFAULT_LOCALE = {};
@@ -47,23 +44,7 @@ const routes = [
         name: 'homepage',
         path: '/',
         component: Home
-    },
-    {
-        name: 'resources',
-        path: [
-            '/search/'
-        ],
-        component: SearchRoute
-    },
-    {
-        name: 'detail',
-        path: [
-            '/detail/:pk',
-            '/detail/:ctype/:pk'
-        ],
-        component: DetailRoute
     }
-
 ];
 
 initializeApp();
@@ -94,13 +75,7 @@ Promise.all([
                 }
             },
             pluginsConfig: localConfig.plugins || [],
-            themeCfg: {
-                path: '/static/mapstore/dist/themes',
-                prefixContainer: 'body',
-                version: getVersion(),
-                prefix: 'msgapi',
-                theme: 'geonode'
-            },
+            themeCfg: null,
             appReducers: {
                 gnsearch,
                 gnresource,
diff --git a/geonode_mapstore_client/client/js/components/ActionNavbar/ActionNavbar.jsx b/geonode_mapstore_client/client/js/components/ActionNavbar/ActionNavbar.jsx
index c89adb84a5..e96a142741 100644
--- a/geonode_mapstore_client/client/js/components/ActionNavbar/ActionNavbar.jsx
+++ b/geonode_mapstore_client/client/js/components/ActionNavbar/ActionNavbar.jsx
@@ -13,7 +13,7 @@ import BurgerMenu from '@js/components/Menu/BurgerMenu';
 import useResizeElement from '@js/hooks/useResizeElement';
 
 
-const LeftContentMenu = ({ items, formatHref, query }) => {
+const LeftContentMenu = ({ items, formatHref, query, variant, size }) => {
 
     const navbarContentLeft = useRef();
     const navbarLeft = useRef();
@@ -26,11 +26,11 @@ const LeftContentMenu = ({ items, formatHref, query }) => {
 
     return (
         <div
-            className={`gn-action-navbar-content-left`}
+            className={`gn-menu-content-side gn-menu-content-left`}
             ref={navbarContentLeft}
         >
             {
-                (switchToBurgerMenu) && items && <BurgerMenu items={items} />
+                (switchToBurgerMenu) && items && <BurgerMenu items={items} variant={variant}/>
             }
 
             { (!switchToBurgerMenu) && items &&
@@ -38,11 +38,11 @@ const LeftContentMenu = ({ items, formatHref, query }) => {
                 <Menu
                     ref={navbarLeft}
                     items={items}
-                    containerClass={`gn-brand-navbar-left-side`}
-                    childrenClass={`gn-user-dropdown`}
+                    containerClass={`gn-menu-list`}
                     formatHref={formatHref}
                     query={query}
-                    variant="primary"
+                    variant={variant}
+                    size={size}
                 />
 
             }
@@ -52,7 +52,7 @@ const LeftContentMenu = ({ items, formatHref, query }) => {
 };
 
 
-const RightContentMenu = ({ items, formatHref, query, parentRef, cfg }) => {
+const RightContentMenu = ({ items, formatHref, query, parentRef, cfg, variant, size }) => {
 
     const navbarContentRight = useRef();
     const navbarRight = useRef();
@@ -68,24 +68,24 @@ const RightContentMenu = ({ items, formatHref, query, parentRef, cfg }) => {
     return (
         <div
             ref={navbarContentRight}
-            className={`gn-action-navbar-content-right`}
+            className={`gn-menu-content-right`}
             style={cfg?.style}
         >
 
             {
-                (switchToBurgerMenu) && items && <BurgerMenu items={items} />
+                (switchToBurgerMenu) && items && <BurgerMenu items={items} variant={variant}/>
             }
 
             {(!switchToBurgerMenu) && items &&
                 <Menu
                     ref={navbarRight}
                     items={items}
-                    containerClass={`gn-brand-navbar-right-side`}
-                    childrenClass={`gn-user-dropdown`}
+                    containerClass={`gn-menu-list`}
                     formatHref={formatHref}
                     query={query}
-                    variant="primary"
+                    variant={variant}
                     alignRight
+                    size={size}
                 />
 
             }
@@ -103,20 +103,21 @@ const ActionNavbar = forwardRef(({
     rightItems,
     query,
     formatHref,
-    tools,
-    cfg
+    cfg,
+    variant,
+    size
 }, ref) => {
 
     return (
         <nav
             ref={ref}
-            className={`gn-action-navbar`}
+            className={`gn-menu gn-${variant}`}
             style={style}
         >
-            <div className={`gn-action-navbar-container`}>
+            <div className={`gn-menu-container`}>
 
                 <div
-                    className={`gn-action-navbar-content`}
+                    className={`gn-menu-content`}
                 >
 
                     {
@@ -125,6 +126,8 @@ const ActionNavbar = forwardRef(({
                             items={leftItems}
                             formatHref={formatHref}
                             query={query}
+                            variant={variant}
+                            size={size}
                         />
                     }
 
@@ -137,13 +140,10 @@ const ActionNavbar = forwardRef(({
                             query={query}
                             parentRef={ref}
                             cfg={cfg?.rightContents}
+                            variant={variant}
+                            size={size}
                         />
                     }
-
-
-                    <div className={`gn-action-navbar-content-tools`}>
-                        {tools}
-                    </div>
                 </div>
 
 
@@ -159,14 +159,16 @@ ActionNavbar.propTypes = {
     leftItems: PropTypes.array,
     rightItems: PropTypes.array,
     query: PropTypes.object,
-    formatHref: PropTypes.func
+    formatHref: PropTypes.func,
+    variant: PropTypes.string
 };
 
 ActionNavbar.defaultProps = {
     leftItems: [],
     rightItems: [],
     query: {},
-    formatHref: () => '#'
+    formatHref: () => '#',
+    variant: 'primary'
 };
 
 
diff --git a/geonode_mapstore_client/client/js/components/ActionNavbar/__test__/ActionNavbar-test.jsx b/geonode_mapstore_client/client/js/components/ActionNavbar/__test__/ActionNavbar-test.jsx
index 3a94b9a174..a5481c5eca 100644
--- a/geonode_mapstore_client/client/js/components/ActionNavbar/__test__/ActionNavbar-test.jsx
+++ b/geonode_mapstore_client/client/js/components/ActionNavbar/__test__/ActionNavbar-test.jsx
@@ -186,7 +186,7 @@ describe('Test GeoNode action navbar component', () => {
     });
     it('should render with default', () => {
         ReactDOM.render( <ActionNavbar/>, document.getElementById("container"));
-        const el = document.querySelector('.gn-action-navbar');
+        const el = document.querySelector('.gn-menu');
         expect(el).toExist();
     });
 
@@ -196,9 +196,9 @@ describe('Test GeoNode action navbar component', () => {
             rightItems={conf.rightItems.items}
         />, document.getElementById("container"));
 
-        const el = document.querySelector('.gn-action-navbar');
+        const el = document.querySelector('.gn-menu');
         expect(el).toExist();
-        const navBarContent = document.querySelector('.gn-action-navbar-content');
+        const navBarContent = document.querySelector('.gn-menu-content');
         expect(navBarContent).toExist();
 
     });
diff --git a/geonode_mapstore_client/client/js/components/home/CardGrid.jsx b/geonode_mapstore_client/client/js/components/CardGrid/CardGrid.jsx
similarity index 77%
rename from geonode_mapstore_client/client/js/components/home/CardGrid.jsx
rename to geonode_mapstore_client/client/js/components/CardGrid/CardGrid.jsx
index 524573caa0..c56af3ac08 100644
--- a/geonode_mapstore_client/client/js/components/home/CardGrid.jsx
+++ b/geonode_mapstore_client/client/js/components/CardGrid/CardGrid.jsx
@@ -9,8 +9,8 @@
 import React, { useEffect, useRef } from 'react';
 import Spinner from '@js/components/Spinner';
 import HTML from '@mapstore/framework/components/I18N/HTML';
-import FaIcon from '@js/components/home/FaIcon';
-import ResourceCard from '@js/components/home/ResourceCard';
+import FaIcon from '@js/components/FaIcon';
+import ResourceCard from '@js/components/ResourceCard';
 import { withResizeDetector } from 'react-resize-detector';
 import useLocalStorage from '@js/hooks/useLocalStorage';
 import { hasPermissionsTo } from '@js/utils/MenuUtils';
@@ -108,7 +108,7 @@ const Cards = withResizeDetector(({
     );
 });
 
-const CardGrid = withResizeDetector(({
+const CardGrid = ({
     resources,
     loading,
     page,
@@ -119,45 +119,40 @@ const CardGrid = withResizeDetector(({
     containerStyle,
     header,
     cardOptions,
-    column,
-    isColumnActive,
     messageId,
     children,
-    pageSize,
-    width,
-    buildHrefByTemplate
+    buildHrefByTemplate,
+    scrollContainer
 }) => {
 
-    const columnNode = useRef();
-    const columnWidth = columnNode.current
-        ? columnNode.current.getBoundingClientRect().width
-        : 0;
-
-    const state = useRef({});
-
-    state.current = {
-        page,
-        loading,
-        isNextPageAvailable,
-        onLoad
+    const updateOnScroll = useRef({});
+    updateOnScroll.current = () => {
+        const scrollTop = scrollContainer
+            ? scrollContainer.scrollTop
+            : document.body.scrollTop || document.documentElement.scrollTop;
+        const clientHeight = scrollContainer
+            ? scrollContainer.clientHeight
+            : window.innerHeight;
+        const scrollHeight = scrollContainer
+            ? scrollContainer.scrollHeight
+            : document.body.scrollHeight || document.documentElement.scrollHeight;
+        const offset = 200;
+        const isScrolled = scrollTop + clientHeight >= scrollHeight - offset;
+        if (isScrolled && !loading && isNextPageAvailable) {
+            onLoad(page + 1);
+        }
     };
 
     useEffect(() => {
+        let target = scrollContainer || window;
         function onScroll() {
-            const scrollTop = document.body.scrollTop || document.documentElement.scrollTop;
-            const clientHeight = window.innerHeight;
-            const scrollHeight = document.body.scrollHeight || document.documentElement.scrollHeight;
-            const offset = 200;
-            const isScrolled = scrollTop + clientHeight >= scrollHeight - offset;
-            if (isScrolled && !state.current.loading && state.current.isNextPageAvailable) {
-                state.current.onLoad(state.current.page + 1);
-            }
+            updateOnScroll.current();
         }
-        window.addEventListener('scroll', onScroll);
+        target.addEventListener('scroll', onScroll);
         return () => {
-            window.removeEventListener('scroll', onScroll);
+            target.removeEventListener('scroll', onScroll);
         };
-    }, []);
+    }, [scrollContainer]);
 
     const hasResources = resources?.length > 0;
 
@@ -165,10 +160,7 @@ const CardGrid = withResizeDetector(({
         <div className="gn-card-grid">
             {header}
             <div style={{
-                display: 'flex',
-                ...(pageSize === 'sm' && {
-                    flexDirection: 'column'
-                })
+                display: 'flex'
             }}>
                 <div style={{ flex: 1 }}>
                     <div className="gn-card-grid-container" style={containerStyle}>
@@ -184,7 +176,6 @@ const CardGrid = withResizeDetector(({
                             formatHref={formatHref}
                             isCardActive={isCardActive}
                             options={cardOptions}
-                            containerWidth={pageSize === 'md' && isColumnActive ? width - columnWidth : undefined}
                             buildHrefByTemplate={buildHrefByTemplate}
                         />
                         <div className="gn-card-grid-pagination">
@@ -195,13 +186,10 @@ const CardGrid = withResizeDetector(({
                         </div>
                     </div>
                 </div>
-                <div ref={columnNode}>
-                    {column}
-                </div>
             </div>
         </div>
     );
-});
+};
 
 CardGrid.defaultProps = {
     page: 1,
diff --git a/geonode_mapstore_client/client/js/components/CardGrid/index.js b/geonode_mapstore_client/client/js/components/CardGrid/index.js
new file mode 100644
index 0000000000..62319b22fb
--- /dev/null
+++ b/geonode_mapstore_client/client/js/components/CardGrid/index.js
@@ -0,0 +1 @@
+export { default } from './CardGrid';
diff --git a/geonode_mapstore_client/client/js/components/ContentsEditable/ThumbnailEditable.jsx b/geonode_mapstore_client/client/js/components/ContentsEditable/ThumbnailEditable.jsx
index 37652c9435..41f4902173 100644
--- a/geonode_mapstore_client/client/js/components/ContentsEditable/ThumbnailEditable.jsx
+++ b/geonode_mapstore_client/client/js/components/ContentsEditable/ThumbnailEditable.jsx
@@ -8,7 +8,7 @@
 
 import React, { useState, useEffect } from 'react';
 import Thumbnail from '@mapstore/framework/components/misc/Thumbnail';
-import FaIcon from '@js/components/home/FaIcon';
+import FaIcon from '@js/components/FaIcon';
 import Message from '@mapstore/framework/components/I18N/Message';
 
 const ThumbnailEditable = ({
diff --git a/geonode_mapstore_client/client/js/components/home/DetailsPanel.jsx b/geonode_mapstore_client/client/js/components/DetailsPanel/DetailsPanel.jsx
similarity index 99%
rename from geonode_mapstore_client/client/js/components/home/DetailsPanel.jsx
rename to geonode_mapstore_client/client/js/components/DetailsPanel/DetailsPanel.jsx
index 1672e5ddd2..267cc2bfc0 100644
--- a/geonode_mapstore_client/client/js/components/home/DetailsPanel.jsx
+++ b/geonode_mapstore_client/client/js/components/DetailsPanel/DetailsPanel.jsx
@@ -8,7 +8,7 @@
 
 import React, { useRef, useState, useEffect } from 'react';
 import DOMPurify from 'dompurify';
-import FaIcon from '@js/components/home/FaIcon';
+import FaIcon from '@js/components/FaIcon';
 import Button from '@js/components/Button';
 import Spinner from '@js/components/Spinner';
 import Message from '@mapstore/framework/components/I18N/Message';
diff --git a/geonode_mapstore_client/client/js/components/DetailsPanel/index.js b/geonode_mapstore_client/client/js/components/DetailsPanel/index.js
new file mode 100644
index 0000000000..ec1275967c
--- /dev/null
+++ b/geonode_mapstore_client/client/js/components/DetailsPanel/index.js
@@ -0,0 +1 @@
+export { default } from './DetailsPanel';
diff --git a/geonode_mapstore_client/client/js/components/home/FaIcon.jsx b/geonode_mapstore_client/client/js/components/FaIcon/FaIcon.jsx
similarity index 100%
rename from geonode_mapstore_client/client/js/components/home/FaIcon.jsx
rename to geonode_mapstore_client/client/js/components/FaIcon/FaIcon.jsx
diff --git a/geonode_mapstore_client/client/js/components/FaIcon/index.js b/geonode_mapstore_client/client/js/components/FaIcon/index.js
new file mode 100644
index 0000000000..199728efe0
--- /dev/null
+++ b/geonode_mapstore_client/client/js/components/FaIcon/index.js
@@ -0,0 +1 @@
+export { default } from './FaIcon';
diff --git a/geonode_mapstore_client/client/js/components/home/FeaturedList.jsx b/geonode_mapstore_client/client/js/components/FeaturedList/FeaturedList.jsx
similarity index 98%
rename from geonode_mapstore_client/client/js/components/home/FeaturedList.jsx
rename to geonode_mapstore_client/client/js/components/FeaturedList/FeaturedList.jsx
index 6bb9cc444d..b08368f4db 100644
--- a/geonode_mapstore_client/client/js/components/home/FeaturedList.jsx
+++ b/geonode_mapstore_client/client/js/components/FeaturedList/FeaturedList.jsx
@@ -10,8 +10,8 @@ import React, { useEffect, useState } from 'react';
 import Button from '@js/components/Button';
 import Spinner from '@js/components/Spinner';
 import HTML from '@mapstore/framework/components/I18N/HTML';
-import ResourceCard from '@js/components/home/ResourceCard';
-import FaIcon from '@js/components/home/FaIcon';
+import ResourceCard from '@js/components/ResourceCard';
+import FaIcon from '@js/components/FaIcon';
 import { withResizeDetector } from 'react-resize-detector';
 
 const Cards = withResizeDetector(({
diff --git a/geonode_mapstore_client/client/js/components/FeaturedList/index.js b/geonode_mapstore_client/client/js/components/FeaturedList/index.js
new file mode 100644
index 0000000000..b440492e81
--- /dev/null
+++ b/geonode_mapstore_client/client/js/components/FeaturedList/index.js
@@ -0,0 +1 @@
+export { default } from './FeaturedList';
diff --git a/geonode_mapstore_client/client/js/components/FiltersForm/FiltersForm.jsx b/geonode_mapstore_client/client/js/components/FiltersForm/FiltersForm.jsx
index 30f597ebaf..e5e9a5d5f8 100644
--- a/geonode_mapstore_client/client/js/components/FiltersForm/FiltersForm.jsx
+++ b/geonode_mapstore_client/client/js/components/FiltersForm/FiltersForm.jsx
@@ -11,7 +11,7 @@ import PropTypes from 'prop-types';
 import castArray from 'lodash/castArray';
 import Button from '@js/components/Button';
 import Message from '@mapstore/framework/components/I18N/Message';
-import FaIcon from '@js/components/home/FaIcon';
+import FaIcon from '@js/components/FaIcon';
 import isEqual from 'lodash/isEqual';
 import FilterByExtent from './FilterByExtent';
 import FilterItems from './FilterItems';
diff --git a/geonode_mapstore_client/client/js/components/home/FiltersMenu.jsx b/geonode_mapstore_client/client/js/components/FiltersMenu/FiltersMenu.jsx
similarity index 69%
rename from geonode_mapstore_client/client/js/components/home/FiltersMenu.jsx
rename to geonode_mapstore_client/client/js/components/FiltersMenu/FiltersMenu.jsx
index 8461805ac2..dab3038578 100644
--- a/geonode_mapstore_client/client/js/components/home/FiltersMenu.jsx
+++ b/geonode_mapstore_client/client/js/components/FiltersMenu/FiltersMenu.jsx
@@ -11,7 +11,7 @@ import Dropdown from '@js/components/Dropdown';
 import Button from '@js/components/Button';
 import Badge from '@js/components/Badge';
 import Message from '@mapstore/framework/components/I18N/Message';
-import FaIcon from '@js/components/home/FaIcon';
+import FaIcon from '@js/components/FaIcon';
 import useLocalStorage from '@js/hooks/useLocalStorage';
 import Menu from '@js/components/Menu';
 
@@ -36,45 +36,45 @@ const FiltersMenu = forwardRef(({
     }
     return (
         <div
-            className="gn-filters-menu"
+            className="gn-filters-menu gn-menu gn-default"
             style={style}
             ref={ref}
         >
-            <div className="gn-filters-menu-container">
-                <div className="gn-filters-menu-main">
-                    <Button
-                        variant={filtersActive ? 'primary' : 'default'}
+            <div className="gn-menu-container">
+                <div className="gn-menu-content">
+                    <div className="gn-menu-fill">
+                        <Button
+                            variant={filtersActive ? 'primary' : 'default'}
+                            size="sm"
+                            onClick={onClick}
+                        >
+                            <Message msgId="gnhome.filtersCount" msgParams={{ count: totalFilters }} />
+                        </Button>
+                        {filtersActive && <Button
+                            variant="default"
+                            size="sm"
+                            onClick={onClear}
+                        >
+                            <Message msgId="gnhome.clearFilters"/>
+                        </Button>}
+                        {' '}
+                        <Badge><Message msgId="gnhome.resourcesFound" msgParams={{ count: totalResources }}/></Badge>
+                    </div>
+                    <Menu
+                        items={cardsMenu}
+                        containerClass={`gn-menu-list`}
                         size="sm"
-                        onClick={onClick}
-                    >
-                        <Message msgId="gnhome.filtersCount" msgParams={{ count: totalFilters }} />
-                    </Button>
-                    {filtersActive && <Button
+                        alignRight
+                    />
+                    <Button
                         variant="default"
+                        onClick={handleToggleCardLayoutStyle}
                         size="sm"
-                        onClick={onClear}
                     >
-                        <Message msgId="gnhome.clearFilters"/>
-                    </Button>}
-                    {' '}
-                    <Badge><Message msgId="gnhome.resourcesFound" msgParams={{ count: totalResources }}/></Badge>
-                </div>
-                <Menu
-                    items={cardsMenu}
-                    containerClass={`gn-cards-menu`}
-                    size="sm"
-                    alignRight
-                />
-                <Button
-                    variant="default"
-                    onClick={handleToggleCardLayoutStyle}
-                    size="sm"
-                >
-                    <FaIcon name={cardLayoutStyle === 'grid' ? 'list' : 'th'} />
-                </Button>
-                <div className="gn-filters-menu-tools">
-
-                    {orderOptions.length > 0 && <Dropdown pullRight>
+                        <FaIcon name={cardLayoutStyle === 'grid' ? 'list' : 'th'} />
+                    </Button>
+                    {orderOptions.length > 0 &&
+                    <Dropdown pullRight>
                         <Dropdown.Toggle
                             id="sort-dropdown"
                             bsStyle="default"
diff --git a/geonode_mapstore_client/client/js/components/FiltersMenu/index.js b/geonode_mapstore_client/client/js/components/FiltersMenu/index.js
new file mode 100644
index 0000000000..333421b72f
--- /dev/null
+++ b/geonode_mapstore_client/client/js/components/FiltersMenu/index.js
@@ -0,0 +1 @@
+export { default } from './FiltersMenu';
diff --git a/geonode_mapstore_client/client/js/components/Menu/BurgerMenu.jsx b/geonode_mapstore_client/client/js/components/Menu/BurgerMenu.jsx
index 3049b7f39d..cfb71a1003 100644
--- a/geonode_mapstore_client/client/js/components/Menu/BurgerMenu.jsx
+++ b/geonode_mapstore_client/client/js/components/Menu/BurgerMenu.jsx
@@ -10,7 +10,7 @@
 import React from 'react';
 import DropdownList from '@js/components/Menu/DropdownList';
 
-const BurgerMenu = ({items}) => {
+const BurgerMenu = ({items, variant}) => {
 
     return (
         <div className={`gn-sub-flat-menu-container`} >
@@ -18,6 +18,7 @@ const BurgerMenu = ({items}) => {
                 toogleIcon={`bars`}
                 className={`gn-sub-flat-menu`}
                 items={items}
+                variant={variant}
             />
         </div>
 
diff --git a/geonode_mapstore_client/client/js/components/Menu/DropdownList.jsx b/geonode_mapstore_client/client/js/components/Menu/DropdownList.jsx
index 8e91c887d4..c548fe7fec 100644
--- a/geonode_mapstore_client/client/js/components/Menu/DropdownList.jsx
+++ b/geonode_mapstore_client/client/js/components/Menu/DropdownList.jsx
@@ -14,7 +14,7 @@ import Dropdown from '@js/components/Dropdown';
 import Badge from '@js/components/Badge';
 import NavLink from './NavLink';
 import { createPortal } from 'react-dom';
-import FaIcon from '@js/components/home/FaIcon';
+import FaIcon from '@js/components/FaIcon';
 import {
     isValidBadgeValue
 } from '@js/utils/MenuUtils';
diff --git a/geonode_mapstore_client/client/js/components/Menu/MenuItem.js b/geonode_mapstore_client/client/js/components/Menu/MenuItem.js
index 6e2d15ecbf..8a6b5edc8c 100644
--- a/geonode_mapstore_client/client/js/components/Menu/MenuItem.js
+++ b/geonode_mapstore_client/client/js/components/Menu/MenuItem.js
@@ -10,7 +10,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import castArray from 'lodash/castArray';
-import Tag from '@js/components/home/Tag';
 import Badge from '@js/components/Badge';
 import NavLink from './NavLink';
 import Message from '@mapstore/framework/components/I18N/Message';
@@ -40,10 +39,12 @@ import {
  *
  */
 
-const MenuItem = ({ item, menuItemsProps, containerNode, tabIndex, draggable, classItem, size, alignRight, variant }) => {
+const MenuItem = ({ item, menuItemsProps, containerNode, tabIndex, classItem, size, alignRight, variant }) => {
 
     const { formatHref, query } = menuItemsProps;
     const { id, type, label, labelId = '', items = [], href, style, badge = '', image, Component, target } = item;
+    const btnClassName = `btn${variant && ` btn-${variant}` || ''}${size && ` btn-${size}` || ''}`;
+
     const badgeValue = badge;
     if (type === 'dropdown') {
         return (<DropdownList
@@ -64,41 +65,38 @@ const MenuItem = ({ item, menuItemsProps, containerNode, tabIndex, draggable, cl
     }
 
     if ((type === 'custom' || type === 'plugin') && Component) {
-        return <Component />;
+        return <Component variant={variant} size={size}/>;
     }
 
     if (type === 'link') {
         return (
-            <NavLink href={href} target={target} className={variant ? `btn btn-${variant}` : ''}>{labelId && <Message msgId={labelId} /> || label}</NavLink>
+            <NavLink href={href} target={target} className={btnClassName}>{labelId && <Message msgId={labelId} /> || label}</NavLink>
         );
 
     }
 
     if (type === 'divider') {
-        return <div className="gn-menu-index-divider" style={style}></div>;
+        return <div className="gn-menu-divider" style={style}></div>;
     }
+
     if (type === 'filter') {
         const active = castArray(query.f || []).find(value => value === item.id);
         return (
-            <Tag
-                tabIndex={tabIndex}
-                draggable={draggable}
-                active={active}
+            <NavLink
+                target={target}
                 style={style}
                 href={formatHref({
                     query: { f: item.id },
                     replaceQuery: active ? false : true
                 })}
-                variant={variant}
+                className={btnClassName}
             >
                 {labelId && <Message msgId={labelId} /> || label}
                 {isValidBadgeValue(badgeValue) && <Badge>{badgeValue}</Badge>}
-            </Tag>
+            </NavLink>
         );
     }
     return null;
-
-
 };
 
 MenuItem.propTypes = {
diff --git a/geonode_mapstore_client/client/js/components/home/ResourceCard.jsx b/geonode_mapstore_client/client/js/components/ResourceCard/ResourceCard.jsx
similarity index 98%
rename from geonode_mapstore_client/client/js/components/home/ResourceCard.jsx
rename to geonode_mapstore_client/client/js/components/ResourceCard/ResourceCard.jsx
index 820c1db47a..43403aa28a 100644
--- a/geonode_mapstore_client/client/js/components/home/ResourceCard.jsx
+++ b/geonode_mapstore_client/client/js/components/ResourceCard/ResourceCard.jsx
@@ -8,8 +8,8 @@
 
 import React, { forwardRef } from 'react';
 import Message from '@mapstore/framework/components/I18N/Message';
-import FaIcon from '@js/components/home/FaIcon';
-import Tag from '@js/components/home/Tag';
+import FaIcon from '@js/components/FaIcon';
+import Tag from '@js/components/Tag';
 import Dropdown from '@js/components/Dropdown';
 import {
     getUserName,
diff --git a/geonode_mapstore_client/client/js/components/ResourceCard/index.js b/geonode_mapstore_client/client/js/components/ResourceCard/index.js
new file mode 100644
index 0000000000..0edc6cdc86
--- /dev/null
+++ b/geonode_mapstore_client/client/js/components/ResourceCard/index.js
@@ -0,0 +1 @@
+export { default } from './ResourceCard';
diff --git a/geonode_mapstore_client/client/js/components/Router/Router.jsx b/geonode_mapstore_client/client/js/components/Router/Router.jsx
index 29486a9ed5..42196e1a9c 100644
--- a/geonode_mapstore_client/client/js/components/Router/Router.jsx
+++ b/geonode_mapstore_client/client/js/components/Router/Router.jsx
@@ -60,7 +60,6 @@ const Router = forwardRef(({
     geoNodeConfiguration,
     lazyPlugins
 }, ref) => {
-    const variant = geoNodeConfiguration?.theme?.variant || 'light';
     return (
         <>
             <RootStyle
@@ -73,7 +72,7 @@ const Router = forwardRef(({
             >
                 <div
                     id={id}
-                    className={`${className} gn-theme-${variant} gn-theme`}
+                    className={className}
                     ref={ref}
                 >
                     <Localized
diff --git a/geonode_mapstore_client/client/js/components/home/Tag.jsx b/geonode_mapstore_client/client/js/components/Tag/Tag.jsx
similarity index 94%
rename from geonode_mapstore_client/client/js/components/home/Tag.jsx
rename to geonode_mapstore_client/client/js/components/Tag/Tag.jsx
index 53e7b3c73c..5f78e8cfc8 100644
--- a/geonode_mapstore_client/client/js/components/home/Tag.jsx
+++ b/geonode_mapstore_client/client/js/components/Tag/Tag.jsx
@@ -9,7 +9,7 @@
  */
 
 import React from 'react';
-import FaIcon from '@js/components/home/FaIcon';
+import FaIcon from '@js/components/FaIcon';
 function Tag({
     active,
     children,
diff --git a/geonode_mapstore_client/client/js/components/Tag/index.js b/geonode_mapstore_client/client/js/components/Tag/index.js
new file mode 100644
index 0000000000..15774bff20
--- /dev/null
+++ b/geonode_mapstore_client/client/js/components/Tag/index.js
@@ -0,0 +1 @@
+export { default } from './Tag';
diff --git a/geonode_mapstore_client/client/js/components/home/BrandNavbar.jsx b/geonode_mapstore_client/client/js/components/home/BrandNavbar.jsx
deleted file mode 100644
index c86cb8c39c..0000000000
--- a/geonode_mapstore_client/client/js/components/home/BrandNavbar.jsx
+++ /dev/null
@@ -1,91 +0,0 @@
-/*
- * Copyright 2020, GeoSolutions Sas.
- * All rights reserved.
- *
- * This source code is licensed under the BSD-style license found in the
- * LICENSE file in the root directory of this source tree.
- */
-
-import React, { forwardRef, useRef, cloneElement, Children } from 'react';
-import Menu from '@js/components/Menu';
-
-const BrandNavbar = forwardRef(({
-    style,
-    logo,
-    navItems,
-    children,
-    centerMinWidth,
-    inline
-}, ref) => {
-
-
-    const navItemsHrefPath = navItems.map( (item) => {
-        const hrefPath = (item?.href?.slice(-1) === '=')
-            ? item.href + location.pathname + location.hash
-            : item.href;
-        return {
-            ...item,
-            href: hrefPath
-        };
-    });
-    const centerNode = useRef();
-    const centerWidth = centerNode.current
-        ? centerNode.current.getBoundingClientRect().width
-        : Infinity;
-
-    return (
-        <nav
-            ref={ref}
-            className="gn-brand-navbar"
-            style={style}
-        >
-            <div className="gn-brand-navbar-container" style={inline ? {} : { flexWrap: 'wrap' }}>
-                <ul
-                    className="gn-brand-navbar-left-side"
-                >
-                    {logo.map(({ src, label, href, style: logoStyle }, idx) => {
-                        return (
-                            <li key={idx}>
-                                <a href={href}>
-                                    <img src={src} style={logoStyle}/>
-                                    {label}
-                                </a>
-                            </li>
-                        );
-                    })}
-                </ul>
-                {inline && <div
-                    className="gn-brand-navbar-center"
-                    ref={centerNode}
-                >
-                    {centerWidth >= centerMinWidth && children}
-                </div>}
-                <Menu
-                    items={[...navItemsHrefPath].reverse()}
-                    containerClass={`gn-brand-navbar-right-side`}
-                    childrenClass={`gn-user-dropdown`}
-                    alignRight
-                />
-
-            </div>
-            {children && (inline && centerWidth < centerMinWidth
-            || !inline) &&
-                Children.map(children, child =>
-                    cloneElement(child, {
-                        style: {
-                            ...child.props.style,
-                            margin: '0.5rem auto 0 auto',
-                            width: 'calc(100% - 1rem)'
-                        }
-                    }))}
-        </nav>
-    );
-});
-
-BrandNavbar.defaultProps = {
-    logo: [],
-    links: [],
-    centerMinWidth: 400
-};
-
-export default BrandNavbar;
diff --git a/geonode_mapstore_client/client/js/components/home/Footer.jsx b/geonode_mapstore_client/client/js/components/home/Footer.jsx
deleted file mode 100644
index 5decc4376f..0000000000
--- a/geonode_mapstore_client/client/js/components/home/Footer.jsx
+++ /dev/null
@@ -1,34 +0,0 @@
-/*
- * Copyright 2020, GeoSolutions Sas.
- * All rights reserved.
- *
- * This source code is licensed under the BSD-style license found in the
- * LICENSE file in the root directory of this source tree.
- */
-
-import React, { forwardRef } from 'react';
-import Menu from '@js/components/Menu';
-
-const Footer = forwardRef(({
-    footerItems,
-    style
-}, ref) => {
-
-    return (
-        <footer
-            ref={ref}
-            className="gn-footer"
-            style={style}
-        >
-            <Menu
-                items={footerItems}
-            />
-        </footer>
-    );
-});
-
-Footer.defaultProps = {
-    footerItems: []
-};
-
-export default Footer;
diff --git a/geonode_mapstore_client/client/js/components/home/Hero.jsx b/geonode_mapstore_client/client/js/components/home/Hero.jsx
deleted file mode 100644
index 7f4408bd85..0000000000
--- a/geonode_mapstore_client/client/js/components/home/Hero.jsx
+++ /dev/null
@@ -1,44 +0,0 @@
-/*
- * Copyright 2020, GeoSolutions Sas.
- * All rights reserved.
- *
- * This source code is licensed under the BSD-style license found in the
- * LICENSE file in the root directory of this source tree.
- */
-
-import React, { forwardRef } from 'react';
-import PropTypes from 'prop-types';
-import { Jumbotron } from 'react-bootstrap';
-import HTML from '@mapstore/framework/components/I18N/HTML';
-
-const Hero = forwardRef(({
-    style,
-    jumbotronStyle,
-    children
-}, ref) => {
-
-    return (
-        <div
-            ref={ref}
-            className="gn-hero"
-            style={style}
-        >
-            <Jumbotron style={jumbotronStyle}>
-                <div className="gn-hero-description">
-                    <HTML msgId="gnhome.description"/>
-                </div>
-                <p className="gn-hero-tools">
-                    {children}
-                </p>
-            </Jumbotron>
-        </div>
-    );
-});
-
-Hero.propTypes = {
-    style: PropTypes.object
-};
-
-Hero.defaultProps = {};
-
-export default Hero;
diff --git a/geonode_mapstore_client/client/js/components/home/LanguageSelector.jsx b/geonode_mapstore_client/client/js/components/home/LanguageSelector.jsx
deleted file mode 100644
index c8fef4fb41..0000000000
--- a/geonode_mapstore_client/client/js/components/home/LanguageSelector.jsx
+++ /dev/null
@@ -1,90 +0,0 @@
-/*
- * Copyright 2020, GeoSolutions Sas.
- * All rights reserved.
- *
- * This source code is licensed under the BSD-style license found in the
- * LICENSE file in the root directory of this source tree.
- */
-
-import React, { forwardRef } from 'react';
-import PropTypes from 'prop-types';
-import Message from '@mapstore/framework/components/I18N/Message';
-import { getSupportedLocales } from '@mapstore/framework/utils/LocaleUtils';
-import Dropdown from '@js/components/Dropdown';
-import Button from '@js/components/Button';
-const LanguageSelector = forwardRef(({
-    style,
-    value,
-    onSelect,
-    inline
-}, ref) => {
-
-    const supportedLocales = getSupportedLocales();
-    const supportedLocalesKeys = supportedLocales ? Object.keys(supportedLocales) : [];
-    const options = supportedLocalesKeys.map(key => ({
-        key,
-        value: supportedLocales[key].code,
-        label: supportedLocales[key].description
-    }));
-    const selectedKey = supportedLocalesKeys.find(key => supportedLocales[key].code === value);
-    const selected = supportedLocales?.[selectedKey] || {};
-
-    return (
-        <div
-            ref={ref}
-            className={`gn-language-selector ${inline ? 'inline' : ''}`}
-            style={style}
-        >
-            {inline
-                ? options.map((option) => {
-                    const active = option.value === value;
-                    return (
-                        <Button
-                            active={active}
-                            key={option.key}
-                            variant={active ? 'default' : 'primary'}
-                            onClick={() => onSelect(option.value)}
-                        >
-                            {option.key}
-                        </Button>
-                    );
-                })
-                : <Dropdown pullRight>
-                    <Dropdown.Toggle
-                        id="language-selector"
-                        bsStyle="primary"
-                        bsSize="sm"
-                        noCaret
-                    >
-                        {selected.description || <Message msgId="gnhome.language" />}
-                    </Dropdown.Toggle>
-                    <Dropdown.Menu>
-                        {options.map((option) => {
-                            return (
-                                <Dropdown.Item
-                                    active={option.value === value}
-                                    key={option.key}
-                                    onClick={() => onSelect(option.value)}
-                                >
-                                    {option.label}
-                                </Dropdown.Item>
-                            );
-                        })}
-                    </Dropdown.Menu>
-                </Dropdown>}
-        </div>
-    );
-});
-
-LanguageSelector.propTypes = {
-    style: PropTypes.object,
-    value: PropTypes.string,
-    inline: PropTypes.bool
-};
-
-LanguageSelector.defaultProps = {
-    value: '',
-    inline: false
-};
-
-export default LanguageSelector;
diff --git a/geonode_mapstore_client/client/js/components/home/MenuIndex.jsx b/geonode_mapstore_client/client/js/components/home/MenuIndex.jsx
deleted file mode 100644
index 8fab2883e2..0000000000
--- a/geonode_mapstore_client/client/js/components/home/MenuIndex.jsx
+++ /dev/null
@@ -1,81 +0,0 @@
-/*
- * Copyright 2020, GeoSolutions Sas.
- * All rights reserved.
- *
- * This source code is licensed under the BSD-style license found in the
- * LICENSE file in the root directory of this source tree.
- */
-
-import React, { forwardRef } from 'react';
-import PropTypes from 'prop-types';
-import ReactResizeDetector from 'react-resize-detector';
-import SwipeMenu from '@js/components/home/SwipeMenu';
-import MenuItem from '@js/components/Menu/MenuItem';
-import Menu from '@js/components/Menu';
-
-const MenuIndex = forwardRef(({
-    style,
-    leftItems,
-    rightItems,
-    query,
-    formatHref,
-    tools
-}, ref) => {
-
-
-    return (
-        <nav
-            ref={ref}
-            className="gn-menu-index"
-            style={style}
-        >
-            <div className="gn-menu-index-container">
-                <ReactResizeDetector handleHeight>
-                    {({ height }) => (
-                        <div
-                            className="gn-menu-index-content"
-                            style={{ height }}
-                        >
-                            <SwipeMenu
-                                items={leftItems}
-                                menuItemComponent={MenuItem}
-                                menuItemsProps={{
-                                    query,
-                                    formatHref
-                                }}
-                            />
-                        </div>
-                    )}
-                </ReactResizeDetector>
-                {tools && <div className="gn-menu-index-tools">
-                    <Menu
-                        items={rightItems}
-                        containerClass={`gn-brand-navbar-right-side`}
-                        childrenClass={`gn-user-dropdown`}
-                        formatHref={formatHref}
-                        query={query}
-                    />
-                    {tools}
-                </div>}
-            </div>
-        </nav>
-    );
-});
-
-MenuIndex.propTypes = {
-    style: PropTypes.object,
-    leftItems: PropTypes.array,
-    rightItems: PropTypes.array,
-    query: PropTypes.object,
-    formatHref: PropTypes.func,
-    tools: PropTypes.node
-};
-
-MenuIndex.defaultProps = {
-    leftItems: [],
-    rightItems: [],
-    query: {},
-    formatHref: () => '#'
-};
-
-export default MenuIndex;
diff --git a/geonode_mapstore_client/client/js/components/home/SearchBar.jsx b/geonode_mapstore_client/client/js/components/home/SearchBar.jsx
deleted file mode 100644
index 5f7b6174a5..0000000000
--- a/geonode_mapstore_client/client/js/components/home/SearchBar.jsx
+++ /dev/null
@@ -1,154 +0,0 @@
-/*
- * Copyright 2020, GeoSolutions Sas.
- * All rights reserved.
- *
- * This source code is licensed under the BSD-style license found in the
- * LICENSE file in the root directory of this source tree.
- */
-
-import React, { useState, useEffect, useRef } from 'react';
-import { FormControl, ListGroup, InputGroup, ListGroupItem } from 'react-bootstrap';
-import FaIcon from '@js/components/home/FaIcon';
-import useDetectClickOut from '@js/hooks/useDetectClickOut';
-import debounce from 'lodash/debounce';
-import Spinner from '@js/components/Spinner';
-import Button from '@js/components/Button';
-function SearchBar({
-    value,
-    loading,
-    debounceTime,
-    suggestions,
-    onChange,
-    onFetchSuggestions,
-    style,
-    append,
-    children,
-    onClearSuggestions,
-    disableSuggestions
-}) {
-    const [ outline, setOutline ] = useState(false);
-    const [ text, setText ] = useState(value);
-    const suggestionsNode = useDetectClickOut({
-        disabled: suggestions.length === 0,
-        onClickOut: onClearSuggestions
-    });
-    const textValue = useRef();
-    textValue.current = text;
-
-    useEffect(() => {
-        if (value !== textValue.current) {
-            setText(value);
-        }
-    }, [ value ]);
-
-    const updateSuggestions = useRef();
-
-    useEffect(() => {
-        updateSuggestions.current = debounce((newValue) => {
-            onFetchSuggestions(newValue);
-        }, debounceTime);
-        return () => {
-            updateSuggestions.current.cancel();
-        };
-    }, []);
-
-    function handleInputChange(newValue) {
-        setText(newValue);
-        if (newValue && !disableSuggestions) {
-            updateSuggestions.current.cancel();
-            updateSuggestions.current(newValue);
-        }
-    }
-
-    function handleChange(newValue) {
-        onChange(newValue);
-        setText(newValue);
-    }
-
-    function handleKeyDown(newValue, event) {
-        if (event.key === 'Enter') {
-            handleChange(newValue);
-        }
-    }
-
-    return (
-        <div
-            className={`gn-search-bar ${ outline ? ' focus' : ''}`} style={style}>
-            <InputGroup>
-                <InputGroup.Addon>
-                    {text &&
-                    <Button
-                        onClick={() => handleChange('')}
-                        variant="default">
-                        <FaIcon name="times" />
-                    </Button>}
-                    <Button
-                        onClick={() => handleChange(text)}
-                        variant="default">
-                        {loading
-                            ? <Spinner animation="border" size="sm">
-                                <span className="sr-only">Loading...</span>
-                            </Spinner>
-                            : <FaIcon name="search" />}
-                    </Button>
-                </InputGroup.Addon>
-                <FormControl
-                    placeholder="Search"
-                    aria-label="Recipient's username"
-                    aria-describedby="basic-addon2"
-                    value={text}
-                    onKeyDown={event => handleKeyDown(text, event)}
-                    onChange={event => handleInputChange(event.target.value)}
-                    onFocus={() => setOutline(true)}
-                    onBlur={() => setOutline(false)}
-                    style={{
-                        outline: 'none',
-                        boxShadow: 'none'
-                    }}
-                />
-                <InputGroup.Addon>
-                    {append}
-                </InputGroup.Addon>
-            </InputGroup>
-            {suggestions.length > 0 &&
-            <div
-                ref={suggestionsNode}
-                className="gn-suggestions"
-            >
-                <div className="gn-suggestions-header">
-                    <Button
-                        onClick={() => onClearSuggestions()}
-                        variant="default">
-                        <FaIcon name="times" />
-                    </Button>
-                </div>
-                <ListGroup>
-                    {suggestions.map(suggestion => {
-                        return (
-                            <ListGroupItem
-                                key={suggestion.id}
-                                action={!loading}
-                                onClick={() => handleChange(suggestion.value)}
-                            >
-                                {suggestion.label}
-                            </ListGroupItem>
-                        );
-                    })}
-                </ListGroup>
-            </div>}
-            {children}
-        </div>
-    );
-}
-
-SearchBar.defaultProps = {
-    value: '',
-    loading: false,
-    debounceTime: 0,
-    suggestions: [],
-    onChange: () => {},
-    onFetchSuggestions: () => {},
-    style: {}
-};
-
-export default SearchBar;
diff --git a/geonode_mapstore_client/client/js/plugins/ActionNavbar.jsx b/geonode_mapstore_client/client/js/plugins/ActionNavbar.jsx
index 481ba1786a..5288a22f92 100644
--- a/geonode_mapstore_client/client/js/plugins/ActionNavbar.jsx
+++ b/geonode_mapstore_client/client/js/plugins/ActionNavbar.jsx
@@ -51,6 +51,8 @@ function ActionNavbarPlugin({
 
         <ActionNavbar
             leftItems={leftItems}
+            variant="default"
+            size="sm"
         />
     );
 }
diff --git a/geonode_mapstore_client/client/js/plugins/BrandNavbar.jsx b/geonode_mapstore_client/client/js/plugins/BrandNavbar.jsx
deleted file mode 100644
index 9e593210fb..0000000000
--- a/geonode_mapstore_client/client/js/plugins/BrandNavbar.jsx
+++ /dev/null
@@ -1,79 +0,0 @@
-/*
- * Copyright 2021, GeoSolutions Sas.
- * All rights reserved.
- *
- * This source code is licensed under the BSD-style license found in the
- * LICENSE file in the root directory of this source tree.
- */
-
-import React from 'react';
-import castArray from 'lodash/castArray';
-import { createPlugin } from '@mapstore/framework/utils/PluginsUtils';
-import { connect } from 'react-redux';
-import { createSelector } from 'reselect';
-import BrandNavbar from '@js/components/home/BrandNavbar';
-import { getParsedGeoNodeConfiguration } from "@js/selectors/config";
-import { withResizeDetector } from 'react-resize-detector';
-import {
-    getPageSize
-} from '@js/utils/AppUtils';
-
-
-function BrandNavbarPlg({
-    config,
-    width
-}) {
-
-    const {
-        navbarItemsAllowed,
-        theme
-    } = config;
-    const pageSize = getPageSize(width);
-
-    return (
-        <div
-            style={{
-                top: 0,
-                left: 0,
-                width: '100%',
-                height: 64
-            }}>
-            <BrandNavbar
-                logo={castArray(config?.navbar?.logo || [])
-                    .map((logo) => ({
-                        ...logo,
-                        ...logo[pageSize]
-                    }))}
-
-                navItems={navbarItemsAllowed}
-                style={{
-                    ...theme?.navbar?.style
-
-                }}
-
-            >
-            </BrandNavbar>
-        </div>
-    );
-}
-
-const BrandNavbarPlugin = connect(
-    createSelector([
-        getParsedGeoNodeConfiguration
-    ], (config) => ({
-        config
-    })),
-    {}
-)(withResizeDetector(BrandNavbarPlg));
-
-export default createPlugin('BrandNavbar', {
-    component: BrandNavbarPlugin,
-    containers: {
-        ViewerLayout: {
-            priority: 1,
-            target: 'header'
-        }
-    },
-    epics: {},
-    reducers: {}
-});
diff --git a/geonode_mapstore_client/client/js/plugins/DetailViewer.jsx b/geonode_mapstore_client/client/js/plugins/DetailViewer.jsx
index 31207301de..dc2f750418 100644
--- a/geonode_mapstore_client/client/js/plugins/DetailViewer.jsx
+++ b/geonode_mapstore_client/client/js/plugins/DetailViewer.jsx
@@ -10,7 +10,7 @@ import React from 'react';
 import { createPlugin } from '@mapstore/framework/utils/PluginsUtils';
 import { connect } from 'react-redux';
 import { createSelector } from 'reselect';
-import DetailsPanel from '@js/components/home/DetailsPanel';
+import DetailsPanel from '@js/components/DetailsPanel';
 import { userSelector } from '@mapstore/framework/selectors/security';
 import {
     editTitleResource,
@@ -48,8 +48,9 @@ const ConnectedDetailsPanel = connect(
 
 const ButtonViewer = ({
     onClick,
-    isEnabledViewer,
-    hide
+    hide,
+    variant,
+    size
 }) => {
 
     const handleClickButton = () => {
@@ -58,9 +59,10 @@ const ButtonViewer = ({
 
     return !hide
         ? (<Button
-            variant="primary"
+            variant={variant}
+            size={size}
             onClick={handleClickButton}
-            active={!isEnabledViewer} > <Message msgId="gnviewer.details"/>
+        > <Message msgId="gnviewer.details"/>
         </Button>)
         : null
     ;
@@ -68,12 +70,10 @@ const ButtonViewer = ({
 
 const ConnectedButton = connect(
     createSelector([
-        state => state?.controls?.DetailViewer?.enabled || false,
         isNewResource,
         getResourceId
     ],
-    (isEnabledViewer, isNew, resourcePk) => ({
-        isEnabledViewer,
+    (isNew, resourcePk) => ({
         hide: isNew || !resourcePk
     })),
     {
@@ -168,7 +168,7 @@ export default createPlugin('DetailViewer', {
             priority: 1
         },
         ActionNavbar: {
-            name: 'ButtonViewer',
+            name: 'DetailViewerButton',
             Component: ConnectedButton,
             priority: 1
         }
diff --git a/geonode_mapstore_client/client/js/plugins/Save.jsx b/geonode_mapstore_client/client/js/plugins/Save.jsx
index 7a046dbc4b..0749277388 100644
--- a/geonode_mapstore_client/client/js/plugins/Save.jsx
+++ b/geonode_mapstore_client/client/js/plugins/Save.jsx
@@ -71,11 +71,13 @@ const SavePlugin = connect(
 function SaveButton({
     enabled,
     onClick,
-    variant
+    variant,
+    size
 }) {
     return enabled
         ? <Button
             variant={variant || "primary"}
+            size={size}
             onClick={() => onClick()}
         >
             <Message msgId="save"/>
diff --git a/geonode_mapstore_client/client/js/plugins/SaveAs.jsx b/geonode_mapstore_client/client/js/plugins/SaveAs.jsx
index 4da8583b58..aa341a838e 100644
--- a/geonode_mapstore_client/client/js/plugins/SaveAs.jsx
+++ b/geonode_mapstore_client/client/js/plugins/SaveAs.jsx
@@ -91,11 +91,13 @@ const SaveAsPlugin = connect(
 function SaveAsButton({
     enabled,
     onClick,
-    variant
+    variant,
+    size
 }) {
     return enabled
         ? <Button
             variant={variant || "primary"}
+            size={size}
             onClick={() => onClick()}
         >
             <Message msgId="saveAs"/>
diff --git a/geonode_mapstore_client/client/js/plugins/Share.jsx b/geonode_mapstore_client/client/js/plugins/Share.jsx
index 727f18d391..33151cd980 100644
--- a/geonode_mapstore_client/client/js/plugins/Share.jsx
+++ b/geonode_mapstore_client/client/js/plugins/Share.jsx
@@ -102,11 +102,13 @@ const SharePlugin = connect(
 function ShareButton({
     enabled,
     variant,
-    onClick
+    onClick,
+    size
 }) {
     return enabled
         ? <Button
             variant={variant || "primary"}
+            size={size}
             onClick={() => onClick()}
         >
             <Message msgId="share.title"/>
diff --git a/geonode_mapstore_client/client/js/plugins/ViewerLayout.jsx b/geonode_mapstore_client/client/js/plugins/ViewerLayout.jsx
index df85b9face..352b541f1b 100644
--- a/geonode_mapstore_client/client/js/plugins/ViewerLayout.jsx
+++ b/geonode_mapstore_client/client/js/plugins/ViewerLayout.jsx
@@ -52,7 +52,7 @@ function ViewerLayout({
         <div
             className="gn-viewer-layout"
             style={{
-                position: 'fixed',
+                position: 'absolute',
                 top: 0,
                 left: 0,
                 width: '100%',
diff --git a/geonode_mapstore_client/client/js/plugins/actionnavbar/buttons.jsx b/geonode_mapstore_client/client/js/plugins/actionnavbar/buttons.jsx
index 912ec96d2b..132fad1f37 100644
--- a/geonode_mapstore_client/client/js/plugins/actionnavbar/buttons.jsx
+++ b/geonode_mapstore_client/client/js/plugins/actionnavbar/buttons.jsx
@@ -21,10 +21,15 @@ import Button from '@js/components/Button';
 export const PrintActionButton = connect(
     () => ({}),
     { onClick: toggleControl.bind(null, 'print', null) }
-)(({ onClick }) => {
+)(({
+    onClick,
+    variant,
+    size
+}) => {
     return (
         <Button
-            variant="primary"
+            variant={variant}
+            size={size}
             onClick={() => onClick()}
         >
             <Message msgId="printbutton"/>
@@ -35,10 +40,15 @@ export const PrintActionButton = connect(
 export const CatalogActionButton = connect(
     () => ({}),
     { onClick: setControlProperty.bind(null, 'metadataexplorer', 'enabled', true, true) }
-)(({ onClick }) => {
+)(({
+    onClick,
+    variant,
+    size
+}) => {
     return (
         <Button
-            variant="primary"
+            variant={variant}
+            size={size}
             onClick={() => onClick()}
         >
             <Message msgId="catalog.title"/>
@@ -49,10 +59,15 @@ export const CatalogActionButton = connect(
 export const MeasureActionButton = connect(
     () => ({}),
     { onClick: setControlProperty.bind(null, 'measure', 'enabled', true) }
-)(({ onClick }) => {
+)(({
+    onClick,
+    variant,
+    size
+}) => {
     return (
         <Button
-            variant="primary"
+            variant={variant}
+            size={size}
             onClick={() => onClick()}
         >
             <Message msgId="measureComponent.Measure"/>
@@ -63,10 +78,15 @@ export const MeasureActionButton = connect(
 export const LayerDownloadActionButton = connect(
     () => ({}),
     { onClick: setControlProperty.bind(null, 'layerdownload', 'enabled', true, true) }
-)(({ onClick }) => {
+)(({
+    onClick,
+    variant,
+    size
+}) => {
     return (
         <Button
-            variant="primary"
+            variant={variant}
+            size={size}
             onClick={() => onClick()}
         >
             <Message msgId="layerdownload.title"/>
diff --git a/geonode_mapstore_client/client/js/plugins/index.js b/geonode_mapstore_client/client/js/plugins/index.js
index 89fe4f7696..167f5b3d9b 100644
--- a/geonode_mapstore_client/client/js/plugins/index.js
+++ b/geonode_mapstore_client/client/js/plugins/index.js
@@ -307,10 +307,6 @@ export const plugins = {
         'ActionNavbar',
         import(/* webpackChunkName: 'plugins/action-navbar-plugin' */ '@js/plugins/ActionNavbar')
     ),
-    BrandNavbarPlugin: toLazyPlugin(
-        'BrandNavbar',
-        import(/* webpackChunkName: 'plugins/brand-navbar-plugin' */ '@js/plugins/BrandNavbar')
-    ),
     DetailViewerPlugin: toLazyPlugin(
         'DetailViewer',
         import(/* webpackChunkName: 'plugins/detail-viewer-plugin' */ '@js/plugins/DetailViewer')
diff --git a/geonode_mapstore_client/client/js/routes/Detail.jsx b/geonode_mapstore_client/client/js/routes/Detail.jsx
index 442384ad48..a28d508240 100644
--- a/geonode_mapstore_client/client/js/routes/Detail.jsx
+++ b/geonode_mapstore_client/client/js/routes/Detail.jsx
@@ -1,9 +1,257 @@
+/*
+ * Copyright 2020, GeoSolutions Sas.
+ * All rights reserved.
+ *
+ * This source code is licensed under the BSD-style license found in the
+ * LICENSE file in the root directory of this source tree.
+*/
 
+import React, { useRef, useEffect } from 'react';
+import PropTypes from 'prop-types';
 import { connect } from 'react-redux';
-import Home from '@js/routes/Home';
+import url from 'url';
+import { createSelector } from 'reselect';
+import castArray from 'lodash/castArray';
+import CardGrid from '@js/components/CardGrid';
+import DetailsPanel from '@js/components/DetailsPanel';
+import FiltersMenu from '@js/components/FiltersMenu';
+import { getParsedGeoNodeConfiguration } from "@js/selectors/config";
+import { userSelector } from '@mapstore/framework/selectors/security';
+import { buildHrefByTemplate } from '@js/utils/MenuUtils';
+import { setControlProperty } from '@mapstore/framework/actions/controls';
+import {
+    searchResources,
+    requestResource,
+    loadFeaturedResources
+} from '@js/actions/gnsearch';
 
+import { setFavoriteResource } from '@js/actions/gnresource';
+import { hashLocationToHref } from '@js/utils/GNSearchUtils';
+import { withResizeDetector } from 'react-resize-detector';
+import MetaTags from "@js/components/MetaTags";
 
-const DetailRoute = connect(() => ({ hideHero: true, isFilterForm: false, disableFeatured: true })
-)((Home));
+import {
+    getThemeLayoutSize
+} from '@js/utils/AppUtils';
 
-export default DetailRoute;
+const DEFAULT_RESOURCES = [];
+
+const CardGridWithMessageId = ({ query, user, isFirstRequest, ...props }) => {
+    const hasResources = props.resources?.length > 0;
+    const hasFilter = Object.keys(query || {}).filter(key => key !== 'sort').length > 0;
+    const isLoggedIn = !!user;
+    const messageId = !hasResources && !isFirstRequest && !props.loading
+        ? hasFilter && 'noResultsWithFilter'
+            || isLoggedIn && 'noContentYet'
+            || 'noPublicContent'
+        : undefined;
+    return <CardGrid { ...props } messageId={messageId}  />;
+};
+
+const ConnectedCardGrid = connect(
+    createSelector([
+        state => state?.gnsearch?.resources || DEFAULT_RESOURCES,
+        state => state?.gnsearch?.loading || false,
+        state => state?.gnsearch?.isNextPageAvailable || false,
+        state => state?.gnsearch?.isFirstRequest
+    ], (resources, loading, isNextPageAvailable, isFirstRequest) => ({
+        resources,
+        loading,
+        isNextPageAvailable,
+        isFirstRequest
+    }))
+)(CardGridWithMessageId);
+
+const ConnectedDetailsPanel = connect(
+    createSelector([
+        state => state?.gnresource?.loading || false,
+        state => state?.gnresource?.data?.favorite || false
+    ], (loading, favorite) => ({
+        loading,
+        favorite
+    })),
+    {
+        onFavorite: setFavoriteResource
+    }
+)(DetailsPanel);
+function Detail({
+    location,
+    params,
+    onSearch,
+    onEnableFiltersPanel,
+    config,
+    onSelect,
+    match,
+    user,
+    width,
+    resource,
+    totalResources,
+    siteName
+}) {
+
+    const {
+        filterMenuItemsAllowed,
+        cardOptionsItemsAllowed,
+        filters
+    } = config;
+
+    const scrollContainer = useRef();
+    const themeLayoutSize = getThemeLayoutSize(width);
+
+    const handleShowFilterForm = () => {
+        window.location = `#/search/${location.search}`;
+        onEnableFiltersPanel(true);
+    };
+
+    function handleUpdate(newParams, pathname) {
+        const { query } = url.parse(location.search, true);
+        onSearch({
+            ...query,
+            ...params,
+            ...newParams
+        }, pathname);
+
+    }
+
+    function handleClear() {
+        const { query } = url.parse(location.search, true);
+        const newParams = Object.keys(query)
+            .reduce((acc, key) =>
+                key.indexOf('filter') === 0
+                || key === 'f'
+                || key === 'q'
+                    ? {
+                        ...acc,
+                        [key]: []
+                    }
+                    : acc, { extent: undefined });
+        handleUpdate(newParams);
+    }
+
+    function handleFormatHref(options) {
+        return hashLocationToHref({
+            location,
+            ...options
+        });
+    }
+
+    function hrefDetailPanel() {
+        return handleFormatHref({
+            pathname: '/search/'
+        });
+    }
+
+    const { query } = url.parse(location.search, true);
+    const queryFilters = Object.keys(query).reduce((acc, key) => key.indexOf('sort') === 0
+        ? acc
+        : [...acc, ...castArray(query[key]).map((value) => ({ key, value }))], []);
+
+    const pk = match.params.pk;
+    const ctype = match.params.ctype;
+
+    useEffect(() => {
+        onSelect(pk, ctype);
+    }, [pk, ctype]);
+
+    return (
+        <>
+            <MetaTags
+                logo={resource ? resource.thumbnail_url : window.location.origin + config?.navbar?.logo[0]?.src}
+                title={(resource?.title) ? resource?.title + " - " + siteName : siteName }
+                siteName={siteName}
+                contentURL={resource?.detail_url}
+                content={resource?.abstract}
+            />
+            <div className={`gn-fixed-card-grid gn-size-${themeLayoutSize}`}>
+                <div ref={scrollContainer} className="gn-grid-container">
+                    <ConnectedCardGrid
+                        user={user}
+                        query={query}
+                        cardOptions={cardOptionsItemsAllowed}
+                        buildHrefByTemplate={buildHrefByTemplate}
+                        isCardActive={res => res.pk === pk}
+                        page={params.page ? parseFloat(params.page) : 1}
+                        formatHref={handleFormatHref}
+                        scrollContainer={scrollContainer.current}
+                        onLoad={(value) => {
+                            handleUpdate({
+                                page: value
+                            });
+                        }}
+                    >
+                        <FiltersMenu
+                            formatHref={handleFormatHref}
+                            cardsMenu={filterMenuItemsAllowed || []}
+                            order={query?.sort}
+                            onClear={handleClear}
+                            onClick={handleShowFilterForm}
+                            orderOptions={filters?.order?.options}
+                            defaultLabelId={filters?.order?.defaultLabelId}
+                            totalResources={totalResources}
+                            totalFilters={queryFilters.length}
+                            filtersActive={!!(queryFilters.length > 0)}
+                        />
+                    </ConnectedCardGrid>
+                </div>
+                {!!resource &&
+                <ConnectedDetailsPanel
+                    enableFavorite={!!user}
+                    resource={resource}
+                    linkHref={hrefDetailPanel}
+                    formatHref={handleFormatHref}
+                />}
+            </div>
+        </>
+    );
+}
+
+Detail.propTypes = {
+    dispatch: PropTypes.func,
+    history: PropTypes.object,
+    location: PropTypes.object,
+    match: PropTypes.object,
+    plugins: PropTypes.object,
+    pluginsConfig: PropTypes.array,
+    background: PropTypes.object,
+    logo: PropTypes.array,
+    jumbotron: PropTypes.object
+};
+
+Detail.defaultProps = {
+    background: {},
+    logo: [],
+    jumbotron: {},
+    isFilterForm: false
+};
+
+const DEFAULT_PARAMS = {};
+
+
+const ConnectedDetail = connect(
+
+    createSelector([
+        state => state?.gnsearch?.params || DEFAULT_PARAMS,
+        userSelector,
+        state => state?.gnresource?.data || null,
+        state => state?.controls?.gnFiltersPanel?.enabled || null,
+        getParsedGeoNodeConfiguration,
+        state => state?.gnsearch?.total || 0,
+        state => state?.localConfig?.siteName || "Geonode"
+    ], (params, user, resource, isFiltersPanelEnabled, config, totalResources, siteName) => ({
+        params,
+        user,
+        resource,
+        isFiltersPanelEnabled,
+        config,
+        totalResources,
+        siteName
+    })),
+    {
+        onSearch: searchResources,
+        onSelect: requestResource,
+        onEnableFiltersPanel: setControlProperty.bind(null, 'gnFiltersPanel', 'enabled'),
+        fetchFeaturedResources: loadFeaturedResources
+    }
+)(withResizeDetector(Detail));
+
+export default ConnectedDetail;
diff --git a/geonode_mapstore_client/client/js/routes/Home.jsx b/geonode_mapstore_client/client/js/routes/Home.jsx
index 16eee3a960..eb6d989db6 100644
--- a/geonode_mapstore_client/client/js/routes/Home.jsx
+++ b/geonode_mapstore_client/client/js/routes/Home.jsx
@@ -6,79 +6,31 @@
  * LICENSE file in the root directory of this source tree.
 */
 
-import React, { useRef, useEffect, useState} from 'react';
+import React from 'react';
 import PropTypes from 'prop-types';
 import { connect } from 'react-redux';
 import url from 'url';
 import { createSelector } from 'reselect';
 import castArray from 'lodash/castArray';
-import { loadLocale } from '@mapstore/framework/actions/locale';
-import { currentLocaleSelector } from '@mapstore/framework/selectors/locale';
-import SearchBar from '@js/components/home/SearchBar';
-import BrandNavbar from '@js/components/home/BrandNavbar';
-import ActionNavBar from '@js/components/ActionNavbar';
-import Hero from '@js/components/home/Hero';
-import CardGrid from '@js/components/home/CardGrid';
-import DetailsPanel from '@js/components/home/DetailsPanel';
-import FiltersMenu from '@js/components/home/FiltersMenu';
-import FiltersForm from '@js/components/FiltersForm';
-import FeaturedList from '@js/components/home/FeaturedList';
-import LanguageSelector from '@js/components/home/LanguageSelector';
+import CardGrid from '@js/components/CardGrid';
+import FiltersMenu from '@js/components/FiltersMenu';
+import FeaturedList from '@js/components/FeaturedList';
 import { getParsedGeoNodeConfiguration } from "@js/selectors/config";
 import { userSelector } from '@mapstore/framework/selectors/security';
 import { buildHrefByTemplate } from '@js/utils/MenuUtils';
-import { setControlProperty } from '@mapstore/framework/actions/controls';
 import {
-    fetchSuggestions,
     searchResources,
-    requestResource,
-    updateSuggestions,
     loadFeaturedResources
 } from '@js/actions/gnsearch';
 
-import { setFavoriteResource } from '@js/actions/gnresource';
-
-import {
-    hashLocationToHref,
-    getFilterById
-} from '@js/utils/GNSearchUtils';
+import { hashLocationToHref } from '@js/utils/GNSearchUtils';
 import { withResizeDetector } from 'react-resize-detector';
-import Footer from '@js/components/home/Footer';
-import { useInView } from 'react-intersection-observer';
-
-import { getResourceTypes, getCategories, getRegions, getOwners, getKeywords } from '@js/api/geonode/v2';
-import MetaTags from "@js/components/MetaTags";
 
 import {
-    getPageSize
+    getThemeLayoutSize
 } from '@js/utils/AppUtils';
 
-const DEFAULT_SUGGESTIONS = [];
 const DEFAULT_RESOURCES = [];
-const ConnectedLanguageSelector = connect(
-    createSelector([
-        currentLocaleSelector
-    ], (value) => ({
-        value
-    })),
-    {
-        onSelect: loadLocale.bind(null, null)
-    }
-)(LanguageSelector);
-
-const ConnectedSearchBar = connect(
-    createSelector([
-        state => state?.gnsearch?.suggestions || DEFAULT_SUGGESTIONS,
-        state => state?.gnsearch?.loading || false
-    ], (suggestions, loading) => ({
-        suggestions,
-        loading
-    })),
-    {
-        onFetchSuggestions: fetchSuggestions,
-        onClearSuggestions: updateSuggestions.bind(null, [])
-    }
-)(SearchBar);
 
 const CardGridWithMessageId = ({ query, user, isFirstRequest, ...props }) => {
     const hasResources = props.resources?.length > 0;
@@ -118,159 +70,29 @@ const ConnectedFeatureList = connect(
     ), {loadFeaturedResources}
 )(FeaturedList);
 
-
-const ConnectedDetailsPanel = connect(
-    createSelector([
-        state => state?.gnresource?.loading || false,
-        state => state?.gnresource?.data?.favorite || false
-    ], (loading, favorite) => ({
-        loading,
-        favorite
-    })),
-    {
-        onFavorite: setFavoriteResource
-    }
-)(DetailsPanel);
-
-const suggestionsRequestTypes = {
-    resourceTypes: {
-        filterKey: 'filter{resource_type.in}',
-        loadOptions: (q, params) => getResourceTypes({ ...params, q }, 'filter{resource_type.in}')
-            .then(results => ({
-                options: results
-                    .map(({ selectOption }) => selectOption)
-            }))
-            .catch(() => null)
-    },
-    categories: {
-        filterKey: 'filter{category.identifier.in}',
-        loadOptions: (q, params) => getCategories({ ...params, q }, 'filter{category.identifier.in}')
-            .then(results => ({
-                options: results
-                    .map(({ selectOption }) => selectOption)
-            }))
-            .catch(() => null)
-    },
-    keywords: {
-        filterKey: 'filter{keywords.slug.in}',
-        loadOptions: (q, params) => getKeywords({ ...params, q }, 'filter{keywords.slug.in}')
-            .then(results => ({
-                options: results
-                    .map(({ selectOption }) => selectOption)
-            }))
-            .catch(() => null)
-    },
-    regions: {
-        filterKey: 'filter{regions.name.in}',
-        loadOptions: (q, params) => getRegions({ ...params, q }, 'filter{regions.name.in}')
-            .then(results => ({
-                options: results
-                    .map(({ selectOption }) => selectOption)
-            }))
-            .catch(() => null)
-    },
-    owners: {
-        filterKey: 'filter{owner.username.in}',
-        loadOptions: (q, params) => getOwners({ ...params, q }, 'filter{owner.username.in}')
-            .then(results => ({
-                options: results
-                    .map(({ selectOption }) => selectOption)
-            }))
-            .catch(() => null)
-    }
-};
-
 function Home({
     location,
     params,
     onSearch,
-    onEnableFiltersPanel,
-    isFiltersPanelEnabled,
     config,
-    hideHero,
-    isFilterForm,
-    onSelect,
-    match,
     user,
     width,
-    resource,
     totalResources,
-    disableFeatured = false,
-    fetchFeaturedResources = () => {},
-    siteName
+    fetchFeaturedResources = () => {}
 }) {
 
+    const cataloguePage = '/catalogue/';
+
     const {
-        menuItemsLeftAllowed,
-        menuItemsRightAllowed,
-        navbarItemsAllowed,
         filterMenuItemsAllowed,
-        footerMenuItemsAllowed,
         cardOptionsItemsAllowed,
-        filtersFormItemsAllowed,
-        theme,
-        filters,
-        menu: {cfg: actionNavbarCfg} = {}
+        filters
     } = config;
-    const pageSize = getPageSize(width);
-    const isMounted = useRef();
-
-    useEffect(() => {
-        isMounted.current = true;
-        return () => {
-            isMounted.current = false;
-        };
-    }, []);
-
-    const brandNavbarNode = useRef();
-    const actionNavbarNode = useRef();
-    const filtersMenuNode = useRef();
-    const footerNode = useRef();
-    const filterFormNode = useRef();
-    const heroNode = useRef();
-
-    const [inViewRef, inView] = useInView();
-
-
-    const brandNavbarHeight = brandNavbarNode.current
-        ? brandNavbarNode.current.getBoundingClientRect().height
-        : 0;
-
-    const actionNavbarNodeHeight = actionNavbarNode.current
-        ? actionNavbarNode.current.getBoundingClientRect().height
-        : 0;
-    const filtersMenuNodeHeight = filtersMenuNode.current
-        ? filtersMenuNode.current.getBoundingClientRect().height
-        : 0;
-    const footerNodeHeight = footerNode.current
-        ? footerNode.current.getBoundingClientRect().height
-        : 0;
-
-    const heroNodeHeight = heroNode.current
-        ? heroNode.current.getBoundingClientRect().height
-        : 0;
-
-
-    const dimensions = {
-        brandNavbarHeight,
-        actionNavbarNodeHeight,
-        filtersMenuNodeHeight,
-        footerNodeHeight,
-        heroNodeHeight
-    };
 
-    const [isSmallDevice, setIsSmallDevice] = useState(false);
-    useEffect(() => {
-        setIsSmallDevice((pageSize === 'sm') ? true : false);
-    }, [pageSize]);
+    const pageSize = getThemeLayoutSize(width);
 
     const handleShowFilterForm = () => {
-        if (!isFilterForm) {
-            window.location = `#/search/${location.search}`;
-            onEnableFiltersPanel(true);
-        } else {
-            onEnableFiltersPanel(!isFiltersPanelEnabled);
-        }
+        window.location = `${cataloguePage}#/search/filter/${location.search}`;
     };
 
     function handleUpdate(newParams, pathname) {
@@ -280,15 +102,7 @@ function Home({
             ...params,
             ...newParams
         }, pathname);
-
     }
-    // to update the overlay form in mobile device, after apply,
-    // the form has to close
-    const handleUpdateSmallDevice = (newParams, pathname) => {
-        handleUpdate(newParams, pathname);
-        handleShowFilterForm();
-    };
-    const [formParams, setFormParams] = useState({});
 
     function handleClear() {
         const { query } = url.parse(location.search, true);
@@ -301,307 +115,103 @@ function Home({
                         [key]: []
                     }
                     : acc, { extent: undefined });
-
-        setFormParams(newParams);
         handleUpdate(newParams);
     }
 
     function handleFormatHref(options) {
-        return hashLocationToHref({
+        return cataloguePage + hashLocationToHref({
             location,
             ...options
         });
     }
 
-    function hrefDetailPanel() {
-        return handleFormatHref({
-            pathname: '/search/'
-        });
-    }
-
-
     const { query } = url.parse(location.search, true);
     const queryFilters = Object.keys(query).reduce((acc, key) => key.indexOf('sort') === 0
         ? acc
         : [...acc, ...castArray(query[key]).map((value) => ({ key, value }))], []);
 
-    const pk = match.params.pk;
-    const ctype = match.params.ctype;
-
-    useEffect(() => {
-        onSelect(pk, ctype);
-    }, [pk, ctype]);
-
-    // update all the information of filter in use on mount
-    // to display the correct labels
-    const [reRender, setReRender] = useState(0);
-
-    const state = useRef(false);
-    state.current = {
-        query
-
-    };
-
-    useEffect(() => {
-        const suggestionsRequestTypesArray = Object.keys(suggestionsRequestTypes)
-            .map((key) => suggestionsRequestTypes[key]);
-        const queryKeys = Object.keys(state.current.query);
-        let updateRequests = [];
-        queryKeys.forEach(queryKey => {
-            const suggestionRequest = suggestionsRequestTypesArray.find(({ filterKey }) => queryKey === filterKey);
-            if (suggestionRequest) {
-                const filtersToUpdate = castArray(state.current.query[queryKey]).filter((value) => !getFilterById(queryKey, value));
-                if (filtersToUpdate?.length > 0) {
-                    const request = suggestionRequest.loadOptions.bind(null, '', { idIn: filtersToUpdate });
-                    updateRequests.push(request);
-                }
-            }
-        });
-        Promise.all(updateRequests.map((request) => request()))
-            .then(() => {
-                if (isMounted.current) {
-                    setReRender(reRender + 1);
-                }
-            });
-
-
-    }, []);
-
-    const search = (
-        <ConnectedSearchBar
-            key="search"
-            value={params.q || ''}
-            style={{
-                width: '100%',
-                maxWidth: 716,
-                margin: 'auto'
-            }}
-            onChange={(value) =>
-                handleUpdate({
-                    q: value
-                }, '/search/')}
-        >
-        </ConnectedSearchBar>
-    );
-
-    const isHeroVisible = !hideHero && inView;
-    const stickyFiltersMaxHeight = (window.innerHeight - dimensions.brandNavbarHeight - dimensions.actionNavbarNodeHeight - dimensions.footerNodeHeight);
-    const filterFormTop = dimensions.brandNavbarHeight + dimensions.actionNavbarNodeHeight;
     return (
-        <div className={`gn-home`}>
-            <MetaTags
-                logo={resource ? resource.thumbnail_url : window.location.origin + config?.navbar?.logo[0]?.src}
-                title={(resource?.title) ? resource?.title + " - " + siteName : siteName }
-                siteName={siteName}
-                contentURL={resource?.detail_url}
-                content={resource?.abstract}
-            />
-            <BrandNavbar
-                ref={brandNavbarNode}
-                logo={castArray(config?.navbar?.logo || [])
-                    .map((logo) => ({
-                        ...logo,
-                        ...logo[pageSize]
-                    }))}
-                navItems={navbarItemsAllowed}
-                inline={pageSize !== 'sm'}
-                pageSize={pageSize}
-                style={{
-                    ...theme?.navbar?.style,
-                    width
-                }}
-            >
-                {!isHeroVisible && search}
-            </BrandNavbar>
-            {!hideHero && <Hero
-                ref={heroNode}
-                style={{
-                    marginTop: dimensions.brandNavbarHeight,
-                    ...theme?.hero?.style
-                }}
-                jumbotronStyle={theme?.jumbotron?.style}
-            >
-                <div ref={inViewRef}>
-                    {isHeroVisible && search}
-                </div>
-            </Hero>}
-            <ActionNavBar
-                ref={actionNavbarNode}
-                style={{
-                    top: dimensions.brandNavbarHeight
-
-                }}
-                cfg={actionNavbarCfg}
-                screen={width}
-                query={query}
-                leftItems={menuItemsLeftAllowed || []}
-                rightItems={menuItemsRightAllowed || []}
-                formatHref={handleFormatHref}
-                tools={<ConnectedLanguageSelector
-                    inline={theme?.languageSelector?.inline}
-                    style={theme?.languageSelector?.style}
-                />}
-
-            />
-            <div className="gn-main-home">
-
-                <div className="gn-container">
-                    <div className="gn-row gn-home-section">
-                        <div className="gn-grid-container">
-                            {!disableFeatured &&  <ConnectedFeatureList
-                                query={query}
-                                formatHref={handleFormatHref}
-                                buildHrefByTemplate={buildHrefByTemplate}
-                                onLoad={fetchFeaturedResources}
-                                containerStyle={{
-                                    minHeight: 'auto'
-                                }}/> }
+        <div className="gn-container">
+            <div className="gn-row gn-home-section">
+                <div className="gn-grid-container">
+                    <ConnectedFeatureList
+                        query={query}
+                        formatHref={handleFormatHref}
+                        buildHrefByTemplate={buildHrefByTemplate}
+                        onLoad={fetchFeaturedResources}
+                        containerStyle={{
+                            minHeight: 'auto'
+                        }}/>
 
-                        </div>
-                    </div>
-                    <div className="gn-row">
-                        {isMounted.current && isFiltersPanelEnabled && isFilterForm &&  <div ref={filterFormNode} id="gn-filter-form-container" className={`gn-filter-form-container`}>
-                            <FiltersForm
-                                key="gn-filter-form"
-                                id="gn-filter-form"
-                                styleContainerForm={ hideHero ? { marginTop: dimensions.brandNavbarHeight, top: filterFormTop, maxHeight: stickyFiltersMaxHeight } :
-                                    { top: filterFormTop, maxHeight: stickyFiltersMaxHeight }}
-                                fields={filtersFormItemsAllowed}
-                                extentProps={filters?.extent}
-                                suggestionsRequestTypes={suggestionsRequestTypes}
-                                query={query}
-                                onChange={isSmallDevice && handleUpdateSmallDevice || handleUpdate}
-                                onClose={handleShowFilterForm}
-                                onClear={handleClear}
-                                submitOnChangeField={!isSmallDevice}
-                                formParams={formParams}
-                            />
-
-                        </div>
-                        }
-
-                        <div className="gn-grid-container">
-                            <ConnectedCardGrid
-                                user={user}
-                                query={query}
-                                pageSize={pageSize}
-                                cardOptions={cardOptionsItemsAllowed}
-                                isColumnActive={!!resource}
-                                buildHrefByTemplate={buildHrefByTemplate}
-                                containerStyle={!isHeroVisible
-                                    ? {
-                                        marginTop: hideHero && dimensions.brandNavbarHeight,
-                                        paddingBottom: dimensions.footerNodeHeight
-                                    }
-                                    : undefined}
-                                column={ hideHero &&
-                                    <ConnectedDetailsPanel
-                                        enableFavorite={!!user}
-                                        resource={resource}
-                                        linkHref={hrefDetailPanel}
-                                        formatHref={handleFormatHref}
-                                        sectionStyle={{
-                                            width: pageSize === 'lg'
-                                                ? 700
-                                                : pageSize === 'md'
-                                                    ? 600
-                                                    : '100%',
-                                            ...(!isHeroVisible && {
-                                                position: 'fixed',
-                                                top: dimensions.brandNavbarHeight + dimensions.actionNavbarNodeHeight,
-                                                bottom: dimensions.footerNodeHeight,
-                                                overflowY: 'scroll',
-                                                height: 'auto'
-                                            })
-                                        }}
-                                    />
-                                }
-                                isCardActive={res => res.pk === pk}
-                                page={params.page ? parseFloat(params.page) : 1}
-                                formatHref={handleFormatHref}
-                                onLoad={(value) => {
-                                    handleUpdate({
-                                        page: value
-                                    });
-                                }}
-                            >
-
-                                <FiltersMenu
-                                    ref={filtersMenuNode}
-                                    style={{
-                                        top: dimensions.brandNavbarHeight + dimensions.actionNavbarNodeHeight
-                                    }}
-                                    formatHref={handleFormatHref}
-                                    cardsMenu={filterMenuItemsAllowed || []}
-                                    order={query?.sort}
-                                    onClear={handleClear}
-                                    onClick={handleShowFilterForm}
-                                    orderOptions={filters?.order?.options}
-                                    defaultLabelId={filters?.order?.defaultLabelId}
-                                    totalResources={totalResources}
-                                    totalFilters={queryFilters.length}
-                                    filtersActive={!!(queryFilters.length > 0)}
-                                />
-
-                            </ConnectedCardGrid>
-                        </div>
-                    </div>
                 </div>
             </div>
-            <Footer
-                ref={footerNode}
-                footerItems={footerMenuItemsAllowed || []}
-                style={theme?.footer?.style}
-            />
+            <div className="gn-row">
+                <div className="gn-grid-container">
+                    <ConnectedCardGrid
+                        user={user}
+                        query={query}
+                        pageSize={pageSize}
+                        cardOptions={cardOptionsItemsAllowed}
+                        buildHrefByTemplate={buildHrefByTemplate}
+                        page={params.page ? parseFloat(params.page) : 1}
+                        formatHref={handleFormatHref}
+                        onLoad={(value) => {
+                            handleUpdate({
+                                page: value
+                            });
+                        }}
+                    >
+                        <FiltersMenu
+                            formatHref={handleFormatHref}
+                            cardsMenu={filterMenuItemsAllowed || []}
+                            order={query?.sort}
+                            onClear={handleClear}
+                            onClick={handleShowFilterForm}
+                            orderOptions={filters?.order?.options}
+                            defaultLabelId={filters?.order?.defaultLabelId}
+                            totalResources={totalResources}
+                            totalFilters={queryFilters.length}
+                            filtersActive={!!(queryFilters.length > 0)}
+                        />
+                    </ConnectedCardGrid>
+                </div>
+            </div>
         </div>
     );
 }
 
 Home.propTypes = {
-    dispatch: PropTypes.func,
-    history: PropTypes.object,
     location: PropTypes.object,
-    match: PropTypes.object,
-    plugins: PropTypes.object,
-    pluginsConfig: PropTypes.array,
-    background: PropTypes.object,
-    logo: PropTypes.array,
-    jumbotron: PropTypes.object
+    params: PropTypes.object,
+    onSearch: PropTypes.func,
+    config: PropTypes.object,
+    user: PropTypes.object,
+    width: PropTypes.number,
+    totalResources: PropTypes.object,
+    fetchFeaturedResources: PropTypes.func
 };
 
 Home.defaultProps = {
-    background: {},
-    logo: [],
-    jumbotron: {},
-    isFilterForm: false
+    onSearch: () => {},
+    fetchFeaturedResources: () => {}
 };
 
 const DEFAULT_PARAMS = {};
 
-
 const ConnectedHome = connect(
-
     createSelector([
         state => state?.gnsearch?.params || DEFAULT_PARAMS,
         userSelector,
-        state => state?.gnresource?.data || null,
-        state => state?.controls?.gnFiltersPanel?.enabled || null,
         getParsedGeoNodeConfiguration,
-        state => state?.gnsearch?.total || 0,
-        state => state?.localConfig?.siteName || "Geonode"
-    ], (params, user, resource, isFiltersPanelEnabled, config, totalResources, siteName) => ({
+        state => state?.gnsearch?.total || 0
+    ], (params, user, config, totalResources) => ({
         params,
         user,
-        resource,
-        isFiltersPanelEnabled,
         config,
-        totalResources,
-        siteName
+        totalResources
     })),
     {
         onSearch: searchResources,
-        onSelect: requestResource,
-        onEnableFiltersPanel: setControlProperty.bind(null, 'gnFiltersPanel', 'enabled'),
         fetchFeaturedResources: loadFeaturedResources
     }
 )(withResizeDetector(Home));
diff --git a/geonode_mapstore_client/client/js/routes/Search.jsx b/geonode_mapstore_client/client/js/routes/Search.jsx
index 5f985733c0..948e59a17f 100644
--- a/geonode_mapstore_client/client/js/routes/Search.jsx
+++ b/geonode_mapstore_client/client/js/routes/Search.jsx
@@ -1,8 +1,364 @@
+/*
+ * Copyright 2020, GeoSolutions Sas.
+ * All rights reserved.
+ *
+ * This source code is licensed under the BSD-style license found in the
+ * LICENSE file in the root directory of this source tree.
+*/
 
+import React, { useRef, useEffect, useState} from 'react';
+import PropTypes from 'prop-types';
 import { connect } from 'react-redux';
-import Home from '@js/routes/Home';
+import url from 'url';
+import { createSelector } from 'reselect';
+import castArray from 'lodash/castArray';
+import CardGrid from '@js/components/CardGrid';
+import FiltersMenu from '@js/components/FiltersMenu';
+import FiltersForm from '@js/components/FiltersForm';
+import { getParsedGeoNodeConfiguration } from "@js/selectors/config";
+import { userSelector } from '@mapstore/framework/selectors/security';
+import { buildHrefByTemplate } from '@js/utils/MenuUtils';
+import { setControlProperty } from '@mapstore/framework/actions/controls';
+import {
+    searchResources,
+    requestResource,
+    loadFeaturedResources
+} from '@js/actions/gnsearch';
 
-const SearchRoute = connect(() => ({ hideHero: true, isFilterForm: true, disableFeatured: true })
-)((Home));
+import {
+    hashLocationToHref,
+    getFilterById
+} from '@js/utils/GNSearchUtils';
+import { withResizeDetector } from 'react-resize-detector';
 
-export default SearchRoute;
+import { getResourceTypes, getCategories, getRegions, getOwners, getKeywords } from '@js/api/geonode/v2';
+import MetaTags from "@js/components/MetaTags";
+
+import {
+    getThemeLayoutSize
+} from '@js/utils/AppUtils';
+
+const DEFAULT_RESOURCES = [];
+
+const CardGridWithMessageId = ({ query, user, isFirstRequest, ...props }) => {
+    const hasResources = props.resources?.length > 0;
+    const hasFilter = Object.keys(query || {}).filter(key => key !== 'sort').length > 0;
+    const isLoggedIn = !!user;
+    const messageId = !hasResources && !isFirstRequest && !props.loading
+        ? hasFilter && 'noResultsWithFilter'
+            || isLoggedIn && 'noContentYet'
+            || 'noPublicContent'
+        : undefined;
+    return <CardGrid { ...props } messageId={messageId}  />;
+};
+
+const ConnectedCardGrid = connect(
+    createSelector([
+        state => state?.gnsearch?.resources || DEFAULT_RESOURCES,
+        state => state?.gnsearch?.loading || false,
+        state => state?.gnsearch?.isNextPageAvailable || false,
+        state => state?.gnsearch?.isFirstRequest
+    ], (resources, loading, isNextPageAvailable, isFirstRequest) => ({
+        resources,
+        loading,
+        isNextPageAvailable,
+        isFirstRequest
+    }))
+)(CardGridWithMessageId);
+
+const suggestionsRequestTypes = {
+    resourceTypes: {
+        filterKey: 'filter{resource_type.in}',
+        loadOptions: (q, params) => getResourceTypes({ ...params, q }, 'filter{resource_type.in}')
+            .then(results => ({
+                options: results
+                    .map(({ selectOption }) => selectOption)
+            }))
+            .catch(() => null)
+    },
+    categories: {
+        filterKey: 'filter{category.identifier.in}',
+        loadOptions: (q, params) => getCategories({ ...params, q }, 'filter{category.identifier.in}')
+            .then(results => ({
+                options: results
+                    .map(({ selectOption }) => selectOption)
+            }))
+            .catch(() => null)
+    },
+    keywords: {
+        filterKey: 'filter{keywords.slug.in}',
+        loadOptions: (q, params) => getKeywords({ ...params, q }, 'filter{keywords.slug.in}')
+            .then(results => ({
+                options: results
+                    .map(({ selectOption }) => selectOption)
+            }))
+            .catch(() => null)
+    },
+    regions: {
+        filterKey: 'filter{regions.name.in}',
+        loadOptions: (q, params) => getRegions({ ...params, q }, 'filter{regions.name.in}')
+            .then(results => ({
+                options: results
+                    .map(({ selectOption }) => selectOption)
+            }))
+            .catch(() => null)
+    },
+    owners: {
+        filterKey: 'filter{owner.username.in}',
+        loadOptions: (q, params) => getOwners({ ...params, q }, 'filter{owner.username.in}')
+            .then(results => ({
+                options: results
+                    .map(({ selectOption }) => selectOption)
+            }))
+            .catch(() => null)
+    }
+};
+
+function Search({
+    location,
+    params,
+    onSearch,
+    onEnableFiltersPanel,
+    isFiltersPanelEnabled,
+    config,
+    onSelect,
+    match,
+    user,
+    width,
+    totalResources,
+    resource,
+    siteName
+}) {
+
+    const {
+        filterMenuItemsAllowed,
+        cardOptionsItemsAllowed,
+        filtersFormItemsAllowed,
+        filters
+    } = config;
+    const themeLayoutSize = getThemeLayoutSize(width);
+    const isMounted = useRef();
+
+    useEffect(() => {
+        isMounted.current = true;
+        return () => {
+            isMounted.current = false;
+        };
+    }, []);
+
+    useEffect(() => {
+        if (match.url === '/search/filter/') {
+            onEnableFiltersPanel(true);
+        }
+    }, [match.url]);
+
+    const filtersMenuNode = useRef();
+
+    const [isSmallDevice, setIsSmallDevice] = useState(false);
+    useEffect(() => {
+        setIsSmallDevice((themeLayoutSize === 'sm') ? true : false);
+    }, [themeLayoutSize]);
+
+    const handleShowFilterForm = () => {
+        onEnableFiltersPanel(!isFiltersPanelEnabled);
+    };
+
+    function handleUpdate(newParams, pathname) {
+        const { query } = url.parse(location.search, true);
+        onSearch({
+            ...query,
+            ...params,
+            ...newParams
+        }, pathname);
+
+    }
+    // to update the overlay form in mobile device, after apply,
+    // the form has to close
+    const handleUpdateSmallDevice = (newParams, pathname) => {
+        handleUpdate(newParams, pathname);
+        handleShowFilterForm();
+    };
+    const [formParams, setFormParams] = useState({});
+
+    function handleClear() {
+        const { query } = url.parse(location.search, true);
+        const newParams = Object.keys(query)
+            .reduce((acc, key) =>
+                key.indexOf('filter') === 0
+                || key === 'f'
+                || key === 'q'
+                    ? {
+                        ...acc,
+                        [key]: []
+                    }
+                    : acc, { extent: undefined });
+
+        setFormParams(newParams);
+        handleUpdate(newParams);
+    }
+
+    function handleFormatHref(options) {
+        return hashLocationToHref({
+            location,
+            ...options
+        });
+    }
+
+    const { query } = url.parse(location.search, true);
+    const queryFilters = Object.keys(query).reduce((acc, key) => key.indexOf('sort') === 0
+        ? acc
+        : [...acc, ...castArray(query[key]).map((value) => ({ key, value }))], []);
+
+    const pk = match.params.pk;
+    const ctype = match.params.ctype;
+
+    useEffect(() => {
+        onSelect(pk, ctype);
+    }, [pk, ctype]);
+
+    // update all the information of filter in use on mount
+    // to display the correct labels
+    const [reRender, setReRender] = useState(0);
+
+    const state = useRef(false);
+    state.current = {
+        query
+
+    };
+
+    useEffect(() => {
+        const suggestionsRequestTypesArray = Object.keys(suggestionsRequestTypes)
+            .map((key) => suggestionsRequestTypes[key]);
+        const queryKeys = Object.keys(state.current.query);
+        let updateRequests = [];
+        queryKeys.forEach(queryKey => {
+            const suggestionRequest = suggestionsRequestTypesArray.find(({ filterKey }) => queryKey === filterKey);
+            if (suggestionRequest) {
+                const filtersToUpdate = castArray(state.current.query[queryKey]).filter((value) => !getFilterById(queryKey, value));
+                if (filtersToUpdate?.length > 0) {
+                    const request = suggestionRequest.loadOptions.bind(null, '', { idIn: filtersToUpdate });
+                    updateRequests.push(request);
+                }
+            }
+        });
+        Promise.all(updateRequests.map((request) => request()))
+            .then(() => {
+                if (isMounted.current) {
+                    setReRender(reRender + 1);
+                }
+            });
+
+
+    }, []);
+
+    const scrollContainer = useRef();
+
+    return (
+        <>
+            <MetaTags
+                logo={resource ? resource.thumbnail_url : window.location.origin + config?.navbar?.logo[0]?.src}
+                title={(resource?.title) ? resource?.title + " - " + siteName : siteName }
+                siteName={siteName}
+                contentURL={resource?.detail_url}
+                content={resource?.abstract}
+            />
+            <div className={`gn-fixed-card-grid gn-size-${themeLayoutSize}`}>
+                {isFiltersPanelEnabled && <FiltersForm
+                    key="gn-filter-form"
+                    id="gn-filter-form"
+                    fields={filtersFormItemsAllowed}
+                    extentProps={filters?.extent}
+                    suggestionsRequestTypes={suggestionsRequestTypes}
+                    query={query}
+                    onChange={isSmallDevice && handleUpdateSmallDevice || handleUpdate}
+                    onClose={handleShowFilterForm}
+                    onClear={handleClear}
+                    submitOnChangeField={!isSmallDevice}
+                    formParams={formParams}
+                />}
+                <div ref={scrollContainer} className="gn-grid-container">
+                    <ConnectedCardGrid
+                        user={user}
+                        query={query}
+                        cardOptions={cardOptionsItemsAllowed}
+                        buildHrefByTemplate={buildHrefByTemplate}
+                        isCardActive={res => res.pk === pk}
+                        page={params.page ? parseFloat(params.page) : 1}
+                        formatHref={handleFormatHref}
+                        scrollContainer={scrollContainer.current}
+                        onLoad={(value) => {
+                            handleUpdate({
+                                page: value
+                            });
+                        }}
+                    >
+                        <FiltersMenu
+                            ref={filtersMenuNode}
+                            formatHref={handleFormatHref}
+                            cardsMenu={filterMenuItemsAllowed || []}
+                            order={query?.sort}
+                            onClear={handleClear}
+                            onClick={handleShowFilterForm}
+                            orderOptions={filters?.order?.options}
+                            defaultLabelId={filters?.order?.defaultLabelId}
+                            totalResources={totalResources}
+                            totalFilters={queryFilters.length}
+                            filtersActive={!!(queryFilters.length > 0)}
+                        />
+                    </ConnectedCardGrid>
+                </div>
+            </div>
+        </>
+    );
+}
+
+Search.propTypes = {
+    dispatch: PropTypes.func,
+    history: PropTypes.object,
+    location: PropTypes.object,
+    match: PropTypes.object,
+    plugins: PropTypes.object,
+    pluginsConfig: PropTypes.array,
+    background: PropTypes.object,
+    logo: PropTypes.array,
+    jumbotron: PropTypes.object
+};
+
+Search.defaultProps = {
+    background: {},
+    logo: [],
+    jumbotron: {},
+    isFilterForm: false
+};
+
+const DEFAULT_PARAMS = {};
+
+
+const ConnectedSearch = connect(
+
+    createSelector([
+        state => state?.gnsearch?.params || DEFAULT_PARAMS,
+        userSelector,
+        state => state?.gnresource?.data || null,
+        state => state?.controls?.gnFiltersPanel?.enabled || null,
+        getParsedGeoNodeConfiguration,
+        state => state?.gnsearch?.total || 0,
+        state => state?.localConfig?.siteName || "Geonode"
+    ], (params, user, resource, isFiltersPanelEnabled, config, totalResources, siteName) => ({
+        params,
+        user,
+        resource,
+        isFiltersPanelEnabled,
+        config,
+        totalResources,
+        siteName
+    })),
+    {
+        onSearch: searchResources,
+        onSelect: requestResource,
+        onEnableFiltersPanel: setControlProperty.bind(null, 'gnFiltersPanel', 'enabled'),
+        fetchFeaturedResources: loadFeaturedResources
+    }
+)(withResizeDetector(Search));
+
+export default ConnectedSearch;
diff --git a/geonode_mapstore_client/client/js/utils/AppUtils.js b/geonode_mapstore_client/client/js/utils/AppUtils.js
index ad5cbc81b5..9299c889c2 100644
--- a/geonode_mapstore_client/client/js/utils/AppUtils.js
+++ b/geonode_mapstore_client/client/js/utils/AppUtils.js
@@ -179,7 +179,7 @@ export function setupConfiguration({
     };
 }
 
-export function getPageSize(width) {
+export function getThemeLayoutSize(width) {
     if (width < 968) {
         return 'sm';
     }
diff --git a/geonode_mapstore_client/client/js/utils/GNSearchUtils.js b/geonode_mapstore_client/client/js/utils/GNSearchUtils.js
index dcc07b60a8..e35b9e2673 100644
--- a/geonode_mapstore_client/client/js/utils/GNSearchUtils.js
+++ b/geonode_mapstore_client/client/js/utils/GNSearchUtils.js
@@ -83,7 +83,7 @@ export const getResourceTypesInfo = () => ({
             config: 'layer_preview',
             theme: 'preview'
         }),
-        formatDetailUrl: (resource) => (`/viewer/#/layer/${resource.pk}`),
+        formatDetailUrl: (resource) => (`/catalogue/#/layer/${resource.pk}`),
         name: 'Layer'
     },
     'map': {
@@ -92,28 +92,28 @@ export const getResourceTypesInfo = () => ({
             config: 'map_preview',
             theme: 'preview'
         }),
-        formatDetailUrl: (resource) => (`/viewer/#/map/${resource.pk}`),
+        formatDetailUrl: (resource) => (`/catalogue/#/map/${resource.pk}`),
         name: 'Map'
     },
     'document': {
         icon: 'file',
         name: 'Document',
-        formatDetailUrl: (resource) => (`/viewer/#/document/${resource.pk}`)
+        formatDetailUrl: (resource) => (`/catalogue/#/document/${resource.pk}`)
     },
     'geostory': {
         icon: 'book-open',
         name: 'GeoStory',
-        formatDetailUrl: (resource) => (`/viewer/#/geostory/${resource.pk}`)
+        formatDetailUrl: (resource) => (`/catalogue/#/geostory/${resource.pk}`)
     },
     'image': {
         icon: 'file-image',
         name: 'Image',
-        formatDetailUrl: (resource) => (`/viewer/#/document/${resource.pk}`)
+        formatDetailUrl: (resource) => (`/catalogue/#/document/${resource.pk}`)
     },
     'video': {
         icon: 'file-video',
         name: 'Video',
-        formatDetailUrl: (resource) => (`/viewer/#/document/${resource.pk}`)
+        formatDetailUrl: (resource) => (`/catalogue/#/document/${resource.pk}`)
     }
 });
 
diff --git a/geonode_mapstore_client/client/static/mapstore/configs/localConfig.json b/geonode_mapstore_client/client/static/mapstore/configs/localConfig.json
index 288f7e8da0..34f0b3a16b 100644
--- a/geonode_mapstore_client/client/static/mapstore/configs/localConfig.json
+++ b/geonode_mapstore_client/client/static/mapstore/configs/localConfig.json
@@ -350,7 +350,7 @@
                             "labelId": "gnhome.map",
                             "value": "map",
                             "type": "link",
-                            "href": "/viewer/#/map/new",
+                            "href": "/catalogue/#/map/new",
                             "authenticated": true,
                             "perms": [{ "type": "user", "value": "add_resource" }]
                         },
@@ -358,7 +358,7 @@
                             "labelId": "gnhome.geostory",
                             "value": "geostory",
                             "type": "link",
-                            "href": "/viewer/#/geostory/new",
+                            "href": "/catalogue/#/geostory/new",
                             "authenticated": true,
                             "perms": [{ "type": "user", "value": "add_resource" }]
                         }
@@ -543,7 +543,7 @@
                         },
                         {
                             "type": "link",
-                            "href": "/viewer/#/map/new",
+                            "href": "/catalogue/#/map/new",
                             "labelId": "gnhome.createMap",
                             "authenticated": true,
                             "permissions": [],
@@ -571,7 +571,7 @@
                         },
                         {
                             "type": "link",
-                            "href": "/viewer/#/geostory/new",
+                            "href": "/catalogue/#/geostory/new",
                             "labelId": "gnhome.createGeostory",
                             "authenticated": true,
                             "permissions": [],
@@ -2617,7 +2617,7 @@
                         },
                         {
                             "type": "plugin",
-                            "name": "ButtonViewer"
+                            "name": "DetailViewerButton"
                         },
                         {
                             "labelId": "gnviewer.edit",
@@ -2667,9 +2667,6 @@
                     ]
                 }
             },
-            {
-                "name": "Print"
-            },
             {
                 "name": "SaveAs",
                 "cfg": {
@@ -2688,9 +2685,6 @@
                     "pathTemplate": "/maps/{id}/embed"
                 }
             },
-            {
-                "name": "BrandNavbar"
-            },
             {
                 "name": "DetailViewer"
             },
@@ -2949,9 +2943,6 @@
                     ]
                 }
             },
-            {
-                "name": "BrandNavbar"
-            },
             {
                 "name": "FeatureEditor",
                 "override": {
@@ -3068,9 +3059,6 @@
                     ]
                 }
             },
-            {
-                "name": "BrandNavbar"
-            },
             {
                 "name": "StyleEditor",
                 "cfg": {
@@ -3176,7 +3164,7 @@
                         },
                         {
                             "type": "plugin",
-                            "name": "ButtonViewer"
+                            "name": "DetailViewerButton"
                         },
                         {
                             "labelId": "gnviewer.edit",
@@ -3213,8 +3201,6 @@
                 }
             },
             { "name": "DetailViewer"},
-            { "name": "ButtonViewer"},
-            { "name": "BrandNavbar" },
             {
                 "name": "Map",
                 "cfg": {
@@ -3598,7 +3584,7 @@
                         },
                         {
                             "type": "plugin",
-                            "name": "ButtonViewer"
+                            "name": "DetailViewerButton"
                         },
                         {
                             "labelId": "gnviewer.edit",
@@ -3625,8 +3611,6 @@
                     ]
                 }
             },
-            { "name": "BrandNavbar" },
-            { "name": "ButtonViewer" },
             { "name": "DetailViewer"},
             {
                 "name": "GeoStory",
@@ -3756,7 +3740,7 @@
                         },
                         {
                             "type": "plugin",
-                            "name": "ButtonViewer"
+                            "name": "DetailViewerButton"
                         },
                         {
                             "labelId": "gnviewer.edit",
@@ -3784,9 +3768,7 @@
                     ]
                 }
             },
-            { "name": "BrandNavbar" },
             { "name": "DetailViewer"},
-            { "name": "ButtonViewer"},
             { "name": "Save" },
             { "name": "SaveAs" },
             { "name": "Share" },
diff --git a/geonode_mapstore_client/client/themes/geonode/less/_action-navbar.less b/geonode_mapstore_client/client/themes/geonode/less/_action-navbar.less
deleted file mode 100644
index 5fc8eddd64..0000000000
--- a/geonode_mapstore_client/client/themes/geonode/less/_action-navbar.less
+++ /dev/null
@@ -1,158 +0,0 @@
-//
-// Copyright 2021, GeoSolutions Sas.
-// All rights reserved.
-//
-// This source code is licensed under the BSD-style license found in the
-// LICENSE file in the root directory of this source tree.
-//
-
-// **************
-// Theme
-// **************
-
-#gn-components-theme(@theme-vars) {
-    .gn-action-navbar {
-        .color-var(@theme-vars[primary-contrast]);
-        .background-color-var(@theme-vars[primary]);
-        .badge {
-            .color-var(@theme-vars[primary]);
-            .background-color-var(@theme-vars[primary-contrast]);
-        }
-        .dropdown-menu .badge {
-            .color-var(@theme-vars[primary-contrast]);
-            .background-color-var(@theme-vars[primary]);
-        }
-    }
-}
-
-// **************
-// Layout
-// **************
-
-.gn-action-navbar {
-    position: sticky;
-    min-height: 3rem;
-    width: 100%;
-    padding: 0.5rem 0;
-    z-index: 15;
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-    .badge {
-        display: inline;
-        margin-left: 0.5rem;
-        padding: 0.2rem;
-        font-size: 0.6rem;
-        border-radius: 0.2rem;
-    }
-    .gn-action-navbar-container {
-        display: flex;
-        flex-direction: row;
-        align-items: center;
-        margin: auto;
-        width: 100%;
-        .gn-action-navbar-content {
-            display: flex;
-            flex-direction: row;
-            flex: 1;
-            padding: 0 0.8rem;
-            ul:not(.dropdown-menu) {
-                display: inline-flex;
-                align-items: center;
-                flex-direction: row;
-                list-style-type: none;
-                padding: 0;
-                margin: 0;
-                min-width: 360px;
-                > li{
-                    display: inline-block;
-                    align-items: center;
-                    vertical-align: middle;
-                }
-                > li + li {
-                    margin-left: 0.1rem;
-                }
-            }
-            .gn-action-navbar-content-left {
-                display: flex;
-                flex: 1;
-                flex-direction: row;
-                .gn-menu-index-divider {
-                    width: 1px;
-                    height: 1.2rem;
-                }
-            }
-
-            .gn-action-navbar-content-right {
-                display: flex;
-                flex: 1;
-                flex-direction: row-reverse;
-                > ul:not(.dropdown-menu) {
-                    display: flex;
-                    flex: 1;
-                    flex-direction: row-reverse;
-                    > li{
-                        display: flex;
-                    }
-                    > li + li {
-                        margin-right: 0.4rem;
-                    }
-                }
-            }
-            .gn-action-navbar-content-tools {
-                margin-left: 0.4rem;
-            }
-        }
-        .gn-action-navbar-tools > * {
-            margin: 0 0.8rem;
-        }
-        .gn-action-navbar-divider {
-            width: 1px;
-            height: 1.2rem;
-        }
-        .gn-action-navbar-tools {
-            display: flex;
-            align-items: center;
-            /* remove this inline style of dropdown because they cause issue with overflow x*/
-            .dropdown-menu {
-                transform: none !important;
-                inset: unset !important;
-            }
-            .dropdown-menu-right {
-                right: 0 !important;
-            }
-            .gn-action-navbar-right-items {
-                display: flex;
-                align-items: center;
-                list-style-type: none;
-                padding: 0;
-                margin: 0;
-                li + li {
-                    margin-left: 0.4rem;
-                }
-            }
-        }
-
-        .btn-default,
-        .gn-tag {
-            font-size: @font-size-base;
-            border: none;
-            padding: 0.25rem 0.5rem;
-            border-radius: 0.25rem;
-        }
-        .gn-language-selector.inline {
-            padding: 0.5rem;
-        }
-        .gn-language-selector {
-            &> .btn-default {
-                &.active {
-                    color: inherit;
-                    background-color: inherit;
-                    font-weight: bold;
-                    text-decoration: underline;
-                    box-shadow: none;
-                }
-            }
-        }
-    }
-}
diff --git a/geonode_mapstore_client/client/themes/geonode/less/_base.less b/geonode_mapstore_client/client/themes/geonode/less/_base.less
index ae0d3a27bc..1c8f0dab3b 100644
--- a/geonode_mapstore_client/client/themes/geonode/less/_base.less
+++ b/geonode_mapstore_client/client/themes/geonode/less/_base.less
@@ -5,6 +5,7 @@
 
 #gn-base-components-theme(@theme-vars) {
     [data-ms2-container],
+    body,
     .gn-theme {
         .color-var(@theme-vars[main-color]);
         .background-color-var(@theme-vars[main-bg]);
@@ -51,6 +52,20 @@
         .color-var(@theme-vars[badge-color]);
         .background-color-var(@theme-vars[badge-bg]);
     }
+
+    .label {
+        .color-var(@theme-vars[main-color]);
+        .background-color-var(@theme-vars[main-bg]);
+    }
+    
+    .label-default {
+        .color-var(@theme-vars[primary-contrast]);
+        .background-color-var(@theme-vars[primary]);
+    }
+
+    .page-header {
+        .border-color-var(@theme-vars[main-border-color]);
+    }
 }
 
 // **************
@@ -65,3 +80,37 @@
     line-height: 1.5;
     text-align: left;
 }
+
+.gn-catalogue {
+    display: flex;
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    z-index: 99999;
+    flex-direction: column;
+    .gn-footer {
+        position: relative;
+    }
+    .gn-main-header {
+        z-index: 150;
+    }
+    #ms-container {
+        flex: 1;
+        position: relative;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        z-index: 0;
+        overflow: hidden;
+        transform: translate(0, 0);
+    }
+}
+
+.gn-homepage {
+    .app-router {
+        position: relative !important;
+    }
+}
diff --git a/geonode_mapstore_client/client/themes/geonode/less/_brand-navbar.less b/geonode_mapstore_client/client/themes/geonode/less/_brand-navbar.less
deleted file mode 100644
index d10d36c7ba..0000000000
--- a/geonode_mapstore_client/client/themes/geonode/less/_brand-navbar.less
+++ /dev/null
@@ -1,79 +0,0 @@
-/*
- * Copyright 2020, GeoSolutions Sas.
- * All rights reserved.
- *
- * This source code is licensed under the BSD-style license found in the
- * LICENSE file in the root directory of this source tree.
- */
-
-// **************
-// Theme
-// **************
-
-#gn-components-theme(@theme-vars) {
-    .gn-brand-navbar {
-        .color-var(@theme-vars[main-color]);
-        .background-color-var(@theme-vars[main-bg]);
-    }
-}
-
-// **************
-// Layout
-// **************
-
-.gn-brand-navbar {
-    position: fixed;
-    top: 0;
-    left: 0;
-    z-index: 30;
-    padding: 0.5rem 0;
-    min-height: 4rem;
-    width: 100%;
-
-    .gn-brand-navbar-container {
-        display: flex;
-        flex-direction: row;
-        align-items: center;
-        width: 100%;
-        margin: auto;
-        .gn-brand-navbar-left-side,
-        .gn-brand-navbar-right-side {
-            flex: 1;
-            white-space: nowrap;
-            padding: 0 0.4rem;
-            list-style-type: none;
-            margin: 0;
-            margin: 0 0.4rem;
-        }
-        .gn-brand-navbar-left-side img,
-        .gn-brand-navbar-right-side img {
-            width: auto;
-            height: 2.5rem;
-        }
-        .gn-brand-navbar-left-side img {
-            padding: 0 0.5rem;
-        }
-        .gn-brand-navbar-center {
-            width: 100%;
-            max-width: 716px;
-            position: relative;
-        }
-        .gn-brand-navbar-right-side {
-            display: flex;
-            flex-direction: row-reverse;
-        }
-    }
-    .gn-user-dropdown {
-        .btn {
-            padding: 0 0.4rem;
-        }
-        .dropdown-toggle > img {
-            width: auto;
-            height: 2.5rem;
-            border-radius: 50%;
-        }
-        .dropdown-item .fa {
-            margin-right: 0.5rem;
-        }
-    }
-}
diff --git a/geonode_mapstore_client/client/themes/geonode/less/_card-grid.less b/geonode_mapstore_client/client/themes/geonode/less/_card-grid.less
index 915337d6e5..0ba0cc955d 100644
--- a/geonode_mapstore_client/client/themes/geonode/less/_card-grid.less
+++ b/geonode_mapstore_client/client/themes/geonode/less/_card-grid.less
@@ -72,6 +72,7 @@
     .gn-card-grid-pagination {
         padding: 1rem;
         text-align: center;
+        padding-bottom: 3rem;
     }
     .gn-card-grid-pagination.featured-list {
         display: flex;
@@ -96,3 +97,17 @@
         }
     }
 }
+
+.gn-fixed-card-grid {
+    display: flex;
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    .gn-grid-container {
+        flex: 1;
+        position: relative;
+        width: 100%;
+        height: 100%;
+        overflow: auto;
+    }
+}
diff --git a/geonode_mapstore_client/client/themes/geonode/less/_details-panel.less b/geonode_mapstore_client/client/themes/geonode/less/_details-panel.less
index 7012fb8910..c885ad8999 100644
--- a/geonode_mapstore_client/client/themes/geonode/less/_details-panel.less
+++ b/geonode_mapstore_client/client/themes/geonode/less/_details-panel.less
@@ -60,7 +60,7 @@
         position: absolute;
         width: 100%;
         height: 100%;
-        overflow-y: scroll;
+        overflow-y: auto;
     }
     &.loading .gn-details-panel-content {
         h1,
@@ -175,3 +175,27 @@
         display: inline-block;
     }
 }
+
+.gn-fixed-card-grid {
+    .gn-details-panel {
+        position: relative;
+        width: 100%;
+        height: 100%;
+        max-width: 600px;
+    }
+    &.gn-size-md {
+        .gn-details-panel {
+            max-width: 500px;
+        }
+    }
+    &.gn-size-sm {
+        .gn-details-panel {
+            position: absolute;
+            left: 0;
+            width: 100%;
+            max-width: 100%;
+            height: 100%;
+            z-index: 100;
+        }
+    }
+}
diff --git a/geonode_mapstore_client/client/themes/geonode/less/_filter-form.less b/geonode_mapstore_client/client/themes/geonode/less/_filter-form.less
index 4a27658d3a..7153b23d14 100644
--- a/geonode_mapstore_client/client/themes/geonode/less/_filter-form.less
+++ b/geonode_mapstore_client/client/themes/geonode/less/_filter-form.less
@@ -29,7 +29,7 @@
     background-color: @gn-main-bg;
     display: flex;
     flex-direction: column;
-    position: sticky;
+    position: relative;
     width: 100%;
     height: 100%;
     .gn-filter-form-header {
@@ -67,17 +67,6 @@
         position: sticky;
         bottom: 0;
         padding: 0.5rem;
-
-        @media only screen and (max-width : 768px) {
-            width: 100%;
-        }
-    }
-    @media only screen and (max-width : 768px) {
-        max-height:100% !important;
-        height: 100%;
-        top: 0 !important;
-        margin-top: 0 !important;
-
     }
     .gn-filter-form-divider {
         width: calc(100% - 0.5rem);
@@ -96,3 +85,24 @@
     margin-right: auto;
     margin-left: auto;
 }
+
+.gn-fixed-card-grid {
+    .gn-filter-form {
+        max-width: 500px;
+    }
+    &.gn-size-md {
+        .gn-filter-form {
+            max-width: 400px;
+        }
+    }
+    &.gn-size-sm {
+        .gn-filter-form {
+            position: absolute;
+            left: 0;
+            width: 100%;
+            max-width: 100%;
+            height: 100%;
+            z-index: 100;
+        }
+    }
+}
diff --git a/geonode_mapstore_client/client/themes/geonode/less/_filter-menu.less b/geonode_mapstore_client/client/themes/geonode/less/_filter-menu.less
deleted file mode 100644
index a7fd19990f..0000000000
--- a/geonode_mapstore_client/client/themes/geonode/less/_filter-menu.less
+++ /dev/null
@@ -1,68 +0,0 @@
-/*
- * Copyright 2020, GeoSolutions Sas.
- * All rights reserved.
- *
- * This source code is licensed under the BSD-style license found in the
- * LICENSE file in the root directory of this source tree.
- */
-
-// **************
-// Theme
-// **************
-
-#gn-components-theme(@theme-vars) {
-    .gn-filters-menu {
-        .color-var(@theme-vars[main-variant-color]);
-        .background-color-var(@theme-vars[main-variant-bg]);
-        .btn-default {
-            background: transparent;
-            border-color: transparent;
-        }
-        .gn-menu-index-divider {
-            .background-color-var(@theme-vars[main-border-color]);
-        }
-    }
-}
-
-// **************
-// Layout
-// **************
-
-.gn-filters-menu {
-    position: sticky;
-    min-height: 3rem;
-    width: 100%;
-    background-color: inherit;
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-    padding: 0.5rem 0;
-    z-index: 10;
-    .gn-filters-menu-container {
-        display: flex;
-        flex-direction: row;
-        align-items: center;
-        max-width: @gn-page-max-width;
-        margin: auto;
-        width: 100%;
-        padding: 0 0.8rem;
-        .gn-filters-menu-main {
-            flex: 1;
-        }
-        .gn-cards-menu {
-            margin: 0;
-            display: flex;
-            align-items: center;
-            list-style-type: none;
-            padding: 0;
-            .gn-menu-index-divider {
-                width: 1px;
-                height: 1.2rem;
-                margin: 0.25rem;
-            }
-        }
-        .gn-filters-menu-tools > * {
-            margin: 0 0 0 0.8rem;
-        }
-    }
-}
diff --git a/geonode_mapstore_client/client/themes/geonode/less/_home-container.less b/geonode_mapstore_client/client/themes/geonode/less/_home-container.less
index ea809102b5..22d181fc31 100644
--- a/geonode_mapstore_client/client/themes/geonode/less/_home-container.less
+++ b/geonode_mapstore_client/client/themes/geonode/less/_home-container.less
@@ -20,7 +20,12 @@
 // **************
 // Layout
 // **************
-
+.gn-content {
+    position: relative;
+    max-width: 1440px;
+    margin: auto;
+    width: 100%;
+}
 .gn-main-home {
     .gn-container{
         display: flex;
@@ -31,6 +36,7 @@
             flex-wrap: wrap;
             margin: 0;
         }
+        
     }
 
     .gn-grid-container{
diff --git a/geonode_mapstore_client/client/themes/geonode/less/_menu-index.less b/geonode_mapstore_client/client/themes/geonode/less/_menu-index.less
deleted file mode 100644
index 5c3a2e453a..0000000000
--- a/geonode_mapstore_client/client/themes/geonode/less/_menu-index.less
+++ /dev/null
@@ -1,96 +0,0 @@
-/*
- * Copyright 2020, GeoSolutions Sas.
- * All rights reserved.
- *
- * This source code is licensed under the BSD-style license found in the
- * LICENSE file in the root directory of this source tree.
- */
-
-// **************
-// Theme
-// **************
-
-#gn-components-theme(@theme-vars) {
-    .gn-menu-index-divider {
-        .background-color-var(@theme-vars[primary-contrast]);
-    }
-}
-
-// **************
-// Layout
-// **************
-
-.gn-menu-index {
-    position: sticky;
-    min-height: 3rem;
-    width: 100%;
-    padding: 0.5rem 0;
-    z-index: 15;
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-    .badge {
-        margin-left: 0.5rem;
-        padding: 0.2rem;
-        font-size: 0.6rem;
-        border-radius: 0.2rem;
-    }
-    .gn-menu-index-container {
-        display: flex;
-        flex-direction: row;
-        align-items: center;
-        margin: auto;
-        width: 100%;
-        .gn-menu-index-content {
-            flex: 1;
-            margin: 0 0 0 0.4rem;
-        }
-        .gn-menu-index-tools > * {
-            margin: 0 0.8rem;
-        }
-        .gn-menu-index-divider {
-            width: 1px;
-            height: 1.2rem;
-        }
-        .gn-menu-index-tools {
-            display: flex;
-            align-items: center;
-            /* remove this inline style of dropdown because they cause issue with overflow x*/
-            .dropdown-menu {
-                transform: none !important;
-                inset: unset !important;
-            }
-            .dropdown-menu-right {
-                right: 0 !important;
-            }
-            .gn-menu-index-right-items {
-                display: flex;
-                align-items: center;
-                list-style-type: none;
-                padding: 0;
-                margin: 0;
-                li + li {
-                    margin-left: 0.4rem;
-                }
-            }
-        }
-
-        .btn-default,
-        .gn-tag {
-            font-size: @font-size-base;
-            border: none;
-            padding: 0.25rem 0.5rem;
-            border-radius: 0.25rem;
-        }
-        .gn-language-selector {
-            &> .btn-default {
-                &.active {
-                    color: inherit;
-                    background-color: inherit;
-                    font-weight: bold;
-                    text-decoration: underline;
-                }
-            }
-        }
-    }
-}
diff --git a/geonode_mapstore_client/client/themes/geonode/less/_menu.less b/geonode_mapstore_client/client/themes/geonode/less/_menu.less
index 08cc5bb9be..8a5903e627 100644
--- a/geonode_mapstore_client/client/themes/geonode/less/_menu.less
+++ b/geonode_mapstore_client/client/themes/geonode/less/_menu.less
@@ -3,9 +3,36 @@
 // **************
 
 #gn-components-theme(@theme-vars) {
-    .gn-menu-index-divider {
+    .gn-menu-divider {
         .background-color-var(@theme-vars[primary-contrast]);
     }
+    .gn-menu {
+        .color-var(@theme-vars[main-color]);
+        .background-color-var(@theme-vars[main-bg]);
+        &.gn-primary {
+            .color-var(@theme-vars[primary-contrast]);
+            .background-color-var(@theme-vars[primary]);
+        }
+        &.gn-default {
+            .color-var(@theme-vars[main-variant-color]);
+            .background-color-var(@theme-vars[main-variant-bg]);
+            .btn-default {
+                background: transparent;
+                border-color: transparent;
+                &:hover {
+                    .color-var(@theme-vars[main-hover-color]);
+                    .background-color-var(@theme-vars[main-hover-bg]);
+                }
+                &.active {
+                    .color-var(@theme-vars[primary-contrast]);
+                    .background-color-var(@theme-vars[primary]);
+                }
+            }
+            .gn-menu-divider {
+                .background-color-var(@theme-vars[main-border-color]);
+            }
+        }
+    }
 }
 
 // **************
@@ -20,3 +47,139 @@
 .dropdown-menu .divider {
     margin: 0.5rem 0;
 }
+
+.gn-main-header {
+    position: fixed;
+    top: 0;
+    width: 100%;
+    z-index: 150;
+}
+
+.gn-main-header-placeholder {
+    position: relative;
+    width: 100%;
+}
+
+#gn-topbar {
+    position: sticky;
+    top: 0;
+    z-index: 100;
+}
+
+.gn-language-selector {
+    .dropdown-menu {
+        height: auto;
+        max-height: 400px;
+        overflow: auto;
+    }
+    &.inline {
+        padding: 0.5rem;
+    }
+    .btn.active {
+        font-weight: bold;
+        text-decoration: underline;
+    }
+}
+
+.gn-menu {
+    display: flex;
+    width: 100%;
+    position: relative;
+    padding: 0.5rem 0;
+    min-height: 3rem;
+
+    &.gn-default {
+        padding: 0.25rem 0;
+        font-size: @font-size-sm;
+        min-height: 2rem;
+        .nav-link {
+            font-size: @font-size-sm;
+        }
+    }
+    .dropdown-menu li button {
+        width: 100%;
+        text-align: left;
+        padding: 3px 20px;
+    }
+
+    &.gn-menu-symmetric {
+        .gn-menu-content-left,
+        .gn-menu-content-right {
+            display: flex;
+            flex: 1;
+            flex-direction: row;
+            min-width: 0;
+        }
+        .gn-menu-content-right {
+            flex-direction: row-reverse;
+        }
+    }
+    .gn-menu-container {
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+        margin: auto;
+        width: 100%;
+    }
+    .gn-menu-content {
+        display: flex;
+        flex-direction: row;
+        flex: 1;
+        padding: 0 0.8rem;
+        align-items: center;
+    }
+
+    .gn-menu-content-left {
+        display: flex;
+        flex: 1;
+        flex-direction: row;
+        min-width: 0;
+    }
+    
+    .gn-menu-list {
+        display: inline-flex;
+        align-items: center;
+        flex-direction: row;
+        list-style-type: none;
+        padding: 0;
+        margin: 0;
+        >li+li {
+            margin-left: 0.4rem;
+        }
+        img {
+            width: auto;
+            height: 2.5rem;
+        }
+    }
+    .gn-menu-content-side {
+        position: relative;
+    }
+    >.dropdown {
+        visibility: hidden;
+    }
+
+    .gn-user-menu-dropdown {
+        > button {
+            padding: 0;
+            background-color: transparent;
+            border-color: transparent;
+            border-radius: 50%;
+            img {
+                border-radius: 50%;
+            }
+        }
+    }
+    .gn-menu-divider {
+        width: 1px;
+        height: 1.2rem;
+    }
+    .gn-menu-fill {
+        flex: 1;
+    }
+}
+
+.gn-filters-menu {
+    position: sticky;
+    top: 0px;
+    z-index: 10;
+}
diff --git a/geonode_mapstore_client/client/themes/geonode/less/_search-bar.less b/geonode_mapstore_client/client/themes/geonode/less/_search-bar.less
index 45ed7185ad..30b1407882 100644
--- a/geonode_mapstore_client/client/themes/geonode/less/_search-bar.less
+++ b/geonode_mapstore_client/client/themes/geonode/less/_search-bar.less
@@ -36,6 +36,18 @@
     z-index: 20;
     border-width: 2px;
     border-style: solid;
+    min-width: 500px;
+    .input-group {
+        display: flex;
+    }
+    .input-group-append,
+    .input-group-prepend {
+        display: flex;
+        align-items: center;
+    }
+    .input-group-append {
+        padding: 0 0.25rem;
+    }
     &.focus {
         outline-width: 3px;
         outline-style: solid;
diff --git a/geonode_mapstore_client/client/themes/geonode/less/geonode-legacy.less b/geonode_mapstore_client/client/themes/geonode/less/geonode-legacy.less
index 894490faed..b7e20a250c 100644
--- a/geonode_mapstore_client/client/themes/geonode/less/geonode-legacy.less
+++ b/geonode_mapstore_client/client/themes/geonode/less/geonode-legacy.less
@@ -1,5 +1,591 @@
+// **************
+// Theme
+// **************
+
+#gn-components-theme(@theme-vars) {
+
+    .gn-legacy {
+
+        select {
+            .background-color-var(@theme-vars[main-bg]);
+            .border-color-var(@theme-vars[main-border-color]);
+        }
+
+        code {
+            .color-var(@theme-vars[main-variant-color]);
+            .background-color-var(@theme-vars[main-variant-bg]);
+        }
+
+        form {
+            input {
+                .border-color-var(@theme-vars[main-border-color]);
+            }
+        }
+
+        .help-tip {
+            background-color: #BCDBEA;
+
+            &:before {
+                color: #fff;
+            }
+
+            p {
+                background-color: #1E2021;
+                box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.2);
+                color: #FFF;
+
+                &:before {
+                    border: 6px solid transparent;
+                    border-bottom-color: #1E2021;
+                }
+            }
+        }
+
+        .button-tip {
+
+            p {
+                background-color: #1E2021;
+                box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.2);
+                color: #FFF;
+
+                &:before {
+                    border: 6px solid transparent;
+                    border-bottom-color: #1E2021;
+                }
+            }
+        }
+
+        .panel-heading {
+            [data-toggle="collapse"] {
+                &:after {
+                    .color-var(@theme-vars[primary]);
+                }
+            }
+
+            [data-toggle="collapse"].collapsed {
+                &:after {
+                    .color-var(@theme-vars[main-color]);
+                }
+            }
+        }
+
+        #wrap {
+            .background-color-var(@theme-vars[main-bg]);
+        }
+
+        .navbar-inverse {
+            background-color: @gray-dark;
+
+            .navbar-nav>li>a {
+                color: white;
+
+                &:hover {
+                    .background-color-var(@theme-vars[primary]);
+                }
+            }
+        }
+
+        .navbar-inverse .navbar-nav>.open>a,
+        .navbar-inverse .navbar-nav>.open>a:focus,
+        .navbar-inverse .navbar-nav>.open>a:hover {
+            .background-color-var(@theme-vars[primary]);
+        }
+
+        .navbar-nav {
+            .dropdown-menu {
+                .background-color-var(@theme-vars[primary]);
+                border-top: 1px solid @brand-primary;
+
+                a {
+                    color: white;
+                }
+
+                li a {
+                    &:hover {
+                        background-color: darken(@brand-primary, 10%);
+                        color: white;
+                    }
+                }
+
+                .divider {
+                    background-color: darken(@brand-primary, 10%);
+                }
+            }
+
+            .search {
+                color: #444;
+            }
+
+            .search input {
+                border: 1px solid @gray-dark;
+            }
+
+        }
+
+        .navbar-header {
+            i {
+                color: white;
+            }
+        }
+
+        .home {
+            .navbar-inverse {
+                background-color: rgba(0, 0, 0, 0.5);
+            }
+
+            .jumbotron {
+                background: @brand-primary;
+                color: white;
+                text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.4);
+
+                a {
+                    color: @brand-warning;
+                }
+
+                .btn-default {
+                    background: rgba(0, 0, 0, 0.2);
+                    border: 2px solid white;
+                    color: white;
+
+                    &:hover {
+                        background: rgba(0, 0, 0, 0.4);
+                    }
+                }
+            }
+
+            .big-search {
+                background: @gray-dark;
+                color: white;
+
+                a {
+                    .color-var(@theme-vars[primary]);
+                }
+
+                .search {
+                    color: #444;
+                }
+
+                .search input {
+                    border: 1px solid @gray-dark;
+                }
+
+                .btn-default {
+                    color: @brand-warning;
+                }
+            }
+
+            #datasets {
+
+                a {
+                    color: @gray-dark;
+
+                    .category {
+                        &:hover {
+                            .color-var(@theme-vars[primary]);
+                        }
+                    }
+
+                    span {
+                        font-size: 4em;
+                    }
+                }
+            }
+
+            #showcase {
+                background: @gray-lighter;
+            }
+        }
+
+        .jumbotron {
+            background: @brand-primary;
+            color: white;
+            text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.4);
+
+            a {
+                color: @brand-warning;
+            }
+        }
+
+        .home-facets {
+            a {
+                color: black;
+
+                &:hover {
+                    color: @link-color;
+                }
+            }
+        }
+
+        .items-list {
+
+            .item-info {
+                border-top: 1px solid @gray-lighter;
+            }
+
+            h4 {
+                a {
+                    color: @text-color;
+
+                    &:hover {
+                        color: @brand-danger;
+                    }
+                }
+            }
+
+            .owner {
+                color: @text-color;
+
+                a {
+                    color: @text-color;
+
+                    &:hover {
+                        color: @brand-danger;
+                    }
+                }
+            }
+
+            .thumb {
+                img {
+                    border: 1px solid @gray-lighter;
+                }
+            }
+
+            .abstract {
+                color: @gray-light;
+            }
+
+            .actions {
+                color: @gray-light;
+
+                a {
+                    color: @gray-light;
+
+                    &:hover {
+                        color: @gray;
+                    }
+                }
+            }
+        }
+
+        .profile-avatar {
+            background: white;
+            border: 1px solid @gray-light;
+
+            h5 a {
+                color: @text-color;
+
+                &:hover {
+                    color: @brand-danger;
+                }
+
+                i {
+                    &:hover {
+                        color: @brand-danger;
+                    }
+                }
+            }
+        }
+
+        .item-details {
+            .color-var(@theme-vars[main-color]);
+            .background-color-var(@theme-vars[main-bg]);
+
+            .item-items {
+                .border-top-color-var(@theme-vars[main-border-color]);
+            }
+        }
+
+        .profile-avatar {
+            background: white;
+            border: 1px solid @gray-lighter;
+
+            h5 a {
+                color: @text-color;
+
+                &:hover {
+                    color: @brand-danger;
+                }
+
+                i {
+                    margin-left: 0.75em;
+
+                    &:hover {
+                        color: @brand-danger;
+                    }
+                }
+            }
+
+            .profile-items {
+                border-top: 1px solid @gray-lighter;
+                color: @gray;
+
+                i {
+                    a {
+                        &:hover {
+                            color: @brand-danger;
+                        }
+                    }
+                }
+            }
+
+            li a {
+                color: @gray;
+
+                &:hover {
+                    color: @brand-danger;
+                }
+            }
+        }
+
+        .profile-details {
+            .color-var(@theme-vars[main-color]);
+            .background-color-var(@theme-vars[main-bg]);
+        }
+
+        nav.filter {
+            h4 {
+                background: @gray;
+
+                a {
+                    color: white;
+                }
+            }
+
+            .active {
+                .color-var(@theme-vars[primary]);
+
+                .badge {
+                    background: @brand-primary;
+                }
+            }
+
+            li a {
+                border-bottom: 1px solid @gray-lighter;
+            }
+        }
+
+        #sort {
+            a {
+                color: @gray-light;
+            }
+
+            .selected {
+                .color-var(@theme-vars[primary]);
+            }
+        }
+
+        .group-avatar {
+            border: 1px solid @gray-lighter;
+
+            h5 a {
+                color: @text-color;
+
+                &:hover {
+                    color: @brand-danger;
+                }
+
+                i {
+                    &:hover {
+                        color: @brand-danger;
+                    }
+                }
+            }
+        }
+
+        .group-items {
+            border-top: 1px solid @gray-lighter;
+            color: @gray;
+
+            i {
+                a {
+                    &:hover {
+                        color: @brand-danger;
+                    }
+                }
+            }
+        }
+
+        #drop-zone {
+            .color-var(@theme-vars[main-variant-color]);
+            .background-color-var(@theme-vars[main-variant-bg]);
+            .border-color-var(@theme-vars[main-border-color]);
+            h3 {
+                .color-var(@theme-vars[main-color]);
+            }
+        }
+
+        #upload_form {
+            input[type="text"]:focus {
+                border: solid 1px #707070;
+                box-shadow: 0 0 5px 1px #969696;
+            }
+        }
+
+        .comment-author {
+            color: #777;
+        }
+
+        .activity-item {
+            border-bottom: 1px solid @gray-light;
+            border-left: 1px solid @gray-light;
+            color: @gray-light;
+        }
+
+        .icon-activity {
+            border: 2px solid white;
+            color: white;
+        }
+
+        .thumb-activity {
+            img {
+                border: 1px solid @gray;
+            }
+        }
+
+        .modal-body .list-unstyled a {
+            color: @text-color;
+
+            &:hover {
+                .color-var(@theme-vars[primary]);
+            }
+        }
+
+        .modal-divider {
+            border-bottom: 1px solid #e1e8ed;
+        }
+
+        @media (max-width: 991px) {
+
+            .navbar-collapse {
+                box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1);
+            }
+
+            .home .navbar-inverse {
+                background-color: @gray-dark;
+            }
+        }
+
+        #wrong-data-type {
+            .color-var(@theme-vars[danger]);
+        }
+
+        #hr_filter_layer {
+            .color-var(@theme-vars[main-color]);
+        }
+
+        #missing-values {
+            .color-var(@theme-vars[danger]);
+        }
+
+        .has-error {
+            .color-var(@theme-vars[danger], true);
+        }
+
+        .has-error .select2-selection {
+            .border-color-var(@theme-vars[danger], true);
+        }
+
+        .autocomplete-input .ac-results {
+            border: 1px solid #eeeeee;
+        }
+
+        .autocomplete-input .ac-results .result-wrapper {
+            border-bottom: 1px solid #eeeeee;
+            .background-color-var(@theme-vars[main-bg]);
+        }
+
+        .autocomplete-input .ac-results .result-wrapper:hover {
+            background-color: #eeeeee;
+        }
+
+        .autocomplete-input .ac-results .result-wrapper .ac-result {
+            color: black;
+        }
+
+        .inbox-checkbox {
+
+            label::before {
+                border-color: @gray-light;
+            }
+
+            label::after {
+                border-color: @gray-light;
+            }
+        }
+
+        .inbox-icons {
+            button {
+                color: white;
+            }
+
+            color: #636363;
+        }
+
+        .create-msg-form-control {
+            .background-color-var(@theme-vars[main-bg]);
+            border: 1px solid #ccc;
+        }
+
+        .home .geonode-slide-show .jumbotron {
+            .container {
+                .carousel-control span {
+                    color: #000;
+                }
+
+                .carousel-caption {
+                    background: rgba(0, 0, 0, 0.4);
+                }
+            }
+        }
+
+        .iso-categories .row {
+            span {
+                background-color: #2d689c;
+            }
+
+            a:hover span {
+                background-color: black;
+            }
+        }
+
+        .lmask {
+            background-color: #000;
+
+
+            &:before {
+                background-color: rgba(0, 0, 0, 0);
+                border: 5px solid rgba(0, 183, 229, 0.9);
+                border-right: 5px solid rgba(0, 0, 0, 0);
+                border-left: 5px solid rgba(0, 0, 0, 0);
+                box-shadow: 0 0 35px #2187e7;
+            }
+
+            &:after {
+                background-color: rgba(0, 0, 0, 0);
+                border: 5px solid rgba(0, 183, 229, 0.9);
+                border-left: 5px solid rgba(0, 0, 0, 0);
+                border-right: 5px solid rgba(0, 0, 0, 0);
+                box-shadow: 0 0 15px #2187e7;
+            }
+        }
+    }
+
+    .wizard--progress > li.is-complete a {
+        .color-var(@theme-vars[main-color]);
+    }
+}
+
+// **************
+// Layout
+// **************
+
 .gn-legacy {
+    padding: 0;
     .modal {
         display: none;
     }
-}
+    .gn-main-header,
+    #gn-topbar {
+        z-index: 1100;
+    }
+}
\ No newline at end of file
diff --git a/geonode_mapstore_client/client/themes/geonode/less/geonode.less b/geonode_mapstore_client/client/themes/geonode/less/geonode.less
index 86c9948934..975933dd10 100644
--- a/geonode_mapstore_client/client/themes/geonode/less/geonode.less
+++ b/geonode_mapstore_client/client/themes/geonode/less/geonode.less
@@ -3,18 +3,14 @@
 @import 'ms-theme.less';
 @import '_base.less';
 
-@import '_action-navbar.less';
-@import '_brand-navbar.less';
 @import '_card-grid.less';
 @import '_details-panel.less';
 @import '_filter-by-extent.less';
 @import '_filter-form.less';
-@import '_filter-menu.less';
 @import '_footer.less';
 @import '_hero.less';
 @import '_loader.less';
 @import '_main-loader.less';
-@import '_menu-index.less';
 @import '_menu.less';
 @import '_resource-card.less';
 @import '_search-bar.less';
diff --git a/geonode_mapstore_client/hooksets.py b/geonode_mapstore_client/hooksets.py
index 3d7efaec99..e63b129516 100644
--- a/geonode_mapstore_client/hooksets.py
+++ b/geonode_mapstore_client/hooksets.py
@@ -21,10 +21,10 @@
 
 
 def resource_list_url(resource_type):
-    return '/#/search/?filter{resource_type.in}' + '={}'.format(resource_type)
+    return '/catalogue/#/search/?filter{resource_type.in}' + '={}'.format(resource_type)
 
 def resource_detail_url(resource_type, resource_id):
-    return '/viewer/#/{}/{}'.format(resource_type, resource_id)
+    return '/catalogue/#/{}/{}'.format(resource_type, resource_id)
 
 
 class MapStoreHookSet(BaseHookSet):
diff --git a/geonode_mapstore_client/templates/base.html b/geonode_mapstore_client/templates/base.html
new file mode 100644
index 0000000000..6a867a8b14
--- /dev/null
+++ b/geonode_mapstore_client/templates/base.html
@@ -0,0 +1,28 @@
+{% extends "base.html" %}
+
+{% load static %}
+
+{% block html_class %}msgapi{% endblock %}
+
+{% block extra_head %}
+    <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" %}" rel="stylesheet" />
+{% endblock %}
+
+
+{% block body_extra_class %}gn-legacy gn-theme gn-theme-light{% endblock %}
+
+{% block header %}
+{% include './geonode-mapstore-client/snippets/header.html' %}
+{% endblock %}
+
+{% block footer %}
+{% include './geonode-mapstore-client/snippets/footer.html' %}
+{% endblock %}
+
+{% block extra_script %}
+    <script type="text/javascript">
+        // enable dropdown functionalities
+        $('.dropdown-toggle').dropdown();
+    </script>
+{% endblock extra_script %}
diff --git a/geonode_mapstore_client/templates/geonode-mapstore-client/catalogue.html b/geonode_mapstore_client/templates/geonode-mapstore-client/catalogue.html
new file mode 100644
index 0000000000..6883ffd333
--- /dev/null
+++ b/geonode_mapstore_client/templates/geonode-mapstore-client/catalogue.html
@@ -0,0 +1,59 @@
+{% load static %}
+{% load client_lib_tags %}
+{% load client_version %}
+<!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 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" />
+        <title>{{ SITE_NAME }}</title>
+        <link rel="shortcut icon" href="{% static 'geonode/img/favicon.ico' %}" />
+        {% include './snippets/loader_style.html' %}
+        {% block extra_style %}
+        {% endblock %}
+    </head>
+
+    <body class="gn-catalogue gn-theme gn-theme-light ms2">
+
+        {% block gn_config %}
+            {% include './_geonode_config.html' %}
+        {% endblock %}
+
+        {% block header %}
+            {% include './snippets/header.html' %}
+        {% endblock %}
+
+        {% block container %}
+            <div id="ms-container">
+                <div class="gn-main-loader-container">
+                    <div class="gn-main-loader-content">
+                        <div class="gn-main-loader"></div>
+                        <div class="gn-main-loader-text"></div>
+                    </div>
+                </div>
+            </div>
+        {% endblock %}
+
+        {% block ms_scripts %}
+            <script id="gn-script" src="{% static 'mapstore/dist/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">
+                // enable dropdown functionalities
+                $('.dropdown-toggle').dropdown();
+            </script>
+        {% endblock %}
+
+    </body>
+</html>
diff --git a/geonode_mapstore_client/templates/geonode-mapstore-client/snippets/brand_navbar.html b/geonode_mapstore_client/templates/geonode-mapstore-client/snippets/brand_navbar.html
new file mode 100644
index 0000000000..503cef3a62
--- /dev/null
+++ b/geonode_mapstore_client/templates/geonode-mapstore-client/snippets/brand_navbar.html
@@ -0,0 +1,34 @@
+{% load get_menu_json %}
+{% get_user_menu as USER_MENU %}
+
+<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>
+                        <a href="/">
+                            <img src="/static/mapstore/img/geonode-logo.svg">
+                        </a>
+                    </li>
+                </ul>
+                {% endblock %}
+            </div>
+            <div class="gn-menu-content-center">
+                {% block center_menu %}
+                    {% include './search_bar.html' %}
+                {% endblock %}
+            </div>
+            <div class="gn-menu-content-right">
+                {% block right_menu %}
+                <ul class="gn-menu-list">
+                    {% for menu_item in USER_MENU %}
+                        {% include './menu_item.html' with menu_item=menu_item align_right=True %}
+                    {% endfor %}
+                </ul>
+                {% endblock %}
+            </div>
+        </div>
+    </div>
+</nav>
diff --git a/geonode_mapstore_client/templates/geonode-mapstore-client/snippets/footer.html b/geonode_mapstore_client/templates/geonode-mapstore-client/snippets/footer.html
new file mode 100644
index 0000000000..b84287ccfc
--- /dev/null
+++ b/geonode_mapstore_client/templates/geonode-mapstore-client/snippets/footer.html
@@ -0,0 +1,21 @@
+
+
+<footer class="gn-footer">
+    <ul>
+        <li>
+            <a href="https://geonode.org/" class="nav-link">
+                <span>geonode.org</span>
+            </a>
+        </li>
+        <li>
+            <a href="/developer/" class="nav-link">
+                <span>Developers</span>
+            </a>
+        </li>
+        <li>
+            <a href="/about/" class="nav-link">
+                <span>About</span>
+            </a>
+        </li>
+    </ul>
+</footer>
diff --git a/geonode_mapstore_client/templates/geonode-mapstore-client/snippets/header.html b/geonode_mapstore_client/templates/geonode-mapstore-client/snippets/header.html
new file mode 100644
index 0000000000..afe8d2427b
--- /dev/null
+++ b/geonode_mapstore_client/templates/geonode-mapstore-client/snippets/header.html
@@ -0,0 +1,29 @@
+{% 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 %}
+
+{% include './topbar.html' with id='gn-topbar' %}
+
+<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/geonode_mapstore_client/templates/geonode-mapstore-client/snippets/hero.html b/geonode_mapstore_client/templates/geonode-mapstore-client/snippets/hero.html
new file mode 100644
index 0000000000..66531b026c
--- /dev/null
+++ b/geonode_mapstore_client/templates/geonode-mapstore-client/snippets/hero.html
@@ -0,0 +1,11 @@
+{% load i18n %}
+<div class="gn-hero">
+    <div class="jumbotron">
+        <div class="gn-hero-description">
+            <h1>{% trans 'GeoNode' %}</h1>
+            <p>{% trans 'sharing geospatial data and maps.' %}</p>
+        </div>
+        <p class="gn-hero-tools">
+        </p>
+    </div>
+</div>
diff --git a/geonode_mapstore_client/templates/geonode-mapstore-client/snippets/language_selector.html b/geonode_mapstore_client/templates/geonode-mapstore-client/snippets/language_selector.html
new file mode 100644
index 0000000000..204c23c744
--- /dev/null
+++ b/geonode_mapstore_client/templates/geonode-mapstore-client/snippets/language_selector.html
@@ -0,0 +1,90 @@
+{% load i18n %}
+{% if csrf_token != "NOTPROVIDED" %}
+{% get_current_language as LANGUAGE %}
+{% get_language_info for LANGUAGE as lang_info %}
+
+<form id="gn-language-selector-form" action="/i18n/setlang/" method="post" style="display:none;">
+    {% csrf_token %}
+    <input name="language" type="hidden" value="{{ LANGUAGE }}"/>
+</form>
+
+    {% if inline %}
+        <li id="gn-language-selector-inline" class="gn-language-selector inline">
+            {% for lang in LANGUAGES %}
+                <button
+                    data-lang-code="{{lang.0}}"
+                    data-lang-state="{% if lang.0 == LANGUAGE %}active{% else %}{% endif %}"
+                    class="btn btn-primary {% if lang.0 == LANGUAGE %} active{% else %}{% endif %}"
+                >
+                    {{lang.0}}
+                </button>
+            {% endfor %}
+        </li>
+        <script>
+            (function() {
+                const languageForm = document.querySelector('#gn-language-selector-form');
+                const languageInput = languageForm.querySelector('input[name="language"]');
+                const languageNodes = document.querySelectorAll('#gn-language-selector-inline button');
+
+                for (var i = 0; i < languageNodes.length; i++) {
+                    if (languageNodes[i].getAttribute('data-lang-state') !== 'active') {
+                        languageNodes[i].addEventListener('click', function(event) {
+                            const language = event.target.getAttribute('data-lang-code');
+                            if (language) {
+                                languageInput.value = language;
+                                languageForm.action = '/i18n/setlang/?next=' + (window.location && (window.location.pathname + window.location.hash) || '/');
+                                languageForm.submit();
+                            }
+                        });
+                    }
+                }
+            })();
+        </script>
+    {% else %}
+
+        <li class="gn-language-selector">
+            
+            <div class="dropdown" id="gn-language-selector-dropdown">
+                <button
+                    id="gn-language-selector"
+                    role="button"
+                    aria-haspopup="true"
+                    aria-expanded="false"
+                    type="button"
+                    class="dropdown-toggle btn btn-{{variant|default:'default'}}"
+                    data-toggle="dropdown"
+                >
+                    {{ lang_info.name_local }}
+                </button>
+                <ul class="dropdown-menu{% if align_right %} dropdown-menu-right{% endif %}" aria-labelledby="gn-language-selector">
+                    {% for lang in LANGUAGES %}
+                        {% if lang.0 != LANGUAGE %} 
+                            <li>
+                                <a style="cursor:pointer;" data-lang-code="{{lang.0}}">{{ lang.1 }}</a>
+                            </li>
+                        {% endif %}
+                    {% endfor %}
+                </ul>
+            </div>
+        </li>
+        <script>
+            (function() {
+                const languageForm = document.querySelector('#gn-language-selector-form');
+                const languageInput = languageForm.querySelector('input[name="language"]');
+                
+                const languageNodes = document.querySelectorAll('#gn-language-selector-dropdown .dropdown-menu li a');
+
+                for (var i = 0; i < languageNodes.length; i++) {
+                    languageNodes[i].addEventListener('click', function(event) {
+                        const language = event.target.getAttribute('data-lang-code');
+                        if (language) {
+                            languageInput.value = language;
+                            languageForm.action = '/i18n/setlang/?next=' + (window.location && (window.location.pathname + window.location.hash) || '/');
+                            languageForm.submit();
+                        }
+                    });
+                }
+            })();
+        </script>
+    {% endif %}
+{% endif %}
\ No newline at end of file
diff --git a/geonode_mapstore_client/templates/geonode-mapstore-client/snippets/loader.html b/geonode_mapstore_client/templates/geonode-mapstore-client/snippets/loader.html
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/geonode_mapstore_client/templates/geonode-mapstore-client/snippets/loader_style.html b/geonode_mapstore_client/templates/geonode-mapstore-client/snippets/loader_style.html
new file mode 100644
index 0000000000..b1e696637c
--- /dev/null
+++ b/geonode_mapstore_client/templates/geonode-mapstore-client/snippets/loader_style.html
@@ -0,0 +1,57 @@
+<style>
+    .gn-main-loader-container {
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        font-size: 14px;
+        flex-direction: column;
+    }
+    .gn-main-loader-content {
+        position: relative;
+        font-size: inherit;
+    }
+    .gn-main-loader {
+        border-radius: 50%;
+        width: 12em;
+        height: 12em;
+        box-sizing: border-box;
+        border: 1em solid rgba(119,119,119, 0.2);
+        border-left: 1em solid #777777;
+        -webkit-animation: gn-main-loader-animation 1.1s infinite linear;
+        animation: gn-main-loader-animation 1.1s infinite linear;
+    }
+    .gn-main-loader-text {
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        transform: translate(-50%, -50%);
+        font-size: 1.5em;
+        text-align: center;
+        font-family: 'Montserrat', sans-serif;
+    }
+    @-webkit-keyframes gn-main-loader-animation {
+        0% {
+            -webkit-transform: rotate(0deg);
+            transform: rotate(0deg);
+        }
+        100% {
+            -webkit-transform: rotate(360deg);
+            transform: rotate(360deg);
+        }
+    }
+    @keyframes gn-main-loader-animation {
+        0% {
+            -webkit-transform: rotate(0deg);
+            transform: rotate(0deg);
+        }
+        100% {
+            -webkit-transform: rotate(360deg);
+            transform: rotate(360deg);
+        }
+    }
+</style>
diff --git a/geonode_mapstore_client/templates/geonode-mapstore-client/snippets/menu_item.html b/geonode_mapstore_client/templates/geonode-mapstore-client/snippets/menu_item.html
new file mode 100644
index 0000000000..11d3ffc3a3
--- /dev/null
+++ b/geonode_mapstore_client/templates/geonode-mapstore-client/snippets/menu_item.html
@@ -0,0 +1,59 @@
+{% load i18n %}
+{% if menu_item %}
+    {% if menu_item.type == 'link' %}
+        <li>
+            <a
+                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.label %}
+                        {% trans menu_item.label %}
+                    {% endif %}
+                    {% if menu_item.image %}
+                        <img src="{{ menu_item.image }}">
+                    {% 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 %}
+                    {% endfor %}
+                </ul>
+            </div>
+        </li>
+    {% endif %}
+{% endif %}
diff --git a/geonode_mapstore_client/templates/geonode-mapstore-client/snippets/menu_item_compact.html b/geonode_mapstore_client/templates/geonode-mapstore-client/snippets/menu_item_compact.html
new file mode 100644
index 0000000000..fce10bf326
--- /dev/null
+++ b/geonode_mapstore_client/templates/geonode-mapstore-client/snippets/menu_item_compact.html
@@ -0,0 +1,34 @@
+{% load i18n %}
+{% if menu_item %}
+    {% if menu_item.type == 'link' %}
+        <li>
+            <a
+                href="{{ menu_item.href }}"
+                target="{{ menu_item.target }}"
+            >
+                {% trans menu_item.label %}
+            </a>
+        </li>
+    {% endif %}
+    {% if menu_item.type == 'dropdown' %}
+        <li class="dropdown-header"><strong>{% trans menu_item.label %}</strong></li>
+        {% 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 %}
+        {% endfor %}
+        {% if not forloop.last %}
+            <li role="separator" class="divider"></li>
+        {% endif %}
+    {% endif %}
+{% endif %}
diff --git a/geonode_mapstore_client/templates/geonode-mapstore-client/snippets/search_bar.html b/geonode_mapstore_client/templates/geonode-mapstore-client/snippets/search_bar.html
new file mode 100644
index 0000000000..fd105fe326
--- /dev/null
+++ b/geonode_mapstore_client/templates/geonode-mapstore-client/snippets/search_bar.html
@@ -0,0 +1,238 @@
+<div id="gn-search-bar" class="gn-search-bar">
+    <div class="input-group">
+        <div class="input-group-prepend">
+            <button id="gn-search-bar-clear" type="button" class="btn btn-default" style="display: none;">
+                <i class="fa fa-times"></i>
+            </button>
+            <button id="gn-search-bar-apply" type="button" class="btn btn-default">
+                <i class="fa fa-search"></i>
+            </button>
+        </div>
+
+        <input
+            placeholder="Search"
+            class="form-control" value=""
+            style="outline: none; box-shadow: none;"
+        >
+        <div class="input-group-append">
+            <div id="gn-search-bar-loading" class="gn-spinner" style="visibility: hidden;"><div></div></div>
+        </div>
+    </div>
+    <div class="gn-suggestions" style="display: none;">
+        <div class="gn-suggestions-header">
+            <button id="gn-search-bar-clear-suggestions" type="button" class="btn btn-default">
+                <i class="fa fa-times"></i>
+            </button>
+        </div>
+        <div class="list-group">
+        </div>
+    </div>
+</div>
+
+<script>
+    (function() {
+        window.addEventListener('DOMContentLoaded', function() {
+
+            const debounceTime = 300;
+            const scrollOffset = 200;
+            const pageSize = 10;
+            const searchInput = document.querySelector('#gn-search-bar input');
+            const suggestionsPanel = document.querySelector('#gn-search-bar .gn-suggestions');
+            const suggestionsPanelList = document.querySelector('#gn-search-bar .gn-suggestions .list-group');
+
+            const searchClear = document.querySelector('#gn-search-bar-clear');
+            const searchClearSuggestions = document.querySelector('#gn-search-bar-clear-suggestions');
+            const searchApply = document.querySelector('#gn-search-bar-apply');
+            const searchLoading = document.querySelector('#gn-search-bar-loading');
+
+            var request = null;
+            var timeout = null;
+            var value = '';
+            var page = 1;
+            var total = 0;
+            var suggestions = [];
+            var loading = false;
+
+            searchLoading.style.visibility = 'hidden';
+
+            function clearRequest() {
+                if (request && request.abort) {
+                    request.abort();
+                    request = null;
+                }
+                if (timeout) {
+                    clearTimeout(timeout);
+                    timeout = null;
+                }
+            }
+
+            function renderSuggestions() {
+                suggestionsPanel.style.display = suggestions.length === 0 ? 'none' : 'block';
+                suggestionsPanelList.innerHTML = '';
+                for (var i = 0; i < suggestions.length; i++) {
+                    const button = document.createElement('button');
+                    button._gnSuggestion = suggestions[i];
+                    button.innerHTML = suggestions[i].title;
+                    button.setAttribute('class', 'list-group-item list-group-item-action');
+                    button.onclick = function(event) {
+                        onSearch(event.target._gnSuggestion && event.target._gnSuggestion.title);
+                    }
+                    suggestionsPanelList.appendChild(button);
+                }
+            }
+
+            function getQParamFromHash() {
+                const hash = window.location.hash || '';
+                const splitHash = hash.split('?') || [];
+                const queryHash = splitHash[1] || '';
+                const params = queryHash.split('&');
+                var q = '';
+                for (var i = 0; i < params.length; i++) {
+                    if (params[i].indexOf('q=') === 0) {
+                        q = params[i].replace('q=', '');
+                    }
+                }
+                return q;
+            }
+
+            function onSearch(q) {
+                const hash = window.location.hash || '';
+                const splitHash = hash.split('?') || [];
+                const queryHash = splitHash[1] || '';
+                const params = queryHash.split('&');
+                var newParams = q ? ['q=' + q] : []; 
+                for (var i = 0; i < params.length; i++) {
+                    if (params[i] && params[i].indexOf('q=') !== 0) {
+                        newParams.push(params[i]);
+                    }
+                }
+
+                const newQueryHash = newParams.join('&');
+
+                location.href = '/catalogue/#/search' + (newQueryHash ? '?' + newQueryHash : '');
+
+                clearRequest();
+                suggestions = [];
+                renderSuggestions();
+                searchLoading.style.visibility = 'hidden';
+            }
+
+            function getSuggestions(options) {
+                clearRequest();
+                loading = true;
+                searchLoading.style.visibility = 'visible';
+                timeout = setTimeout(function() {
+                    const url = '/api/v2/resources' +
+                    '?page=' + options.page +
+                    '&search=' + options.value +
+                    '&search_fields=title' +
+                    '&search_fields=abstract';
+                    request = $.ajax({
+                        url: url,
+                        type: 'GET',
+                        dataType: 'json',
+                        success: function(response) {
+                            options.resolve(response);
+                            request = null;
+                            timeout = null;
+                            loading = false;
+                            searchLoading.style.visibility = 'hidden';
+                        },
+                        error: function(response) {
+                            options.resolve({
+                                resources: [],
+                                total: 0
+                            });
+                            request = null;
+                            timeout = null;
+                            loading = false;
+                            searchLoading.style.visibility = 'hidden';
+                        },
+                    });
+                }, options.debounceTime || 0);
+            }
+
+            searchInput.addEventListener('input', function(event) {
+                page = 1;
+                total = 0;
+                value = event.target.value;
+                if (!value) {
+                    clearRequest();
+                    suggestions = [];
+                    loading = false;
+                    searchLoading.style.visibility = 'hidden';
+                    return renderSuggestions();
+                }
+                return getSuggestions({
+                    value: value,
+                    page: page,
+                    pageSize: pageSize,
+                    debounceTime: debounceTime,
+                    resolve: function(response) {
+                        suggestions = response && response.resources || [];
+                        total = response.total;
+                        renderSuggestions();
+                    }
+                });
+            });
+
+            suggestionsPanelList.addEventListener('scroll', function() {
+                const scrollTop = suggestionsPanelList.scrollTop;
+                const clientHeight = suggestionsPanelList.clientHeight;
+                const scrollHeight = suggestionsPanelList.scrollHeight;
+                const isScrolled = scrollTop + clientHeight >= scrollHeight - scrollOffset;
+                if (isScrolled && suggestions.length < total && !loading) {
+                    page = page + 1;
+                    return getSuggestions({
+                        value: value,
+                        page: page,
+                        pageSize: pageSize,
+                        debounceTime: debounceTime,
+                        resolve: function(response) {
+                            const newSuggestions = response && response.resources || [];
+                            suggestions = [...suggestions, ...newSuggestions];
+                            renderSuggestions();
+                        }
+                    });
+                }
+            });
+
+            function hashChange() {
+                const newQParam = getQParamFromHash();
+                if (newQParam !== value) {
+                    searchInput.value = newQParam;
+                }
+                searchClear.style.display = newQParam ? 'block' : 'none';
+            }
+
+            window.addEventListener('hashchange', hashChange, false);
+            hashChange();
+
+
+            searchClear.addEventListener('click', function() {
+                onSearch('');
+            });
+
+            searchClearSuggestions.addEventListener('click', function() {
+                suggestions = [];
+                renderSuggestions();
+            });
+            searchApply.addEventListener('click', function() {
+                if (value) {
+                    onSearch(value);
+                }
+            });
+
+            searchInput.addEventListener('keyup', function(event) {
+                if (event.keyCode === 13) {
+                    event.preventDefault();
+                    if (value) {
+                        onSearch(value);
+                    }
+                }
+            });
+
+        });
+    })();
+</script>
+
diff --git a/geonode_mapstore_client/templates/geonode-mapstore-client/snippets/topbar.html b/geonode_mapstore_client/templates/geonode-mapstore-client/snippets/topbar.html
new file mode 100644
index 0000000000..7d9300c19a
--- /dev/null
+++ b/geonode_mapstore_client/templates/geonode-mapstore-client/snippets/topbar.html
@@ -0,0 +1,107 @@
+{% load get_menu_json %}
+{% get_base_left_topbar_menu as BASE_LEFT_TOPBAR_MENU %}
+{% get_menu_json 'TOPBAR_MENU' as TOPBAR_MENU %}
+{% get_menu_json 'TOP_MENUBAR_LEFT' as TOP_MENUBAR_LEFT %}
+{% get_menu_json 'TOP_MENUBAR_RIGHT' as TOP_MENUBAR_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_LEFT_TOPBAR_MENU %}
+                            {% 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 TOP_MENUBAR_LEFT %}
+                            {% include './menu_item_compact.html' with menu_item=menu_item %}
+                        {% endfor %}
+
+                    </ul>
+                </div>
+                <ul class="gn-menu-list">
+                    {% for menu_item in BASE_LEFT_TOPBAR_MENU %}
+                        {% 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 TOP_MENUBAR_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 TOP_MENUBAR_RIGHT %}
+                        {% include './menu_item.html' with menu_item=menu_item variant='primary' %}
+                    {% 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/geonode_mapstore_client/templates/geonode-mapstore-client/viewer.html b/geonode_mapstore_client/templates/geonode-mapstore-client/viewer.html
deleted file mode 100644
index 311d152f96..0000000000
--- a/geonode_mapstore_client/templates/geonode-mapstore-client/viewer.html
+++ /dev/null
@@ -1,96 +0,0 @@
-{% 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">
-        <title>{{ SITE_NAME }}</title>
-        <link rel="shortcut icon" href="{% static 'geonode/img/favicon.ico' %}" />
-        <style>
-            .gn-main-loader-container {
-                position: absolute;
-                top: 0;
-                left: 0;
-                width: 100%;
-                height: 100%;
-                display: flex;
-                align-items: center;
-                justify-content: center;
-                font-size: 14px;
-                flex-direction: column;
-            }
-            .gn-main-loader-content {
-                position: relative;
-                font-size: inherit;
-            }
-            .gn-main-loader {
-                border-radius: 50%;
-                width: 12em;
-                height: 12em;
-                box-sizing: border-box;
-                border: 1em solid rgba(119,119,119, 0.2);
-                border-left: 1em solid #777777;
-                -webkit-animation: gn-main-loader-animation 1.1s infinite linear;
-                animation: gn-main-loader-animation 1.1s infinite linear;
-            }
-            .gn-main-loader-text {
-                position: absolute;
-                top: 50%;
-                left: 50%;
-                transform: translate(-50%, -50%);
-                font-size: 1.5em;
-                text-align: center;
-                font-family: 'Montserrat', sans-serif;
-            }
-            @-webkit-keyframes gn-main-loader-animation {
-                0% {
-                    -webkit-transform: rotate(0deg);
-                    transform: rotate(0deg);
-                }
-                100% {
-                    -webkit-transform: rotate(360deg);
-                    transform: rotate(360deg);
-                }
-            }
-            @keyframes gn-main-loader-animation {
-                0% {
-                    -webkit-transform: rotate(0deg);
-                    transform: rotate(0deg);
-                }
-                100% {
-                    -webkit-transform: rotate(360deg);
-                    transform: rotate(360deg);
-                }
-            }
-        </style>
-
-        <style>
-            #ms-container {
-                position: fixed;
-                top: 0;
-                left: 0;
-                width: 100%;
-                height: 100%;
-                z-index: 99999;
-                background-color: #fff;
-            }
-        </style>
-    </head>
-    <body>
-        {% include './_geonode_config.html' %}
-        <div id="ms-container" class="ms2">
-            <div class="gn-main-loader-container">
-                <div class="gn-main-loader-content">
-                    <div class="gn-main-loader"></div>
-                    <div class="gn-main-loader-text"></div>
-                </div>
-            </div>
-        </div>
-        <script id="gn-script" src="{% static 'mapstore/dist/gn-viewer.js' %}?{% client_version %}"></script>
-    </body>
-</html>
diff --git a/geonode_mapstore_client/templates/index.html b/geonode_mapstore_client/templates/index.html
index 475f1efee5..13e795709d 100644
--- a/geonode_mapstore_client/templates/index.html
+++ b/geonode_mapstore_client/templates/index.html
@@ -1,82 +1,62 @@
 {% load static %}
 {% load client_version %}
 <!DOCTYPE html>
-<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" />
         <title>{{ SITE_NAME }}</title>
         <link rel="shortcut icon" href="{% static 'geonode/img/favicon.ico' %}" />
-        <style>
-            .gn-main-loader-container {
-                position: absolute;
-                top: 0;
-                left: 0;
-                width: 100%;
-                height: 100%;
-                display: flex;
-                align-items: center;
-                justify-content: center;
-                font-size: 14px;
-                flex-direction: column;
-            }
-            .gn-main-loader-content {
-                position: relative;
-                font-size: inherit;
-            }
-            .gn-main-loader {
-                border-radius: 50%;
-                width: 12em;
-                height: 12em;
-                box-sizing: border-box;
-                border: 1em solid rgba(119,119,119, 0.2);
-                border-left: 1em solid #777777;
-                -webkit-animation: gn-main-loader-animation 1.1s infinite linear;
-                animation: gn-main-loader-animation 1.1s infinite linear;
-            }
-            .gn-main-loader-text {
-                position: absolute;
-                top: 50%;
-                left: 50%;
-                transform: translate(-50%, -50%);
-                font-size: 1.5em;
-                text-align: center;
-                font-family: 'Montserrat', sans-serif;
-            }
-            @-webkit-keyframes gn-main-loader-animation {
-                0% {
-                    -webkit-transform: rotate(0deg);
-                    transform: rotate(0deg);
-                }
-                100% {
-                    -webkit-transform: rotate(360deg);
-                    transform: rotate(360deg);
-                }
-            }
-            @keyframes gn-main-loader-animation {
-                0% {
-                    -webkit-transform: rotate(0deg);
-                    transform: rotate(0deg);
-                }
-                100% {
-                    -webkit-transform: rotate(360deg);
-                    transform: rotate(360deg);
-                }
-            }
-        </style>
+        {% include './geonode-mapstore-client/snippets/loader_style.html' %}
+        {% block extra_style %}
+        {% endblock %}
     </head>
-    <body>
+    <body class="gn-theme gn-theme-light gn-homepage ms2">
         {% include './geonode-mapstore-client/_geonode_config.html' %}
-        <div id="container">
-            <div class="gn-main-loader-container">
-                <div class="gn-main-loader-content">
-                    <div class="gn-main-loader"></div>
-                    <div class="gn-main-loader-text"></div>
+        {% block header %}
+            {% include './geonode-mapstore-client/snippets/header.html' with show_hero=True %}
+        {% endblock %}
+
+        {% block content %}
+            {% comment %}
+            <!-- example of content extension -->
+            <div class="gn-container">
+                <div class="gn-content">
+                    <!-- My custom content -->
                 </div>
             </div>
-        </div>
-        <script id="gn-script" src="{% static 'mapstore/dist/gn-home.js' %}?{% client_version %}"></script>
+            {% endcomment %}
+        {% endblock %}
+
+        {% block container %}
+            <div id="container">
+                <div class="gn-main-loader-container">
+                    <div class="gn-main-loader-content">
+                        <div class="gn-main-loader"></div>
+                        <div class="gn-main-loader-text"></div>
+                    </div>
+                </div>
+            </div>
+        {% endblock %}
+
+        {% block ms_scripts %}
+            <script id="gn-script" src="{% static 'mapstore/dist/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
+                $('.dropdown-toggle').dropdown();
+            </script>
+        {% endblock %}
     </body>
 </html>
diff --git a/geonode_mapstore_client/templatetags/get_menu_json.py b/geonode_mapstore_client/templatetags/get_menu_json.py
index bd745a40ac..294d0e0784 100644
--- a/geonode_mapstore_client/templatetags/get_menu_json.py
+++ b/geonode_mapstore_client/templatetags/get_menu_json.py
@@ -12,6 +12,217 @@ def _handle_single_item(menu_item):
         m_item['target'] = '_blank'
     return m_item
 
+@register.simple_tag
+def get_base_left_topbar_menu():
+
+    return [
+        {
+            "label": "Datasets",
+            "type": "dropdown",
+            "items": [
+                {
+                    "type": "link",
+                    "href": "/catalogue/#/search/?filter{resource_type.in}=layer",
+                    "label": "Datasets"
+                },
+                {
+                    "type": "divider"
+                },
+                {
+                    "type": "link",
+                    "href": "/layers/upload",
+                    "label": "Upload dataset"
+                }
+            ]
+        },
+        {
+            "label": "Documents",
+            "type": "dropdown",
+            "items": [
+                {
+                    "type": "link",
+                    "href": "/catalogue/#/search/?filter{resource_type.in}=document",
+                    "label": "Documents"
+                },
+                {
+                    "type": "divider"
+                },
+                {
+                    "type": "link",
+                    "href": "/documents/upload",
+                    "label": "Upload document"
+                }
+            ]
+        },
+        {
+            "type": "divider"
+        },
+        {
+            "label": "Maps",
+            "type": "dropdown",
+            "items": [
+                {
+                    "type": "link",
+                    "href": "/catalogue/#/search/?filter{resource_type.in}=map",
+                    "label": "Explore maps"
+                },
+                {
+                    "type": "divider"
+                },
+                {
+                    "type": "link",
+                    "href": "/catalogue/#/map/new",
+                    "label": "Create Map"
+                }
+            ]
+        },
+        {
+            "label": "GeoStories",
+            "type": "dropdown",
+            "items": [
+                {
+                    "type": "link",
+                    "href": "/catalogue/#/search/?filter{resource_type.in}=geostory",
+                    "label": "GeoStories"
+                },
+                {
+                    "type": "divider"
+                },
+                {
+                    "type": "link",
+                    "href": "/catalogue/#/geostory/new",
+                    "label": "Create GeoStory"
+                }
+            ]
+        },
+        {
+            "label": "About",
+            "type": "dropdown",
+            "items": [
+                {
+                    "type": "link",
+                    "href": "/people/",
+                    "label": "People"
+                },
+                {
+                    "type": "link",
+                    "href": "/groups/",
+                    "label": "Groups"
+                },
+                {
+                    "type": "link",
+                    "href": "/groups/categories/",
+                    "label": "Groups categories"
+                },
+                {
+                    "type": "link",
+                    "href": "/announcements/",
+                    "label": "Announcements"
+                },
+                {
+                    "type": "divider"
+                },
+                {
+                    "type": "link",
+                    "href": "/invitations/geonode-send-invite/",
+                    "label": "Invite users"
+                },
+                {
+                    "type": "link",
+                    "href": "/admin/people/profile/add/",
+                    "label": "Add user"
+                },
+                {
+                    "type": "link",
+                    "href": "/groups/create/",
+                    "label": "Create group"
+                }
+            ]
+        }
+    ]
+
+@register.simple_tag
+def get_user_menu():
+
+    '''
+    if user is not authenticated
+        {
+            "label": "Register",
+            "type": "link",
+            "href": "/account/signup/?next=/"
+        },
+        {
+            "label": "Sign in",
+            "type": "link",
+            "href": "/account/login/?next=/"
+        }
+    '''
+
+    '''
+    if user is authenticated
+    '''
+    return [
+        
+        {
+            # get src of user avatar
+            "image": "https://www.gravatar.com/avatar/7a68c67c8d409ff07e42aa5d5ab7b765/?s=240",
+            "type": "dropdown",
+            "className": "gn-user-menu-dropdown",
+            "items": [
+                {
+                    "type": "link",
+                    # get href of user profile
+                    "href": "{state('user') && state('user').hrefProfile}",
+                    "label": "Profile"
+                },
+                {
+                    "type": "link",
+                    "href": "/social/recent-activity",
+                    "label": "Recent activity"
+                },
+                {
+                    "type": "link",
+                    "href": "/favourite/list/",
+                    "label": "Favorites"
+                },
+                {
+                    "type": "link",
+                    "href": "/messages/inbox/",
+                    "label": "Inbox"
+                },
+                {
+                    "type": "divider"
+                },
+                {
+                    "type": "link",
+                    "href": "/admin/",
+                    "label": "Admin"
+                },
+                {
+                    "type": "link",
+                    "href": "/geoserver/",
+                    "label": "GeoServer"
+                },
+                {
+                    "type": "divider"
+                },
+                {
+                    "type": "link",
+                    "href": "/help/",
+                    "label": "Help"
+                },
+                {
+                    "type": "divider"
+                },
+                {
+                    "type": "link",
+                    "href": "/account/logout/?next=/",
+                    "label": "Log out"
+                }
+            ]
+        }
+    ]
+
 @register.simple_tag
 def get_menu_json(placeholder_name):
     menus = {
diff --git a/geonode_mapstore_client/templatetags/local_config.py b/geonode_mapstore_client/templatetags/local_config.py
new file mode 100644
index 0000000000..1a472d594f
--- /dev/null
+++ b/geonode_mapstore_client/templatetags/local_config.py
@@ -0,0 +1,29 @@
+import os
+import logging
+import json
+
+from django import template
+from django.conf import settings
+from django.contrib.staticfiles.finders import find
+
+logger = logging.getLogger(__name__)
+register = template.Library()
+
+@register.simple_tag
+def get_local_config():
+    local_config_path = 'mapstore/configs/localConfig.json'
+    if settings.DEBUG:
+        file_path = find(local_config_path)
+    else:
+        file_path = os.path.join(
+            settings.STATIC_ROOT,
+            local_config_path
+        )
+    try:
+        with open(file_path, 'r') as f:
+            data = json.load(f)
+            print(file_path)
+        return data
+    except Exception as e:
+        logger.error(e)
+        return {}