diff --git a/surfsense_web/components/ui/block-list-static.tsx b/surfsense_web/components/ui/block-list-static.tsx
deleted file mode 100644
index 4efd7c12b..000000000
--- a/surfsense_web/components/ui/block-list-static.tsx
+++ /dev/null
@@ -1,85 +0,0 @@
-import * as React from 'react';
-
-import type { RenderStaticNodeWrapper, TListElement } from 'platejs';
-import type { SlateRenderElementProps } from 'platejs/static';
-
-import { isOrderedList } from '@platejs/list';
-import { CheckIcon } from 'lucide-react';
-
-import { cn } from '@/lib/utils';
-
-const config: Record<
-  string,
-  {
-    Li: React.FC<SlateRenderElementProps>;
-    Marker: React.FC<SlateRenderElementProps>;
-  }
-> = {
-  todo: {
-    Li: TodoLiStatic,
-    Marker: TodoMarkerStatic,
-  },
-};
-
-export const BlockListStatic: RenderStaticNodeWrapper = (props) => {
-  if (!props.element.listStyleType) return;
-
-  return (props) => <List {...props} />;
-};
-
-function List(props: SlateRenderElementProps) {
-  const { indent, listStart, listStyleType } = props.element as TListElement & {
-    indent?: number;
-  };
-  const { Li, Marker } = config[listStyleType] ?? {};
-  const List = isOrderedList(props.element) ? 'ol' : 'ul';
-
-  // Apply margin-left for indent (24px per level) for DOCX export compatibility
-  const marginLeft = indent ? `${indent * 24}px` : undefined;
-
-  return (
-    <List
-      className="relative m-0 p-0"
-      style={{ listStyleType, marginLeft }}
-      start={listStart}
-    >
-      {Marker && <Marker {...props} />}
-      {Li ? <Li {...props} /> : <li>{props.children}</li>}
-    </List>
-  );
-}
-
-function TodoMarkerStatic(props: SlateRenderElementProps) {
-  const checked = props.element.checked as boolean;
-
-  return (
-    <div contentEditable={false}>
-      <button
-        className={cn(
-          'peer -left-6 pointer-events-none absolute top-1 size-4 shrink-0 rounded-sm border border-primary bg-background ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground',
-          props.className
-        )}
-        data-state={checked ? 'checked' : 'unchecked'}
-        type="button"
-      >
-        <div className={cn('flex items-center justify-center text-current')}>
-          {checked && <CheckIcon className="size-4" />}
-        </div>
-      </button>
-    </div>
-  );
-}
-
-function TodoLiStatic(props: SlateRenderElementProps) {
-  return (
-    <li
-      className={cn(
-        'list-none',
-        (props.element.checked as boolean) &&
-          'text-muted-foreground line-through'
-      )}
-    >
-      {props.children}
-    </li>
-  );
-}
diff --git a/surfsense_web/components/ui/inline-combobox.tsx b/surfsense_web/components/ui/inline-combobox.tsx
new file mode 100644
index 000000000..cf056d3d8
--- /dev/null
+++ b/surfsense_web/components/ui/inline-combobox.tsx
@@ -0,0 +1,437 @@
+'use client';
+
+import * as React from 'react';
+
+import type { Point, TElement } from 'platejs';
+
+import {
+  type ComboboxItemProps,
+  Combobox,
+  ComboboxGroup,
+  ComboboxGroupLabel,
+  ComboboxItem,
+  ComboboxPopover,
+  ComboboxProvider,
+  ComboboxRow,
+  Portal,
+  useComboboxContext,
+  useComboboxStore,
+} from '@ariakit/react';
+import { filterWords } from '@platejs/combobox';
+import {
+  type UseComboboxInputResult,
+  useComboboxInput,
+  useHTMLInputCursorState,
+} from '@platejs/combobox/react';
+import { cva } from 'class-variance-authority';
+import { useComposedRef, useEditorRef } from 'platejs/react';
+
+import { cn } from '@/lib/utils';
+
+type FilterFn = (
+  item: { value: string; group?: string; keywords?: string[]; label?: string },
+  search: string
+) => boolean;
+
+type InlineComboboxContextValue = {
+  filter: FilterFn | false;
+  inputProps: UseComboboxInputResult['props'];
+  inputRef: React.RefObject<HTMLInputElement | null>;
+  removeInput: UseComboboxInputResult['removeInput'];
+  showTrigger: boolean;
+  trigger: string;
+  setHasEmpty: (hasEmpty: boolean) => void;
+};
+
+const InlineComboboxContext = React.createContext<InlineComboboxContextValue>(
+  null as unknown as InlineComboboxContextValue
+);
+
+const defaultFilter: FilterFn = (
+  { group, keywords = [], label, value },
+  search
+) => {
+  const uniqueTerms = new Set(
+    [value, ...keywords, group, label].filter(Boolean)
+  );
+
+  return Array.from(uniqueTerms).some((keyword) =>
+    filterWords(keyword!, search)
+  );
+};
+
+type InlineComboboxProps = {
+  children: React.ReactNode;
+  element: TElement;
+  trigger: string;
+  filter?: FilterFn | false;
+  hideWhenNoValue?: boolean;
+  showTrigger?: boolean;
+  value?: string;
+  setValue?: (value: string) => void;
+};
+
+const InlineCombobox = ({
+  children,
+  element,
+  filter = defaultFilter,
+  hideWhenNoValue = false,
+  setValue: setValueProp,
+  showTrigger = true,
+  trigger,
+  value: valueProp,
+}: InlineComboboxProps) => {
+  const editor = useEditorRef();
+  const inputRef = React.useRef<HTMLInputElement>(null);
+  const cursorState = useHTMLInputCursorState(inputRef);
+
+  const [valueState, setValueState] = React.useState('');
+  const hasValueProp = valueProp !== undefined;
+  const value = hasValueProp ? valueProp : valueState;
+
+  // Check if current user is the creator of this element (for Yjs collaboration)
+  const isCreator = React.useMemo(() => {
+    const elementUserId = (element as any).userId;
+    const currentUserId = editor.meta.userId;
+
+    // If no userId (backwards compatibility or non-Yjs), allow
+    if (!elementUserId) return true;
+
+    return elementUserId === currentUserId;
+  }, [editor.meta.userId, element]);
+
+  const setValue = React.useCallback(
+    (newValue: string) => {
+      setValueProp?.(newValue);
+
+      if (!hasValueProp) {
+        setValueState(newValue);
+      }
+    },
+    [setValueProp, hasValueProp]
+  );
+
+  /**
+   * Track the point just before the input element so we know where to
+   * insertText if the combobox closes due to a selection change.
+   */
+  const insertPoint = React.useRef<Point | null>(null);
+
+  React.useEffect(() => {
+    const path = editor.api.findPath(element);
+
+    if (!path) return;
+
+    const point = editor.api.before(path);
+
+    if (!point) return;
+
+    const pointRef = editor.api.pointRef(point);
+    insertPoint.current = pointRef.current;
+
+    return () => {
+      pointRef.unref();
+    };
+  }, [editor, element]);
+
+  const { props: inputProps, removeInput } = useComboboxInput({
+    cancelInputOnBlur: true,
+    cursorState,
+    autoFocus: isCreator,
+    ref: inputRef,
+    onCancelInput: (cause) => {
+      if (cause !== 'backspace') {
+        editor.tf.insertText(trigger + value, {
+          at: insertPoint?.current ?? undefined,
+        });
+      }
+      if (cause === 'arrowLeft' || cause === 'arrowRight') {
+        editor.tf.move({
+          distance: 1,
+          reverse: cause === 'arrowLeft',
+        });
+      }
+    },
+  });
+
+  const [hasEmpty, setHasEmpty] = React.useState(false);
+
+  const contextValue: InlineComboboxContextValue = React.useMemo(
+    () => ({
+      filter,
+      inputProps,
+      inputRef,
+      removeInput,
+      setHasEmpty,
+      showTrigger,
+      trigger,
+    }),
+    [
+      trigger,
+      showTrigger,
+      filter,
+      inputRef,
+      inputProps,
+      removeInput,
+      setHasEmpty,
+    ]
+  );
+
+  const store = useComboboxStore({
+    // open: ,
+    setValue: (newValue) => React.startTransition(() => setValue(newValue)),
+  });
+
+  const items = store.useState('items');
+
+  /**
+   * If there is no active ID and the list of items changes, select the first
+   * item.
+   */
+  React.useEffect(() => {
+    if (!store.getState().activeId) {
+      store.setActiveId(store.first());
+    }
+  }, [items, store]);
+
+  return (
+    <span contentEditable={false}>
+      <ComboboxProvider
+        open={
+          (items.length > 0 || hasEmpty) &&
+          (!hideWhenNoValue || value.length > 0)
+        }
+        store={store}
+      >
+        <InlineComboboxContext.Provider value={contextValue}>
+          {children}
+        </InlineComboboxContext.Provider>
+      </ComboboxProvider>
+    </span>
+  );
+};
+
+const InlineComboboxInput = ({
+  className,
+  ref: propRef,
+  ...props
+}: React.HTMLAttributes<HTMLInputElement> & {
+  ref?: React.RefObject<HTMLInputElement | null>;
+}) => {
+  const {
+    inputProps,
+    inputRef: contextRef,
+    showTrigger,
+    trigger,
+  } = React.useContext(InlineComboboxContext);
+
+  const store = useComboboxContext()!;
+  const value = store.useState('value');
+
+  const ref = useComposedRef(propRef, contextRef);
+
+  /**
+   * To create an auto-resizing input, we render a visually hidden span
+   * containing the input value and position the input element on top of it.
+   * This works well for all cases except when input exceeds the width of the
+   * container.
+   */
+
+  return (
+    <>
+      {showTrigger && trigger}
+
+      <span className="relative min-h-[1lh]">
+        <span
+          className="invisible overflow-hidden text-nowrap"
+          aria-hidden="true"
+        >
+          {value || '\u200B'}
+        </span>
+
+        <Combobox
+          ref={ref}
+          className={cn(
+            'absolute top-0 left-0 size-full bg-transparent outline-none',
+            className
+          )}
+          value={value}
+          autoSelect
+          {...inputProps}
+          {...props}
+        />
+      </span>
+    </>
+  );
+};
+
+InlineComboboxInput.displayName = 'InlineComboboxInput';
+
+const InlineComboboxContent: typeof ComboboxPopover = ({
+  className,
+  ...props
+}) => {
+  // Portal prevents CSS from leaking into popover
+  const store = useComboboxContext();
+
+  function handleKeyDown(event: React.KeyboardEvent<HTMLDivElement>) {
+    if (!store) return;
+
+    const state = store.getState();
+    const { items, activeId } = state;
+
+    if (!items.length) return;
+
+    const currentIndex = items.findIndex((item) => item.id === activeId);
+
+    if (event.key === 'ArrowUp' && currentIndex <= 0) {
+      event.preventDefault();
+      store.setActiveId(store.last());
+    } else if (event.key === 'ArrowDown' && currentIndex >= items.length - 1) {
+      event.preventDefault();
+      store.setActiveId(store.first());
+    }
+  }
+
+  return (
+    <Portal>
+      <ComboboxPopover
+        className={cn(
+          'z-500 max-h-[288px] w-[300px] overflow-y-auto rounded-md bg-popover shadow-md',
+          className
+        )}
+        onKeyDownCapture={handleKeyDown}
+        {...props}
+      />
+    </Portal>
+  );
+};
+
+const comboboxItemVariants = cva(
+  'relative mx-1 flex h-[28px] select-none items-center rounded-sm px-2 text-foreground text-sm outline-none [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0',
+  {
+    defaultVariants: {
+      interactive: true,
+    },
+    variants: {
+      interactive: {
+        false: '',
+        true: 'cursor-pointer transition-colors hover:bg-accent hover:text-accent-foreground data-[active-item=true]:bg-accent data-[active-item=true]:text-accent-foreground',
+      },
+    },
+  }
+);
+
+const InlineComboboxItem = ({
+  className,
+  focusEditor = true,
+  group,
+  keywords,
+  label,
+  onClick,
+  ...props
+}: {
+  focusEditor?: boolean;
+  group?: string;
+  keywords?: string[];
+  label?: string;
+} & ComboboxItemProps &
+  Required<Pick<ComboboxItemProps, 'value'>>) => {
+  const { value } = props;
+
+  const { filter, removeInput } = React.useContext(InlineComboboxContext);
+
+  const store = useComboboxContext()!;
+
+  // Optimization: Do not subscribe to value if filter is false
+  const search = filter && store.useState('value');
+
+  const visible = React.useMemo(
+    () =>
+      !filter || filter({ group, keywords, label, value }, search as string),
+    [filter, group, keywords, label, value, search]
+  );
+
+  if (!visible) return null;
+
+  return (
+    <ComboboxItem
+      className={cn(comboboxItemVariants(), className)}
+      onClick={(event) => {
+        removeInput(focusEditor);
+        onClick?.(event);
+      }}
+      {...props}
+    />
+  );
+};
+
+const InlineComboboxEmpty = ({
+  children,
+  className,
+}: React.HTMLAttributes<HTMLDivElement>) => {
+  const { setHasEmpty } = React.useContext(InlineComboboxContext);
+  const store = useComboboxContext()!;
+  const items = store.useState('items');
+
+  React.useEffect(() => {
+    setHasEmpty(true);
+
+    return () => {
+      setHasEmpty(false);
+    };
+  }, [setHasEmpty]);
+
+  if (items.length > 0) return null;
+
+  return (
+    <div
+      className={cn(comboboxItemVariants({ interactive: false }), className)}
+    >
+      {children}
+    </div>
+  );
+};
+
+const InlineComboboxRow = ComboboxRow;
+
+function InlineComboboxGroup({
+  className,
+  ...props
+}: React.ComponentProps<typeof ComboboxGroup>) {
+  return (
+    <ComboboxGroup
+      {...props}
+      className={cn(
+        'hidden not-last:border-b py-1.5 [&:has([role=option])]:block',
+        className
+      )}
+    />
+  );
+}
+
+function InlineComboboxGroupLabel({
+  className,
+  ...props
+}: React.ComponentProps<typeof ComboboxGroupLabel>) {
+  return (
+    <ComboboxGroupLabel
+      {...props}
+      className={cn(
+        'mt-1.5 mb-2 px-3 font-medium text-muted-foreground text-xs',
+        className
+      )}
+    />
+  );
+}
+
+export {
+  InlineCombobox,
+  InlineComboboxContent,
+  InlineComboboxEmpty,
+  InlineComboboxGroup,
+  InlineComboboxGroupLabel,
+  InlineComboboxInput,
+  InlineComboboxItem,
+  InlineComboboxRow,
+};
diff --git a/surfsense_web/components/ui/slash-node.tsx b/surfsense_web/components/ui/slash-node.tsx
index 16c371f42..7bd3c0969 100644
--- a/surfsense_web/components/ui/slash-node.tsx
+++ b/surfsense_web/components/ui/slash-node.tsx
@@ -1,7 +1,6 @@
 'use client';
 
 import * as React from 'react';
