diff --git a/geonode_mapstore_client/apps.py b/geonode_mapstore_client/apps.py
index 9ea0005011..d6e927486c 100644
--- a/geonode_mapstore_client/apps.py
+++ b/geonode_mapstore_client/apps.py
@@ -13,7 +13,7 @@
 from django.views.generic import TemplateView
 from django.utils.translation import gettext_lazy as _
 from django.apps import apps, AppConfig as BaseAppConfig
-
+from . import views
 
 def run_setup_hooks(*args, **kwargs):
     from geonode.urls import urlpatterns
@@ -83,6 +83,8 @@ def run_setup_hooks(*args, **kwargs):
                 template_name="geonode-mapstore-client/catalogue.html"
             ),
         ),
+        re_path(r"^metadata/(?P<pk>[^/]*)$", views.metadata, name='metadata'),
+        re_path(r"^metadata/(?P<pk>[^/]*)/embed$", views.metadata_embed, name='metadata'),
         # required, otherwise will raise no-lookup errors to be analysed
         re_path(r"^api/v2/", include(router.urls)),
     ]
diff --git a/geonode_mapstore_client/client/js/api/geonode/v2/constants.js b/geonode_mapstore_client/client/js/api/geonode/v2/constants.js
index 98f81286aa..f1f2129e20 100644
--- a/geonode_mapstore_client/client/js/api/geonode/v2/constants.js
+++ b/geonode_mapstore_client/client/js/api/geonode/v2/constants.js
@@ -28,7 +28,8 @@ let endpoints = {
     'groups': '/api/v2/groups',
     'executionrequest': '/api/v2/executionrequest',
     'facets': '/api/v2/facets',
-    'uploads': '/api/v2/uploads'
+    'uploads': '/api/v2/uploads',
+    'metadata': '/api/v2/metadata'
 };
 
 export const RESOURCES = 'resources';
@@ -42,6 +43,7 @@ export const GROUPS = 'groups';
 export const EXECUTION_REQUEST = 'executionrequest';
 export const FACETS = 'facets';
 export const UPLOADS = 'uploads';
