diff --git a/bundles/framework/publisher2/view/MapLayers/MapLayers.jsx b/bundles/framework/publisher2/view/MapLayers/MapLayers.jsx
index 5b13cd6262..e82f0fc8e1 100644
--- a/bundles/framework/publisher2/view/MapLayers/MapLayers.jsx
+++ b/bundles/framework/publisher2/view/MapLayers/MapLayers.jsx
@@ -32,7 +32,6 @@ const LayerTitle = styled('span')`
 const LayerContainer = styled('div')`
     display: flex;
     flex-direction: column;
-    margin-top: 20px;
 `;
 
 export const MapLayers = ({ state, controller }) => {
@@ -46,49 +45,52 @@ export const MapLayers = ({ state, controller }) => {
                 <PublisherToolsList state={state} controller={controller} />
             </Card>
             {layerListPluginEnabled && (
+                <Card size='small' title={<Message messageKey='BasicView.mapLayers.baseLayers' />}>
+                    <LayerContainer>
+                        {baseLayers.map((layer) => {
+                            const disabled = !layer.isVisible();
+                            return (
+                                <LayerBox key={layer.getId()} disabled={disabled}>
+                                    <LayerTitle>{layer.getName()}</LayerTitle>
+                                    {!disabled && (
+                                        <IconButton
+                                            icon={<DownCircleOutlined />}
+                                            onClick={() => controller.removeBaseLayer(layer)}
+                                        />
+                                    )}
+                                </LayerBox>
+                            )
+                        })}
+                    </LayerContainer>
+                    {layerListPluginEnabled && baseLayers?.length < 1 && (
+                        <Message messageKey='BasicView.mapLayers.noBaseLayers' />
+                    )}
+                </Card>
+            )}
+            <Card size='small' title={<Message messageKey='BasicView.mapLayers.otherLayers' />}>
                 <LayerContainer>
-                    <h3><Message messageKey='BasicView.mapLayers.baseLayers' /></h3>
-                    {baseLayers.map((layer) => {
+                    <div className='ant-card-head-title'></div>
+                    {layers.map((layer) => {
                         const disabled = !layer.isVisible();
                         return (
                             <LayerBox key={layer.getId()} disabled={disabled}>
                                 <LayerTitle>{layer.getName()}</LayerTitle>
-                                {!disabled && (
-                                    <IconButton
-                                        icon={<DownCircleOutlined />}
-                                        onClick={() => controller.removeBaseLayer(layer)}
-                                    />
+                                {!disabled && layerListPluginEnabled && (
+                                    <Tooltip getPopupContainer={(triggerNode) => triggerNode.parentElement} title={<Message messageKey='BasicView.maptools.layerselection.selectAsBaselayer' />}>
+                                        <IconButton
+                                            icon={<UpCircleOutlined />}
+                                            onClick={() => controller.addBaseLayer(layer)}
+                                        />
+                                    </Tooltip>
                                 )}
                             </LayerBox>
                         )
                     })}
                 </LayerContainer>
-            )}
-            {layerListPluginEnabled && baseLayers?.length < 1 && (
-                <Message messageKey='BasicView.mapLayers.noBaseLayers' />
-            )}
-            <LayerContainer>
-                <h3><Message messageKey='BasicView.mapLayers.otherLayers' /></h3>
-                {layers.map((layer) => {
-                    const disabled = !layer.isVisible();
-                    return (
-                        <LayerBox key={layer.getId()} disabled={disabled}>
-                            <LayerTitle>{layer.getName()}</LayerTitle>
-                            {!disabled && layerListPluginEnabled && (
-                                <Tooltip getPopupContainer={(triggerNode) => triggerNode.parentElement} title={<Message messageKey='BasicView.maptools.layerselection.selectAsBaselayer' />}>
-                                    <IconButton
-                                        icon={<UpCircleOutlined />}
-                                        onClick={() => controller.addBaseLayer(layer)}
-                                    />
-                                </Tooltip>
-                            )}
-                        </LayerBox>
-                    )
-                })}
-            </LayerContainer>
-            {layers?.length < 1 && (
-                <Message messageKey='BasicView.mapLayers.noLayers' />
-            )}
+                {layers?.length < 1 && (
+                    <Message messageKey='BasicView.mapLayers.noLayers' />
+                )}
+            </Card>
             <ButtonContainer>
                 <Button onClick={() => controller.openSelectedLayerList()}>
                     <Message messageKey='BasicView.mapLayers.layersDisplay' />
diff --git a/bundles/framework/publisher2/view/PanelMapLayers.js b/bundles/framework/publisher2/view/PanelMapLayers.js
index 22349dcd6b..c793dcb55e 100755
--- a/bundles/framework/publisher2/view/PanelMapLayers.js
+++ b/bundles/framework/publisher2/view/PanelMapLayers.js
@@ -1,5 +1,5 @@
 import React from 'react';
-import { LocaleProvider } from 'oskari-ui/util';
+import { ThemeProvider, LocaleProvider } from 'oskari-ui/util';
 import { MapLayers } from './MapLayers/MapLayers';
 import ReactDOM from 'react-dom';
 import { MapLayersHandler } from '../handler/MapLayersHandler';
@@ -189,12 +189,14 @@ Oskari.clazz.define('Oskari.mapframework.bundle.publisher2.view.PanelMapLayers',
             const contentPanel = this.panel.getContainer();
 
             ReactDOM.render(
-                <LocaleProvider value={{ bundleKey: 'Publisher2' }}>
-                    <MapLayers
-                        state={this.handler.getState()}
-                        controller={this.handler.getController()}
-                    />
-                </LocaleProvider>,
+                <ThemeProvider>
+                    <LocaleProvider value={{ bundleKey: 'Publisher2' }}>
+                        <MapLayers
+                            state={this.handler.getState()}
+                            controller={this.handler.getController()}
+                        />
+                    </LocaleProvider>
+                </ThemeProvider>,
                 contentPanel[0]
             );
         },
diff --git a/bundles/framework/publisher2/view/PanelRpc.js b/bundles/framework/publisher2/view/PanelRpc.js
index bb1713c82f..a52c07e97b 100644
--- a/bundles/framework/publisher2/view/PanelRpc.js
+++ b/bundles/framework/publisher2/view/PanelRpc.js
@@ -2,7 +2,7 @@ import React from 'react';
 import ReactDOM from 'react-dom';
 import { ToolPanelHandler } from '../handler/ToolPanelHandler';
 import { PublisherToolsList } from './form/PublisherToolsList';
-import { LocaleProvider } from 'oskari-ui/util';
+import { ThemeProvider, LocaleProvider } from 'oskari-ui/util';
 
 /**
  * @class Oskari.mapframework.bundle.publisher.view.PanelRpc
@@ -100,12 +100,14 @@ Oskari.clazz.define('Oskari.mapframework.bundle.publisher2.view.PanelRpc',
             }
             const contentPanel = this.panel.getContainer();
             ReactDOM.render(
-                <LocaleProvider value={{ bundleKey: 'Publisher2' }}>
-                    <PublisherToolsList
-                        state={this.handler.getState()}
-                        controller={this.handler.getController()}
-                    />
-                </LocaleProvider>,
+                <ThemeProvider>
+                    <LocaleProvider value={{ bundleKey: 'Publisher2' }}>
+                        <PublisherToolsList
+                            state={this.handler.getState()}
+                            controller={this.handler.getController()}
+                        />
+                    </LocaleProvider>
+                </ThemeProvider>,
                 contentPanel[0]
             );
         }