diff --git a/src/components/LexicalEditor/plugins/ToolbarPlugin.jsx b/src/components/LexicalEditor/plugins/ToolbarPlugin.jsx
index c44e44e..6a3f23a 100644
--- a/src/components/LexicalEditor/plugins/ToolbarPlugin.jsx
+++ b/src/components/LexicalEditor/plugins/ToolbarPlugin.jsx
@@ -33,6 +33,7 @@ import { $createCodeNode, $isCodeNode, getDefaultCodeLanguage, getCodeLanguages
 import { INSERT_HORIZONTAL_RULE_COMMAND } from '@lexical/react/LexicalHorizontalRuleNode';
 import DropDown, { DropDownItem } from './../ui/DropDown';
 import DropdownColorPicker from '../ui/DropdownColorPicker';
+import { INSERT_TABLE_COMMAND } from '@lexical/table';
 import {
   // INSERT_IMAGE_COMMAND,
   InsertImageDialog,
@@ -765,6 +766,54 @@ export default function ToolbarPlugin() {
     editor.dispatchCommand(INSERT_HORIZONTAL_RULE_COMMAND, undefined);
   }, [editor]);
 
+
+  const [showTableGrid, setShowTableGrid] = useState(false);
+  const [hoverRows, setHoverRows] = useState(0);
+  const [hoverCols, setHoverCols] = useState(0);
+  // Insert table function
+  const insertTable = (rows, cols) => {
+    editor.dispatchCommand(INSERT_TABLE_COMMAND, { rows, columns: cols });
+    setHoverRows(0);
+    setHoverCols(0);
+    setShowTableGrid(false);
+  };
+  // Generate grid for table selection
+  const renderTableGrid = () => {
+    const gridSize = 6;
+    return (
+      <div
+        className="absolute z-50 bg-white border rounded shadow-lg p-2 min-w-36"
+        onMouseLeave={() => {
+          setHoverRows(0);
+          setHoverCols(0);
+        }}
+      >
+        <div className="grid grid-cols-6 gap-1">
+          {[...Array(gridSize)].map((_, rowIndex) =>
+            [...Array(gridSize)].map((_, colIndex) => (
+              <div
+                key={`${rowIndex}-${colIndex}`}
+                className={`w-4 h-4 border border-solid border-gray-300
+                  ${rowIndex < hoverRows && colIndex < hoverCols
+                    ? 'bg-blue-200'
+                    : 'bg-white hover:bg-blue-100'}
+                `}
+                onMouseEnter={() => {
+                  setHoverRows(rowIndex + 1);
+                  setHoverCols(colIndex + 1);
+                }}
+                onClick={() => insertTable(rowIndex + 1, colIndex + 1)}
+              />
+            ))
+          )}
+        </div>
+        <div className="text-center mt-2 text-sm text-gray-600">
+          {hoverRows} × {hoverCols} Table
+        </div>
+      </div>
+    );
+  };
+
   return (
     <div className='toolbar sticky top-[-10px] z-10' ref={toolbarRef}>
       <button type='button'
@@ -889,6 +938,15 @@ export default function ToolbarPlugin() {
           />
           <Divider />
           <ElementFormatDropdown disabled={!isEditable} value={elementFormat} editor={editor} isRTL={isRTL} />
+      {/* Table Insertion */}
+          <DropDown
+            disabled={!isEditable}
+            buttonClassName="toolbar-item spaced"
+            // buttonLabel="Table"
+            buttonAriaLabel="Insert specialized editor node"
+            buttonIconClassName="icon table">
+            {renderTableGrid()}
+          </DropDown>
           <Divider />
               <DropDown
                 disabled={!isEditable}
diff --git a/src/components/LexicalEditor/styles.css b/src/components/LexicalEditor/styles.css
index 7b8ac4b..e5d9210 100644
--- a/src/components/LexicalEditor/styles.css
+++ b/src/components/LexicalEditor/styles.css
@@ -829,6 +829,9 @@ i.redo {
 .icon.image{
     background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='currentColor'%3E%3Cpath d='M20 5H4V19L13.2923 9.70649C13.6828 9.31595 14.3159 9.31591 14.7065 9.70641L20 15.0104V5ZM2 3.9934C2 3.44476 2.45531 3 2.9918 3H21.0082C21.556 3 22 3.44495 22 3.9934V20.0066C22 20.5552 21.5447 21 21.0082 21H2.9918C2.44405 21 2 20.5551 2 20.0066V3.9934ZM8 11C6.89543 11 6 10.1046 6 9C6 7.89543 6.89543 7 8 7C9.10457 7 10 7.89543 10 9C10 10.1046 9.10457 11 8 11Z'%3E%3C/path%3E%3C/svg%3E");
 }
+.icon.table{
+    background-image: url("data:image/svg+xml,%3Csvg xmlns=\"http://www.w3.org/2000/svg\" width=\"32\" height=\"32\" viewBox=\"0 0 24 24\"%3E%3Cpath d=\"M18.44 3.06H5.56c-1.38 0-2.5 1.13-2.5 2.5v12.88c0 1.37 1.12 2.5 2.5 2.5h12.88c1.37 0 2.5-1.13 2.5-2.5V5.56c0-1.37-1.13-2.5-2.5-2.5zM8.71 19.94H5.56c-.83 0-1.5-.68-1.5-1.5v-3.11h4.65v4.61zm0-5.61H4.06V9.67h4.65v4.66zm0-5.66H4.06V5.56c0-.82.67-1.5 1.5-1.5h3.15v4.61zm11.23 9.77c0 .82-.68 1.5-1.5 1.5H9.71v-4.61h10.23v3.11zm0-4.11H9.71V9.67h10.23v4.66zm0-5.66H9.71V4.06h8.73c.82 0 1.5.68 1.5 1.5v3.11z\"/%3E%3C/svg%3E");
+}
 i.indent {
     background-image: url("data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20width='16'%20height='16'%20fill='currentColor'%20class='bi%20bi-text-indent-left'%3e%3cpath%20d='M2%203.5a.5.5%200%200%201%20.5-.5h11a.5.5%200%200%201%200%201h-11a.5.5%200%200%201-.5-.5zm.646%202.146a.5.5%200%200%201%20.708%200l2%202a.5.5%200%200%201%200%20.708l-2%202a.5.5%200%200%201-.708-.708L4.293%208%202.646%206.354a.5.5%200%200%201%200-.708zM7%206.5a.5.5%200%200%201%20.5-.5h6a.5.5%200%200%201%200%201h-6a.5.5%200%200%201-.5-.5zm0%203a.5.5%200%200%201%20.5-.5h6a.5.5%200%200%201%200%201h-6a.5.5%200%200%201-.5-.5zm-5%203a.5.5%200%200%201%20.5-.5h11a.5.5%200%200%201%200%201h-11a.5.5%200%200%201-.5-.5z'/%3e%3c/svg%3e")
 }
diff --git a/src/views/Conversations/Online/Input/EmailComposer.jsx b/src/views/Conversations/Online/Input/EmailComposer.jsx
index 830861f..0122870 100644
--- a/src/views/Conversations/Online/Input/EmailComposer.jsx
+++ b/src/views/Conversations/Online/Input/EmailComposer.jsx
@@ -173,6 +173,20 @@ const EmailComposer = ({ ...props }) => {
     }
   }
 
+
+  const handleOpenNewWindow = () => {
+    const currentUrl = '/order/follow'; // window.location.href; // Get the current URL
+
+    const width = window.innerWidth - 700; // Adjust as needed
+    const height = window.innerHeight - 40; // Adjust as needed
+    const left = 324; // window.innerWidth / 2 - width / 2;
+    const top = 20; // window.innerHeight / 2 - height / 2;
+
+    const features = `width=${width},height=${height},left=${left},top=${top},resizable=yes,scrollbars=yes,menubar=no,toolbar=no,location=no,status=no`;
+
+    window.open(currentUrl, '_blank', features);
+  };
+
   return (
     <ConfigProvider theme={{ token: { colorPrimary: '#6366f1' } }}>
       <Form
@@ -201,6 +215,13 @@ const EmailComposer = ({ ...props }) => {
                 type='text'
                 size='small'
                 onClick={() => openEditor(pickEmail.key)}
+                // onClick={handleOpenNewWindow}
+                icon={<ExpandOutlined className='text-indigo-600' />}
+              />
+              <Button
+                type='text'
+                size='small'
+                onClick={handleOpenNewWindow}
                 icon={<ExpandOutlined className='text-indigo-600' />}
               />
               </Tooltip>
diff --git a/src/views/Conversations/Online/Input/EmailEditorPopup.jsx b/src/views/Conversations/Online/Input/EmailEditorPopup.jsx
index 1dec227..86b9198 100644
--- a/src/views/Conversations/Online/Input/EmailEditorPopup.jsx
+++ b/src/views/Conversations/Online/Input/EmailEditorPopup.jsx
@@ -451,7 +451,7 @@ const EmailEditorPopup = ({ open, setOpen, fromEmail, fromUser, fromOrder, oid,
           rootClassName='email-editor-wrapper  !border-indigo-300 '
           open={open}
           setOpen={setOpen}
-          initial={{ width: window.innerWidth - 600, height: window.innerHeight - 40, left: 300 + 24, top: 20 }}
+          initial={{ width: window.innerWidth - 700, height: window.innerHeight - 40, left: 300 + 24, top: 20 }}
           onCancel={() => {
             form.resetFields()
             stateReset()