+export const METADATA = 'metadata';
 
 export const setEndpoints = (data) => {
     endpoints = { ...endpoints, ...data };
diff --git a/geonode_mapstore_client/client/js/api/geonode/v2/metadata.js b/geonode_mapstore_client/client/js/api/geonode/v2/metadata.js
new file mode 100644
index 0000000000..1dd7afe7e5
--- /dev/null
+++ b/geonode_mapstore_client/client/js/api/geonode/v2/metadata.js
@@ -0,0 +1,92 @@
+/*
+ * Copyright 2024, 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 axios from '@mapstore/framework/libs/ajax';
+import {
+    METADATA,
+    RESOURCES,
+    getEndpointUrl
+} from './constants';
+import { isObject, isArray, castArray } from 'lodash';
+
+const parseUiSchema = (properties) => {
+    return Object.keys(properties).reduce((acc, key) => {
+        const entry = properties[key];
+        const uiKeys = Object.keys(entry).filter(propertyKey => propertyKey.indexOf('ui:') === 0);
+        if (uiKeys.length) {
+            acc[key] = Object.fromEntries(uiKeys.map(uiKey => [uiKey, entry[uiKey]]));
+        }
+        if (entry.type === 'object') {
+            const nestedProperties = parseUiSchema(entry?.properties);
+            acc[key] = { ...acc[key], ...nestedProperties };
+        }
+        return acc;
+    }, {});
+};
+
+let metadataSchemas;
+export const getMetadataSchema = () => {
+    if (metadataSchemas) {
+        return Promise.resolve(metadataSchemas);
+    }
+    return axios.get(getEndpointUrl(METADATA, '/schema/'))
+        .then(({ data }) => {
+            const schema = data;
+            metadataSchemas = {
+                schema: schema,
+                uiSchema: parseUiSchema(schema?.properties || {})
+            };
+            return metadataSchemas;
+        });
+};
+
+const removeNullValueRecursive = (metadata = {}, schema = {}) => {
+    return Object.keys(metadata).reduce((acc, key) => {
+        const schemaTypes = castArray(schema?.[key]?.type || []);
+        if (metadata[key] === null && !schemaTypes.includes('null')) {
+            return {
+                ...acc,
+                [key]: undefined
+            };
+        }
+        return {
+            ...acc,
+            [key]: !isArray(metadata[key]) && isObject(metadata[key])
+                ? removeNullValueRecursive(metadata[key], schema[key])
+                : metadata[key]
+        };
+    }, {});
+};
+
+export const getMetadataByPk = (pk) => {
+    return getMetadataSchema()
+        .then(({ schema, uiSchema }) => {
+            const resourceProperties = ['pk', 'title', 'detail_url', 'perms'];
+            return Promise.all([
+                axios.get(getEndpointUrl(METADATA, `/instance/${pk}/`)),
+                axios.get(getEndpointUrl(RESOURCES, `/${pk}/?exclude[]=*&${resourceProperties.map(value => `include[]=${value}`).join('&')}`))
+            ])
+                .then((response) => {
+                    const metadataResponse = response?.[0]?.data || {};
+                    const resource = response?.[1]?.data?.resource || {};
+                    const { extraErrors, ...metadata } = metadataResponse;
+                    return {
+                        schema,
+                        uiSchema,
+                        metadata: removeNullValueRecursive(metadata, schema?.properties),
+                        resource,
+                        extraErrors
+                    };
+                });
+        });
+};
+
+export const updateMetadata = (pk, body) => {
+    return axios.put(getEndpointUrl(METADATA, `/instance/${pk}/`), body)
+        .then(({ data }) => data);
+};
diff --git a/geonode_mapstore_client/client/js/components/InputControlWithDebounce/InputControlWithDebounce.jsx b/geonode_mapstore_client/client/js/components/InputControlWithDebounce/InputControlWithDebounce.jsx
new file mode 100644
index 0000000000..330ac3f80a
--- /dev/null
+++ b/geonode_mapstore_client/client/js/components/InputControlWithDebounce/InputControlWithDebounce.jsx
@@ -0,0 +1,19 @@
+/*
+ * Copyright 2024, 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 { FormControl as FormControlRB } from 'react-bootstrap';
+import withDebounceOnCallback from '@mapstore/framework/components/misc/enhancers/withDebounceOnCallback';
+import localizedProps from '@mapstore/framework/components/misc/enhancers/localizedProps';
+const FormControl = localizedProps('placeholder')(FormControlRB);
+function InputControl({ onChange, value, debounceTime, ...props }) {
+    return <FormControl {...props} value={value} onChange={event => onChange(event.target.value)}/>;
+}
+const InputControlWithDebounce = withDebounceOnCallback('onChange', 'value')(InputControl);
+
+export default InputControlWithDebounce;
diff --git a/geonode_mapstore_client/client/js/components/InputControlWithDebounce/index.js b/geonode_mapstore_client/client/js/components/InputControlWithDebounce/index.js
new file mode 100644
index 0000000000..3be5df86a6
--- /dev/null
+++ b/geonode_mapstore_client/client/js/components/InputControlWithDebounce/index.js
@@ -0,0 +1 @@
+export { default } from './InputControlWithDebounce';
diff --git a/geonode_mapstore_client/client/js/components/SelectInfiniteScroll/SelectInfiniteScroll.jsx b/geonode_mapstore_client/client/js/components/SelectInfiniteScroll/SelectInfiniteScroll.jsx
index e05fa7a958..dc33e6f4a0 100644
--- a/geonode_mapstore_client/client/js/components/SelectInfiniteScroll/SelectInfiniteScroll.jsx
+++ b/geonode_mapstore_client/client/js/components/SelectInfiniteScroll/SelectInfiniteScroll.jsx
@@ -9,6 +9,7 @@
 import React, { useRef, useState, useEffect } from 'react';
 import axios from '@mapstore/framework/libs/ajax';
 import debounce from 'lodash/debounce';
+import isEmpty from 'lodash/isEmpty';
 import ReactSelect from 'react-select';
 import localizedProps from '@mapstore/framework/components/misc/enhancers/localizedProps';
 
@@ -18,6 +19,9 @@ function SelectInfiniteScroll({
     loadOptions,
     pageSize = 20,
     debounceTime = 500,
+    labelKey = "label",
+    valueKey = "value",
+    newOptionPromptText = "Create option",
     ...props
 }) {
 
@@ -40,6 +44,27 @@ function SelectInfiniteScroll({
         source.current = cancelToken.source();
     };
 
+    const updateNewOption = (newOptions, query) => {
+        if (props.creatable && !isEmpty(query)) {
+            const compareValue = (option) =>
+                option?.[labelKey]?.toLowerCase() === query.toLowerCase();
+
+            const isValueExist = props.value?.some(compareValue);
+            const isOptionExist = newOptions.some(compareValue);
+
+            // Add new option if it doesn't exist and `creatable` is enabled
+            if (!isValueExist && !isOptionExist) {
+                return [{
+                    [labelKey]: `${newOptionPromptText} "${query}"`,
+                    [valueKey]: query,
+                    result: { [valueKey]: query, [labelKey]: query }
+                }].concat(newOptions);
+            }
+            return newOptions;
+        }
+        return newOptions;
+    };
+
     const handleUpdateOptions = useRef();
     handleUpdateOptions.current = (args = {}) => {
         createToken();
@@ -56,8 +81,10 @@ function SelectInfiniteScroll({
             }
         })
             .then((response) => {
-                const newOptions = response.results.map(({ selectOption }) => selectOption);
-                setOptions(newPage === 1 ? newOptions : [...options, ...newOptions]);
+                let newOptions = response.results.map(({ selectOption }) => selectOption);
+                newOptions = newPage === 1 ? newOptions : [...options, ...newOptions];
+                newOptions = updateNewOption(newOptions, query);
+                setOptions(newOptions);
                 setIsNextPageAvailable(response.isNextPageAvailable);
                 setLoading(false);
                 source.current = undefined;
@@ -89,7 +116,7 @@ function SelectInfiniteScroll({
                 handleUpdateOptions.current({ q: value, page: 1 });
             }
         }, debounceTime);
-    }, []);
+    }, [text]);
 
     useEffect(() => {
         if (open) {
@@ -106,16 +133,23 @@ function SelectInfiniteScroll({
         }
     }, [page]);
 
+    const filterOptions = (currentOptions) => {
+        return currentOptions.map(option=> {
+            const match = /\"(.*?)\"/.exec(text);
+            return match ? match[1] : option;
+        });
+    };
+
     return (
         <SelectSync
             {...props}
             isLoading={loading}
             options={options}
+            labelKey={labelKey}
+            valueKey={valueKey}
             onOpen={() => setOpen(true)}
             onClose={() => setOpen(false)}
-            filterOptions={(currentOptions) => {
-                return currentOptions;
-            }}
+            filterOptions={filterOptions}
             onInputChange={(q) => handleInputChange(q)}
             onMenuScrollToBottom={() => {
                 if (!loading && isNextPageAvailable) {
diff --git a/geonode_mapstore_client/client/js/plugins/MetadataEditor/MetadataViewer.jsx b/geonode_mapstore_client/client/js/plugins/MetadataEditor/MetadataViewer.jsx
new file mode 100644
index 0000000000..c3085034a5
--- /dev/null
+++ b/geonode_mapstore_client/client/js/plugins/MetadataEditor/MetadataViewer.jsx
@@ -0,0 +1,98 @@
+/*
+ * Copyright 2024, 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 { createPlugin } from '@mapstore/framework/utils/PluginsUtils';
+import { connect } from 'react-redux';
+import { createSelector } from 'reselect';
+import { withRouter } from 'react-router';
+import isEqual from 'lodash/isEqual';
+import Message from '@mapstore/framework/components/I18N/Message';
+import ResizableModal from '@mapstore/framework/components/misc/ResizableModal';
+import Portal from '@mapstore/framework/components/misc/Portal';
+import Button from '@js/components/Button';
+
+import {
+    setMetadataPreview
+} from './actions/metadata';
+
+import metadataReducer from './reducers/metadata';
+
+const connectMetadataViewer = connect(
+    createSelector([
+        state => state?.metadata?.metadata,
+        state => state?.metadata?.initialMetadata,
+        state => state?.metadata?.preview
+    ], (metadata, initialMetadata, preview) => ({
+        preview,
+        pendingChanges: !isEqual(initialMetadata, metadata)
+    })),
+    {
+        setPreview: setMetadataPreview
+    }
+);
+
+const MetadataViewer = ({
+    match,
+    preview,
+    setPreview,
+    labelId = 'gnviewer.viewMetadata'
+}) => {
+    const { params } = match || {};
+    const pk = params?.pk;
+    return (
+        <Portal>
+            <ResizableModal
+                title={<Message msgId={labelId} />}
+                show={preview}
+                size="lg"
+                clickOutEnabled={false}
+                modalClassName="gn-simple-dialog"
+                onClose={() => setPreview(false)}
+            >
+                <iframe style={{ border: 'none', position: 'absolute', width: '100%', height: '100%' }} src={`/metadata/${pk}/embed`} />
+            </ResizableModal>
+        </Portal>
+    );
+};
+
+const MetadataViewerPlugin = connectMetadataViewer(withRouter(MetadataViewer));
+
+const PreviewButton = ({
+    size,
+    variant,
+    pendingChanges,
+    setPreview = () => {},
+    labelId = 'gnviewer.viewMetadata'
+}) => {
+    return (
+        <Button
+            size={size}
+            variant={variant}
+            disabled={pendingChanges}
+            onClick={() => setPreview(true)}
+        >
+            <Message msgId={labelId} />
+        </Button>
+    );
+};
+
+const PreviewButtonPlugin = connectMetadataViewer(PreviewButton);
+
+export default createPlugin('MetadataViewer', {
+    component: MetadataViewerPlugin,
+    containers: {
+        ActionNavbar: {
+            name: 'MetadataViewer',
+            Component: PreviewButtonPlugin
+        }
+    },
+    epics: {},
+    reducers: {
+        metadata: metadataReducer
+    }
+});
diff --git a/geonode_mapstore_client/client/js/plugins/MetadataEditor/actions/metadata.js b/geonode_mapstore_client/client/js/plugins/MetadataEditor/actions/metadata.js
new file mode 100644
index 0000000000..fa4c6fa5ac
--- /dev/null
+++ b/geonode_mapstore_client/client/js/plugins/MetadataEditor/actions/metadata.js
@@ -0,0 +1,74 @@
+/*
+ * Copyright 2024, 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.
+ */
+
+export const SET_METADATA = 'GEONODE:SET_METADATA';
+export const SET_INITIAL_METADATA = 'GEONODE:SET_INITIAL_METADATA';
+export const SET_METADATA_SCHEMA = 'GEONODE:SET_METADATA_SCHEMA';
+export const SET_METADATA_UI_SCHEMA = 'GEONODE:SET_METADATA_UI_SCHEMA';
+export const SET_METADATA_LOADING = 'GEONODE:SET_METADATA_LOADING';
+export const SET_METADATA_ERROR = 'GEONODE:SET_METADATA_ERROR';
+export const SET_METADATA_UPDATING = 'GEONODE:SET_METADATA_UPDATING';
+export const SET_METADATA_UPDATE_ERROR = 'GEONODE:SET_METADATA_UPDATE_ERROR';
+export const SET_METADATA_PREVIEW = 'GEONODE:SET_METADATA_PREVIEW';
+export const SET_METADATA_RESOURCE = 'GEONODE:SET_METADATA_RESOURCE';
+export const SET_METADATA_EXTRA_ERRORS = 'GEONODE:SET_METADATA_EXTRA_ERRORS';
+
+export const setMetadata = (metadata) => ({
+    type: SET_METADATA,
+    metadata
+});
+
+export const setInitialMetadata = (initialMetadata) => ({
+    type: SET_INITIAL_METADATA,
+    initialMetadata
+});
+
+export const setMetadataSchema = (schema) => ({
+    type: SET_METADATA_SCHEMA,
+    schema
+});
+
+export const setMetadataUISchema = (uiSchema) => ({
+    type: SET_METADATA_UI_SCHEMA,
+    uiSchema
+});
+
+export const setMetadataLoading = (loading) => ({
+    type: SET_METADATA_LOADING,
+    loading
+});
+
+export const setMetadataError = (error) => ({
+    type: SET_METADATA_ERROR,
+    error
+});
+
+export const setMetadataUpdating = (updating) => ({
+    type: SET_METADATA_UPDATING,
+    updating
+});
+
+export const setMetadataUpdateError = (updateError) => ({
+    type: SET_METADATA_UPDATE_ERROR,
+    updateError
+});
+
+export const setMetadataPreview = (preview) => ({
+    type: SET_METADATA_PREVIEW,
+    preview
+});
+
+export const setMetadataResource = (resource) => ({
+    type: SET_METADATA_RESOURCE,
+    resource
+});
+
+export const setExtraErrors = (extraErrors) => ({
+    type: SET_METADATA_EXTRA_ERRORS,
+    extraErrors
+});
diff --git a/geonode_mapstore_client/client/js/plugins/MetadataEditor/components/Autocomplete.jsx b/geonode_mapstore_client/client/js/plugins/MetadataEditor/components/Autocomplete.jsx
new file mode 100644
index 0000000000..9f0f1db844
--- /dev/null
+++ b/geonode_mapstore_client/client/js/plugins/MetadataEditor/components/Autocomplete.jsx
@@ -0,0 +1,81 @@
+/*
+ * Copyright 2024, 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 isArray from 'lodash/isArray';
+import isEmpty from 'lodash/isEmpty';
+import isString from 'lodash/isString';
+import PropTypes from 'prop-types';
+
+import SelectInfiniteScroll from '@js/components/SelectInfiniteScroll/SelectInfiniteScroll';
+import IconWithTooltip from './IconWithTooltip';
+
+const Autocomplete = ({
+    className,
+    description,
+    error,
+    helpTitleIcon,
+    id,
+    labelKey = "label",
+    name,
+    title,
+    value,
+    valueKey = "value",
+    showLabel = true,
+    required,
+    ...props
+}) => {
+    const getValue = () => {
+        if (value && isArray(value)) {
+            return value.map((entry) => {
+                return {
+                    result: entry,
+                    [valueKey]: isString(entry) ? entry : entry[valueKey],
+                    [labelKey]: isString(entry) ? entry : entry[labelKey]
+                };
+            });
+        }
+        return value;
+    };
+
+    return (
+        <div className={`form-group${className ? " " + className : ""}${!!error ? " " + "has-error" : ""}`}>
+            {showLabel ? <label className="control-label" htmlFor={id}>
+                {title || name}
+                {required ? <span className="required">{' '}*</span> : null}
+                {helpTitleIcon && !isEmpty(description) ? <>{' '}
+                    <IconWithTooltip tooltip={description} tooltipPosition={"right"} />
+                </> : null}
+            </label> : null}
+            <SelectInfiniteScroll
+                {...props}
+                id={id}
+                value={getValue()}
+                valueKey={valueKey}
+                labelKey={labelKey}
+            />
+            {error}
+        </div>
+    );
+};
+
+Autocomplete.propTypes = {
+    className: PropTypes.string,
+    description: PropTypes.string,
+    error: PropTypes.element,
+    helpTitleIcon: PropTypes.bool,
+    id: PropTypes.string.isRequired,
+    labelKey: PropTypes.string,
+    name: PropTypes.string,
+    title: PropTypes.string,
+    value: PropTypes.any.isRequired,
+    valueKey: PropTypes.string,
+    showLabel: PropTypes.bool
+};
+
+export default Autocomplete;
diff --git a/geonode_mapstore_client/client/js/plugins/MetadataEditor/components/IconWithTooltip.jsx b/geonode_mapstore_client/client/js/plugins/MetadataEditor/components/IconWithTooltip.jsx
new file mode 100644
index 0000000000..d27e27995e
--- /dev/null
+++ b/geonode_mapstore_client/client/js/plugins/MetadataEditor/components/IconWithTooltip.jsx
@@ -0,0 +1,16 @@
+/*
+ * Copyright 2024, 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 tooltip from '@mapstore/framework/components/misc/enhancers/tooltip';
+import FaIcon from '@js/components/FaIcon/FaIcon';
+
+const IconWithTooltip = tooltip((props) => <span {...props}><FaIcon name="info-circle" /></span>);
+
+export default IconWithTooltip;
+
diff --git a/geonode_mapstore_client/client/js/plugins/MetadataEditor/components/_fields/SchemaField.jsx b/geonode_mapstore_client/client/js/plugins/MetadataEditor/components/_fields/SchemaField.jsx
new file mode 100644
index 0000000000..4df04dd55a
--- /dev/null
+++ b/geonode_mapstore_client/client/js/plugins/MetadataEditor/components/_fields/SchemaField.jsx
@@ -0,0 +1,191 @@
+/*
+ * Copyright 2024, 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 axios from '@mapstore/framework/libs/ajax';
+import castArray from 'lodash/castArray';
+import isEmpty from 'lodash/isEmpty';
+import isString from 'lodash/isString';
+import Autocomplete from '../Autocomplete';
+import DefaultSchemaField from '@rjsf/core/lib/components/fields/SchemaField';
+
+function findProperty(name, properties) {
+    return Object.keys(properties || {}).some((key) => {
+        return key === name
+            || (properties[key]?.properties ? findProperty(name, properties[key].properties) : false);
+    });
+}
+
+function shouldHideLabel({
+    name,
+    ...props
+}) {
+    const parts = (name || '').split('-');
+    const arrayId = parseFloat(parts[parts.length - 1]);
+    if (!isNaN(arrayId)) {
+        return !findProperty(name, props?.registry?.rootSchema?.properties);
+    }
+    return false;
+}
+
+/**
+ * `SchemaField` is an enhanced component that overrides `@rjsf`'s default `SchemaField`
+ * - Customizes the rendering of object and array fields with custom functionality, such as support for autocomplete fields.
+ * - Provides `onChange` handlers to update `formData` dynamically.
+ * - Fallback to the default `SchemaField` from `@rjsf` when no custom rendering is needed.
+ */
+const SchemaField = (props) => {
+    const {
+        onChange,
+        schema,
+        formData,
+        idSchema,
+        name,
+        errorSchema,
+        uiSchema,
+        required
+    } = props;
+    const uiOptions = uiSchema?.['ui:options'];
+    const autocomplete = uiOptions?.['geonode-ui:autocomplete'];
+    const isSchemaItemString = schema?.items?.type === 'string';
+    const isSchemaItemObject = schema?.items?.type === 'object';
+    const isMultiSelect = schema?.type === 'array' && (isSchemaItemString ||
+        (isSchemaItemObject && !isEmpty(schema?.items?.properties))
+    );
+    const isSingleSelect = schema?.type === 'object' && !isEmpty(schema?.properties);
+
+    if (autocomplete && (isMultiSelect || isSingleSelect)) {
+        const {
+            classNames,
+            style,
+            description,
+            disabled,
+            help: helpText,
+            hideError,
+            label,
+            placeholder: autoCompletePlaceholder,
+            title
+        } = uiOptions;
+        const errors = (!hideError ? castArray(errorSchema) : [])
+            .reduce((acc, errorEntry) => {
+                if (errorEntry?.__errors) {
+                    acc.push({ messages: errorEntry.__errors });
+                } else {
+                    Object.keys(errorEntry || {}).forEach((key) => {
+                        if (errorEntry[key]?.__errors) {
+                            acc.push({ key, messages: errorEntry[key].__errors });
+                        }
+                    });
+                }
+                return acc;
+            }, []);
+        const autocompleteOptions = isString(autocomplete)
+            ? { url: autocomplete }
+            : autocomplete;
+        const autocompleteUrl = autocompleteOptions?.url;
+        const queryKey = autocompleteOptions?.queryKey || 'q';
+        const resultsKey = autocompleteOptions?.resultsKey || 'results';
+        const valueKey = autocompleteOptions?.valueKey || 'id';
+        const labelKey = autocompleteOptions?.labelKey || 'label';
+        const creatable = !!autocompleteOptions?.creatable;
+        const placeholder = autoCompletePlaceholder ?? ' ';
+
+        let autoCompleteProps = {
+            className: `field${classNames ? ' ' + classNames : ''}`,
+            clearable: !required,
+            creatable,
+            id: idSchema.$id,
+            labelKey,
+            multi: isMultiSelect,
+            name,
+            placeholder,
+            showLabel: label ?? true,
+            title: title ?? schema.title,
+            value: formData,
+            valueKey,
+            helpTitleIcon: true,
+            description: helpText ?? description ?? schema.description, // Help text is preferred over description and displayed as a tooltip
+            disabled: disabled || props?.readonly,
+            style,
+            required,
+            onChange: (selected) => {
+                const _selected = selected?.result ?? undefined;
+                if (isMultiSelect) {
+                    return onChange(selected.map(({ result, ...option }) => {
+                        if (result === undefined) {
+                            return option;
+                        }
+                        return isString(result)
+                            ? result
+                            : isSchemaItemString
+                                ? result[valueKey]
+                                : Object.fromEntries(
+                                    Object.keys(schema.items?.properties)
+                                        .map((key) => [key, result[key]])
+                                );
+                    }));
+                }
+                return onChange(_selected);
+            },
+            loadOptions: ({ q, config, ...params }) => {
+                return axios.get(autocompleteUrl, {
+                    ...config,
+                    params: {
+                        ...params,
+                        ...(q && { [queryKey]: q }),
+                        page: params.page
+                    }
+                })
+                    .then(({ data }) => {
+                        return {
+                            isNextPageAvailable: !!data.pagination?.more,
+                            results: data?.[resultsKey].map((result) => {
+                                return {
+                                    selectOption: {
+                                        result,
+                                        [valueKey]: isString(result) ? result : result[valueKey],
+                                        [labelKey]: isString(result) ? result : result[labelKey]
+                                    }
+                                };
+                            })
+                        };
+                    });
+            },
+            error: isEmpty(errors) ? null : <>
+                {errors.map((entry, idx) => {
+                    return (
+                        <ul key={idx} className="text-danger">
+                            {castArray(entry.messages).map((message, mIdx) => {
+                                return <li key={mIdx}>{entry.key ? `${entry.key}: ` : ''}{message}</li>;
+                            })}
+                        </ul>
+                    );
+                })}
+            </>
+        };
+
+        return <Autocomplete {...autoCompleteProps}/>;
+    }
+
+    const hideLabel = shouldHideLabel(props);
+    return (
+        <DefaultSchemaField
+            {...props}
+            uiSchema={hideLabel ? {
+                ...props.uiSchema,
+                'ui:label': false,
+                'ui:options': {
+                    ...props.uiSchema?.['ui:options'],
+                    label: false
+                }
+            } : uiSchema}
+        />
+    );
+};
+
+export default SchemaField;
diff --git a/geonode_mapstore_client/client/js/plugins/MetadataEditor/components/_fields/index.js b/geonode_mapstore_client/client/js/plugins/MetadataEditor/components/_fields/index.js
new file mode 100644
index 0000000000..4ce151846f
--- /dev/null
+++ b/geonode_mapstore_client/client/js/plugins/MetadataEditor/components/_fields/index.js
@@ -0,0 +1,13 @@
+/*
+ * Copyright 2024, 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 SchemaField from './SchemaField';
+
+export default {
+    SchemaField
+};
diff --git a/geonode_mapstore_client/client/js/plugins/MetadataEditor/components/_templates/ArrayFieldItemTemplate.jsx b/geonode_mapstore_client/client/js/plugins/MetadataEditor/components/_templates/ArrayFieldItemTemplate.jsx
new file mode 100644
index 0000000000..7537b8529e
--- /dev/null
+++ b/geonode_mapstore_client/client/js/plugins/MetadataEditor/components/_templates/ArrayFieldItemTemplate.jsx
@@ -0,0 +1,73 @@
+/*
+ * Copyright 2024, 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";
+
+function ArrayFieldItemTemplate(props) {
+    const {
+        children,
+        className,
+        disabled,
+        hasToolbar,
+        hasMoveDown,
+        hasMoveUp,
+        hasRemove,
+        hasCopy,
+        index,
+        onCopyIndexClick,
+        onDropIndexClick,
+        onReorderClick,
+        readonly,
+        registry,
+        uiSchema
+    } = props;
+    const { CopyButton, MoveDownButton, MoveUpButton, RemoveButton } = registry.templates.ButtonTemplates;
+    return (
+        <div className={className}>
+            {children}
+            {hasToolbar && (
+                <>
+                    {(hasMoveUp || hasMoveDown) && (
+                        <MoveUpButton
+                            disabled={disabled || readonly || !hasMoveUp}
+                            onClick={onReorderClick(index, index - 1)}
+                            uiSchema={uiSchema}
+                            registry={registry}
+                        />
+                    )}
+                    {(hasMoveUp || hasMoveDown) && (
+                        <MoveDownButton
+                            disabled={disabled || readonly || !hasMoveDown}
+                            onClick={onReorderClick(index, index + 1)}
+                            uiSchema={uiSchema}
+                            registry={registry}
+                        />
+                    )}
+                    {hasCopy && (
+                        <CopyButton
+                            disabled={disabled || readonly}
+                            onClick={onCopyIndexClick(index)}
+                            uiSchema={uiSchema}
+                            registry={registry}
+                        />
+                    )}
+                    {hasRemove && (
+                        <RemoveButton
+                            disabled={disabled || readonly}
+                            onClick={onDropIndexClick(index)}
+                            uiSchema={uiSchema}
+                            registry={registry}
+                        />
+                    )}
+                </>
+            )}
+        </div>
+    );
+}
+
+export default ArrayFieldItemTemplate;
diff --git a/geonode_mapstore_client/client/js/plugins/MetadataEditor/components/_templates/ArrayFieldTemplate.jsx b/geonode_mapstore_client/client/js/plugins/MetadataEditor/components/_templates/ArrayFieldTemplate.jsx
new file mode 100644
index 0000000000..944df3af66
--- /dev/null
+++ b/geonode_mapstore_client/client/js/plugins/MetadataEditor/components/_templates/ArrayFieldTemplate.jsx
@@ -0,0 +1,88 @@
+
+/*
+ * Copyright 2024, 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 {
+    getTemplate,
+    getUiOptions
+} from '@rjsf/utils';
+
+function ArrayFieldTemplate(props) {
+    const {
+        canAdd,
+        disabled,
+        idSchema,
+        uiSchema,
+        items,
+        onAddClick,
+        readonly,
+        registry,
+        required,
+        schema,
+        title
+    } = props;
+    const uiOptions = getUiOptions(uiSchema);
+    const ArrayFieldDescriptionTemplate = getTemplate(
+        'ArrayFieldDescriptionTemplate',
+        registry,
+        uiOptions
+    );
+    const ArrayFieldItemTemplate = getTemplate(
+        'ArrayFieldItemTemplate',
+        registry,
+        uiOptions
+    );
+    const ArrayFieldTitleTemplate = getTemplate(
+        'ArrayFieldTitleTemplate',
+        registry,
+        uiOptions
+    );
+    // Button templates are not overridden in the uiSchema
+    const {
+        ButtonTemplates: { AddButton }
+    } = registry.templates;
+    return (
+        <div id={idSchema.$id}>
+            <div className="field-array-header">
+                <ArrayFieldTitleTemplate
+                    idSchema={idSchema}
+                    title={uiOptions.title || title}
+                    required={required}
+                    schema={schema}
+                    uiSchema={uiSchema}
+                    registry={registry}
+                    description={<ArrayFieldDescriptionTemplate
+                        idSchema={idSchema}
+                        description={uiOptions.description || schema.description}
+                        schema={schema}
+                        uiSchema={uiSchema}
+                        registry={registry}
+                    />}
+                />
+                {canAdd && (
+                    <AddButton
+                        className="array-item-add"
+                        onClick={onAddClick}
+                        disabled={disabled || readonly}
+                        uiSchema={uiSchema}
+                        registry={registry}
+                    />
+                )}
+            </div>
+            <div className="array-item-list">
+                {items &&
+                    items.map(({ key, ...itemProps }) => (
+                        <ArrayFieldItemTemplate key={key} {...itemProps} />
+                    ))}
+            </div>
+        </div>
+    );
+}
+
+export default ArrayFieldTemplate;
diff --git a/geonode_mapstore_client/client/js/plugins/MetadataEditor/components/_templates/ArrayFieldTitleTemplate.jsx b/geonode_mapstore_client/client/js/plugins/MetadataEditor/components/_templates/ArrayFieldTitleTemplate.jsx
new file mode 100644
index 0000000000..fe1b34b817
--- /dev/null
+++ b/geonode_mapstore_client/client/js/plugins/MetadataEditor/components/_templates/ArrayFieldTitleTemplate.jsx
@@ -0,0 +1,41 @@
+/*
+ * Copyright 2024, 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 {
+    getTemplate,
+    getUiOptions,
+    titleId
+} from '@rjsf/utils';
+
+function ArrayFieldTitleTemplate(props) {
+    const { idSchema, title, schema, uiSchema, required, registry, description } = props;
+    const options = getUiOptions(uiSchema, registry.globalUiOptions);
+    const { label: displayLabel = true } = options;
+    if (!title || !displayLabel) {
+        return null;
+    }
+    const TitleFieldTemplate = getTemplate(
+        'TitleFieldTemplate',
+        registry,
+        options
+    );
+    return (
+        <TitleFieldTemplate
+            id={titleId(idSchema)}
+            title={title}
+            required={required}
+            schema={schema}
+            uiSchema={uiSchema}
+            registry={registry}
+            description={description}
+        />
+    );
+}
+
+export default ArrayFieldTitleTemplate;
diff --git a/geonode_mapstore_client/client/js/plugins/MetadataEditor/components/_templates/DescriptionFieldTemplate.jsx b/geonode_mapstore_client/client/js/plugins/MetadataEditor/components/_templates/DescriptionFieldTemplate.jsx
new file mode 100644
index 0000000000..c204d21f25
--- /dev/null
+++ b/geonode_mapstore_client/client/js/plugins/MetadataEditor/components/_templates/DescriptionFieldTemplate.jsx
@@ -0,0 +1,27 @@
+/*
+ * Copyright 2024, 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 isEmpty from "lodash/isEmpty";
+import IconWithTooltip from '../IconWithTooltip';
+
+const DescriptionFieldTemplate = (props) => {
+    const { description, id } = props;
+    if (isEmpty(description)) {
+        return null;
+    }
+    return (
+        <IconWithTooltip
+            id={id}
+            tooltip={description}
+            tooltipPosition={"right"}
+        />
+    );
+};
+
+export default DescriptionFieldTemplate;
diff --git a/geonode_mapstore_client/client/js/plugins/MetadataEditor/components/_templates/FieldTemplate.jsx b/geonode_mapstore_client/client/js/plugins/MetadataEditor/components/_templates/FieldTemplate.jsx
new file mode 100644
index 0000000000..456d36e312
--- /dev/null
+++ b/geonode_mapstore_client/client/js/plugins/MetadataEditor/components/_templates/FieldTemplate.jsx
@@ -0,0 +1,41 @@
+/*
+ * Copyright 2024, 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 {
+    getTemplate,
+    getUiOptions
+} from '@rjsf/utils';
+
+function FieldTemplate(props) {
+    const { id, label, children, errors, help, description, hidden, required, displayLabel, registry, uiSchema } = props;
+    const uiOptions = getUiOptions(uiSchema);
+    const WrapIfAdditionalTemplate = getTemplate(
+        'WrapIfAdditionalTemplate',
+        registry,
+        uiOptions
+    );
+    if (hidden) {
+        return <div className="hidden">{children}</div>;
+    }
+    return (
+        <WrapIfAdditionalTemplate {...props}>
+            {displayLabel &&
+                <label className="control-label" htmlFor={id}>
+                    {label}
+                    {required && <span className="required">{' '}*</span>}
+                    {description ? <>{' '}{description}</> : null}
+                </label>}
+            {children}
+            {errors}
+            {help}
+        </WrapIfAdditionalTemplate>
+    );
+}
+
+export default FieldTemplate;
diff --git a/geonode_mapstore_client/client/js/plugins/MetadataEditor/components/_templates/ObjectFieldTemplate.jsx b/geonode_mapstore_client/client/js/plugins/MetadataEditor/components/_templates/ObjectFieldTemplate.jsx
new file mode 100644
index 0000000000..63a09b82e5
--- /dev/null
+++ b/geonode_mapstore_client/client/js/plugins/MetadataEditor/components/_templates/ObjectFieldTemplate.jsx
@@ -0,0 +1,210 @@
+
+/*
+ * Copyright 2024, 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 } from 'react';
+import Button from '@js/components/Button';
+import { Glyphicon } from 'react-bootstrap';
+import FaIcon from '@js/components/FaIcon';
+import Message from '@mapstore/framework/components/I18N/Message';
+import InputControlWithDebounce from '@js/components/InputControlWithDebounce';
+import {
+    canExpand,
+    descriptionId,
+    getTemplate,
+    getUiOptions,
+    titleId
+} from '@rjsf/utils';
+
+const scrollIntoView = (id) => {
+    const node = document.querySelector(`[for=${id}]`) || document.getElementById(id);
+    if (node) {
+        node.scrollIntoView({ behavior: "smooth", block: "start" });
+    }
+};
+
+function MetadataGroupList({
+    idSchema,
+    title,
+    group,
+    expanded: expandedProp
+}) {
+    const [_expanded, setExpanded] = useState(false);
+    const groupError = group.some(property => property.error);
+    const expanded = expandedProp === undefined ? _expanded : expandedProp;
+    return (
+        <li>
+            <Button className={groupError ? 'gn-metadata-error' : ''} size="xs" onClick={() => setExpanded((prevExpanded) => !prevExpanded)}>
+                <Glyphicon glyph={expanded ? "bottom" : "next"} />{' '}{title}{groupError ? <>{' '}<FaIcon name="exclamation" /></> : null}
+            </Button>
+            {expanded ? <ul>
+                {group
+                    .map((property) => {
+                        return (
+                            <li key={property.name}>
+                                <Button
+                                    size="xs"
+                                    className={property.error ? 'gn-metadata-error' : ''}
+                                    onClick={() => scrollIntoView(idSchema[property.name]?.$id)}>
+                                    {property.title}
+                                    {property.error ? <>{' '}<FaIcon name="exclamation" /></> : null}
+                                </Button>
+                            </li>
+                        );
+                    })}
+            </ul> : null}
+        </li>
+    );
+}
+
+function RootMetadata({
+    idSchema,
+    schema,
+    uiSchema,
+    properties,
+    errorSchema,
+    formContext
+}) {
+    const {
+        title: metadataTitle
+    } = formContext;
+
+    const [filterText, setFilterText] = useState('');
+
+    const groups = properties.reduce((acc, property) => {
+
+        const title = schema?.properties?.[property.name]?.title || property.name;
+
+        const _uiSchema = uiSchema?.[property?.name] || {};
+        const options = _uiSchema?.['ui:options'] || {};
+        if ((_uiSchema?.['ui:widget'] || options.widget) === 'hidden'
+            || !title.toLowerCase().includes((filterText || '').toLowerCase())) {
+            return acc;
+        }
+        const sectionKey = options?.['geonode-ui:group'] || 'General';
+        const sectionItems = acc[sectionKey] || [];
+        return {
+            ...acc,
+            [sectionKey]: [...sectionItems, { ...property, uiSchema: _uiSchema, schema: schema?.properties?.[property.name], error: errorSchema[property.name], title }]
+        };
+    }, {});
+
+    const metadataTitleId = 'gn-metadata-title';
+    const emptyMetadata = !Object.keys(groups).some(groupKey => groups[groupKey].length > 0);
+
+    return (
+        <div className="gn-metadata-layout">
+            <ul className="gn-metadata-list">
+                <InputControlWithDebounce
+                    placeholder="gnviewer.filterMetadata"
+                    value={filterText}
+                    onChange={(value) => setFilterText(value)}
+                />
+                {metadataTitle ? <li><Button size="xs" onClick={() => scrollIntoView(metadataTitleId)}><Message msgId="gnviewer.metadataFor" /> {metadataTitle}</Button></li> : null}
+                {Object.keys(groups)
+                    .filter(groupKey => groups[groupKey].length > 0)
+                    .map((groupKey) => {
+                        const group = groups[groupKey];
+                        return (
+                            <MetadataGroupList
+                                key={groupKey}
+                                idSchema={idSchema}
+                                title={groupKey}
+                                group={group}
+                                expanded={filterText ? true : undefined}
+                            />
+                        );
+                    })}
+            </ul>
+            <div className="gn-metadata-groups">
+                {metadataTitle ? <div id={metadataTitleId} className="gn-metadata-title">
+                    <Message msgId="gnviewer.metadataFor" /> {metadataTitle}
+                </div> : null}
+                {emptyMetadata ? <div className="field"><Message msgId="gnviewer.noMetadataFound" /></div> : null}
+                {Object.keys(groups)
+                    .filter(groupKey => groups[groupKey].length > 0)
+                    .map((groupKey, idx) => {
+                        const group = groups[groupKey];
+                        return (
+                            <div className="gn-metadata-group" key={idx}>
+                                <div className="gn-metadata-group-title">{groupKey}</div>
+                                {group.map((property, jdx) => {
+                                    return <React.Fragment key={`${idx}_${jdx}`}>{property.content}</React.Fragment>;
+                                })}
+                            </div>
+                        );
+                    })}
+            </div>
+        </div>
+    );
+}
+
+function ObjectFieldTemplate(props) {
+    const isRoot = props?.idSchema?.$id === 'root';
+    if (isRoot) {
+        return <RootMetadata {...props} />;
+    }
+    const {
+        description,
+        disabled,
+        formData,
+        idSchema,
+        onAddClick,
+        properties,
+        readonly,
+        registry,
+        required,
+        schema,
+        title,
+        uiSchema
+    } = props;
+    const options = getUiOptions(uiSchema);
+    const TitleFieldTemplate = getTemplate('TitleFieldTemplate', registry, options);
+    const DescriptionFieldTemplate = getTemplate(
+        'DescriptionFieldTemplate',
+        registry,
+        options
+    );
+    const {
+        ButtonTemplates: { AddButton }
+    } = registry.templates;
+    return (
+        <div id={idSchema.$id}>
+            {title && (
+                <TitleFieldTemplate
+                    id={titleId(idSchema)}
+                    title={title}
+                    required={required}
+                    schema={schema}
+                    uiSchema={uiSchema}
+                    registry={registry}
+                    description={<DescriptionFieldTemplate
+                        id={descriptionId(idSchema)}
+                        description={description}
+                        schema={schema}
+                        uiSchema={uiSchema}
+                        registry={registry}
+                    />}
+                />
+            )}
+            {properties?.length ? <div className="field-object-properties">
+                {properties.map((prop) => prop.content)}
+            </div> : null}
+            {canExpand(schema, uiSchema, formData) && (
+                <AddButton
+                    onClick={onAddClick(schema)}
+                    disabled={disabled || readonly}
+                    uiSchema={uiSchema}
+                    registry={registry}
+                />
+            )}
+        </div>
+    );
+}
+
+export default ObjectFieldTemplate;
diff --git a/geonode_mapstore_client/client/js/plugins/MetadataEditor/components/_templates/TitleFieldTemplate.jsx b/geonode_mapstore_client/client/js/plugins/MetadataEditor/components/_templates/TitleFieldTemplate.jsx
new file mode 100644
index 0000000000..5017886311
--- /dev/null
+++ b/geonode_mapstore_client/client/js/plugins/MetadataEditor/components/_templates/TitleFieldTemplate.jsx
@@ -0,0 +1,24 @@
+/*
+ * Copyright 2024, 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';
+
+const TitleFieldTemplate = (props) => {
+    const { id, required, title, description } = props;
+    return (
+        <div id={id}>
+            <label>
+                {title}
+                {required && <span className="required">{' '}*</span>}
+                {description ? <>{' '}{description}</> : null}
+            </label>
+        </div>
+    );
+};
+
+export default TitleFieldTemplate;
diff --git a/geonode_mapstore_client/client/js/plugins/MetadataEditor/components/_templates/index.js b/geonode_mapstore_client/client/js/plugins/MetadataEditor/components/_templates/index.js
new file mode 100644
index 0000000000..6fd164a3ab
--- /dev/null
+++ b/geonode_mapstore_client/client/js/plugins/MetadataEditor/components/_templates/index.js
@@ -0,0 +1,99 @@
+/*
+ * Copyright 2024, 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 Button from '@js/components/Button';
+import { Glyphicon } from 'react-bootstrap';
+import ArrayFieldItemTemplate from './ArrayFieldItemTemplate';
+import ArrayFieldTemplate from './ArrayFieldTemplate';
+import ArrayFieldTitleTemplate from './ArrayFieldTitleTemplate';
+import ObjectFieldTemplate from './ObjectFieldTemplate';
+import DescriptionFieldTemplate from './DescriptionFieldTemplate';
+import FieldTemplate from './FieldTemplate';
+import TitleFieldTemplate from './TitleFieldTemplate';
+
+function AddButton({
+    onClick,
+    disabled
+}) {
+    return (
+        <Button
+            disabled={disabled}
+            className="square-button-md"
+            onClick={onClick}
+            variant="primary"
+        >
+            <Glyphicon glyph="plus" />
+        </Button>
+    );
+}
+
+function MoveUpButton({
+    onClick,
+    disabled
+}) {
+    return (
+        <Button
+            disabled={disabled}
+            className="square-button-md"
+            onClick={onClick}
+            style={ disabled ? { visibility: 'hidden' } : {}}
+        >
+            <Glyphicon glyph="arrow-up" />
+        </Button>
+    );
+}
+
+function MoveDownButton({
+    onClick,
+    disabled
+}) {
+    return (
+        <Button
+            disabled={disabled}
+            className="square-button-md"
+            onClick={onClick}
+            style={ disabled ? { visibility: 'hidden' } : {}}
+        >
+            <Glyphicon glyph="arrow-down" />
+        </Button>
+    );
+}
+
+function RemoveButton({
+    onClick,
+    disabled
+}) {
+    return (
+        <Button
+            disabled={disabled}
+            className="square-button-md"
+            onClick={onClick}
+        >
+            <Glyphicon glyph="trash" />
+        </Button>
+    );
+}
+
+
+export default {
+    ArrayFieldItemTemplate,
+    ArrayFieldTemplate,
+    ArrayFieldTitleTemplate,
+    ObjectFieldTemplate,
+    TitleFieldTemplate,
+    DescriptionFieldTemplate,
+    ErrorListTemplate: () => null,
+    FieldTemplate,
+    ButtonTemplates: {
+        AddButton,
+        MoveUpButton,
+        MoveDownButton,
+        RemoveButton
+    }
+};
diff --git a/geonode_mapstore_client/client/js/plugins/MetadataEditor/components/_widgets/RichTextEditor.jsx b/geonode_mapstore_client/client/js/plugins/MetadataEditor/components/_widgets/RichTextEditor.jsx
new file mode 100644
index 0000000000..7ea83d23bc
--- /dev/null
+++ b/geonode_mapstore_client/client/js/plugins/MetadataEditor/components/_widgets/RichTextEditor.jsx
@@ -0,0 +1,37 @@
+/*
+ * Copyright 2024, 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 } from 'react';
+import { htmlToDraftJSEditorState, draftJSEditorStateToHtml } from '@mapstore/framework/utils/EditorUtils';
+import { Editor } from 'react-draft-wysiwyg';
+
+import 'react-draft-wysiwyg/dist/react-draft-wysiwyg.css';
+
+function RichTextEditor({
+    value,
+    onChange,
+    ...props
+}) {
+    const [editorState, setEditorState] = useState(htmlToDraftJSEditorState(value || ''));
+    return (
+        <Editor
+            {...props}
+            editorState={editorState}
+            onEditorStateChange={(newEditorState) => {
+                const previousHTML = draftJSEditorStateToHtml(editorState);
+                const newHTML = draftJSEditorStateToHtml(newEditorState);
+                if (newHTML !== previousHTML) {
+                    onChange(newHTML);
+                    setEditorState(newEditorState);
+                }
+            }}
+        />
+    );
+}
+
+export default RichTextEditor;
diff --git a/geonode_mapstore_client/client/js/plugins/MetadataEditor/components/_widgets/SelectWidget.jsx b/geonode_mapstore_client/client/js/plugins/MetadataEditor/components/_widgets/SelectWidget.jsx
new file mode 100644
index 0000000000..2dd6d08761
--- /dev/null
+++ b/geonode_mapstore_client/client/js/plugins/MetadataEditor/components/_widgets/SelectWidget.jsx
@@ -0,0 +1,18 @@
+/*
+ * Copyright 2024, 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 DefaultSelectWidget from '@rjsf/core/lib/components/widgets/SelectWidget';
+
+function SelectWidget(props) {
+    return (
+        <DefaultSelectWidget {...props}/>
+    );
+}
+
+export default SelectWidget;
diff --git a/geonode_mapstore_client/client/js/plugins/MetadataEditor/components/_widgets/TextareaWidget.jsx b/geonode_mapstore_client/client/js/plugins/MetadataEditor/components/_widgets/TextareaWidget.jsx
new file mode 100644
index 0000000000..146fb4066e
--- /dev/null
+++ b/geonode_mapstore_client/client/js/plugins/MetadataEditor/components/_widgets/TextareaWidget.jsx
@@ -0,0 +1,34 @@
+/*
+ * Copyright 2024, 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, { lazy, Suspense } from 'react';
+import DefaultTextareaWidget from '@rjsf/core/lib/components/widgets/TextareaWidget';
+const RichTextEditor = lazy(() => import('./RichTextEditor'));
+
+function TextareaWidget(props) {
+    const {
+        id,
+        options = {},
+        value,
+        onChange
+    } = props;
+    if (options?.['geonode-ui:richTextEditor']) {
+        return (
+            <Suspense fallback={null}>
+                <RichTextEditor
+                    id={id}
+                    value={value}
+                    onChange={onChange}
+                />
+            </Suspense>
+        );
+    }
+    return (<DefaultTextareaWidget {...props}/>);
+}
+
+export default TextareaWidget;
diff --git a/geonode_mapstore_client/client/js/plugins/MetadataEditor/components/_widgets/index.js b/geonode_mapstore_client/client/js/plugins/MetadataEditor/components/_widgets/index.js
new file mode 100644
index 0000000000..d733d1510e
--- /dev/null
+++ b/geonode_mapstore_client/client/js/plugins/MetadataEditor/components/_widgets/index.js
@@ -0,0 +1,15 @@
+/*
+ * Copyright 2024, 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 SelectWidget from './SelectWidget';
+import TextareaWidget from './TextareaWidget';
+
+export default {
+    SelectWidget,
+    TextareaWidget
+};
diff --git a/geonode_mapstore_client/client/js/plugins/MetadataEditor/containers/MetadataEditor.jsx b/geonode_mapstore_client/client/js/plugins/MetadataEditor/containers/MetadataEditor.jsx
new file mode 100644
index 0000000000..9713dcb464
--- /dev/null
+++ b/geonode_mapstore_client/client/js/plugins/MetadataEditor/containers/MetadataEditor.jsx
@@ -0,0 +1,157 @@
+/*
+ * Copyright 2024, 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, { useEffect, useRef } from 'react';
+import PropTypes from 'prop-types';
+import validator from '@rjsf/validator-ajv8';
+import Form from '@rjsf/core';
+import { Alert } from 'react-bootstrap';
+import isEmpty from 'lodash/isEmpty';
+
+import { getMetadataByPk } from '@js/api/geonode/v2/metadata';
+import Message from '@mapstore/framework/components/I18N/Message';
+import widgets from '../components/_widgets';
+import templates from '../components/_templates';
+import fields from '../components/_fields';
+import MainEventView from '@js/components/MainEventView';
+import MainLoader from '@js/components/MainLoader';
+import { getMessageById } from '@mapstore/framework/utils/LocaleUtils';
+
+function MetadataEditor({
+    pk,
+    loading,
+    error,
+    extraErrors: extraErrorsProp,
+    metadata,
+    schema,
+    uiSchema,
+    updateError,
+    setLoading,
+    setError,
+    setUISchema,
+    setSchema,
+    setMetadata,
+    setInitialMetadata,
+    setUpdateError,
+    setResource,
+    updating,
+    setExtraErrors,
+    readOnly
+}, { messages }) {
+
+    const init = useRef(false);
+    const initialize = useRef();
+    const {__errors: rootErrors, ...extraErrors} = extraErrorsProp ?? {};
+    initialize.current = (ref) => {
+        if (ref?.validateForm && !init.current) {
+            init.current = true;
+            // force initial validation
+            if (isEmpty(extraErrors)) {
+                ref.validateForm();
+            }
+        }
+    };
+    useEffect(() => {
+        if (pk) {
+            setLoading(true);
+            setError(false);
+            getMetadataByPk(pk)
+                .then((payload) => {
+                    setUISchema(payload.uiSchema);
+                    setSchema(payload.schema);
+                    setMetadata(payload.metadata);
+                    setInitialMetadata(payload.metadata);
+                    setResource(payload.resource);
+                    setExtraErrors(payload.extraErrors);
+                })
+                .catch(() => {
+                    setError(true);
+                })
+                .finally(() => {
+                    setLoading(false);
+                });
+        }
+    }, [pk]);
+
+    function handleChange(formData) {
+        setUpdateError(false);
+        setMetadata(formData);
+    }
+
+    if (loading) {
+        return (<MainLoader />);
+    }
+
+    if (error) {
+        return (<MainEventView msgId={'gnviewer.metadataNotFound'} />);
+    }
+
+    if (!metadata && !schema) {
+        return null;
+    }
+
+    return (
+        <div className="gn-metadata">
+            <div className="gn-metadata-header">
+                {updateError && <Alert bsStyle="danger" style={{ margin: '0.25rem 0' }}>
+                    <Message msgId="gnviewer.metadataUpdateError" />
+                    {!isEmpty(rootErrors) && <ul>{rootErrors.map((_error, idx) => <li key={idx}>{_error}</li>)}</ul>}
+                </Alert>}
+            </div>
+            <div className="gn-metadata-container">
+                <Form
+                    liveValidate
+                    readonly={readOnly}
+                    ref={initialize.current}
+                    formContext={{
+                        title: metadata?.title
+                    }}
+                    schema={schema}
+                    widgets={widgets}
+                    uiSchema={uiSchema}
+                    formData={metadata}
+                    validator={validator}
+                    templates={templates}
+                    fields={fields}
+                    extraErrors={extraErrors}
+                    transformErrors={(errors) => {
+                        return errors.filter(err => err.message !== 'must be equal to constant').map(err => {
+                            const errorMessage = (err.message || '').startsWith('must have required property')
+                                ? 'must have required property'
+                                : err.message;
+                            const messageId = `metadata.error.${errorMessage}`;
+                            const message = getMessageById(messages, messageId);
+                            return {
+                                ...err,
+                                message: messageId === message ? errorMessage : message
+                            };
+                        });
+                    }}
+                    experimental_defaultFormStateBehavior={{
+                        arrayMinItems: {
+                            populate: 'never',
+                            mergeExtraDefaults: false
+                        }
+                    }}
+                    onChange={({ formData }) => {
+                        handleChange(formData);
+                    }}
+                >
+                    <></>
+                </Form>
+            </div>
+            {updating ? <MainLoader style={{ opacity: 0.5 }} /> : null}
+        </div>
+    );
+}
+
+MetadataEditor.contextTypes = {
+    messages: PropTypes.object
+};
+
+export default MetadataEditor;
diff --git a/geonode_mapstore_client/client/js/plugins/MetadataEditor/containers/MetadataUpdateButton.jsx b/geonode_mapstore_client/client/js/plugins/MetadataEditor/containers/MetadataUpdateButton.jsx
new file mode 100644
index 0000000000..25637dcbf5
--- /dev/null
+++ b/geonode_mapstore_client/client/js/plugins/MetadataEditor/containers/MetadataUpdateButton.jsx
@@ -0,0 +1,58 @@
+/*
+ * Copyright 2024, 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 get from 'lodash/get';
+import { updateMetadata } from '@js/api/geonode/v2/metadata';
+import Message from '@mapstore/framework/components/I18N/Message';
+import Button from '@js/components/Button';
+
+function MetadataUpdateButton({
+    pendingChanges,
+    size,
+    variant,
+    pk,
+    metadata,
+    updating,
+    setUpdating,
+    setUpdateError,
+    setInitialMetadata,
+    setExtraErrors
+}) {
+
+    function handleUpdate() {
+        setUpdating(true);
+        setUpdateError(false);
+        updateMetadata(pk, metadata)
+            .then((response) => {
+                setInitialMetadata(metadata);
+                setExtraErrors(get(response, 'data.extraErrors', {}));
+            })
+            .catch((error) => {
+                setExtraErrors(get(error, 'data.extraErrors', {}));
+                setUpdateError(true);
+            })
+            .finally(() => {
+                setUpdating(false);
+            });
+    }
+
+    return (
+        <Button
+            size={size}
+            variant={variant}
+            disabled={!pendingChanges || updating}
+            className={pendingChanges ? 'gn-pending-changes-icon' : ''}
+            onClick={() => handleUpdate()}
+        >
+            <Message msgId="gnhome.update" />
+        </Button>
+    );
+}
+
+export default MetadataUpdateButton;
diff --git a/geonode_mapstore_client/client/js/plugins/MetadataEditor/index.js b/geonode_mapstore_client/client/js/plugins/MetadataEditor/index.js
new file mode 100644
index 0000000000..85ab84817a
--- /dev/null
+++ b/geonode_mapstore_client/client/js/plugins/MetadataEditor/index.js
@@ -0,0 +1,129 @@
+/*
+ * Copyright 2024, 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, { lazy, Suspense } from 'react';
+import { createPlugin } from '@mapstore/framework/utils/PluginsUtils';
+import { connect } from 'react-redux';
+import { createSelector } from 'reselect';
+import { withRouter } from 'react-router';
+import isEqual from 'lodash/isEqual';
+import MetadataUpdateButton from './containers/MetadataUpdateButton';
+import {
+    setMetadata,
+    setInitialMetadata,
+    setMetadataSchema,
+    setMetadataUISchema,
+    setMetadataLoading,
+    setMetadataError,
+    setMetadataUpdating,
+    setMetadataUpdateError,
+    setMetadataResource,
+    setExtraErrors
+} from './actions/metadata';
+import { parseDevHostname } from '@js/utils/APIUtils';
+
+import metadataReducer from './reducers/metadata';
+import Button from '@js/components/Button';
+import Message from '@mapstore/framework/components/I18N/Message';
+import { resourceHasPermission } from '@js/utils/ResourceUtils';
+
+const MetadataEditor = lazy(() => import('./containers/MetadataEditor'));
+
+const connectMetadata = connect(
+    createSelector([
+        state => state?.metadata?.loading,
+        state => state?.metadata?.error,
+        state => state?.metadata?.extraErrors,
+        state => state?.metadata?.metadata,
+        state => state?.metadata?.initialMetadata,
+        state => state?.metadata?.schema,
+        state => state?.metadata?.uiSchema,
+        state => state?.metadata?.updating,
+        state => state?.metadata?.updateError,
+        state => state?.metadata?.resource
+    ], (loading, error, extraErrors, metadata, initialMetadata, schema, uiSchema, updating, updateError, resource) => ({
+        loading,
+        error,
+        extraErrors,
+        metadata,
+        schema,
+        uiSchema,
+        updating,
+        updateError,
+        pendingChanges: !isEqual(initialMetadata, metadata),
+        resource,
+        readOnly: !resourceHasPermission(resource, 'change_resourcebase_metadata')
+    })),
+    {
+        setLoading: setMetadataLoading,
+        setError: setMetadataError,
+        setUISchema: setMetadataUISchema,
+        setSchema: setMetadataSchema,
+        setMetadata,
+        setInitialMetadata,
+        setUpdateError: setMetadataUpdateError,
+        setUpdating: setMetadataUpdating,
+        setResource: setMetadataResource,
+        setExtraErrors
+    }
+);
+
+const MetadataEditorComponent = ({ match,  ...props }) => {
+    const { params } = match || {};
+    const pk = params?.pk;
+    return (
+        <Suspense fallback={null}>
+            <MetadataEditor {...props} pk={pk}/>
+        </Suspense>
+    );
+};
+
+const MetadataEditorPlugin = connectMetadata(withRouter(MetadataEditorComponent));
+
+const UpdateButton = ({ match, readOnly,  ...props }) => {
+    const { params } = match || {};
+    const pk = params?.pk;
+    if (readOnly) {
+        return null;
+    }
+    return (
+        <MetadataUpdateButton {...props} pk={pk} />
+    );
+};
+
+const UpdateButtonPlugin = connectMetadata(withRouter(UpdateButton));
+
+const BackToButton = ({ size, variant, resource }) => {
+    if (!resource) {
+        return null;
+    }
+    return (<Button size={size} variant={variant} href={parseDevHostname(resource.detail_url || '')}>
+        <Message msgId="gnviewer.goBackTo" msgParams={{ resourceName: resource.title }}/>
+    </Button>);
+};
+
+const BackToButtonPlugin = connectMetadata(withRouter(BackToButton));
+
+export default createPlugin('MetadataEditor', {
+    component: MetadataEditorPlugin,
+    containers: {
+        ActionNavbar: [
+            {
+                name: 'MetadataEditor',
+                Component: UpdateButtonPlugin
+            },
+            {
+                name: 'MetadataEditorBackTo',
+                Component: BackToButtonPlugin
+            }
+        ]
+    },
+    epics: {},
+    reducers: {
+        metadata: metadataReducer
+    }
+});
diff --git a/geonode_mapstore_client/client/js/plugins/MetadataEditor/reducers/metadata.js b/geonode_mapstore_client/client/js/plugins/MetadataEditor/reducers/metadata.js
new file mode 100644
index 0000000000..0201fe1596
--- /dev/null
+++ b/geonode_mapstore_client/client/js/plugins/MetadataEditor/reducers/metadata.js
@@ -0,0 +1,96 @@
+/*
+ * Copyright 2024, 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 {
+    SET_METADATA,
+    SET_INITIAL_METADATA,
+    SET_METADATA_SCHEMA,
+    SET_METADATA_UI_SCHEMA,
+    SET_METADATA_LOADING,
+    SET_METADATA_ERROR,
+    SET_METADATA_UPDATING,
+    SET_METADATA_UPDATE_ERROR,
+    SET_METADATA_PREVIEW,
+    SET_METADATA_RESOURCE,
+    SET_METADATA_EXTRA_ERRORS
+} from '../actions/metadata';
+
+function metadata(state = {}, action) {
+    switch (action.type) {
+    case SET_METADATA: {
+        return {
+            ...state,
+            metadata: action.metadata
+        };
+    }
+    case SET_INITIAL_METADATA: {
+        return {
+            ...state,
+            initialMetadata: action.initialMetadata
+        };
+    }
+    case SET_METADATA_SCHEMA: {
+        return {
+            ...state,
+            schema: action.schema
+        };
+    }
+    case SET_METADATA_UI_SCHEMA: {
+        return {
+            ...state,
+            uiSchema: action.uiSchema
+        };
+    }
+    case SET_METADATA_LOADING: {
+        return {
+            ...state,
+            loading: action.loading
+        };
+    }
+    case SET_METADATA_ERROR: {
+        return {
+            ...state,
+            error: action.error
+        };
+    }
+    case SET_METADATA_UPDATING: {
+        return {
+            ...state,
+            updating: action.updating
+        };
+    }
+    case SET_METADATA_UPDATE_ERROR: {
+        return {
+            ...state,
+            updateError: action.updateError
+        };
+    }
+    case SET_METADATA_PREVIEW: {
+        return {
+            ...state,
+            preview: action.preview
+        };
+    }
+    case SET_METADATA_RESOURCE: {
+        return {
+            ...state,
+            resource: action.resource
+        };
+    }
+    case SET_METADATA_EXTRA_ERRORS: {
+        return {
+            ...state,
+            extraErrors: action.extraErrors
+        };
+    }
+    default:
+        return state;
+    }
+}
+
+export default metadata;
diff --git a/geonode_mapstore_client/client/js/plugins/index.js b/geonode_mapstore_client/client/js/plugins/index.js
index 8c35380de2..24075395da 100644
--- a/geonode_mapstore_client/client/js/plugins/index.js
+++ b/geonode_mapstore_client/client/js/plugins/index.js
@@ -18,6 +18,8 @@ import { toModulePlugin as msToModulePlugin } from '@mapstore/framework/utils/Mo
 
 import TOCPlugin from '@mapstore/framework/plugins/TOC';
 import OperationPlugin from '@js/plugins/Operation';
+import MetadataEditorPlugin from '@js/plugins/MetadataEditor';
+import MetadataViewerPlugin from '@js/plugins/MetadataEditor/MetadataViewer';
 
 let epicsNamesToExclude = [
     'loadGeostoryEpic',
@@ -65,6 +67,8 @@ const toModulePlugin = (...args) => {
 export const plugins = {
     TOCPlugin,
     OperationPlugin,
+    MetadataEditorPlugin,
+    MetadataViewerPlugin,
     LayerDownloadPlugin: toModulePlugin(
         'LayerDownload',
         () => import(/* webpackChunkName: 'plugins/layer-download' */ '@mapstore/framework/plugins/LayerDownload'),