-import { createPortal } from 'react-dom';
 
 import type { PlateElementProps } from 'platejs/react';
 
@@ -24,21 +23,24 @@ import {
   TableIcon,
 } from 'lucide-react';
 import { KEYS } from 'platejs';
-import { PlateElement, useEditorPlugin, useEditorRef } from 'platejs/react';
+import { PlateElement, useEditorRef } from 'platejs/react';
 
 import {
-  Command,
-  CommandEmpty,
-  CommandGroup,
-  CommandItem,
-  CommandList,
-} from '@/components/ui/command';
+  InlineCombobox,
+  InlineComboboxContent,
+  InlineComboboxEmpty,
+  InlineComboboxGroup,
+  InlineComboboxGroupLabel,
+  InlineComboboxInput,
+  InlineComboboxItem,
+} from '@/components/ui/inline-combobox';
 import { insertBlock, insertInlineElement } from '@/components/editor/transforms';
 
 interface SlashCommandItem {
   icon: React.ReactNode;
   keywords: string[];
   label: string;
+  value: string;
   onSelect: (editor: any) => void;
 }
 
@@ -50,36 +52,42 @@ const slashCommandGroups: { heading: string; items: SlashCommandItem[] }[] = [
         icon: <PilcrowIcon />,
         keywords: ['paragraph', 'text', 'plain'],
         label: 'Text',
+        value: 'text',
         onSelect: (editor) => insertBlock(editor, KEYS.p),
       },
       {
         icon: <Heading1Icon />,
         keywords: ['title', 'h1', 'heading'],
         label: 'Heading 1',
+        value: 'heading1',
         onSelect: (editor) => insertBlock(editor, 'h1'),
       },
       {
         icon: <Heading2Icon />,
         keywords: ['subtitle', 'h2', 'heading'],
         label: 'Heading 2',
+        value: 'heading2',
         onSelect: (editor) => insertBlock(editor, 'h2'),
       },
       {
         icon: <Heading3Icon />,
         keywords: ['subtitle', 'h3', 'heading'],
         label: 'Heading 3',
+        value: 'heading3',
         onSelect: (editor) => insertBlock(editor, 'h3'),
       },
       {
         icon: <QuoteIcon />,
         keywords: ['citation', 'blockquote'],
         label: 'Quote',
+        value: 'quote',
         onSelect: (editor) => insertBlock(editor, KEYS.blockquote),
       },
       {
         icon: <MinusIcon />,
         keywords: ['divider', 'separator', 'line'],
         label: 'Divider',
+        value: 'divider',
         onSelect: (editor) => insertBlock(editor, KEYS.hr),
       },
     ],
