diff --git a/packages/main/src/components/MessageView/MessageView.mdx b/packages/main/src/components/MessageView/MessageView.mdx
index 84168c6c169..03c4ab1f57a 100644
--- a/packages/main/src/components/MessageView/MessageView.mdx
+++ b/packages/main/src/components/MessageView/MessageView.mdx
@@ -47,15 +47,18 @@ to get back to the list view.
 
 Sample Code: _(Button and Dialog opening are omitted here)_
 
-```jsx
+```tsx
 function MyComponent() {
-  const messageViewRef = useRef(null);
+  const messageViewRef = useRef<MessageViewDomRef>(null);
   const [isOnDetailsPage, setIsOnDetailsPage] = useState(false);
   return (
     <Dialog
       resizable
       style={{ width: '500px' }}
       className="modal-without-padding"
+      onClose={() => {
+        messageViewRef.current.navigateBack();
+      }}
       header={
         <Bar
           startContent={
diff --git a/packages/main/src/components/MessageView/MessageView.stories.tsx b/packages/main/src/components/MessageView/MessageView.stories.tsx
index f7ea2cece4c..d52c9640a40 100644
--- a/packages/main/src/components/MessageView/MessageView.stories.tsx
+++ b/packages/main/src/components/MessageView/MessageView.stories.tsx
@@ -14,6 +14,7 @@ import { Title } from '../../webComponents/Title/index.js';
 import { FlexBox } from '../FlexBox/index.js';
 import { MessageViewButton } from '../MessageViewButton/index.js';
 import { MessageItem } from './MessageItem.js';
+import type { MessageViewDomRef } from './index.js';
 import { MessageView } from './index.js';
 
 // TODO: check docs for outdated info
@@ -88,7 +89,7 @@ export const MessageViewInDialog: Story = {
   name: 'MessageView in Dialog',
   render(args) {
     const [open, setOpen] = useState(false);
-    const messageViewRef = useRef(null);
+    const messageViewRef = useRef<MessageViewDomRef>(null);
     const [isOnDetailsPage, setIsOnDetailsPage] = useState(false);
     return (
       <>
@@ -106,6 +107,7 @@ export const MessageViewInDialog: Story = {
           open={open}
           onClose={() => {
             setOpen(false);
+            messageViewRef.current.navigateBack();
           }}
           header={
             <Bar
@@ -165,7 +167,7 @@ export const WithMessageViewButton: Story = {
   name: 'with MessageViewButton & Popover',
   render() {
     const ref = useRef(null);
-    const messageViewRef = useRef(null);
+    const messageViewRef = useRef<MessageViewDomRef>(null);
     const [isOnDetailsPage, setIsOnDetailsPage] = useState(false);
     const [open, setOpen] = useState(false);
     const numberOfItems = {
@@ -190,6 +192,7 @@ export const WithMessageViewButton: Story = {
           headerText="Messages"
           className="contentPartNoPadding headerPartNoPadding"
           onClose={() => {
+            messageViewRef.current.navigateBack();
             setOpen(false);
           }}
           header={