diff --git a/geonode_mapstore_client/client/js/components/DetailsPanel/DetailsPanel.jsx b/geonode_mapstore_client/client/js/components/DetailsPanel/DetailsPanel.jsx
index a99c261aeb..cd7c570e4d 100644
--- a/geonode_mapstore_client/client/js/components/DetailsPanel/DetailsPanel.jsx
+++ b/geonode_mapstore_client/client/js/components/DetailsPanel/DetailsPanel.jsx
@@ -299,7 +299,7 @@ function DetailsPanel({
                     </Button>
                 </div>
                 }
-                {!activeEditMode && <div className="gn-details-panel-preview">
+                {!activeEditMode && !editThumbnail && <div className="gn-details-panel-preview">
                     <div
                         className="gn-loader-placeholder"
                         style={{
@@ -312,7 +312,7 @@ function DetailsPanel({
                         }}>
                         <FaIcon name={icon} />
                     </div>
-                    {embedUrl && !editThumbnail
+                    {embedUrl
                         ? <iframe
                             key={embedUrl}
                             src={embedUrl}
@@ -323,7 +323,7 @@ function DetailsPanel({
                             }}
                             frameBorder="0"
                         />
-                        : (<ThumbnailPreview
+                        : (!embedUrl && !editThumbnail ? (<ThumbnailPreview
                             src={resource?.thumbnail_url}
                             style={{
                                 position: 'absolute',
@@ -333,6 +333,7 @@ function DetailsPanel({
                                 left: 0,
                                 backgroundColor: 'inherit'
                             }} />)
+                            : undefined )
                     }
                     {loading && <div
                         className="gn-details-panel-preview-loader"
@@ -352,109 +353,114 @@ function DetailsPanel({
                     </div>}
                 </div>}
 
-                {activeEditMode && editThumbnail && <div className="gn-details-panel-preview inediting"> <EditThumbnail onEdit={editThumbnail} image={resource?.thumbnail_url} /> </div>}
+                <div className="gn-details-panel-content">
+                    {editThumbnail && <div className="gn-details-panel-content-img">
+                        {!activeEditMode && <ThumbnailPreview src={resource?.thumbnail_url} />}
+                        {activeEditMode && <div className="gn-details-panel-preview inediting"> <EditThumbnail onEdit={editThumbnail} image={resource?.thumbnail_url} /> </div>}
+                    </div>
+                    }
 
 
-                <div className="gn-details-panel-content">
-                    <div className="gn-details-panel-title" >
+                    <div className="gn-details-panel-content-text">
+                        <div className="gn-details-panel-title" >
 
-                        {!editModeTitle && <h1>
-                            {icon && <><FaIcon name={icon} /></>}
-                            {resource?.title}
-                        </h1>
-                        }
-                        {activeEditMode && !editModeTitle && <span onClick={handleEditModeTitle} ><FaIcon name={'edit'} /></span>}
+                            {!editModeTitle && <h1>
+                                {icon && <><FaIcon name={icon} /></>}
+                                {resource?.title}
+                            </h1>
+                            }
+                            {activeEditMode && !editModeTitle && <span onClick={handleEditModeTitle} ><FaIcon name={'edit'} /></span>}
 
 
-                        {editModeTitle && <h1>
-                            <EditTitle title={resource?.title} onEdit={editTitle} />
-                            <span className="inEdit" onClick={handleEditModeTitle} ><FaIcon name={'check-circle'} /></span>
-                        </h1>
-                        }
-                        {
-                            <div className="gn-details-panel-tools">
-                                {
-                                    enableFavorite &&
+                            {editModeTitle && <h1>
+                                <EditTitle title={resource?.title} onEdit={editTitle} />
+                                <span className="inEdit" onClick={handleEditModeTitle} ><FaIcon name={'check-circle'} /></span>
+                            </h1>
+                            }
+                            {
+                                <div className="gn-details-panel-tools">
+                                    {
+                                        enableFavorite &&
                                     <Button
                                         variant="default"
                                         onClick={debounce(handleFavorite, 500)}>
                                         <FaIcon stylePrefix={favorite ? `fa` : `far`} name="star" />
                                     </Button>
-                                }
-                                {documentDownloadUrl &&
+                                    }
+                                    {documentDownloadUrl &&
                                     <Button variant="default"
                                         href={documentDownloadUrl} >
                                         <FaIcon name="download" />
                                     </Button>}
 
-                                {detailUrl && <CopyToClipboard
-                                    tooltipPosition="top"
-                                    tooltipId={
-                                        copiedResourceLink
-                                            ? 'gnhome.copiedResourceUrl'
-                                            : 'gnhome.copyResourceUrl'
+                                    {detailUrl && <CopyToClipboard
+                                        tooltipPosition="top"
+                                        tooltipId={
+                                            copiedResourceLink
+                                                ? 'gnhome.copiedResourceUrl'
+                                                : 'gnhome.copyResourceUrl'
+                                        }
+                                        text={formatResourceLinkUrl(detailUrl)}
+                                    >
+                                        <Button
+                                            variant="default"
+                                            onClick={handleCopyPermalink}>
+                                            <FaIcon name="share-alt" />
+                                        </Button>
+                                    </CopyToClipboard>
                                     }
-                                    text={formatResourceLinkUrl(detailUrl)}
-                                >
-                                    <Button
+                                    {detailUrl && !editThumbnail && <Button
                                         variant="default"
-                                        onClick={handleCopyPermalink}>
-                                        <FaIcon name="share-alt" />
-                                    </Button>
-                                </CopyToClipboard>
-                                }
-                                {detailUrl && !editThumbnail && <Button
-                                    variant="default"
-                                    href={detailUrl}
-                                    rel="noopener noreferrer">
-                                    <Message msgId={`gnhome.view${name || ''}`} />
-                                </Button>}
-                            </div>
-                        }
+                                        href={detailUrl}
+                                        rel="noopener noreferrer">
+                                        <Message msgId={`gnhome.view${name || ''}`} />
+                                    </Button>}
+                                </div>
+                            }
 
 
-                    </div>
+                        </div>
 
 
-                    {<p>
-                        {resource?.owner && <><a href={formatHref({
-                            query: {
-                                'filter{owner.username.in}': resource.owner.username
-                            }
-                        })}>{getUserName(resource.owner)}</a></>}
-                        {(resource?.date_type && resource?.date)
+                        {<p>
+                            {resource?.owner && <><a href={formatHref({
+                                query: {
+                                    'filter{owner.username.in}': resource.owner.username
+                                }
+                            })}>{getUserName(resource.owner)}</a></>}
+                            {(resource?.date_type && resource?.date)
                             && <>{' '}/{' '}{moment(resource.date).format('MMMM Do YYYY')}</>}
-                    </p>
-                    }
-                    <div className="gn-details-panel-description">
-                        {editModeAbstract && <>
-                            <EditAbstract abstract={resource?.abstract} onEdit={editAbstract} />
-                            <span className="inEdit" onClick={handleEditModeAbstract} ><FaIcon name={'check-circle'} /></span>
-
-                        </>
+                        </p>
                         }
-                        {
-                            !editModeAbstract && resource?.abstract ?
-                                <span className="gn-details-panel-text" dangerouslySetInnerHTML={{ __html: DOMPurify.sanitize(resource.abstract) }} />
-                                : null
-                        }
-                        {activeEditMode && !editModeAbstract && <span onClick={handleEditModeAbstract} ><FaIcon name={'edit'} /></span>}
-                    </div>
+                        <div className="gn-details-panel-description">
+                            {editModeAbstract && <>
+                                <EditAbstract abstract={resource?.abstract} onEdit={editAbstract} />
+                                <span className="inEdit" onClick={handleEditModeAbstract} ><FaIcon name={'check-circle'} /></span>
 
+                            </>
+                            }
+                            {
+                                !editModeAbstract && resource?.abstract ?
+                                    <span className="gn-details-panel-text" dangerouslySetInnerHTML={{ __html: DOMPurify.sanitize(resource.abstract) }} />
+                                    : null
+                            }
+                            {activeEditMode && !editModeAbstract && <span onClick={handleEditModeAbstract} ><FaIcon name={'edit'} /></span>}
+                        </div>
+
+                        <p>
+                            {resource?.category?.identifier && <div>
+                                <Message msgId="gnhome.category" />:{' '}
+                                <a href={formatHref({
+                                    query: {
+                                        'filter{category.identifier.in}': resource.category.identifier
+                                    }
+                                })}>{resource.category.identifier}</a>
+                            </div>}
+                        </p>
 
-                    {editTitle && <Tabs itemsTab={itemsTab} />}
-                    <p>
-                        {resource?.category?.identifier && <div>
-                            <Message msgId="gnhome.category" />:{' '}
-                            <a href={formatHref({
-                                query: {
-                                    'filter{category.identifier.in}': resource.category.identifier
-                                }
-                            })}>{resource.category.identifier}</a>
-                        </div>}
-                    </p>
-
+                    </div>
                 </div>
+                {editTitle && <div className="gn-details-panel-info"><Tabs itemsTab={itemsTab} /></div>}
             </section>
         </div>
     );
diff --git a/geonode_mapstore_client/client/themes/geonode/less/_details-panel.less b/geonode_mapstore_client/client/themes/geonode/less/_details-panel.less
index 3f1ae10d11..8ce4d37005 100644
--- a/geonode_mapstore_client/client/themes/geonode/less/_details-panel.less
+++ b/geonode_mapstore_client/client/themes/geonode/less/_details-panel.less
@@ -29,7 +29,7 @@
             .background-color-var(@theme-vars[placeholder-bg]);
         }
     }
-    .gn-details-panel-content {
+    .gn-details-panel-info {
         .DList-containner{
             .DList-cell--medium {
                 .background-color-var(@theme-vars[main-variant-bg]);
@@ -94,11 +94,8 @@
             margin-right: 0.5rem;
         }
         &.imagepreview {
-            padding: 0rem 5rem;
+            width: 250px;
             z-index: 1;
-            .dropzone-thumbnail-container {
-                height: 340px;
-            }
             .icon-image-preview {
                 position: absolute;
                 top: 50%;
@@ -130,22 +127,28 @@
         padding-bottom:0
     }
 }
-
-.gn-details-panel-content {
-    padding: 1rem;
-    font-size: 0.9em;
-    .fa-edit, .fa-check-circle{
-        font-size: 0.9rem;
-        margin: 0.2em 0 0 0;
-    }
+.gn-details-panel-content-text {
+    flex: 1;
+}
+.gn-details-panel-info{
     .tabs-info {
         margin-top: 2em;
         .tab-content{
             padding: 2em;
         }
     }
+}
+.gn-details-panel-content, .gn-details-panel-info {
+    padding: 1rem;
+    font-size: 0.9em;
+    display: flex;
+    flex: 1 1 auto;
+    .fa-edit, .fa-check-circle{
+        font-size: 0.9rem;
+        margin: 0.2em 0 0 0;
+    }
     .DList-containner {
-        margin: 0 0 2em 0;
+        margin: 0 0 2.8em 0;
     .DList {
         display: flex;
         flex-wrap: wrap;
@@ -174,6 +177,14 @@
 
 }
 
+.gn-details-panel-content-img {
+    margin: 0 1.2em 0 0;
+    img {
+        width: 250px;
+        height: auto;
+        object-fit: cover;
+    }
+}
 .gn-details-panel-title {
     display: flex;
     margin-bottom: 1rem;
@@ -194,7 +205,7 @@
         justify-content: flex-end;
         align-items: center;
         button, a{
-            padding: 0.1rem 0 0 0.5rem;
+            padding: 0 0 0 0.5rem;
         }
     }
     .inEdit{