diff --git a/geonode_mapstore_client/client/MapStore2 b/geonode_mapstore_client/client/MapStore2
index f919fcaa45..9bb7b14617 160000
--- a/geonode_mapstore_client/client/MapStore2
+++ b/geonode_mapstore_client/client/MapStore2
@@ -1 +1 @@
-Subproject commit f919fcaa45ddf1a035d978faf2752386a159c635
+Subproject commit 9bb7b146177c8fffaa3192e5aacd8689d32c0065
diff --git a/geonode_mapstore_client/client/js/actions/visualstyleeditor.js b/geonode_mapstore_client/client/js/actions/visualstyleeditor.js
index 5358749a08..d3b2eec955 100644
--- a/geonode_mapstore_client/client/js/actions/visualstyleeditor.js
+++ b/geonode_mapstore_client/client/js/actions/visualstyleeditor.js
@@ -7,8 +7,6 @@
 */
 
 export const REQUEST_DATASET_AVAILABLE_STYLES = 'GEONODE:REQUEST_DATASET_AVAILABLE_STYLES';
-export const CREATE_GEONODE_STYLE = 'GEONODE:CREATE_GEONODE_STYLE';
-export const DELETE_GEONODE_STYLE = 'GEONODE:DELETE_GEONODE_STYLE';
 
 export function requestDatasetAvailableStyles(layer, options) {
     return {
@@ -17,19 +15,3 @@ export function requestDatasetAvailableStyles(layer, options) {
         options
     };
 }
-
-export function createGeoNodeStyle(title, options) {
-    return {
-        type: CREATE_GEONODE_STYLE,
-        title,
-        options
-    };
-}
-
-export function deleteGeoNodeStyle(styleName, options) {
-    return {
-        type: DELETE_GEONODE_STYLE,
-        styleName,
-        options
-    };
-}
diff --git a/geonode_mapstore_client/client/js/epics/visualstyleeditor.js b/geonode_mapstore_client/client/js/epics/visualstyleeditor.js
index cd89ebd4bb..769c170b1c 100644
--- a/geonode_mapstore_client/client/js/epics/visualstyleeditor.js
+++ b/geonode_mapstore_client/client/js/epics/visualstyleeditor.js
@@ -16,17 +16,11 @@ import { STYLE_OWNER_NAME } from '@mapstore/framework/utils/StyleEditorUtils';
 import StylesAPI from '@mapstore/framework/api/geoserver/Styles';
 import {
     styleServiceSelector,
-    getUpdatedLayer,
-    geometryTypeSelector
+    getUpdatedLayer
 } from '@mapstore/framework/selectors/styleeditor';
-import {
-    CREATE_GEONODE_STYLE,
-    DELETE_GEONODE_STYLE,
-    REQUEST_DATASET_AVAILABLE_STYLES
-} from '@js/actions/visualstyleeditor';
-import { saveDirectContent } from '@js/actions/gnsave';
+import { REQUEST_DATASET_AVAILABLE_STYLES } from '@js/actions/visualstyleeditor';
 import tinycolor from 'tinycolor2';
-import { parseStyleName, parseMetadata } from '@js/utils/ResourceUtils';
+import { parseStyleName } from '@js/utils/ResourceUtils';
 
 /**
 * @module epics/visualstyleeditor
@@ -76,10 +70,9 @@ function getGnStyleQueryParams(style, styleService) {
     return StylesAPI.getStyleCodeByName({
         baseUrl: styleService?.baseUrl,
         styleName: parseStyleName(style)
-    }).then(updatedStyles => {
-        const { metadata = {}, code: updateStyleCode, format, languageVersion } = updatedStyles || {};
-        const metadataObj = parseMetadata(metadata);
-        return { msEditorType: metadataObj?.msEditorType, msStyleJSON: metadataObj?.msStyleJSON, code: updateStyleCode, format, languageVersion };
+    }).then(updatedStyle => {
+        const { metadata = {}, code: updateStyleCode, format, languageVersion } = updatedStyle || {};
+        return { msEditorType: metadata?.msEditorType, msStyleJSON: metadata?.msStyleJSON, code: updateStyleCode, format, languageVersion };
     }).catch(() => ({ msEditorType, msStyleJSON, code}));
 }
 
@@ -106,6 +99,7 @@ function getGeoNodeStyles({ layer, styleService }) {
                 format: (code && format) ? format : 'css',
                 styleName,
                 metadata,
+                options: { params: { raw: true } },
                 ...((code && format) && { languageVersion })
             })
                 .then(() => {
@@ -145,76 +139,6 @@ export const gnRequestDatasetAvailableStyles = (action$, store) =>
             );
         });
 
-export const gnCreateStyle = (action$, store) =>
-    action$.ofType(CREATE_GEONODE_STYLE)
-        .switchMap((action) => {
-            const state = store.getState();
-            const styleService = action?.options?.styleService || styleServiceSelector(state);
-            const styleName = getStyleId({ name: action.title.toLowerCase().replace(/\W/g, '') });
-            const layer = action.layer || getUpdatedLayer(state);
-            const format = 'css';
-            const metadata = {
-                title: action.title,
-                description: '',
-                msStyleJSON: null,
-                msEditorType: 'visual',
-                gnLayerName: layer.name,
-                gnDatasetPk: layer?.extendedParams?.mapLayer?.dataset?.pk
-            };
-            const geometryType = geometryTypeSelector(state);
-            return Observable.defer(
-                () => StylesAPI.createStyle({
-                    baseUrl: styleService?.baseUrl,
-                    code: getBaseCSSStyle({ type: geometryType, title: action.title }),
-                    format,
-                    styleName,
-                    metadata
-                })
-            )
-                .switchMap(() => {
-                    return Observable.of(
-                        updateNode(layer.id, 'layer', { availableStyles: [...layer.availableStyles, { format, metadata, name: styleName, title: action.title }] }),
-                        updateAdditionalLayer(layer.id, STYLE_OWNER_NAME, 'override', {}),
-                        updateSettingsParams({ style: styleName }, true),
-                        updateStatus('edit'),
-                        saveDirectContent()
-                    );
-                });
-        });
-
-export const gnDeleteStyle = (action$, store) =>
-    action$.ofType(DELETE_GEONODE_STYLE)
-        .switchMap((action) => {
-            const state = store.getState();
-            const styleService = action?.options?.styleService || styleServiceSelector(state);
-            const layer = action.layer || getUpdatedLayer(state);
-
-            const completeDeleteProcess = () => {
-                const newAvailableStyles = (layer.availableStyles || []).filter(({ name }) => name !== action.styleName);
-                return Observable.of(
-                    updateNode(layer.id, 'layer', { availableStyles: newAvailableStyles }),
-                    updateAdditionalLayer(layer.id, STYLE_OWNER_NAME, 'override', {}),
-                    updateSettingsParams({ style: newAvailableStyles?.[0]?.name || '' }, true),
-                    updateStatus('edit'),
-                    saveDirectContent()
-                );
-            };
-
-            return Observable.defer(() =>
-                Observable.defer(() =>
-                    StylesAPI.deleteStyle({
-                        baseUrl: styleService?.baseUrl,
-                        styleName: action.styleName
-                    })
-                ))
-                .switchMap(() => {
-                    return completeDeleteProcess();
-                })
-                .catch(() => {
-                    return completeDeleteProcess();
-                });
-        });
-
 export const gnUpdateStyleInfoOnSave = (action$, store) =>
     action$.ofType(UPDATE_STYLE_CODE)
         .switchMap(() => {
@@ -224,8 +148,6 @@ export const gnUpdateStyleInfoOnSave = (action$, store) =>
         });
 
 export default {
-    gnCreateStyle,
-    gnDeleteStyle,
     gnRequestDatasetAvailableStyles,
     gnUpdateStyleInfoOnSave
 };
diff --git a/geonode_mapstore_client/client/js/plugins/VisualStyleEditor.jsx b/geonode_mapstore_client/client/js/plugins/VisualStyleEditor.jsx
index e7f9019d1c..5fee14c5b2 100644
--- a/geonode_mapstore_client/client/js/plugins/VisualStyleEditor.jsx
+++ b/geonode_mapstore_client/client/js/plugins/VisualStyleEditor.jsx
@@ -10,7 +10,7 @@ import React, { useEffect, useRef, useState } from 'react';
 import { createPlugin } from '@mapstore/framework/utils/PluginsUtils';
 import { connect } from 'react-redux';
 import { createSelector } from 'reselect';
-import { Glyphicon, FormControl as FormControlRB, ControlLabel } from 'react-bootstrap';
+import { Glyphicon } from 'react-bootstrap';
 import { StyleCodeEditor } from '@mapstore/framework/plugins/styleeditor/index';
 import styleeditor from '@mapstore/framework/reducers/styleeditor';
 import styleeditorEpics from '@mapstore/framework/epics/styleeditor';
@@ -25,13 +25,10 @@ import {
     updateEditorMetadata
 } from '@mapstore/framework/actions/styleeditor';
 import {
-    createGeoNodeStyle,
-    deleteGeoNodeStyle,
     requestDatasetAvailableStyles
 } from '@js/actions/visualstyleeditor';
 
 import { updateNode, updateSettingsParams } from '@mapstore/framework/actions/layers';
-import { zoomToExtent } from '@mapstore/framework/actions/map';
 import {
     getUpdatedLayer,
     temporaryIdSelector,
@@ -50,12 +47,9 @@ import Portal from '@mapstore/framework/components/misc/Portal';
 import ResizableModal from '@mapstore/framework/components/misc/ResizableModal';
 import StylesAPI from '@mapstore/framework/api/geoserver/Styles';
 import { getResourcePerms, isNewResource } from '@js/selectors/resource';
-import Spinner from '@js/components/Spinner';
 import { mapLayoutValuesSelector } from '@mapstore/framework/selectors/maplayout';
-import localizedProps from '@mapstore/framework/components/misc/enhancers/localizedProps';
 import tooltip from '@mapstore/framework/components/misc/enhancers/tooltip';
 import { getSelectedLayer, layersSelector } from '@mapstore/framework/selectors/layers';
-const FormControl = localizedProps('placeholder')(FormControlRB);
 import useLocalStorage from '@js/hooks/useLocalStorage';
 import TemplateSelector from '@js/plugins/visualstyleeditor/TemplateSelector';
 
@@ -69,20 +63,20 @@ function SaveStyleButton({
     error,
     loading,
     layerLoading,
-    msgId = 'save'
+    msgId = 'gnviewer.applyStyle'
 }) {
-    const isDisabled = !!(loading || error);
-    return (
+    const isDisabled = !!(loading || layerLoading || error);
+    return isStyleChanged ? (
         <Button
-            className={isStyleChanged ? 'gn-pending-changes-icon' : ''}
             variant={variant || "primary"}
+            className={isStyleChanged ? 'gn-pending-changes-icon' : ''}
             size={size}
             disabled={isDisabled}
             onClick={isDisabled ? () => {} : () => onClick()}
         >
-            <Message msgId={msgId}/>{' '}{(loading || layerLoading) && <Spinner />}
+            <Message msgId={msgId}/>
         </Button>
-    );
+    ) : null;
 }
 
 const ConnectedSaveStyleButton = connect(
@@ -121,7 +115,6 @@ const ConnectedTemplateSelector = connect(
     {
         onSelect: editStyleCode,
         onUpdateMetadata: updateEditorMetadata,
-        onUpdate: updateStyleCode,
         onStoreTmpCode: setControlProperty.bind(null, 'visualStyleEditor', 'tmpCode')
     }
 )((TemplateSelector));
@@ -137,15 +130,11 @@ function VisualStyleEditor({
     initialCode,
     enabled,
     onClose,
-    onZoomTo,
-    onCreate,
-    onDelete,
-    style: styleProp
+    style: styleProp,
+    isStyleChanged
 }) {
 
-    const [creating, setCreating] = useState(false);
-    const [deleting, setDeleting] = useState(false);
-    const [title, setTitle] = useState('');
+    const [closing, setClosing] = useState(false);
 
     // localstorage for style notification
     const [dismissStyleNotification, setDismissStyleNotification] = useLocalStorage('style-notifcation', false);
@@ -174,15 +163,13 @@ function VisualStyleEditor({
         };
     }, []);
 
-    function handleClose() {
-        onReset();
-        onClose();
-    }
-
-    function handleZoomTo() {
-        const { minx, miny, maxx, maxy } = layer.bbox.bounds;
-        const extent = [minx, miny, maxx, maxy];
-        onZoomTo(extent, layer.bbox.crs);
+    function handleClose(close) {
+        if (close) {
+            onReset();
+            onClose();
+        } else {
+            setClosing(true);
+        }
     }
 
     if (!enabled || !layer.id) {
@@ -202,17 +189,10 @@ function VisualStyleEditor({
             {showLayerProperties &&
             <div className="gn-visual-style-editor-layer-info">
                 <div className="gn-visual-style-editor-layer-title">{layer.title}</div>
-                {layer.bbox && <Button onClick={handleZoomTo} tooltipId="gnviewer.zoomToLayer">
-                    <Glyphicon glyph="zoom-to"/>
-                </Button>}
-                <Button onClick={handleClose} className="square-button">
+                <Button onClick={handleClose.bind(null, !isStyleChanged)} className="square-button">
                     <Glyphicon glyph="1-close"/>
                 </Button>
             </div>}
-            <div className="gn-visual-style-editor-toolbar">
-                {showLayerProperties && <ConnectedSaveStyleButton variant="primary" size="xs" msgId="gnviewer.applyStyle"/>}
-                <ConnectedTemplateSelector />
-            </div>
             {(!notificationClose && !dismissStyleNotification) && <div className="gn-visual-style-editor-alert alert-info">
                 <div className="gn-visual-style-editor-alert-message">
                     <Message msgId="gnviewer.stylesFirstClone" />
@@ -226,76 +206,49 @@ function VisualStyleEditor({
             </div>}
             <div className="gn-visual-style-editor-body">
                 <div>
-                    <StyleCodeEditor key={initialCode} config={editorConfig}/>
+                    <StyleCodeEditor
+                        key={initialCode}
+                        config={editorConfig}
+                        header={
+                            <>
+                                <ConnectedTemplateSelector />
+                                <ConnectedSaveStyleButton variant="primary" size="xs"/>
+                            </>
+                        }
+                    />
                 </div>
             </div>
             <Portal>
                 <ResizableModal
-                    title={<Message msgId="gnviewer.createStyleTitle"/>}
+                    title={<Message msgId="gnviewer.styleEditorCloseTitle"/>}
                     fitContent
                     clickOutEnabled={false}
-                    show={creating}
+                    show={closing}
                     onClose={() => {
-                        setCreating(false);
-                        setTitle('');
+                        setClosing(false);
                     }}
                     buttons={[
                         {
-                            text: <Message msgId="gnviewer.createStyleClose"/>,
+                            text: <Message msgId="gnviewer.styleEditorCloseCancel"/>,
                             onClick: () => {
-                                setCreating(false);
-                                setTitle('');
+                                setClosing(false);
                             }
                         },
                         {
-                            text: <Message msgId="gnviewer.createStyleCreate"/>,
+                            text: <Message msgId="gnviewer.styleEditorCloseConfirm"/>,
                             bsStyle: 'primary',
                             onClick: () => {
-                                setCreating(false);
-                                onCreate(title);
-                                setTitle('');
+                                setClosing(false);
+                                handleClose(true);
                             }
                         }
                     ]}
                 >
                     <div style={{ padding: '1rem' }}>
-                        <ControlLabel><Message msgId="gnviewer.createStyleTitleInput"/> </ControlLabel>
-                        <FormControl
-                            value={title}
-                            onChange={event => setTitle(event?.target?.value)}
-                        />
+                        <Message msgId="gnviewer.styleEditorCloseMessage"/>
                     </div>
                 </ResizableModal>
             </Portal>
-            <Portal>
-                <ResizableModal
-                    title={<Message msgId="gnviewer.deleteStyleTitle"/>}
-                    show={deleting}
-                    fitContent
-                    clickOutEnabled={false}
-                    onClose={() => {
-                        setDeleting(false);
-                    }}
-                    buttons={[
-                        {
-                            text: <Message msgId="gnviewer.deleteStyleCancel"/>,
-                            onClick: () => {
-                                setDeleting(false);
-                            }
-                        },
-                        {
-                            text: <Message msgId="gnviewer.deleteStyleConfirm"/>,
-                            bsStyle: 'danger',
-                            onClick: () => {
-                                onDelete(layer.style);
-                                setDeleting(false);
-                            }
-                        }
-                    ]}
-                >
-                    <div style={{ padding: '1rem' }}><Message msgId="gnviewer.deleteStyleMessage"/></div>
-                </ResizableModal>
-            </Portal>
         </div>
     );
 }
@@ -308,15 +261,17 @@ const VisualStyleEditorPlugin = connect(
         initialCodeStyleSelector,
         state => state?.controls?.visualStyleEditor?.enabled,
         state => mapLayoutValuesSelector(state, { height: true }),
-        getSelectedLayer
-    ], (layer, temporaryStyleId, styleService, initialCode, enabled, style, originalLayer) => ({
+        getSelectedLayer,
+        codeStyleSelector
+    ], (layer, temporaryStyleId, styleService, initialCode, enabled, style, originalLayer, code) => ({
         layer,
         temporaryStyleId,
         styleService,
         initialCode,
         enabled,
         style,
-        originalStyle: originalLayer?.style
+        originalStyle: originalLayer?.style,
+        isStyleChanged: initialCode !== undefined && code !== undefined && initialCode !== code
     })),
     {
         onUpdateStatus: updateStatus,
@@ -325,9 +280,6 @@ const VisualStyleEditorPlugin = connect(
         onReset: toggleStyleEditor.bind(null, undefined, false),
         onSave: updateStyleCode,
         onClose: setControlProperty.bind(null, 'visualStyleEditor', 'enabled', false),
-        onZoomTo: zoomToExtent,
-        onCreate: createGeoNodeStyle,
-        onDelete: deleteGeoNodeStyle,
         onUpdateNode: updateNode
     },
     (stateProps, dispatchProps, ownProps) => {
@@ -400,10 +352,6 @@ const ConnectedStyleEditorTocButton = connect(createSelector([
 export default createPlugin('VisualStyleEditor', {
     component: VisualStyleEditorPlugin,
     containers: {
-        ActionNavbar: {
-            name: 'SaveStyle',
-            Component: ConnectedSaveStyleButton
-        },
         TOC: {
             target: 'toolbar',
             Component: ConnectedStyleEditorTocButton
diff --git a/geonode_mapstore_client/client/js/plugins/visualstyleeditor/TemplateSelector.jsx b/geonode_mapstore_client/client/js/plugins/visualstyleeditor/TemplateSelector.jsx
index e0bbfc6451..9694a82b77 100644
--- a/geonode_mapstore_client/client/js/plugins/visualstyleeditor/TemplateSelector.jsx
+++ b/geonode_mapstore_client/client/js/plugins/visualstyleeditor/TemplateSelector.jsx
@@ -23,7 +23,6 @@ function TemplateSelector({
     onSelect,
     selectedStyle,
     onUpdateMetadata,
-    onUpdate,
     tmpCode,
     onStoreTmpCode
 }) {
@@ -31,6 +30,7 @@ function TemplateSelector({
     const isMounted = useRef();
     const [templates, setTemplates] = useState([]);
     const [selectedTemplate, setSelectedTemplate] = useState();
+    const [open, setOpen] = useState(false);
 
     useEffect(() => {
         isMounted.current = true;
@@ -47,8 +47,11 @@ function TemplateSelector({
 
     function handleApply() {
         onStoreTmpCode(code);
-        onUpdateMetadata({ styleJSON: null });
-        onUpdate();
+        onUpdateMetadata({
+            styleJSON: null,
+            editorType: 'visual'
+        });
+        setOpen(false);
     }
 
     const storeTmpCode = useRef();
@@ -64,6 +67,7 @@ function TemplateSelector({
     };
 
     function handleOpen(isOpen) {
+        setOpen(isOpen);
         storeTmpCode.current(isOpen);
     }
 
@@ -84,14 +88,16 @@ function TemplateSelector({
         setSelectedTemplate(idx);
         const styleTitle = selectedStyle?.metadata?.title || selectedStyle?.label || selectedStyle?.title || selectedStyle?.name || '';
         getStyleParser(format)
-            .writeStyle({
-                ...templateCode,
-                name: styleTitle
-            })
-            .then((updateCode) => {
-                if (isMounted.current) {
-                    handleSelect(updateCode);
-                }
+            .then(parser => {
+                parser.writeStyle({
+                    ...templateCode,
+                    name: styleTitle
+                })
+                    .then((updateCode) => {
+                        if (isMounted.current) {
+                            handleSelect(updateCode);
+                        }
+                    });
             });
     }
 
@@ -101,7 +107,9 @@ function TemplateSelector({
 
     return (
         <Popover
+            key={open}
             placement="right"
+            open={open}
             onOpen={handleOpen}
             content={
                 <div className="gn-visual-style-editor-templates" >
@@ -124,7 +132,7 @@ function TemplateSelector({
                         })}
                     </ul>
                     <div className="gn-visual-style-editor-templates-footer">
-                        <Button size="xs" disabled={selectedTemplate === undefined} variant="primary" onClick={handleApply}><Message msgId="gnviewer.applyStyle"/></Button>
+                        <Button size="xs" disabled={selectedTemplate === undefined} variant="primary" onClick={handleApply}><Message msgId="gnviewer.copy"/></Button>
                     </div>
                 </div>
             }
diff --git a/geonode_mapstore_client/client/js/selectors/__tests__/resource-test.js b/geonode_mapstore_client/client/js/selectors/__tests__/resource-test.js
index d06c816180..596df34d1a 100644
--- a/geonode_mapstore_client/client/js/selectors/__tests__/resource-test.js
+++ b/geonode_mapstore_client/client/js/selectors/__tests__/resource-test.js
@@ -47,7 +47,6 @@ describe('resource selector', () => {
     it('is new resource', () => {
         expect(isNewResource(testState)).toBeTruthy();
     });
-  
     it('getGeonodeResourceDataFromGeostory', () => {
         expect(getGeonodeResourceDataFromGeostory(testState)).toEqual([{ data: { sourceId: 'geonode' }, name: 'test' }]);
     });
diff --git a/geonode_mapstore_client/client/js/utils/ResourceUtils.js b/geonode_mapstore_client/client/js/utils/ResourceUtils.js
index d4d972b401..588f4ab91a 100644
--- a/geonode_mapstore_client/client/js/utils/ResourceUtils.js
+++ b/geonode_mapstore_client/client/js/utils/ResourceUtils.js
@@ -508,25 +508,6 @@ export function toMapStoreMapConfig(resource, baseConfig) {
     };
 }
 
-/**
- * Parse metadata information from getStyleCodeByName api response
- * @param {Array} entry Array containing layer metadata information
- * @returns {Object} metadata object
- */
-export const parseMetadata = ({ entry } = {}) => {
-    const metadata = {};
-    if (!entry) {
-        return metadata;
-    }
-    entry.forEach((entryObj) => {
-        const entryArray = Object.values(entryObj);
-        if (entryArray.length > 1) {
-            metadata[entryArray[0]] = entryArray[1];
-        }
-    });
-    return metadata;
-};
-
 /**
  * Parse document response object (for image and video)
  * @param {Object} docResponse api response object
diff --git a/geonode_mapstore_client/client/js/utils/__tests__/ResourceUtils-test.js b/geonode_mapstore_client/client/js/utils/__tests__/ResourceUtils-test.js
index bb922acfd6..bbe77dd31f 100644
--- a/geonode_mapstore_client/client/js/utils/__tests__/ResourceUtils-test.js
+++ b/geonode_mapstore_client/client/js/utils/__tests__/ResourceUtils-test.js
@@ -17,8 +17,7 @@ import {
     toGeoNodeMapConfig,
     compareBackgroundLayers,
     toMapStoreMapConfig,
-    parseStyleName,
-    parseMetadata
+    parseStyleName
 } from '../ResourceUtils';
 
 describe('Test Resource Utils', () => {
@@ -410,25 +409,4 @@ describe('Test Resource Utils', () => {
 
         expect(pasrsedStyleName).toBe('test:testName');
     });
-
-    it('should extract metadata information from metadata object', () => {
-        const metadata = {
-            entry: [{
-                a: 'key1',
-                b: 'test'
-            },
-            {
-                a: 'key2',
-                b: 'test2'
-            }]
-        };
-
-        const metadataObj = parseMetadata(metadata);
-
-        expect(metadataObj).toEqual({key1: 'test', key2: 'test2'});
-    });
-    it('should return empty object if entry is not defined', () => {
-        const metadataObj = parseMetadata();
-        expect(metadataObj).toEqual({});
-    });
 });
diff --git a/geonode_mapstore_client/client/package.json b/geonode_mapstore_client/client/package.json
index 9aecaedbda..81bec4b8d3 100644
--- a/geonode_mapstore_client/client/package.json
+++ b/geonode_mapstore_client/client/package.json
@@ -34,6 +34,7 @@
     "dompurify": "2.2.6",
     "font-awesome": "4.7.0",
     "mapstore": "file:MapStore2",
+    "md5": "^2.3.0",
     "react-helmet": "6.1.0"
   },
   "mapstore": {
diff --git a/geonode_mapstore_client/client/static/mapstore/configs/localConfig.json b/geonode_mapstore_client/client/static/mapstore/configs/localConfig.json
index f9ddbda9cd..2bb33f92d3 100644
--- a/geonode_mapstore_client/client/static/mapstore/configs/localConfig.json
+++ b/geonode_mapstore_client/client/static/mapstore/configs/localConfig.json
@@ -1335,10 +1335,6 @@
                             "type": "link",
                             "href": "{'#/dataset/' + (state('gnResourceData') || {}).pk}",
                             "labelId": "gnviewer.goBackTo"
-                        },
-                        {
-                            "type": "plugin",
-                            "name": "SaveStyle"
                         }
                     ],
                     "rightMenuItems": [
diff --git a/geonode_mapstore_client/client/static/mapstore/translations/data.de-DE.json b/geonode_mapstore_client/client/static/mapstore/translations/data.de-DE.json
index b1bc0aab12..f5643e6be0 100644
--- a/geonode_mapstore_client/client/static/mapstore/translations/data.de-DE.json
+++ b/geonode_mapstore_client/client/static/mapstore/translations/data.de-DE.json
@@ -202,6 +202,7 @@
             "dismissMessage": "Diese Nachricht nicht mehr anzeigen",
             "templates": "Vorlagen",
             "copyFrom": "Kopie von",
+            "copy": "Kopie",
             "createMap": "Karte Erstellen",
             "addLayer": "Ebene hinzufügen",
             "datasetsCatalogTitle": "Ebenenkatalog",
@@ -242,7 +243,11 @@
             "resourceOrigin": {
                 "a": "eine",
                 "from": "von"
-            }
+            },
+            "styleEditorCloseTitle": "Ausstehende Änderungen",
+            "styleEditorCloseMessage": "Möchten Sie den Stileditor wirklich schließen, ohne die Änderungen zu übernehmen?",
+            "styleEditorCloseCancel": "Nein, zurück zum Stileditor",
+            "styleEditorCloseConfirm": "Ja, schließen"
         }
     }
 }
diff --git a/geonode_mapstore_client/client/static/mapstore/translations/data.en-US.json b/geonode_mapstore_client/client/static/mapstore/translations/data.en-US.json
index 35b4c0335c..4dacedeb60 100644
--- a/geonode_mapstore_client/client/static/mapstore/translations/data.en-US.json
+++ b/geonode_mapstore_client/client/static/mapstore/translations/data.en-US.json
@@ -203,6 +203,7 @@
             "dismissMessage": "Don't show this message again",
             "templates": "Templates",
             "copyFrom": "Copy from",
+            "copy": "Copy",
             "createMap": "Create Map",
             "addLayer": "Add layer",
             "datasetsCatalogTitle": "Layers catalog",
@@ -243,7 +244,11 @@
             "resourceOrigin": {
                 "a": "a",
                 "from": "from"
-            }
+            },
+            "styleEditorCloseTitle": "Pending changes",
+            "styleEditorCloseMessage": "Are you sure you want to close the style editor without apply the changes?",
+            "styleEditorCloseCancel": "No, back to the style editor",
+            "styleEditorCloseConfirm": "Yes, close"
         }
     }
 }
diff --git a/geonode_mapstore_client/client/static/mapstore/translations/data.es-ES.json b/geonode_mapstore_client/client/static/mapstore/translations/data.es-ES.json
index 1cb0eee975..5f5baebf5b 100644
--- a/geonode_mapstore_client/client/static/mapstore/translations/data.es-ES.json
+++ b/geonode_mapstore_client/client/static/mapstore/translations/data.es-ES.json
@@ -202,6 +202,7 @@
             "dismissMessage": "No volver a mostrar este mensaje",
             "templates": "Plantillas",
             "copyFrom": "Copiado de",
+            "copy": "Copiado",
             "createMap": "Crear Mapa",
             "addLayer": "Agregar capa",
             "datasetsCatalogTitle": "Catálogo de capas",
@@ -241,7 +242,11 @@
             "resourceOrigin": {
                 "a": "una",
                 "from": "de"
-            }
+            },
+            "styleEditorCloseTitle": "Cambios pendientes",
+            "styleEditorCloseMessage": "¿Está seguro de que desea cerrar el editor de estilos sin aplicar los cambios?",
+            "styleEditorCloseCancel": "No, volver al editor de estilo",
+            "styleEditorCloseConfirm": "Sí, cerrar"
         }
     }
 }
diff --git a/geonode_mapstore_client/client/static/mapstore/translations/data.fr-FR.json b/geonode_mapstore_client/client/static/mapstore/translations/data.fr-FR.json
index 1a9b01489e..9464109c1b 100644
--- a/geonode_mapstore_client/client/static/mapstore/translations/data.fr-FR.json
+++ b/geonode_mapstore_client/client/static/mapstore/translations/data.fr-FR.json
@@ -202,6 +202,7 @@
             "dismissMessage": "Ne plus afficher ce message",
             "templates": "Modèles",
             "copyFrom": "Copier de",
+            "copy": "Copier",
             "createMap": "Créer une Carte",
             "addLayer": "Ajouter un calque",
             "datasetsCatalogTitle": "Catalogue de couches",
@@ -242,7 +243,11 @@
             "resourceOrigin": {
                 "a": "une",
                 "from": "de"
-            }
+            },
+            "styleEditorCloseTitle": "Modifications en attente",
+            "styleEditorCloseMessage": "Voulez-vous vraiment fermer l'éditeur de style sans appliquer les modifications ?",
+            "styleEditorCloseCancel": "Non, retour à l'éditeur de style",
+            "styleEditorCloseConfirm": "Oui, fermer"
         }
     }
 }
diff --git a/geonode_mapstore_client/client/static/mapstore/translations/data.it-IT.json b/geonode_mapstore_client/client/static/mapstore/translations/data.it-IT.json
index ccb204bf13..8f762b6160 100644
--- a/geonode_mapstore_client/client/static/mapstore/translations/data.it-IT.json
+++ b/geonode_mapstore_client/client/static/mapstore/translations/data.it-IT.json
@@ -204,6 +204,7 @@
             "dismissMessage": "Non mostrare più questo messaggio",
             "templates": "Modelli",
             "copyFrom": "Copia da",
+            "copy": "Copia",
             "createMap": "Crea Mappa",
             "addLayer": "Aggiungi layer",
             "datasetsCatalogTitle": "Catalogo layers",
@@ -244,7 +245,11 @@
             "resourceOrigin": {
                 "a": "una",
                 "from": "di"
-            }
+            },
+            "styleEditorCloseTitle": "Modifiche non applicate",
+            "styleEditorCloseMessage": "Sei sicuro di voler chiudere l'editor di stile senza applicare le modifiche?",
+            "styleEditorCloseCancel": "No, torna all'editor di stile",
+            "styleEditorCloseConfirm": "Sì, chiudi"
         }
     }
 }
diff --git a/geonode_mapstore_client/client/themes/geonode/less/_visual-style-editor.less b/geonode_mapstore_client/client/themes/geonode/less/_visual-style-editor.less
index 24777c745d..cebfd206da 100644
--- a/geonode_mapstore_client/client/themes/geonode/less/_visual-style-editor.less
+++ b/geonode_mapstore_client/client/themes/geonode/less/_visual-style-editor.less
@@ -9,7 +9,7 @@
     .ms-style-rules-editor-head {
         .background-color-var(@theme-vars[main-bg]);
     }
-    .gn-visual-style-editor-toolbar,
+    .gn-visual-style-editor-layer-info,
     .gn-visual-style-editor-styles {
         .border-bottom-color-var(@theme-vars[main-border-color]);
     }
@@ -41,15 +41,16 @@
 
 .gn-visual-style-editor-layer-info {
     display: flex;
-    padding: 4px;
+    padding: 0;
     align-items: center;
+    border-bottom-width: 1px;
+    border-bottom-style: solid;
     .gn-visual-style-editor-layer-title {
         flex: 1;
-        padding-left: 8px;
+        padding-left: 12px;
     }
 }
 
-.gn-visual-style-editor-toolbar,
 .gn-visual-style-editor-styles,
 .gn-visual-style-editor-alert {
     display: flex;
@@ -62,7 +63,7 @@
     }
 }
 
-.gn-visual-style-editor-toolbar, .gn-visual-style-editor-alert {
+.gn-visual-style-editor-alert {
     align-items: center;
 }
 
@@ -151,3 +152,7 @@
     top: 0;
     z-index: 10;
 }
+
+.ms-style-editor-toolbar-left > * + * {
+    margin-left: 4px;
+}
\ No newline at end of file