diff --git a/geonode_mapstore_client/client/js/routes/Viewer.jsx b/geonode_mapstore_client/client/js/routes/Viewer.jsx
index 62be7948c5..d916f2066b 100644
--- a/geonode_mapstore_client/client/js/routes/Viewer.jsx
+++ b/geonode_mapstore_client/client/js/routes/Viewer.jsx
@@ -111,7 +111,7 @@ function ViewerRoute({
     const loading = loadingConfig || pluginLoading;
     const parsedPlugins = useMemo(() => ({ ...loadedPlugins, ...getPlugins(plugins) }), [loadedPlugins]);
     const Loader = loaderComponent;
-    const className = `page-${resourceType}-viewer`;
+    const className = `page-${resourceType || name}-viewer`;
 
     return (
         <>
diff --git a/geonode_mapstore_client/client/js/utils/AppRoutesUtils.js b/geonode_mapstore_client/client/js/utils/AppRoutesUtils.js
index 5a0c47caa4..02541f53a7 100644
--- a/geonode_mapstore_client/client/js/utils/AppRoutesUtils.js
+++ b/geonode_mapstore_client/client/js/utils/AppRoutesUtils.js
@@ -72,6 +72,12 @@ export const GEOSTORY_ROUTES = [{
 }];
 
 export const CATALOGUE_ROUTES = [
+    {
+        name: 'metadata',
+        path: ['/metadata/:pk'],
+        component: appRouteComponentTypes.VIEWER,
+        shouldNotRequestResources: true
+    },
     {
         name: 'dataset_viewer',
         path: [
diff --git a/geonode_mapstore_client/client/js/utils/ResourceUtils.js b/geonode_mapstore_client/client/js/utils/ResourceUtils.js
index 9d3e480244..f30d2ec215 100644
--- a/geonode_mapstore_client/client/js/utils/ResourceUtils.js
+++ b/geonode_mapstore_client/client/js/utils/ResourceUtils.js
@@ -335,9 +335,8 @@ export const getResourceTypesInfo = () => ({
         })),
         formatDetailUrl: (resource) => resource?.detail_url && parseDevHostname(resource.detail_url),
         name: 'Dataset',
-        formatMetadataUrl: (resource) => isDefaultDatasetSubtype(resource?.subtype)
-            ? `/datasets/${resource.store ? resource.store + ":" : ''}${resource.alternate}/metadata`
-            : `/resources/${resource.pk}/metadata`
+        formatMetadataUrl: (resource) => `#/metadata/${resource.pk}`,
+        formatMetadataDetailUrl: (resource) => `/metadata/${resource.pk}`
     },
     [ResourceTypes.MAP]: {
         icon: 'map',
@@ -347,7 +346,8 @@ export const getResourceTypesInfo = () => ({
             config: 'map_preview'
         })),
         formatDetailUrl: (resource) => resource?.detail_url && parseDevHostname(resource.detail_url),
-        formatMetadataUrl: (resource) => (`/maps/${resource.pk}/metadata`)
+        formatMetadataUrl: (resource) => `#/metadata/${resource.pk}`,
+        formatMetadataDetailUrl: (resource) => `/metadata/${resource.pk}`
     },
     [ResourceTypes.DOCUMENT]: {
         icon: 'file',
@@ -356,8 +356,9 @@ export const getResourceTypesInfo = () => ({
         hasPermission: (resource) => resourceHasPermission(resource, 'download_resourcebase'),
         formatEmbedUrl: (resource) => isDocumentExternalSource(resource) ? undefined : resource?.embed_url && parseDevHostname(resource.embed_url),
         formatDetailUrl: (resource) => resource?.detail_url && parseDevHostname(resource.detail_url),
-        formatMetadataUrl: (resource) => (`/documents/${resource.pk}/metadata`),
-        metadataPreviewUrl: (resource) => (`/documents/${resource.pk}/metadata_detail?preview`)
+        formatMetadataUrl: (resource) => `#/metadata/${resource.pk}`,
+        formatMetadataDetailUrl: (resource) => `/metadata/${resource.pk}`,
+        metadataPreviewUrl: (resource) => `/metadata/${resource.pk}/embed`
     },
     [ResourceTypes.GEOSTORY]: {
         icon: 'book',
@@ -365,7 +366,8 @@ export const getResourceTypesInfo = () => ({
         canPreviewed: (resource) => resourceHasPermission(resource, 'view_resourcebase'),
         formatEmbedUrl: (resource) => resource?.embed_url && parseDevHostname(resource.embed_url),
         formatDetailUrl: (resource) => resource?.detail_url && parseDevHostname(resource.detail_url),
-        formatMetadataUrl: (resource) => (`/apps/${resource.pk}/metadata`)
+        formatMetadataUrl: (resource) => `#/metadata/${resource.pk}`,
+        formatMetadataDetailUrl: (resource) => `/metadata/${resource.pk}`
     },
     [ResourceTypes.DASHBOARD]: {
         icon: 'dashboard',
@@ -373,7 +375,8 @@ export const getResourceTypesInfo = () => ({
         canPreviewed: (resource) => resourceHasPermission(resource, 'view_resourcebase'),
         formatEmbedUrl: (resource) => resource?.embed_url && parseDevHostname(resource.embed_url),
         formatDetailUrl: (resource) => resource?.detail_url && parseDevHostname(resource.detail_url),
-        formatMetadataUrl: (resource) => (`/apps/${resource.pk}/metadata`)
+        formatMetadataUrl: (resource) => `#/metadata/${resource.pk}`,
+        formatMetadataDetailUrl: (resource) => `/metadata/${resource.pk}`
     },
     [ResourceTypes.VIEWER]: {
         icon: 'cogs',
@@ -381,7 +384,8 @@ export const getResourceTypesInfo = () => ({
         canPreviewed: (resource) => resourceHasPermission(resource, 'view_resourcebase'),
         formatEmbedUrl: () => false,
         formatDetailUrl: (resource) => resource?.detail_url && parseDevHostname(resource.detail_url),
-        formatMetadataUrl: (resource) => (`/apps/${resource.pk}/metadata`)
+        formatMetadataUrl: (resource) => `#/metadata/${resource.pk}`,
+        formatMetadataDetailUrl: (resource) => `/metadata/${resource.pk}`
     }
 });
 
@@ -394,7 +398,11 @@ export const getMetadataUrl = (resource) => {
 };
 
 export const getMetadataDetailUrl = (resource) => {
-    return (getMetadataUrl(resource)) ? getMetadataUrl(resource) + '_detail' : '';
+    if (resource) {
+        const { formatMetadataDetailUrl = () => '' } = getResourceTypesInfo()[resource?.resource_type] || {};
+        return formatMetadataDetailUrl(resource);
+    }
+    return '';
 };
 
 export const getResourceStatuses = (resource) => {
diff --git a/geonode_mapstore_client/client/js/utils/__tests__/AppRoutesUtils-test.js b/geonode_mapstore_client/client/js/utils/__tests__/AppRoutesUtils-test.js
index c1359ca585..7a177c3dcb 100644
--- a/geonode_mapstore_client/client/js/utils/__tests__/AppRoutesUtils-test.js
+++ b/geonode_mapstore_client/client/js/utils/__tests__/AppRoutesUtils-test.js
@@ -57,6 +57,7 @@ describe('Test App Routes Utils', () => {
 
     it('test catalogue routes', () => {
         const [
+            metadataRoute,
             datasetSubtypeRoute,
             datasetRoute,
             datasetEditDataRoute,
@@ -71,6 +72,9 @@ describe('Test App Routes Utils', () => {
             uploadDatasetRoute,
             uploadDocumentRoute
         ] = routeUtils.CATALOGUE_ROUTES;
+        expect(metadataRoute.path).toEqual(['/metadata/:pk']);
+        expect(metadataRoute.name).toEqual('metadata');
+        expect(metadataRoute.shouldNotRequestResources).toEqual(true);
         expect(datasetSubtypeRoute.path).toEqual(['/dataset/:subtype/:pk']);
         expect(datasetSubtypeRoute.name).toEqual('dataset_viewer');
         expect(datasetSubtypeRoute.shouldNotRequestResources).toEqual(true);
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 dfe5fa67ee..fba4d1f298 100644
--- a/geonode_mapstore_client/client/js/utils/__tests__/ResourceUtils-test.js
+++ b/geonode_mapstore_client/client/js/utils/__tests__/ResourceUtils-test.js
@@ -683,18 +683,14 @@ describe('Test Resource Utils', () => {
             let resource = {
                 perms: ['view_resourcebase'],
                 store: "workspace",
-                alternate: 'name:test'
+                alternate: 'name:test',
+                pk: "100"
             };
             expect(icon).toBe('database');
             expect(canPreviewed(resource)).toBeTruthy();
             expect(name).toBe('Dataset');
 
-            // Test with store
-            expect(formatMetadataUrl(resource)).toBe('/datasets/workspace:name:test/metadata');
-
-            // Test with no store
-            resource = {...resource, store: undefined};
-            expect(formatMetadataUrl(resource)).toBe('/datasets/name:test/metadata');
+            expect(formatMetadataUrl(resource)).toBe('#/metadata/100');
 
         });
         it('test map of getResourceTypesInfo', () => {
@@ -711,7 +707,7 @@ describe('Test Resource Utils', () => {
             expect(icon).toBe('map');
             expect(canPreviewed(resource)).toBeTruthy();
             expect(name).toBe('Map');
-            expect(formatMetadataUrl(resource)).toBe('/maps/100/metadata');
+            expect(formatMetadataUrl(resource)).toBe('#/metadata/100');
         });
         it('test document of getResourceTypesInfo', () => {
             const {
@@ -731,8 +727,8 @@ describe('Test Resource Utils', () => {
             expect(canPreviewed(resource)).toBeTruthy();
             expect(hasPermission(resource)).toBeTruthy();
             expect(name).toBe('Document');
-            expect(formatMetadataUrl(resource)).toBe('/documents/100/metadata');
-            expect(metadataPreviewUrl(resource)).toBe('/documents/100/metadata_detail?preview');
+            expect(formatMetadataUrl(resource)).toBe('#/metadata/100');
+            expect(metadataPreviewUrl(resource)).toBe('/metadata/100/embed');
         });
         it('test geostory of getResourceTypesInfo', () => {
             const {
@@ -748,7 +744,7 @@ describe('Test Resource Utils', () => {
             expect(icon).toBe('book');
             expect(canPreviewed(resource)).toBeTruthy();
             expect(name).toBe('GeoStory');
-            expect(formatMetadataUrl(resource)).toBe('/apps/100/metadata');
+            expect(formatMetadataUrl(resource)).toBe('#/metadata/100');
         });
         it('test dashboard of getResourceTypesInfo', () => {
             const {
@@ -764,7 +760,7 @@ describe('Test Resource Utils', () => {
             expect(icon).toBe('dashboard');
             expect(canPreviewed(resource)).toBeTruthy();
             expect(name).toBe('Dashboard');
-            expect(formatMetadataUrl(resource)).toBe('/apps/100/metadata');
+            expect(formatMetadataUrl(resource)).toBe('#/metadata/100');
         });
     });
     it('test isDocumentExternalSource', () => {
diff --git a/geonode_mapstore_client/client/package.json b/geonode_mapstore_client/client/package.json
index a50b9a73e4..c1bb45fa85 100644
--- a/geonode_mapstore_client/client/package.json
+++ b/geonode_mapstore_client/client/package.json
@@ -26,13 +26,15 @@
   "author": "GeoSolutions",
   "license": "BSD-2-Clause",
   "devDependencies": {
-    "@mapstore/project": "git+https://github.com/geosolutions-it/mapstore-project.git#2024.02.xx",
+    "@mapstore/project": "git+https://github.com/geosolutions-it/mapstore-project.git#master",
     "dotenv": "10.0.0",
     "jsdoc": "4.0.0"
   },
   "dependencies": {
     "@jsdoc/salty": "0.2.1",
-    "dompurify": "2.5.4",
+    "@rjsf/core": "5.19.4",
+    "@rjsf/utils": "5.19.4",
+    "@rjsf/validator-ajv8": "5.19.4",
     "mapstore": "file:MapStore2",
     "react-helmet": "6.1.0",
     "react-intl": "2.3.0",
diff --git a/geonode_mapstore_client/client/themes/geonode/less/_metadata.less b/geonode_mapstore_client/client/themes/geonode/less/_metadata.less
new file mode 100644
index 0000000000..38e42e2e1e
--- /dev/null
+++ b/geonode_mapstore_client/client/themes/geonode/less/_metadata.less
@@ -0,0 +1,286 @@
+// **************
+// Theme
+// **************
+
+#gn-components-theme(@theme-vars) {
+    .gn-metadata-header,
+    .gn-metadata-footer {
+        .background-color-var(@theme-vars[main-bg]);
+    }
+    .gn-metadata {
+        .background-color-var(@theme-vars[main-bg]);
+        .rdw-editor-main {
+            .border-color-var(@theme-vars[main-border-color]);
+        }
+    }
+    .gn-metadata-groups {
+        .gn-metadata-group {
+            .field-object-properties,
+            .array-item {
+                .border-color-var(@theme-vars[main-border-color]);
+            }
+            .has-error {
+                label {
+                    .color-var(@theme-vars[danger])
+                }
+            }
+        }
+    }
+    .gn-metadata-list {
+        .border-right-color-var(@theme-vars[main-border-color]);
+    }
+    .gn-metadata-error .fa {
+        .color-var(@theme-vars[danger])
+    }
+    .gn-metadata-view,
+    .page-metadata-viewer {
+        .background-color-var(@theme-vars[main-variant-bg]);
+    }
+}
+
+// **************
+// Layout
+// **************
+
+.gn-metadata {
+    position: relative;
+    width: 100%;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    max-width: 1140px;
+    margin: auto;
+    flex-direction: column;
+    .rjsf {
+        position: absolute;
+        width: 100%;
+        height: 100%;
+        display: flex;
+        flex-direction: column;
+        /* hide the default submit button */
+        [type='submit'] {
+            display: none;
+        }
+    }
+    .gn-metadata-container,
+    .rjsf > .field-object {
+        position: relative;
+        flex: 1;
+        display: flex;
+        margin: 0;
+    }
+    .gn-metadata-header {
+        padding: 0 0.5rem;
+    }
+    .gn-metadata-title {
+        font-size: 1.75rem;
+        word-break: break-word;
+        padding: 1rem 0.75rem;
+        padding-top: 0;
+    }
+    .gn-metadata-toolbar {
+        display: flex;
+        align-items: center;
+        gap: 0.5rem;
+        padding: 0.25rem 0;
+        .form-control {
+            max-width: 400px;
+        }
+    }
+    textarea.form-control {
+        resize: none;
+    }
+    .rdw-editor-main {
+        border: 1px solid transparent;
+    }
+    .rdw-embedded-modal {
+        height: auto !important;
+    }
+    .gn-metadata-layout {
+        position: absolute;
+        width: 100%;
+        height: 100%;
+        display: flex;
+    }
+}
+
+.gn-metadata-list {
+    position: relative;
+    height: 100%;
+    overflow: auto;
+    padding: 0.5rem;
+    margin: 0;
+    list-style: none;
+    border-right: 1px solid transparent;
+    width: 250px;
+    ul {
+        list-style: none;
+        padding: 0;
+        margin: 0;
+        li {
+            * {
+                text-transform: capitalize;
+            }
+            padding: 0;
+            .btn {
+                padding-left: 1.75rem;
+            }
+        }
+    }
+
+    .btn,
+    .btn:focus {
+        width: 100%;
+        text-align: left;
+        box-shadow: none;
+        display: block;
+        text-overflow: ellipsis;
+        overflow: hidden;
+    }
+    .gn-metadata-error {
+        text-decoration: underline;
+        text-decoration-color: fade(@gn-danger, 50);
+        text-underline-position: under;
+    }
+    > .form-control {
+        margin-bottom: 0.5rem;
+    }
+}
+
+.gn-metadata-groups {
+    position: relative;
+    padding: 0.5rem;
+    height: 100%;
+    width: 100%;
+    overflow: auto;
+    flex: 1;
+    .gn-metadata-group-title {
+        font-size: 1.5rem;
+        padding: 0.5rem 0.75rem;
+    }
+    .gn-metadata-group:not(.gn-metadata-group-view) {
+        max-width: 60ch;
+    }
+    .field-description {
+        font-size: @font-size-sm;
+        font-style: italic;
+    }
+    .field {
+        padding: 0 0.75rem;
+    }
+
+    .field-object-properties {
+        padding: 0.75rem 0;
+        border: 1px solid transparent;
+        border-radius: 4px;
+        label {
+            font-weight: normal;
+            font-size: @font-size-sm;
+        }
+    }
+    legend {
+        font-weight: bold;
+        font-size: 0.9rem;
+        border: none;
+    }
+
+    dl {
+        display: grid;
+        grid-template-columns: max-content auto;
+        padding: 0 0.75rem;
+        dt {
+            padding: 0.25rem;
+            text-align: right;
+            grid-column-start: 1;
+            > label {
+                margin: 0;
+                a {
+                    position: absolute;
+                    transform: translate(-100%);
+                    opacity: 0;
+                    padding: 0 0.2rem;
+                }
+                &:hover {
+                    a {
+                        opacity: 1;
+                    }
+                }
+            }
+        }
+        dd {
+            padding: 0.25rem;
+            grid-column-start: 2;
+        }
+    }
+    .form-group {
+        .Select--multi {
+            .Select-value {
+                margin-top: 3px;
+                margin-bottom: 3px;
+            }
+        }
+    }
+    .array-item {
+        display: flex;
+        min-width: 0;
+        padding: 0;
+        padding: 0.5rem;
+        border: 1px solid transparent;
+        border-radius: 4px;
+        > .field {
+            padding: 0;
+            flex: 1;
+            min-width: 0;
+        }
+    }
+    .array-item-list {
+        display: flex;
+        flex-direction: column;
+        gap: 0.5rem;
+        .form-group:last-of-type {
+            margin-bottom: 0;
+        }
+        label {
+            font-weight: normal;
+            font-size: @font-size-sm;
+        }
+        .field {
+            padding: 0;
+        }
+        .field-object-properties {
+            border: none;
+            padding: 0;
+        }
+    }
+    .field-array-header {
+        display: flex;
+        margin-bottom: 0.5rem;
+        gap: 0.5rem;
+        > div {
+            flex: 1;
+            min-width: 0;
+        }
+    }
+    .gn-metadata-group {
+        label {
+            text-transform: capitalize;
+            word-break: break-all;
+        }
+    }
+}
+
+.gn-metadata-page {
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    .gn-metadata-view {
+        position: relative;
+        display: flex;
+        flex: 1;
+    }
+    .gn-footer {
+        position: static;
+    }
+}
\ 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 19bfa1925a..444515d379 100644
--- a/geonode_mapstore_client/client/themes/geonode/less/geonode.less
+++ b/geonode_mapstore_client/client/themes/geonode/less/geonode.less
@@ -15,6 +15,7 @@
 @import '_main-event.less';
 @import '_map-viewers-catalog.less';
 @import '_menu.less';
+@import '_metadata.less';
 @import '_operation.less';
 @import '_resource-card.less';
 @import '_resources-catalog.less';
diff --git a/geonode_mapstore_client/static/mapstore/configs/localConfig.json b/geonode_mapstore_client/static/mapstore/configs/localConfig.json
index 36c8c99e2e..84b4f0f3fb 100644
--- a/geonode_mapstore_client/static/mapstore/configs/localConfig.json
+++ b/geonode_mapstore_client/static/mapstore/configs/localConfig.json
@@ -574,9 +574,8 @@
                                     "name": "DetailViewerButton"
                                 },
                                 {
-                                    "type": "link",
-                                    "href": "{context.getMetadataDetailUrl(state('gnResourceData'))}",
-                                    "labelId": "gnviewer.viewMetadata"
+                                    "type": "plugin",
+                                    "name": "MetadataViewer"
                                 },
                                 {
                                     "type": "link",
@@ -1361,6 +1360,9 @@
                         "name": "OperationReplaceDataset"
                     }
                 }
+            },
+            {
+                "name": "MetadataViewer"
             }
         ],
         "dataset_edit_data_viewer": [
@@ -1672,9 +1674,8 @@
                                     "name": "DetailViewerButton"
                                 },
                                 {
-                                    "type": "link",
-                                    "href": "{context.getMetadataDetailUrl(state('gnResourceData'))}",
-                                    "labelId": "gnviewer.viewMetadata"
+                                    "type": "plugin",
+                                    "name": "MetadataViewer"
                                 }
                             ]
                         },
@@ -2377,6 +2378,9 @@
                     "wrap": true
                 }
             },
+            {
+                "name": "MetadataViewer"
+            },
             {
                 "mandatory": true,
                 "name": "LayerDetailViewer",
@@ -2589,9 +2593,8 @@
                                     "name": "DetailViewerButton"
                                 },
                                 {
-                                    "type": "link",
-                                    "href": "{context.getMetadataDetailUrl(state('gnResourceData'))}",
-                                    "labelId": "gnviewer.viewMetadata"
+                                    "type": "plugin",
+                                    "name": "MetadataViewer"
                                 }
                             ]
                         },
@@ -2864,6 +2867,9 @@
             },
             {
                 "name": "Sync"
+            },
+            {
+                "name": "MetadataViewer"
             }
         ],
         "document_viewer": [
@@ -2926,9 +2932,8 @@
                                     "name": "DetailViewerButton"
                                 },
                                 {
-                                    "type": "link",
-                                    "href": "{context.getMetadataDetailUrl(state('gnResourceData'))}",
-                                    "labelId": "gnviewer.viewMetadata"
+                                    "type": "plugin",
+                                    "name": "MetadataViewer"
                                 }
                             ]
                         },
@@ -3136,6 +3141,9 @@
             },
             {
                 "name": "MediaViewer"
+            },
+            {
+                "name": "MetadataViewer"
             }
         ],
         "dashboard_viewer": [
@@ -3204,9 +3212,8 @@
                                     "name": "DetailViewerButton"
                                 },
                                 {
-                                    "type": "link",
-                                    "href": "{context.getMetadataDetailUrl(state('gnResourceData'))}",
-                                    "labelId": "gnviewer.viewMetadata"
+                                    "type": "plugin",
+                                    "name": "MetadataViewer"
                                 }
                             ]
                         },
@@ -3472,6 +3479,9 @@
             },
             {
                 "name": "Notifications"
+            },
+            {
+                "name": "MetadataViewer"
             }
         ],
         "map_viewer_mobile": [
@@ -4570,9 +4580,8 @@
                                     "name": "DetailViewerButton"
                                 },
                                 {
-                                    "type": "link",
-                                    "href": "{context.getMetadataDetailUrl(state('gnResourceData'))}",
-                                    "labelId": "gnviewer.viewMetadata"
+                                    "type": "plugin",
+                                    "name": "MetadataViewer"
                                 }
                             ]
                         },
@@ -4800,7 +4809,38 @@
             },
             {
                 "name": "MapViewersCatalog"
+            },
+            {
+                "name": "MetadataViewer"
+            }
+        ],
+        "metadata": [
+            {
+                "name": "ActionNavbar",
+                "cfg": {
+                    "containerPosition": "header",
+                    "leftMenuItems": [
+                        {
+                            "type": "plugin",
+                            "name": "MetadataEditorBackTo"
+                        },
+                        {
+                            "type": "plugin",
+                            "name": "MetadataEditor"
+                        },
+                        {
+                            "type": "plugin",
+                            "name": "MetadataViewer"
+                        }
+                    ]
+                }
+            },
+            {
+                "name": "MetadataEditor"
+            },
+            {
+                "name": "MetadataViewer"
             }
-        ]
+        ] 
     }
 }
