diff --git a/.changeset/feat_add_gallery_support.md b/.changeset/feat_add_gallery_support.md
new file mode 100644
index 0000000000..49d3520911
--- /dev/null
+++ b/.changeset/feat_add_gallery_support.md
@@ -0,0 +1,5 @@
+---
+default: minor
+---
+
+# Added a gallery support as per msc4274
diff --git a/src/app/components/RenderMessageContent.tsx b/src/app/components/RenderMessageContent.tsx
index e4e6c64301..ab93f25241 100644
--- a/src/app/components/RenderMessageContent.tsx
+++ b/src/app/components/RenderMessageContent.tsx
@@ -25,6 +25,7 @@ import {
   MNotice,
   MText,
   MVideo,
+  MGallery,
   ReadPdfFile,
   ReadTextFile,
   RenderBody,
@@ -49,7 +50,8 @@ import { ClientSideHoverFreeze } from './ClientSideHoverFreeze';
 import { CuteEventType, MCuteEvent } from './message/MCuteEvent';
 import { PollEvent } from './message/PollEvent';
 import { M_TEXT } from 'matrix-js-sdk';
-import type { IImageInfo } from '$types/matrix/common';
+import type { IImageInfo, IGalleryContent } from '$types/matrix/common';
+import { GALLERY_MSGTYPE } from '$types/matrix/common';
 
 type RenderMessageContentProps = {
   displayName: string;
@@ -61,6 +63,7 @@ type RenderMessageContentProps = {
   bundledPreview?: boolean;
   urlPreview?: boolean;
   clientUrlPreview?: boolean;
+  isGallery?: boolean;
   showMaps?: boolean;
   highlightRegex?: RegExp;
   htmlReactParserOptions: HTMLReactParserOptions;
@@ -94,6 +97,7 @@ function RenderMessageContentInternal({
   edited,
   getContent,
   mediaAutoLoad,
+  isGallery,
   bundledPreview,
   urlPreview,
   clientUrlPreview,
@@ -213,8 +217,9 @@ function RenderMessageContentInternal({
     if (captionPosition === CaptionPosition.Hidden || hideCaption) return null;
     if (
       hasCaption &&
-      (content as { filename?: string }).filename &&
-      (content as { filename?: string }).filename !== content.body
+      (((content as { filename?: string }).filename &&
+        (content as { filename?: string }).filename !== content.body) ||
+        msgType === GALLERY_MSGTYPE)
     ) {
       if (captionPosition !== CaptionPosition.Inline)
         return (
@@ -254,16 +259,19 @@ function RenderMessageContentInternal({
     return null;
   };
 
-  function renderCaptionedAttachment(attachment: JSX.Element): JSX.Element {
+  function renderCaptionedAttachment(attachment: JSX.Element, isInGallery?: boolean): JSX.Element {
     return (
       <div
         style={{
           display: 'flex',
           flexDirection: attachmentDirection,
+          height: '100%',
+          width: '100%',
+          position: 'relative',
         }}
       >
-        <div>{attachment}</div>
-        {renderCaption()}
+        {attachment}
+        {!isInGallery && renderCaption()}
       </div>
     );
   }
@@ -368,6 +376,7 @@ function RenderMessageContentInternal({
     return renderCaptionedAttachment(
       <MImage
         content={content as Record<string, never> & { msgtype: MsgType.Image }}
+        fitParent={isGallery}
         renderImageContent={(imageProps) => (
           <ImageContent
             {...imageProps}
@@ -386,7 +395,8 @@ function RenderMessageContentInternal({
           />
         )}
         outlined={outlineAttachment}
-      />
+      />,
+      isGallery
     );
   }
 
@@ -416,7 +426,8 @@ function RenderMessageContentInternal({
           />
         )}
         outlined={outlineAttachment}
-      />
+      />,
+      isGallery
     );
   }
 
@@ -429,6 +440,7 @@ function RenderMessageContentInternal({
           <AudioContent {...audioProps} renderMediaControl={(p) => <MediaControl {...p} />} />
         )}
         outlined={outlineAttachment}
+        fitParent={isGallery}
       />
     );
   }
@@ -436,6 +448,30 @@ function RenderMessageContentInternal({
   if (msgType === (MsgType.File as string)) return renderFile();
   if (msgType === (MsgType.Location as string))
     return <MLocation showMaps={showMaps} content={content} />;
+
+  if (msgType === GALLERY_MSGTYPE) {
+    return renderCaptionedAttachment(
+      <MGallery
+        content={content as IGalleryContent}
+        renderItem={(itemContent) => (
+          <RenderMessageContentInternal
+            displayName={displayName}
+            msgType={itemContent.msgtype as string}
+            ts={ts}
+            getContent={() => itemContent}
+            mediaAutoLoad={mediaAutoLoad}
+            urlPreview={urlPreview}
+            highlightRegex={highlightRegex}
+            htmlReactParserOptions={htmlReactParserOptions}
+            linkifyOpts={linkifyOpts}
+            outlineAttachment={outlineAttachment}
+            isGallery={true}
+          />
+        )}
+      />
+    );
+  }
+
   if (msgType === 'm.bad.encrypted') return <MBadEncrypted />;
 
   // cute events
diff --git a/src/app/components/media/media.css.ts b/src/app/components/media/media.css.ts
index 4253b52d25..a176fef027 100644
--- a/src/app/components/media/media.css.ts
+++ b/src/app/components/media/media.css.ts
@@ -4,7 +4,7 @@ import { DefaultReset } from 'folds';
 export const Image = style([
   DefaultReset,
   {
-    objectFit: 'contain',
+    objectFit: 'cover',
     width: '100%',
     height: '100%',
   },
diff --git a/src/app/components/message/MGallery.css.ts b/src/app/components/message/MGallery.css.ts
new file mode 100644
index 0000000000..c0dc173f13
--- /dev/null
+++ b/src/app/components/message/MGallery.css.ts
@@ -0,0 +1,57 @@
+import { recipe } from '@vanilla-extract/recipes';
+import { style } from '@vanilla-extract/css';
+import { DefaultReset, config, toRem } from 'folds';
+
+export const GalleryHolder = style({
+  marginTop: config.space.S200,
+});
+
+export const GalleryImageGrid = recipe({
+  base: [
+    DefaultReset,
+    {
+      display: 'grid',
+      gap: '0.5rem',
+      maxWidth: toRem(600),
+      height: '100%',
+      width: '100%',
+      gridAutoColumns: toRem(100),
+    },
+  ],
+  variants: {
+    type: {
+      ThreeItems: {
+        gridTemplateColumns: '1fr 1fr',
+        gridTemplateRows: `repeat(2, 1fr)`,
+      },
+      ThreeByThree: {
+        gridTemplateColumns: 'repeat(3,minmax(0,1fr))',
+      },
+      TwoByTwo: {
+        gridTemplateColumns: 'repeat(2,minmax(0,1fr))',
+      },
+      OneByOne: {
+        maxHeight: toRem(300),
+        gridTemplateColumns: '1fr',
+      },
+    },
+  },
+});
+
+export const GalleryItem = recipe({
+  base: [
+    DefaultReset,
+    {
+      borderRadius: config.radii.R300,
+      overflow: 'hidden',
+      width: '100%',
+      height: '100%',
+      aspectRatio: '1/1',
+      selectors: {
+        [`${GalleryImageGrid.classNames.variants.type.ThreeItems} &:nth-child(1)`]: {
+          gridRow: 'span 2',
+        },
+      },
+    },
+  ],
+});
diff --git a/src/app/components/message/MGallery.tsx b/src/app/components/message/MGallery.tsx
new file mode 100644
index 0000000000..92605fa334
--- /dev/null
+++ b/src/app/components/message/MGallery.tsx
@@ -0,0 +1,127 @@
+import { type ReactNode } from 'react';
+import { Box } from 'folds';
+import { MsgType, type IContent } from 'matrix-js-sdk';
+import type {
+  IGalleryContent,
+  IGalleryImageItem,
+  IGalleryItem,
+  IGalleryVideoItem,
+} from '$types/matrix/common';
+import * as css from './MGallery.css';
+
+function galleryItemToContent(item: IGalleryItem): IContent {
+  const { itemtype, ...rest } = item;
+  return { ...rest, msgtype: itemtype } as IContent;
+}
+
+type MGalleryProps = {
+  content: IGalleryContent;
+  renderItem: (content: IContent, index: number) => ReactNode;
+};
+
+type PartitionedMediaItem = {
+  items: (IGalleryImageItem | IGalleryVideoItem)[];
+  type: 'ThreeByThree' | 'TwoByTwo' | 'OneByOne' | 'ThreeItems';
+};
+
+export function MGallery({ content, renderItem }: MGalleryProps) {
+  const items = content.itemtypes;
+
+  let mediaItems = items.filter(
+    (item) => item.itemtype == MsgType.Video || item.itemtype == MsgType.Image
+  );
+  const columnItems = items.filter(
+    (item) => item.itemtype == MsgType.File || item.itemtype == MsgType.Audio
+  );
+
+  let partitionedMediaItems: PartitionedMediaItem[] = [];
+  while (mediaItems.length > 0) {
+    if (mediaItems.length >= 9) {
+      partitionedMediaItems.unshift({
+        items: mediaItems.slice(-9),
+        type: 'ThreeByThree',
+      });
+      mediaItems = mediaItems.slice(0, mediaItems.length - 9);
+      continue;
+    }
+    if (mediaItems.length >= 6) {
+      partitionedMediaItems.unshift({
+        items: mediaItems.slice(-6),
+        type: 'ThreeByThree',
+      });
+      mediaItems = mediaItems.slice(0, mediaItems.length - 6);
+      continue;
+    }
+    if (mediaItems.length >= 4) {
+      partitionedMediaItems.unshift({
+        items: mediaItems.slice(-4),
+        type: 'TwoByTwo',
+      });
+      mediaItems = mediaItems.slice(0, mediaItems.length - 4);
+      continue;
+    }
+    if (mediaItems.length > 3) {
+      partitionedMediaItems.unshift({
+        items: mediaItems.slice(-3),
+        type: 'ThreeByThree',
+      });
+      mediaItems = mediaItems.slice(0, mediaItems.length - 3);
+      continue;
+    }
+    if (mediaItems.length == 3) {
+      partitionedMediaItems.unshift({
+        items: mediaItems.slice(-3),
+        type: 'ThreeItems',
+      });
+      mediaItems = mediaItems.slice(0, mediaItems.length - 3);
+      continue;
+    }
+    if (mediaItems.length >= 2) {
+      partitionedMediaItems.unshift({
+        items: mediaItems.slice(-2),
+        type: 'TwoByTwo',
+      });
+      mediaItems = mediaItems.slice(0, mediaItems.length - 2);
+      continue;
+    }
+    if (mediaItems.length >= 1) {
+      partitionedMediaItems.unshift({
+        items: mediaItems.slice(-1),
+        type: 'OneByOne',
+      });
+      mediaItems = mediaItems.slice(0, mediaItems.length - 1);
+      continue;
+    }
+  }
+  return (
+    <Box display="Flex" direction="Column" gap="400">
+      {partitionedMediaItems.length > 0 && (
+        <Box direction="Column" gap="200">
+          {partitionedMediaItems.map((item) => (
+            <div
+              key={`${item.type}-${item.items[0]?.url ?? item.items[0]?.file?.url}`}
+              className={css.GalleryImageGrid({
+                type: item.type,
+              })}
+            >
+              {item.items.map((mediaItem, index) => (
+                <div key={mediaItem.url ?? mediaItem.file?.url} className={css.GalleryItem()}>
+                  {renderItem(galleryItemToContent(mediaItem), index)}
+                </div>
+              ))}
+            </div>
+          ))}
+        </Box>
+      )}
+      {columnItems.length > 0 && (
+        <Box alignItems="Start" gap="200" direction="Column">
+          {columnItems.map((item, index) => (
+            <div key={item.url ?? item.file?.url ?? index}>
+              {renderItem(galleryItemToContent(item), index)}
+            </div>
+          ))}
+        </Box>
+      )}
+    </Box>
+  );
+}
diff --git a/src/app/components/message/MsgTypeRenderers.tsx b/src/app/components/message/MsgTypeRenderers.tsx
index 7c7d81f686..eb686aa075 100644
--- a/src/app/components/message/MsgTypeRenderers.tsx
+++ b/src/app/components/message/MsgTypeRenderers.tsx
@@ -432,8 +432,9 @@ type MImageProps = {
   content: IImageContent;
   renderImageContent: (props: RenderImageContentProps) => ReactNode;
   outlined?: boolean;
+  fitParent?: boolean;
 };
-export function MImage({ content, renderImageContent, outlined }: MImageProps) {
+export function MImage({ content, renderImageContent, outlined, fitParent }: MImageProps) {
   const imgInfo = content?.info;
   const mxcUrl = content.file?.url ?? content.url;
   if (typeof mxcUrl !== 'string') {
@@ -445,24 +446,28 @@ export function MImage({ content, renderImageContent, outlined }: MImageProps) {
   const aspectRatio = imgInfo?.w && imgInfo?.h ? `${imgW} / ${imgH}` : undefined;
   // this garbage is for portrait images, we cap the width so the card doesn't exceed the bounds of the image
   const displayWidth = imgH > imgW ? Math.round(MAX_SIZE * (imgW / imgH)) : MAX_SIZE;
+  const height = scaleYDimension(imgInfo?.w || 400, displayWidth, imgInfo?.h || 400);
 
   return (
     <Attachment
       style={{
         flexGrow: 1,
         flexShrink: 0,
-        width: toRem(displayWidth),
+        width: fitParent ? '100%' : toRem(displayWidth),
+        height: fitParent ? '100%' : 'auto',
       }}
       outlined={outlined}
     >
       <AttachmentBox
         style={{
-          aspectRatio,
-          maxHeight: toRem(MAX_SIZE),
+          flexGrow: 1,
+          aspectRatio: fitParent ? undefined : aspectRatio,
+          width: fitParent ? '100%' : toRem(displayWidth),
+          height: fitParent ? '100%' : toRem(height < 48 ? 48 : height),
         }}
       >
         {renderImageContent({
-          body: content.filename || content.body || 'Image',
+          body: content.body || content.filename || 'Image',
           info: imgInfo,
           mimeType: imgInfo?.mimetype,
           url: mxcUrl,
@@ -489,6 +494,7 @@ type MVideoProps = {
   renderAsFile: () => ReactNode;
   renderVideoContent: (props: RenderVideoContentProps) => ReactNode;
   outlined?: boolean;
+  fitParent?: boolean;
 };
 export function MVideo({ content, renderAsFile, renderVideoContent, outlined }: MVideoProps) {
   const videoInfo = content?.info;
@@ -502,6 +508,7 @@ export function MVideo({ content, renderAsFile, renderVideoContent, outlined }:
     return <BrokenContent body={content.body ?? content.filename} />;
   }
 
+  const displayWidth = Math.min(videoInfo.w || 400, 400);
   const height = Math.min(scaleYDimension(videoInfo.w || 400, 400, videoInfo.h || 400), 400);
 
   const filename = content.filename ?? content.body ?? 'Video';
@@ -511,6 +518,8 @@ export function MVideo({ content, renderAsFile, renderVideoContent, outlined }:
       style={{
         flexGrow: 1,
         flexShrink: 0,
+        width: toRem(displayWidth),
+        height: 'auto',
       }}
       outlined={outlined}
     >
@@ -530,6 +539,8 @@ export function MVideo({ content, renderAsFile, renderVideoContent, outlined }:
       </AttachmentHeader>
       <AttachmentBox
         style={{
+          flexGrow: 1,
+          width: toRem(displayWidth),
           height: toRem(height < 48 ? 48 : height),
         }}
       >
@@ -580,8 +591,15 @@ type MAudioProps = {
   renderAsFile: () => ReactNode;
   renderAudioContent: (props: RenderAudioContentProps) => ReactNode;
   outlined?: boolean;
+  fitParent?: boolean;
 };
-export function MAudio({ content, renderAsFile, renderAudioContent, outlined }: MAudioProps) {
+export function MAudio({
+  content,
+  renderAsFile,
+  renderAudioContent,
+  outlined,
+  fitParent,
+}: MAudioProps) {
   const audioInfo = content?.info;
   const mxcUrl = content.file?.url ?? content.url;
   const safeMimeType = getBlobSafeMimeType(audioInfo?.mimetype ?? '');
@@ -598,7 +616,10 @@ export function MAudio({ content, renderAsFile, renderAudioContent, outlined }:
   const resolvedInfo =
     durationMs !== undefined ? { ...audioInfo, duration: durationMs } : audioInfo;
   return (
-    <Attachment outlined={outlined}>
+    <Attachment
+      outlined={outlined}
+      style={{ width: fitParent ? '100%' : toRem(400), height: fitParent ? '100%' : 'auto' }}
+    >
       <AttachmentHeader>
         <FileHeader
           body={filename}
@@ -638,6 +659,7 @@ type MFileProps = {
   content: IFileContent;
   renderFileContent: (props: RenderFileContentProps) => ReactNode;
   outlined?: boolean;
+  fitParent?: boolean;
 };
 export function MFile({ content, renderFileContent, outlined }: MFileProps) {
   const fileInfo = content?.info;
@@ -648,7 +670,7 @@ export function MFile({ content, renderFileContent, outlined }: MFileProps) {
   }
 
   return (
-    <Attachment outlined={outlined}>
+    <Attachment outlined={outlined} style={{ width: toRem(400), height: 'auto' }}>
       <AttachmentHeader>
         <FileHeader
           body={content.filename ?? content.body ?? 'Unnamed File'}
@@ -658,7 +680,7 @@ export function MFile({ content, renderFileContent, outlined }: MFileProps) {
       <AttachmentBox>
         <AttachmentContent>
           {renderFileContent({
-            body: content.filename ?? content.body ?? 'File',
+            body: content.body ?? content.filename ?? 'File',
             info: fileInfo ?? {},
             mimeType: fileInfo?.mimetype ?? FALLBACK_MIMETYPE,
             url: mxcUrl,
diff --git a/src/app/components/message/content/VideoContent.tsx b/src/app/components/message/content/VideoContent.tsx
index e514f40526..666684da51 100644
--- a/src/app/components/message/content/VideoContent.tsx
+++ b/src/app/components/message/content/VideoContent.tsx
@@ -241,7 +241,6 @@ export const VideoContent = as<'div', VideoContentProps>(
             <Menu style={{ padding: config.space.S0 }}>
               <MenuItem
                 size="300"
-                after={menuIcon(blurred ? Eye : EyeSlash)}
                 radii="300"
                 fill="Soft"
                 variant="Secondary"
@@ -253,7 +252,9 @@ export const VideoContent = as<'div', VideoContentProps>(
                     setBlurred(false);
                   } else setBlurred(!blurred);
                 }}
-              />
+              >
+                {menuIcon(blurred ? Eye : EyeSlash)}
+              </MenuItem>
             </Menu>
           </Box>
         )}
diff --git a/src/app/components/message/index.ts b/src/app/components/message/index.ts
index 4d6326b554..df8a1773f8 100644
--- a/src/app/components/message/index.ts
+++ b/src/app/components/message/index.ts
@@ -10,3 +10,4 @@ export * from './Time';
 export * from './MsgTypeRenderers';
 export * from './FileHeader';
 export * from './RenderBody';
+export * from './MGallery';
diff --git a/src/app/components/upload-board/UploadBoard.css.ts b/src/app/components/upload-board/UploadBoard.css.ts
index 80c1b264d5..8b694f40c4 100644
--- a/src/app/components/upload-board/UploadBoard.css.ts
+++ b/src/app/components/upload-board/UploadBoard.css.ts
@@ -1,37 +1,23 @@
 import { style } from '@vanilla-extract/css';
-import { DefaultReset, color, config, toRem } from 'folds';
+import { DefaultReset, color, config } from 'folds';
 
 export const UploadBoardBase = style([
   DefaultReset,
   {
-    position: 'relative',
-    pointerEvents: 'none',
+    borderBottom: `${config.borderWidth.B300} solid ${color.SurfaceVariant.ContainerLine}`,
   },
 ]);
 
 export const UploadBoardContainer = style([
   DefaultReset,
   {
-    position: 'absolute',
-    bottom: config.space.S200,
-    left: 0,
-    right: 0,
-    zIndex: config.zIndex.Max,
+    width: '100%',
   },
 ]);
 
 export const UploadBoard = style({
-  maxWidth: toRem(400),
   width: '100%',
-  maxHeight: toRem(450),
-  height: '100%',
-  backgroundColor: color.Surface.Container,
-  color: color.Surface.OnContainer,
-  borderRadius: config.radii.R400,
-  boxShadow: config.shadow.E200,
-  border: `${config.borderWidth.B300} solid ${color.Surface.ContainerLine}`,
   overflow: 'hidden',
-  pointerEvents: 'all',
 });
 
 export const UploadBoardHeaderContent = style({
@@ -42,5 +28,4 @@ export const UploadBoardHeaderContent = style({
 export const UploadBoardContent = style({
   padding: config.space.S200,
   paddingBottom: 0,
-  paddingRight: 0,
 });
diff --git a/src/app/components/upload-board/UploadBoard.tsx b/src/app/components/upload-board/UploadBoard.tsx
index 232d65feca..6875a50900 100644
--- a/src/app/components/upload-board/UploadBoard.tsx
+++ b/src/app/components/upload-board/UploadBoard.tsx
@@ -1,7 +1,7 @@
 import type { MutableRefObject, ReactNode } from 'react';
 import { useImperativeHandle, useRef } from 'react';
 import { Badge, Box, Chip, Header, Spinner, Text, as, percent } from 'folds';
-import { CaretRight, CaretUp, PaperPlaneTilt, X, sizedIcon } from '$components/icons/phosphor';
+import { CaretRight, CaretUp, X, sizedIcon } from '$components/icons/phosphor';
 import classNames from 'classnames';
 import { useAtomValue } from 'jotai';
 
@@ -92,18 +92,6 @@ export function UploadBoardHeader({
         <Text size="H6">Files</Text>
       </Box>
       <Box className={css.UploadBoardHeaderContent} alignItems="Center" gap="100">
-        {isSuccess && (
-          <Chip
-            as="button"
-            onClick={handleSend}
-            variant="Primary"
-            radii="Pill"
-            outlined
-            after={sizedIcon(PaperPlaneTilt, '50', { filled: true })}
-          >
-            <Text size="B300">Send</Text>
-          </Chip>
-        )}
         {isError && !open && (
           <Badge variant="Critical" fill="Solid" radii="300">
             <Text size="L400">Upload Failed</Text>
@@ -117,7 +105,7 @@ export function UploadBoardHeader({
             <Spinner variant="Secondary" size="200" />
           </>
         )}
-        {!isSuccess && open && (
+        {open && (
           <Chip
             as="button"
             onClick={handleCancel}
@@ -136,7 +124,7 @@ export function UploadBoardHeader({
 export const UploadBoardContent = as<'div'>(({ className, children, ...props }, ref) => (
   <Box
     className={classNames(css.UploadBoardContent, className)}
-    direction="Column"
+    direction="Row"
     gap="200"
     {...props}
     ref={ref}
diff --git a/src/app/components/upload-card/UploadCard.tsx b/src/app/components/upload-card/UploadCard.tsx
index cdd6ae3d71..9360a26546 100644
--- a/src/app/components/upload-card/UploadCard.tsx
+++ b/src/app/components/upload-card/UploadCard.tsx
@@ -13,25 +13,27 @@ type UploadCardProps = {
   bottom?: ReactNode;
 };
 
-export const UploadCard = forwardRef<HTMLDivElement, UploadCardProps & css.UploadCardVariant>(
-  ({ before, after, children, bottom, radii, outlined, compact }, ref) => (
-    <Box
-      className={css.UploadCard({ radii, outlined, compact })}
-      direction="Column"
-      gap="200"
-      ref={ref}
-    >
-      <Box alignItems="Center" gap="200">
-        {before}
-        <Box alignItems="Center" grow="Yes" gap="200">
-          {children}
-        </Box>
-        {after}
+export const UploadCard = forwardRef<
+  HTMLDivElement,
+  UploadCardProps & css.UploadCardVariant & { style?: React.CSSProperties }
+>(({ before, after, children, bottom, radii, outlined, compact, style }, ref) => (
+  <Box
+    className={css.UploadCard({ radii, outlined, compact })}
+    direction="Column"
+    gap="200"
+    style={style}
+    ref={ref}
+  >
+    <Box alignItems="Center" gap="200">
+      {before}
+      <Box alignItems="Center" grow="Yes" gap="200">
+        {children}
       </Box>
-      {bottom}
+      {after}
     </Box>
-  )
-);
+    {bottom}
+  </Box>
+));
 
 type UploadCardProgressProps = {
   sentBytes: number;
diff --git a/src/app/components/upload-card/UploadCardRenderer.tsx b/src/app/components/upload-card/UploadCardRenderer.tsx
index cccab59af5..c00058fb5f 100644
--- a/src/app/components/upload-card/UploadCardRenderer.tsx
+++ b/src/app/components/upload-card/UploadCardRenderer.tsx
@@ -1,17 +1,6 @@
 import type { ReactNode } from 'react';
 import { useEffect, useMemo, useRef, useState } from 'react';
-import {
-  Box,
-  Chip,
-  IconButton,
-  Scroll,
-  Text,
-  Tooltip,
-  TooltipProvider,
-  color,
-  config,
-  toRem,
-} from 'folds';
+import { Box, Chip, IconButton, Text, Tooltip, TooltipProvider, color, config, toRem } from 'folds';
 import {
   Check,
   EyeSlash,
@@ -68,7 +57,7 @@ function PreviewImage({ fileItem }: Readonly<PreviewImageProps>) {
       style={{
         objectFit: 'contain',
         width: '100%',
-        height: toRem(152),
+        height: toRem(128),
         filter: metadata.markedAsSpoiler ? 'blur(44px)' : undefined,
       }}
       alt={originalFile.name}
@@ -90,7 +79,7 @@ function PreviewVideo({ fileItem }: Readonly<PreviewVideoProps>) {
       style={{
         objectFit: 'contain',
         width: '100%',
-        height: toRem(152),
+        height: toRem(128),
         filter: metadata.markedAsSpoiler ? 'blur(44px)' : undefined,
       }}
       src={fileUrl}
@@ -377,6 +366,7 @@ type UploadCardRendererProps = {
   onRemove: (file: TUploadContent) => void;
   onComplete?: (upload: UploadSuccess) => void;
   roomId: string;
+  hideCaption?: boolean;
 };
 export function UploadCardRenderer({
   isEncrypted,
@@ -386,6 +376,7 @@ export function UploadCardRenderer({
   onRemove,
   onComplete,
   roomId,
+  hideCaption,
 }: Readonly<UploadCardRendererProps>) {
   const mx = useMatrixClient();
   const mediaConfig = useMediaConfig();
@@ -452,6 +443,8 @@ export function UploadCardRenderer({
   return (
     <UploadCard
       radii="300"
+      compact
+      style={{ maxWidth: toRem(400), flexShrink: 0 }}
       before={sizedIcon(getFileTypeIconComponent(file.type))}
       after={
         <>
@@ -467,7 +460,7 @@ export function UploadCardRenderer({
               <Text size="B300">Retry</Text>
             </Chip>
           )}
-          {!isDescribed && (
+          {!isDescribed && !hideCaption && (
             <IconButton
               onClick={() => {
                 setIsDescribed(true);
@@ -480,7 +473,7 @@ export function UploadCardRenderer({
               {sizedIcon(PencilSimple, '50')}
             </IconButton>
           )}
-          {isDescribed && (
+          {isDescribed && !hideCaption && (
             <TooltipProvider
               delay={400}
               position="Top"
@@ -542,7 +535,7 @@ export function UploadCardRenderer({
             </UploadCardError>
           )}
 
-          {isDescribed && (
+          {isDescribed && !hideCaption && (
             <DescriptionEditor
               value={fileItem.formatted_body || fileItem.body}
               onSave={(plainText, htmlContent) => {
@@ -552,31 +545,17 @@ export function UploadCardRenderer({
               onCancel={() => setIsDescribed(false)}
             />
           )}
-          {!isDescribed && fileItem.body && fileItem.body.length > 0 && (
-            <Scroll
-              direction="Vertical"
-              variant="SurfaceVariant"
-              visibility="Always"
-              size="300"
-              style={{
-                backgroundColor: 'var(--sable-bg-container)',
-                borderRadius: config.radii.R400,
-                maxHeight: '180px',
-                marginTop: config.space.S0,
-                overflowY: 'auto',
-              }}
-            >
-              <Box style={{ padding: config.space.S200, wordBreak: 'break-word' }}>
-                <Text size="T200" priority="400" as="div">
-                  <RenderBody
-                    body={fileItem.body}
-                    customBody={fileItem.formatted_body}
-                    htmlReactParserOptions={htmlReactParserOptions}
-                    linkifyOpts={linkifyOpts}
-                  />
-                </Text>
-              </Box>
-            </Scroll>
+          {!isDescribed && !hideCaption && fileItem.body && fileItem.body.length > 0 && (
+            <Box style={{ padding: config.space.S200, wordBreak: 'break-word' }}>
+              <Text size="T200" priority="400" as="div">
+                <RenderBody
+                  body={fileItem.body}
+                  customBody={fileItem.formatted_body}
+                  htmlReactParserOptions={htmlReactParserOptions}
+                  linkifyOpts={linkifyOpts}
+                />
+              </Text>
+            </Box>
           )}
         </>
       }
diff --git a/src/app/features/room/RoomInput.tsx b/src/app/features/room/RoomInput.tsx
index 4dff58cf71..f4d8e9e532 100644
--- a/src/app/features/room/RoomInput.tsx
+++ b/src/app/features/room/RoomInput.tsx
@@ -170,6 +170,8 @@ import {
   getImageMsgContent,
   getVideoMsgContent,
   getGifMsgContent,
+  buildGalleryContent,
+  getGalleryItemContent,
 } from './msgContent';
 import { outgoingMessageTransforms } from './outgoingMessageTransforms';
 import { getKlipyMxcUrl } from '$utils/klipy';
@@ -437,6 +439,11 @@ export const RoomInput = forwardRef<HTMLDivElement, RoomInputProps>(
     const [sendError, setSendError] = useState<string | undefined>();
     const isEncrypted = room.hasEncryptionStateEvent();
     const [emojiBoardTab, setEmojiBoardTab] = useState<EmojiBoardTab | undefined>(undefined);
+    const [enableMediaGalleries] = useSetting(settingsAtom, 'enableMediaGalleries');
+    const [sendIndividualAttachmentAsCaption] = useSetting(
+      settingsAtom,
+      'sendIndividualAttachmentAsCaption'
+    );
 
     useElementSizeObserver(
       useCallback(() => fileDropContainerRef.current, [fileDropContainerRef]),
@@ -676,22 +683,68 @@ export const RoomInput = forwardRef<HTMLDivElement, RoomInputProps>(
       }
     };
 
+    const uploadToContent = async (upload: UploadSuccess) => {
+      const fileItem = selectedFiles.find((f) => f.file === upload.file);
+      if (!fileItem) throw new Error('Broken upload');
+
+      if (fileItem.file.type.startsWith('image')) {
+        return getImageMsgContent(mx, fileItem, upload.mxc);
+      }
+      if (fileItem.file.type.startsWith('video')) {
+        return getVideoMsgContent(mx, fileItem, upload.mxc);
+      }
+      if (fileItem.file.type.startsWith('audio')) {
+        return getAudioMsgContent(fileItem, upload.mxc);
+      }
+      return getFileMsgContent(fileItem, upload.mxc);
+    };
+
     const handleSendUpload = async (uploads: UploadSuccess[]) => {
-      const contentsPromises = uploads.map(async (upload) => {
-        const fileItem = selectedFiles.find((f) => f.file === upload.file);
-        if (!fileItem) throw new Error('Broken upload');
+      const plainText = toPlainText(editor.children).trim();
+      const caption = plainText.length > 0 ? plainText : undefined;
+      let customHtml = trimCustomHtml(
+        toMatrixCustomHTML(editor.children, {
+          stripNickname: true,
+          room,
+        })
+      );
+      const formattedCaption =
+        caption && !customHtmlEqualsPlainText(customHtml, plainText) ? customHtml : undefined;
 
-        if (fileItem.file.type.startsWith('image')) {
-          return getImageMsgContent(mx, fileItem, upload.mxc);
-        }
-        if (fileItem.file.type.startsWith('video')) {
-          return getVideoMsgContent(mx, fileItem, upload.mxc);
-        }
-        if (fileItem.file.type.startsWith('audio')) {
-          return getAudioMsgContent(fileItem, upload.mxc);
+      if (uploads.length == 1 && sendIndividualAttachmentAsCaption) {
+        const upload = uploads[0];
+        if (!upload) throw new Error('Broken upload');
+        let content = await uploadToContent(upload);
+        handleCancelUpload(uploads);
+
+        content.body = caption;
+        content.formatted_body = undefined;
+
+        if (formattedCaption) {
+          content.format = 'org.matrix.custom.html';
+          content.formatted_body = formattedCaption;
         }
-        return getFileMsgContent(fileItem, upload.mxc);
-      });
+
+        await handleSendContents([content]);
+        return;
+      }
+      if (uploads.length >= 2 && enableMediaGalleries) {
+        const itemsPromises = uploads.map(async (upload) => {
+          const fileItem = selectedFiles.find((f) => f.file === upload.file);
+          if (!fileItem) throw new Error('Broken upload');
+          return getGalleryItemContent(mx, fileItem, upload.mxc);
+        });
+        handleCancelUpload(uploads);
+        const items = fulfilledPromiseSettledResult(await Promise.allSettled(itemsPromises));
+
+        if (items.length === 0) return;
+
+        const galleryContent = buildGalleryContent(items, caption, formattedCaption);
+
+        await handleSendContents([galleryContent]);
+        return;
+      }
+      const contentsPromises = uploads.map(uploadToContent);
       handleCancelUpload(uploads);
       const contents = fulfilledPromiseSettledResult(await Promise.allSettled(contentsPromises));
 
@@ -735,6 +788,15 @@ export const RoomInput = forwardRef<HTMLDivElement, RoomInputProps>(
 
     const submit = useCallback(async () => {
       uploadBoardHandlers.current?.handleSend();
+      if (
+        (selectedFiles.length >= 2 && enableMediaGalleries) ||
+        (selectedFiles.length == 1 && sendIndividualAttachmentAsCaption)
+      ) {
+        resetEditor(editor);
+        resetEditorHistory(editor);
+        sendTypingStatus(false);
+        return;
+      }
 
       const commandName = getBeginCommand(editor);
       /**
@@ -1124,6 +1186,9 @@ export const RoomInput = forwardRef<HTMLDivElement, RoomInputProps>(
       setScheduledTime,
       setServerMaxDelayMs,
       replyDraftBase,
+      selectedFiles,
+      enableMediaGalleries,
+      sendIndividualAttachmentAsCaption,
     ]);
 
     const handleKeyDown: KeyboardEventHandler = useCallback(
@@ -1323,40 +1388,6 @@ export const RoomInput = forwardRef<HTMLDivElement, RoomInputProps>(
 
     return (
       <div ref={ref}>
-        {selectedFiles.length > 0 && (
-          <UploadBoard
-            header={
-              <UploadBoardHeader
-                open={uploadBoard}
-                onToggle={() => setUploadBoard(!uploadBoard)}
-                uploadFamilyObserverAtom={uploadFamilyObserverAtom}
-                onSend={handleSendUpload}
-                imperativeHandlerRef={uploadBoardHandlers}
-                onCancel={handleCancelUpload}
-              />
-            }
-          >
-            {uploadBoard && (
-              <Scroll size="300" hideTrack visibility="Hover">
-                <UploadBoardContent>
-                  {Array.from(selectedFiles)
-                    .toReversed()
-                    .map((fileItem) => (
-                      <UploadCardRenderer
-                        key={getUploadItemKey(fileItem)}
-                        isEncrypted={!!fileItem.encInfo}
-                        fileItem={fileItem}
-                        setMetadata={handleFileMetadata}
-                        onRemove={handleRemoveUpload}
-                        setDesc={setDesc}
-                        roomId={roomId}
-                      />
-                    ))}
-                </UploadBoardContent>
-              </Scroll>
-            )}
-          </UploadBoard>
-        )}
         <Overlay
           open={dropZoneVisible}
           backdrop={<OverlayBackdrop />}
@@ -1448,6 +1479,43 @@ export const RoomInput = forwardRef<HTMLDivElement, RoomInputProps>(
           forceMultilineLayout={showAudioRecorder}
           top={
             <>
+              {selectedFiles.length > 0 && (
+                <UploadBoard
+                  header={
+                    <UploadBoardHeader
+                      open={uploadBoard}
+                      onToggle={() => setUploadBoard(!uploadBoard)}
+                      uploadFamilyObserverAtom={uploadFamilyObserverAtom}
+                      onSend={handleSendUpload}
+                      imperativeHandlerRef={uploadBoardHandlers}
+                      onCancel={handleCancelUpload}
+                    />
+                  }
+                >
+                  {uploadBoard && (
+                    <Scroll direction="Horizontal" size="300" hideTrack visibility="Hover">
+                      <UploadBoardContent>
+                        {Array.from(selectedFiles)
+                          .toReversed()
+                          .map((fileItem) => (
+                            <UploadCardRenderer
+                              key={getUploadItemKey(fileItem)}
+                              isEncrypted={!!fileItem.encInfo}
+                              fileItem={fileItem}
+                              setMetadata={handleFileMetadata}
+                              onRemove={handleRemoveUpload}
+                              setDesc={setDesc}
+                              roomId={roomId}
+                              hideCaption={
+                                selectedFiles.length == 1 && sendIndividualAttachmentAsCaption
+                              }
+                            />
+                          ))}
+                      </UploadBoardContent>
+                    </Scroll>
+                  )}
+                </UploadBoard>
+              )}
               {scheduledTime && (
                 <div>
                   <Box
diff --git a/src/app/features/room/msgContent.ts b/src/app/features/room/msgContent.ts
index 2d3f109016..d8da4262fb 100644
--- a/src/app/features/room/msgContent.ts
+++ b/src/app/features/room/msgContent.ts
@@ -1,7 +1,8 @@
 import type { IContent, MatrixClient } from '$types/matrix-sdk';
 import { MsgType } from '$types/matrix-sdk';
 import to from 'await-to-js';
-import type { IThumbnailContent } from '$types/matrix/common';
+import type { IGalleryItem } from '$types/matrix/common';
+import { GALLERY_MSGTYPE, type IThumbnailContent } from '$types/matrix/common';
 import {
   getImageFileUrl,
   getThumbnail,
@@ -288,3 +289,52 @@ export const getGifMsgContent = async (
 
   return content;
 };
+
+const swapMsgTypeToItemType = (
+  content: IContent,
+  itemtype: IGalleryItem['itemtype']
+): IGalleryItem => {
+  const result = { ...content, itemtype };
+  delete result.msgtype;
+  return result as IGalleryItem;
+};
+
+export const getGalleryItemContent = async (
+  mx: MatrixClient,
+  item: TUploadItem,
+  mxc: string
+): Promise<IGalleryItem> => {
+  if (item.file.type.startsWith('image')) {
+    return swapMsgTypeToItemType(await getImageMsgContent(mx, item, mxc), MsgType.Image);
+  }
+  if (item.file.type.startsWith('video')) {
+    return swapMsgTypeToItemType(await getVideoMsgContent(mx, item, mxc), MsgType.Video);
+  }
+  if (item.file.type.startsWith('audio')) {
+    return swapMsgTypeToItemType(getAudioMsgContent(item, mxc), MsgType.Audio);
+  }
+  return swapMsgTypeToItemType(getFileMsgContent(item, mxc), MsgType.File);
+};
+
+export const buildGalleryContent = (
+  items: IGalleryItem[],
+  caption?: string,
+  formattedCaption?: string
+): IContent => {
+  const body =
+    caption ||
+    items.map((item) => `[${item.filename ?? item.itemtype}: ${item.url ?? 'file'}]`).join('\n');
+
+  const content: IContent = {
+    msgtype: GALLERY_MSGTYPE,
+    body,
+    itemtypes: items,
+  };
+
+  if (formattedCaption) {
+    content.format = 'org.matrix.custom.html';
+    content.formatted_body = formattedCaption;
+  }
+
+  return content;
+};
diff --git a/src/app/features/settings/experimental/Experimental.tsx b/src/app/features/settings/experimental/Experimental.tsx
index fe4b039c7a..085355f40f 100644
--- a/src/app/features/settings/experimental/Experimental.tsx
+++ b/src/app/features/settings/experimental/Experimental.tsx
@@ -11,6 +11,7 @@ import { Sync } from '../general';
 import { SettingsSectionPage } from '../SettingsSectionPage';
 import { BandwidthSavingEmojis } from './BandwithSavingEmojis';
 import { MSC4268HistoryShare } from './MSC4268HistoryShare';
+import { MSC4274MediaGalleries } from './MSC4274MediaGalleries';
 
 function PersonaToggle() {
   const [showPersonaSetting, setShowPersonaSetting] = useSetting(
@@ -63,6 +64,7 @@ export function Experimental({ requestBack, requestClose }: Readonly<Experimenta
               <MSC4268HistoryShare />
               <BandwidthSavingEmojis />
               <PersonaToggle />
+              <MSC4274MediaGalleries />
             </Box>
           </PageContent>
         </Scroll>
diff --git a/src/app/features/settings/experimental/MSC4274MediaGalleries.tsx b/src/app/features/settings/experimental/MSC4274MediaGalleries.tsx
new file mode 100644
index 0000000000..397f9306c4
--- /dev/null
+++ b/src/app/features/settings/experimental/MSC4274MediaGalleries.tsx
@@ -0,0 +1,39 @@
+import { SequenceCard } from '$components/sequence-card';
+import { SettingTile } from '$components/setting-tile';
+import { useSetting } from '$state/hooks/settings';
+import { settingsAtom } from '$state/settings';
+import { Box, Switch, Text } from 'folds';
+import { SequenceCardStyle } from '../styles.css';
+
+export function MSC4274MediaGalleries() {
+  const [enabledMediaGalleries, setEnabledMediaGalleries] = useSetting(
+    settingsAtom,
+    'enableMediaGalleries'
+  );
+
+  return (
+    <Box direction="Column" gap="100">
+      <Text size="L400">Enable Media Galleries Support</Text>
+      <SequenceCard
+        className={SequenceCardStyle}
+        variant="SurfaceVariant"
+        direction="Column"
+        gap="100"
+      >
+        <SettingTile
+          title="Enable Media Galleries"
+          focusId="media-galleries"
+          description="If enabled, multiple attachments will be sent in one message, as per MSC4274. Incompatible with clients that don't implement it."
+          after={
+            <Switch
+              variant="Primary"
+              value={enabledMediaGalleries}
+              onChange={setEnabledMediaGalleries}
+              title={enabledMediaGalleries ? 'Disable Media Galleries' : 'Enable Media Galleries'}
+            />
+          }
+        />
+      </SequenceCard>
+    </Box>
+  );
+}
diff --git a/src/app/features/settings/general/General.tsx b/src/app/features/settings/general/General.tsx
index 89359f913c..a3fef67ac7 100644
--- a/src/app/features/settings/general/General.tsx
+++ b/src/app/features/settings/general/General.tsx
@@ -428,6 +428,10 @@ function Editor({ isMobile }: Readonly<{ isMobile: boolean }>) {
   const [hideReads, setHideReads] = useSetting(settingsAtom, 'hideReads');
   const [sendPresence, setSendPresence] = useSetting(settingsAtom, 'sendPresence');
   const [mentionInReplies, setMentionInReplies] = useSetting(settingsAtom, 'mentionInReplies');
+  const [sendIndividualAttachmentAsCaption, setSendIndividualAttachmentAsCaption] = useSetting(
+    settingsAtom,
+    'sendIndividualAttachmentAsCaption'
+  );
 
   return (
     <Box direction="Column" gap="100">
@@ -504,6 +508,20 @@ function Editor({ isMobile }: Readonly<{ isMobile: boolean }>) {
           }
         />
       </SequenceCard>
+      <SequenceCard className={SequenceCardStyle} variant="SurfaceVariant" direction="Column">
+        <SettingTile
+          title="Send text with individual attachment as caption"
+          focusId="reply-notifications"
+          description="Send the contents of the message field as the attachment caption if present."
+          after={
+            <Switch
+              variant="Primary"
+              value={sendIndividualAttachmentAsCaption}
+              onChange={setSendIndividualAttachmentAsCaption}
+            />
+          }
+        />
+      </SequenceCard>
     </Box>
   );
 }
diff --git a/src/app/features/settings/settingsLink.ts b/src/app/features/settings/settingsLink.ts
index eb258b1c33..e39fc9b33b 100644
--- a/src/app/features/settings/settingsLink.ts
+++ b/src/app/features/settings/settingsLink.ts
@@ -210,7 +210,12 @@ const settingsLinkFocusIdsBySection: Record<SettingsSectionId, readonly string[]
     'session-replay',
     'traces-profiles',
   ],
-  experimental: ['bandwidth-saving-emojis', 'sharehistory-command', 'show-personas-tab'],
+  experimental: [
+    'bandwidth-saving-emojis',
+    'sharehistory-command',
+    'show-personas-tab',
+    'media-galleries',
+  ],
   about: [
     'base-url',
     'clear-cache-and-reload',
diff --git a/src/app/state/settings.ts b/src/app/state/settings.ts
index f3ad673157..26ddd14767 100644
--- a/src/app/state/settings.ts
+++ b/src/app/state/settings.ts
@@ -149,6 +149,7 @@ export interface Settings {
 
   developerTools: boolean;
   enableMSC4268CMD: boolean;
+  enableMediaGalleries: boolean;
   settingsSyncEnabled: boolean;
 
   // Cosmetics!
@@ -225,6 +226,7 @@ export interface Settings {
   vcmsgSidebarWidth: number;
   widgetSidebarWidth: number;
   isShowingAllRoomsInHome: boolean;
+  sendIndividualAttachmentAsCaption: boolean;
 
   // furry stuff
   renderAnimals: boolean;
@@ -295,6 +297,7 @@ export const defaultSettings: Settings = {
   legacyUsernameColor: false,
 
   enableMSC4268CMD: false,
+  enableMediaGalleries: false,
 
   // Push notifications (SW/Sygnal): default on for mobile, opt-in on desktop.
   // In-app pill banner: default on for mobile (primary foreground alert), opt-in on desktop.
@@ -386,6 +389,7 @@ export const defaultSettings: Settings = {
   vcmsgSidebarWidth: 399,
   widgetSidebarWidth: 420,
   isShowingAllRoomsInHome: false,
+  sendIndividualAttachmentAsCaption: true,
   // furry stuff
   renderAnimals: true,
 
diff --git a/src/types/matrix/common.ts b/src/types/matrix/common.ts
index 8f43012011..36f531258c 100644
--- a/src/types/matrix/common.ts
+++ b/src/types/matrix/common.ts
@@ -142,3 +142,23 @@ export type ILocationContent = {
   geo_uri?: string;
   info?: IThumbnailContent;
 };
+
+export type IGalleryImageItem = Omit<IImageContent, 'msgtype'> & { itemtype: MsgType.Image };
+export type IGalleryVideoItem = Omit<IVideoContent, 'msgtype'> & { itemtype: MsgType.Video };
+export type IGalleryAudioItem = Omit<IAudioContent, 'msgtype'> & { itemtype: MsgType.Audio };
+export type IGalleryFileItem = Omit<IFileContent, 'msgtype'> & { itemtype: MsgType.File };
+export type IGalleryItem =
+  | IGalleryImageItem
+  | IGalleryVideoItem
+  | IGalleryAudioItem
+  | IGalleryFileItem;
+
+export const GALLERY_MSGTYPE = 'dm.filament.gallery';
+
+export type IGalleryContent = {
+  msgtype: typeof GALLERY_MSGTYPE;
+  body: string;
+  format?: string;
+  formatted_body?: string;
+  itemtypes: IGalleryItem[];
+};