diff --git a/apps/meteor/client/components/CustomText.tsx b/apps/meteor/client/components/CustomText.tsx
index 2e7391596c7a..07db3af0c73b 100644
--- a/apps/meteor/client/components/CustomText.tsx
+++ b/apps/meteor/client/components/CustomText.tsx
@@ -1,9 +1,9 @@
-import React, { FC, memo } from 'react';
+import React, { memo, ReactElement } from 'react';
 
 import { highlightWords as getHighlightHtml } from '../../app/highlight-words/client/helper';
-import { getKatexHtml } from '../../app/katex/client';
+import Katex from './Katex';
 
-type CustomTextType = {
+type CustomTextProps = {
 	text: string;
 	wordsToHighlight?: {
 		highlight: string;
@@ -11,21 +11,16 @@ type CustomTextType = {
 		urlRegex: RegExp;
 	}[];
 	katex?: {
-		enabled: boolean;
 		dollarSyntaxEnabled: boolean;
 		parenthesisSyntaxEnabled: boolean;
 	};
 };
 
-const CustomText: FC<CustomTextType> = ({ text, wordsToHighlight, katex }) => {
-	let html = text;
-
-	if (wordsToHighlight?.length) {
-		html = getHighlightHtml(html, wordsToHighlight);
-	}
-
-	if (katex?.enabled) {
-		html = getKatexHtml(html, katex);
+const CustomText = ({ text, wordsToHighlight, katex }: CustomTextProps): ReactElement => {
+	// TODO: chapter day frontend: remove dangerouslySetInnerHTML, convert to tokens and do not mix with katex
+	const html = wordsToHighlight?.length ? getHighlightHtml(text, wordsToHighlight) : text;
+	if (katex) {
+		return <Katex text={html} katex={katex} />;
 	}
 
 	return <span dangerouslySetInnerHTML={{ __html: html }} />;
diff --git a/apps/meteor/client/components/Katex.tsx b/apps/meteor/client/components/Katex.tsx
index e0c538dc396f..6a66a1157191 100644
--- a/apps/meteor/client/components/Katex.tsx
+++ b/apps/meteor/client/components/Katex.tsx
@@ -1,8 +1,8 @@
-import React, { FC, memo } from 'react';
+import React, { memo, ReactElement } from 'react';
 
 import { createKatexMessageRendering } from '../../app/katex/client';
 
-type KatexType = {
+type KatexProps = {
 	text: string;
 	options: {
 		dollarSyntax: boolean;
@@ -10,8 +10,8 @@ type KatexType = {
 	};
 };
 
-const Katex: FC<KatexType> = ({ text, options }) => (
-	<span dangerouslySetInnerHTML={{ __html: createKatexMessageRendering(options)(`${text}`) }} />
+const Katex = ({ text, options }: KatexProps): ReactElement => (
+	<span dangerouslySetInnerHTML={{ __html: createKatexMessageRendering(options)(text) }} />
 );
 
 export default memo(Katex);
diff --git a/apps/meteor/client/views/room/MessageList/contexts/MessageListContext.tsx b/apps/meteor/client/views/room/MessageList/contexts/MessageListContext.tsx
index 2a1763f5194b..aec5162a97d0 100644
--- a/apps/meteor/client/views/room/MessageList/contexts/MessageListContext.tsx
+++ b/apps/meteor/client/views/room/MessageList/contexts/MessageListContext.tsx
@@ -21,7 +21,6 @@ export type MessageListContextValue = {
 				urlRegex: RegExp;
 		  }[];
 	katex?: {
-		enabled: boolean;
 		dollarSyntaxEnabled: boolean;
 		parenthesisSyntaxEnabled: boolean;
 	};
diff --git a/apps/meteor/client/views/room/MessageList/providers/MessageListProvider.tsx b/apps/meteor/client/views/room/MessageList/providers/MessageListProvider.tsx
index 5d1ead4a5538..29d9af20e718 100644
--- a/apps/meteor/client/views/room/MessageList/providers/MessageListProvider.tsx
+++ b/apps/meteor/client/views/room/MessageList/providers/MessageListProvider.tsx
@@ -88,11 +88,12 @@ export const MessageListProvider: FC<{
 			showRoles,
 			showRealName,
 			showUsername,
-			katex: {
-				enabled: katexEnabled,
-				dollarSyntaxEnabled: katexDollarSyntaxEnabled,
-				parenthesisSyntaxEnabled: katexParenthesisSyntaxEnabled,
-			},
+			...(katexEnabled && {
+				katex: {
+					dollarSyntaxEnabled: katexDollarSyntaxEnabled,
+					parenthesisSyntaxEnabled: katexParenthesisSyntaxEnabled,
+				},
+			}),
 			highlights: highlights
 				?.map((str) => str.trim())
 				.map((highlight) => ({