diff --git a/apps/meteor/client/views/room/MessageList/components/MessageContent.tsx b/apps/meteor/client/views/room/MessageList/components/MessageContent.tsx
index cfb03baceb4b..fb62a061193b 100644
--- a/apps/meteor/client/views/room/MessageList/components/MessageContent.tsx
+++ b/apps/meteor/client/views/room/MessageList/components/MessageContent.tsx
@@ -20,6 +20,7 @@ import MessageContentBody from './MessageContentBody';
 import ReactionsList from './MessageReactionsList';
 import ReadReceipt from './MessageReadReceipt';
 import PreviewList from './UrlPreview';
+import VideoConfMessages from './VideoConfMessage/VideoConfMessages';
 
 const MessageContent: FC<{ message: IMessage; sequential: boolean; subscription?: ISubscription; id: IMessage['_id'] }> = ({
 	message,
@@ -57,6 +58,7 @@ const MessageContent: FC<{ message: IMessage; sequential: boolean; subscription?
 			)}
 			{message.blocks && (
 				<MessageBlock fixedWidth>
+					{message?.blocks?.map((block, index) => block.appId === 'videoconf-core' && <VideoConfMessages key={index} />)}
 					<MessageBlockUiKit mid={message._id} blocks={message.blocks} appId rid={message.rid} />
 				</MessageBlock>
 			)}
diff --git a/apps/meteor/client/views/room/MessageList/components/VideoConfMessage/VideoConfMessages.tsx b/apps/meteor/client/views/room/MessageList/components/VideoConfMessage/VideoConfMessages.tsx
new file mode 100644
index 000000000000..f50479f18b62
--- /dev/null
+++ b/apps/meteor/client/views/room/MessageList/components/VideoConfMessage/VideoConfMessages.tsx
@@ -0,0 +1,24 @@
+import { Button } from '@rocket.chat/fuselage';
+import { VideoConfMessage, VideoConfMessageIcon, VideoConfMessageRow, VideoConfMessageText } from '@rocket.chat/ui-video-conf';
+import React, { ReactElement } from 'react';
+
+const VideoConfMessages = (): ReactElement => {
+	console.log('videconfmessage');
+
+	return (
+		<VideoConfMessage>
+			<VideoConfMessageRow>
+				<VideoConfMessageIcon name='phone-off' backgroundColor='neutral-400' color='neutral-700' />
+				<VideoConfMessageText fontScale='c2'>Call ended</VideoConfMessageText>
+			</VideoConfMessageRow>
+			<VideoConfMessageRow backgroundColor='neutral-100'>
+				<Button small secondary>
+					Call back
+				</Button>
+				<VideoConfMessageText>Call was not answered</VideoConfMessageText>
+			</VideoConfMessageRow>
+		</VideoConfMessage>
+	);
+};
+
+export default VideoConfMessages;
diff --git a/packages/ui-video-conf/.storybook/main.js b/packages/ui-video-conf/.storybook/main.js
new file mode 100644
index 000000000000..c96c2182558c
--- /dev/null
+++ b/packages/ui-video-conf/.storybook/main.js
@@ -0,0 +1,12 @@
+module.exports = {
+  "stories": [
+    "../src/**/*.stories.mdx",
+    "../src/**/*.stories.@(js|jsx|ts|tsx)"
+  ],
+  "addons": [
+    "@storybook/addon-links",
+    "@storybook/addon-essentials",
+    "@storybook/addon-interactions"
+  ],
+  "framework": "@storybook/react"
+}
\ No newline at end of file
diff --git a/packages/ui-video-conf/.storybook/main.ts b/packages/ui-video-conf/.storybook/main.ts
deleted file mode 100644
index 554b7c71c232..000000000000
--- a/packages/ui-video-conf/.storybook/main.ts
+++ /dev/null
@@ -1,7 +0,0 @@
-module.exports = {
-  addons: ['@storybook/addon-essentials', 'storybook-dark-mode/register'],
-  stories: ['../src/**/*.stories.tsx', '../src/**/stories.tsx'],
-  features: {
-    postcss: false,
-  },
-};
diff --git a/packages/ui-video-conf/.storybook/preview.js b/packages/ui-video-conf/.storybook/preview.js
new file mode 100644
index 000000000000..abd704f79510
--- /dev/null
+++ b/packages/ui-video-conf/.storybook/preview.js
@@ -0,0 +1,25 @@
+import '../../../apps/meteor/app/theme/client/main.css';
+import 'highlight.js/styles/github.css';
+
+export const parameters = {
+  actions: { argTypesRegex: "^on[A-Z].*" },
+  controls: {
+    matchers: {
+      color: /(background|color)$/i,
+      date: /Date$/,
+    },
+  },
+}
+
+export const decorators = [
+	(Story) => (
+		<div className="rc-old">
+			<style>{`
+				body {
+					background-color: white;
+				}
+			`}</style>
+			<Story />
+		</div>
+	)
+];
diff --git a/packages/ui-video-conf/src/VideoConfMessage/VideoConfMessage.stories.tsx b/packages/ui-video-conf/src/VideoConfMessage/VideoConfMessage.stories.tsx
index 38eaa0712466..1fa7106243e0 100644
--- a/packages/ui-video-conf/src/VideoConfMessage/VideoConfMessage.stories.tsx
+++ b/packages/ui-video-conf/src/VideoConfMessage/VideoConfMessage.stories.tsx
@@ -4,6 +4,7 @@ import type { ReactElement } from 'react';
 
 import '@rocket.chat/icons/dist/rocketchat.css';
 import { VideoConfMessage, VideoConfMessageIcon, VideoConfMessageRow, VideoConfMessageText } from '.';
+import VideoConfMessageSkeleton from './VideoConfMessageSkeleton';
 
 export default {
 	title: 'Components/VideoConfMessage',
@@ -116,3 +117,5 @@ export const CallEnded: ComponentStory<typeof VideoConfMessage> = () => (
 		</VideoConfMessageRow>
 	</VideoConfMessage>
 );
+
+export const Loading: ComponentStory<typeof VideoConfMessage> = () => <VideoConfMessageSkeleton />;
diff --git a/packages/ui-video-conf/src/VideoConfMessage/VideoConfMessageSkeleton.tsx b/packages/ui-video-conf/src/VideoConfMessage/VideoConfMessageSkeleton.tsx
new file mode 100644
index 000000000000..ae82b87584e9
--- /dev/null
+++ b/packages/ui-video-conf/src/VideoConfMessage/VideoConfMessageSkeleton.tsx
@@ -0,0 +1,18 @@
+import { Skeleton } from '@rocket.chat/fuselage';
+import type { ReactElement } from 'react';
+
+import VideoConfMessage from './VideoConfMessage';
+import VideoConfMessageRow from './VideoConfMessageRow';
+
+const VideoConfMessageSkeleton = (): ReactElement => (
+	<VideoConfMessage>
+		<VideoConfMessageRow>
+			<Skeleton width='full' />
+		</VideoConfMessageRow>
+		<VideoConfMessageRow backgroundColor='neutral-100'>
+			<Skeleton width='full' />
+		</VideoConfMessageRow>
+	</VideoConfMessage>
+);
+
+export default VideoConfMessageSkeleton;