diff --git a/packages/editor/src/components/app-bar/index.tsx b/packages/editor/src/components/app-bar/index.tsx
index 5b10ce66..aa7b60b5 100644
--- a/packages/editor/src/components/app-bar/index.tsx
+++ b/packages/editor/src/components/app-bar/index.tsx
@@ -41,6 +41,7 @@ import IconButton from '@mui/material/IconButton';
 import { ToolbarActionType } from '../toolbar/ToolbarActionType';
 import MapInfo from '../../classes/model/map-info';
 import { useIntl } from 'react-intl';
+import MapTitle from '../action-widget/pane/map-title';
 
 interface AppBarProps {
   model: Editor;
@@ -93,18 +94,7 @@ const AppBar = ({ model, mapInfo, capability, onAction, accountConfig }: AppBarP
       visible: !capability.isHidden('appbar-title'),
     },
     {
-      render: () => (
-        <Tooltip title={mapInfo.getTitle()}>
-          <Typography
-            className="truncated"
-            variant="body1"
-            component="div"
-            sx={{ marginX: '1.5rem' }}
-          >
-            {mapInfo.getTitle()}
-          </Typography>
-        </Tooltip>
-      ),
+      render: () => <MapTitle mapInfo={mapInfo} />,
     },
     null,
     {
diff --git a/packages/editor/test/playground/map-render/js/viewmode.tsx b/packages/editor/test/playground/map-render/js/viewmode.tsx
index c0ad3b0f..97598447 100644
--- a/packages/editor/test/playground/map-render/js/viewmode.tsx
+++ b/packages/editor/test/playground/map-render/js/viewmode.tsx
@@ -40,7 +40,7 @@ const options: EditorOptions = {
 
 ReactDOM.render(
   <Editor
-    mapInfo={new MapInfoImpl('welcome', 'Develop Map Title', false)}
+    mapInfo={new MapInfoImpl(mapId, 'Develop Map Title', false)}
     options={options}
     persistenceManager={persistence}
     onAction={(action) => console.log('action called:', action)}