diff --git a/packages/react/src/components/ChatBody/ChatBody.js b/packages/react/src/components/ChatBody/ChatBody.js
index a13a472f2..2899ecfdb 100644
--- a/packages/react/src/components/ChatBody/ChatBody.js
+++ b/packages/react/src/components/ChatBody/ChatBody.js
@@ -136,18 +136,21 @@ const ChatBody = ({
     setViewData(null);
   };
 
-  const onModalSubmit = useCallback(async (data, value) => {
-    console.log(data);
-    // const { actionId, value, blockId, appId, viewId } = data;
-    // await RCInstance?.triggerBlockAction({
-    //   rid: RCInstance.rid,
-    //   actionId,
-    //   value,
-    //   blockId,
-    //   appId,
-    //   viewId,
-    // });
-  });
+  const onModalSubmit = useCallback(
+    async (data) => {
+      console.log(data);
+      const { actionId, value, blockId, appId, viewId } = data;
+      await RCInstance?.triggerBlockAction({
+        rid: RCInstance.rid,
+        actionId,
+        value,
+        blockId,
+        appId,
+        viewId,
+      });
+    },
+    [RCInstance]
+  );
 
   useEffect(() => {
     RCInstance.auth.onAuthChange((user) => {
diff --git a/packages/react/src/components/Menu/Menu.js b/packages/react/src/components/Menu/Menu.js
index e544228ba..9a1811634 100644
--- a/packages/react/src/components/Menu/Menu.js
+++ b/packages/react/src/components/Menu/Menu.js
@@ -31,6 +31,7 @@ const Menu = ({
   className = '',
   style = {},
   anchor = 'right bottom',
+  isToolTip = true,
 }) => {
   const theme = useTheme();
   const shadowCss = css`
@@ -84,10 +85,14 @@ const Menu = ({
       className={appendClassNames('ec-menu-wrapper', wrapperClasses)}
       style={wrapperStyles}
     >
-      <Tooltip text="Options" position="bottom">
-        {' '}
+      {isToolTip ? (
+        <Tooltip text="Options" position="bottom">
+          {' '}
+          <ActionButton ghost icon="kebab" onClick={() => setOpen(!isOpen)} />
+        </Tooltip>
+      ) : (
         <ActionButton ghost icon="kebab" onClick={() => setOpen(!isOpen)} />
-      </Tooltip>
+      )}
       {isOpen ? (
         <Box
           css={[MenuCss, shadowCss]}
diff --git a/packages/react/src/components/uiKit/blocks/ModalBlock.js b/packages/react/src/components/uiKit/blocks/ModalBlock.js
index 5776ce452..e76aeb0bf 100644
--- a/packages/react/src/components/uiKit/blocks/ModalBlock.js
+++ b/packages/react/src/components/uiKit/blocks/ModalBlock.js
@@ -37,6 +37,7 @@ const focusableElementsStringInvalid = `
 function ModalBlock({ view, errors, onSubmit, onClose, onCancel }) {
   const id = `modal_id_${useUniqueId()}`;
   const ref = useRef();
+  console.log(view);
 
   // Auto focus
   useEffect(() => {
diff --git a/packages/react/src/components/uiKit/blocks/UiKitModal.js b/packages/react/src/components/uiKit/blocks/UiKitModal.js
index 7a3929bf7..33a90b004 100644
--- a/packages/react/src/components/uiKit/blocks/UiKitModal.js
+++ b/packages/react/src/components/uiKit/blocks/UiKitModal.js
@@ -1,164 +1,166 @@
-/* eslint-disable react/jsx-no-undef */
-/* eslint-disable import/extensions */
-/* eslint-disable import/no-unresolved */
-/* eslint-disable no-shadow */
-/* eslint-disable react/jsx-no-constructed-context-values */
-import React from 'react';
-import {
-  useDebouncedCallback,
-  useMutableCallback,
-} from '@rocket.chat/fuselage-hooks';
-import { kitContext } from '../contexts/kitContext';
-
-import * as ActionManager from '../../../../app/ui-message/client/ActionManager';
-import { detectEmoji } from '../../../lib/utils/detectEmoji';
-import ModalBlock from './ModalBlock';
-import { useActionManagerState } from './hooks/useActionManagerState';
-import { useValues } from './hooks/useValues';
-
-const UiKitModal = (props) => {
-  const state = useActionManagerState(props);
-
-  const { appId, viewId, mid: _mid, errors, view } = state;
-
-  const [values, updateValues] = useValues(view.blocks);
-
-  const groupStateByBlockId = (values) =>
-    Object.entries(values).reduce((obj, [key, { blockId, value }]) => {
-      obj[blockId] = obj[blockId] || {};
-      obj[blockId][key] = value;
-
-      return obj;
-    }, {});
-
-  const prevent = (e) => {
-    if (e) {
-      (e.nativeEvent || e).stopImmediatePropagation();
-      e.stopPropagation();
-      e.preventDefault();
-    }
-  };
-
-  const debouncedBlockAction = useDebouncedCallback(
-    (actionId, appId, value, blockId, mid) => {
-      ActionManager.triggerBlockAction({
-        container: {
-          type: 'view',
-          id: viewId,
-        },
-        actionId,
-        appId,
-        value,
-        blockId,
-        mid,
-      });
-    },
-    700
-  );
-
-  // TODO: this structure is atrociously wrong; we should revisit this
-  const context = {
-    // @ts-expect-error Property 'mid' does not exist on type 'ActionParams'.
-    action: ({
-      actionId,
-      appId,
-      value,
-      blockId,
-      mid = _mid,
-      dispatchActionConfig,
-    }) => {
-      if (
-        Array.isArray(dispatchActionConfig) &&
-        dispatchActionConfig.includes('on_character_entered')
-      ) {
-        debouncedBlockAction(actionId, appId, value, blockId, mid);
-      } else {
-        ActionManager.triggerBlockAction({
-          container: {
-            type: 'view',
-            id: viewId,
-          },
-          actionId,
-          appId,
-          value,
-          blockId,
-          mid,
-        });
-      }
-    },
-
-    state: ({ actionId, value, /* ,appId, */ blockId = 'default' }) => {
-      updateValues({
-        actionId,
-        payload: {
-          blockId,
-          value,
-        },
-      });
-    },
-    ...state,
-    values,
-  };
-
-  const handleSubmit = useMutableCallback((e) => {
-    prevent(e);
-    ActionManager.triggerSubmitView({
-      viewId,
-      appId,
-      payload: {
-        view: {
-          ...view,
-          id: viewId,
-          state: groupStateByBlockId(values),
-        },
-      },
-    });
-  });
-
-  const handleCancel = useMutableCallback((e) => {
-    prevent(e);
-    ActionManager.triggerCancel({
-      viewId,
-      appId,
-      view: {
-        ...view,
-        id: viewId,
-        state: groupStateByBlockId(values),
-      },
-    });
-  });
-
-  const handleClose = useMutableCallback(() => {
-    ActionManager.triggerCancel({
-      viewId,
-      appId,
-      view: {
-        ...view,
-        id: viewId,
-        state: groupStateByBlockId(values),
-      },
-      isCleared: true,
-    });
-  });
-
-  return (
-    <kitContext.Provider value={context}>
-      <MarkupInteractionContext.Provider
-        value={{
-          detectEmoji,
-        }}
-      >
-        <ModalBlock
-          view={view}
-          errors={errors}
-          appId={appId}
-          onSubmit={handleSubmit}
-          onCancel={handleCancel}
-          onClose={handleClose}
-        />
-      </MarkupInteractionContext.Provider>
-    </kitContext.Provider>
-  );
-};
-
-export default UiKitModal;
+// File is never used, already implemented a fuselage surface renderer in which everything is defined
+
+// /* eslint-disable react/jsx-no-undef */
+// /* eslint-disable import/extensions */
+// /* eslint-disable import/no-unresolved */
+// /* eslint-disable no-shadow */
+// /* eslint-disable react/jsx-no-constructed-context-values */
+// import React from 'react';
+// import {
+//   useDebouncedCallback,
+//   useMutableCallback,
+// } from '@rocket.chat/fuselage-hooks';
+// import { kitContext } from '../contexts/kitContext';
+
+// import * as ActionManager from '../../../../app/ui-message/client/ActionManager';
+// import { detectEmoji } from '../../../lib/utils/detectEmoji';
+// import ModalBlock from './ModalBlock';
+// import { useActionManagerState } from './hooks/useActionManagerState';
+// import { useValues } from './hooks/useValues';
+
+// const UiKitModal = (props) => {
+//   const state = useActionManagerState(props);
+
+//   const { appId, viewId, mid: _mid, errors, view } = state;
+
+//   const [values, updateValues] = useValues(view.blocks);
+
+//   const groupStateByBlockId = (values) =>
+//     Object.entries(values).reduce((obj, [key, { blockId, value }]) => {
+//       obj[blockId] = obj[blockId] || {};
+//       obj[blockId][key] = value;
+
+//       return obj;
+//     }, {});
+
+//   const prevent = (e) => {
+//     if (e) {
+//       (e.nativeEvent || e).stopImmediatePropagation();
+//       e.stopPropagation();
+//       e.preventDefault();
+//     }
+//   };
+
+//   const debouncedBlockAction = useDebouncedCallback(
+//     (actionId, appId, value, blockId, mid) => {
+//       ActionManager.triggerBlockAction({
+//         container: {
+//           type: 'view',
+//           id: viewId,
+//         },
+//         actionId,
+//         appId,
+//         value,
+//         blockId,
+//         mid,
+//       });
+//     },
+//     700
+//   );
+
+//   // TODO: this structure is atrociously wrong; we should revisit this
+//   const context = {
+//     // @ts-expect-error Property 'mid' does not exist on type 'ActionParams'.
+//     action: ({
+//       actionId,
+//       appId,
+//       value,
+//       blockId,
+//       mid = _mid,
+//       dispatchActionConfig,
+//     }) => {
+//       if (
+//         Array.isArray(dispatchActionConfig) &&
+//         dispatchActionConfig.includes('on_character_entered')
+//       ) {
+//         debouncedBlockAction(actionId, appId, value, blockId, mid);
+//       } else {
+//         ActionManager.triggerBlockAction({
+//           container: {
+//             type: 'view',
+//             id: viewId,
+//           },
+//           actionId,
+//           appId,
+//           value,
+//           blockId,
+//           mid,
+//         });
+//       }
+//     },
+
+//     state: ({ actionId, value, /* ,appId, */ blockId = 'default' }) => {
+//       updateValues({
+//         actionId,
+//         payload: {
+//           blockId,
+//           value,
+//         },
+//       });
+//     },
+//     ...state,
+//     values,
+//   };
+
+//   const handleSubmit = useMutableCallback((e) => {
+//     prevent(e);
+//     ActionManager.triggerSubmitView({
+//       viewId,
+//       appId,
+//       payload: {
+//         view: {
+//           ...view,
+//           id: viewId,
+//           state: groupStateByBlockId(values),
+//         },
+//       },
+//     });
+//   });
+
+//   const handleCancel = useMutableCallback((e) => {
+//     prevent(e);
+//     ActionManager.triggerCancel({
+//       viewId,
+//       appId,
+//       view: {
+//         ...view,
+//         id: viewId,
+//         state: groupStateByBlockId(values),
+//       },
+//     });
+//   });
+
+//   const handleClose = useMutableCallback(() => {
+//     ActionManager.triggerCancel({
+//       viewId,
+//       appId,
+//       view: {
+//         ...view,
+//         id: viewId,
+//         state: groupStateByBlockId(values),
+//       },
+//       isCleared: true,
+//     });
+//   });
+
+//   return (
+//     <kitContext.Provider value={context}>
+//       <MarkupInteractionContext.Provider
+//         value={{
+//           detectEmoji,
+//         }}
+//       >
+//         <ModalBlock
+//           view={view}
+//           errors={errors}
+//           appId={appId}
+//           onSubmit={handleSubmit}
+//           onCancel={handleCancel}
+//           onClose={handleClose}
+//         />
+//       </MarkupInteractionContext.Provider>
+//     </kitContext.Provider>
+//   );
+// };
+
+// export default UiKitModal;
diff --git a/packages/react/src/components/uiKit/elements/OverflowElement.js b/packages/react/src/components/uiKit/elements/OverflowElement.js
index 66c085813..5baf45dff 100644
--- a/packages/react/src/components/uiKit/elements/OverflowElement.js
+++ b/packages/react/src/components/uiKit/elements/OverflowElement.js
@@ -1,3 +1,48 @@
+import React, { useMemo, memo } from 'react';
+import { Menu } from '../../Menu';
+import { Box } from '../../Box';
+import { useUiKitState } from '../hooks/useUiKitState';
+import { fromTextObjectToString } from '../utils/fromTextObjectToString';
+
+const OverflowElement = ({ block, context, surfaceRenderer }) => {
+  const [{ loading }, action] = useUiKitState(block, context);
+
+  console.log('--------- Overflow Element params ------- ');
+  console.log(block);
+
+  const options = useMemo(
+    () =>
+      block.options.map(({ value, text, url }, i) => ({
+        id: value,
+        label: fromTextObjectToString(surfaceRenderer, text, i) ?? '',
+        icon: undefined,
+        action: undefined,
+      })),
+    [block.options, surfaceRenderer]
+  );
+
+  console.log(options);
+
+  return (
+    <Box
+      style={{
+        textAlign: 'right',
+        position: 'absolute',
+        right: '0',
+        top: '0',
+      }}
+    >
+      <Menu
+        options={options}
+        isToolTip={false}
+        style={{ padding: '0 0.25rem' }}
+      />
+    </Box>
+  );
+};
+
+export default memo(OverflowElement);
+
 // import {
 //   IconButton,
 //   PositionAnimated,
diff --git a/packages/react/src/components/uiKit/elements/PlainTextInputElement.js b/packages/react/src/components/uiKit/elements/PlainTextInputElement.js
index fc640853a..c2fbfc378 100644
--- a/packages/react/src/components/uiKit/elements/PlainTextInputElement.js
+++ b/packages/react/src/components/uiKit/elements/PlainTextInputElement.js
@@ -28,7 +28,6 @@ const PlainTextInputElement = ({ block, context, surfaceRenderer }) => {
 
   return (
     <Input
-      type="textarea"
       disabled={loading}
       id={block.actionId}
       name={block.actionId}
diff --git a/packages/react/src/components/uiKit/surfaces/FuselageSurfaceRenderer.js b/packages/react/src/components/uiKit/surfaces/FuselageSurfaceRenderer.js
index 12fabb478..61bc61fb0 100644
--- a/packages/react/src/components/uiKit/surfaces/FuselageSurfaceRenderer.js
+++ b/packages/react/src/components/uiKit/surfaces/FuselageSurfaceRenderer.js
@@ -13,7 +13,7 @@ import DatePickerElement from '../elements/DatePickerElement';
 import ImageElement from '../elements/ImageElement';
 import LinearScaleElement from '../elements/LinearScaleElement';
 // import MultiStaticSelectElement from '../elements/MultiStaticSelectElement';
-// import OverflowElement from '../elements/OverflowElement';
+import OverflowElement from '../elements/OverflowElement';
 import PlainTextInputElement from '../elements/PlainTextInputElement';
 // import StaticSelectElement from '../elements/StaticSelectElement';
 import { Markup } from '../../Markup';
@@ -250,21 +250,21 @@ export class FuselageSurfaceRenderer extends UiKit.SurfaceRenderer {
   }
 
   overflow(block, context, index) {
+    console.log('Block: ', block);
     if (context === UiKit.BlockContext.BLOCK) {
       return null;
     }
 
-    return null;
     // implement this without fuselage
-    // return (
-    //   <OverflowElement
-    //     key={index}
-    //     block={block}
-    //     context={context}
-    //     index={index}
-    //     surfaceRenderer={this}
-    //   />
-    // );
+    return (
+      <OverflowElement
+        key={index}
+        block={block}
+        context={context}
+        index={index}
+        surfaceRenderer={this}
+      />
+    );
   }
 
   plain_text_input(block, context, index) {