diff --git a/src/Components/Common/MarkdownEditor.tsx b/src/Components/Common/MarkdownEditor.tsx
index 8ee6486a59..f6f64da4b4 100644
--- a/src/Components/Common/MarkdownEditor.tsx
+++ b/src/Components/Common/MarkdownEditor.tsx
@@ -1,4 +1,4 @@
-import { useRef, useState, useEffect } from "react";
+import { useRef, useReducer, useEffect, useState } from "react";
 import {
   FaBold,
   FaItalic,
@@ -18,19 +18,56 @@ interface RichTextEditorProps {
   onChange?: (markdown: string, htmlCode: string) => void;
 }
 
+interface EditorState {
+  isBoldActive: boolean;
+  isItalicActive: boolean;
+  isQuoteActive: boolean;
+  isUnorderedListActive: boolean;
+  isOrderedListActive: boolean;
+}
+
+type EditorAction =
+  | { type: "SET_BOLD_ACTIVE"; payload: boolean }
+  | { type: "SET_ITALIC_ACTIVE"; payload: boolean }
+  | { type: "SET_QUOTE_ACTIVE"; payload: boolean }
+  | { type: "SET_UNORDERED_LIST_ACTIVE"; payload: boolean }
+  | { type: "SET_ORDERED_LIST_ACTIVE"; payload: boolean }
+  | { type: "UPDATE_ALL"; payload: Partial<EditorState> };
+
+const initialState: EditorState = {
+  isBoldActive: false,
+  isItalicActive: false,
+  isQuoteActive: false,
+  isUnorderedListActive: false,
+  isOrderedListActive: false,
+};
+
+function editorReducer(state: EditorState, action: EditorAction): EditorState {
+  switch (action.type) {
+    case "SET_BOLD_ACTIVE":
+      return { ...state, isBoldActive: action.payload };
+    case "SET_ITALIC_ACTIVE":
+      return { ...state, isItalicActive: action.payload };
+    case "SET_QUOTE_ACTIVE":
+      return { ...state, isQuoteActive: action.payload };
+    case "SET_UNORDERED_LIST_ACTIVE":
+      return { ...state, isUnorderedListActive: action.payload };
+    case "SET_ORDERED_LIST_ACTIVE":
+      return { ...state, isOrderedListActive: action.payload };
+    case "UPDATE_ALL":
+      return { ...state, ...action.payload };
+    default:
+      return state;
+  }
+}
+
 const RichTextEditor: React.FC<RichTextEditorProps> = () => {
   const [markdown, setMarkdown] = useState<string>("");
   const [htmlCode, setHtmlCode] = useState<string>("");
+  const [state, dispatch] = useReducer(editorReducer, initialState);
   const editorRef = useRef<HTMLDivElement>(null);
   const undoStack = useRef<string[]>([]);
   const redoStack = useRef<string[]>([]);
-  const [isBoldActive, setIsBoldActive] = useState<boolean>(false);
-  const [isItalicActive, setIsItalicActive] = useState<boolean>(false);
-  const [isQuoteActive, setIsQuoteActive] = useState<boolean>(false);
-  const [isUnorderedListActive, setIsUnorderedListActive] =
-    useState<boolean>(false);
-  const [isOrderedListActive, setIsOrderedListActive] =
-    useState<boolean>(false);
 
   useEffect(() => {
     document.addEventListener("selectionchange", handleSelectionChange);
@@ -43,17 +80,29 @@ const RichTextEditor: React.FC<RichTextEditorProps> = () => {
     const selection = window.getSelection();
     if (!selection || !selection.rangeCount) return;
 
-    const isBold = isParentTag(selection.focusNode, "STRONG");
-    const isItalic = isParentTag(selection.focusNode, "EM");
+    const isBold =
+      isParentTag(selection.focusNode, "STRONG") ||
+      isParentTag(selection.focusNode, "B");
+    const isItalic =
+      isParentTag(selection.focusNode, "EM") ||
+      isParentTag(selection.focusNode, "I");
     const isQuote = isParentTag(selection.focusNode, "BLOCKQUOTE");
 
-    setIsBoldActive(isBold);
-    setIsItalicActive(isItalic);
-    setIsQuoteActive(isQuote);
-
     const listNode = findParentNode(selection.anchorNode, ["UL", "OL"]);
-    setIsUnorderedListActive(listNode?.nodeName === "UL" ?? false);
-    setIsOrderedListActive((listNode && listNode.nodeName === "OL") ?? false);
+    const isUnorderedListActive = listNode?.nodeName === "UL" ?? false;
+    const isOrderedListActive =
+      (listNode && listNode.nodeName === "OL") ?? false;
+
+    dispatch({
+      type: "UPDATE_ALL",
+      payload: {
+        isBoldActive: isBold,
+        isItalicActive: isItalic,
+        isQuoteActive: isQuote,
+        isUnorderedListActive,
+        isOrderedListActive,
+      },
+    });
   };
 
   const isParentTag = (node: Node | null, tagName: string) => {
@@ -87,6 +136,14 @@ const RichTextEditor: React.FC<RichTextEditorProps> = () => {
     }
   };
 
+  const updatePreview = () => {
+    const turndownService = new TurndownService();
+    const htmlContent = editorRef.current?.innerHTML || "";
+    const markdownText = turndownService.turndown(htmlContent);
+    setMarkdown(markdownText);
+    setHtmlCode(htmlContent);
+  };
+
   const undo = () => {
     if (undoStack.current.length > 0 && editorRef.current) {
       redoStack.current.push(editorRef.current.innerHTML);
@@ -115,7 +172,7 @@ const RichTextEditor: React.FC<RichTextEditorProps> = () => {
 
     const range = selection.getRangeAt(0);
 
-    if (isQuoteActive && (style === "bold" || style === "italic")) return;
+    if (state.isQuoteActive && (style === "bold" || style === "italic")) return;
 
     const tagName = style === "bold" ? "strong" : "em";
     const tagNode = document.createElement(tagName);
@@ -228,14 +285,6 @@ const RichTextEditor: React.FC<RichTextEditorProps> = () => {
     saveState();
   };
 
-  const updatePreview = () => {
-    const turndownService = new TurndownService();
-    const htmlContent = editorRef.current?.innerHTML || "";
-    const markdownText = turndownService.turndown(htmlContent);
-    setMarkdown(markdownText);
-    setHtmlCode(htmlContent);
-  };
-
   return (
     <div className="mx-auto flex rounded-lg bg-white p-8 shadow-lg">
       <div className="w-1/2 pr-4">
@@ -244,22 +293,22 @@ const RichTextEditor: React.FC<RichTextEditorProps> = () => {
             <button
               onClick={() => applyStyle("bold")}
               className={`rounded p-2 ${
-                isBoldActive && !isQuoteActive
+                state.isBoldActive && !state.isQuoteActive
                   ? "bg-primary-700 text-white"
                   : "bg-gray-200"
               }`}
-              disabled={isQuoteActive}
+              disabled={state.isQuoteActive}
             >
               <FaBold className="text-lg" />
             </button>
             <button
               onClick={() => applyStyle("italic")}
               className={`rounded p-2 ${
-                isItalicActive && !isQuoteActive
+                state.isItalicActive && !state.isQuoteActive
                   ? "bg-primary-700 text-white"
                   : "bg-gray-200"
               }`}
-              disabled={isQuoteActive}
+              disabled={state.isQuoteActive}
             >
               <FaItalic className="text-lg" />
             </button>
@@ -269,22 +318,22 @@ const RichTextEditor: React.FC<RichTextEditorProps> = () => {
             <button
               onClick={() => toggleList("ul")}
               className={`rounded p-2 ${
-                isUnorderedListActive && !isQuoteActive
+                state.isUnorderedListActive && !state.isQuoteActive
                   ? "bg-primary-700 text-white"
                   : "bg-gray-200"
               }`}
-              disabled={isQuoteActive}
+              disabled={state.isQuoteActive}
             >
               <FaListUl className="text-lg" />
             </button>
             <button
               onClick={() => toggleList("ol")}
               className={`rounded p-2 ${
-                isOrderedListActive && !isQuoteActive
+                state.isOrderedListActive && !state.isQuoteActive
                   ? "bg-primary-700 text-white"
                   : "bg-gray-200"
               }`}
-              disabled={isQuoteActive}
+              disabled={state.isQuoteActive}
             >
               <FaListOl className="text-lg" />
             </button>
@@ -293,7 +342,7 @@ const RichTextEditor: React.FC<RichTextEditorProps> = () => {
           <button
             onClick={applyQuote}
             className={`rounded p-2 ${
-              isQuoteActive ? "bg-primary-700 text-white" : "bg-gray-200"
+              state.isQuoteActive ? "bg-primary-700 text-white" : "bg-gray-200"
             }`}
           >
             <FaQuoteRight className="text-lg" />