@@ -91,18 +99,21 @@ const slashCommandGroups: { heading: string; items: SlashCommandItem[] }[] = [
         icon: <ListIcon />,
         keywords: ['unordered', 'ul', 'bullet'],
         label: 'Bulleted list',
+        value: 'bulleted-list',
         onSelect: (editor) => insertBlock(editor, KEYS.ul),
       },
       {
         icon: <ListOrderedIcon />,
         keywords: ['ordered', 'ol', 'numbered'],
         label: 'Numbered list',
+        value: 'numbered-list',
         onSelect: (editor) => insertBlock(editor, KEYS.ol),
       },
       {
         icon: <SquareIcon />,
         keywords: ['checklist', 'task', 'checkbox', 'todo'],
         label: 'To-do list',
+        value: 'todo-list',
         onSelect: (editor) => insertBlock(editor, KEYS.listTodo),
       },
     ],
@@ -114,30 +125,35 @@ const slashCommandGroups: { heading: string; items: SlashCommandItem[] }[] = [
         icon: <TableIcon />,
         keywords: ['table', 'grid'],
         label: 'Table',
+        value: 'table',
         onSelect: (editor) => insertBlock(editor, KEYS.table),
       },
       {
         icon: <FileCodeIcon />,
         keywords: ['code', 'codeblock', 'snippet'],
         label: 'Code block',
+        value: 'code-block',
         onSelect: (editor) => insertBlock(editor, KEYS.codeBlock),
       },
       {
         icon: <InfoIcon />,
         keywords: ['callout', 'note', 'info', 'warning', 'tip'],
         label: 'Callout',
+        value: 'callout',
         onSelect: (editor) => insertBlock(editor, KEYS.callout),
       },
       {
         icon: <ChevronRightIcon />,
         keywords: ['toggle', 'collapsible', 'expand'],
         label: 'Toggle',
+        value: 'toggle',
         onSelect: (editor) => insertBlock(editor, KEYS.toggle),
       },
       {
         icon: <RadicalIcon />,
         keywords: ['equation', 'math', 'formula', 'latex'],
         label: 'Equation',
+        value: 'equation',
         onSelect: (editor) => insertInlineElement(editor, KEYS.equation),
       },
     ],