\ No newline at end of file
diff --git a/geonode_mapstore_client/static/mapstore/gn-translations/data.de-DE.json b/geonode_mapstore_client/static/mapstore/gn-translations/data.de-DE.json
index 9d7c54b274..3dd6a45409 100644
--- a/geonode_mapstore_client/static/mapstore/gn-translations/data.de-DE.json
+++ b/geonode_mapstore_client/static/mapstore/gn-translations/data.de-DE.json
@@ -1,6 +1,16 @@
 {
     "locale": "de-DE",
     "messages": {
+        "metadata": {
+            "error": {
+                "must match exactly one schema in oneOf": "Please select one of the available values",
+                "must be string": "The value must be a string",
+                "must be object": "The value must be an object",
+                "must NOT have fewer than 1 items": "Please select at least one item",
+                "must match format \"uri\"": "Bitte geben Sie eine gültige 'URI' ein.",
+                "must have required property": "Diese Eigenschaft ist erforderlich"
+            }
+        },
         "geostory": {
             "geoNode": "GeoNode"
         },
@@ -438,7 +448,12 @@
             "uploadName": "Name",
             "uploadCreated": "Erstellt",
             "replaceDataset": "Datensatz Ersetzen",
-            "replaceDatasetTitle": "Datensatz ersetzen"
+            "replaceDatasetTitle": "Datensatz ersetzen",
+            "metadataFor": "Metadaten:",
+            "metadataUpdateError": "Die Metadaten konnten nicht aktualisiert werden",
+            "metadataNotFound": "Für die ausgewählte Ressource wurden keine Metadaten gefunden",
+            "filterMetadata": "Nach Namen filtern...",
+            "noMetadataFound": "Keine Metadaten gefunden..."
         }
     }
 }
