diff --git a/geonode_mapstore_client/client/js/components/MediaViewer/Media.jsx b/geonode_mapstore_client/client/js/components/MediaViewer/Media.jsx
index 028a279135..13c7ec99ce 100644
--- a/geonode_mapstore_client/client/js/components/MediaViewer/Media.jsx
+++ b/geonode_mapstore_client/client/js/components/MediaViewer/Media.jsx
@@ -26,7 +26,8 @@ const loaderComponent = () => <div className="pdf-loader"><Loader size={70}/></d
 const mediaDefaultProps = {
     video: {
         mode: "view",
-        inView: true
+        inView: true,
+        fit: 'contain'
     },
     image: {
         fit: "contain",
diff --git a/geonode_mapstore_client/client/js/components/MetaTags/Meta.jsx b/geonode_mapstore_client/client/js/components/MetaTags/Meta.jsx
index 79035a91e8..4d31a4e4ec 100644
--- a/geonode_mapstore_client/client/js/components/MetaTags/Meta.jsx
+++ b/geonode_mapstore_client/client/js/components/MetaTags/Meta.jsx
@@ -1,11 +1,11 @@
 import React from 'react';
 import { Helmet } from 'react-helmet';
 
-export const MetaTags = ({siteName, content, logo, contentURL =  window.location.href}) => {
+export const MetaTags = ({siteName, title, content, logo, contentURL =  window.location.href}) => {
     return (<Helmet>
-        <title>{siteName}</title>
+        <title>{title}</title>
         <meta name="description" content={content} />
-        <meta property="og:title" content={siteName + " " +  content} />
+        <meta property="og:title" content={title} />
         <meta property="og:site_name" content={siteName} />
         <meta property="og:url" content={contentURL} />
         <meta property="og:description" content={content} />
@@ -13,7 +13,7 @@ export const MetaTags = ({siteName, content, logo, contentURL =  window.location
 
         <meta name="twitter:site" content={siteName} />
         <meta name="twitter:card" content="summary_large_image" />
-        <meta name="twitter:title" content={siteName} />
+        <meta name="twitter:title" content={title} />
         <meta name="twitter:description" content={content} />
         <meta name="twitter:image:src" content={logo}/>
     </Helmet>);
diff --git a/geonode_mapstore_client/client/js/components/MetaTags/__tests__/Meta-test.jsx b/geonode_mapstore_client/client/js/components/MetaTags/__tests__/Meta-test.jsx
index 2030a84711..7c17f1976e 100644
--- a/geonode_mapstore_client/client/js/components/MetaTags/__tests__/Meta-test.jsx
+++ b/geonode_mapstore_client/client/js/components/MetaTags/__tests__/Meta-test.jsx
@@ -18,6 +18,7 @@ describe('MetaTags', () => {
     it('should render by default', () => {
         render(<Meta
             logo={'http://example.com'}
+            title={"Test Title"}
             siteName={"Test Site"}
             content={"Test Content"}
         />, document.getElementById("container"));
@@ -29,6 +30,10 @@ describe('MetaTags', () => {
                 expect(tag.content).toEqual("Test Site");
             }
 
+            if (tag.property === "title") {
+                expect(tag.content).toEqual("Test Title");
+            }
+
             if (tag.name === "decription" || tag.name === "twitter:description") {
                 expect(tag.content).toEqual("Test Content");
             }
diff --git a/geonode_mapstore_client/client/js/components/RootStyle/RootStyle.jsx b/geonode_mapstore_client/client/js/components/RootStyle/RootStyle.jsx
index e5974c6ca3..ac31da158a 100644
--- a/geonode_mapstore_client/client/js/components/RootStyle/RootStyle.jsx
+++ b/geonode_mapstore_client/client/js/components/RootStyle/RootStyle.jsx
@@ -26,7 +26,7 @@ function buttonTheme(style, name) {
         includeFallbackColors: true
     }).toHexString();
 
-    const borderColor = style.borderColor || tinycolor(bg).darken(8).toString();
+    const borderColor = style.borderColor || bg;
     const focusColor = style.focusColor || color;
     const focusBg = style.focusBg || tinycolor(bg).darken(10).toString();
     const focusBorderColor = style.focusBorderColor || tinycolor(bg).darken(25).toString();
@@ -81,6 +81,9 @@ function RootStyle({
                 bodyShade,
                 placeholder,
                 disabled,
+                info,
+                success,
+                warning,
                 danger,
                 primary,
                 link,
@@ -91,17 +94,30 @@ function RootStyle({
                 badge,
                 footer,
                 buttonDefault,
-                buttonPrimary
+                buttonPrimary,
+                buttonInfo,
+                buttonSuccess,
+                buttonWarning,
+                buttonDanger
             } = theme;
-            const color = themeColor && tinycolor.mostReadable(themeColor, ['#ffffff', '#000000'], {
+
+            const bg = primary?.value || themeColor;
+            const color = primary?.contrast || bg && tinycolor.mostReadable(bg, ['#ffffff', '#000000'], {
                 includeFallbackColors: true
             }).toHexString();
+
+            const btnPrimary = (bg || buttonPrimary) && {
+                ...(bg && { bg }),
+                ...(color && { color }),
+                ...buttonPrimary
+            };
+
             return {
-                ...(themeColor && {
+                ...(bg && {
                     '--gn-primary-contrast': color,
-                    '--gn-primary': themeColor,
-                    '--gn-loader-primary-color': themeColor,
-                    '--gn-loader-primary-fade-color': tinycolor(themeColor).setAlpha(0.2).toString(),
+                    '--gn-primary': bg,
+                    '--gn-loader-primary-color': bg,
+                    '--gn-loader-primary-fade-color': tinycolor(bg).setAlpha(0.2).toString(),
                     '--gn-loader-primary-contrast-color': color,
                     '--gn-loader-primary-contrast-fade-color': tinycolor(color).setAlpha(0.2).toString()
                 }),
@@ -124,14 +140,26 @@ function RootStyle({
                     '--gn-disabled-color': disabled.color || '#acacac',
                     '--gn-disabled-bg': disabled.bg || '#fcfcfc'
                 }),
-                ...(danger && {
-                    '--gn-danger-contrast': danger.contrast || '#ffffff',
-                    '--gn-danger': danger.value || '#D0021B'
-                }),
                 ...(primary && {
                     '--gn-primary-contrast': primary.contrast || '#ffffff',
                     '--gn-primary': primary.value || '#397AAB'
                 }),
+                ...(info && {
+                    '--gn-info-contrast': info.contrast || '#ffffff',
+                    '--gn-info': info.value || '#639fcc'
+                }),
+                ...(success && {
+                    '--gn-success-contrast': success.contrast || '#ffffff',
+                    '--gn-success': success.value || '#58cf80'
+                }),
+                ...(warning && {
+                    '--gn-warning-contrast': warning.contrast || '#ffffff',
+                    '--gn-warning': warning.value || '#ebbc35'
+                }),
+                ...(danger && {
+                    '--gn-danger-contrast': danger.contrast || '#ffffff',
+                    '--gn-danger': danger.value || '#bb4940'
+                }),
                 ...(link && {
                     '--gn-link-color': link.color || '#397AAB',
                     '--gn-link-hover-color': link.hoverColor || '#1b4d74'
@@ -166,11 +194,12 @@ function RootStyle({
                         '--gn-footer-link-hover-color': footer.link.hoverColor || '#1b4d74'
                     })
                 }),
-                ...buttonDefault?.bg && buttonTheme(buttonDefault),
-                ...(buttonPrimary?.bg || themeColor || primary?.bg) && buttonTheme({
-                    bg: themeColor || primary?.bg,
-                    ...buttonPrimary
-                }, 'primary')
+                ...(buttonDefault?.bg && buttonTheme(buttonDefault)),
+                ...(buttonInfo?.bg && buttonTheme(buttonInfo, 'info')),
+                ...(buttonSuccess?.bg && buttonTheme(buttonSuccess, 'success')),
+                ...(buttonWarning?.bg && buttonTheme(buttonWarning, 'warning')),
+                ...(buttonDanger?.bg && buttonTheme(buttonDanger, 'danger')),
+                ...(btnPrimary?.bg && buttonTheme(btnPrimary, 'primary'))
             };
         }
         return {};
diff --git a/geonode_mapstore_client/client/js/components/Spinner/Spinner.jsx b/geonode_mapstore_client/client/js/components/Spinner/Spinner.jsx
index d98e216b9a..d4e0d85426 100644
--- a/geonode_mapstore_client/client/js/components/Spinner/Spinner.jsx
+++ b/geonode_mapstore_client/client/js/components/Spinner/Spinner.jsx
@@ -22,7 +22,7 @@ function Spinner({
             <div
                 { ...props }
                 id={id}
-                className={`spinner${customClassName}`}
+                className={`gn-spinner${customClassName}`}
                 style={style}
             >
                 <div />
diff --git a/geonode_mapstore_client/client/js/components/home/DetailsPanel.jsx b/geonode_mapstore_client/client/js/components/home/DetailsPanel.jsx
index 47a3d95257..0bd9481ae7 100644
--- a/geonode_mapstore_client/client/js/components/home/DetailsPanel.jsx
+++ b/geonode_mapstore_client/client/js/components/home/DetailsPanel.jsx
@@ -178,7 +178,7 @@ function DetailsPanel({
                         }}>
                         <FaIcon name={icon}/>
                     </div>
-                    {embedUrl
+                    {embedUrl && !editThumbnail
                         ? <iframe
                             key={embedUrl}
                             src={embedUrl}
@@ -256,7 +256,6 @@ function DetailsPanel({
                                 {detailUrl && <Button
                                     variant="default"
                                     href={detailUrl}
-                                    target="_blank"
                                     rel="noopener noreferrer">
                                     <Message msgId={`gnhome.view${name || ''}`}/>
                                 </Button>}
diff --git a/geonode_mapstore_client/client/js/components/home/LanguageSelector.jsx b/geonode_mapstore_client/client/js/components/home/LanguageSelector.jsx
index 1cf455d4d6..c8fef4fb41 100644
--- a/geonode_mapstore_client/client/js/components/home/LanguageSelector.jsx
+++ b/geonode_mapstore_client/client/js/components/home/LanguageSelector.jsx
@@ -37,11 +37,12 @@ const LanguageSelector = forwardRef(({
         >
             {inline
                 ? options.map((option) => {
+                    const active = option.value === value;
                     return (
                         <Button
-                            active={option.value === value}
+                            active={active}
                             key={option.key}
-                            variant="default"
+                            variant={active ? 'default' : 'primary'}
                             onClick={() => onSelect(option.value)}
                         >
                             {option.key}
diff --git a/geonode_mapstore_client/client/js/epics/gnviewer.js b/geonode_mapstore_client/client/js/epics/gnviewer.js
index 325ec9242a..4618f9825d 100644
--- a/geonode_mapstore_client/client/js/epics/gnviewer.js
+++ b/geonode_mapstore_client/client/js/epics/gnviewer.js
@@ -118,7 +118,7 @@ export const gnViewerRequestLayerConfig = (action$) =>
                     ...(page === 'layer_edit_style_viewer'
                         ? [
                             selectNode(newLayer.id, 'layer', false),
-                            showSettings(newLayer.id, 'layer', {
+                            showSettings(newLayer.id, 'layers', {
                                 opacity: newLayer.opacity || 1
                             }),
                             setControlProperty('layersettings', 'activeTab', 'style'),
diff --git a/geonode_mapstore_client/client/js/plugins/DetailViewer.jsx b/geonode_mapstore_client/client/js/plugins/DetailViewer.jsx
index 26e93da597..61ead97c7f 100644
--- a/geonode_mapstore_client/client/js/plugins/DetailViewer.jsx
+++ b/geonode_mapstore_client/client/js/plugins/DetailViewer.jsx
@@ -20,7 +20,7 @@ import controls from '@mapstore/framework/reducers/controls';
 import {toggleControl} from '@mapstore/framework/actions/controls';
 import gnresource from '@js/reducers/gnresource';
 import Message from '@mapstore/framework/components/I18N/Message';
-import { userSelector } from '@mapstore/framework/selectors/security';
+import { canEditResource } from '@js/selectors/gnresource';
 import Button from '@js/components/Button';
 
 const ConnectedDetailsPanel = connect(
@@ -37,13 +37,13 @@ const ConnectedDetailsPanel = connect(
     }
 )(DetailsPanel);
 
-const ButtonViewer = ({user,  onClick}) => {
+const ButtonViewer = ({onClick}) => {
 
     const handleClickButton = () => {
         onClick();
     };
 
-    return (user && <Button
+    return (<Button
         variant="primary"
         onClick={handleClickButton}
     > <Message msgId="gnviewer.details"/>
@@ -51,10 +51,8 @@ const ButtonViewer = ({user,  onClick}) => {
 };
 
 const ConnectedButton = connect(
-    createSelector([userSelector],
-        (user) => ({
-            user
-        })),
+    createSelector([],
+        () => ({})),
     {
         onClick: toggleControl.bind(null, 'DetailViewer', null)
     }
@@ -65,7 +63,9 @@ function DetailViewer({
     enabled,
     onEditResource,
     onEditAbstractResource,
-    onEditThumbnail}) {
+    onEditThumbnail,
+    canEdit
+}) {
 
     const handleTitleValue = (val) => {
         onEditResource(val);
@@ -87,11 +87,11 @@ function DetailViewer({
                 height: '100%'
 
             }}>
-            { enabled && <ConnectedDetailsPanel
+            { !enabled && <ConnectedDetailsPanel
                 editTitle={handleTitleValue}
                 editAbstract={handleAbstractValue}
                 editThumbnail={handleEditThumbnail}
-                activeEditMode={enabled}
+                activeEditMode={!enabled && canEdit}
                 sectionStyle={{
                     width: '600px',
                     position: 'fixed'
@@ -103,9 +103,11 @@ function DetailViewer({
 
 const DetailViewerPlugin = connect(
     createSelector([
-        state => state?.controls?.DetailViewer?.enabled || false
-    ], (enabled) => ({
-        enabled
+        state => state?.controls?.DetailViewer?.enabled || false,
+        canEditResource
+    ], (enabled, canEdit) => ({
+        enabled,
+        canEdit
     })),
     {
         onEditResource: editTitleResource,
diff --git a/geonode_mapstore_client/client/js/plugins/index.js b/geonode_mapstore_client/client/js/plugins/index.js
index 7a178d75e4..aaefb551b1 100644
--- a/geonode_mapstore_client/client/js/plugins/index.js
+++ b/geonode_mapstore_client/client/js/plugins/index.js
@@ -109,7 +109,14 @@ export const plugins = {
                 ActionNavbar: {
                     name: 'Catalog',
                     target: 'leftMenuItem',
-                    Component: CatalogActionButton
+                    Component: CatalogActionButton,
+                    priority: 1
+                },
+                ViewerLayout: {
+                    priority: 1
+                },
+                TOC: {
+                    priority: 1
                 }
             }
         }
diff --git a/geonode_mapstore_client/client/js/routes/DocumentViewer.jsx b/geonode_mapstore_client/client/js/routes/DocumentViewer.jsx
index 81449c136b..b9406b79f4 100644
--- a/geonode_mapstore_client/client/js/routes/DocumentViewer.jsx
+++ b/geonode_mapstore_client/client/js/routes/DocumentViewer.jsx
@@ -60,10 +60,11 @@ function DocumentViewerRoute({
     return (
         <>
             {resource &&   <MetaTags
-                logo={resource.thumbnail_url}
-                siteName={siteName + " " + resource.title}
-                contentURL={resource.detail_url}
-                content={resource.abstract}
+                logo={resource?.thumbnail_url}
+                title={(resource?.title) ? resource?.title + " - " + siteName : siteName }
+                siteName={siteName}
+                contentURL={resource?.detail_url}
+                content={resource?.abstract}
             />}
             <ConnectedPluginsContainer
                 key="page-document-viewer"
diff --git a/geonode_mapstore_client/client/js/routes/GeoStoryViewer.jsx b/geonode_mapstore_client/client/js/routes/GeoStoryViewer.jsx
index 20f381a8ba..9dae13d733 100644
--- a/geonode_mapstore_client/client/js/routes/GeoStoryViewer.jsx
+++ b/geonode_mapstore_client/client/js/routes/GeoStoryViewer.jsx
@@ -69,7 +69,8 @@ function GeoStoryViewerRoute({
         <>
             {resource &&  <MetaTags
                 logo={resource.thumbnail_url}
-                siteName={siteName + " " + resource.title}
+                title={(resource?.title) ? resource?.title + " - " + siteName : siteName }
+                siteName={siteName}
                 contentURL={resource.detail_url}
                 content={resource.abstract}
             />}
diff --git a/geonode_mapstore_client/client/js/routes/Home.jsx b/geonode_mapstore_client/client/js/routes/Home.jsx
index 2faa23deb3..519cb0ac6c 100644
--- a/geonode_mapstore_client/client/js/routes/Home.jsx
+++ b/geonode_mapstore_client/client/js/routes/Home.jsx
@@ -381,7 +381,8 @@ function Home({
         <div className={`gn-home`}>
             <MetaTags
                 logo={resource ? resource.thumbnail_url : window.location.origin + config?.navbar?.logo[0]?.src}
-                siteName={siteName + " " + (resource ? resource.title : "")}
+                title={(resource?.title) ? resource?.title + " - " + siteName : siteName }
+                siteName={siteName}
                 contentURL={resource?.detail_url}
                 content={resource?.abstract}
             />
diff --git a/geonode_mapstore_client/client/js/routes/LayerViewer.jsx b/geonode_mapstore_client/client/js/routes/LayerViewer.jsx
index 676a2bf064..5e9737b8a7 100644
--- a/geonode_mapstore_client/client/js/routes/LayerViewer.jsx
+++ b/geonode_mapstore_client/client/js/routes/LayerViewer.jsx
@@ -61,10 +61,11 @@ function LayerViewerRoute({
     return (
         <>
             {resource &&  <MetaTags
-                logo={resource.thumbnail_url}
-                siteName={siteName + " " + resource.title}
-                contentURL={resource.detail_url}
-                content={resource.abstract}
+                logo={resource?.thumbnail_url}
+                title={(resource?.title) ? resource?.title + " - " + siteName : siteName }
+                siteName={siteName}
+                contentURL={resource?.detail_url}
+                content={resource?.abstract}
             />}
             <ConnectedPluginsContainer
                 key="page-layer-viewer"
diff --git a/geonode_mapstore_client/client/js/routes/MapViewer.jsx b/geonode_mapstore_client/client/js/routes/MapViewer.jsx
index 6611caf5a1..a1ad33b34c 100644
--- a/geonode_mapstore_client/client/js/routes/MapViewer.jsx
+++ b/geonode_mapstore_client/client/js/routes/MapViewer.jsx
@@ -64,9 +64,10 @@ function MapViewerRoute({
         <>
             {resource &&  <MetaTags
                 logo={resource.thumbnail_url}
-                siteName={siteName + " " + resource.title}
-                contentURL={resource.detail_url}
-                content={resource.abstract}
+                title={(resource?.title) ? resource?.title + " - " + siteName : siteName }
+                siteName={siteName}
+                contentURL={resource?.detail_url}
+                content={resource?.abstract}
             />}
             <ConnectedPluginsContainer
                 key="page-map-viewer"
diff --git a/geonode_mapstore_client/client/static/mapstore/configs/localConfig.json b/geonode_mapstore_client/client/static/mapstore/configs/localConfig.json
index e402506820..06014ddc63 100644
--- a/geonode_mapstore_client/client/static/mapstore/configs/localConfig.json
+++ b/geonode_mapstore_client/client/static/mapstore/configs/localConfig.json
@@ -2644,7 +2644,11 @@
                 "override": {
                     "Toolbar": {
                         "position": 11,
-                        "alwaysVisible": false
+                        "alwaysVisible": false,
+                        "priority": 1
+                    },
+                    "ViewerLayout": {
+                        "priority": 1
                     }
                 }
             },
@@ -2844,7 +2848,16 @@
                 "name": "BrandNavbar"
             },
             {
-                "name": "FeatureEditor"
+                "name": "FeatureEditor",
+                "override": {
+                    "ViewerLayout": {
+                        "priority": 1
+                    },
+                    "TOC": {
+                        "priority": 1,
+                        "doNotHide": false
+                    }
+                }
             },
             {
                 "name": "QueryPanel",
@@ -2929,6 +2942,9 @@
                         "priority": 1
                     }
                 }
+            },
+            {
+                "name": "Notifications"
             }
         ],
         "layer_edit_style_viewer": [
@@ -2967,6 +2983,14 @@
                     "enableSetDefaultStyle": true
                 }
             },
+            {
+                "name": "DrawerMenu",
+                "override": {
+                    "ViewerLayout": {
+                        "priority": 1
+                    }
+                }
+            },
             {
                 "name": "TOCItemsSettings",
                 "cfg": {
@@ -3010,11 +3034,15 @@
                         "priority": 1
                     }
                 }
+            },
+            {
+                "name": "Notifications"
             }
         ],
         "map_viewer": [
             { "name": "ViewerLayout" },
             { "name": "ActionNavbar" },
+            { "name": "DetailViewer"},
             { "name": "BrandNavbar" },
             {
                 "name": "Map",
@@ -3062,7 +3090,11 @@
                 "override": {
                     "Toolbar": {
                         "position": 11,
-                        "alwaysVisible": false
+                        "alwaysVisible": false,
+                        "priority": 1
+                    },
+                    "ViewerLayout": {
+                        "priority": 1
                     }
                 }
             },
@@ -3182,7 +3214,16 @@
                 "name": "ScaleBox"
             },
             {
-                "name": "FeatureEditor"
+                "name": "FeatureEditor",
+                "override": {
+                    "ViewerLayout": {
+                        "priority": 1
+                    },
+                    "TOC": {
+                        "priority": 1,
+                        "doNotHide": false
+                    }
+                }
             },
             {
                 "name": "QueryPanel",
@@ -3275,7 +3316,16 @@
                 }
             },
             {
-                "name": "Widgets"
+                "name": "Widgets",
+                "override": {
+                    "ViewerLayout": {
+                        "priority": 1
+                    },
+                    "TOC": {
+                        "priority": 1,
+                        "doNotHide": false
+                    }
+                }
             },
             {
                 "name": "WidgetsTray",
@@ -3307,7 +3357,16 @@
                 "name": "Locate"
             },
             {
-                "name": "WidgetsBuilder"
+                "name": "WidgetsBuilder",
+                "override": {
+                    "ViewerLayout": {
+                        "priority": 1
+                    },
+                    "TOC": {
+                        "priority": 1,
+                        "doNotHide": false
+                    }
+                }
             },
             {
                 "name": "Save",
@@ -3349,6 +3408,7 @@
             { "name": "ViewerLayout" },
             { "name": "ActionNavbar" },
             { "name": "BrandNavbar" },
+            { "name": "DetailViewer"},
             {
                 "name": "GeoStory",
                 "cfg": {
diff --git a/geonode_mapstore_client/client/themes/geonode/less/_bootstrap-variables.less b/geonode_mapstore_client/client/themes/geonode/less/_bootstrap-variables.less
index 22e3efe2ce..f4c65c626a 100644
--- a/geonode_mapstore_client/client/themes/geonode/less/_bootstrap-variables.less
+++ b/geonode_mapstore_client/client/themes/geonode/less/_bootstrap-variables.less
@@ -11,6 +11,10 @@
 @font-family-sans-serif: var(--gn-font-family-sans-serif, @gn-font-family-sans-serif);
 @font-family-base: var(--gn-font-family-base, @gn-font-family-base);
 
+@border-radius-base: 2px;
+@border-radius-large: 2px;
+@border-radius-small: 2px;
+
 @jumbotron-bg: transparent;
 
 @primary: @gn-primary;
diff --git a/geonode_mapstore_client/client/themes/geonode/less/_spinner.less b/geonode_mapstore_client/client/themes/geonode/less/_spinner.less
index 9f3d702866..3d265ac8eb 100644
--- a/geonode_mapstore_client/client/themes/geonode/less/_spinner.less
+++ b/geonode_mapstore_client/client/themes/geonode/less/_spinner.less
@@ -3,7 +3,7 @@
 // **************
 
 #gn-components-theme(@theme-vars) {
-    .spinner {
+    .gn-spinner {
         .border-top-color-var(@theme-vars[loader-fade-color]);
         .border-right-color-var(@theme-vars[loader-fade-color]);
         .border-bottom-color-var(@theme-vars[loader-fade-color]);
@@ -15,7 +15,7 @@
 // Layout
 // **************
 
-.get-spinner(@border-size: 0.1em, @size: 1em) {
+.get-gn-spinner(@border-size: 0.1em, @size: 1em) {
     @-webkit-keyframes load {
         0% {
             -webkit-transform: rotate(0deg);
@@ -56,9 +56,9 @@
     border-color: inherit;
 }
 
-.spinner {
+.gn-spinner {
     display: inline-flex;
     >div {
-        .get-spinner(0.1em, 1em);
+        .get-gn-spinner(0.1em, 1em);
     }
 }
diff --git a/geonode_mapstore_client/client/themes/geonode/less/ms-theme.less b/geonode_mapstore_client/client/themes/geonode/less/ms-theme.less
index 15fc1c8a95..d991304b1b 100644
--- a/geonode_mapstore_client/client/themes/geonode/less/ms-theme.less
+++ b/geonode_mapstore_client/client/themes/geonode/less/ms-theme.less
@@ -31,3 +31,42 @@
         flex: 1;
     }
 }
+
+.page-map-viewer {
+    .gn-viewer-layout-body {
+        // needed to compute the position of ma toolbar and background selector
+        // when the attribute table is open
+        transform: translate(0, 0);
+    }
+}
+
+#map {
+    top: 0;
+}
+
+// display a margin on search bar and TOC buttons
+// to get a floating effect in map and layer viewer
+#drawer-menu-button,
+#mapstore-navbar-container {
+    margin: 5px;
+}
+
+// hide di edit, remove and add buttons
+// because these functionalities are not supported on the geonode catalog
+.background-preview-button > .btn-group,
+.background-tool-buttons {
+    display: none;
+}
+
+// mapstore compute this value using @square-btn-size and @font-size-h4
+// in this specific context those value have different uom
+// we should override this to ensure to use rem and have the correct value for padding
+.ms-resizable-modal > .modal-content > .modal-header {
+    height: (@font-size-h4 * 3);
+    padding: @font-size-h4;
+}
+// the input small size is not computed correctly due to rem value
+// this override will fix the attribute table filter inputs
+.input-sm {
+    height: 1.75rem;
+}
diff --git a/geonode_mapstore_client/client/themes/preview/less/geonode.less b/geonode_mapstore_client/client/themes/preview/less/geonode.less
index babf1bf5fd..d7787bfb9c 100644
--- a/geonode_mapstore_client/client/themes/preview/less/geonode.less
+++ b/geonode_mapstore_client/client/themes/preview/less/geonode.less
@@ -48,6 +48,15 @@
 }
 @import   "../../default/less/geonode.less";
 
+// ensure the inline-flex of square-buttons does not override
+// the vertical group style in preview mode
+.btn-group-vertical > .btn,
+.btn-group-vertical > .btn-group,
+.btn-group-vertical > .btn-group > .btn {
+    display: block;
+    width: 100%;
+}
+
 #map{
     bottom: 0px !important;
 }