@@ -149,6 +165,7 @@ const slashCommandGroups: { heading: string; items: SlashCommandItem[] }[] = [
         icon: <Code2Icon />,
         keywords: ['link', 'url', 'href'],
         label: 'Link',
+        value: 'link',
         onSelect: (editor) => insertInlineElement(editor, KEYS.link),
       },
     ],
@@ -159,74 +176,48 @@ export function SlashInputElement({
   children,
   ...props
 }: PlateElementProps) {
-  const { editor, setOption } = useEditorPlugin(SlashInputPlugin);
-  const anchorRef = React.useRef<HTMLSpanElement>(null);
-  const [menuPosition, setMenuPosition] = React.useState<{ top: number; left: number } | null>(null);
-
-  React.useEffect(() => {
-    const updatePosition = () => {
-      if (anchorRef.current) {
-        const rect = anchorRef.current.getBoundingClientRect();
-        setMenuPosition({
-          top: rect.bottom + window.scrollY,
-          left: rect.left + window.scrollX,
-        });
-      }
-    };
-
-    updatePosition();
-
-    // Re-position on scroll/resize since the editor may scroll
-    window.addEventListener('scroll', updatePosition, true);
-    window.addEventListener('resize', updatePosition);
-    return () => {
-      window.removeEventListener('scroll', updatePosition, true);
-      window.removeEventListener('resize', updatePosition);
-    };
-  }, []);
+  const editor = useEditorRef();
 
   return (
     <PlateElement {...props} as="span">
-      <span ref={anchorRef} />
-      {menuPosition &&
-        createPortal(
-          <Command
-            className="fixed z-50 w-[330px] overflow-hidden rounded-lg border bg-popover shadow-lg"
-            style={{ top: menuPosition.top, left: menuPosition.left }}
-            shouldFilter={false}
-          >
-            <CommandList className="max-h-[min(400px,40vh)] overflow-y-auto p-1">
-              <CommandEmpty>No results found.</CommandEmpty>
-              {slashCommandGroups.map(({ heading, items }) => (
-                <CommandGroup key={heading} heading={heading}>
-                  {items.map(({ icon, keywords, label, onSelect }) => (
-                    <CommandItem
-                      key={label}
-                      className="flex items-center gap-3 px-2 py-2"
-                      keywords={keywords}
-                      value={label}
-                      onSelect={() => {
-                        editor.tf.removeNodes({
-                          match: (n) => (n as any).type === SlashInputPlugin.key,
-                        });
-                        onSelect(editor);
-                        editor.tf.focus();
-                      }}
-                    >
-                      <span className="flex size-5 items-center justify-center text-muted-foreground">
-                        {icon}
-                      </span>
-                      {label}
-                    </CommandItem>
-                  ))}
-                </CommandGroup>
+      <InlineCombobox
+        element={props.element}
+        trigger="/"
+      >
+        <InlineComboboxInput />
+
+        <InlineComboboxContent>
+          <InlineComboboxEmpty>No results found.</InlineComboboxEmpty>
+
+          {slashCommandGroups.map(({ heading, items }) => (
+            <InlineComboboxGroup key={heading}>
+              <InlineComboboxGroupLabel>{heading}</InlineComboboxGroupLabel>
+
+              {items.map(({ icon, keywords, label, value, onSelect }) => (
+                <InlineComboboxItem
+                  key={value}
+                  className="flex items-center gap-3 px-2 py-1.5"
+                  keywords={keywords}
+                  label={label}
+                  value={value}
+                  group={heading}
+                  onClick={() => {
+                    onSelect(editor);
+                    editor.tf.focus();
+                  }}
+                >
+                  <span className="flex size-5 items-center justify-center text-muted-foreground">
+                    {icon}
+                  </span>
+                  {label}
+                </InlineComboboxItem>
               ))}
-            </CommandList>
-          </Command>,
-          document.body
-        )}
+            </InlineComboboxGroup>
+          ))}
+        </InlineComboboxContent>
+      </InlineCombobox>
+
       {children}
     </PlateElement>
   );
 }
-