diff --git a/geonode_mapstore_client/static/mapstore/gn-translations/data.en-US.json b/geonode_mapstore_client/static/mapstore/gn-translations/data.en-US.json
index d0f02563cc..f453a940f2 100644
--- a/geonode_mapstore_client/static/mapstore/gn-translations/data.en-US.json
+++ b/geonode_mapstore_client/static/mapstore/gn-translations/data.en-US.json
@@ -1,6 +1,16 @@
 {
     "locale": "en-US",
     "messages": {
+        "metadata": {
+            "error": {
+                "must match exactly one schema in oneOf": "Please select one of the available values",
+                "must be string": "The value must be a string",
+                "must be object": "The value must be an object",
+                "must NOT have fewer than 1 items": "Please select at least one item",
+                "must match format \"uri\"": "Please enter a valid 'uri'",
+                "must have required property": "This property is required"
+            }
+        },
         "geostory": {
             "geoNode": "GeoNode"
         },
@@ -438,7 +448,12 @@
             "uploadName": "Name",
             "uploadCreated": "Created",
             "replaceDataset": "Replace Dataset",
-            "replaceDatasetTitle": "Replace dataset"
+            "replaceDatasetTitle": "Replace dataset",
+            "metadataFor": "Metadata:",
+            "metadataUpdateError": "It was not possible to update the metadata",
+            "metadataNotFound": "Metadata not found for the selected resource",
+            "filterMetadata": "Filter by name...",
+            "noMetadataFound": "No metadata found..."
         }
     }
 }
