diff --git a/packages/shared/src/components/fields/RichTextEditor/RichTextToolbar.tsx b/packages/shared/src/components/fields/RichTextEditor/RichTextToolbar.tsx
index c6c43ac4763..f84fb14c74f 100644
--- a/packages/shared/src/components/fields/RichTextEditor/RichTextToolbar.tsx
+++ b/packages/shared/src/components/fields/RichTextEditor/RichTextToolbar.tsx
@@ -1,7 +1,12 @@
+import classNames from 'classnames';
 import type { ReactElement, ReactNode, Ref } from 'react';
 import React, {
   useState,
   useCallback,
+  useEffect,
+  useLayoutEffect,
+  useMemo,
+  useRef,
   forwardRef,
   useImperativeHandle,
 } from 'react';
@@ -10,35 +15,66 @@ import type { Editor } from '@tiptap/react';
 import { getMarkRange } from '@tiptap/core';
 import { Button, ButtonSize, ButtonVariant } from '../../buttons/Button';
 import {
+  ArrowIcon,
   BoldIcon,
-  ItalicIcon,
   BulletListIcon,
+  ItalicIcon,
   NumberedListIcon,
-  UndoIcon,
   RedoIcon,
+  UndoIcon,
 } from '../../icons';
 import { LinkIcon } from '../../icons/Link';
 import { Tooltip } from '../../tooltip/Tooltip';
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from '../../dropdown/DropdownMenu';
 import { LinkModal } from './LinkModal';
 
 export interface RichTextToolbarProps {
   editor: Editor;
   onLinkAdd: (url: string, label?: string) => void;
+  leadingActions?: ReactNode;
   inlineActions?: ReactNode;
   rightActions?: ReactNode;
   allowBlockFormatting?: boolean;
+  position?: 'top' | 'bottom';
+  className?: string;
+  hideInlineLink?: boolean;
 }
 
 export interface RichTextToolbarRef {
   openLinkModal: () => void;
 }
 
