diff --git a/src/components/editor/use-create-editor.ts b/src/components/editor/use-create-editor.ts
index a9ae7be..fcd10ec 100644
--- a/src/components/editor/use-create-editor.ts
+++ b/src/components/editor/use-create-editor.ts
@@ -31,6 +31,10 @@ import { HorizontalRulePlugin } from '@udecode/plate-horizontal-rule/react';
 import { KbdPlugin } from '@udecode/plate-kbd/react';
 import { ColumnItemPlugin, ColumnPlugin } from '@udecode/plate-layout/react';
 import { LinkPlugin } from '@udecode/plate-link/react';
+import {
+  EquationPlugin,
+  InlineEquationPlugin,
+} from '@udecode/plate-math/react';
 import {
   AudioPlugin,
   FilePlugin,
@@ -67,11 +71,13 @@ import { ColumnGroupElement } from '@/components/plate-ui/column-group-element';
 import { CommentLeaf } from '@/components/plate-ui/comment-leaf';
 import { DateElement } from '@/components/plate-ui/date-element';
 import { EmojiInputElement } from '@/components/plate-ui/emoji-input-element';
+import { EquationElement } from '@/components/plate-ui/equation-element';
 import { ExcalidrawElement } from '@/components/plate-ui/excalidraw-element';
 import { HeadingElement } from '@/components/plate-ui/heading-element';
 import { HighlightLeaf } from '@/components/plate-ui/highlight-leaf';
 import { HrElement } from '@/components/plate-ui/hr-element';
 import { ImageElement } from '@/components/plate-ui/image-element';
+import { InlineEquationElement } from '@/components/plate-ui/inline-equation-element';
 import { KbdLeaf } from '@/components/plate-ui/kbd-leaf';
 import { LinkElement } from '@/components/plate-ui/link-element';
 import { MediaAudioElement } from '@/components/plate-ui/media-audio-element';
@@ -110,6 +116,7 @@ export const useCreateEditor = () => {
         [CommentsPlugin.key]: CommentLeaf,
         [DatePlugin.key]: DateElement,
         [EmojiInputPlugin.key]: EmojiInputElement,
+        [EquationPlugin.key]: EquationElement,
         [ExcalidrawPlugin.key]: ExcalidrawElement,
         [FilePlugin.key]: MediaFileElement,
         [HEADING_KEYS.h1]: withProps(HeadingElement, { variant: 'h1' }),
@@ -121,6 +128,7 @@ export const useCreateEditor = () => {
         [HighlightPlugin.key]: HighlightLeaf,
         [HorizontalRulePlugin.key]: HrElement,
         [ImagePlugin.key]: ImageElement,
+        [InlineEquationPlugin.key]: InlineEquationElement,
         [ItalicPlugin.key]: withProps(PlateLeaf, { as: 'em' }),
         [KbdPlugin.key]: KbdLeaf,
         [LinkPlugin.key]: LinkElement,
diff --git a/src/components/plate-ui/equation-element-static.tsx b/src/components/plate-ui/equation-element-static.tsx
new file mode 100644
index 0000000..ec90463
--- /dev/null
+++ b/src/components/plate-ui/equation-element-static.tsx
@@ -0,0 +1,48 @@
+import React from 'react';
+
+import type { TEquationElement } from '@udecode/plate-math';
+
+import { cn } from '@udecode/cn';
+import { type SlateElementProps, SlateElement } from '@udecode/plate-common';
+import { getEquationHtml } from '@udecode/plate-math';
+
+export function EquationElementStatic({
+  children,
+  className,
+  ...props
+}: SlateElementProps) {
+  const element = props.element as TEquationElement;
+
+  const html = getEquationHtml({
+    element,
+    options: {
+      displayMode: true,
+      errorColor: '#cc0000',
+      fleqn: false,
+      leqno: false,
+      macros: { '\\f': '#1f(#2)' },
+      output: 'htmlAndMathml',
+      strict: 'warn',
+      throwOnError: false,
+      trust: false,
+    },
+  });
+
+  return (
+    <SlateElement className={cn('relative my-1', className)} {...props}>
+      <div
+        className={cn(
+          'flex select-none items-center justify-center rounded-sm',
+          element.texExpression.length === 0 ? 'bg-muted p-3' : 'px-2 py-1'
+        )}
+      >
+        <span
+          dangerouslySetInnerHTML={{
+            __html: html,
+          }}
+        />
+      </div>
+      {children}
+    </SlateElement>
+  );
+}
diff --git a/src/components/plate-ui/export-toolbar-button.tsx b/src/components/plate-ui/export-toolbar-button.tsx
index daf1e02..1be6863 100644
--- a/src/components/plate-ui/export-toolbar-button.tsx
+++ b/src/components/plate-ui/export-toolbar-button.tsx
@@ -49,6 +49,10 @@ import { BaseKbdPlugin } from '@udecode/plate-kbd';
 import { BaseColumnItemPlugin, BaseColumnPlugin } from '@udecode/plate-layout';
 import { BaseLineHeightPlugin } from '@udecode/plate-line-height';
 import { BaseLinkPlugin } from '@udecode/plate-link';
+import {
+  BaseEquationPlugin,
+  BaseInlineEquationPlugin,
+} from '@udecode/plate-math';
 import {
   BaseAudioPlugin,
   BaseFilePlugin,
@@ -113,6 +117,8 @@ import {
   useOpenState,
 } from './dropdown-menu';
 import { EditorStatic } from './editor-static';
+import { EquationElementStatic } from './equation-element-static';
+import { InlineEquationElementStatic } from './inline-equation-element-static';
 import { ToolbarButton } from './toolbar';
 
 const siteUrl = 'https://platejs.org';
@@ -197,10 +203,12 @@ export function ExportToolbarButton({ children, ...props }: DropdownMenuProps) {
       [BaseColumnPlugin.key]: ColumnGroupElementStatic,
       [BaseCommentsPlugin.key]: CommentLeafStatic,
       [BaseDatePlugin.key]: DateElementStatic,
+      [BaseEquationPlugin.key]: EquationElementStatic,
       [BaseFilePlugin.key]: MediaFileElementStatic,
       [BaseHighlightPlugin.key]: HighlightLeafStatic,
       [BaseHorizontalRulePlugin.key]: HrElementStatic,
       [BaseImagePlugin.key]: ImageElementStatic,
+      [BaseInlineEquationPlugin.key]: InlineEquationElementStatic,
       [BaseItalicPlugin.key]: withProps(SlateLeaf, { as: 'em' }),
       [BaseKbdPlugin.key]: KbdLeafStatic,
       [BaseLinkPlugin.key]: LinkElementStatic,
@@ -245,6 +253,8 @@ export function ExportToolbarButton({ children, ...props }: DropdownMenuProps) {
         BaseUnderlinePlugin,
         BaseBlockquotePlugin,
         BaseDatePlugin,
+        BaseEquationPlugin,
+        BaseInlineEquationPlugin,
         BaseCodeBlockPlugin.configure({
           options: {
             prism: Prism,
@@ -322,6 +332,7 @@ export function ExportToolbarButton({ children, ...props }: DropdownMenuProps) {
 
     const prismCss = `<link rel="stylesheet" href="${siteUrl}/prism.css">`;
     const tailwindCss = `<link rel="stylesheet" href="${siteUrl}/tailwind.css">`;
+    const katexCss = `<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@0.16.18/dist/katex.css" integrity="sha384-9PvLvaiSKCPkFKB1ZsEoTjgnJn+O3KvEwtsz37/XrkYft3DTk2gHdYvd9oWgW3tV" crossorigin="anonymous">`;
 
     const html = `<!DOCTYPE html>
     <html lang="en">
@@ -337,6 +348,7 @@ export function ExportToolbarButton({ children, ...props }: DropdownMenuProps) {
         />
         ${tailwindCss}
         ${prismCss}
+        ${katexCss}
         <style>
           :root {
             --font-sans: 'Inter', 'Inter Fallback';
diff --git a/src/components/plate-ui/inline-equation-element-static.tsx b/src/components/plate-ui/inline-equation-element-static.tsx
new file mode 100644
index 0000000..927a6ca
--- /dev/null
+++ b/src/components/plate-ui/inline-equation-element-static.tsx
@@ -0,0 +1,61 @@
+import React from 'react';
+
+import type { TEquationElement } from '@udecode/plate-math';
+
+import { cn } from '@udecode/cn';
+import { type SlateElementProps, SlateElement } from '@udecode/plate-common';
+import { getEquationHtml } from '@udecode/plate-math';
+
+export function InlineEquationElementStatic({
+  children,
+  className,
+  ...props
+}: SlateElementProps) {
+  const element = props.element as TEquationElement;
+
+  const html = getEquationHtml({
+    element,
+    options: {
+      displayMode: true,
+      errorColor: '#cc0000',
+      fleqn: false,
+      leqno: false,
+      macros: { '\\f': '#1f(#2)' },
+      output: 'htmlAndMathml',
+      strict: 'warn',
+      throwOnError: false,
+      trust: false,
+    },
+  });
+
+  return (
+    <SlateElement
+      className={cn(
+        'inline-block select-none rounded-sm [&_.katex-display]:my-0',
+        className
+      )}
+      {...props}
+    >
+      <div
+        className={cn(
+          'after:absolute after:inset-0 after:-left-1 after:-top-0.5 after:z-[1] after:h-[calc(100%)+4px] after:w-[calc(100%+8px)] after:rounded-sm after:content-[""]',
+          'h-6',
+          element.texExpression.length === 0 &&
+            'text-muted-foreground after:bg-neutral-500/10',
+          className
+        )}
+      >
+        <span
+          className={cn(
+            element.texExpression.length === 0 && 'hidden',
+            'font-mono leading-none'
+          )}
+          dangerouslySetInnerHTML={{
+            __html: html,
+          }}
+        />
+      </div>
+      {children}
+    </SlateElement>
+  );
+}
diff --git a/src/components/plate-ui/inline-equation-element.tsx b/src/components/plate-ui/inline-equation-element.tsx
new file mode 100644
index 0000000..dfcaa55
--- /dev/null
+++ b/src/components/plate-ui/inline-equation-element.tsx
@@ -0,0 +1,91 @@
+'use client';
+
+import { useRef, useState } from 'react';
+
+import type { TEquationElement } from '@udecode/plate-math';
+
+import { cn, withRef } from '@udecode/cn';
+import { useElement } from '@udecode/plate-common/react';
+import { useEquationElement } from '@udecode/plate-math/react';
+import { RadicalIcon } from 'lucide-react';
+import { useSelected } from 'slate-react';
+
+import { EquationPopoverContent } from './equation-popover';
+import { PlateElement } from './plate-element';
+import { Popover, PopoverTrigger } from './popover';
+
+export const InlineEquationElement = withRef<typeof PlateElement>(
+  ({ children, className, ...props }, ref) => {
+    const element = useElement<TEquationElement>();
+    const katexRef = useRef<HTMLDivElement | null>(null);
+    const selected = useSelected();
+    const [open, setOpen] = useState(selected);
+
+    useEquationElement({
+      element,
+      katexRef: katexRef,
+      options: {
+        displayMode: true,
+        errorColor: '#cc0000',
+        fleqn: false,
+        leqno: false,
+        macros: { '\\f': '#1f(#2)' },
+        output: 'htmlAndMathml',
+        strict: 'warn',
+        throwOnError: false,
+        trust: false,
+      },
+    });
+
+    return (
+      <PlateElement
+        ref={ref}
+        className={cn(
+          'inline-block select-none rounded-sm [&_.katex-display]:my-0',
+          className
+        )}
+        {...props}
+      >
+        <Popover open={open} onOpenChange={setOpen} modal={false}>
+          <PopoverTrigger asChild>
+            <div
+              className={cn(
+                'after:absolute after:inset-0 after:-left-1 after:-top-0.5 after:z-[1] after:h-[calc(100%)+4px] after:w-[calc(100%+8px)] after:rounded-sm after:content-[""]',
+                'h-6',
+                element.texExpression.length > 0 && open && 'after:bg-brand/15',
+                element.texExpression.length === 0 &&
+                  'text-muted-foreground after:bg-neutral-500/10',
+                className
+              )}
+              contentEditable={false}
+            >
+              <span
+                ref={katexRef}
+                className={cn(
+                  element.texExpression.length === 0 && 'hidden',
+                  'font-mono leading-none'
+                )}
+              />
+              {element.texExpression.length === 0 && (
+                <span>
+                  <RadicalIcon className="mr-1 inline-block h-[19px] w-4 py-[1.5px] align-text-bottom" />
+                  New equation
+                </span>
+              )}
+            </div>
+          </PopoverTrigger>
+
+          <EquationPopoverContent
+            className="my-auto"
+            open={open}
+            placeholder="E = mc^2"
+            setOpen={setOpen}
+            isInline
+          />
+        </Popover>
+
+        {children}
+      </PlateElement>
+    );
+  }
+);