diff --git a/geonode_mapstore_client/static/mapstore/gn-translations/data.es-ES.json b/geonode_mapstore_client/static/mapstore/gn-translations/data.es-ES.json
index 3d0a54eaaa..32da967118 100644
--- a/geonode_mapstore_client/static/mapstore/gn-translations/data.es-ES.json
+++ b/geonode_mapstore_client/static/mapstore/gn-translations/data.es-ES.json
@@ -1,6 +1,16 @@
 {
     "locale": "es-ES",
     "messages": {
+        "metadata": {
+            "error": {
+                "must match exactly one schema in oneOf": "Por favor, seleccione uno de los valores disponibles",
+                "must be string": "El valor debe ser una cadena",
+                "must be object": "El valor debe ser un objeto",
+                "must NOT have fewer than 1 items": "Por favor, seleccione al menos un elemento",
+                "must match format \"uri\"": "Por favor, introduzca un 'uri' válido",
+                "must have required property": "Esta propiedad es requerida"
+            }
+        },
         "geostory": {
             "geoNode": "GeoNode"
         },
@@ -437,7 +447,12 @@
             "uploadName": "Nombre",
             "uploadCreated": "Creado",
             "replaceDataset": "Reemplazar Conjunto De Datos",
-            "replaceDatasetTitle": "Reemplazar conjunto de datos"
+            "replaceDatasetTitle": "Reemplazar conjunto de datos",
+            "metadataFor": "Metadatos:",
+            "metadataUpdateError": "No fue posible actualizar los metadatos",
+            "metadataNotFound": "No se encontraron metadatos para el recurso seleccionado",
+            "filterMetadata": "Filtrar por nombre...",
+            "noMetadataFound": "No se encontraron metadatos..."
         }
     }
 }
