diff --git a/app/action-links/client/index.js b/app/action-links/client/index.js
index c09886562a2d..89bf0fccfb2c 100644
--- a/app/action-links/client/index.js
+++ b/app/action-links/client/index.js
@@ -1,6 +1,4 @@
 import { actionLinks } from './lib/actionLinks';
-import './init';
-import './stylesheets/actionLinks.css';
 
 export {
 	actionLinks,
diff --git a/app/action-links/client/init.js b/app/action-links/client/init.js
deleted file mode 100644
index f21776e7c2c0..000000000000
--- a/app/action-links/client/init.js
+++ /dev/null
@@ -1,33 +0,0 @@
-import { Blaze } from 'meteor/blaze';
-import { Template } from 'meteor/templating';
-
-import { handleError } from '../../utils/client';
-import { fireGlobalEvent, Layout } from '../../ui-utils/client';
-import { messageArgs } from '../../ui-utils/client/lib/messageArgs';
-import { actionLinks } from './lib/actionLinks';
-
-
-Template.roomOld.events({
-	'click [data-actionlink]'(event, instance) {
-		event.preventDefault();
-		event.stopPropagation();
-
-		const data = Blaze.getData(event.currentTarget);
-		const { msg } = messageArgs(data);
-		if (Layout.isEmbedded()) {
-			return fireGlobalEvent('click-action-link', {
-				actionlink: $(event.currentTarget).data('actionlink'),
-				value: msg._id,
-				message: msg,
-			});
-		}
-
-		if (msg._id) {
-			actionLinks.run($(event.currentTarget).data('actionlink'), msg._id, instance, (err) => {
-				if (err) {
-					handleError(err);
-				}
-			});
-		}
-	},
-});
diff --git a/app/action-links/client/stylesheets/actionLinks.css b/app/action-links/client/stylesheets/actionLinks.css
deleted file mode 100644
index 1b5a9977c5f2..000000000000
--- a/app/action-links/client/stylesheets/actionLinks.css
+++ /dev/null
@@ -1,32 +0,0 @@
-.message {
-	& .actionLinks {
-		margin-top: 4px;
-		margin-bottom: 4px;
-		padding: 0;
-
-		text-align: center;
-
-		& li {
-			position: relative;
-
-			display: inline;
-
-			padding-right: 2px;
-
-			list-style: none;
-
-			cursor: pointer;
-
-			& .action-link {
-				margin: 0 2px;
-				padding: 5px;
-
-				border-radius: 7px;
-			}
-		}
-
-		& li:last-child::after {
-			content: none;
-		}
-	}
-}
diff --git a/app/ui-message/client/message.html b/app/ui-message/client/message.html
index 57f2f8bb16f1..9d6d752e7591 100644
--- a/app/ui-message/client/message.html
+++ b/app/ui-message/client/message.html
@@ -149,22 +149,7 @@
 				</div>
 			{{/unless}}
 			{{#unless hideActionLinks}}
-			<ul class="actionLinks">
-				{{#each actionLink in actionLinks}}
-					<li class="color-primary-action-color">
-						<span class="rc-button rc-button--primary rc-button--small" style="display: inline-block; line-height: 1.75rem" data-actionlink="{{actionLink.id}}">
-							{{#if actionLink.icon}}
-								<i class="{{actionLink.icon}}"></i>
-							{{/if}}
-							{{#if actionLink.i18nLabel}}
-								{{_ actionLink.i18nLabel}}
-							{{else}}
-								{{actionLink.label}}
-							{{/if}}
-						</span>
-					</li>
-				{{/each}}
-			</ul>
+				{{> MessageActions mid=msg._id actions=actionLinks runAction=(actions.runAction msg)}}
 			{{/unless}}
 			{{#unless hideReactions}}
 			<ul class="reactions">
diff --git a/app/ui-utils/client/lib/messageContext.js b/app/ui-utils/client/lib/messageContext.js
index ba9bef42ede1..d10e7cd8ccbf 100644
--- a/app/ui-utils/client/lib/messageContext.js
+++ b/app/ui-utils/client/lib/messageContext.js
@@ -5,8 +5,11 @@ import { FlowRouter } from 'meteor/kadira:flow-router';
 import { Subscriptions, Rooms, Users } from '../../../models/client';
 import { hasPermission } from '../../../authorization/client';
 import { settings } from '../../../settings/client';
-import { getUserPreference, roomTypes } from '../../../utils/client';
+import { getUserPreference, roomTypes, handleError } from '../../../utils/client';
 import { AutoTranslate } from '../../../autotranslate/client';
+import { Layout } from './Layout';
+import { fireGlobalEvent } from './fireGlobalEvent';
+import { actionLinks } from '../../../action-links/client';
 
 
 const fields = { name: 1, username: 1, 'settings.preferences.showMessageInMainThread': 1, 'settings.preferences.autoImageLoad': 1, 'settings.preferences.saveMobileBandwidth': 1, 'settings.preferences.collapseMediaByDefault': 1, 'settings.preferences.hideRoles': 1 };
@@ -14,7 +17,7 @@ const fields = { name: 1, username: 1, 'settings.preferences.showMessageInMainTh
 export function messageContext({ rid } = Template.instance()) {
 	const uid = Meteor.userId();
 	const user = Users.findOne({ _id: uid }, { fields }) || {};
-
+	const instace = Template.instance();
 	const openThread = (e) => {
 		const { rid, mid, tmid } = e.currentTarget.dataset;
 		const room = Rooms.findOne({ _id: rid });
@@ -28,6 +31,22 @@ export function messageContext({ rid } = Template.instance()) {
 		});
 	};
 
+	const runAction = Layout.isEmbedded() ? (msg, e) => {
+		const { actionlink } = e.currentTarget.dataset;
+		return fireGlobalEvent('click-action-link', {
+			actionlink,
+			value: msg._id,
+			message: msg,
+		});
+	} : (msg, e) => {
+		const { actionlink } = e.currentTarget.dataset;
+		actionLinks.run(actionlink, msg._id, instace, (err) => {
+			if (err) {
+				handleError(err);
+			}
+		});
+	};
+
 	const openDiscussion = (e) => {
 		e.preventDefault();
 		const { drid } = e.currentTarget.dataset;
@@ -62,6 +81,9 @@ export function messageContext({ rid } = Template.instance()) {
 			openThread() {
 				return openThread;
 			},
+			runAction(msg) {
+				return () => (e) => runAction(msg, e);
+			},
 			openDiscussion() {
 				return openDiscussion;
 			},
diff --git a/app/videobridge/client/views/videoFlexTab.js b/app/videobridge/client/views/videoFlexTab.js
index 30fd8fbbf120..4d5cf1699906 100644
--- a/app/videobridge/client/views/videoFlexTab.js
+++ b/app/videobridge/client/views/videoFlexTab.js
@@ -155,6 +155,14 @@ Template.videoFlexTab.onRendered(function() {
 				});
 			}
 
+			await new Promise((resolve) => {
+				if (typeof JitsiMeetExternalAPI === 'undefined') {
+					const prefix = __meteor_runtime_config__.ROOT_URL_PATH_PREFIX || '';
+					return $.getScript(`${ prefix }/packages/rocketchat_videobridge/client/public/external_api.js`, resolve);
+				}
+				resolve();
+			});
+
 			if (typeof JitsiMeetExternalAPI !== 'undefined') {
 				// Keep it from showing duplicates when re-evaluated on variable change.
 				const name = Users.findOne(Meteor.userId(), { fields: { name: 1 } });
@@ -162,6 +170,7 @@ Template.videoFlexTab.onRendered(function() {
 					Tracker.nonreactive(async () => {
 						await start();
 
+
 						this.api = new JitsiMeetExternalAPI(domain, jitsiRoom, width, height, this.$('.video-container').get(0), configOverwrite, interfaceConfigOverwrite, noSsl, accessToken);
 
 						/*
diff --git a/client/adapters.js b/client/adapters.js
index 83dc5cdc31e8..31980a2227fa 100644
--- a/client/adapters.js
+++ b/client/adapters.js
@@ -1,5 +1,6 @@
 import { createTemplateForComponent } from './reactAdapters';
 
+createTemplateForComponent('MessageActions', () => import('./components/Message/Actions'));
 createTemplateForComponent('reactAttachments', () => import('./components/Message/Attachments'));
 createTemplateForComponent('ThreadMetric', () => import('./components/Message/Metrics/Thread'));
 createTemplateForComponent('DiscussionMetric', () => import('./components/Message/Metrics/Discussion'));
diff --git a/client/components/Message/Actions/index.tsx b/client/components/Message/Actions/index.tsx
new file mode 100644
index 000000000000..332fcbd2ed35
--- /dev/null
+++ b/client/components/Message/Actions/index.tsx
@@ -0,0 +1,26 @@
+import React, { FC } from 'react';
+import { IconProps, Icon, Button, ButtonGroup } from '@rocket.chat/fuselage';
+
+import { useTranslation } from '../../../contexts/TranslationContext';
+import { Content } from '..';
+
+type RunAction = () => void;
+
+type ActionOptions = {
+	mid: string;
+	id: string;
+	icon: IconProps['name'];
+	i18nLabel?: string;
+	label?: string;
+	runAction?: RunAction;
+};
+
+export const Action: FC<ActionOptions> = ({ id, icon, i18nLabel, label, mid, runAction }) => {
+	const t = useTranslation();
+
+	return <Button id={id} data-mid={mid} data-actionlink={id} onClick={runAction} primary small>{icon && <Icon name={icon.replace('icon-', '')}/>}{i18nLabel ? t(i18nLabel) : label }</Button>;
+};
+
+const Actions: FC<{ actions: Array<ActionOptions>; runAction: RunAction; mid: string }> = ({ actions, runAction }) => <Content width='full' justifyContent='center'><ButtonGroup align='center'>{actions.map((action) => <Action runAction={runAction} key={action.id} {...action}/>)}</ButtonGroup></Content>;
+
+export default Actions;