diff --git a/.changeset/ninety-cherries-pull.md b/.changeset/ninety-cherries-pull.md
new file mode 100644
index 0000000000..7af75b7501
--- /dev/null
+++ b/.changeset/ninety-cherries-pull.md
@@ -0,0 +1,6 @@
+---
+'@rocket.chat/fuselage': minor
+'@rocket.chat/styled': minor
+---
+
+feat: replace `useLayoutEffect` in favor of `useInsertionEffect`
diff --git a/packages/fuselage/src/hooks/useStyle.ts b/packages/fuselage/src/hooks/useStyle.ts
index cbf25000ed..03285d18eb 100644
--- a/packages/fuselage/src/hooks/useStyle.ts
+++ b/packages/fuselage/src/hooks/useStyle.ts
@@ -5,7 +5,7 @@ import {
   transpile,
   attachRules,
 } from '@rocket.chat/css-in-js';
-import { useDebugValue, useLayoutEffect, useMemo } from 'react';
+import { useDebugValue, useInsertionEffect, useMemo } from 'react';
 
 export const useStyle = (cssFn: cssFn | undefined, arg: unknown) => {
   const content = useMemo(() => (cssFn ? cssFn(arg) : undefined), [arg, cssFn]);
@@ -20,7 +20,7 @@ export const useStyle = (cssFn: cssFn | undefined, arg: unknown) => {
 
   useDebugValue(className);
 
-  useLayoutEffect(() => {
+  useInsertionEffect(() => {
     if (!content || !className) {
       return;
     }
diff --git a/packages/styled/src/styled.ts b/packages/styled/src/styled.ts
index f9f12d6830..0213121e91 100644
--- a/packages/styled/src/styled.ts
+++ b/packages/styled/src/styled.ts
@@ -19,7 +19,7 @@ import {
   forwardRef,
   Fragment,
   useDebugValue,
-  useLayoutEffect,
+  useInsertionEffect,
 } from 'react';
 
 export const attachClassName = <P extends { className?: string }>(
@@ -85,7 +85,7 @@ const styled =
 
           useDebugValue(computedClassName);
 
-          useLayoutEffect(() => {
+          useInsertionEffect(() => {
             const escapedClassName = escapeName(computedClassName);
             const transpiledContent = transpile(
               `.${escapedClassName}`,