diff --git a/geonode_mapstore_client/static/mapstore/gn-translations/data.fi-FI.json b/geonode_mapstore_client/static/mapstore/gn-translations/data.fi-FI.json
index da8854d83b..fc6cdde0a7 100644
--- a/geonode_mapstore_client/static/mapstore/gn-translations/data.fi-FI.json
+++ b/geonode_mapstore_client/static/mapstore/gn-translations/data.fi-FI.json
@@ -1,6 +1,16 @@
 {
     "locale": "fi-FI",
     "messages": {
+        "metadata": {
+            "error": {
+                "must match exactly one schema in oneOf": "Please select one of the available values",
+                "must be string": "The value must be a string",
+                "must be object": "The value must be an object",
+                "must NOT have fewer than 1 items": "Please select at least one item",
+                "must match format \"uri\"": "Please enter a valid 'uri'",
+                "must have required property": "This property is required"
+            }
+        },
         "geostory": {
             "geoNode": "GeoNode"
         },
@@ -407,7 +417,12 @@
             "uploadName": "Name",
             "uploadCreated": "Created",
             "replaceDataset": "Replace Dataset",
-            "replaceDatasetTitle": "Replace dataset"
+            "replaceDatasetTitle": "Replace dataset",
+            "metadataFor": "Metadata:",
+            "metadataUpdateError": "It was not possible to update the metadata",
+            "metadataNotFound": "Metadata not found for the selected resource",
+            "filterMetadata": "Filter by name...",
+            "noMetadataFound": "No metadata found..."
         }
     }
 }
diff --git a/geonode_mapstore_client/static/mapstore/gn-translations/data.fr-FR.json b/geonode_mapstore_client/static/mapstore/gn-translations/data.fr-FR.json
index 3e5e588a35..4a962c91cd 100644
--- a/geonode_mapstore_client/static/mapstore/gn-translations/data.fr-FR.json
+++ b/geonode_mapstore_client/static/mapstore/gn-translations/data.fr-FR.json
@@ -1,6 +1,16 @@
 {
     "locale": "fr-FR",
     "messages": {
+        "metadata": {
+            "error": {
+                "must match exactly one schema in oneOf": "Veuillez sélectionner l'une des valeurs disponibles",
+                "must be string": "La valeur doit être une chaîne",
+                "must be object": "La valeur doit être un objet",
+                "must NOT have fewer than 1 items": "Veuillez sélectionner au moins un élément",
+                "must match format \"uri\"": "Veuillez saisir un 'uri' valide",
+                "must have required property": "Cette propriété est obligatoire"
+            }
+        },
         "geostory": {
             "geoNode": "GeoNode"
         },
@@ -438,7 +448,12 @@
             "uploadName": "Nom",
             "uploadCreated": "Créé",
             "replaceDataset": "Remplacer L'Ensemble De Données",
-            "replaceDatasetTitle": "Remplacer l'ensemble de données"
+            "replaceDatasetTitle": "Remplacer l'ensemble de données",
+            "metadataFor": "Métadonnées:",
+            "metadataUpdateError": "Il n'a pas été possible de mettre à jour les métadonnées",
+            "metadataNotFound": "Les métadonnées ne sont pas trouvées pour la ressource sélectionnée",
+            "filterMetadata": "Filtrer par nom...",
+            "noMetadataFound": "Aucune métadonnée trouvée..."
         }
     }
 }
diff --git a/geonode_mapstore_client/static/mapstore/gn-translations/data.hr-HR.json b/geonode_mapstore_client/static/mapstore/gn-translations/data.hr-HR.json
index 090a504b24..d30f63792f 100644
--- a/geonode_mapstore_client/static/mapstore/gn-translations/data.hr-HR.json
+++ b/geonode_mapstore_client/static/mapstore/gn-translations/data.hr-HR.json
@@ -1,6 +1,16 @@
 {
     "locale": "hr-HR",
     "messages": {
+        "metadata": {
+            "error": {
+                "must match exactly one schema in oneOf": "Please select one of the available values",
+                "must be string": "The value must be a string",
+                "must be object": "The value must be an object",
+                "must NOT have fewer than 1 items": "Please select at least one item",
+                "must match format \"uri\"": "Please enter a valid 'uri'",
+                "must have required property": "This property is required"
+            }
+        },
         "geostory": {
             "geoNode": "GeoNode"
         },
@@ -407,7 +417,12 @@
             "uploadName": "Name",
             "uploadCreated": "Created",
             "replaceDataset": "Replace Dataset",
-            "replaceDatasetTitle": "Replace dataset"
+            "replaceDatasetTitle": "Replace dataset",
+            "metadataFor": "Metadata:",
+            "metadataUpdateError": "It was not possible to update the metadata",
+            "metadataNotFound": "Metadata not found for the selected resource",
+            "filterMetadata": "Filter by name...",
+            "noMetadataFound": "No metadata found..."
         }
     }
 }
diff --git a/geonode_mapstore_client/static/mapstore/gn-translations/data.it-IT.json b/geonode_mapstore_client/static/mapstore/gn-translations/data.it-IT.json
index 346c0c53a0..385d85b06a 100644
--- a/geonode_mapstore_client/static/mapstore/gn-translations/data.it-IT.json
+++ b/geonode_mapstore_client/static/mapstore/gn-translations/data.it-IT.json
@@ -1,6 +1,16 @@
 {
     "locale": "it-IT",
     "messages": {
+        "metadata": {
+            "error": {
+                "must match exactly one schema in oneOf": "Seleziona uno dei valori disponibili",
+                "must be string": "Il valore deve essere una stringa",
+                "must be object": "Il valore deve essere un oggetto",
+                "must NOT have fewer than 1 items": "Seleziona almeno un elemento",
+                "must match format \"uri\"": "Inserisci un 'uri' valido",
+                "must have required property": "Questa proprietà è obbligatoria"
+            }
+        },
         "geostory": {
             "geoNode": "GeoNode"
         },
@@ -440,7 +450,12 @@
             "uploadName": "Nome",
             "uploadCreated": "Data creazione",
             "replaceDataset": "Sostituisci Dataset",
-            "replaceDatasetTitle": "Sostituisci dataset"
+            "replaceDatasetTitle": "Sostituisci dataset",
+            "metadataFor": "Metadati:",
+            "metadataUpdateError": "Non è stato possibile aggiornare i metadati",
+            "metadataNotFound": "Metadati non disponibili per la risorsa selezionata",
+            "filterMetadata": "Filtra per nome...",
+            "noMetadataFound": "Nessun metadato trovato..."
         }
     }
 }
diff --git a/geonode_mapstore_client/static/mapstore/gn-translations/data.nl-NL.json b/geonode_mapstore_client/static/mapstore/gn-translations/data.nl-NL.json
index a4c50acf82..d85c317460 100644
--- a/geonode_mapstore_client/static/mapstore/gn-translations/data.nl-NL.json
+++ b/geonode_mapstore_client/static/mapstore/gn-translations/data.nl-NL.json
@@ -1,6 +1,16 @@
 {
     "locale": "nl-NL",
     "messages": {
+        "metadata": {
+            "error": {
+                "must match exactly one schema in oneOf": "Please select one of the available values",
+                "must be string": "The value must be a string",
+                "must be object": "The value must be an object",
+                "must NOT have fewer than 1 items": "Please select at least one item",
+                "must match format \"uri\"": "Please enter a valid 'uri'",
+                "must have required property": "This property is required"
+            }
+        },
         "geostory": {
             "geoNode": "GeoNode"
         },
@@ -407,7 +417,12 @@
             "uploadName": "Name",
             "uploadCreated": "Created",
             "replaceDataset": "Replace Dataset",
-            "replaceDatasetTitle": "Replace dataset"
+            "replaceDatasetTitle": "Replace dataset",
+            "metadataFor": "Metadata:",
+            "metadataUpdateError": "It was not possible to update the metadata",
+            "metadataNotFound": "Metadata not found for the selected resource",
+            "filterMetadata": "Filter by name...",
+            "noMetadataFound": "No metadata found..."
         }
     }
 }
diff --git a/geonode_mapstore_client/static/mapstore/gn-translations/data.pt-PT.json b/geonode_mapstore_client/static/mapstore/gn-translations/data.pt-PT.json
index c583daad5f..c97af1a453 100644
--- a/geonode_mapstore_client/static/mapstore/gn-translations/data.pt-PT.json
+++ b/geonode_mapstore_client/static/mapstore/gn-translations/data.pt-PT.json
@@ -1,6 +1,16 @@
 {
     "locale": "pt-PT",
     "messages": {
+        "metadata": {
+            "error": {
+                "must match exactly one schema in oneOf": "Please select one of the available values",
+                "must be string": "The value must be a string",
+                "must be object": "The value must be an object",
+                "must NOT have fewer than 1 items": "Please select at least one item",
+                "must match format \"uri\"": "Please enter a valid 'uri'",
+                "must have required property": "This property is required"
+            }
+        },
         "geostory": {
             "geoNode": "GeoNode"
         },
@@ -407,7 +417,12 @@
             "uploadName": "Name",
             "uploadCreated": "Created",
             "replaceDataset": "Replace Dataset",
-            "replaceDatasetTitle": "Replace dataset"
+            "replaceDatasetTitle": "Replace dataset",
+            "metadataFor": "Metadata:",
+            "metadataUpdateError": "It was not possible to update the metadata",
+            "metadataNotFound": "Metadata not found for the selected resource",
+            "filterMetadata": "Filter by name...",
+            "noMetadataFound": "No metadata found..."
         }
     }
 }
diff --git a/geonode_mapstore_client/static/mapstore/gn-translations/data.sk-SK.json b/geonode_mapstore_client/static/mapstore/gn-translations/data.sk-SK.json
index 030ac9dc7e..fedece922e 100644
--- a/geonode_mapstore_client/static/mapstore/gn-translations/data.sk-SK.json
+++ b/geonode_mapstore_client/static/mapstore/gn-translations/data.sk-SK.json
@@ -1,6 +1,16 @@
 {
     "locale": "sk-SK",
     "messages": {
+        "metadata": {
+            "error": {
+                "must match exactly one schema in oneOf": "Please select one of the available values",
+                "must be string": "The value must be a string",
+                "must be object": "The value must be an object",
+                "must NOT have fewer than 1 items": "Please select at least one item",
+                "must match format \"uri\"": "Please enter a valid 'uri'",
+                "must have required property": "This property is required"
+            }
+        },
         "geostory": {
             "geoNode": "GeoNode"
         },
@@ -407,7 +417,12 @@
             "uploadName": "Name",
             "uploadCreated": "Created",
             "replaceDataset": "Replace Dataset",
-            "replaceDatasetTitle": "Replace dataset"
+            "replaceDatasetTitle": "Replace dataset",
+            "metadataFor": "Metadata:",
+            "metadataUpdateError": "It was not possible to update the metadata",
+            "metadataNotFound": "Metadata not found for the selected resource",
+            "filterMetadata": "Filter by name...",
+            "noMetadataFound": "No metadata found..."
         }
     }
 }
