diff --git a/.changeset/file_description_editing.md b/.changeset/file_description_editing.md
new file mode 100644
index 000000000..aa47ec3ca
--- /dev/null
+++ b/.changeset/file_description_editing.md
@@ -0,0 +1,5 @@
+---
+default: minor
+---
+
+Added the ability to edit the description of a file and streamlined the image and video ui
diff --git a/src/app/components/RenderMessageContent.tsx b/src/app/components/RenderMessageContent.tsx
index 1a1a5376f..f235b7586 100644
--- a/src/app/components/RenderMessageContent.tsx
+++ b/src/app/components/RenderMessageContent.tsx
@@ -47,6 +47,7 @@ type RenderMessageContentProps = {
   htmlReactParserOptions: HTMLReactParserOptions;
   linkifyOpts: Opts;
   outlineAttachment?: boolean;
+  hideCaption?: boolean;
 };
 
 const getMediaType = (url: string) => {
@@ -71,6 +72,7 @@ function RenderMessageContentInternal({
   htmlReactParserOptions,
   linkifyOpts,
   outlineAttachment,
+  hideCaption,
 }: RenderMessageContentProps) {
   const content = useMemo(() => getContent<any>(), [getContent]);
 
@@ -121,7 +123,7 @@ function RenderMessageContentInternal({
 
   const renderCaption = () => {
     const hasCaption = content.body && content.body.trim().length > 0;
-    if (captionPosition === CaptionPosition.Hidden) return null;
+    if (captionPosition === CaptionPosition.Hidden || hideCaption) return null;
     if (hasCaption && content.filename && content.filename !== content.body) {
       if (captionPosition !== CaptionPosition.Inline)
         return (
diff --git a/src/app/components/message/content/ImageContent.tsx b/src/app/components/message/content/ImageContent.tsx
index 017569662..c1856eb53 100644
--- a/src/app/components/message/content/ImageContent.tsx
+++ b/src/app/components/message/content/ImageContent.tsx
@@ -6,6 +6,8 @@ import {
   Chip,
   Icon,
   Icons,
+  Menu,
+  MenuItem,
   Modal,
   Overlay,
   OverlayBackdrop,
@@ -15,6 +17,7 @@ import {
   Tooltip,
   TooltipProvider,
   as,
+  config,
 } from 'folds';
 import classNames from 'classnames';
 import { BlurhashCanvas } from 'react-blurhash';
@@ -84,6 +87,7 @@ export const ImageContent = as<'div', ImageContentProps>(
     const [error, setError] = useState(false);
     const [viewer, setViewer] = useState(false);
     const [blurred, setBlurred] = useState(markedAsSpoiler ?? false);
+    const [isHovered, setIsHovered] = useState(false);
 
     const [srcState, loadSrc] = useAsyncCallback(
       useCallback(async () => {
@@ -119,7 +123,13 @@ export const ImageContent = as<'div', ImageContentProps>(
     }, [autoPlay, loadSrc]);
 
     return (
-      <Box className={classNames(css.RelativeBase, className)} {...props} ref={ref}>
+      <Box
+        className={classNames(css.RelativeBase, className)}
+        {...props}
+        ref={ref}
+        onPointerEnter={() => setIsHovered(true)}
+        onPointerLeave={() => setIsHovered(false)}
+      >
         {srcState.status === AsyncStatus.Success && (
           <Overlay open={viewer} backdrop={<OverlayBackdrop />}>
             <OverlayCenter>
@@ -156,7 +166,12 @@ export const ImageContent = as<'div', ImageContentProps>(
           />
         )}
         {!autoPlay && !markedAsSpoiler && srcState.status === AsyncStatus.Idle && (
-          <Box className={css.AbsoluteContainer} alignItems="Center" justifyContent="Center">
+          <Box
+            className={css.AbsoluteContainer}
+            alignItems="Center"
+            justifyContent="Center"
+            onClick={loadSrc}
+          >
             <Button
               variant="Secondary"
               fill="Solid"
@@ -183,36 +198,48 @@ export const ImageContent = as<'div', ImageContentProps>(
           </Box>
         )}
         {blurred && !error && srcState.status !== AsyncStatus.Error && (
-          <Box className={css.AbsoluteContainer} alignItems="Center" justifyContent="Center">
-            <TooltipProvider
-              tooltip={
-                typeof spoilerReason === 'string' && (
-                  <Tooltip variant="Secondary">
-                    <Text>{spoilerReason}</Text>
-                  </Tooltip>
-                )
+          <Box
+            className={css.AbsoluteContainer}
+            alignItems="Center"
+            justifyContent="Center"
+            onClick={() => {
+              setBlurred(false);
+              if (srcState.status === AsyncStatus.Idle) {
+                loadSrc();
               }
-              position="Top"
-              align="Center"
-            >
-              {(triggerRef) => (
-                <Chip
-                  ref={triggerRef}
-                  variant="Secondary"
-                  radii="Pill"
-                  size="500"
-                  outlined
-                  onClick={() => {
-                    setBlurred(false);
-                    if (srcState.status === AsyncStatus.Idle) {
-                      loadSrc();
-                    }
-                  }}
-                >
-                  <Text size="B300">Spoiler</Text>
-                </Chip>
-              )}
-            </TooltipProvider>
+            }}
+          >
+            {typeof spoilerReason === 'string' && spoilerReason.length > 0 ? (
+              <Chip
+                variant="Secondary"
+                radii="Pill"
+                size="500"
+                outlined
+                onClick={() => {
+                  setBlurred(false);
+                  if (srcState.status === AsyncStatus.Idle) {
+                    loadSrc();
+                  }
+                }}
+              >
+                <Text size="B300">Spoiler reason: {spoilerReason}</Text>
+              </Chip>
+            ) : (
+              <Chip
+                variant="Secondary"
+                radii="Pill"
+                size="500"
+                outlined
+                onClick={() => {
+                  setBlurred(false);
+                  if (srcState.status === AsyncStatus.Idle) {
+                    loadSrc();
+                  }
+                }}
+              >
+                <Text size="B300">Spoilered</Text>
+              </Chip>
+            )}
           </Box>
         )}
         {(srcState.status === AsyncStatus.Loading || srcState.status === AsyncStatus.Success) &&
@@ -223,7 +250,12 @@ export const ImageContent = as<'div', ImageContentProps>(
             </Box>
           )}
         {(error || srcState.status === AsyncStatus.Error) && (
-          <Box className={css.AbsoluteContainer} alignItems="Center" justifyContent="Center">
+          <Box
+            className={css.AbsoluteContainer}
+            alignItems="Center"
+            justifyContent="Center"
+            onClick={handleRetry}
+          >
             <TooltipProvider
               tooltip={
                 <Tooltip variant="Critical">
@@ -250,6 +282,26 @@ export const ImageContent = as<'div', ImageContentProps>(
             </TooltipProvider>
           </Box>
         )}
+        {isHovered && (
+          <Box style={{ padding: config.space.S200, right: 0, position: 'absolute' }}>
+            <Menu style={{ padding: config.space.S0 }}>
+              <MenuItem
+                size="300"
+                after={<Icon size="200" src={blurred ? Icons.Eye : Icons.EyeBlind} />}
+                radii="300"
+                fill="Soft"
+                variant="Secondary"
+                onClick={(e) => {
+                  e.preventDefault();
+                  if (srcState.status === AsyncStatus.Idle) {
+                    loadSrc();
+                    setBlurred(false);
+                  } else setBlurred(!blurred);
+                }}
+              />
+            </Menu>
+          </Box>
+        )}
         {!load && typeof info?.size === 'number' && (
           <Box className={css.AbsoluteFooter} justifyContent="End" alignContent="Center" gap="200">
             <Badge variant="Secondary" fill="Soft">
diff --git a/src/app/components/message/content/VideoContent.tsx b/src/app/components/message/content/VideoContent.tsx
index bb267d70d..cb11ce594 100644
--- a/src/app/components/message/content/VideoContent.tsx
+++ b/src/app/components/message/content/VideoContent.tsx
@@ -6,11 +6,14 @@ import {
   Chip,
   Icon,
   Icons,
+  Menu,
+  MenuItem,
   Spinner,
   Text,
   Tooltip,
   TooltipProvider,
   as,
+  config,
 } from 'folds';
 import classNames from 'classnames';
 import { BlurhashCanvas } from 'react-blurhash';
@@ -73,6 +76,7 @@ export const VideoContent = as<'div', VideoContentProps>(
     const [load, setLoad] = useState(false);
     const [error, setError] = useState(false);
     const [blurred, setBlurred] = useState(markedAsSpoiler ?? false);
+    const [isHovered, setIsHovered] = useState(false);
 
     const [srcState, loadSrc] = useAsyncCallback(
       useCallback(async () => {
@@ -107,7 +111,13 @@ export const VideoContent = as<'div', VideoContentProps>(
     }, [autoPlay, loadSrc]);
 
     return (
-      <Box className={classNames(css.RelativeBase, className)} {...props} ref={ref}>
+      <Box
+        className={classNames(css.RelativeBase, className)}
+        {...props}
+        ref={ref}
+        onPointerEnter={() => setIsHovered(true)}
+        onPointerLeave={() => setIsHovered(false)}
+      >
         {typeof blurHash === 'string' && !load && (
           <BlurhashCanvas
             style={{ width: '100%', height: '100%' }}
@@ -127,7 +137,12 @@ export const VideoContent = as<'div', VideoContentProps>(
           </Box>
         )}
         {!autoPlay && !blurred && srcState.status === AsyncStatus.Idle && (
-          <Box className={css.AbsoluteContainer} alignItems="Center" justifyContent="Center">
+          <Box
+            className={css.AbsoluteContainer}
+            alignItems="Center"
+            justifyContent="Center"
+            onClick={loadSrc}
+          >
             <Button
               variant="Secondary"
               fill="Solid"
@@ -147,39 +162,54 @@ export const VideoContent = as<'div', VideoContentProps>(
               src: srcState.data,
               onLoadedMetadata: handleLoad,
               onError: handleError,
-              autoPlay: true,
+              autoPlay: false,
               controls: true,
             })}
           </Box>
         )}
         {blurred && !error && srcState.status !== AsyncStatus.Error && (
-          <Box className={css.AbsoluteContainer} alignItems="Center" justifyContent="Center">
-            <TooltipProvider
-              tooltip={
-                typeof spoilerReason === 'string' && (
-                  <Tooltip variant="Secondary">
-                    <Text>{spoilerReason}</Text>
-                  </Tooltip>
-                )
+          <Box
+            className={css.AbsoluteContainer}
+            alignItems="Center"
+            justifyContent="Center"
+            onClick={() => {
+              setBlurred(false);
+              if (srcState.status === AsyncStatus.Idle) {
+                loadSrc();
               }
-              position="Top"
-              align="Center"
-            >
-              {(triggerRef) => (
-                <Chip
-                  ref={triggerRef}
-                  variant="Secondary"
-                  radii="Pill"
-                  size="500"
-                  outlined
-                  onClick={() => {
-                    setBlurred(false);
-                  }}
-                >
-                  <Text size="B300">Spoiler</Text>
-                </Chip>
-              )}
-            </TooltipProvider>
+            }}
+          >
+            {typeof spoilerReason === 'string' && spoilerReason.length > 0 ? (
+              <Chip
+                variant="Secondary"
+                radii="Pill"
+                size="500"
+                outlined
+                onClick={() => {
+                  setBlurred(false);
+                  if (srcState.status === AsyncStatus.Idle) {
+                    loadSrc();
+                  }
+                }}
+              >
+                <Text size="B300">Spoiler reason: {spoilerReason}</Text>
+              </Chip>
+            ) : (
+              <Chip
+                variant="Secondary"
+                radii="Pill"
+                size="500"
+                outlined
+                onClick={() => {
+                  setBlurred(false);
+                  if (srcState.status === AsyncStatus.Idle) {
+                    loadSrc();
+                  }
+                }}
+              >
+                <Text size="B300">Spoilered</Text>
+              </Chip>
+            )}
           </Box>
         )}
         {(srcState.status === AsyncStatus.Loading || srcState.status === AsyncStatus.Success) &&
@@ -190,7 +220,12 @@ export const VideoContent = as<'div', VideoContentProps>(
             </Box>
           )}
         {(error || srcState.status === AsyncStatus.Error) && (
-          <Box className={css.AbsoluteContainer} alignItems="Center" justifyContent="Center">
+          <Box
+            className={css.AbsoluteContainer}
+            alignItems="Center"
+            justifyContent="Center"
+            onClick={handleRetry}
+          >
             <TooltipProvider
               tooltip={
                 <Tooltip variant="Critical">
@@ -217,6 +252,26 @@ export const VideoContent = as<'div', VideoContentProps>(
             </TooltipProvider>
           </Box>
         )}
+        {isHovered && (
+          <Box style={{ padding: config.space.S200, right: 0, position: 'absolute' }}>
+            <Menu style={{ padding: config.space.S0 }}>
+              <MenuItem
+                size="300"
+                after={<Icon size="200" src={blurred ? Icons.Eye : Icons.EyeBlind} />}
+                radii="300"
+                fill="Soft"
+                variant="Secondary"
+                onClick={(e) => {
+                  e.preventDefault();
+                  if (srcState.status === AsyncStatus.Idle) {
+                    loadSrc();
+                    setBlurred(false);
+                  } else setBlurred(!blurred);
+                }}
+              />
+            </Menu>
+          </Box>
+        )}
         {!load && typeof info.size === 'number' && (
           <Box
             className={css.AbsoluteFooter}
diff --git a/src/app/features/room/message/MessageEditor.tsx b/src/app/features/room/message/MessageEditor.tsx
index e00392dcb..cb516c1db 100644
--- a/src/app/features/room/message/MessageEditor.tsx
+++ b/src/app/features/room/message/MessageEditor.tsx
@@ -1,4 +1,11 @@
-import { KeyboardEventHandler, MouseEventHandler, useCallback, useEffect, useState } from 'react';
+import {
+  KeyboardEventHandler,
+  MouseEventHandler,
+  useCallback,
+  useEffect,
+  useMemo,
+  useState,
+} from 'react';
 import {
   Box,
   Chip,
@@ -22,8 +29,8 @@ import {
   ReplacementEvent,
   RelationType,
   Room,
-  RoomMessageEventContent,
   RoomMessageTextEventContent,
+  MsgType,
 } from '$types/matrix-sdk';
 import { isKeyHotkey } from 'is-hotkey';
 import {
@@ -49,7 +56,7 @@ import {
   ANYWHERE_AUTOCOMPLETE_PREFIXES,
 } from '$components/editor';
 import { useSetting } from '$state/hooks/settings';
-import { settingsAtom } from '$state/settings';
+import { CaptionPosition, settingsAtom } from '$state/settings';
 import { UseStateProvider } from '$components/UseStateProvider';
 import { EmojiBoard } from '$components/emoji-board';
 import { AsyncStatus, useAsyncCallback } from '$hooks/useAsyncCallback';
@@ -58,6 +65,13 @@ import { getEditedEvent, getMentionContent, trimReplyFromFormattedBody } from '$
 import { mobileOrTablet } from '$utils/user-agent';
 import { useComposingCheck } from '$hooks/useComposingCheck';
 import { floatingEditor } from '$styles/overrides/Composer.css';
+import { RenderMessageContent } from '$components/RenderMessageContent';
+import { getReactCustomHtmlParser, LINKIFY_OPTS } from '$plugins/react-custom-html-parser';
+import { useSpoilerClickHandler } from '$hooks/useSpoilerClickHandler';
+import { HTMLReactParserOptions } from 'html-react-parser';
+import { useMediaAuthentication } from '$hooks/useMediaAuthentication';
+import { Opts as LinkifyOpts } from 'linkifyjs';
+import { GetContentCallback } from '$types/matrix/room';
 
 type MessageEditorProps = {
   roomId: string;
@@ -104,6 +118,7 @@ export const MessageEditor = as<'div', MessageEditorProps>(
 
     const [saveState, save] = useAsyncCallback(
       useCallback(async () => {
+        const oldContent = mEvent.getContent();
         const plainText = toPlainText(editor.children, isMarkdown).trim();
         const customHtml = trimCustomHtml(
           toMatrixCustomHTML(editor.children, {
@@ -134,13 +149,12 @@ export const MessageEditor = as<'div', MessageEditorProps>(
 
         const msgtype = mEvent.getContent().msgtype as RoomMessageTextEventContent['msgtype'];
 
-        const newContent: RoomMessageTextEventContent = {
+        const newContent: IContent = {
           msgtype,
           body: plainText,
         };
 
-        const contentBody: RoomMessageTextEventContent &
-          Omit<ReplacementEvent<RoomMessageEventContent>, 'm.relates_to'> = {
+        const contentBody: IContent & Omit<ReplacementEvent<IContent>, 'm.relates_to'> = {
           msgtype,
           body: `* ${plainText}`,
           'm.new_content': newContent,
@@ -163,15 +177,35 @@ export const MessageEditor = as<'div', MessageEditorProps>(
           contentBody.formatted_body = `* ${customHtml}`;
         }
 
-        const content: RoomMessageEventContent = {
-          ...contentBody,
+        const content: IContent = {
+          ...oldContent,
           'm.relates_to': {
             event_id: eventId,
             rel_type: RelationType.Replace,
           },
         };
+        content.body = contentBody.body;
+        content.format = contentBody.format;
+        content.formatted_body = contentBody.formatted_body;
+        content['m.new_content'] = newContent;
+        if (oldContent.info !== undefined && oldContent.filename?.length > 0) {
+          content.filename = oldContent.filename;
+          content['m.new_content'].filename = oldContent.filename;
+          content.info = oldContent.info;
+          content['m.new_content'].info = oldContent.info;
+
+          if (oldContent.file !== undefined) content['m.new_content'].file = oldContent.file;
+          if (oldContent.url !== undefined) content['m.new_content'].url = oldContent.url;
+
+          if (oldContent['page.codeberg.everypizza.msc4193.spoiler'] !== undefined) {
+            content['page.codeberg.everypizza.msc4193.spoiler'] =
+              oldContent['page.codeberg.everypizza.msc4193.spoiler'];
+            content['m.new_content']['page.codeberg.everypizza.msc4193.spoiler'] =
+              oldContent['page.codeberg.everypizza.msc4193.spoiler'];
+          }
+        }
 
-        return mx.sendMessage(roomId, content);
+        return mx.sendMessage(roomId, content as any);
       }, [mx, editor, roomId, mEvent, isMarkdown, getPrevBodyAndFormattedBody])
     );
 
@@ -247,6 +281,27 @@ export const MessageEditor = as<'div', MessageEditorProps>(
       }
     }, [saveState, onCancel]);
 
+    const useAuthentication = useMediaAuthentication();
+    const linkifyOpts = useMemo<LinkifyOpts>(() => ({ ...LINKIFY_OPTS }), []);
+    const spoilerClickHandler = useSpoilerClickHandler();
+    const htmlReactParserOptions = useMemo<HTMLReactParserOptions>(
+      () =>
+        getReactCustomHtmlParser(mx, mEvent.getRoomId(), {
+          linkifyOpts,
+          useAuthentication,
+          handleSpoilerClick: spoilerClickHandler,
+        }),
+      [linkifyOpts, mEvent, mx, spoilerClickHandler, useAuthentication]
+    );
+    const getContent = (() => mEvent.getContent()) as GetContentCallback;
+    const msgType = mEvent.getContent().msgtype;
+    const [captionPosition] = useSetting(settingsAtom, 'captionPosition');
+    const captionPositionMap = {
+      [CaptionPosition.Above]: 'column-reverse',
+      [CaptionPosition.Below]: 'column',
+      [CaptionPosition.Inline]: 'row',
+      [CaptionPosition.Hidden]: 'row',
+    } satisfies Record<CaptionPosition, React.CSSProperties['flexDirection']>;
     return (
       <div {...props} ref={ref} className={`${props.className || ''} ${floatingEditor}`.trim()}>
         {autocompleteQuery?.prefix === AutocompletePrefix.RoomMention && (
@@ -273,100 +328,138 @@ export const MessageEditor = as<'div', MessageEditorProps>(
             requestClose={handleCloseAutocomplete}
           />
         )}
-        <CustomEditor
-          editor={editor}
-          placeholder="Edit message..."
-          onKeyDown={handleKeyDown}
-          onKeyUp={handleKeyUp}
-          bottom={
-            <>
-              <Box
-                style={{ padding: config.space.S200, paddingTop: 0 }}
-                alignItems="End"
-                justifyContent="SpaceBetween"
-                gap="100"
-              >
-                <Box gap="Inherit">
-                  <Chip
-                    onClick={handleSave}
-                    variant="Primary"
-                    radii="Pill"
-                    disabled={saveState.status === AsyncStatus.Loading}
-                    outlined
-                    before={
-                      saveState.status === AsyncStatus.Loading ? (
-                        <Spinner variant="Primary" fill="Soft" size="100" />
-                      ) : undefined
-                    }
-                  >
-                    <Text size="B300">Save</Text>
-                  </Chip>
-                  <Chip onClick={onCancel} variant="SurfaceVariant" radii="Pill">
-                    <Text size="B300">Cancel</Text>
-                  </Chip>
-                </Box>
-                <Box gap="Inherit">
-                  <IconButton
-                    variant="SurfaceVariant"
-                    size="300"
-                    radii="300"
-                    onClick={() => setToolbar(!toolbar)}
+        <Box
+          style={{
+            display: 'flex',
+            flexDirection: captionPositionMap[captionPosition],
+          }}
+        >
+          {(msgType === MsgType.Image ||
+            msgType === MsgType.Video ||
+            msgType === MsgType.Audio ||
+            msgType === MsgType.File) && (
+            <RenderMessageContent
+              displayName={mEvent.sender?.name ?? ''}
+              msgType={mEvent.getContent().msgtype ?? ''}
+              ts={mEvent.getTs()}
+              getContent={getContent}
+              htmlReactParserOptions={htmlReactParserOptions}
+              hideCaption
+              linkifyOpts={linkifyOpts}
+            />
+          )}
+          <Box
+            style={
+              captionPosition !== CaptionPosition.Inline
+                ? { marginTop: config.space.S400, width: '100%' }
+                : {
+                    padding: config.space.S200,
+                    wordBreak: 'break-word',
+                    maxWidth: '100%',
+                    width: '100%',
+                    display: 'flex',
+                    flexDirection: 'column',
+                    justifyContent: 'center',
+                    flexShrink: 1,
+                  }
+            }
+          >
+            <CustomEditor
+              editor={editor}
+              placeholder="Edit message..."
+              onKeyDown={handleKeyDown}
+              onKeyUp={handleKeyUp}
+              bottom={
+                <>
+                  <Box
+                    style={{ padding: config.space.S200, paddingTop: 0 }}
+                    alignItems="End"
+                    justifyContent="SpaceBetween"
+                    gap="100"
                   >
-                    <Icon size="400" src={toolbar ? Icons.AlphabetUnderline : Icons.Alphabet} />
-                  </IconButton>
-                  <UseStateProvider initial={undefined}>
-                    {(anchor: RectCords | undefined, setAnchor) => (
-                      <PopOut
-                        anchor={anchor}
-                        alignOffset={-8}
-                        position="Top"
-                        align="End"
-                        content={
-                          <EmojiBoard
-                            imagePackRooms={imagePackRooms ?? []}
-                            returnFocusOnDeactivate={false}
-                            onEmojiSelect={handleEmoticonSelect}
-                            onCustomEmojiSelect={handleEmoticonSelect}
-                            requestClose={() => {
-                              setAnchor((v) => {
-                                if (v) {
-                                  if (!mobileOrTablet()) ReactEditor.focus(editor);
-                                  return undefined;
-                                }
-                                return v;
-                              });
-                            }}
-                          />
+                    <Box gap="Inherit">
+                      <Chip
+                        onClick={handleSave}
+                        variant="Primary"
+                        radii="Pill"
+                        disabled={saveState.status === AsyncStatus.Loading}
+                        outlined
+                        before={
+                          saveState.status === AsyncStatus.Loading ? (
+                            <Spinner variant="Primary" fill="Soft" size="100" />
+                          ) : undefined
                         }
                       >
-                        <IconButton
-                          aria-pressed={anchor !== undefined}
-                          onClick={
-                            ((evt) =>
-                              setAnchor(
-                                evt.currentTarget.getBoundingClientRect()
-                              )) as MouseEventHandler<HTMLButtonElement>
-                          }
-                          variant="SurfaceVariant"
-                          size="300"
-                          radii="300"
-                        >
-                          <Icon size="400" src={Icons.Smile} filled={anchor !== undefined} />
-                        </IconButton>
-                      </PopOut>
-                    )}
-                  </UseStateProvider>
-                </Box>
-              </Box>
-              {toolbar && (
-                <div>
-                  <Line variant="SurfaceVariant" size="300" />
-                  <Toolbar />
-                </div>
-              )}
-            </>
-          }
-        />
+                        <Text size="B300">Save</Text>
+                      </Chip>
+                      <Chip onClick={onCancel} variant="SurfaceVariant" radii="Pill">
+                        <Text size="B300">Cancel</Text>
+                      </Chip>
+                    </Box>
+                    <Box gap="Inherit">
+                      <IconButton
+                        variant="SurfaceVariant"
+                        size="300"
+                        radii="300"
+                        onClick={() => setToolbar(!toolbar)}
+                      >
+                        <Icon size="400" src={toolbar ? Icons.AlphabetUnderline : Icons.Alphabet} />
+                      </IconButton>
+                      <UseStateProvider initial={undefined}>
+                        {(anchor: RectCords | undefined, setAnchor) => (
+                          <PopOut
+                            anchor={anchor}
+                            alignOffset={-8}
+                            position="Top"
+                            align="End"
+                            content={
+                              <EmojiBoard
+                                imagePackRooms={imagePackRooms ?? []}
+                                returnFocusOnDeactivate={false}
+                                onEmojiSelect={handleEmoticonSelect}
+                                onCustomEmojiSelect={handleEmoticonSelect}
+                                requestClose={() => {
+                                  setAnchor((v) => {
+                                    if (v) {
+                                      if (!mobileOrTablet()) ReactEditor.focus(editor);
+                                      return undefined;
+                                    }
+                                    return v;
+                                  });
+                                }}
+                              />
+                            }
+                          >
+                            <IconButton
+                              aria-pressed={anchor !== undefined}
+                              onClick={
+                                ((evt) =>
+                                  setAnchor(
+                                    evt.currentTarget.getBoundingClientRect()
+                                  )) as MouseEventHandler<HTMLButtonElement>
+                              }
+                              variant="SurfaceVariant"
+                              size="300"
+                              radii="300"
+                            >
+                              <Icon size="400" src={Icons.Smile} filled={anchor !== undefined} />
+                            </IconButton>
+                          </PopOut>
+                        )}
+                      </UseStateProvider>
+                    </Box>
+                  </Box>
+                  {toolbar && (
+                    <div>
+                      <Line variant="SurfaceVariant" size="300" />
+                      <Toolbar />
+                    </div>
+                  )}
+                </>
+              }
+            />
+          </Box>
+        </Box>
       </div>
     );
   }
diff --git a/src/app/styles/overrides/Composer.css.ts b/src/app/styles/overrides/Composer.css.ts
index 35e76d327..0b66b8f4c 100644
--- a/src/app/styles/overrides/Composer.css.ts
+++ b/src/app/styles/overrides/Composer.css.ts
@@ -1,7 +1,7 @@
 import { style, globalStyle } from '@vanilla-extract/css';
 
 export const floatingEditor = style({
-  minWidth: '100%',
+  minWidth: '1%',
 });
 
 export const floatingToolbar = style({
diff --git a/src/app/utils/room.ts b/src/app/utils/room.ts
index 21fa6e290..5003d53d5 100644
--- a/src/app/utils/room.ts
+++ b/src/app/utils/room.ts
@@ -11,22 +11,22 @@ import {
   JoinRule,
   MatrixClient,
   MatrixEvent,
-  MsgType,
   NotificationCountType,
   PushProcessor,
   RelationType,
   Room,
   RoomMember,
   CryptoBackend,
+  MsgType,
 } from '$types/matrix-sdk';
 import { AccountDataEvent } from '$types/matrix/accountData';
 import {
   IRoomCreateContent,
   Membership,
-  MessageEvent,
   NotificationType,
   RoomToParents,
   RoomType,
+  MessageEvent,
   StateEvent,
   UnreadInfo,
 } from '$types/matrix/room';
@@ -602,11 +602,15 @@ export const canEditEvent = (mx: MatrixClient, mEvent: MatrixEvent) => {
   const relationType = content['m.relates_to']?.rel_type;
   return (
     mEvent.getSender() === mx.getUserId() &&
-    (!relationType || relationType === RelationType.Thread) &&
     mEvent.getType() === MessageEvent.RoomMessage &&
+    (!relationType || relationType === RelationType.Thread) &&
     (content.msgtype === MsgType.Text ||
       content.msgtype === MsgType.Emote ||
-      content.msgtype === MsgType.Notice)
+      content.msgtype === MsgType.Notice ||
+      content.msgtype === MsgType.Image ||
+      content.msgtype === MsgType.Video ||
+      content.msgtype === MsgType.Audio ||
+      content.msgtype === MsgType.File)
   );
 };