diff --git a/apps/web/src/components/ui/alert-dialog/AlertDialogBase.tsx b/apps/web/src/components/ui/alert-dialog/AlertDialogBase.tsx
new file mode 100644
index 000000000..d2848d8aa
--- /dev/null
+++ b/apps/web/src/components/ui/alert-dialog/AlertDialogBase.tsx
@@ -0,0 +1,136 @@
+'use client';
+
+import * as React from 'react';
+
+import * as AlertDialogPrimitive from '@radix-ui/react-alert-dialog';
+
+import { buttonVariants } from '@/components/ui/buttons';
+import { cn } from '@/lib/utils';
+
+function AlertDialog({ ...props }: React.ComponentProps<typeof AlertDialogPrimitive.Root>) {
+  return <AlertDialogPrimitive.Root data-slot="alert-dialog" {...props} />;
+}
+
+function AlertDialogTrigger({
+  ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Trigger>) {
+  return <AlertDialogPrimitive.Trigger data-slot="alert-dialog-trigger" {...props} />;
+}
+
+function AlertDialogPortal({ ...props }: React.ComponentProps<typeof AlertDialogPrimitive.Portal>) {
+  return <AlertDialogPrimitive.Portal data-slot="alert-dialog-portal" {...props} />;
+}
+
+function AlertDialogOverlay({
+  className,
+  ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Overlay>) {
+  return (
+    <AlertDialogPrimitive.Overlay
+      className={cn(
+        'data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:animate-in data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50',
+        className
+      )}
+      data-slot="alert-dialog-overlay"
+      {...props}
+    />
+  );
+}
+
+function AlertDialogContent({
+  className,
+  ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Content>) {
+  return (
+    <AlertDialogPortal>
+      <AlertDialogOverlay />
+      <AlertDialogPrimitive.Content
+        className={cn(
+          'bg-background data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95 fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border p-6 shadow-lg duration-200 sm:max-w-lg',
+          className
+        )}
+        data-slot="alert-dialog-content"
+        {...props}
+      />
+    </AlertDialogPortal>
+  );
+}
+
+function AlertDialogHeader({ className, ...props }: React.ComponentProps<'div'>) {
+  return (
+    <div
+      className={cn('flex flex-col gap-2 text-center sm:text-left', className)}
+      data-slot="alert-dialog-header"
+      {...props}
+    />
+  );
+}
+
+function AlertDialogFooter({ className, ...props }: React.ComponentProps<'div'>) {
+  return (
+    <div
+      className={cn('flex flex-col-reverse gap-2 sm:flex-row sm:justify-end', className)}
+      data-slot="alert-dialog-footer"
+      {...props}
+    />
+  );
+}
+
+function AlertDialogTitle({
+  className,
+  ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Title>) {
+  return (
+    <AlertDialogPrimitive.Title
+      className={cn('text-lg font-semibold', className)}
+      data-slot="alert-dialog-title"
+      {...props}
+    />
+  );
+}
+
+function AlertDialogDescription({
+  className,
+  ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Description>) {
+  return (
+    <AlertDialogPrimitive.Description
+      className={cn('text-muted-foreground text-sm', className)}
+      data-slot="alert-dialog-description"
+      {...props}
+    />
+  );
+}
+
+function AlertDialogAction({
+  className,
+  ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Action>) {
+  return <AlertDialogPrimitive.Action className={cn(buttonVariants(), className)} {...props} />;
+}
+
+function AlertDialogCancel({
+  className,
+  ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Cancel>) {
+  return (
+    <AlertDialogPrimitive.Cancel
+      className={cn(buttonVariants({ variant: 'outlined' }), className)}
+      {...props}
+    />
+  );
+}
+
+export {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogOverlay,
+  AlertDialogPortal,
+  AlertDialogTitle,
+  AlertDialogTrigger
+};
diff --git a/apps/web/src/components/ui/alert-dialog/index.ts b/apps/web/src/components/ui/alert-dialog/index.ts
new file mode 100644
index 000000000..7d9281753
--- /dev/null
+++ b/apps/web/src/components/ui/alert-dialog/index.ts
@@ -0,0 +1 @@
+export * from './AlertDialogBase';
diff --git a/apps/web/src/components/ui/report/ReportEditor.tsx b/apps/web/src/components/ui/report/ReportEditor.tsx
index cad687426..78ef20402 100644
--- a/apps/web/src/components/ui/report/ReportEditor.tsx
+++ b/apps/web/src/components/ui/report/ReportEditor.tsx
@@ -6,6 +6,7 @@ import { Editor } from './Editor';
 import { useReportEditor } from './useReportEditor';
 import { useMemoizedFn } from '@/hooks';
 import { ReportElements } from '@buster/server-shared/reports';
+import { cn } from '@/lib/utils';
 
 interface ReportEditorProps {
   // We accept the generic Value type but recommend using ReportTypes.Value for type safety
@@ -56,7 +57,7 @@ export const ReportEditor = React.memo(
             variant={variant}
             readonly={readOnly}
             disabled={disabled}
-            className={className}>
+            className={cn('pb-[20vh]', className)}>
             <Editor style={style} placeholder={placeholder} disabled={disabled} />
           </EditorContainer>
         </Plate>
diff --git a/apps/web/src/components/ui/report/elements/AlignToolbarButton.tsx b/apps/web/src/components/ui/report/elements/AlignToolbarButton.tsx
new file mode 100644
index 000000000..a0c210d6b
--- /dev/null
+++ b/apps/web/src/components/ui/report/elements/AlignToolbarButton.tsx
@@ -0,0 +1,84 @@
+'use client';
+
+import * as React from 'react';
+
+import type { Alignment } from '@platejs/basic-styles';
+import type { DropdownMenuProps } from '@radix-ui/react-dropdown-menu';
+
+import { TextAlignPlugin } from '@platejs/basic-styles/react';
+import {
+  TextAlignCenter,
+  TextAlignJustify,
+  TextAlignLeft,
+  TextAlignRight
+} from '@/components/ui/icons';
+import { useEditorPlugin, useSelectionFragmentProp } from 'platejs/react';
+
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuRadioGroup,
+  DropdownMenuRadioItem,
+  DropdownMenuTrigger
+} from '@/components/ui/dropdown-menu';
+
+import { ToolbarButton } from './Toolbar';
+
+const items = [
+  {
+    icon: TextAlignLeft,
+    value: 'left'
+  },
+  {
+    icon: TextAlignCenter,
+    value: 'center'
+  },
+  {
+    icon: TextAlignRight,
+    value: 'right'
+  },
+  {
+    icon: TextAlignJustify,
+    value: 'justify'
+  }
+];
+
+export function AlignToolbarButton(props: DropdownMenuProps) {
+  const { editor, tf } = useEditorPlugin(TextAlignPlugin);
+  const value =
+    useSelectionFragmentProp({
+      defaultValue: 'start',
+      getProp: (node) => node.align
+    }) ?? 'left';
+
+  const [open, setOpen] = React.useState(false);
+  const IconValue = items.find((item) => item.value === value)?.icon ?? TextAlignLeft;
+
+  return (
+    <DropdownMenu open={open} onOpenChange={setOpen} modal={false} {...props}>
+      <DropdownMenuTrigger asChild>
+        <ToolbarButton pressed={open} tooltip="Align" isDropdown>
+          <IconValue />
+        </ToolbarButton>
+      </DropdownMenuTrigger>
+
+      <DropdownMenuContent className="min-w-0" align="start">
+        <DropdownMenuRadioGroup
+          value={value}
+          onValueChange={(value) => {
+            tf.textAlign.setNodes(value as Alignment);
+            editor.tf.focus();
+          }}>
+          {items.map(({ icon: Icon, value: itemValue }) => (
+            <DropdownMenuRadioItem
+              key={itemValue}
+              className="data-[state=checked]:bg-accent pl-2 *:first:[span]:hidden"
+              value={itemValue}>
+              <Icon />
+            </DropdownMenuRadioItem>
+          ))}
+        </DropdownMenuRadioGroup>
+      </DropdownMenuContent>
+    </DropdownMenu>
+  );
+}
diff --git a/apps/web/src/components/ui/report/elements/Comment.tsx b/apps/web/src/components/ui/report/elements/Comment.tsx
index 970621400..de6dd43da 100644
--- a/apps/web/src/components/ui/report/elements/Comment.tsx
+++ b/apps/web/src/components/ui/report/elements/Comment.tsx
@@ -31,7 +31,7 @@ import { BasicMarksKit } from '../plugins/basic-marks-kit';
 import { type TDiscussion, discussionPlugin } from '../plugins/discussion-kit';
 
 import { EditorContainer } from '../EditorContainer';
-import { EditorContent as Editor } from '../Editor';
+import { Editor } from '../Editor';
 
 export interface TComment {
   id: string;
diff --git a/apps/web/src/components/ui/report/elements/FixedToolbarButtons.tsx b/apps/web/src/components/ui/report/elements/FixedToolbarButtons.tsx
index 5417100c0..db0129296 100644
--- a/apps/web/src/components/ui/report/elements/FixedToolbarButtons.tsx
+++ b/apps/web/src/components/ui/report/elements/FixedToolbarButtons.tsx
@@ -8,7 +8,11 @@ import {
   TextItalic,
   TextStrikethrough,
   TextUnderline,
-  WandSparkle
+  WandSparkle,
+  ArrowUpToLine,
+  TextColor2,
+  BucketPaint,
+  TextHighlight2
 } from '@/components/ui/icons';
 import { KEYS } from 'platejs';
 import { useEditorReadOnly } from 'platejs/react';
@@ -23,6 +27,24 @@ import { SuggestionToolbarButton } from './SuggestionToolbarButton';
 import { ToolbarGroup } from './Toolbar';
 import { TurnIntoToolbarButton } from './TurnIntoToolbarButton';
 import { UndoToolbarButton, RedoToolbarButton } from './UndoToolbarButton';
+import { ExportToolbarButton } from './ExportToolbarButton';
+import { ImportToolbarButton } from './ImportToolbarButton';
+import { InsertToolbarButton } from './InsertToolbarButton';
+import { FontSizeToolbarButton } from './FontSizeToolbarButton';
+import { FontColorToolbarButton } from './FontColorToolbarButton';
+import { AlignToolbarButton } from './AlignToolbarButton';
+import {
+  BulletedListToolbarButton,
+  NumberedListToolbarButton,
+  TodoListToolbarButton
+} from './ListToolbarButton';
+import { ToggleToolbarButton } from './ToggleToolbarButton';
+import { TableToolbarButton } from './TableToolbarButton';
+import { EmojiToolbarButton } from './EmojiToolbarButton';
+import { MediaToolbarButton } from './MediaToolbarButton';
+import { LineHeightToolbarButton } from './LineHeightToolbarButton';
+import { IndentToolbarButton, OutdentToolbarButton } from './IndentToolbarButton';
+import { ModeToolbarButton } from './ModeToolbarButton';
 
 export function FixedToolbarButtons() {
   const readOnly = useEditorReadOnly();
@@ -58,31 +80,31 @@ export function FixedToolbarButtons() {
 
           <ToolbarGroup>
             <MarkToolbarButton nodeType={KEYS.bold} tooltip="Bold (⌘+B)">
-              <BoldIcon />
+              <TextBold />
             </MarkToolbarButton>
 
             <MarkToolbarButton nodeType={KEYS.italic} tooltip="Italic (⌘+I)">
-              <ItalicIcon />
+              <TextItalic />
             </MarkToolbarButton>
 
             <MarkToolbarButton nodeType={KEYS.underline} tooltip="Underline (⌘+U)">
-              <UnderlineIcon />
+              <TextUnderline />
             </MarkToolbarButton>
 
             <MarkToolbarButton nodeType={KEYS.strikethrough} tooltip="Strikethrough (⌘+⇧+M)">
-              <StrikethroughIcon />
+              <TextStrikethrough />
             </MarkToolbarButton>
 
             <MarkToolbarButton nodeType={KEYS.code} tooltip="Code (⌘+E)">
-              <Code2Icon />
+              <Code2 />
             </MarkToolbarButton>
 
             <FontColorToolbarButton nodeType={KEYS.color} tooltip="Text color">
-              <BaselineIcon />
+              <TextColor2 />
             </FontColorToolbarButton>
 
             <FontColorToolbarButton nodeType={KEYS.backgroundColor} tooltip="Background color">
-              <PaintBucketIcon />
+              <BucketPaint />
             </FontColorToolbarButton>
           </ToolbarGroup>
 
@@ -124,7 +146,7 @@ export function FixedToolbarButtons() {
 
       <ToolbarGroup>
         <MarkToolbarButton nodeType={KEYS.highlight} tooltip="Highlight">
-          <HighlighterIcon />
+          <TextHighlight2 />
         </MarkToolbarButton>
         <CommentToolbarButton />
       </ToolbarGroup>
diff --git a/apps/web/src/components/ui/report/elements/FontSizeToolbarButton.tsx b/apps/web/src/components/ui/report/elements/FontSizeToolbarButton.tsx
new file mode 100644
index 000000000..c7e11fee8
--- /dev/null
+++ b/apps/web/src/components/ui/report/elements/FontSizeToolbarButton.tsx
@@ -0,0 +1,143 @@
+'use client';
+
+import * as React from 'react';
+
+import type { TElement } from 'platejs';
+
+import { toUnitLess } from '@platejs/basic-styles';
+import { FontSizePlugin } from '@platejs/basic-styles/react';
+import { Minus, Plus } from '@/components/ui/icons';
+import { KEYS } from 'platejs';
+import { useEditorPlugin, useEditorSelector } from 'platejs/react';
+
+import { PopoverBase, PopoverContent, PopoverTrigger } from '@/components/ui/popover';
+import { cn } from '@/lib/utils';
+
+import { ToolbarButton } from './Toolbar';
+
+const DEFAULT_FONT_SIZE = '16';
+
+const FONT_SIZE_MAP = {
+  h1: '36',
+  h2: '24',
+  h3: '20'
+} as const;
+
+const FONT_SIZES = [
+  '8',
+  '9',
+  '10',
+  '12',
+  '14',
+  '16',
+  '18',
+  '24',
+  '30',
+  '36',
+  '48',
+  '60',
+  '72',
+  '96'
+] as const;
+
+export function FontSizeToolbarButton() {
+  const [inputValue, setInputValue] = React.useState(DEFAULT_FONT_SIZE);
+  const [isFocused, setIsFocused] = React.useState(false);
+  const { editor, tf } = useEditorPlugin(FontSizePlugin);
+
+  const cursorFontSize = useEditorSelector((editor) => {
+    const fontSize = editor.api.marks()?.[KEYS.fontSize];
+
+    if (fontSize) {
+      return toUnitLess(fontSize as string);
+    }
+
+    const [block] = editor.api.block<TElement>() || [];
+
+    if (!block?.type) return DEFAULT_FONT_SIZE;
+
+    return block.type in FONT_SIZE_MAP
+      ? FONT_SIZE_MAP[block.type as keyof typeof FONT_SIZE_MAP]
+      : DEFAULT_FONT_SIZE;
+  }, []);
+
+  const handleInputChange = () => {
+    const newSize = toUnitLess(inputValue);
+
+    if (Number.parseInt(newSize) < 1 || Number.parseInt(newSize) > 100) {
+      editor.tf.focus();
+
+      return;
+    }
+    if (newSize !== toUnitLess(cursorFontSize)) {
+      tf.fontSize.addMark(`${newSize}px`);
+    }
+
+    editor.tf.focus();
+  };
+
+  const handleFontSizeChange = (delta: number) => {
+    const newSize = Number(displayValue) + delta;
+    tf.fontSize.addMark(`${newSize}px`);
+    editor.tf.focus();
+  };
+
+  const displayValue = isFocused ? inputValue : cursorFontSize;
+
+  return (
+    <div className="bg-muted/60 flex h-7 items-center gap-1 rounded-md p-0">
+      <ToolbarButton onClick={() => handleFontSizeChange(-1)}>
+        <Minus />
+      </ToolbarButton>
+
+      <PopoverBase open={isFocused} modal={false}>
+        <PopoverTrigger asChild>
+          <input
+            className={cn(
+              'hover:bg-muted h-full w-10 shrink-0 bg-transparent px-1 text-center text-sm'
+            )}
+            value={displayValue}
+            onBlur={() => {
+              setIsFocused(false);
+              handleInputChange();
+            }}
+            onChange={(e) => setInputValue(e.target.value)}
+            onFocus={() => {
+              setIsFocused(true);
+              setInputValue(toUnitLess(cursorFontSize));
+            }}
+            onKeyDown={(e) => {
+              if (e.key === 'Enter') {
+                e.preventDefault();
+                handleInputChange();
+              }
+            }}
+            data-plate-focus="true"
+            type="text"
+          />
+        </PopoverTrigger>
+        <PopoverContent className="w-10 px-px py-1" onOpenAutoFocus={(e) => e.preventDefault()}>
+          {FONT_SIZES.map((size) => (
+            <button
+              key={size}
+              className={cn(
+                'hover:bg-accent data-[highlighted=true]:bg-accent flex h-8 w-full items-center justify-center text-sm'
+              )}
+              onClick={() => {
+                tf.fontSize.addMark(`${size}px`);
+                setIsFocused(false);
+              }}
+              data-highlighted={size === displayValue}
+              type="button">
+              {size}
+            </button>
+          ))}
+        </PopoverContent>
+      </PopoverBase>
+
+      <ToolbarButton onClick={() => handleFontSizeChange(1)}>
+        <Plus />
+      </ToolbarButton>
+    </div>
+  );
+}
diff --git a/apps/web/src/components/ui/report/elements/ImportToolbarButton.tsx b/apps/web/src/components/ui/report/elements/ImportToolbarButton.tsx
new file mode 100644
index 000000000..9ca7b6fc1
--- /dev/null
+++ b/apps/web/src/components/ui/report/elements/ImportToolbarButton.tsx
@@ -0,0 +1,99 @@
+'use client';
+
+import * as React from 'react';
+
+import type { DropdownMenuProps } from '@radix-ui/react-dropdown-menu';
+
+import { MarkdownPlugin } from '@platejs/markdown';
+import { ArrowUpToLine } from '@/components/ui/icons';
+import { getEditorDOMFromHtmlString } from 'platejs';
+import { useEditorRef } from 'platejs/react';
+import { useFilePicker } from 'use-file-picker';
+
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuGroup,
+  DropdownMenuItem,
+  DropdownMenuTrigger
+} from '@/components/ui/dropdown-menu';
+
+import { ToolbarButton } from './Toolbar';
+
+type ImportType = 'html' | 'markdown';
+
+export function ImportToolbarButton(props: DropdownMenuProps) {
+  const editor = useEditorRef();
+  const [open, setOpen] = React.useState(false);
+
+  const getFileNodes = (text: string, type: ImportType) => {
+    if (type === 'html') {
+      const editorNode = getEditorDOMFromHtmlString(text);
+      const nodes = editor.api.html.deserialize({
+        element: editorNode
+      });
+
+      return nodes;
+    }
+
+    if (type === 'markdown') {
+      return editor.getApi(MarkdownPlugin).markdown.deserialize(text);
+    }
+
+    return [];
+  };
+
+  const { openFilePicker: openMdFilePicker } = useFilePicker({
+    accept: ['.md', '.mdx'],
+    multiple: false,
+    onFilesSelected: async ({ plainFiles }) => {
+      const text = await plainFiles[0].text();
+
+      const nodes = getFileNodes(text, 'markdown');
+
+      editor.tf.insertNodes(nodes);
+    }
+  });
+
+  const { openFilePicker: openHtmlFilePicker } = useFilePicker({
+    accept: ['text/html'],
+    multiple: false,
+    onFilesSelected: async ({ plainFiles }) => {
+      const text = await plainFiles[0].text();
+
+      const nodes = getFileNodes(text, 'html');
+
+      editor.tf.insertNodes(nodes);
+    }
+  });
+
+  return (
+    <DropdownMenu open={open} onOpenChange={setOpen} modal={false} {...props}>
+      <DropdownMenuTrigger asChild>
+        <ToolbarButton pressed={open} tooltip="Import" isDropdown>
+          <div className="size-4">
+            <ArrowUpToLine />
+          </div>
+        </ToolbarButton>
+      </DropdownMenuTrigger>
+
+      <DropdownMenuContent align="start">
+        <DropdownMenuGroup>
+          <DropdownMenuItem
+            onSelect={() => {
+              openHtmlFilePicker();
+            }}>
+            Import from HTML
+          </DropdownMenuItem>
+
+          <DropdownMenuItem
+            onSelect={() => {
+              openMdFilePicker();
+            }}>
+            Import from Markdown
+          </DropdownMenuItem>
+        </DropdownMenuGroup>
+      </DropdownMenuContent>
+    </DropdownMenu>
+  );
+}
diff --git a/apps/web/src/components/ui/report/elements/IndentToolbarButton.tsx b/apps/web/src/components/ui/report/elements/IndentToolbarButton.tsx
new file mode 100644
index 000000000..6fe29d9da
--- /dev/null
+++ b/apps/web/src/components/ui/report/elements/IndentToolbarButton.tsx
@@ -0,0 +1,28 @@
+'use client';
+
+import * as React from 'react';
+
+import { useIndentButton, useOutdentButton } from '@platejs/indent/react';
+import { IndentIncrease, IndentDecrease } from '@/components/ui/icons';
+
+import { ToolbarButton } from './Toolbar';
+
+export function IndentToolbarButton(props: React.ComponentProps<typeof ToolbarButton>) {
+  const { props: buttonProps } = useIndentButton();
+
+  return (
+    <ToolbarButton {...props} {...buttonProps} tooltip="Indent">
+      <IndentIncrease />
+    </ToolbarButton>
+  );
+}
+
+export function OutdentToolbarButton(props: React.ComponentProps<typeof ToolbarButton>) {
+  const { props: buttonProps } = useOutdentButton();
+
+  return (
+    <ToolbarButton {...props} {...buttonProps} tooltip="Outdent">
+      <IndentDecrease />
+    </ToolbarButton>
+  );
+}
diff --git a/apps/web/src/components/ui/report/elements/InsertToolbarButton.tsx b/apps/web/src/components/ui/report/elements/InsertToolbarButton.tsx
new file mode 100644
index 000000000..b0bafaf1e
--- /dev/null
+++ b/apps/web/src/components/ui/report/elements/InsertToolbarButton.tsx
@@ -0,0 +1,246 @@
+'use client';
+
+import * as React from 'react';
+
+import type { DropdownMenuProps } from '@radix-ui/react-dropdown-menu';
+
+import {
+  Calendar,
+  ChevronRight,
+  GridLayoutCols3,
+  FileCloud,
+  Film,
+  Heading1,
+  Heading2,
+  Heading3,
+  Image,
+  Link2,
+  UnorderedList,
+  OrderedList,
+  Minus,
+  Pilcrow,
+  Plus,
+  Quote,
+  Equation,
+  ShapeSquare,
+  Table,
+  Book2,
+  Code2
+} from '@/components/ui/icons';
+import { KEYS } from 'platejs';
+import { type PlateEditor, useEditorRef } from 'platejs/react';
+
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger
+} from '@/components/ui/dropdown-menu';
+import { insertBlock, insertInlineElement } from './transforms';
+
+import { ToolbarButton, ToolbarMenuGroup } from './Toolbar';
+
+type Group = {
+  group: string;
+  items: Item[];
+};
+
+interface Item {
+  icon: React.ReactNode;
+  value: string;
+  onSelect: (editor: PlateEditor, value: string) => void;
+  focusEditor?: boolean;
+  label?: string;
+}
+
+const groups: Group[] = [
+  {
+    group: 'Basic blocks',
+    items: [
+      {
+        icon: <Pilcrow />,
+        label: 'Paragraph',
+        value: KEYS.p
+      },
+      {
+        icon: <Heading1 />,
+        label: 'Heading 1',
+        value: 'h1'
+      },
+      {
+        icon: <Heading2 />,
+        label: 'Heading 2',
+        value: 'h2'
+      },
+      {
+        icon: <Heading3 />,
+        label: 'Heading 3',
+        value: 'h3'
+      },
+      {
+        icon: <Table />,
+        label: 'Table',
+        value: KEYS.table
+      },
+      {
+        icon: <Code2 />,
+        label: 'Code',
+        value: KEYS.codeBlock
+      },
+      {
+        icon: <Quote />,
+        label: 'Quote',
+        value: KEYS.blockquote
+      },
+      {
+        icon: <Minus />,
+        label: 'Divider',
+        value: KEYS.hr
+      }
+    ].map((item) => ({
+      ...item,
+      onSelect: (editor, value) => {
+        insertBlock(editor, value);
+      }
+    }))
+  },
+  {
+    group: 'Lists',
+    items: [
+      {
+        icon: <UnorderedList />,
+        label: 'Bulleted list',
+        value: KEYS.ul
+      },
+      {
+        icon: <OrderedList />,
+        label: 'Numbered list',
+        value: KEYS.ol
+      },
+      {
+        icon: <ShapeSquare />,
+        label: 'To-do list',
+        value: KEYS.listTodo
+      },
+      {
+        icon: <ChevronRight />,
+        label: 'Toggle list',
+        value: KEYS.toggle
+      }
+    ].map((item) => ({
+      ...item,
+      onSelect: (editor, value) => {
+        insertBlock(editor, value);
+      }
+    }))
+  },
+  {
+    group: 'Media',
+    items: [
+      {
+        icon: <Image />,
+        label: 'Image',
+        value: KEYS.img
+      },
+      {
+        icon: <Film />,
+        label: 'Embed',
+        value: KEYS.mediaEmbed
+      }
+    ].map((item) => ({
+      ...item,
+      onSelect: (editor, value) => {
+        insertBlock(editor, value);
+      }
+    }))
+  },
+  {
+    group: 'Advanced blocks',
+    items: [
+      {
+        icon: <Book2 />,
+        label: 'Table of contents',
+        value: KEYS.toc
+      },
+      {
+        icon: <GridLayoutCols3 />,
+        label: '3 columns',
+        value: 'action_three_columns'
+      },
+      {
+        focusEditor: false,
+        icon: <Equation />,
+        label: 'Equation',
+        value: KEYS.equation
+      }
+    ].map((item) => ({
+      ...item,
+      onSelect: (editor, value) => {
+        insertBlock(editor, value);
+      }
+    }))
+  },
+  {
+    group: 'Inline',
+    items: [
+      {
+        icon: <Link2 />,
+        label: 'Link',
+        value: KEYS.link
+      },
+      {
+        focusEditor: true,
+        icon: <Calendar />,
+        label: 'Date',
+        value: KEYS.date
+      },
+      {
+        focusEditor: false,
+        icon: <Equation />,
+        label: 'Inline Equation',
+        value: KEYS.inlineEquation
+      }
+    ].map((item) => ({
+      ...item,
+      onSelect: (editor, value) => {
+        insertInlineElement(editor, value);
+      }
+    }))
+  }
+];
+
+export function InsertToolbarButton(props: DropdownMenuProps) {
+  const editor = useEditorRef();
+  const [open, setOpen] = React.useState(false);
+
+  return (
+    <DropdownMenu open={open} onOpenChange={setOpen} modal={false} {...props}>
+      <DropdownMenuTrigger asChild>
+        <ToolbarButton pressed={open} tooltip="Insert" isDropdown>
+          <Plus />
+        </ToolbarButton>
+      </DropdownMenuTrigger>
+
+      <DropdownMenuContent
+        className="flex max-h-[500px] min-w-0 flex-col overflow-y-auto"
+        align="start">
+        {groups.map(({ group, items: nestedItems }) => (
+          <ToolbarMenuGroup key={group} label={group}>
+            {nestedItems.map(({ icon, label, value, onSelect }) => (
+              <DropdownMenuItem
+                key={value}
+                className="min-w-[180px]"
+                onSelect={() => {
+                  onSelect(editor, value);
+                  editor.tf.focus();
+                }}>
+                {icon}
+                {label}
+              </DropdownMenuItem>
+            ))}
+          </ToolbarMenuGroup>
+        ))}
+      </DropdownMenuContent>
+    </DropdownMenu>
+  );
+}
diff --git a/apps/web/src/components/ui/report/elements/LineHeightToolbarButton.tsx b/apps/web/src/components/ui/report/elements/LineHeightToolbarButton.tsx
new file mode 100644
index 000000000..d48089a8d
--- /dev/null
+++ b/apps/web/src/components/ui/report/elements/LineHeightToolbarButton.tsx
@@ -0,0 +1,68 @@
+'use client';
+
+import * as React from 'react';
+
+import type { DropdownMenuProps } from '@radix-ui/react-dropdown-menu';
+
+import { LineHeightPlugin } from '@platejs/basic-styles/react';
+import { DropdownMenuItemIndicator } from '@radix-ui/react-dropdown-menu';
+import { Check, TextTool2 } from '@/components/ui/icons';
+import { useEditorRef, useSelectionFragmentProp } from 'platejs/react';
+
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuRadioGroup,
+  DropdownMenuRadioItem,
+  DropdownMenuTrigger
+} from '@/components/ui/dropdown-menu';
+
+import { ToolbarButton } from './Toolbar';
+
+export function LineHeightToolbarButton(props: DropdownMenuProps) {
+  const editor = useEditorRef();
+  const { defaultNodeValue, validNodeValues: values = [] } =
+    editor.getInjectProps(LineHeightPlugin);
+
+  const value = useSelectionFragmentProp({
+    defaultValue: defaultNodeValue,
+    getProp: (node) => node.lineHeight
+  });
+
+  const [open, setOpen] = React.useState(false);
+
+  return (
+    <DropdownMenu open={open} onOpenChange={setOpen} modal={false} {...props}>
+      <DropdownMenuTrigger asChild>
+        <ToolbarButton pressed={open} tooltip="Line height" isDropdown>
+          <div className="size-4">
+            <TextTool2 />
+          </div>
+        </ToolbarButton>
+      </DropdownMenuTrigger>
+
+      <DropdownMenuContent className="min-w-0" align="start">
+        <DropdownMenuRadioGroup
+          value={value}
+          onValueChange={(newValue) => {
+            editor.getTransforms(LineHeightPlugin).lineHeight.setNodes(Number(newValue));
+            editor.tf.focus();
+          }}>
+          {values.map((value) => (
+            <DropdownMenuRadioItem
+              key={value}
+              className="min-w-[180px] pl-2 *:first:[span]:hidden"
+              value={value}>
+              <span className="pointer-events-none absolute right-2 flex size-3.5 items-center justify-center">
+                <DropdownMenuItemIndicator>
+                  <Check />
+                </DropdownMenuItemIndicator>
+              </span>
+              {value}
+            </DropdownMenuRadioItem>
+          ))}
+        </DropdownMenuRadioGroup>
+      </DropdownMenuContent>
+    </DropdownMenu>
+  );
+}
diff --git a/apps/web/src/components/ui/report/elements/ListToolbarButton.tsx b/apps/web/src/components/ui/report/elements/ListToolbarButton.tsx
new file mode 100644
index 000000000..15f80ca07
--- /dev/null
+++ b/apps/web/src/components/ui/report/elements/ListToolbarButton.tsx
@@ -0,0 +1,192 @@
+'use client';
+
+import * as React from 'react';
+
+import { ListStyleType, someList, toggleList } from '@platejs/list';
+import { useIndentTodoToolBarButton, useIndentTodoToolBarButtonState } from '@platejs/list/react';
+import { UnorderedList, OrderedList, ListTodo } from '@/components/ui/icons';
+import { useEditorRef, useEditorSelector } from 'platejs/react';
+
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuGroup,
+  DropdownMenuItem,
+  DropdownMenuTrigger
+} from '@/components/ui/dropdown-menu';
+
+import {
+  ToolbarButton,
+  ToolbarSplitButton,
+  ToolbarSplitButtonPrimary,
+  ToolbarSplitButtonSecondary
+} from './Toolbar';
+
+export function BulletedListToolbarButton() {
+  const editor = useEditorRef();
+  const [open, setOpen] = React.useState(false);
+
+  const pressed = useEditorSelector(
+    (editor) => someList(editor, [ListStyleType.Disc, ListStyleType.Circle, ListStyleType.Square]),
+    []
+  );
+
+  return (
+    <ToolbarSplitButton pressed={open}>
+      <ToolbarSplitButtonPrimary
+        className="data-[state=on]:bg-accent data-[state=on]:text-accent-foreground"
+        onClick={() => {
+          toggleList(editor, {
+            listStyleType: ListStyleType.Disc
+          });
+        }}
+        data-state={pressed ? 'on' : 'off'}>
+        <div className="size-4">
+          <UnorderedList />
+        </div>
+      </ToolbarSplitButtonPrimary>
+
+      <DropdownMenu open={open} onOpenChange={setOpen} modal={false}>
+        <DropdownMenuTrigger asChild>
+          <ToolbarSplitButtonSecondary />
+        </DropdownMenuTrigger>
+
+        <DropdownMenuContent align="start" alignOffset={-32}>
+          <DropdownMenuGroup>
+            <DropdownMenuItem
+              onClick={() =>
+                toggleList(editor, {
+                  listStyleType: ListStyleType.Disc
+                })
+              }>
+              <div className="flex items-center gap-2">
+                <div className="size-2 rounded-full border border-current bg-current" />
+                Default
+              </div>
+            </DropdownMenuItem>
+            <DropdownMenuItem
+              onClick={() =>
+                toggleList(editor, {
+                  listStyleType: ListStyleType.Circle
+                })
+              }>
+              <div className="flex items-center gap-2">
+                <div className="size-2 rounded-full border border-current" />
+                Circle
+              </div>
+            </DropdownMenuItem>
+            <DropdownMenuItem
+              onClick={() =>
+                toggleList(editor, {
+                  listStyleType: ListStyleType.Square
+                })
+              }>
+              <div className="flex items-center gap-2">
+                <div className="size-2 border border-current bg-current" />
+                Square
+              </div>
+            </DropdownMenuItem>
+          </DropdownMenuGroup>
+        </DropdownMenuContent>
+      </DropdownMenu>
+    </ToolbarSplitButton>
+  );
+}
+
+export function NumberedListToolbarButton() {
+  const editor = useEditorRef();
+  const [open, setOpen] = React.useState(false);
+
+  const pressed = useEditorSelector(
+    (editor) =>
+      someList(editor, [
+        ListStyleType.Decimal,
+        ListStyleType.LowerAlpha,
+        ListStyleType.UpperAlpha,
+        ListStyleType.LowerRoman,
+        ListStyleType.UpperRoman
+      ]),
+    []
+  );
+
+  return (
+    <ToolbarSplitButton pressed={open}>
+      <ToolbarSplitButtonPrimary
+        className="data-[state=on]:bg-accent data-[state=on]:text-accent-foreground"
+        onClick={() =>
+          toggleList(editor, {
+            listStyleType: ListStyleType.Decimal
+          })
+        }
+        data-state={pressed ? 'on' : 'off'}>
+        <div className="size-4">
+          <OrderedList />
+        </div>
+      </ToolbarSplitButtonPrimary>
+
+      <DropdownMenu open={open} onOpenChange={setOpen} modal={false}>
+        <DropdownMenuTrigger asChild>
+          <ToolbarSplitButtonSecondary />
+        </DropdownMenuTrigger>
+
+        <DropdownMenuContent align="start" alignOffset={-32}>
+          <DropdownMenuGroup>
+            <DropdownMenuItem
+              onSelect={() =>
+                toggleList(editor, {
+                  listStyleType: ListStyleType.Decimal
+                })
+              }>
+              Decimal (1, 2, 3)
+            </DropdownMenuItem>
+            <DropdownMenuItem
+              onSelect={() =>
+                toggleList(editor, {
+                  listStyleType: ListStyleType.LowerAlpha
+                })
+              }>
+              Lower Alpha (a, b, c)
+            </DropdownMenuItem>
+            <DropdownMenuItem
+              onSelect={() =>
+                toggleList(editor, {
+                  listStyleType: ListStyleType.UpperAlpha
+                })
+              }>
+              Upper Alpha (A, B, C)
+            </DropdownMenuItem>
+            <DropdownMenuItem
+              onSelect={() =>
+                toggleList(editor, {
+                  listStyleType: ListStyleType.LowerRoman
+                })
+              }>
+              Lower Roman (i, ii, iii)
+            </DropdownMenuItem>
+            <DropdownMenuItem
+              onSelect={() =>
+                toggleList(editor, {
+                  listStyleType: ListStyleType.UpperRoman
+                })
+              }>
+              Upper Roman (I, II, III)
+            </DropdownMenuItem>
+          </DropdownMenuGroup>
+        </DropdownMenuContent>
+      </DropdownMenu>
+    </ToolbarSplitButton>
+  );
+}
+
+export function TodoListToolbarButton(props: React.ComponentProps<typeof ToolbarButton>) {
+  const state = useIndentTodoToolBarButtonState({ nodeType: 'todo' });
+  const { props: buttonProps } = useIndentTodoToolBarButton(state);
+
+  return (
+    <ToolbarButton {...props} {...buttonProps} tooltip="Todo">
+      <div className="size-4">
+        <ListTodo />
+      </div>
+    </ToolbarButton>
+  );
+}
diff --git a/apps/web/src/components/ui/report/elements/MediaToolbarButton.tsx b/apps/web/src/components/ui/report/elements/MediaToolbarButton.tsx
new file mode 100644
index 000000000..3630d9f83
--- /dev/null
+++ b/apps/web/src/components/ui/report/elements/MediaToolbarButton.tsx
@@ -0,0 +1,224 @@
+'use client';
+
+import * as React from 'react';
+
+import type { DropdownMenuProps } from '@radix-ui/react-dropdown-menu';
+
+import { PlaceholderPlugin } from '@platejs/media/react';
+import { VolumeUp, FileCloud, Film, Image, Link } from '@/components/ui/icons';
+import { isUrl, KEYS } from 'platejs';
+import { useEditorRef } from 'platejs/react';
+import { toast } from 'sonner';
+import { useFilePicker } from 'use-file-picker';
+
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle
+} from '@/components/ui/alert-dialog';
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuGroup,
+  DropdownMenuItem,
+  DropdownMenuTrigger
+} from '@/components/ui/dropdown-menu';
+import { Input } from '@/components/ui/inputs';
+
+import {
+  ToolbarSplitButton,
+  ToolbarSplitButtonPrimary,
+  ToolbarSplitButtonSecondary
+} from './Toolbar';
+
+const MEDIA_CONFIG: Record<
+  string,
+  {
+    accept: string[];
+    icon: React.ReactNode;
+    title: string;
+    tooltip: string;
+  }
+> = {
+  [KEYS.audio]: {
+    accept: ['audio/*'],
+    icon: (
+      <div className="size-4">
+        <VolumeUp />
+      </div>
+    ),
+    title: 'Insert Audio',
+    tooltip: 'Audio'
+  },
+  [KEYS.file]: {
+    accept: ['*'],
+    icon: (
+      <div className="size-4">
+        <FileCloud />
+      </div>
+    ),
+    title: 'Insert File',
+    tooltip: 'File'
+  },
+  [KEYS.img]: {
+    accept: ['image/*'],
+    icon: (
+      <div className="size-4">
+        <Image />
+      </div>
+    ),
+    title: 'Insert Image',
+    tooltip: 'Image'
+  },
+  [KEYS.video]: {
+    accept: ['video/*'],
+    icon: (
+      <div className="size-4">
+        <Film />
+      </div>
+    ),
+    title: 'Insert Video',
+    tooltip: 'Video'
+  }
+};
+
+export function MediaToolbarButton({
+  nodeType,
+  ...props
+}: DropdownMenuProps & { nodeType: string }) {
+  const currentConfig = MEDIA_CONFIG[nodeType];
+
+  const editor = useEditorRef();
+  const [open, setOpen] = React.useState(false);
+  const [dialogOpen, setDialogOpen] = React.useState(false);
+
+  const { openFilePicker } = useFilePicker({
+    accept: currentConfig.accept,
+    multiple: true,
+    onFilesSelected: ({ plainFiles: updatedFiles }) => {
+      editor.getTransforms(PlaceholderPlugin).insert.media(updatedFiles);
+    }
+  });
+
+  return (
+    <>
+      <ToolbarSplitButton
+        onClick={() => {
+          openFilePicker();
+        }}
+        onKeyDown={(e) => {
+          if (e.key === 'ArrowDown') {
+            e.preventDefault();
+            setOpen(true);
+          }
+        }}
+        pressed={open}>
+        <ToolbarSplitButtonPrimary>{currentConfig.icon}</ToolbarSplitButtonPrimary>
+
+        <DropdownMenu open={open} onOpenChange={setOpen} modal={false} {...props}>
+          <DropdownMenuTrigger asChild>
+            <ToolbarSplitButtonSecondary />
+          </DropdownMenuTrigger>
+
+          <DropdownMenuContent onClick={(e) => e.stopPropagation()} align="start" alignOffset={-32}>
+            <DropdownMenuGroup>
+              <DropdownMenuItem onSelect={() => openFilePicker()}>
+                {currentConfig.icon}
+                Upload from computer
+              </DropdownMenuItem>
+              <DropdownMenuItem onSelect={() => setDialogOpen(true)}>
+                <div className="size-4">
+                  <Link />
+                </div>
+                Insert via URL
+              </DropdownMenuItem>
+            </DropdownMenuGroup>
+          </DropdownMenuContent>
+        </DropdownMenu>
+      </ToolbarSplitButton>
+
+      <AlertDialog
+        open={dialogOpen}
+        onOpenChange={(value) => {
+          setDialogOpen(value);
+        }}>
+        <AlertDialogContent className="gap-6">
+          <MediaUrlDialogContent
+            currentConfig={currentConfig}
+            nodeType={nodeType}
+            setOpen={setDialogOpen}
+          />
+        </AlertDialogContent>
+      </AlertDialog>
+    </>
+  );
+}
+
+function MediaUrlDialogContent({
+  currentConfig,
+  nodeType,
+  setOpen
+}: {
+  currentConfig: (typeof MEDIA_CONFIG)[string];
+  nodeType: string;
+  setOpen: (value: boolean) => void;
+}) {
+  const editor = useEditorRef();
+  const [url, setUrl] = React.useState('');
+
+  const embedMedia = React.useCallback(() => {
+    if (!isUrl(url)) return toast.error('Invalid URL');
+
+    setOpen(false);
+    editor.tf.insertNodes({
+      children: [{ text: '' }],
+      name: nodeType === KEYS.file ? url.split('/').pop() : undefined,
+      type: nodeType,
+      url
+    });
+  }, [url, editor, nodeType, setOpen]);
+
+  return (
+    <>
+      <AlertDialogHeader>
+        <AlertDialogTitle>{currentConfig.title}</AlertDialogTitle>
+      </AlertDialogHeader>
+
+      <AlertDialogDescription className="group relative w-full">
+        <label
+          className="text-muted-foreground/70 group-focus-within:text-foreground has-[+input:not(:placeholder-shown)]:text-foreground absolute top-1/2 block -translate-y-1/2 cursor-text px-1 text-sm transition-all group-focus-within:pointer-events-none group-focus-within:top-0 group-focus-within:cursor-default group-focus-within:text-xs group-focus-within:font-medium has-[+input:not(:placeholder-shown)]:pointer-events-none has-[+input:not(:placeholder-shown)]:top-0 has-[+input:not(:placeholder-shown)]:cursor-default has-[+input:not(:placeholder-shown)]:text-xs has-[+input:not(:placeholder-shown)]:font-medium"
+          htmlFor="url">
+          <span className="bg-background inline-flex px-2">URL</span>
+        </label>
+        <Input
+          id="url"
+          className="w-full"
+          value={url}
+          onChange={(e) => setUrl(e.target.value)}
+          onKeyDown={(e) => {
+            if (e.key === 'Enter') embedMedia();
+          }}
+          placeholder=""
+          type="url"
+          autoFocus
+        />
+      </AlertDialogDescription>
+
+      <AlertDialogFooter>
+        <AlertDialogCancel>Cancel</AlertDialogCancel>
+        <AlertDialogAction
+          onClick={(e) => {
+            e.preventDefault();
+            embedMedia();
+          }}>
+          Accept
+        </AlertDialogAction>
+      </AlertDialogFooter>
+    </>
+  );
+}
diff --git a/apps/web/src/components/ui/report/elements/ModeToolbarButton.tsx b/apps/web/src/components/ui/report/elements/ModeToolbarButton.tsx
new file mode 100644
index 000000000..9ee072e76
--- /dev/null
+++ b/apps/web/src/components/ui/report/elements/ModeToolbarButton.tsx
@@ -0,0 +1,120 @@
+'use client';
+
+import * as React from 'react';
+
+import { SuggestionPlugin } from '@platejs/suggestion/react';
+import { type DropdownMenuProps, DropdownMenuItemIndicator } from '@radix-ui/react-dropdown-menu';
+import { Check, Eye, Pencil2, Pen } from '@/components/ui/icons';
+import { useEditorRef, usePlateState, usePluginOption } from 'platejs/react';
+
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuRadioGroup,
+  DropdownMenuRadioItem,
+  DropdownMenuTrigger
+} from '@/components/ui/dropdown-menu';
+
+import { ToolbarButton } from './Toolbar';
+
+export function ModeToolbarButton(props: DropdownMenuProps) {
+  const editor = useEditorRef();
+  const [readOnly, setReadOnly] = usePlateState('readOnly');
+  const [open, setOpen] = React.useState(false);
+
+  const isSuggesting = usePluginOption(SuggestionPlugin, 'isSuggesting');
+
+  let value = 'editing';
+
+  if (readOnly) value = 'viewing';
+
+  if (isSuggesting) value = 'suggestion';
+
+  const item: Record<string, { icon: React.ReactNode; label: string }> = {
+    editing: {
+      icon: <Pen />,
+      label: 'Editing'
+    },
+    suggestion: {
+      icon: <Pencil2 />,
+      label: 'Suggestion'
+    },
+    viewing: {
+      icon: <Eye />,
+      label: 'Viewing'
+    }
+  };
+
+  return (
+    <DropdownMenu open={open} onOpenChange={setOpen} modal={false} {...props}>
+      <DropdownMenuTrigger asChild>
+        <ToolbarButton pressed={open} tooltip="Editing mode" isDropdown>
+          {item[value].icon}
+          <span className="hidden lg:inline">{item[value].label}</span>
+        </ToolbarButton>
+      </DropdownMenuTrigger>
+
+      <DropdownMenuContent className="min-w-[180px]" align="start">
+        <DropdownMenuRadioGroup
+          value={value}
+          onValueChange={(newValue) => {
+            if (newValue === 'viewing') {
+              setReadOnly(true);
+
+              return;
+            } else {
+              setReadOnly(false);
+            }
+
+            if (newValue === 'suggestion') {
+              editor.setOption(SuggestionPlugin, 'isSuggesting', true);
+
+              return;
+            } else {
+              editor.setOption(SuggestionPlugin, 'isSuggesting', false);
+            }
+
+            if (newValue === 'editing') {
+              editor.tf.focus();
+
+              return;
+            }
+          }}>
+          <DropdownMenuRadioItem
+            className="*:[svg]:text-muted-foreground pl-2 *:first:[span]:hidden"
+            value="editing">
+            <Indicator />
+            {item.editing.icon}
+            {item.editing.label}
+          </DropdownMenuRadioItem>
+
+          <DropdownMenuRadioItem
+            className="*:[svg]:text-muted-foreground pl-2 *:first:[span]:hidden"
+            value="viewing">
+            <Indicator />
+            {item.viewing.icon}
+            {item.viewing.label}
+          </DropdownMenuRadioItem>
+
+          <DropdownMenuRadioItem
+            className="*:[svg]:text-muted-foreground pl-2 *:first:[span]:hidden"
+            value="suggestion">
+            <Indicator />
+            {item.suggestion.icon}
+            {item.suggestion.label}
+          </DropdownMenuRadioItem>
+        </DropdownMenuRadioGroup>
+      </DropdownMenuContent>
+    </DropdownMenu>
+  );
+}
+
+function Indicator() {
+  return (
+    <span className="pointer-events-none absolute right-2 flex size-3.5 items-center justify-center">
+      <DropdownMenuItemIndicator>
+        <Check />
+      </DropdownMenuItemIndicator>
+    </span>
+  );
+}
diff --git a/apps/web/src/components/ui/report/elements/TableToolbarButton.tsx b/apps/web/src/components/ui/report/elements/TableToolbarButton.tsx
new file mode 100644
index 000000000..c0e5f61d1
--- /dev/null
+++ b/apps/web/src/components/ui/report/elements/TableToolbarButton.tsx
@@ -0,0 +1,272 @@
+'use client';
+
+import * as React from 'react';
+
+import type { DropdownMenuProps } from '@radix-ui/react-dropdown-menu';
+
+import { TablePlugin, useTableMergeState } from '@platejs/table/react';
+// import {
+//   ArrowDown,
+//   ArrowLeft,
+//   ArrowRight,
+//   ArrowUp,
+//   Combine,
+//   Grid3x3Icon,
+//   Table,
+//   Trash2Icon,
+//   Ungroup,
+//   XIcon
+// } from 'lucide-react';
+import {
+  ArrowDown,
+  ArrowLeft,
+  ArrowRight,
+  ArrowUp,
+  Merge,
+  Grid3X3,
+  Table,
+  Trash2,
+  Ungroup,
+  Xmark
+} from '@/components/ui/icons';
+import { KEYS } from 'platejs';
+import { useEditorPlugin, useEditorSelector } from 'platejs/react';
+
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuGroup,
+  DropdownMenuItem,
+  DropdownMenuSub,
+  DropdownMenuSubContent,
+  DropdownMenuSubTrigger,
+  DropdownMenuTrigger
+} from '@/components/ui/dropdown-menu';
+import { cn } from '@/lib/utils';
+
+import { ToolbarButton } from './Toolbar';
+
+export function TableToolbarButton(props: DropdownMenuProps) {
+  const tableSelected = useEditorSelector(
+    (editor) => editor.api.some({ match: { type: KEYS.table } }),
+    []
+  );
+
+  const { editor, tf } = useEditorPlugin(TablePlugin);
+  const [open, setOpen] = React.useState(false);
+  const mergeState = useTableMergeState();
+
+  return (
+    <DropdownMenu open={open} onOpenChange={setOpen} modal={false} {...props}>
+      <DropdownMenuTrigger asChild>
+        <ToolbarButton pressed={open} tooltip="Table" isDropdown>
+          <Table />
+        </ToolbarButton>
+      </DropdownMenuTrigger>
+
+      <DropdownMenuContent className="flex w-[180px] min-w-0 flex-col" align="start">
+        <DropdownMenuGroup>
+          <DropdownMenuSub>
+            <DropdownMenuSubTrigger className="gap-2 data-[disabled]:pointer-events-none data-[disabled]:opacity-50">
+              <div className="size-4">
+                <Grid3X3 />
+              </div>
+              <span>Table</span>
+            </DropdownMenuSubTrigger>
+            <DropdownMenuSubContent className="m-0 p-0">
+              <TablePicker />
+            </DropdownMenuSubContent>
+          </DropdownMenuSub>
+
+          <DropdownMenuSub>
+            <DropdownMenuSubTrigger
+              className="gap-2 data-[disabled]:pointer-events-none data-[disabled]:opacity-50"
+              disabled={!tableSelected}>
+              <div className="size-4" />
+              <span>Cell</span>
+            </DropdownMenuSubTrigger>
+            <DropdownMenuSubContent>
+              <DropdownMenuItem
+                className="min-w-[180px]"
+                disabled={!mergeState.canMerge}
+                onSelect={() => {
+                  tf.table.merge();
+                  editor.tf.focus();
+                }}>
+                <div className="size-4">
+                  <Merge />
+                </div>
+                Merge cells
+              </DropdownMenuItem>
+              <DropdownMenuItem
+                className="min-w-[180px]"
+                disabled={!mergeState.canSplit}
+                onSelect={() => {
+                  tf.table.split();
+                  editor.tf.focus();
+                }}>
+                <Ungroup />
+                Split cell
+              </DropdownMenuItem>
+            </DropdownMenuSubContent>
+          </DropdownMenuSub>
+
+          <DropdownMenuSub>
+            <DropdownMenuSubTrigger
+              className="gap-2 data-[disabled]:pointer-events-none data-[disabled]:opacity-50"
+              disabled={!tableSelected}>
+              <div className="size-4" />
+              <span>Row</span>
+            </DropdownMenuSubTrigger>
+            <DropdownMenuSubContent>
+              <DropdownMenuItem
+                className="min-w-[180px]"
+                disabled={!tableSelected}
+                onSelect={() => {
+                  tf.insert.tableRow({ before: true });
+                  editor.tf.focus();
+                }}>
+                <ArrowUp />
+                Insert row before
+              </DropdownMenuItem>
+              <DropdownMenuItem
+                className="min-w-[180px]"
+                disabled={!tableSelected}
+                onSelect={() => {
+                  tf.insert.tableRow();
+                  editor.tf.focus();
+                }}>
+                <ArrowDown />
+                Insert row after
+              </DropdownMenuItem>
+              <DropdownMenuItem
+                className="min-w-[180px]"
+                disabled={!tableSelected}
+                onSelect={() => {
+                  tf.remove.tableRow();
+                  editor.tf.focus();
+                }}>
+                <div className="size-4">
+                  <Xmark />
+                </div>
+                Delete row
+              </DropdownMenuItem>
+            </DropdownMenuSubContent>
+          </DropdownMenuSub>
+
+          <DropdownMenuSub>
+            <DropdownMenuSubTrigger
+              className="gap-2 data-[disabled]:pointer-events-none data-[disabled]:opacity-50"
+              disabled={!tableSelected}>
+              <div className="size-4" />
+              <span>Column</span>
+            </DropdownMenuSubTrigger>
+            <DropdownMenuSubContent>
+              <DropdownMenuItem
+                className="min-w-[180px]"
+                disabled={!tableSelected}
+                onSelect={() => {
+                  tf.insert.tableColumn({ before: true });
+                  editor.tf.focus();
+                }}>
+                <ArrowLeft />
+                Insert column before
+              </DropdownMenuItem>
+              <DropdownMenuItem
+                className="min-w-[180px]"
+                disabled={!tableSelected}
+                onSelect={() => {
+                  tf.insert.tableColumn();
+                  editor.tf.focus();
+                }}>
+                <ArrowRight />
+                Insert column after
+              </DropdownMenuItem>
+              <DropdownMenuItem
+                className="min-w-[180px]"
+                disabled={!tableSelected}
+                onSelect={() => {
+                  tf.remove.tableColumn();
+                  editor.tf.focus();
+                }}>
+                <div className="size-4">
+                  <Xmark />
+                </div>
+                Delete column
+              </DropdownMenuItem>
+            </DropdownMenuSubContent>
+          </DropdownMenuSub>
+
+          <DropdownMenuItem
+            className="min-w-[180px]"
+            disabled={!tableSelected}
+            onSelect={() => {
+              tf.remove.table();
+              editor.tf.focus();
+            }}>
+            <div className="size-4">
+              <Trash2 />
+            </div>
+            Delete table
+          </DropdownMenuItem>
+        </DropdownMenuGroup>
+      </DropdownMenuContent>
+    </DropdownMenu>
+  );
+}
+
+function TablePicker() {
+  const { editor, tf } = useEditorPlugin(TablePlugin);
+
+  const [tablePicker, setTablePicker] = React.useState({
+    grid: Array.from({ length: 8 }, () => Array.from({ length: 8 }).fill(0)),
+    size: { colCount: 0, rowCount: 0 }
+  });
+
+  const onCellMove = (rowIndex: number, colIndex: number) => {
+    const newGrid = [...tablePicker.grid];
+
+    for (let i = 0; i < newGrid.length; i++) {
+      for (let j = 0; j < newGrid[i].length; j++) {
+        newGrid[i][j] = i >= 0 && i <= rowIndex && j >= 0 && j <= colIndex ? 1 : 0;
+      }
+    }
+
+    setTablePicker({
+      grid: newGrid,
+      size: { colCount: colIndex + 1, rowCount: rowIndex + 1 }
+    });
+  };
+
+  return (
+    <div
+      className="m-0 flex! flex-col p-0"
+      onClick={() => {
+        tf.insert.table(tablePicker.size, { select: true });
+        editor.tf.focus();
+      }}>
+      <div className="grid size-[130px] grid-cols-8 gap-0.5 p-1">
+        {tablePicker.grid.map((rows, rowIndex) =>
+          rows.map((value, columIndex) => {
+            return (
+              <div
+                key={`(${rowIndex},${columIndex})`}
+                className={cn(
+                  'bg-secondary col-span-1 size-3 border border-solid',
+                  !!value && 'border-current'
+                )}
+                onMouseMove={() => {
+                  onCellMove(rowIndex, columIndex);
+                }}
+              />
+            );
+          })
+        )}
+      </div>
+
+      <div className="text-center text-xs text-current">
+        {tablePicker.size.rowCount} x {tablePicker.size.colCount}
+      </div>
+    </div>
+  );
+}
diff --git a/apps/web/src/components/ui/report/elements/ToggleToolbarButton.tsx b/apps/web/src/components/ui/report/elements/ToggleToolbarButton.tsx
new file mode 100644
index 000000000..82f712e71
--- /dev/null
+++ b/apps/web/src/components/ui/report/elements/ToggleToolbarButton.tsx
@@ -0,0 +1,19 @@
+'use client';
+
+import * as React from 'react';
+
+import { useToggleToolbarButton, useToggleToolbarButtonState } from '@platejs/toggle/react';
+import { DescendingSorting } from '@/components/ui/icons';
+
+import { ToolbarButton } from './Toolbar';
+
+export function ToggleToolbarButton(props: React.ComponentProps<typeof ToolbarButton>) {
+  const state = useToggleToolbarButtonState();
+  const { props: buttonProps } = useToggleToolbarButton(state);
+
+  return (
+    <ToolbarButton {...props} {...buttonProps} tooltip="Toggle">
+      <DescendingSorting />
+    </ToolbarButton>
+  );
+}