diff --git a/geonode_mapstore_client/static/mapstore/gn-translations/data.sv-SE.json b/geonode_mapstore_client/static/mapstore/gn-translations/data.sv-SE.json
index 0687368821..c6f23f56a6 100644
--- a/geonode_mapstore_client/static/mapstore/gn-translations/data.sv-SE.json
+++ b/geonode_mapstore_client/static/mapstore/gn-translations/data.sv-SE.json
@@ -2,6 +2,16 @@
 {
     "locale": "sv-SE",
     "messages": {
+        "metadata": {
+            "error": {
+                "must match exactly one schema in oneOf": "Please select one of the available values",
+                "must be string": "The value must be a string",
+                "must be object": "The value must be an object",
+                "must NOT have fewer than 1 items": "Please select at least one item",
+                "must match format \"uri\"": "Please enter a valid 'uri'",
+                "must have required property": "This property is required"
+            }
+        },
         "geostory": {
             "geoNode": "GeoNode"
         },
@@ -408,7 +418,12 @@
             "uploadName": "Name",
             "uploadCreated": "Created",
             "replaceDataset": "Replace Dataset",
-            "replaceDatasetTitle": "Replace dataset"
+            "replaceDatasetTitle": "Replace dataset",
+            "metadataFor": "Metadata:",
+            "metadataUpdateError": "It was not possible to update the metadata",
+            "metadataNotFound": "Metadata not found for the selected resource",
+            "filterMetadata": "Filter by name...",
+            "noMetadataFound": "No metadata found..."
         }
     }
 }
diff --git a/geonode_mapstore_client/static/mapstore/gn-translations/data.vi-VN.json b/geonode_mapstore_client/static/mapstore/gn-translations/data.vi-VN.json
index b861b36c4e..582ececc1a 100644
--- a/geonode_mapstore_client/static/mapstore/gn-translations/data.vi-VN.json
+++ b/geonode_mapstore_client/static/mapstore/gn-translations/data.vi-VN.json
@@ -1,6 +1,16 @@
 {
     "locale": "vi-VN",
     "messages": {
+        "metadata": {
+            "error": {
+                "must match exactly one schema in oneOf": "Please select one of the available values",
+                "must be string": "The value must be a string",
+                "must be object": "The value must be an object",
+                "must NOT have fewer than 1 items": "Please select at least one item",
+                "must match format \"uri\"": "Please enter a valid 'uri'",
+                "must have required property": "This property is required"
+            }
+        },
         "geostory": {
             "geoNode": "GeoNode"
         },
@@ -407,7 +417,12 @@
             "uploadName": "Name",
             "uploadCreated": "Created",
             "replaceDataset": "Replace Dataset",
-            "replaceDatasetTitle": "Replace dataset"
+            "replaceDatasetTitle": "Replace dataset",
+            "metadataFor": "Metadata:",
+            "metadataUpdateError": "It was not possible to update the metadata",
+            "metadataNotFound": "Metadata not found for the selected resource",
+            "filterMetadata": "Filter by name...",
+            "noMetadataFound": "No metadata found..."
         }
     }
 }
diff --git a/geonode_mapstore_client/static/mapstore/gn-translations/data.zh-ZH.json b/geonode_mapstore_client/static/mapstore/gn-translations/data.zh-ZH.json
index a18e10f82b..4e8373b383 100644
--- a/geonode_mapstore_client/static/mapstore/gn-translations/data.zh-ZH.json
+++ b/geonode_mapstore_client/static/mapstore/gn-translations/data.zh-ZH.json
@@ -1,6 +1,16 @@
 {
     "locale": "zh-ZH",
     "messages": {
+        "metadata": {
+            "error": {
+                "must match exactly one schema in oneOf": "Please select one of the available values",
+                "must be string": "The value must be a string",
+                "must be object": "The value must be an object",
+                "must NOT have fewer than 1 items": "Please select at least one item",
+                "must match format \"uri\"": "Please enter a valid 'uri'",
+                "must have required property": "This property is required"
+            }
+        },
         "geostory": {
             "geoNode": "GeoNode"
         },
@@ -407,7 +417,12 @@
             "uploadName": "Name",
             "uploadCreated": "Created",
             "replaceDataset": "Replace Dataset",
-            "replaceDatasetTitle": "Replace dataset"
+            "replaceDatasetTitle": "Replace dataset",
+            "metadataFor": "Metadata:",
+            "metadataUpdateError": "It was not possible to update the metadata",
+            "metadataNotFound": "Metadata not found for the selected resource",
+            "filterMetadata": "Filter by name...",
+            "noMetadataFound": "No metadata found..."
         }
     }
 }
diff --git a/geonode_mapstore_client/templates/geonode-mapstore-client/metadata.html b/geonode_mapstore_client/templates/geonode-mapstore-client/metadata.html
new file mode 100644
index 0000000000..8ad93f6c44
--- /dev/null
+++ b/geonode_mapstore_client/templates/geonode-mapstore-client/metadata.html
@@ -0,0 +1,9 @@
+{% extends "page.html" %}
+
+{% block page_class %}gn-metadata-page{% endblock %}
+{% block container %}
+{% include './snippets/metadata_view.html' with resource=resource metadata_groups=metadata_groups %}
+{% endblock %}
+
+{% block ms_scripts %}
+{% endblock ms_scripts %}
diff --git a/geonode_mapstore_client/templates/geonode-mapstore-client/metadata_embed.html b/geonode_mapstore_client/templates/geonode-mapstore-client/metadata_embed.html
new file mode 100644
index 0000000000..1fd0aa0171
--- /dev/null
+++ b/geonode_mapstore_client/templates/geonode-mapstore-client/metadata_embed.html
@@ -0,0 +1,28 @@
+{% load static %}
+{% load client_lib_tags %}
+{% load client_version %}
+<!DOCTYPE html>
+<html>
+    <head>
+        {% include './snippets/head.html' %}
+        {% include './snippets/loader_style.html' %}
+
+        {% block custom_theme %}
+            {% include './snippets/custom_theme.html' %}
+        {% endblock %}
+
+        {% block extra_style %}
+        {% endblock %}
+
+    </head>
+    <body class="msgapi ms2" data-ms2-container="ms2" >
+        <div class="gn-page-wrapper {% if request.user_agent.is_mobile %}gn-mobile{% else %}gn-desktop{% endif %}">
+            {% block gn_config %}
+                {% include './_geonode_config.html' with plugins_config_key='map_embed' is_embed='true' %}
+            {% endblock %}
+            <div class="gn-metadata-page">
+                {% include './snippets/metadata_view.html' with resource=resource metadata_groups=metadata_groups %}
+            </div>
+        </div>
+    </body>
+</html>
diff --git a/geonode_mapstore_client/templates/geonode-mapstore-client/snippets/metadata_field.html b/geonode_mapstore_client/templates/geonode-mapstore-client/snippets/metadata_field.html
new file mode 100644
index 0000000000..c828b6f139
--- /dev/null
+++ b/geonode_mapstore_client/templates/geonode-mapstore-client/snippets/metadata_field.html
@@ -0,0 +1,11 @@
+<dt>
+    <label id="{{prefix}}_{{name}}__label" class="control-label" for="{{prefix}}_{{name}}">
+        <a href="#{{prefix}}_{{name}}__label"><i class="fa fa-link"></i></a>
+        {{ property.schema.title|default:name }}
+    </label>
+</dt>
+<dd>
+    <div class="gn-metadata-group-value" id="{{prefix}}_{{name}}">
+        {% include 'geonode-mapstore-client/snippets/metadata_field_value.html' with name=name value=property.value schema=property.schema %}
+    </div>
+</dd>
diff --git a/geonode_mapstore_client/templates/geonode-mapstore-client/snippets/metadata_field_value.html b/geonode_mapstore_client/templates/geonode-mapstore-client/snippets/metadata_field_value.html
new file mode 100644
index 0000000000..6f862729b9
--- /dev/null
+++ b/geonode_mapstore_client/templates/geonode-mapstore-client/snippets/metadata_field_value.html
@@ -0,0 +1,32 @@
+{% if schema.type == 'object' %}
+    {% if value.items|length == 2 and value.id and value.label %}
+        {{value.label.value}}
+    {% else %}
+        <ul>
+        {% for property_key, property in value.items %}
+            <li>
+                {% if property.schema.title %}
+                    <i>{{property.schema.title}} </i>:
+                {% else %}
+                    <i>{{property_key}} </i>:
+                {% endif %}
+                {% include 'geonode-mapstore-client/snippets/metadata_field_value.html' with name=name value=property.value schema=property.schema %}
+            </li>
+        {% endfor %}
+        </ul>
+    {% endif %}
+{% elif schema.type == 'array' %}
+    <ul>
+    {% for property in value %}
+        <li>
+            {% include 'geonode-mapstore-client/snippets/metadata_field_value.html' with name=name value=property.value schema=property.schema %}
+        </li>
+    {% endfor %}
+    </ul>
+{% else %}
+    {% if schema.format == 'date-time' %}
+        {{value|date:"DATETIME_FORMAT"}}
+    {% else %}
+        {{value}}
+    {% endif %}
+{% endif %}
diff --git a/geonode_mapstore_client/templates/geonode-mapstore-client/snippets/metadata_fields.html b/geonode_mapstore_client/templates/geonode-mapstore-client/snippets/metadata_fields.html
new file mode 100644
index 0000000000..b33ba885c9
--- /dev/null
+++ b/geonode_mapstore_client/templates/geonode-mapstore-client/snippets/metadata_fields.html
@@ -0,0 +1,7 @@
+<dl>
+{% for name, property in metadata.items %}
+    {% block property %}
+        {% include 'geonode-mapstore-client/snippets/metadata_field.html' with prefix=prefix name=name property=property %}
+    {% endblock property %}
+{% endfor %}
+</dl>
\ No newline at end of file
diff --git a/geonode_mapstore_client/templates/geonode-mapstore-client/snippets/metadata_view.html b/geonode_mapstore_client/templates/geonode-mapstore-client/snippets/metadata_view.html
new file mode 100644
index 0000000000..cca397c7dc
--- /dev/null
+++ b/geonode_mapstore_client/templates/geonode-mapstore-client/snippets/metadata_view.html
@@ -0,0 +1,17 @@
+<div class="gn-metadata-view">
+    <div class="gn-metadata">
+        <div class="gn-metadata-container">
+            <div class="gn-metadata-layout">
+                <div class="gn-metadata-groups">
+                    <div id="gn-metadata-title" class="gn-metadata-title">Metadata: {{resource.title}}</div>
+                    {% for group_key, metadata in metadata_groups.items %}
+                    <div class="gn-metadata-group gn-metadata-group-view">
+                        <div class="gn-metadata-group-title">{{group_key}}</div>
+                        {% include 'geonode-mapstore-client/snippets/metadata_fields.html' with metadata=metadata prefix='metadata' %}
+                    </div>
+                    {% endfor %}
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
diff --git a/geonode_mapstore_client/templates/page.html b/geonode_mapstore_client/templates/page.html
index 30e068a382..101e9f3d6f 100644
--- a/geonode_mapstore_client/templates/page.html
+++ b/geonode_mapstore_client/templates/page.html
@@ -16,7 +16,7 @@
     <body class="msgapi ms2" data-ms2-container="ms2" >
         <div class="gn-page-wrapper {% if request.user_agent.is_mobile %}gn-mobile{% else %}gn-desktop{% endif %}">
             {% include './geonode-mapstore-client/_geonode_config.html' %}
-            <div class="gn-theme gn-homepage">
+            <div class="gn-theme {% block page_class %}gn-homepage{% endblock %}">
                 {% block header %}
                     {% include './geonode-mapstore-client/snippets/header.html' %}
                 {% endblock %}
diff --git a/geonode_mapstore_client/views.py b/geonode_mapstore_client/views.py
new file mode 100644
index 0000000000..6aaa6d8a3f
--- /dev/null
+++ b/geonode_mapstore_client/views.py
@@ -0,0 +1,72 @@
+
+from django.shortcuts import render
+from django.utils.translation.trans_real import get_language_from_request
+from dateutil import parser
+
+def _parse_value(value, schema):
+    schema_type = schema.get('type')
+    format = schema.get('format')
+    if schema_type == 'string' and format in ['date-time']:
+        if type(value) == str:
+            return parser.parse(value)
+        return value
+    if schema_type == 'string':
+        if 'oneOf' in schema:
+            for option in schema.get('oneOf'):
+                if option.get('const') == value:
+                    return option.get('title')
+    return value
+
+def _parse_schema_instance(instance, schema):
+    schema_type = schema.get('type')
+    metadata = {}
+    metadata['schema'] = schema
+    if schema_type == 'object':
+        metadata['value'] = {}
+        for key in instance:
+            property_schema = None
+            if key in schema.get('properties'):
+                property_schema = schema.get('properties')[key]
+            if instance[key] and property_schema:
+                metadata['value'][key] = _parse_schema_instance(instance[key], property_schema)
+        return metadata
+    if schema_type == 'array':
+        metadata['value'] = []
+        for entry in instance:
+            if schema.get('items'):
+                metadata['value'].append(
+                    _parse_schema_instance(entry, schema.get('items'))
+                )
+        return metadata
+    metadata['value'] = _parse_value(instance, schema)
+    return metadata
+
+def metadata(request, pk, template="geonode-mapstore-client/metadata.html"):
+
+    from geonode.base.models import ResourceBase
+    from geonode.metadata.manager import metadata_manager
+
+    lang = get_language_from_request(request)[:2]
+    schema = metadata_manager.get_schema(lang)
+    resource = ResourceBase.objects.get(pk=pk)
+    schema_instance = metadata_manager.build_schema_instance(resource)
+
+    full_metadata = _parse_schema_instance(schema_instance, schema)
+    metadata = full_metadata['value']
+    metadata_groups = {}
+
+    for key in metadata:
+        if key != 'extraErrors':
+            property = metadata[key]
+            ui_options = property.get('ui:options', {})
+            group = 'General'
+            if ui_options.get('geonode-ui:group'):
+                group = ui_options.get('geonode-ui:group')
+            if group not in metadata_groups:
+                metadata_groups[group] = { }
+            metadata_groups[group][key] = property
+
+    return render(request, template, context={ "resource": resource, "metadata_groups": metadata_groups })
+
+def metadata_embed(request, pk):
+    return metadata(request, pk, template="geonode-mapstore-client/metadata_embed.html")