+interface ToolbarItem {
+  id: string;
+  tooltip: string;
+  label: string;
+  icon: ReactElement;
+  isActive: boolean;
+  onClick: () => void;
+  disabled?: boolean;
+  priority: number;
+  group: string;
+}
+
+const ToolbarDivider = (): ReactElement => (
+  <span
+    aria-hidden
+    className="mx-1.5 h-5 w-px shrink-0 bg-border-subtlest-tertiary"
+  />
+);
+
 interface ToolbarButtonProps {
   tooltip: string;
   icon: ReactElement;
   isActive: boolean;
   onClick: () => void;
   disabled?: boolean;
+  alwaysVisible?: boolean;
 }
 
 const ToolbarButton = ({
@@ -47,8 +83,9 @@ const ToolbarButton = ({
   isActive,
   onClick,
   disabled = false,
+  alwaysVisible = false,
 }: ToolbarButtonProps): ReactElement | null => {
-  if (disabled) {
+  if (disabled && !alwaysVisible) {
     return null;
   }
 
@@ -64,20 +101,75 @@ const ToolbarButton = ({
         })}
         pressed={isActive}
         onClick={onClick}
+        onMouseDown={(event: React.MouseEvent) => event.preventDefault()}
+        disabled={disabled}
         type="button"
-        className="leading-none"
+        className="shrink-0 leading-none"
       />
     </Tooltip>
   );
 };
 
+interface OverflowMenuProps {
+  items: ToolbarItem[];
+}
+
+const OverflowMenu = ({ items }: OverflowMenuProps): ReactElement | null => {
+  const [open, setOpen] = useState(false);
+
+  if (items.length === 0) {
+    return null;
+  }
+
+  return (
+    <DropdownMenu open={open} onOpenChange={setOpen}>
+      <Tooltip content="More formatting">
+        <DropdownMenuTrigger asChild>
+          <Button
+            type="button"
+            variant={ButtonVariant.Tertiary}
+            size={ButtonSize.Small}
+            icon={<ArrowIcon className="rotate-180" secondary />}
+            aria-label="More formatting"
+            onMouseDown={(event: React.MouseEvent) => event.preventDefault()}
+            className="shrink-0"
+          />
+        </DropdownMenuTrigger>
+      </Tooltip>
+      <DropdownMenuContent align="end" variant="field" className="min-w-56">
+        {items.map((item) => (
+          <DropdownMenuItem
+            key={item.id}
+            onSelect={(event: Event) => {
+              event.preventDefault();
+              item.onClick();
+              setOpen(false);
+            }}
+            disabled={item.disabled}
+            className={classNames('gap-2', item.isActive && 'text-text-link')}
+          >
+            {React.cloneElement(item.icon, { className: 'shrink-0' })}
+            <span>{item.label}</span>
+          </DropdownMenuItem>
+        ))}
+      </DropdownMenuContent>
+    </DropdownMenu>
+  );
+};
+
+const TOOLBAR_BUTTON_WIDTH = 32;
+
 function RichTextToolbarComponent(
   {
     editor,
     onLinkAdd,
+    leadingActions,
     inlineActions,
     rightActions,
     allowBlockFormatting = true,
+    position = 'top',
+    className,
+    hideInlineLink = false,
   }: RichTextToolbarProps,
   ref: Ref<RichTextToolbarRef>,
 ): ReactElement {
@@ -87,13 +179,11 @@ function RichTextToolbarComponent(
 
   const openLinkModal = useCallback(() => {
     if (editor.isActive('link')) {
-      // Get current link attributes for editing
       const attrs = editor.getAttributes('link');
       const { $from } = editor.state.selection;
       const linkMark = editor.schema.marks.link;
       const range = getMarkRange($from, linkMark);
 
-      // Get full link text from mark range
       let linkText = '';
       if (range) {
         linkText = editor.state.doc.textBetween(range.from, range.to, '');
@@ -103,7 +193,6 @@ function RichTextToolbarComponent(
       setInitialLabel(linkText);
       setIsLinkModalOpen(true);
     } else {
-      // Get selected text as initial label
       const { from, to } = editor.state.selection;
       const selectedText = editor.state.doc.textBetween(from, to, '');
       setInitialUrl('');
@@ -118,7 +207,6 @@ function RichTextToolbarComponent(
 
   const handleLinkSubmit = useCallback(
     (url: string, label?: string) => {
-      // If editing existing link, remove it first
       if (editor.isActive('link')) {
         editor.chain().focus().unsetLink().run();
       }
@@ -145,72 +233,260 @@ function RichTextToolbarComponent(
     }),
   });
 
+  const formattingItems = useMemo<ToolbarItem[]>(() => {
+    const items: ToolbarItem[] = [];
+
+    if (!hideInlineLink) {
+      items.push({
+        id: 'link',
+        priority: 1,
+        group: 'link',
+        label: editorState.isLink ? 'Edit link' : 'Add link',
+        tooltip: editorState.isLink ? 'Edit link (⌘K)' : 'Add link (⌘K)',
+        icon: <LinkIcon />,
+        isActive: editorState.isLink,
+        onClick: openLinkModal,
+      });
+    }
+
+    items.push(
+      {
+        id: 'bold',
+        priority: 0,
+        group: 'format',
+        label: 'Bold',
+        tooltip: 'Bold (⌘B)',
+        icon: <BoldIcon />,
+        isActive: editorState.isBold,
+        onClick: () => editor.chain().focus().toggleBold().run(),
+      },
+      {
+        id: 'italic',
+        priority: 0,
+        group: 'format',
+        label: 'Italic',
+        tooltip: 'Italic (⌘I)',
+        icon: <ItalicIcon />,
+        isActive: editorState.isItalic,
+        onClick: () => editor.chain().focus().toggleItalic().run(),
+      },
+    );
+
+    if (allowBlockFormatting) {
+      items.push(
+        {
+          id: 'bullet-list',
+          priority: 4,
+          group: 'list',
+          label: 'Bullet list',
+          tooltip: 'Bullet list (⌘⇧8)',
+          icon: <BulletListIcon />,
+          isActive: editorState.isBulletList,
+          onClick: () => editor.chain().focus().toggleBulletList().run(),
+        },
+        {
+          id: 'numbered-list',
+          priority: 4,
+          group: 'list',
+          label: 'Numbered list',
+          tooltip: 'Numbered list (⌘⇧7)',
+          icon: <NumberedListIcon />,
+          isActive: editorState.isOrderedList,
+          onClick: () => editor.chain().focus().toggleOrderedList().run(),
+        },
+      );
+    }
+
+    items.push(
+      {
+        id: 'undo',
+        priority: 5,
+        group: 'history',
+        label: 'Undo',
+        tooltip: 'Undo (⌘Z)',
+        icon: <UndoIcon />,
+        isActive: false,
+        onClick: () => editor.chain().focus().undo().run(),
+        disabled: !editorState.canUndo,
+      },
+      {
+        id: 'redo',
+        priority: 5,
+        group: 'history',
+        label: 'Redo',
+        tooltip: 'Redo (⌘⇧Z)',
+        icon: <RedoIcon />,
+        isActive: false,
+        onClick: () => editor.chain().focus().redo().run(),
+        disabled: !editorState.canRedo,
+      },
+    );
+
+    return items;
+  }, [
+    allowBlockFormatting,
+    editor,
+    editorState,
+    hideInlineLink,
+    openLinkModal,
+  ]);
+
+  const containerRef = useRef<HTMLDivElement>(null);
+  const inlineActionsRef = useRef<HTMLDivElement>(null);
+  const rightActionsRef = useRef<HTMLDivElement>(null);
+  const leadingActionsRef = useRef<HTMLDivElement>(null);
+  const [containerWidth, setContainerWidth] = useState(0);
+  const [reservedWidth, setReservedWidth] = useState(0);
+
+  const isOverflowable = position === 'bottom';
+
+  useLayoutEffect(() => {
+    if (!isOverflowable) {
+      return undefined;
+    }
+    const el = containerRef.current;
+    if (!el || typeof ResizeObserver === 'undefined') {
+      return undefined;
+    }
+    const observer = new ResizeObserver((entries) => {
+      const entry = entries[0];
+      if (!entry) {
+        return;
+      }
+      setContainerWidth(entry.contentRect.width);
+    });
+    observer.observe(el);
+    setContainerWidth(el.getBoundingClientRect().width);
+    return () => observer.disconnect();
+  }, [isOverflowable]);
+
+  useEffect(() => {
+    if (!isOverflowable) {
+      return;
+    }
+    const leadingWidth =
+      leadingActionsRef.current?.getBoundingClientRect().width ?? 0;
+    const inlineWidth =
+      inlineActionsRef.current?.getBoundingClientRect().width ?? 0;
+    const rightWidth =
+      rightActionsRef.current?.getBoundingClientRect().width ?? 0;
+    setReservedWidth(
+      leadingWidth + inlineWidth + rightWidth + TOOLBAR_BUTTON_WIDTH,
+    );
+  }, [
+    isOverflowable,
+    rightActions,
+    inlineActions,
+    leadingActions,
+    containerWidth,
+  ]);
+
+  const visibleCount = useMemo(() => {
+    if (!isOverflowable || containerWidth === 0) {
+      return formattingItems.length;
+    }
+    const available = Math.max(0, containerWidth - reservedWidth);
+    const fits = Math.floor(available / TOOLBAR_BUTTON_WIDTH);
+    return Math.min(formattingItems.length, Math.max(0, fits));
+  }, [containerWidth, reservedWidth, formattingItems.length, isOverflowable]);
+
+  const sortedByPriority = useMemo(
+    () => [...formattingItems].sort((a, b) => a.priority - b.priority),
+    [formattingItems],
+  );
+
+  const visibleIds = useMemo(
+    () => new Set(sortedByPriority.slice(0, visibleCount).map((i) => i.id)),
+    [sortedByPriority, visibleCount],
+  );
+
+  const visibleItems = useMemo(
+    () => formattingItems.filter((item) => visibleIds.has(item.id)),
+    [formattingItems, visibleIds],
+  );
+
+  const overflowItems = useMemo(
+    () => formattingItems.filter((item) => !visibleIds.has(item.id)),
+    [formattingItems, visibleIds],
+  );
+
+  const renderedFormattingItems = (() => {
+    const nodes: ReactElement[] = [];
+    let lastGroup: string | undefined;
+    visibleItems.forEach((item) => {
+      if (lastGroup !== undefined && item.group !== lastGroup) {
+        nodes.push(<ToolbarDivider key={`divider-${lastGroup}-${item.id}`} />);
+      }
+      const button = (
+        <ToolbarButton
+          key={item.id}
+          tooltip={item.tooltip}
+          icon={item.icon}
+          isActive={item.isActive}
+          onClick={item.onClick}
+          disabled={item.disabled}
+          alwaysVisible={item.group === 'history'}
+        />
+      );
+      if (button) {
+        nodes.push(button);
+      }
+      lastGroup = item.group;
+    });
+    return nodes;
+  })();
+
   return (
     <>
-      <div className="flex flex-row flex-wrap items-center gap-1 border-b border-border-subtlest-tertiary px-2 py-1">
-        <div className="flex flex-1 flex-wrap items-center gap-0">
-          <ToolbarButton
-            tooltip="Bold (⌘B)"
-            icon={<BoldIcon />}
-            isActive={editorState.isBold}
-            onClick={() => editor.chain().focus().toggleBold().run()}
-          />
-          <ToolbarButton
-            tooltip="Italic (⌘I)"
-            icon={<ItalicIcon />}
-            isActive={editorState.isItalic}
-            onClick={() => editor.chain().focus().toggleItalic().run()}
-          />
-          {allowBlockFormatting ? (
+      <div
+        ref={containerRef}
+        className={classNames(
+          'flex flex-row items-center gap-1 px-2 py-1',
+          position === 'top' &&
+            'flex-wrap border-b border-border-subtlest-tertiary',
+          position === 'bottom' && 'flex-nowrap',
+          className,
+        )}
+      >
+        <div
+          className={classNames(
+            'flex flex-1 items-center gap-0',
+            position === 'top' && 'flex-wrap',
+            position === 'bottom' && 'flex-nowrap overflow-hidden',
+          )}
+        >
+          {leadingActions && (
             <>
-              <div className="mx-1 h-4 w-px bg-border-subtlest-tertiary" />
-              <ToolbarButton
-                tooltip="Bullet list (⌘⇧8)"
-                icon={<BulletListIcon />}
-                isActive={editorState.isBulletList}
-                onClick={() => editor.chain().focus().toggleBulletList().run()}
-              />
-              <ToolbarButton
-                tooltip="Numbered list (⌘⇧7)"
-                icon={<NumberedListIcon />}
-                isActive={editorState.isOrderedList}
-                onClick={() => editor.chain().focus().toggleOrderedList().run()}
-              />
+              <div
+                ref={leadingActionsRef}
+                className="flex shrink-0 items-center gap-1"
+              >
+                {leadingActions}
+              </div>
+              <ToolbarDivider />
             </>
-          ) : null}
-          <div className="mx-1 h-4 w-px bg-border-subtlest-tertiary" />
-          <ToolbarButton
-            tooltip={editorState.isLink ? 'Edit link (⌘K)' : 'Add link (⌘K)'}
-            icon={<LinkIcon />}
-            isActive={editorState.isLink}
-            onClick={openLinkModal}
-          />
+          )}
           {inlineActions && (
             <>
-              <div className="mx-1 h-4 w-px bg-border-subtlest-tertiary" />
-              <div className="flex items-center gap-1">{inlineActions}</div>
+              <div
+                ref={inlineActionsRef}
+                className="flex shrink-0 items-center gap-1"
+              >
+                {inlineActions}
+              </div>
+              {visibleItems.length > 0 && <ToolbarDivider />}
             </>
           )}
-          {(editorState.canUndo || editorState.canRedo) && (
-            <div className="mx-1 h-4 w-px bg-border-subtlest-tertiary" />
-          )}
-          <ToolbarButton
-            tooltip="Undo (⌘Z)"
-            icon={<UndoIcon />}
-            isActive={false}
-            onClick={() => editor.chain().focus().undo().run()}
-            disabled={!editorState.canUndo}
-          />
-          <ToolbarButton
-            tooltip="Redo (⌘⇧Z)"
-            icon={<RedoIcon />}
-            isActive={false}
-            onClick={() => editor.chain().focus().redo().run()}
-            disabled={!editorState.canRedo}
-          />
+          {renderedFormattingItems}
+          {isOverflowable && <OverflowMenu items={overflowItems} />}
         </div>
         {rightActions && (
-          <div className="flex shrink-0 items-center gap-0">{rightActions}</div>
+          <div
+            ref={rightActionsRef}
+            className="flex shrink-0 items-center gap-0"
+          >
+            {rightActions}
+          </div>
         )}
       </div>
       <LinkModal
diff --git a/packages/shared/src/components/fields/RichTextInput.tsx b/packages/shared/src/components/fields/RichTextInput.tsx
index 2172a66569f..68c3d79e101 100644
--- a/packages/shared/src/components/fields/RichTextInput.tsx
+++ b/packages/shared/src/components/fields/RichTextInput.tsx
@@ -11,6 +11,7 @@ import React, {
   useCallback,
   useEffect,
   useImperativeHandle,
+  useLayoutEffect,
   useMemo,
   useRef,
   useState,
@@ -28,6 +29,7 @@ import Image from '@tiptap/extension-image';
 import { ImageIcon, AtIcon, MarkdownIcon } from '../icons';
 import { EditIcon } from '../icons/Edit';
 import { GifIcon } from '../icons/Gif';
+import { LinkIcon } from '../icons/Link';
 import { Button, ButtonSize, ButtonVariant } from '../buttons/Button';
 import { RecommendedMentionTooltip } from '../tooltips/RecommendedMentionTooltip';
 import { SimpleTooltip } from '../tooltips/SimpleTooltip';
@@ -147,6 +149,13 @@ interface RichTextInputProps {
   minHeightClassName?: string;
   markdownToHtml?: (markdown: string) => string;
   hideToolbar?: boolean;
+  toolbarPosition?: 'top' | 'bottom';
+  toolbarLeading?: ReactNode;
+  toolbarRightActions?: ReactNode;
+  hideMarkdownToggle?: boolean;
+  hideMarkdownHeader?: boolean;
+  hideFooter?: boolean;
+  onMarkdownModeChange?: (isMarkdownMode: boolean) => void;
 }
 
 export interface RichTextInputRef {
@@ -154,6 +163,7 @@ export interface RichTextInputRef {
   clearDraft: () => void;
   setInput: (value: string) => void;
   focus: () => void;
+  toggleMarkdownMode: () => void;
 }
 
 function RichTextInput(
@@ -183,6 +193,13 @@ function RichTextInput(
     minHeightClassName = 'min-h-[8rem]',
     markdownToHtml = markdownToHtmlBasic,
     hideToolbar = false,
+    toolbarPosition = 'top',
+    toolbarLeading,
+    toolbarRightActions,
+    hideMarkdownToggle = false,
+    hideMarkdownHeader = false,
+    hideFooter = false,
+    onMarkdownModeChange,
   }: RichTextInputProps,
   ref: ForwardedRef<RichTextInputRef>,
 ): ReactElement {
@@ -205,6 +222,7 @@ function RichTextInput(
   }, []);
 
   const isUploadEnabled = enabledCommand[MarkdownCommand.Upload];
+  const isLinkEnabled = enabledCommand[MarkdownCommand.Link];
   const isMentionEnabled = enabledCommand[MarkdownCommand.Mention];
   const isEmojiEnabled = enabledCommand[MarkdownCommand.Emoji];
   const isGifEnabled = enabledCommand[MarkdownCommand.Gif];
@@ -415,9 +433,13 @@ function RichTextInput(
 
         if (isSpecialKey && event.key === 'Enter' && inputRef.current?.length) {
           event.preventDefault();
-          onSubmit?.({
-            currentTarget: { value: inputRef.current },
-          } as React.FormEvent<HTMLTextAreaElement>);
+          if (onSubmit) {
+            onSubmit({
+              currentTarget: { value: inputRef.current },
+            } as React.FormEvent<HTMLTextAreaElement>);
+          } else {
+            editorContainerRef.current?.closest('form')?.requestSubmit();
+          }
           return true;
         }
 
@@ -508,6 +530,46 @@ function RichTextInput(
     setIsMarkdownMode(false);
   }, [markdownToHtml]);
 
+  const toggleMarkdownMode = useCallback(() => {
+    if (isMarkdownMode) {
+      switchToRichMode();
+      return;
+    }
+    switchToMarkdownMode();
+  }, [isMarkdownMode, switchToMarkdownMode, switchToRichMode]);
+
+  useEffect(() => {
+    onMarkdownModeChange?.(isMarkdownMode);
+  }, [isMarkdownMode, onMarkdownModeChange]);
+
+  const didInitMarkdownRef = useRef(false);
+  useEffect(() => {
+    if (!didInitMarkdownRef.current) {
+      didInitMarkdownRef.current = true;
+      return undefined;
+    }
+    const frame = requestAnimationFrame(() => {
+      if (isMarkdownMode) {
+        markdownTextareaRef.current?.focus();
+        return;
+      }
+      editorRef.current?.commands.focus();
+    });
+    return () => cancelAnimationFrame(frame);
+  }, [isMarkdownMode]);
+
+  useLayoutEffect(() => {
+    if (!isMarkdownMode) {
+      return;
+    }
+    const ta = markdownTextareaRef.current;
+    if (!ta) {
+      return;
+    }
+    ta.style.height = 'auto';
+    ta.style.height = `${ta.scrollHeight}px`;
+  }, [input, isMarkdownMode]);
+
   const onMarkdownInput = useCallback(
     (event: React.FormEvent<HTMLTextAreaElement>) => {
       const { value } = event.currentTarget;
@@ -524,9 +586,13 @@ function RichTextInput(
       }
 
       event.preventDefault();
-      onSubmit?.({
-        currentTarget: { value: inputRef.current },
-      } as React.FormEvent<HTMLTextAreaElement>);
+      if (onSubmit) {
+        onSubmit({
+          currentTarget: { value: inputRef.current },
+        } as React.FormEvent<HTMLTextAreaElement>);
+        return;
+      }
+      event.currentTarget.form?.requestSubmit();
     },
     [onSubmit],
   );
@@ -603,6 +669,7 @@ function RichTextInput(
 
       editor?.commands.focus();
     },
+    toggleMarkdownMode,
   }));
 
   useEffect(() => {
@@ -638,34 +705,57 @@ function RichTextInput(
           : editor?.storage.characterCount?.characters?.() ?? input.length)
       : null;
 
-  const hasToolbarActions = isUploadEnabled || isMentionEnabled || isGifEnabled;
+  const hasToolbarActions =
+    isUploadEnabled || isLinkEnabled || isMentionEnabled || isGifEnabled;
+  const preventEditorBlur = (event: React.MouseEvent) => event.preventDefault();
   const toolbarActions = (
     <>
       {isUploadEnabled && (
-        <Button
-          size={headerActionSize}
-          variant={ButtonVariant.Tertiary}
-          icon={actionIcon}
-          onClick={() => {
-            upload.uploadRef?.current?.click();
-          }}
-          type="button"
-        />
+        <SimpleTooltip content="Add image">
+          <Button
+            size={headerActionSize}
+            variant={ButtonVariant.Tertiary}
+            icon={actionIcon}
+            onClick={() => {
+              upload.uploadRef?.current?.click();
+            }}
+            onMouseDown={preventEditorBlur}
+            type="button"
+            aria-label="Add image"
+          />
+        </SimpleTooltip>
+      )}
+      {isLinkEnabled && (
+        <SimpleTooltip content="Add link">
+          <Button
+            variant={ButtonVariant.Tertiary}
+            size={headerActionSize}
+            icon={<LinkIcon />}
+            onClick={() => toolbarRef.current?.openLinkModal()}
+            onMouseDown={preventEditorBlur}
+            type="button"
+            aria-label="Add link"
+          />
+        </SimpleTooltip>
       )}
       {isMentionEnabled && (
-        <Button
-          variant={ButtonVariant.Tertiary}
-          size={headerActionSize}
-          icon={<AtIcon />}
-          onClick={() => {
-            if (!editor) {
-              return;
-            }
-            editor.chain().focus().insertContent('@').run();
-            updateSuggestionsFromEditor(editor);
-          }}
-          type="button"
-        />
+        <SimpleTooltip content="Mention someone">
+          <Button
+            variant={ButtonVariant.Tertiary}
+            size={headerActionSize}
+            icon={<AtIcon />}
+            onClick={() => {
+              if (!editor) {
+                return;
+              }
+              editor.chain().focus().insertContent('@').run();
+              updateSuggestionsFromEditor(editor);
+            }}
+            onMouseDown={preventEditorBlur}
+            type="button"
+            aria-label="Mention someone"
+          />
+        </SimpleTooltip>
       )}
       {isGifEnabled && (
         <GifPopover
@@ -727,7 +817,7 @@ function RichTextInput(
         )}
       >
         <div
-          className="flex flex-1 flex-col"
+          className="flex min-h-0 flex-1 flex-col"
           ref={editorContainerRef}
           onDrop={isMarkdownMode ? undefined : upload.handleDrop}
           onDragOver={
@@ -737,44 +827,79 @@ function RichTextInput(
         >
           {isMarkdownMode ? (
             <>
-              <div className="flex flex-wrap items-center justify-between gap-2 border-b border-border-subtlest-tertiary p-2">
-                <span className="px-2 text-text-tertiary typo-caption1">
-                  Markdown editor
-                </span>
-                <div className="flex items-center gap-2">
+              {!hideMarkdownHeader && (
+                <div className="flex flex-wrap items-center justify-between gap-2 border-b border-border-subtlest-tertiary p-2">
+                  <span className="px-2 text-text-tertiary typo-caption1">
+                    Markdown editor
+                  </span>
+                  <div className="flex items-center gap-2">
+                    {savingLabel}
+                    <SimpleTooltip content="Switch to Rich Text Editor">
+                      <Button
+                        type="button"
+                        variant={ButtonVariant.Tertiary}
+                        size={ButtonSize.Small}
+                        icon={<EditIcon />}
+                        onClick={switchToRichMode}
+                      />
+                    </SimpleTooltip>
+                    {onClose && (
+                      <CloseButton size={ButtonSize.Small} onClick={onClose} />
+                    )}
+                  </div>
+                </div>
+              )}
+              <ConditionalWrapper
+                condition={toolbarPosition === 'bottom'}
+                wrapper={(component) => (
+                  <div className="flex min-h-0 flex-1 flex-col overflow-y-auto">
+                    {component}
+                  </div>
+                )}
+              >
+                <textarea
+                  {...textareaProps}
+                  name={undefined}
+                  ref={markdownTextareaRef}
+                  value={input}
+                  className={classNames(
+                    minHeightClassName,
+                    'flex-1 resize-none bg-transparent p-4 font-mono outline-none',
+                    toolbarPosition === 'bottom' && 'overflow-hidden',
+                    className?.input,
+                  )}
+                  onInput={onMarkdownInput}
+                  onPaste={onMarkdownPaste}
+                  onKeyDown={onMarkdownKeyDown}
+                />
+              </ConditionalWrapper>
+            </>
+          ) : (
+            (() => {
+              const inlineActionsNode = hasToolbarActions
+                ? toolbarActions
+                : null;
+              const rightActionsNode = (
+                <div className="flex items-center gap-1">
                   {savingLabel}
-                  <SimpleTooltip content="Switch to Rich Text Editor">
-                    <Button
-                      type="button"
-                      variant={ButtonVariant.Tertiary}
-                      size={ButtonSize.Small}
-                      icon={<EditIcon />}
-                      onClick={switchToRichMode}
-                    />
-                  </SimpleTooltip>
+                  {!hideMarkdownToggle && (
+                    <SimpleTooltip content="Switch to Markdown Editor">
+                      <Button
+                        type="button"
+                        variant={ButtonVariant.Tertiary}
+                        size={ButtonSize.Small}
+                        icon={<MarkdownIcon />}
+                        onClick={switchToMarkdownMode}
+                      />
+                    </SimpleTooltip>
+                  )}
                   {onClose && (
                     <CloseButton size={ButtonSize.Small} onClick={onClose} />
                   )}
+                  {toolbarRightActions}
                 </div>
-              </div>
-              <textarea
-                {...textareaProps}
-                name={undefined}
-                ref={markdownTextareaRef}
-                value={input}
-                className={classNames(
-                  minHeightClassName,
-                  'resize-y bg-transparent p-4 outline-none',
-                  className?.input,
-                )}
-                onInput={onMarkdownInput}
-                onPaste={onMarkdownPaste}
-                onKeyDown={onMarkdownKeyDown}
-              />
-            </>
-          ) : (
-            <>
-              {hideToolbar ? null : (
+              );
+              const toolbarNode = hideToolbar ? null : (
                 <RichTextToolbar
                   ref={toolbarRef}
                   editor={editor}
@@ -798,61 +923,65 @@ function RichTextInput(
                       })
                       .run();
                   }}
-                  inlineActions={hasToolbarActions ? toolbarActions : null}
-                  rightActions={
-                    <div className="flex items-center gap-0">
-                      {savingLabel}
-                      <SimpleTooltip content="Switch to Markdown Editor">
-                        <Button
-                          type="button"
-                          variant={ButtonVariant.Tertiary}
-                          size={ButtonSize.Small}
-                          icon={<MarkdownIcon />}
-                          onClick={switchToMarkdownMode}
-                        />
-                      </SimpleTooltip>
-                      {onClose && (
-                        <CloseButton
-                          size={ButtonSize.Small}
-                          onClick={onClose}
-                        />
-                      )}
-                    </div>
+                  position={toolbarPosition}
+                  className={
+                    toolbarPosition === 'bottom'
+                      ? '!gap-3 !px-5 !pb-5 !pt-4'
+                      : undefined
                   }
+                  leadingActions={toolbarLeading}
+                  inlineActions={inlineActionsNode}
+                  hideInlineLink={isLinkEnabled}
+                  rightActions={rightActionsNode}
                 />
-              )}
-              {isUploadEnabled && (
-                <input
-                  type="file"
-                  className="hidden"
-                  name="content_upload"
-                  ref={upload.uploadRef}
-                  accept={allowedContentImage.join(',')}
-                  onInput={upload.onUpload}
-                />
-              )}
-              <div className="flex w-full flex-row">
-                {showUserAvatar && user && (
-                  <ProfilePicture
-                    size={ProfileImageSize.Large}
-                    className={classNames('ml-3 mt-3', className?.profile)}
-                    user={user}
-                    nativeLazyLoading
-                    fetchPriority="low"
+              );
+              const editorBody = (
+                <div className="flex w-full flex-1 flex-row">
+                  {showUserAvatar && user && (
+                    <ProfilePicture
+                      size={ProfileImageSize.Large}
+                      className={classNames('ml-3 mt-3', className?.profile)}
+                      user={user}
+                      nativeLazyLoading
+                      fetchPriority="low"
+                    />
+                  )}
+                  <EditorContent
+                    editor={editor}
+                    className={classNames(
+                      styles.editor,
+                      minHeightClassName,
+                      'min-w-0 flex-1 p-4',
+                      showUserAvatar && user && 'ml-3 tablet:ml-0',
+                      className?.input,
+                    )}
                   />
-                )}
-                <EditorContent
-                  editor={editor}
-                  className={classNames(
-                    styles.editor,
-                    minHeightClassName,
-                    'min-w-0 flex-1 p-4',
-                    showUserAvatar && user && 'ml-3 tablet:ml-0',
-                    className?.input,
+                </div>
+              );
+              return (
+                <>
+                  {toolbarPosition === 'top' && toolbarNode}
+                  {isUploadEnabled && (
+                    <input
+                      type="file"
+                      className="hidden"
+                      name="content_upload"
+                      ref={upload.uploadRef}
+                      accept={allowedContentImage.join(',')}
+                      onInput={upload.onUpload}
+                    />
                   )}
-                />
-              </div>
-            </>
+                  {toolbarPosition === 'bottom' ? (
+                    <div className="flex min-h-0 flex-1 flex-col overflow-y-auto">
+                      {editorBody}
+                    </div>
+                  ) : (
+                    editorBody
+                  )}
+                  {toolbarPosition === 'bottom' && toolbarNode}
+                </>
+              );
+            })()
           )}
           {textareaProps.name && (
             <input type="hidden" name={textareaProps.name} value={input} />
@@ -890,41 +1019,43 @@ function RichTextInput(
           onClickOutside={emoji.clearEmoji}
         />
       )}
-      {footer ?? (
-        <span className="flex flex-row items-center gap-3 border-border-subtlest-tertiary p-2 px-3 text-text-tertiary laptop:border-t">
-          {shouldShowSubmit && !isMarkdownMode && (
-            <span className="hidden text-text-quaternary typo-caption1 tablet:inline">
-              Press {submitShortcut} to send
-            </span>
-          )}
-          {maxLength && remainingCharacters !== null && (
-            <span
-              className={classNames(
-                'ml-auto font-bold typo-callout',
-                remainingCharacters < 100
-                  ? 'text-status-warning'
-                  : 'text-text-tertiary',
+      {hideFooter
+        ? null
+        : footer ?? (
+            <span className="flex flex-row items-center gap-3 border-border-subtlest-tertiary p-2 px-3 text-text-tertiary laptop:border-t">
+              {shouldShowSubmit && !isMarkdownMode && (
+                <span className="hidden text-text-quaternary typo-caption1 tablet:inline">
+                  Press {submitShortcut} to send
+                </span>
+              )}
+              {maxLength && remainingCharacters !== null && (
+                <span
+                  className={classNames(
+                    'ml-auto font-bold typo-callout',
+                    remainingCharacters < 100
+                      ? 'text-status-warning'
+                      : 'text-text-tertiary',
+                  )}
+                >
+                  {remainingCharacters}
+                </span>
+              )}
+              {shouldShowSubmit && (
+                <Button
+                  size={ButtonSize.Small}
+                  className={
+                    maxLength && remainingCharacters !== null ? '' : 'ml-auto'
+                  }
+                  variant={submitButtonVariant}
+                  type="submit"
+                  disabled={isLoading || disabledSubmit || isInputEmpty}
+                  loading={isLoading}
+                >
+                  {submitCopy}
+                </Button>
               )}
-            >
-              {remainingCharacters}
             </span>
           )}
-          {shouldShowSubmit && (
-            <Button
-              size={ButtonSize.Small}
-              className={
-                maxLength && remainingCharacters !== null ? '' : 'ml-auto'
-              }
-              variant={submitButtonVariant}
-              type="submit"
-              disabled={isLoading || disabledSubmit || isInputEmpty}
-              loading={isLoading}
-            >
-              {submitCopy}
-            </Button>
-          )}
-        </span>
-      )}
     </div>
   );
 }
diff --git a/packages/shared/src/components/icons/Maximize/filled.svg b/packages/shared/src/components/icons/Maximize/filled.svg
new file mode 100644
index 00000000000..556f0c46199
--- /dev/null
+++ b/packages/shared/src/components/icons/Maximize/filled.svg
@@ -0,0 +1,7 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg">
+    <title>Icon/Maximize/Filled</title>
+    <g id="Icon/Maximize/Filled" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <path d="M19.5,3 C20.3284271,3 21,3.67157288 21,4.5 L21,9.5 C21,10.3284271 20.3284271,11 19.5,11 C18.6715729,11 18,10.3284271 18,9.5 L18,8.12132034 L14.5606602,11.5606602 C13.9748737,12.1464466 13.0251263,12.1464466 12.4393398,11.5606602 C11.8535534,10.9748737 11.8535534,10.0251263 12.4393398,9.43933983 L15.8786797,6 L14.5,6 C13.6715729,6 13,5.32842712 13,4.5 C13,3.67157288 13.6715729,3 14.5,3 L19.5,3 Z M11.5606602,12.4393398 C12.1464466,13.0251263 12.1464466,13.9748737 11.5606602,14.5606602 L8.12132034,18 L9.5,18 C10.3284271,18 11,18.6715729 11,19.5 C11,20.3284271 10.3284271,21 9.5,21 L4.5,21 C3.67157288,21 3,20.3284271 3,19.5 L3,14.5 C3,13.6715729 3.67157288,13 4.5,13 C5.32842712,13 6,13.6715729 6,14.5 L6,15.8786797 L9.43933983,12.4393398 C10.0251263,11.8535534 10.9748737,11.8535534 11.5606602,12.4393398 Z" id="Shape" fill="#FFFFFF"></path>
+    </g>
+</svg>
diff --git a/packages/shared/src/components/icons/Maximize/index.tsx b/packages/shared/src/components/icons/Maximize/index.tsx
new file mode 100644
index 00000000000..f8e06d49f33
--- /dev/null
+++ b/packages/shared/src/components/icons/Maximize/index.tsx
@@ -0,0 +1,10 @@
+import type { ReactElement } from 'react';
+import React from 'react';
+import type { IconProps } from '../../Icon';
+import Icon from '../../Icon';
+import OutlinedIcon from './outlined.svg';
+import FilledIcon from './filled.svg';
+
+export const MaximizeIcon = (props: IconProps): ReactElement => (
+  <Icon {...props} IconPrimary={OutlinedIcon} IconSecondary={FilledIcon} />
+);
diff --git a/packages/shared/src/components/icons/Maximize/outlined.svg b/packages/shared/src/components/icons/Maximize/outlined.svg
new file mode 100644
index 00000000000..fe2fdd19b59
--- /dev/null
+++ b/packages/shared/src/components/icons/Maximize/outlined.svg
@@ -0,0 +1,7 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg">
+    <title>Icon/Maximize/Outline</title>
+    <g id="Icon/Maximize/Outline" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <path d="M19,3 C19.5522847,3 20,3.44771525 20,4 L20,9 C20,9.55228475 19.5522847,10 19,10 C18.4477153,10 18,9.55228475 18,9 L18,6.41421356 L13.7071068,10.7071068 C13.3165825,11.0976311 12.6834175,11.0976311 12.2928932,10.7071068 C11.9023689,10.3165825 11.9023689,9.68341751 12.2928932,9.29289322 L16.5857864,5 L14,5 C13.4477153,5 13,4.55228475 13,4 C13,3.44771525 13.4477153,3 14,3 L19,3 Z M11.7071068,13.2928932 C12.0976311,13.6834175 12.0976311,14.3165825 11.7071068,14.7071068 L7.41421356,19 L10,19 C10.5522847,19 11,19.4477153 11,20 C11,20.5522847 10.5522847,21 10,21 L5,21 C4.44771525,21 4,20.5522847 4,20 L4,15 C4,14.4477153 4.44771525,14 5,14 C5.55228475,14 6,14.4477153 6,15 L6,17.5857864 L10.2928932,13.2928932 C10.6834175,12.9023689 11.3165825,12.9023689 11.7071068,13.2928932 Z" id="Shape" fill="#FFFFFF"></path>
+    </g>
+</svg>
diff --git a/packages/shared/src/components/icons/Minimize/filled.svg b/packages/shared/src/components/icons/Minimize/filled.svg
new file mode 100644
index 00000000000..35ff8743b9a
--- /dev/null
+++ b/packages/shared/src/components/icons/Minimize/filled.svg
@@ -0,0 +1,7 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg">
+    <title>Icon/Minimize/Filled</title>
+    <g id="Icon/Minimize/Filled" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <path d="M20.5606602,3.43933983 C21.1464466,4.02512627 21.1464466,4.97487373 20.5606602,5.56066017 L17.1213203,9 L18.5,9 C19.3284271,9 20,9.67157288 20,10.5 C20,11.3284271 19.3284271,12 18.5,12 L13.5,12 C12.6715729,12 12,11.3284271 12,10.5 L12,5.5 C12,4.67157288 12.6715729,4 13.5,4 C14.3284271,4 15,4.67157288 15,5.5 L15,6.87867966 L18.4393398,3.43933983 C19.0251263,2.85355339 19.9748737,2.85355339 20.5606602,3.43933983 Z M5.5,12 L10.5,12 C11.3284271,12 12,12.6715729 12,13.5 L12,18.5 C12,19.3284271 11.3284271,20 10.5,20 C9.67157288,20 9,19.3284271 9,18.5 L9,17.1213203 L5.56066017,20.5606602 C4.97487373,21.1464466 4.02512627,21.1464466 3.43933983,20.5606602 C2.85355339,19.9748737 2.85355339,19.0251263 3.43933983,18.4393398 L6.87867966,15 L5.5,15 C4.67157288,15 4,14.3284271 4,13.5 C4,12.6715729 4.67157288,12 5.5,12 Z" id="Shape" fill="#FFFFFF"></path>
+    </g>
+</svg>
diff --git a/packages/shared/src/components/icons/Minimize/index.tsx b/packages/shared/src/components/icons/Minimize/index.tsx
new file mode 100644
index 00000000000..ed8622e24e8
--- /dev/null
+++ b/packages/shared/src/components/icons/Minimize/index.tsx
@@ -0,0 +1,10 @@
+import type { ReactElement } from 'react';
+import React from 'react';
+import type { IconProps } from '../../Icon';
+import Icon from '../../Icon';
+import OutlinedIcon from './outlined.svg';
+import FilledIcon from './filled.svg';
+
+export const MinimizeIcon = (props: IconProps): ReactElement => (
+  <Icon {...props} IconPrimary={OutlinedIcon} IconSecondary={FilledIcon} />
+);
diff --git a/packages/shared/src/components/icons/Minimize/outlined.svg b/packages/shared/src/components/icons/Minimize/outlined.svg
new file mode 100644
index 00000000000..cdf084f0bed
--- /dev/null
+++ b/packages/shared/src/components/icons/Minimize/outlined.svg
@@ -0,0 +1,7 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg">
+    <title>Icon/Minimize/Outline</title>
+    <g id="Icon/Minimize/Outline" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <path d="M20.7071068,3.29289322 C21.0976311,3.68341751 21.0976311,4.31658249 20.7071068,4.70710678 L16.4142136,9 L19,9 C19.5522847,9 20,9.44771525 20,10 C20,10.5522847 19.5522847,11 19,11 L14,11 C13.4477153,11 13,10.5522847 13,10 L13,5 C13,4.44771525 13.4477153,4 14,4 C14.5522847,4 15,4.44771525 15,5 L15,7.58578644 L19.2928932,3.29289322 C19.6834175,2.90236893 20.3165825,2.90236893 20.7071068,3.29289322 Z M5,13 L10,13 C10.5522847,13 11,13.4477153 11,14 L11,19 C11,19.5522847 10.5522847,20 10,20 C9.44771525,20 9,19.5522847 9,19 L9,16.4142136 L4.70710678,20.7071068 C4.31658249,21.0976311 3.68341751,21.0976311 3.29289322,20.7071068 C2.90236893,20.3165825 2.90236893,19.6834175 3.29289322,19.2928932 L7.58578644,15 L5,15 C4.44771525,15 4,14.5522847 4,14 C4,13.4477153 4.44771525,13 5,13 Z" id="Shape" fill="#FFFFFF"></path>
+    </g>
+</svg>
diff --git a/packages/shared/src/components/icons/index.ts b/packages/shared/src/components/icons/index.ts
index 2a18dfe034d..37ba3f92871 100644
--- a/packages/shared/src/components/icons/index.ts
+++ b/packages/shared/src/components/icons/index.ts
@@ -96,6 +96,7 @@ export * from './Magic';
 export * from './Mail';
 export * from './Markdown';
 export * from './Mastodon';
+export * from './Maximize';
 export * from './MedalBadge';
 export * from './Megaphone';
 export * from './Menu';
@@ -103,6 +104,7 @@ export * from './Merge';
 export * from './Microphone';
 export * from './Microsoft';
 export * from './MiniClose';
+export * from './Minimize';
 export * from './Minus';
 export * from './Moon';
 export * from './MoveTo';
diff --git a/packages/shared/src/components/modals/common.tsx b/packages/shared/src/components/modals/common.tsx
index b75b7d6d95b..73d0b0c45b8 100644
--- a/packages/shared/src/components/modals/common.tsx
+++ b/packages/shared/src/components/modals/common.tsx
@@ -48,6 +48,13 @@ const CreateSharedPostModal = dynamic(
     ),
 );
 
+const SmartComposerModal = dynamic(
+  () =>
+    import(
+      /* webpackChunkName: "smartComposerModal" */ './post/SmartComposerModal'
+    ),
+);
+
 const ReportPostModal = dynamic(
   () =>
     import(
@@ -495,6 +502,7 @@ export const modals = {
   [LazyModal.ReadingHistory]: ReadingHistoryModal,
   [LazyModal.SquadPromotion]: SquadPromotionModal,
   [LazyModal.CreateSharedPost]: CreateSharedPostModal,
+  [LazyModal.SmartComposer]: SmartComposerModal,
   [LazyModal.ReportPost]: ReportPostModal,
   [LazyModal.ReportComment]: ReportCommentModal,
   [LazyModal.SquadNotifications]: SquadNotificationsModal,
diff --git a/packages/shared/src/components/modals/common/types.ts b/packages/shared/src/components/modals/common/types.ts
index e0f59663375..8f8add1ee11 100644
--- a/packages/shared/src/components/modals/common/types.ts
+++ b/packages/shared/src/components/modals/common/types.ts
@@ -32,6 +32,7 @@ export enum LazyModal {
   ReadingHistory = 'readingHistory',
   SquadPromotion = 'squadPromotion',
   CreateSharedPost = 'createSharedPost',
+  SmartComposer = 'smartComposer',
   ReasonSelection = 'reasonSelection',
   ReportPost = 'reportPost',
   ReportComment = 'reportComment',
diff --git a/packages/shared/src/components/modals/post/SmartComposerModal.spec.tsx b/packages/shared/src/components/modals/post/SmartComposerModal.spec.tsx
new file mode 100644
index 00000000000..3a1adb31c28
--- /dev/null
+++ b/packages/shared/src/components/modals/post/SmartComposerModal.spec.tsx
@@ -0,0 +1,158 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import { useAuthContext } from '../../../contexts/AuthContext';
+import { useLogContext } from '../../../contexts/LogContext';
+import { useViewSize, ViewSize } from '../../../hooks';
+import { usePrompt } from '../../../hooks/usePrompt';
+import { useNotificationToggle } from '../../../hooks/notifications';
+import { useComposerAudience } from '../../post/composer/useComposerAudience';
+import { useComposerSubmit } from '../../post/composer/useComposerSubmit';
+import { SmartComposerModal } from './SmartComposerModal';
+
+jest.mock('../../../contexts/AuthContext', () => ({
+  useAuthContext: jest.fn(),
+}));
+
+jest.mock('../../../contexts/LogContext', () => ({
+  useLogContext: jest.fn(),
+}));
+
+jest.mock('../../../hooks', () => {
+  const actual = jest.requireActual('../../../hooks');
+
+  return {
+    ...actual,
+    useViewSize: jest.fn(),
+  };
+});
+
+jest.mock('../../../hooks/usePrompt', () => ({
+  usePrompt: jest.fn(),
+}));
+
+jest.mock('../../../hooks/notifications', () => ({
+  useNotificationToggle: jest.fn(),
+}));
+
+jest.mock('../../post/composer/useComposerAudience', () => ({
+  isUserAudience: jest.fn(() => false),
+  useComposerAudience: jest.fn(),
+}));
+
+jest.mock('../../post/composer/useComposerSubmit', () => ({
+  useComposerSubmit: jest.fn(),
+}));
+
+jest.mock('../../post/composer/AudienceChip', () => ({
+  AudienceChip: () => null,
+}));
+
+jest.mock('../../post/composer/KindModePicker', () => ({
+  KindModePicker: () => null,
+}));
+
+jest.mock('../../post/composer/LinkForm', () => ({
+  LinkForm: () => null,
+}));
+
+jest.mock('../../post/composer/PollForm', () => ({
+  PollForm: () => null,
+}));
+
+jest.mock('../../post/composer/TextForm', () => ({
+  TextForm: () => null,
+}));
+
+jest.mock('../../tooltip/Tooltip', () => ({
+  Tooltip: ({ children }: React.PropsWithChildren) => children,
+}));
+
+jest.mock('../common/Modal', () => ({
+  Modal: ({ children }: React.PropsWithChildren) => <div>{children}</div>,
+}));
+
+describe('SmartComposerModal', () => {
+  const logEvent = jest.fn();
+  const showPrompt = jest.fn();
+  const onSubmitted = jest.fn();
+  const onRequestClose = jest.fn();
+
+  beforeEach(() => {
+    jest.clearAllMocks();
+
+    jest.mocked(useAuthContext).mockReturnValue({
+      user: null,
+    } as unknown as ReturnType<typeof useAuthContext>);
+    jest.mocked(useLogContext).mockReturnValue({
+      logEvent,
+    } as unknown as ReturnType<typeof useLogContext>);
+    jest
+      .mocked(useViewSize)
+      .mockImplementation((size) => size === ViewSize.Laptop);
+    jest.mocked(usePrompt).mockReturnValue({
+      showPrompt,
+    } as unknown as ReturnType<typeof usePrompt>);
+    jest.mocked(useNotificationToggle).mockReturnValue({
+      shouldShowCta: true,
+      isEnabled: true,
+      onToggle: jest.fn(),
+      onSubmitted,
+    } as unknown as ReturnType<typeof useNotificationToggle>);
+    jest.mocked(useComposerAudience).mockReturnValue({
+      audiences: [],
+      selectedIds: ['squad-1'],
+      selected: [
+        {
+          id: 'squad-1',
+          name: 'Squad',
+          handle: 'squad',
+        },
+      ],
+      setSelectedIds: jest.fn(),
+      userAudienceId: 'user-1',
+    } as unknown as ReturnType<typeof useComposerAudience>);
+    jest.mocked(useComposerSubmit).mockReturnValue({
+      handleSubmit: jest.fn(),
+      isSubmitDisabled: false,
+      isInFlight: false,
+      preview: { url: 'https://daily.dev', title: 'daily.dev' },
+      isLoadingPreview: false,
+      fetchPreview: jest.fn(),
+    });
+  });
+
+  it('keeps the production notification CTA visible in the composer', () => {
+    render(
+      <SmartComposerModal
+        isOpen
+        initialUrl="https://daily.dev"
+        onRequestClose={onRequestClose}
+      />,
+    );
+
+    expect(
+      screen.getByText(
+        'Receive updates whenever your Squad members engage with your post',
+      ),
+    ).toBeInTheDocument();
+  });
+
+  it('runs notification submit handling before closing after a successful post', async () => {
+    render(
+      <SmartComposerModal
+        isOpen
+        initialUrl="https://daily.dev"
+        onRequestClose={onRequestClose}
+      />,
+    );
+
+    const hookProps = jest.mocked(useComposerSubmit).mock.calls[0]?.[0];
+
+    expect(hookProps?.onComplete).toBeDefined();
+
+    await hookProps?.onComplete();
+
+    expect(onSubmitted).toHaveBeenCalledTimes(1);
+    expect(onRequestClose).toHaveBeenCalledTimes(1);
+  });
+});
diff --git a/packages/shared/src/components/modals/post/SmartComposerModal.tsx b/packages/shared/src/components/modals/post/SmartComposerModal.tsx
new file mode 100644
index 00000000000..924a0087976
--- /dev/null
+++ b/packages/shared/src/components/modals/post/SmartComposerModal.tsx
@@ -0,0 +1,447 @@
+import type { ReactElement } from 'react';
+import React, {
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+} from 'react';
+import classNames from 'classnames';
+import type { LazyModalCommonProps } from '../common/Modal';
+import { Modal } from '../common/Modal';
+import { ModalKind, ModalSize } from '../common/types';
+import { Button, ButtonColor, ButtonVariant } from '../../buttons/Button';
+import CloseButton from '../../CloseButton';
+import { ButtonSize } from '../../buttons/common';
+import { ProfileImageSize, ProfilePicture } from '../../ProfilePicture';
+import {
+  InfoIcon,
+  MarkdownIcon,
+  MaximizeIcon,
+  MinimizeIcon,
+} from '../../icons';
+import { IconSize } from '../../Icon';
+import { Tooltip } from '../../tooltip/Tooltip';
+import { Switch } from '../../fields/Switch';
+import { Drawer, DrawerPosition } from '../../drawers/Drawer';
+import { labels } from '../../../lib/labels';
+import { useAuthContext } from '../../../contexts/AuthContext';
+import { useLogContext } from '../../../contexts/LogContext';
+import { LogEvent } from '../../../lib/log';
+import { useViewSize, ViewSize } from '../../../hooks';
+import { usePrompt } from '../../../hooks/usePrompt';
+import type { ExternalLinkPreview } from '../../../graphql/posts';
+import { AudienceChip } from '../../post/composer/AudienceChip';
+import { KindModePicker } from '../../post/composer/KindModePicker';
+import {
+  TextForm,
+  type TextFormCover,
+  type TextFormHandle,
+} from '../../post/composer/TextForm';
+import { LinkForm } from '../../post/composer/LinkForm';
+import { PollForm } from '../../post/composer/PollForm';
+import { useNotificationToggle } from '../../../hooks/notifications';
+import {
+  isUserAudience,
+  useComposerAudience,
+} from '../../post/composer/useComposerAudience';
+import { useComposerSubmit } from '../../post/composer/useComposerSubmit';
+import {
+  DEFAULT_LINK,
+  DEFAULT_POLL,
+  DEFAULT_TEXT,
+  type ComposerKind,
+  type LinkFormState,
+  type PollFormState,
+  type TextFormState,
+} from '../../post/composer/types';
+
+export interface SmartComposerModalProps extends LazyModalCommonProps {
+  initialUrl?: string;
+  initialSquadHandle?: string;
+  preview?: ExternalLinkPreview;
+}
+
+export function SmartComposerModal({
+  onRequestClose,
+  initialUrl,
+  initialSquadHandle,
+  preview: initialPreview,
+  ...props
+}: SmartComposerModalProps): ReactElement {
+  const { user } = useAuthContext();
+  const { logEvent } = useLogContext();
+  const isLaptop = useViewSize(ViewSize.Laptop);
+  const { showPrompt } = usePrompt();
+  const { shouldShowCta, isEnabled, onToggle, onSubmitted } =
+    useNotificationToggle();
+  const [kind, setKind] = useState<ComposerKind>(initialUrl ? 'link' : 'text');
+  const [text, setText] = useState<TextFormState>(DEFAULT_TEXT);
+  const [link, setLink] = useState<LinkFormState>({
+    ...DEFAULT_LINK,
+    url: initialUrl ?? '',
+  });
+  const [poll, setPoll] = useState<PollFormState>(DEFAULT_POLL);
+  const [cover, setCover] = useState<TextFormCover | null>(null);
+  const [isExpanded, setIsExpanded] = useState(false);
+  const [isMarkdownMode, setIsMarkdownMode] = useState(false);
+  const textFormRef = useRef<TextFormHandle>(null);
+
+  const isDirty = useMemo(() => {
+    if (cover) {
+      return true;
+    }
+    if (text.title.trim() || text.body.trim()) {
+      return true;
+    }
+    if (link.url.trim() || link.commentary.trim()) {
+      return true;
+    }
+    if (poll.question.trim() || poll.options.some((option) => option.trim())) {
+      return true;
+    }
+    return false;
+  }, [cover, text, link, poll]);
+
+  const handleClose = useCallback(
+    async (event?: React.MouseEvent | React.KeyboardEvent) => {
+      const closeAndLog = () => {
+        logEvent({
+          event_name: LogEvent.CloseSmartComposer,
+          extra: JSON.stringify({ kind, isDirty }),
+        });
+        onRequestClose?.(event);
+      };
+      if (!isDirty) {
+        closeAndLog();
+        return;
+      }
+      const confirmed = await showPrompt({
+        title: 'Discard draft?',
+        description:
+          'You have unsaved changes. Are you sure you want to discard them?',
+        okButton: {
+          title: 'Discard',
+          variant: ButtonVariant.Primary,
+          color: ButtonColor.Ketchup,
+        },
+        cancelButton: { title: 'Keep editing' },
+      });
+      if (confirmed) {
+        closeAndLog();
+      }
+    },
+    [isDirty, kind, logEvent, onRequestClose, showPrompt],
+  );
+
+  useEffect(() => {
+    logEvent({
+      event_name: LogEvent.OpenSmartComposer,
+      extra: JSON.stringify({ kind, hasInitialUrl: !!initialUrl }),
+    });
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  const onKindChange = useCallback(
+    (next: ComposerKind) => {
+      setKind((prev) => {
+        if (prev !== next) {
+          logEvent({
+            event_name: LogEvent.SwitchComposerKind,
+            extra: JSON.stringify({ from: prev, to: next }),
+          });
+        }
+        return next;
+      });
+    },
+    [logEvent],
+  );
+
+  const onCoverChange = useCallback(
+    (next: TextFormCover | null) => {
+      setCover((prev) => {
+        if (next && !prev) {
+          logEvent({ event_name: LogEvent.AddComposerCover });
+        } else if (!next && prev) {
+          logEvent({ event_name: LogEvent.RemoveComposerCover });
+        }
+        return next;
+      });
+    },
+    [logEvent],
+  );
+
+  const onToggleExpand = useCallback(() => {
+    setIsExpanded((prev) => {
+      logEvent({
+        event_name: LogEvent.ToggleComposerExpand,
+        extra: JSON.stringify({ expanded: !prev }),
+      });
+      return !prev;
+    });
+  }, [logEvent]);
+
+  const onMarkdownModeChange = useCallback(
+    (next: boolean) => {
+      setIsMarkdownMode((prev) => {
+        if (prev !== next) {
+          logEvent({
+            event_name: LogEvent.ToggleComposerMarkdown,
+            extra: JSON.stringify({ markdown: next }),
+          });
+        }
+        return next;
+      });
+    },
+    [logEvent],
+  );
+
+  const { audiences, selectedIds, selected, setSelectedIds, userAudienceId } =
+    useComposerAudience(initialSquadHandle);
+  const primary = selected[0];
+  const isMulti = selected.length > 1;
+
+  const {
+    handleSubmit,
+    isSubmitDisabled,
+    isInFlight,
+    preview,
+    isLoadingPreview,
+    fetchPreview,
+  } = useComposerSubmit({
+    kind,
+    text,
+    link,
+    poll,
+    cover,
+    primary,
+    selectedIds,
+    isMulti,
+    initialPreview,
+    onComplete: () => {
+      onSubmitted();
+      onRequestClose?.();
+    },
+  });
+
+  const showSpamWarning =
+    selected.filter((audience) => !isUserAudience(audience)).length > 1;
+  const submitLabel = kind === 'poll' ? 'Post poll' : 'Post';
+
+  const kindPickerNode = (
+    <KindModePicker
+      value={kind}
+      onChange={onKindChange}
+      disabled={isInFlight}
+    />
+  );
+
+  const onFormSubmit = useCallback(
+    (event: React.FormEvent<HTMLFormElement>) => {
+      logEvent({
+        event_name: LogEvent.SubmitSmartComposer,
+        extra: JSON.stringify({ kind, audiences: selectedIds.length }),
+      });
+      return handleSubmit(event);
+    },
+    [handleSubmit, kind, logEvent, selectedIds.length],
+  );
+
+  const isCoverUploading = !!cover?.isUploading;
+  const postButtonNode = (
+    <Button
+      form="smart_composer"
+      type="submit"
+      variant={ButtonVariant.Primary}
+      size={ButtonSize.Small}
+      disabled={isSubmitDisabled || isCoverUploading}
+      loading={isInFlight || isCoverUploading}
+      className="ml-2 px-5"
+    >
+      {submitLabel}
+    </Button>
+  );
+  const notificationToggleNode = shouldShowCta ? (
+    <Switch
+      data-testid="push_notification-switch"
+      inputId="smart_composer-push_notification-switch"
+      name="push_notification"
+      labelClassName="flex-1 font-normal"
+      className="py-1"
+      compact={false}
+      checked={isEnabled}
+      onToggle={onToggle}
+    >
+      Receive updates whenever your Squad members engage with your post
+    </Switch>
+  ) : null;
+
+  const formContent = (
+    <form
+      id="smart_composer"
+      onSubmit={onFormSubmit}
+      className={classNames(
+        'flex h-full min-h-0 w-full flex-col',
+        isExpanded && 'mx-auto max-w-[58rem]',
+      )}
+    >
+      <div className="flex shrink-0 items-start justify-between gap-2 px-5 pb-2 pt-5">
+        <div className="flex min-w-0 flex-1 items-center gap-2">
+          {user && (
+            <ProfilePicture
+              user={user}
+              size={ProfileImageSize.Medium}
+              nativeLazyLoading
+            />
+          )}
+          <AudienceChip
+            audiences={audiences}
+            selectedIds={selectedIds}
+            onChange={setSelectedIds}
+            userAudienceId={userAudienceId}
+            disabled={isInFlight}
+          />
+        </div>
+        <div className="flex shrink-0 items-center gap-1">
+          {kind === 'text' && (
+            <Tooltip
+              content={
+                isMarkdownMode ? 'Switch to rich text' : 'Switch to Markdown'
+              }
+            >
+              <Button
+                type="button"
+                size={ButtonSize.Small}
+                variant={ButtonVariant.Tertiary}
+                icon={<MarkdownIcon secondary={isMarkdownMode} />}
+                pressed={isMarkdownMode}
+                onClick={() => textFormRef.current?.toggleMarkdownMode()}
+                aria-label={
+                  isMarkdownMode ? 'Switch to rich text' : 'Switch to Markdown'
+                }
+                aria-pressed={isMarkdownMode}
+              />
+            </Tooltip>
+          )}
+          <Tooltip
+            content={isExpanded ? 'Collapse composer' : 'Expand composer'}
+          >
+            <Button
+              type="button"
+              size={ButtonSize.Small}
+              variant={ButtonVariant.Tertiary}
+              icon={
+                isExpanded ? (
+                  <MinimizeIcon size={IconSize.Size16} />
+                ) : (
+                  <MaximizeIcon size={IconSize.Size16} />
+                )
+              }
+              onClick={onToggleExpand}
+              aria-label={isExpanded ? 'Collapse composer' : 'Expand composer'}
+              aria-pressed={isExpanded}
+            />
+          </Tooltip>
+          <CloseButton
+            type="button"
+            size={ButtonSize.Small}
+            onClick={(event) => {
+              handleClose(event);
+            }}
+            aria-label="Close composer"
+          />
+        </div>
+      </div>
+      {showSpamWarning && (
+        <div className="bg-status-warning/10 flex w-full shrink-0 items-center gap-2 px-5 py-1.5 text-text-secondary typo-caption2">
+          <InfoIcon
+            size={IconSize.Size16}
+            secondary
+            className="shrink-0 text-status-warning"
+          />
+          <span>{labels.postCreation.warnings.spammyPosts}</span>
+        </div>
+      )}
+      {kind === 'text' && (
+        <>
+          <TextForm
+            ref={textFormRef}
+            value={text}
+            onChange={setText}
+            sourceId={primary?.id}
+            cover={cover}
+            onCoverChange={onCoverChange}
+            toolbarLeading={kindPickerNode}
+            toolbarRightActions={postButtonNode}
+            onMarkdownModeChange={onMarkdownModeChange}
+          />
+          {!isMarkdownMode && notificationToggleNode && (
+            <div className="flex shrink-0 px-5 pb-5 pt-2">
+              {notificationToggleNode}
+            </div>
+          )}
+        </>
+      )}
+      {kind !== 'text' && (
+        <div className="flex min-h-0 flex-1 flex-col gap-3 overflow-y-auto px-5 pb-3 pt-2">
+          {kind === 'link' && (
+            <LinkForm
+              value={link}
+              onChange={setLink}
+              preview={preview}
+              isLoadingPreview={isLoadingPreview}
+              fetchPreview={fetchPreview}
+              onDismissPreview={() =>
+                logEvent({ event_name: LogEvent.DismissComposerPreview })
+              }
+            />
+          )}
+          {kind === 'poll' && <PollForm value={poll} onChange={setPoll} />}
+        </div>
+      )}
+      {(kind !== 'text' || isMarkdownMode) && (
+        <div className="flex shrink-0 flex-col gap-3 px-5 pb-5 pt-4 tablet:flex-row tablet:items-center tablet:justify-between">
+          {notificationToggleNode}
+          {kindPickerNode}
+          <span className="ml-auto">{postButtonNode}</span>
+        </div>
+      )}
+    </form>
+  );
+
+  if (!isLaptop) {
+    return (
+      <Drawer
+        isOpen
+        isFullScreen
+        position={DrawerPosition.Bottom}
+        onClose={() => {
+          handleClose();
+        }}
+        className={{ wrapper: 'flex flex-col p-0' }}
+      >
+        {formContent}
+      </Drawer>
+    );
+  }
+
+  return (
+    <Modal
+      kind={ModalKind.FlexibleTop}
+      size={isExpanded ? ModalSize.XLarge : ModalSize.Medium}
+      onRequestClose={handleClose}
+      overlayClassName={isExpanded ? '!pt-0' : 'tablet:!pt-16 laptop:!pt-12'}
+      className={classNames(
+        'flex flex-col',
+        isExpanded
+          ? '!mb-0 !mt-0 !h-[100vh] !max-h-[100vh] !w-[100vw] !max-w-[100vw] !rounded-none'
+          : '!min-h-[30.5rem] !max-w-[48.75rem] tablet:!max-h-[calc(100vh-7rem)] tablet:w-[48.75rem] laptop:!max-h-[calc(100vh-6rem)]',
+      )}
+      {...props}
+    >
+      {formContent}
+    </Modal>
+  );
+}
+
+export default SmartComposerModal;
diff --git a/packages/shared/src/components/post/composer/AudienceChip.spec.tsx b/packages/shared/src/components/post/composer/AudienceChip.spec.tsx
new file mode 100644
index 00000000000..939268ccce1
--- /dev/null
+++ b/packages/shared/src/components/post/composer/AudienceChip.spec.tsx
@@ -0,0 +1,151 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import type { Squad } from '../../../graphql/sources';
+import { SourceMemberRole, SourceType } from '../../../graphql/sources';
+import { AudienceChip } from './AudienceChip';
+
+jest.mock('../../dropdown/DropdownMenu', () => ({
+  DropdownMenu: ({ children }: { children: React.ReactNode }) => (
+    <div>{children}</div>
+  ),
+  DropdownMenuTrigger: ({ children }: { children: React.ReactNode }) =>
+    children,
+  DropdownMenuContent: ({ children }: { children: React.ReactNode }) => (
+    <div>{children}</div>
+  ),
+  DropdownMenuItem: ({
+    children,
+    onSelect,
+    ...props
+  }: {
+    children: React.ReactNode;
+    onSelect?: (event: Event) => void;
+  }) => (
+    <div
+      role="menuitem"
+      tabIndex={0}
+      onClick={(event) => onSelect?.(event.nativeEvent)}
+      onKeyDown={(event) => {
+        if (event.key === 'Enter' || event.key === ' ') {
+          onSelect?.(event.nativeEvent);
+        }
+      }}
+      {...props}
+    >
+      {children}
+    </div>
+  ),
+}));
+
+const createAudience = (
+  id: string,
+  name: string,
+  type: SourceType = SourceType.Squad,
+): Squad =>
+  ({
+    id,
+    name,
+    type,
+    handle: id,
+    image: `https://daily.dev/${id}.jpg`,
+    active: true,
+    permalink: `/squads/${id}`,
+    public: true,
+    membersCount: 1,
+    description: '',
+    memberPostingRole: SourceMemberRole.Member,
+    memberInviteRole: SourceMemberRole.Member,
+    moderationRequired: false,
+    moderationPostCount: 0,
+  } as unknown as Squad);
+
+const userAudience = createAudience('user-1', 'Chris', SourceType.User);
+const frontendSquad = createAudience('squad-frontend', 'Frontend');
+const backendSquad = createAudience('squad-backend', 'Backend');
+const mobileSquad = createAudience('squad-mobile', 'Mobile');
+const designSquad = createAudience('squad-design', 'Design');
+
+const audiences = [
+  userAudience,
+  frontendSquad,
+  backendSquad,
+  mobileSquad,
+  designSquad,
+];
+
+const renderComponent = ({
+  selectedIds = ['user-1'],
+  onChange = jest.fn(),
+}: {
+  selectedIds?: string[];
+  onChange?: jest.Mock;
+} = {}) => {
+  render(
+    <AudienceChip
+      audiences={audiences}
+      selectedIds={selectedIds}
+      onChange={onChange}
+      userAudienceId="user-1"
+    />,
+  );
+
+  return { onChange };
+};
+
+describe('AudienceChip', () => {
+  it('renders checkbox controls for audience options', () => {
+    renderComponent();
+
+    expect(
+      screen.getByRole('checkbox', {
+        name: 'Toggle Everyone for multi-audience posting',
+      }),
+    ).toBeInTheDocument();
+    expect(
+      screen.getByRole('checkbox', {
+        name: 'Toggle Frontend for multi-audience posting',
+      }),
+    ).toBeInTheDocument();
+  });
+
+  it('single-selects an audience when clicking the row', async () => {
+    const { onChange } = renderComponent({
+      selectedIds: ['user-1', 'squad-backend'],
+    });
+
+    await userEvent.click(screen.getByText('Frontend'));
+
+    expect(onChange).toHaveBeenCalledWith(['squad-frontend']);
+  });
+
+  it('multi-selects an audience when clicking the checkbox', async () => {
+    const { onChange } = renderComponent();
+
+    await userEvent.click(
+      screen.getByRole('checkbox', {
+        name: 'Toggle Frontend for multi-audience posting',
+      }),
+    );
+
+    expect(onChange).toHaveBeenCalledTimes(1);
+    expect(onChange).toHaveBeenCalledWith(['user-1', 'squad-frontend']);
+  });
+
+  it('keeps row single-select available when the multi-select checkbox is disabled', async () => {
+    const { onChange } = renderComponent({
+      selectedIds: ['squad-frontend', 'squad-backend', 'squad-mobile'],
+    });
+    const designCheckbox = screen.getByRole('checkbox', {
+      name: 'Toggle Design for multi-audience posting',
+    });
+
+    expect(designCheckbox).toBeDisabled();
+
+    await userEvent.click(designCheckbox);
+    expect(onChange).not.toHaveBeenCalled();
+
+    await userEvent.click(screen.getByText('Design'));
+    expect(onChange).toHaveBeenCalledWith(['squad-design']);
+  });
+});
diff --git a/packages/shared/src/components/post/composer/AudienceChip.tsx b/packages/shared/src/components/post/composer/AudienceChip.tsx
new file mode 100644
index 00000000000..5e823faf075
--- /dev/null
+++ b/packages/shared/src/components/post/composer/AudienceChip.tsx
@@ -0,0 +1,291 @@
+import type { ReactElement } from 'react';
+import React, { useState } from 'react';
+import classNames from 'classnames';
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from '../../dropdown/DropdownMenu';
+import { Checkbox } from '../../fields/Checkbox';
+import { SourceAvatar } from '../../profile/source';
+import { ProfileImageSize } from '../../ProfilePicture';
+import { ArrowIcon, InfoIcon } from '../../icons';
+import { IconSize } from '../../Icon';
+import { TruncateText } from '../../utilities';
+import type { Squad } from '../../../graphql/sources';
+import { MAX_AUDIENCE_SQUADS, isUserAudience } from './useComposerAudience';
+
+interface AudienceChipProps {
+  audiences: Squad[];
+  selectedIds: string[];
+  onChange: (ids: string[]) => void;
+  userAudienceId: string | undefined;
+  disabled?: boolean;
+}
+
+const AvatarStack = ({
+  audiences,
+}: {
+  audiences: Squad[];
+}): ReactElement | null => {
+  const visible = audiences.slice(0, 3);
+  if (visible.length === 0) {
+    return null;
+  }
+  return (
+    <span className="flex shrink-0 items-center -space-x-1">
+      {visible.map((audience) => (
+        <SourceAvatar
+          key={audience.id}
+          source={audience}
+          size={ProfileImageSize.XSmall}
+          className="!mr-0 ring-2 ring-background-default"
+        />
+      ))}
+    </span>
+  );
+};
+
+export const AudienceChip = ({
+  audiences,
+  selectedIds,
+  onChange,
+  userAudienceId,
+  disabled,
+}: AudienceChipProps): ReactElement | null => {
+  const [open, setOpen] = useState(false);
+
+  const selected = audiences.filter(
+    (audience) => !!audience.id && selectedIds.includes(audience.id),
+  );
+  const primary = selected[0];
+  if (!primary) {
+    return null;
+  }
+
+  const isMulti = selected.length > 1;
+  const canPickAudience = audiences.length > 1;
+  const showChevron = !disabled && canPickAudience;
+  const triggerLabel = (() => {
+    if (isMulti) {
+      return `${selected.length} audiences`;
+    }
+    return isUserAudience(primary) ? 'Everyone' : primary.name;
+  })();
+  const buildAriaLabel = (): string => {
+    if (!canPickAudience) {
+      return `Posting to ${triggerLabel}`;
+    }
+    if (isMulti) {
+      return `Posting to ${selected.length} audiences. Open audience menu.`;
+    }
+    return `Posting to ${triggerLabel}. Open audience menu.`;
+  };
+  const showSinglePrimaryAvatar = !isMulti && !isUserAudience(primary);
+
+  const isEveryoneSelected =
+    !!userAudienceId && selectedIds.includes(userAudienceId);
+  const selectedSquadCount = selected.filter(
+    (audience) => !isUserAudience(audience),
+  ).length;
+  const isAtSquadLimit = selectedSquadCount >= MAX_AUDIENCE_SQUADS;
+
+  const toggleEveryone = () => {
+    if (!userAudienceId) {
+      return;
+    }
+    if (isEveryoneSelected) {
+      if (selectedSquadCount === 0) {
+        return; // last-resort floor — keep Everyone selected
+      }
+      onChange(selectedIds.filter((id) => id !== userAudienceId));
+      return;
+    }
+    onChange([...selectedIds, userAudienceId]);
+  };
+
+  const toggleSquad = (squad: Squad) => {
+    const { id } = squad;
+    if (!id) {
+      return;
+    }
+    if (selectedIds.includes(id)) {
+      const remaining = selectedIds.filter((entry) => entry !== id);
+      if (remaining.length === 0) {
+        onChange(userAudienceId ? [userAudienceId] : [id]);
+        return;
+      }
+      onChange(remaining);
+      return;
+    }
+    if (isAtSquadLimit) {
+      return;
+    }
+    onChange([...selectedIds, id]);
+  };
+
+  const toggleOption = (option: Squad) => {
+    if (isUserAudience(option)) {
+      toggleEveryone();
+      return;
+    }
+    toggleSquad(option);
+  };
+
+  const selectSingleOption = (option: Squad) => {
+    if (!option.id) {
+      return;
+    }
+    onChange([option.id]);
+  };
+
+  const handleReset = () => {
+    if (userAudienceId) {
+      onChange([userAudienceId]);
+    }
+  };
+
+  const canReset = !isEveryoneSelected || selectedSquadCount > 0;
+
+  return (
+    <DropdownMenu open={open} onOpenChange={setOpen}>
+      <DropdownMenuTrigger asChild>
+        <button
+          type="button"
+          disabled={disabled || !canPickAudience}
+          aria-haspopup={canPickAudience ? 'menu' : undefined}
+          aria-expanded={canPickAudience ? open : undefined}
+          aria-label={buildAriaLabel()}
+          className={classNames(
+            'flex max-w-full shrink-0 items-center gap-1.5 rounded-12 px-2.5 py-1 text-text-primary transition-colors typo-callout',
+            showChevron && 'hover:bg-surface-float',
+            !showChevron && 'cursor-default',
+            open && showChevron && 'bg-surface-float',
+          )}
+        >
+          {isMulti ? (
+            <AvatarStack audiences={selected} />
+          ) : (
+            showSinglePrimaryAvatar && (
+              <SourceAvatar source={primary} size={ProfileImageSize.XSmall} />
+            )
+          )}
+          <TruncateText className="max-w-48 font-bold">
+            {triggerLabel}
+          </TruncateText>
+          {showChevron && (
+            <ArrowIcon
+              className={classNames(
+                'shrink-0 text-text-tertiary transition-transform',
+                open ? 'rotate-0' : 'rotate-180',
+              )}
+              size={IconSize.Size16}
+            />
+          )}
+        </button>
+      </DropdownMenuTrigger>
+      {showChevron && (
+        <DropdownMenuContent
+          align="start"
+          variant="field"
+          className={classNames(
+            '!min-w-64 !max-w-72',
+            isAtSquadLimit && '!pb-0',
+          )}
+          scrollableClassName=""
+        >
+          <div className="flex items-center justify-between gap-2 px-3 pb-1 pt-2">
+            <span className="text-text-tertiary typo-caption2">Post to</span>
+            <button
+              type="button"
+              onClick={handleReset}
+              disabled={!canReset}
+              className={classNames(
+                'rounded-6 px-1 transition-colors typo-caption1',
+                canReset
+                  ? 'text-text-link hover:underline'
+                  : 'cursor-default text-text-disabled',
+              )}
+            >
+              Reset
+            </button>
+          </div>
+          <div className="flex max-h-60 flex-col gap-px overflow-y-auto">
+            {audiences.map((option) => {
+              const isSelected = !!option.id && selectedIds.includes(option.id);
+              const reachedLimit =
+                !isSelected && !isUserAudience(option) && isAtSquadLimit;
+              const optionLabel = isUserAudience(option)
+                ? 'Everyone'
+                : option.name;
+              return (
+                <DropdownMenuItem
+                  key={option.id}
+                  onSelect={(event: Event) => {
+                    if (!option.id) {
+                      event.preventDefault();
+                      return;
+                    }
+                    selectSingleOption(option);
+                  }}
+                  className="!h-9 gap-2 !overflow-visible !px-2"
+                >
+                  <SourceAvatar
+                    source={option}
+                    size={ProfileImageSize.XSmall}
+                    className="!mr-0 shrink-0"
+                  />
+                  <span
+                    className={classNames(
+                      'min-w-0 flex-1 truncate text-left typo-callout',
+                      isSelected && 'font-bold text-text-primary',
+                    )}
+                  >
+                    {optionLabel}
+                  </span>
+                  <span
+                    role="presentation"
+                    className="flex size-5 shrink-0 items-center justify-center"
+                    onClick={(event) => event.stopPropagation()}
+                    onKeyDown={(event) => event.stopPropagation()}
+                  >
+                    <Checkbox
+                      name="audiences[]"
+                      checked={isSelected}
+                      disabled={reachedLimit}
+                      className="!p-0 !pr-0"
+                      checkmarkClassName="!mr-0"
+                      onChange={() => {
+                        if (reachedLimit) {
+                          return;
+                        }
+                        toggleOption(option);
+                      }}
+                    >
+                      <span className="sr-only">
+                        Toggle {optionLabel} for multi-audience posting
+                      </span>
+                    </Checkbox>
+                  </span>
+                </DropdownMenuItem>
+              );
+            })}
+          </div>
+          {isAtSquadLimit && (
+            <div className="flex items-center gap-2 border-t border-border-subtlest-tertiary bg-surface-float px-3 py-2 text-text-secondary typo-caption1">
+              <InfoIcon
+                size={IconSize.Size16}
+                secondary
+                className="shrink-0 text-status-info"
+              />
+              <span className="font-bold">
+                You can post to up to {MAX_AUDIENCE_SQUADS} squads
+              </span>
+            </div>
+          )}
+        </DropdownMenuContent>
+      )}
+    </DropdownMenu>
+  );
+};
diff --git a/packages/shared/src/components/post/composer/KindModePicker.tsx b/packages/shared/src/components/post/composer/KindModePicker.tsx
new file mode 100644
index 00000000000..9400ac3a593
--- /dev/null
+++ b/packages/shared/src/components/post/composer/KindModePicker.tsx
@@ -0,0 +1,109 @@
+import type { ReactElement } from 'react';
+import React, { cloneElement, useState } from 'react';
+import classNames from 'classnames';
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from '../../dropdown/DropdownMenu';
+import { IconSize } from '../../Icon';
+import { ArrowIcon, EditIcon, LinkIcon, PollIcon } from '../../icons';
+import type { ComposerKind } from './types';
+
+interface KindOption {
+  kind: ComposerKind;
+  label: string;
+  icon: ReactElement;
+}
+
+const KIND_OPTIONS: KindOption[] = [
+  { kind: 'text', label: 'Free form', icon: <EditIcon /> },
+  { kind: 'link', label: 'Share a link', icon: <LinkIcon /> },
+  { kind: 'poll', label: 'Poll', icon: <PollIcon /> },
+];
+
+const findOption = (kind: ComposerKind): KindOption =>
+  KIND_OPTIONS.find((option) => option.kind === kind) ?? KIND_OPTIONS[0];
+
+interface KindModePickerProps {
+  value: ComposerKind;
+  onChange: (kind: ComposerKind) => void;
+  disabled?: boolean;
+}
+
+export const KindModePicker = ({
+  value,
+  onChange,
+  disabled,
+}: KindModePickerProps): ReactElement => {
+  const [open, setOpen] = useState(false);
+  const active = findOption(value);
+
+  return (
+    <DropdownMenu open={open} onOpenChange={setOpen}>
+      <DropdownMenuTrigger asChild>
+        <button
+          type="button"
+          disabled={disabled}
+          aria-haspopup="menu"
+          aria-expanded={open}
+          aria-label={`${active.label} — change post type`}
+          className={classNames(
+            'inline-flex h-8 shrink-0 items-center gap-1.5 rounded-8 border border-accent-cabbage-default px-2 text-text-primary transition-colors',
+            'hover:border-accent-cabbage-bolder',
+            open ? 'bg-surface-float' : 'bg-transparent hover:bg-surface-float',
+            disabled && 'opacity-60 cursor-default',
+          )}
+        >
+          {cloneElement(active.icon, { size: IconSize.Size16 })}
+          <span className="whitespace-nowrap typo-caption1">
+            {active.label}
+          </span>
+          <ArrowIcon
+            size={IconSize.Size16}
+            className={classNames(
+              'shrink-0 text-accent-cabbage-default transition-transform',
+              open ? 'rotate-180' : 'rotate-0',
+            )}
+          />
+        </button>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent
+        align="start"
+        side="top"
+        variant="action"
+        className="!min-w-48"
+      >
+        {KIND_OPTIONS.map((option) => {
+          const isActive = option.kind === value;
+          return (
+            <DropdownMenuItem
+              key={option.kind}
+              onSelect={(event: Event) => {
+                event.preventDefault();
+                onChange(option.kind);
+                setOpen(false);
+              }}
+              aria-checked={isActive}
+              className="!gap-2"
+            >
+              {cloneElement(option.icon, {
+                size: IconSize.XXSmall,
+                className: 'shrink-0 text-text-primary',
+              })}
+              <span
+                className={classNames(
+                  'min-w-0 flex-1 truncate text-left text-text-primary',
+                  isActive && 'font-bold',
+                )}
+              >
+                {option.label}
+              </span>
+            </DropdownMenuItem>
+          );
+        })}
+      </DropdownMenuContent>
+    </DropdownMenu>
+  );
+};
diff --git a/packages/shared/src/components/post/composer/LinkForm.tsx b/packages/shared/src/components/post/composer/LinkForm.tsx
new file mode 100644
index 00000000000..54f604970be
--- /dev/null
+++ b/packages/shared/src/components/post/composer/LinkForm.tsx
@@ -0,0 +1,131 @@
+import type { FormEvent, ReactElement } from 'react';
+import React, { useCallback, useEffect, useRef, useState } from 'react';
+import { useDebouncedUrl } from '../../../hooks/input';
+import { WriteLinkPreview } from '../write/WriteLinkPreview';
+import { WritePreviewSkeleton } from '../write/WritePreviewSkeleton';
+import { Button, ButtonSize, ButtonVariant } from '../../buttons/Button';
+import { MiniCloseIcon } from '../../icons';
+import { Tooltip } from '../../tooltip/Tooltip';
+import type { ExternalLinkPreview } from '../../../graphql/posts';
+import { TITLE_MAX_LENGTH, type LinkFormState } from './types';
+import { isPreviewForComposerUrl, normalizeComposerUrl } from './utils';
+
+interface LinkFormProps {
+  value: LinkFormState;
+  onChange: (next: LinkFormState) => void;
+  preview?: ExternalLinkPreview;
+  isLoadingPreview?: boolean;
+  fetchPreview: (url?: string) => void;
+  onDismissPreview?: () => void;
+}
+
+export const LinkForm = ({
+  value,
+  onChange,
+  preview,
+  isLoadingPreview,
+  fetchPreview,
+  onDismissPreview,
+}: LinkFormProps): ReactElement => {
+  const urlRef = useRef<HTMLInputElement>(null);
+  const [dismissedUrl, setDismissedUrl] = useState<string | null>(null);
+
+  useEffect(() => {
+    urlRef.current?.focus();
+  }, []);
+
+  const hasPreviewForUrl = useCallback(
+    (next?: string): boolean =>
+      !!next && !isPreviewForComposerUrl(preview, next),
+    [preview],
+  );
+
+  const [checkUrl] = useDebouncedUrl(fetchPreview, hasPreviewForUrl);
+
+  const normalizedUrl = normalizeComposerUrl(value.url);
+  const isDismissedForCurrentUrl =
+    !!dismissedUrl && normalizedUrl === dismissedUrl;
+
+  const onUrlChange = (event: FormEvent<HTMLInputElement>) => {
+    const next = event.currentTarget.value;
+    onChange({ ...value, url: next });
+    const nextNormalized = normalizeComposerUrl(next);
+    if (dismissedUrl && nextNormalized !== dismissedUrl) {
+      setDismissedUrl(null);
+    }
+    checkUrl(nextNormalized);
+  };
+
+  const dismissPreview = () => {
+    setDismissedUrl(normalizedUrl || value.url || null);
+    onDismissPreview?.();
+  };
+
+  const showPreview =
+    isPreviewForComposerUrl(preview, value.url) && !isDismissedForCurrentUrl;
+  const showSkeleton = isLoadingPreview && !isDismissedForCurrentUrl;
+
+  return (
+    <div className="flex flex-1 flex-col gap-3">
+      <input
+        ref={urlRef}
+        type="text"
+        name="url"
+        inputMode="url"
+        autoComplete="url"
+        autoCapitalize="none"
+        autoCorrect="off"
+        spellCheck={false}
+        placeholder="Paste a link…"
+        value={value.url}
+        onInput={onUrlChange}
+        aria-label="Link URL"
+        className="w-full bg-transparent font-bold leading-tight text-text-primary outline-none typo-title2 placeholder:text-text-quaternary"
+      />
+      <textarea
+        name="commentary"
+        placeholder="Add a comment (optional)"
+        maxLength={TITLE_MAX_LENGTH}
+        rows={1}
+        value={value.commentary}
+        onChange={(event) =>
+          onChange({
+            ...value,
+            commentary: event.currentTarget.value.replace(/\n/g, ''),
+          })
+        }
+        aria-label="Post commentary"
+        className="w-full resize-none overflow-hidden break-words bg-transparent text-text-primary outline-none typo-callout placeholder:text-text-quaternary"
+      />
+      {(showSkeleton || (preview && showPreview)) && (
+        <div className="relative">
+          {showSkeleton && (
+            <WritePreviewSkeleton
+              link={normalizedUrl || value.url}
+              className="flex-col-reverse"
+            />
+          )}
+          {!showSkeleton && preview && showPreview && (
+            <WriteLinkPreview
+              className="!w-auto flex-col-reverse"
+              preview={preview}
+              link={normalizedUrl}
+              showPreviewLink={false}
+            />
+          )}
+          <Tooltip content="Remove link preview">
+            <Button
+              type="button"
+              size={ButtonSize.Small}
+              variant={ButtonVariant.Primary}
+              icon={<MiniCloseIcon />}
+              onClick={dismissPreview}
+              aria-label="Remove link preview"
+              className="absolute right-3 top-3 z-1 !rounded-full !bg-surface-invert !text-text-primary !shadow-3 hover:!bg-text-primary hover:!text-surface-invert"
+            />
+          </Tooltip>
+        </div>
+      )}
+    </div>
+  );
+};
diff --git a/packages/shared/src/components/post/composer/PollForm.tsx b/packages/shared/src/components/post/composer/PollForm.tsx
new file mode 100644
index 00000000000..099c26f1562
--- /dev/null
+++ b/packages/shared/src/components/post/composer/PollForm.tsx
@@ -0,0 +1,184 @@
+import type { ReactElement } from 'react';
+import React, { useCallback, useEffect, useRef, useState } from 'react';
+import { Button, ButtonSize, ButtonVariant } from '../../buttons/Button';
+import { MiniCloseIcon, PlusIcon, ArrowIcon } from '../../icons';
+import { IconSize } from '../../Icon';
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuOptions,
+  DropdownMenuTrigger,
+} from '../../dropdown/DropdownMenu';
+import { Tooltip } from '../../tooltip/Tooltip';
+import {
+  POLL_OPTIONS_MAX,
+  POLL_OPTIONS_MIN,
+  POLL_OPTION_MAX_LENGTH,
+  TITLE_MAX_LENGTH,
+  type PollFormState,
+} from './types';
+
+interface PollFormProps {
+  value: PollFormState;
+  onChange: (next: PollFormState) => void;
+}
+
+const DURATION_OPTIONS: Array<{ label: string; value: number | undefined }> = [
+  { label: '1 day', value: 1 },
+  { label: '3 days', value: 3 },
+  { label: '7 days', value: 7 },
+  { label: '14 days', value: 14 },
+  { label: '30 days', value: 30 },
+  { label: 'No end date', value: undefined },
+];
+
+const findDurationLabel = (value: number | undefined): string =>
+  DURATION_OPTIONS.find((option) => option.value === value)?.label ?? '7 days';
+
+export const PollForm = ({ value, onChange }: PollFormProps): ReactElement => {
+  const [durationOpen, setDurationOpen] = useState(false);
+  const questionRef = useRef<HTMLTextAreaElement>(null);
+
+  useEffect(() => {
+    questionRef.current?.focus();
+  }, []);
+
+  const updateOption = useCallback(
+    (index: number, next: string) => {
+      const options = [...value.options];
+      options[index] = next;
+      onChange({ ...value, options });
+    },
+    [onChange, value],
+  );
+
+  const removeOption = useCallback(
+    (index: number) => {
+      if (value.options.length <= POLL_OPTIONS_MIN) {
+        return;
+      }
+      onChange({
+        ...value,
+        options: value.options.filter((_, i) => i !== index),
+      });
+    },
+    [onChange, value],
+  );
+
+  const addOption = useCallback(() => {
+    if (value.options.length >= POLL_OPTIONS_MAX) {
+      return;
+    }
+    onChange({ ...value, options: [...value.options, ''] });
+  }, [onChange, value]);
+
+  return (
+    <div className="flex flex-col gap-4">
+      <textarea
+        ref={questionRef}
+        name="question"
+        placeholder="Ask a question…"
+        maxLength={TITLE_MAX_LENGTH}
+        rows={1}
+        value={value.question}
+        onChange={(e) =>
+          onChange({
+            ...value,
+            question: e.currentTarget.value.replace(/\n/g, ''),
+          })
+        }
+        aria-label="Poll question"
+        className="w-full resize-none overflow-hidden break-words bg-transparent font-bold leading-tight text-text-primary outline-none typo-title2 placeholder:text-text-quaternary"
+      />
+      <div className="flex flex-col gap-2">
+        {value.options.map((option, index) => {
+          const canRemove = value.options.length > POLL_OPTIONS_MIN;
+          return (
+            <div
+              // eslint-disable-next-line react/no-array-index-key
+              key={index}
+              className="flex items-center gap-2 rounded-12 border border-border-subtlest-tertiary bg-surface-float px-3 py-2 transition-colors focus-within:border-border-subtlest-primary"
+            >
+              <span className="text-text-tertiary typo-callout">
+                {index + 1}.
+              </span>
+              <input
+                type="text"
+                value={option}
+                maxLength={POLL_OPTION_MAX_LENGTH}
+                placeholder={`Option ${index + 1}`}
+                onChange={(e) => updateOption(index, e.currentTarget.value)}
+                aria-label={`Poll option ${index + 1}`}
+                className="flex-1 bg-transparent text-text-primary outline-none typo-callout placeholder:text-text-quaternary"
+              />
+              <span className="text-text-quaternary typo-caption2">
+                {POLL_OPTION_MAX_LENGTH - option.length}
+              </span>
+              {canRemove && (
+                <Tooltip content="Remove option">
+                  <Button
+                    type="button"
+                    size={ButtonSize.XSmall}
+                    variant={ButtonVariant.Tertiary}
+                    icon={<MiniCloseIcon size={IconSize.Size16} />}
+                    onClick={() => removeOption(index)}
+                    aria-label={`Remove option ${index + 1}`}
+                  />
+                </Tooltip>
+              )}
+            </div>
+          );
+        })}
+        {value.options.length < POLL_OPTIONS_MAX && (
+          <Button
+            type="button"
+            size={ButtonSize.Small}
+            variant={ButtonVariant.Subtle}
+            icon={<PlusIcon />}
+            onClick={addOption}
+            className="self-start"
+          >
+            Add option
+          </Button>
+        )}
+      </div>
+      <div className="flex items-center gap-2">
+        <span className="text-text-tertiary typo-callout">
+          Poll closes after
+        </span>
+        <DropdownMenu open={durationOpen} onOpenChange={setDurationOpen}>
+          <DropdownMenuTrigger asChild>
+            <Button
+              type="button"
+              size={ButtonSize.Small}
+              variant={ButtonVariant.Tertiary}
+              className="!justify-between !rounded-12 !border !border-border-subtlest-tertiary !px-3 !font-normal !typo-callout"
+            >
+              {findDurationLabel(value.durationDays)}
+              <ArrowIcon
+                className="ml-2 rotate-180 text-text-tertiary"
+                secondary
+                size={IconSize.Size16}
+              />
+            </Button>
+          </DropdownMenuTrigger>
+          <DropdownMenuContent
+            align="start"
+            variant="field"
+            className="min-w-44"
+          >
+            <DropdownMenuOptions
+              options={DURATION_OPTIONS.map((option) => ({
+                label: option.label,
+                action: () => {
+                  onChange({ ...value, durationDays: option.value });
+                  setDurationOpen(false);
+                },
+              }))}
+            />
+          </DropdownMenuContent>
+        </DropdownMenu>
+      </div>
+    </div>
+  );
+};
diff --git a/packages/shared/src/components/post/composer/TextForm.tsx b/packages/shared/src/components/post/composer/TextForm.tsx
new file mode 100644
index 00000000000..1eba047233b
--- /dev/null
+++ b/packages/shared/src/components/post/composer/TextForm.tsx
@@ -0,0 +1,234 @@
+import type { ReactElement, ReactNode } from 'react';
+import React, {
+  forwardRef,
+  useCallback,
+  useEffect,
+  useImperativeHandle,
+  useLayoutEffect,
+  useRef,
+} from 'react';
+import classNames from 'classnames';
+import RichTextInput, {
+  type RichTextInputRef,
+} from '../../fields/RichTextInput';
+import { Button, ButtonSize, ButtonVariant } from '../../buttons/Button';
+import { CameraIcon, MiniCloseIcon } from '../../icons';
+import { IconSize } from '../../Icon';
+import { Tooltip } from '../../tooltip/Tooltip';
+import { useFileInput } from '../../../hooks/utils/useFileInput';
+import {
+  acceptedTypesList,
+  ACCEPTED_TYPES,
+  imageSizeLimitMB,
+} from '../../../graphql/posts';
+import { TITLE_MAX_LENGTH, type TextFormState } from './types';
+
+export interface TextFormCover {
+  preview: string;
+  file: File;
+  isUploading?: boolean;
+}
+
+interface TextFormProps {
+  value: TextFormState;
+  onChange: (next: TextFormState) => void;
+  sourceId?: string;
+  cover?: TextFormCover | null;
+  onCoverChange?: (cover: TextFormCover | null) => void;
+  toolbarLeading?: ReactNode;
+  toolbarRightActions?: ReactNode;
+  onMarkdownModeChange?: (isMarkdownMode: boolean) => void;
+}
+
+export interface TextFormHandle {
+  focus: () => void;
+  toggleMarkdownMode: () => void;
+}
+
+const BODY_MAX_LENGTH = 10_000;
+
+export const TextForm = forwardRef<TextFormHandle, TextFormProps>(
+  function TextForm(
+    {
+      value,
+      onChange,
+      sourceId,
+      cover,
+      onCoverChange,
+      toolbarLeading,
+      toolbarRightActions,
+      onMarkdownModeChange,
+    },
+    ref,
+  ): ReactElement {
+    const titleRef = useRef<HTMLTextAreaElement>(null);
+    const fileInputRef = useRef<HTMLInputElement>(null);
+    const editorRef = useRef<RichTextInputRef>(null);
+
+    useImperativeHandle(ref, () => ({
+      focus: () => titleRef.current?.focus(),
+      toggleMarkdownMode: () => editorRef.current?.toggleMarkdownMode(),
+    }));
+
+    useEffect(() => {
+      titleRef.current?.focus();
+    }, []);
+
+    useLayoutEffect(() => {
+      const titleEl = titleRef.current;
+      if (!titleEl) {
+        return;
+      }
+      titleEl.style.height = 'auto';
+      titleEl.style.height = `${titleEl.scrollHeight}px`;
+    }, [value.title]);
+
+    const onTitleKeyDown = useCallback(
+      (event: React.KeyboardEvent<HTMLTextAreaElement>) => {
+        if (event.nativeEvent.isComposing) {
+          return;
+        }
+        const isCmd = event.ctrlKey || event.metaKey;
+        if (event.key === 'Enter' && isCmd) {
+          event.preventDefault();
+          event.currentTarget.form?.requestSubmit();
+          return;
+        }
+        if (event.key === 'Enter' && !event.shiftKey) {
+          event.preventDefault();
+          editorRef.current?.focus();
+        }
+      },
+      [],
+    );
+
+    const setCoverFile = useCallback(
+      (file?: File) => {
+        if (!file) {
+          onCoverChange?.(null);
+          return;
+        }
+        const reader = new FileReader();
+        reader.onload = () => {
+          onCoverChange?.({ preview: reader.result as string, file });
+        };
+        reader.readAsDataURL(file);
+      },
+      [onCoverChange],
+    );
+
+    const { onFileChange } = useFileInput({
+      acceptedTypes: acceptedTypesList,
+      limitMb: imageSizeLimitMB,
+      onChange: (_, file) => setCoverFile(file),
+    });
+
+    const onFileInputChange = useCallback(
+      (event: React.ChangeEvent<HTMLInputElement>) => {
+        onFileChange(event.target.files?.[0]);
+        if (fileInputRef.current) {
+          fileInputRef.current.value = '';
+        }
+      },
+      [onFileChange],
+    );
+
+    return (
+      <div className="flex min-h-0 flex-1 flex-col">
+        <div className="flex shrink-0 flex-col gap-3 px-5 pb-3 pt-2">
+          <textarea
+            ref={titleRef}
+            name="title"
+            placeholder="Post title…"
+            maxLength={TITLE_MAX_LENGTH}
+            rows={1}
+            value={value.title}
+            onChange={(e) =>
+              onChange({
+                ...value,
+                title: e.currentTarget.value.replace(/\n/g, ''),
+              })
+            }
+            onKeyDown={onTitleKeyDown}
+            aria-label="Post title"
+            className="w-full resize-none overflow-hidden break-words bg-transparent font-bold leading-tight text-text-primary outline-none typo-title2 placeholder:text-text-quaternary"
+          />
+          {cover ? (
+            <div className="group relative">
+              <img
+                src={cover.preview}
+                alt="Post cover"
+                className={classNames(
+                  'block aspect-[2/1] w-full rounded-16 object-cover transition-opacity',
+                  'group-hover:brightness-95',
+                  cover.isUploading && 'opacity-50',
+                )}
+              />
+              <Tooltip content="Remove cover">
+                <Button
+                  type="button"
+                  size={ButtonSize.Small}
+                  variant={ButtonVariant.Primary}
+                  icon={<MiniCloseIcon />}
+                  onClick={() => onCoverChange?.(null)}
+                  aria-label="Remove cover"
+                  className="absolute right-3 top-3 z-1 !rounded-full !bg-surface-invert !text-text-primary !shadow-3 hover:!bg-text-primary hover:!text-surface-invert"
+                />
+              </Tooltip>
+            </div>
+          ) : (
+            onCoverChange && (
+              <button
+                type="button"
+                onClick={() => fileInputRef.current?.click()}
+                className="inline-flex w-fit items-center gap-1.5 rounded-12 border border-dashed border-border-subtlest-tertiary px-3 py-1.5 text-text-tertiary transition-colors typo-callout hover:border-border-subtlest-secondary hover:bg-surface-float hover:text-text-primary"
+                aria-label="Add a cover image"
+              >
+                <CameraIcon size={IconSize.Size16} />
+                Add cover
+              </button>
+            )
+          )}
+          <input
+            ref={fileInputRef}
+            type="file"
+            accept={ACCEPTED_TYPES}
+            className="hidden"
+            onChange={onFileInputChange}
+          />
+        </div>
+        <RichTextInput
+          ref={editorRef}
+          initialContent={value.body}
+          onValueUpdate={(body) => onChange({ ...value, body })}
+          sourceId={sourceId}
+          textareaProps={{
+            name: 'content',
+            placeholder: 'Share your thoughts',
+          }}
+          enabledCommand={{
+            upload: true,
+            link: true,
+            mention: true,
+            emoji: true,
+            gif: true,
+          }}
+          maxInputLength={BODY_MAX_LENGTH}
+          allowBlockFormatting
+          minHeightClassName="min-h-[12rem]"
+          toolbarPosition="bottom"
+          toolbarLeading={toolbarLeading}
+          toolbarRightActions={toolbarRightActions}
+          hideMarkdownToggle
+          hideMarkdownHeader
+          hideFooter
+          onMarkdownModeChange={onMarkdownModeChange}
+          className={{
+            container: '!min-h-0 !flex-1 !rounded-none !bg-transparent',
+            input: '!px-5',
+          }}
+        />
+      </div>
+    );
+  },
+);
diff --git a/packages/shared/src/components/post/composer/types.ts b/packages/shared/src/components/post/composer/types.ts
new file mode 100644
index 00000000000..0cea7ad0721
--- /dev/null
+++ b/packages/shared/src/components/post/composer/types.ts
@@ -0,0 +1,30 @@
+export type ComposerKind = 'text' | 'link' | 'poll';
+
+export interface TextFormState {
+  title: string;
+  body: string;
+}
+
+export interface LinkFormState {
+  url: string;
+  commentary: string;
+}
+
+export interface PollFormState {
+  question: string;
+  options: string[];
+  durationDays: number | undefined;
+}
+
+export const DEFAULT_TEXT: TextFormState = { title: '', body: '' };
+export const DEFAULT_LINK: LinkFormState = { url: '', commentary: '' };
+export const DEFAULT_POLL: PollFormState = {
+  question: '',
+  options: ['', ''],
+  durationDays: 7,
+};
+
+export const POLL_OPTIONS_MIN = 2;
+export const POLL_OPTIONS_MAX = 4;
+export const POLL_OPTION_MAX_LENGTH = 35;
+export const TITLE_MAX_LENGTH = 250;
diff --git a/packages/shared/src/components/post/composer/useComposerAudience.ts b/packages/shared/src/components/post/composer/useComposerAudience.ts
new file mode 100644
index 00000000000..bac765bc6f1
--- /dev/null
+++ b/packages/shared/src/components/post/composer/useComposerAudience.ts
@@ -0,0 +1,81 @@
+import { useMemo, useState, useEffect } from 'react';
+import { useAuthContext } from '../../../contexts/AuthContext';
+import { generateUserSourceAsSquad } from '../write/MultipleSourceSelect';
+import type { Squad } from '../../../graphql/sources';
+import { SourcePermissions, SourceType } from '../../../graphql/sources';
+import { verifyPermission } from '../../../graphql/squads';
+
+export const MAX_AUDIENCE_SQUADS = 3;
+
+export const isUserAudience = (audience: Squad | undefined): boolean =>
+  // @ts-expect-error UserSource intentionally reused as Squad
+  audience?.type === SourceType.User;
+
+interface UseComposerAudience {
+  audiences: Squad[];
+  selectedIds: string[];
+  selected: Squad[];
+  setSelectedIds: (ids: string[]) => void;
+  userAudienceId: string | undefined;
+}
+
+export const useComposerAudience = (
+  initialSquadHandle?: string,
+): UseComposerAudience => {
+  const { user, squads } = useAuthContext();
+
+  const audiences = useMemo<Squad[]>(() => {
+    if (!user) {
+      return [];
+    }
+    const userAudience = generateUserSourceAsSquad(user);
+    const postableSquads = (squads ?? []).filter(
+      (squad) =>
+        squad?.active && verifyPermission(squad, SourcePermissions.Post),
+    );
+    return [userAudience, ...postableSquads];
+  }, [user, squads]);
+
+  const userAudienceId = useMemo(
+    () => audiences.find(isUserAudience)?.id,
+    [audiences],
+  );
+
+  const defaultId = useMemo(() => {
+    if (initialSquadHandle) {
+      const match = audiences.find(
+        (audience) => audience.handle === initialSquadHandle,
+      );
+      if (match?.id) {
+        return match.id;
+      }
+    }
+    return userAudienceId;
+  }, [audiences, initialSquadHandle, userAudienceId]);
+
+  const [selectedIds, setSelectedIds] = useState<string[]>(() =>
+    defaultId ? [defaultId] : [],
+  );
+
+  useEffect(() => {
+    if (selectedIds.length === 0 && defaultId) {
+      setSelectedIds([defaultId]);
+    }
+  }, [defaultId, selectedIds.length]);
+
+  const selected = useMemo(
+    () =>
+      audiences.filter(
+        (audience) => !!audience.id && selectedIds.includes(audience.id),
+      ),
+    [audiences, selectedIds],
+  );
+
+  return {
+    audiences,
+    selectedIds,
+    selected,
+    setSelectedIds,
+    userAudienceId,
+  };
+};
diff --git a/packages/shared/src/components/post/composer/useComposerSubmit.ts b/packages/shared/src/components/post/composer/useComposerSubmit.ts
new file mode 100644
index 00000000000..955724ba314
--- /dev/null
+++ b/packages/shared/src/components/post/composer/useComposerSubmit.ts
@@ -0,0 +1,220 @@
+import type { FormEvent } from 'react';
+import { useCallback } from 'react';
+import { usePostToSquad } from '../../../hooks';
+import { useMultipleSourcePost } from '../../../features/squads/hooks/useMultipleSourcePost';
+import { useToastNotification } from '../../../hooks/useToastNotification';
+import type {
+  CreatePostInMultipleSourcesArgs,
+  ExternalLinkPreview,
+} from '../../../graphql/posts';
+import type { Squad } from '../../../graphql/sources';
+import {
+  POLL_OPTIONS_MIN,
+  type ComposerKind,
+  type LinkFormState,
+  type PollFormState,
+  type TextFormState,
+} from './types';
+import type { TextFormCover } from './TextForm';
+import { isPreviewForComposerUrl } from './utils';
+
+const trimmedOptions = (state: PollFormState): string[] =>
+  state.options.map((option) => option.trim()).filter(Boolean);
+
+const isTextValid = (state: TextFormState): boolean =>
+  !!state.title.trim() && !!state.body.trim();
+
+const isLinkValid = (
+  state: LinkFormState,
+  preview: ExternalLinkPreview | undefined,
+): boolean =>
+  !!preview?.title &&
+  !!(preview.url || preview.permalink) &&
+  isPreviewForComposerUrl(preview, state.url);
+
+const isPollValid = (state: PollFormState): boolean =>
+  !!state.question.trim() && trimmedOptions(state).length >= POLL_OPTIONS_MIN;
+
+interface UseComposerSubmitProps {
+  kind: ComposerKind;
+  text: TextFormState;
+  link: LinkFormState;
+  poll: PollFormState;
+  cover: TextFormCover | null;
+  primary: Squad | undefined;
+  selectedIds: string[];
+  isMulti: boolean;
+  initialPreview?: ExternalLinkPreview;
+  onComplete: () => void;
+}
+
+interface UseComposerSubmit {
+  handleSubmit: (event: FormEvent<HTMLFormElement>) => Promise<void>;
+  isSubmitDisabled: boolean;
+  isInFlight: boolean;
+  preview: ExternalLinkPreview | undefined;
+  isLoadingPreview: boolean;
+  fetchPreview: (url?: string) => void;
+}
+
+export const useComposerSubmit = ({
+  kind,
+  text,
+  link,
+  poll,
+  cover,
+  primary,
+  selectedIds,
+  isMulti,
+  initialPreview,
+  onComplete,
+}: UseComposerSubmitProps): UseComposerSubmit => {
+  const { displayToast } = useToastNotification();
+  const {
+    getLinkPreview,
+    isLoadingPreview,
+    preview,
+    isPosting,
+    onSubmitPost,
+    onSubmitFreeformPost,
+    onSubmitPollPost,
+  } = usePostToSquad({
+    initialPreview,
+    onComplete,
+    displayMutationErrors: true,
+  });
+  const { onCreate: createMulti, isPending: isMultiPending } =
+    useMultipleSourcePost({
+      onSuccess: onComplete,
+      onError: (error) =>
+        displayToast(error.response?.errors?.[0]?.message ?? 'Failed to post'),
+    });
+
+  const fetchPreview = useCallback(
+    (url?: string) => {
+      if (!url) {
+        return;
+      }
+      // surfaced via usePostToSquad toast
+      getLinkPreview(url).catch(() => undefined);
+    },
+    [getLinkPreview],
+  );
+
+  const isInFlight = isPosting || isMultiPending;
+
+  const getIsSubmitDisabled = (): boolean => {
+    if (isInFlight || !primary) {
+      return true;
+    }
+    if (kind === 'text') {
+      return !isTextValid(text);
+    }
+    if (kind === 'link') {
+      return !isLinkValid(link, preview);
+    }
+    return !isPollValid(poll);
+  };
+
+  const submitText = async () => {
+    const payload = {
+      title: text.title.trim(),
+      content: text.body,
+      ...(cover?.file ? { image: cover.file } : {}),
+    };
+    if (isMulti) {
+      await createMulti({
+        sourceIds: selectedIds,
+        ...payload,
+      } as unknown as CreatePostInMultipleSourcesArgs);
+      return;
+    }
+    await onSubmitFreeformPost(payload, primary as Squad);
+  };
+
+  const submitPoll = async () => {
+    const options = trimmedOptions(poll);
+    const duration = poll.durationDays;
+    if (isMulti) {
+      await createMulti({
+        sourceIds: selectedIds,
+        title: poll.question.trim(),
+        options: options.map((value, order) => ({ text: value, order })),
+        ...(duration != null ? { duration } : {}),
+      } as unknown as CreatePostInMultipleSourcesArgs);
+      return;
+    }
+    await onSubmitPollPost(
+      {
+        title: poll.question.trim(),
+        options,
+        ...(duration != null ? { duration } : {}),
+      },
+      primary as Squad,
+    );
+  };
+
+  const submitLink = async (event: FormEvent<HTMLFormElement>) => {
+    if (!isPreviewForComposerUrl(preview, link.url)) {
+      displayToast('Invalid link');
+      return;
+    }
+    const commentary = link.commentary.trim();
+    if (!isMulti) {
+      await onSubmitPost(event, primary as Squad, commentary);
+      return;
+    }
+    const url = preview?.finalUrl ?? preview?.url;
+    if (!url || !preview?.title) {
+      return;
+    }
+    const sharedArgs = preview.id
+      ? { sharedPostId: preview.id }
+      : { externalLink: url, title: preview.title, imageUrl: preview.image };
+    await createMulti({
+      sourceIds: selectedIds,
+      commentary,
+      ...sharedArgs,
+    } as unknown as CreatePostInMultipleSourcesArgs);
+  };
+
+  const handleSubmit = useCallback(
+    async (event: FormEvent<HTMLFormElement>) => {
+      event.preventDefault();
+      if (getIsSubmitDisabled()) {
+        return;
+      }
+      if (kind === 'text') {
+        await submitText();
+        return;
+      }
+      if (kind === 'poll') {
+        await submitPoll();
+        return;
+      }
+      await submitLink(event);
+    },
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [
+      kind,
+      isMulti,
+      primary,
+      preview,
+      text,
+      link,
+      poll,
+      cover,
+      selectedIds,
+      isInFlight,
+    ],
+  );
+
+  return {
+    handleSubmit,
+    isSubmitDisabled: getIsSubmitDisabled(),
+    isInFlight,
+    preview,
+    isLoadingPreview,
+    fetchPreview,
+  };
+};
diff --git a/packages/shared/src/components/post/composer/utils.spec.ts b/packages/shared/src/components/post/composer/utils.spec.ts
new file mode 100644
index 00000000000..ba4649d231f
--- /dev/null
+++ b/packages/shared/src/components/post/composer/utils.spec.ts
@@ -0,0 +1,23 @@
+import { isPreviewForComposerUrl, normalizeComposerUrl } from './utils';
+
+describe('composer utils', () => {
+  it('normalizes URLs without a protocol', () => {
+    expect(normalizeComposerUrl('daily.dev')).toBe('https://daily.dev/');
+  });
+
+  it('rejects values that are not real URLs', () => {
+    expect(normalizeComposerUrl('aaaaa')).toBe('');
+    expect(normalizeComposerUrl('https://aaaaa')).toBe('');
+  });
+
+  it('matches previews against the current composer URL', () => {
+    const preview = {
+      title: 'daily.dev',
+      url: 'https://daily.dev',
+      finalUrl: 'https://daily.dev/posts/1',
+    };
+
+    expect(isPreviewForComposerUrl(preview, 'daily.dev')).toBe(true);
+    expect(isPreviewForComposerUrl(preview, 'https://example.com')).toBe(false);
+  });
+});
diff --git a/packages/shared/src/components/post/composer/utils.ts b/packages/shared/src/components/post/composer/utils.ts
new file mode 100644
index 00000000000..50057421539
--- /dev/null
+++ b/packages/shared/src/components/post/composer/utils.ts
@@ -0,0 +1,22 @@
+import type { ExternalLinkPreview } from '../../../graphql/posts';
+import { urlParseSchema } from '../../../lib/links';
+
+export const normalizeComposerUrl = (value: string): string => {
+  const result = urlParseSchema.safeParse(value.trim());
+  return result.success ? result.data : '';
+};
+
+export const isPreviewForComposerUrl = (
+  preview: ExternalLinkPreview | undefined,
+  value: string,
+): boolean => {
+  const normalized = normalizeComposerUrl(value);
+  if (!normalized || !preview?.title) {
+    return false;
+  }
+
+  return [preview.url, preview.finalUrl, preview.permalink]
+    .filter((url): url is string => !!url)
+    .map(normalizeComposerUrl)
+    .includes(normalized);
+};
diff --git a/packages/shared/src/components/post/write/CreatePostButton.tsx b/packages/shared/src/components/post/write/CreatePostButton.tsx
index 75ee24c78ab..91e4edbea6e 100644
--- a/packages/shared/src/components/post/write/CreatePostButton.tsx
+++ b/packages/shared/src/components/post/write/CreatePostButton.tsx
@@ -1,9 +1,12 @@
-import type { ReactElement } from 'react';
+import type { ReactElement, ReactNode } from 'react';
 import React, { useEffect, useState } from 'react';
 import { useRouter } from 'next/router';
 import { link } from '../../../lib/links';
 import { useAuthContext } from '../../../contexts/AuthContext';
 import { useActions, useSquad, useViewSize, ViewSize } from '../../../hooks';
+import { useLazyModal } from '../../../hooks/useLazyModal';
+import { useSmartComposer } from '../../../hooks/post/useSmartComposer';
+import { LazyModal } from '../../modals/common/types';
 import { verifyPermission } from '../../../graphql/squads';
 import { SourcePermissions } from '../../../graphql/sources';
 import type {
@@ -37,18 +40,22 @@ export function CreatePostButton<Tag extends AllowedTags>({
   onClick,
   showIcon,
   ...attrs
-}: CreatePostButtonProps<Tag>): ReactElement {
+}: CreatePostButtonProps<Tag>): ReactElement | null {
   const { user, squads } = useAuthContext();
   const { route, query } = useRouter();
+  const { openModal } = useLazyModal();
+  const isSmartComposerEnabled = useSmartComposer();
   const isTablet = useViewSize(ViewSize.Tablet);
   const isLaptop = useViewSize(ViewSize.Laptop);
   const isLaptopL = useViewSize(ViewSize.LaptopL);
   const handle = route === '/squads/[handle]' ? (query.handle as string) : '';
   const { squad } = useSquad({ handle });
-  const allowedToPost = verifyPermission(squad, SourcePermissions.Post);
+  const allowedToPost = squad
+    ? verifyPermission(squad, SourcePermissions.Post)
+    : false;
   const hasAccess =
     !handle ||
-    squads?.some((item) => verifyPermission(item, SourcePermissions.Post));
+    !!squads?.some((item) => verifyPermission(item, SourcePermissions.Post));
   const { isActionsFetched, checkHasCompleted, completeAction } = useActions();
   const completedPollType = checkHasCompleted(ActionType.SeenPostPollTooltip);
   const [shouldShowPollTooltip, setShouldShowPollTooltip] = useState(false);
@@ -87,15 +94,38 @@ export function CreatePostButton<Tag extends AllowedTags>({
   const href =
     link.post.create + (squad && allowedToPost ? `?sid=${squad.handle}` : '');
 
+  const openSmartComposer = (
+    event: React.MouseEvent<AllowedElements, MouseEvent>,
+  ) => {
+    event.preventDefault();
+    openModal({
+      type: LazyModal.SmartComposer,
+      props: {
+        initialSquadHandle: squad && allowedToPost ? squad.handle : undefined,
+      },
+    });
+  };
+
+  const shouldUseSmartComposer = isSmartComposerEnabled && isLaptop && !onClick;
+
   const buttonProps: {
     tag?: AllowedTags;
     onClick?: (e: React.MouseEvent<AllowedElements, MouseEvent>) => void;
-  } = onClick ? { onClick } : { tag: 'a' };
+  } = (() => {
+    if (onClick) {
+      return { onClick };
+    }
+    if (shouldUseSmartComposer) {
+      return { onClick: openSmartComposer };
+    }
+    return { tag: 'a' };
+  })();
 
-  const shouldUseLink = !onClick;
+  const shouldUseLink = !onClick && !shouldUseSmartComposer;
 
   const shouldShowAsCompact =
     compact !== false && ((isLaptop && !isLaptopL) || compact);
+  const icon = shouldShowAsCompact || showIcon ? <PlusIcon /> : undefined;
 
   const getTooltipContent = () => {
     if (!shouldShowPollTooltip) {
@@ -127,7 +157,7 @@ export function CreatePostButton<Tag extends AllowedTags>({
       variant={sidebar || footer ? ButtonVariant.Float : ButtonVariant.Primary}
       className={className}
       disabled={getIsDisabled()}
-      icon={(shouldShowAsCompact || showIcon) && <PlusIcon />}
+      icon={icon}
       size={
         isLaptop || sidebar || footer ? ButtonSize.Medium : ButtonSize.Small
       }
@@ -140,7 +170,7 @@ export function CreatePostButton<Tag extends AllowedTags>({
   return (
     <ConditionalWrapper
       condition={shouldShowAsCompact || shouldShowPollTooltip}
-      wrapper={(component: ReactElement) => (
+      wrapper={(component: ReactNode) => (
         <Tooltip
           side="right"
           content={getTooltipContent()}
@@ -152,7 +182,7 @@ export function CreatePostButton<Tag extends AllowedTags>({
     >
       <ConditionalWrapper
         condition={shouldUseLink}
-        wrapper={(component: ReactElement) => (
+        wrapper={(component: ReactNode) => (
           <Link href={href} passHref prefetch={false}>
             {component}
           </Link>
diff --git a/packages/shared/src/components/squads/SharePostBar.tsx b/packages/shared/src/components/squads/SharePostBar.tsx
index 2cad395051c..60bbbc4f2a3 100644
--- a/packages/shared/src/components/squads/SharePostBar.tsx
+++ b/packages/shared/src/components/squads/SharePostBar.tsx
@@ -14,6 +14,7 @@ import { LazyModal } from '../modals/common/types';
 import type { Squad } from '../../graphql/sources';
 import type { ExternalLinkPreview } from '../../graphql/posts';
 import { Divider } from '../utilities';
+import { useSmartComposer } from '../../hooks/post/useSmartComposer';
 
 export interface SharePostBarProps {
   className?: string;
@@ -28,20 +29,36 @@ function SharePostBar({
   disabledText = 'Only admins and moderators can post',
   squad,
 }: SharePostBarProps): ReactElement {
-  const inputRef = useRef<HTMLInputElement>();
+  const inputRef = useRef<HTMLInputElement | null>(null);
   const { user } = useAuthContext();
   const { openModal } = useLazyModal();
   const [url, setUrl] = useState<string>('');
   const isMobile = useViewSize(ViewSize.MobileL);
+  const isLaptop = useViewSize(ViewSize.Laptop);
+  const isSmartComposerEnabled = useSmartComposer();
+  const shouldUseSmartComposer = isSmartComposerEnabled && isLaptop;
   const [urlFocused, toggleUrlFocus] = useState(false);
   const onSharedSuccessfully = () => {
-    inputRef.current.value = '';
+    if (inputRef.current) {
+      inputRef.current.value = '';
+    }
     setUrl('');
   };
 
   const shouldRenderReadingHistory = !urlFocused && url.length === 0;
 
-  const onOpenCreatePost = (preview: ExternalLinkPreview, link?: string) =>
+  const onOpenCreatePost = (preview: ExternalLinkPreview, link?: string) => {
+    if (shouldUseSmartComposer) {
+      openModal({
+        type: LazyModal.SmartComposer,
+        props: {
+          initialUrl: link,
+          initialSquadHandle: squad.handle,
+          preview: { ...preview, url: link },
+        },
+      });
+      return;
+    }
     openModal({
       type: LazyModal.CreateSharedPost,
       props: {
@@ -50,6 +67,7 @@ function SharePostBar({
         onSharedSuccessfully,
       },
     });
+  };
 
   const onOpenHistory = () =>
     openModal({
@@ -94,11 +112,13 @@ function SharePostBar({
     >
       <span className="relative flex w-full flex-row items-center">
         <div className="flex flex-1 gap-4">
-          <ProfilePicture
-            user={user}
-            size={ProfileImageSize.Large}
-            nativeLazyLoading
-          />
+          {user && (
+            <ProfilePicture
+              user={user}
+              size={ProfileImageSize.Large}
+              nativeLazyLoading
+            />
+          )}
           <div className="flex flex-1">
             <input
               type="url"
diff --git a/packages/shared/src/hooks/post/useSmartComposer.ts b/packages/shared/src/hooks/post/useSmartComposer.ts
new file mode 100644
index 00000000000..acd6c28ccff
--- /dev/null
+++ b/packages/shared/src/hooks/post/useSmartComposer.ts
@@ -0,0 +1,12 @@
+import { useAuthContext } from '../../contexts/AuthContext';
+import { useConditionalFeature } from '../useConditionalFeature';
+import { featureSmartComposer } from '../../lib/featureManagement';
+
+export const useSmartComposer = (): boolean => {
+  const { user, isAuthReady } = useAuthContext();
+  const { value } = useConditionalFeature({
+    feature: featureSmartComposer,
+    shouldEvaluate: isAuthReady && !!user,
+  });
+  return !!value;
+};
diff --git a/packages/shared/src/hooks/squads/usePostToSquad.tsx b/packages/shared/src/hooks/squads/usePostToSquad.tsx
index 3d26d488f67..103dbc8ac9a 100644
--- a/packages/shared/src/hooks/squads/usePostToSquad.tsx
+++ b/packages/shared/src/hooks/squads/usePostToSquad.tsx
@@ -84,6 +84,7 @@ interface UsePostToSquadProps {
   initialPreview?: ExternalLinkPreview;
   onMutate?: (data: unknown) => void;
   onError?: (error: ApiErrorResult) => void;
+  displayMutationErrors?: boolean;
 }
 
 const getSquadIdOrThrow = (squad: Squad): string => {
@@ -103,6 +104,7 @@ export const usePostToSquad = ({
   onSourcePostModerationSuccess,
   getSharedPostSuccessToast,
   initialPreview,
+  displayMutationErrors = false,
 }: UsePostToSquadProps = {}): UsePostToSquad => {
   const { toggleGroup, getGroupStatus } = useNotificationSettings();
   const { displayToast } = useToastNotification();
@@ -116,14 +118,19 @@ export const usePostToSquad = ({
   const requestMethod = requestMethodContext ?? gqlClient.request;
 
   const handleMutationError = useCallback(
-    (err: unknown): void => {
+    (err: unknown, options: { displayError?: boolean } = {}): void => {
       if (!isApiErrorResult(err)) {
         return;
       }
 
+      const { displayError = true } = options;
+      if (displayMutationErrors && displayError) {
+        displayToast(err.response?.errors?.[0]?.message ?? DEFAULT_ERROR);
+      }
+
       onError?.(err);
     },
-    [onError],
+    [displayMutationErrors, displayToast, onError],
   );
 
   const handlePostSuccess = useCallback(
@@ -143,7 +150,7 @@ export const usePostToSquad = ({
   } = useMutation({
     mutationFn: createPost,
     onMutate,
-    onError: handleMutationError,
+    onError: (err) => handleMutationError(err),
     onSuccess: handlePostSuccess,
   });
   const {
@@ -154,7 +161,7 @@ export const usePostToSquad = ({
     mutationFn: editPost,
     onMutate,
     onSuccess: handlePostSuccess,
-    onError: handleMutationError,
+    onError: (err) => handleMutationError(err),
   });
 
   const {
@@ -180,7 +187,7 @@ export const usePostToSquad = ({
       }
       handlePostSuccess(data);
     },
-    onError: handleMutationError,
+    onError: (err) => handleMutationError(err),
   });
 
   const { mutateAsync: getLinkPreview, isPending: isLoadingPreview } =
@@ -196,7 +203,7 @@ export const usePostToSquad = ({
         const rateLimited = getApiError(err, ApiError.RateLimited);
         const message = rateLimited?.message ?? DEFAULT_ERROR;
         displayToast(message);
-        handleMutationError(err);
+        handleMutationError(err, { displayError: false });
       },
     });
 
@@ -270,7 +277,7 @@ export const usePostToSquad = ({
       onSharedPostSuccessfully();
       handlePostSuccess(data);
     },
-    onError: handleMutationError,
+    onError: (err) => handleMutationError(err),
   });
 
   const {
@@ -283,7 +290,7 @@ export const usePostToSquad = ({
       onSharedPostSuccessfully(true);
       handlePostSuccess(data);
     },
-    onError: handleMutationError,
+    onError: (err) => handleMutationError(err),
   });
 
   const {
@@ -305,7 +312,7 @@ export const usePostToSquad = ({
       const rateLimited = getApiError(err, ApiError.RateLimited);
       const message = rateLimited?.message ?? DEFAULT_ERROR;
       displayToast(message);
-      handleMutationError(err);
+      handleMutationError(err, { displayError: false });
     },
   });
 
diff --git a/packages/shared/src/lib/featureManagement.ts b/packages/shared/src/lib/featureManagement.ts
index 9690a4cdf18..9486a72ffb3 100644
--- a/packages/shared/src/lib/featureManagement.ts
+++ b/packages/shared/src/lib/featureManagement.ts
@@ -63,6 +63,8 @@ export const featureInlineLogin = new Feature('inline_login', false);
 
 export const featureLuckyButton = new Feature('lucky_button', false);
 
+export const featureSmartComposer = new Feature('smart_composer', false);
+
 export const featureAutorotateAds = new Feature('autorotate_ads', 0);
 
 export const featureFeedAdTemplate = new Feature('feed_ad_template', {
diff --git a/packages/shared/src/lib/log.ts b/packages/shared/src/lib/log.ts
index 28449752b04..5814714ee6d 100644
--- a/packages/shared/src/lib/log.ts
+++ b/packages/shared/src/lib/log.ts
@@ -101,6 +101,15 @@ export enum Origin {
 }
 
 export enum LogEvent {
+  OpenSmartComposer = 'open smart composer',
+  CloseSmartComposer = 'close smart composer',
+  SubmitSmartComposer = 'submit smart composer',
+  SwitchComposerKind = 'switch composer kind',
+  ToggleComposerMarkdown = 'toggle composer markdown',
+  ToggleComposerExpand = 'toggle composer expand',
+  AddComposerCover = 'add composer cover',
+  RemoveComposerCover = 'remove composer cover',
+  DismissComposerPreview = 'dismiss composer preview',
   HidePost = 'hide post',
   HidePostFeedbackSubmit = 'hide post feedback submit',
   HidePostReport = 'hide post report',