diff --git a/packages/scene-composer/src/components/three-fiber/DataOverlayComponent/DataOverlayComponent.tsx b/packages/scene-composer/src/components/three-fiber/DataOverlayComponent/DataOverlayComponent.tsx
index 4f036784c6..28f1b99a99 100644
--- a/packages/scene-composer/src/components/three-fiber/DataOverlayComponent/DataOverlayComponent.tsx
+++ b/packages/scene-composer/src/components/three-fiber/DataOverlayComponent/DataOverlayComponent.tsx
@@ -9,6 +9,7 @@ import { IAnchorComponentInternal, IDataOverlayComponentInternal } from '../../.
import { KnownComponentType } from '../../../interfaces';
import { DataOverlayContainer } from './DataOverlayContainer';
+import { Component } from '../../../models/SceneModels';
export interface DataOverlayComponentProps {
node: ISceneNodeInternal;
@@ -42,6 +43,8 @@ export const DataOverlayComponent = ({ node, component }: DataOverlayComponentPr
// TODO: add position after finding proper way to always display overlay right above tag
position={getOffsetFromTag()}
style={{
+ // top: extra space for the arrow if overlay panel type
+ top: component.subType == Component.DataOverlaySubType.OverlayPanel ? '-14px' : 'auto',
transform: 'translate3d(-50%,-100%,0)', // make the center of 3D transform the middle of bottom edge
}}
>
diff --git a/packages/scene-composer/src/components/three-fiber/DataOverlayComponent/DataOverlayContainer.tsx b/packages/scene-composer/src/components/three-fiber/DataOverlayComponent/DataOverlayContainer.tsx
index 6ad750d2fd..85de1f9e4e 100644
--- a/packages/scene-composer/src/components/three-fiber/DataOverlayComponent/DataOverlayContainer.tsx
+++ b/packages/scene-composer/src/components/three-fiber/DataOverlayComponent/DataOverlayContainer.tsx
@@ -90,14 +90,13 @@ export const DataOverlayContainer = ({ component, node }: DataOverlayContainerPr
)}