diff --git a/.changeset/add_msc4095_displaying.md b/.changeset/add_msc4095_displaying.md
new file mode 100644
index 000000000..a8b83ed00
--- /dev/null
+++ b/.changeset/add_msc4095_displaying.md
@@ -0,0 +1,5 @@
+---
+default: minor
+---
+
+Add support for rendering bundled urls per MSC4095
diff --git a/src/app/components/RenderMessageContent.tsx b/src/app/components/RenderMessageContent.tsx
index 56517903b..e147610bf 100644
--- a/src/app/components/RenderMessageContent.tsx
+++ b/src/app/components/RenderMessageContent.tsx
@@ -1,5 +1,5 @@
 import { memo, useMemo, useCallback } from 'react';
-import { MsgType } from '$types/matrix-sdk';
+import { IPreviewUrlResponse, MsgType } from '$types/matrix-sdk';
 import { testMatrixTo } from '$plugins/matrix-to';
 import { useSetting } from '$state/hooks/settings';
 import { settingsAtom, CaptionPosition } from '$state/settings';
@@ -42,6 +42,7 @@ type RenderMessageContentProps = {
   edited?: boolean;
   getContent: <T>() => T;
   mediaAutoLoad?: boolean;
+  bundledPreview?: boolean;
   urlPreview?: boolean;
   clientUrlPreview?: boolean;
   highlightRegex?: RegExp;
@@ -68,6 +69,7 @@ function RenderMessageContentInternal({
   edited,
   getContent,
   mediaAutoLoad,
+  bundledPreview,
   urlPreview,
   clientUrlPreview,
   highlightRegex,
@@ -112,18 +114,17 @@ function RenderMessageContentInternal({
 
       const mediaLinks = analyzed.filter((item) => item.type !== null);
       const toRender = mediaLinks.length > 0 ? mediaLinks : [analyzed[0]];
-
       return (
         <UrlPreviewHolder>
           {toRender.map(({ url, type }) => {
             if (type) {
-              return <UrlPreviewCard key={url} url={url} ts={ts} mediaType={type} />;
+              return <UrlPreviewCard urlPreview key={url} url={url} ts={ts} mediaType={type} />;
             }
             if (clientUrlPreview && youtubeUrl(url)) {
               return <ClientPreview url={url} />;
             }
             if (urlPreview) {
-              return <UrlPreviewCard key={url} url={url} ts={ts} mediaType={type} />;
+              return <UrlPreviewCard urlPreview key={url} url={url} ts={ts} mediaType={type} />;
             }
             return null;
           })}
@@ -132,7 +133,23 @@ function RenderMessageContentInternal({
     },
     [ts, clientUrlPreview, urlPreview]
   );
+  const renderBundledPreviews = useCallback(
+    (bundles: IPreviewUrlResponse[]) => (
+      <UrlPreviewHolder>
+        {bundles.map((bundle) => (
+          <UrlPreviewCard
+            urlPreview={urlPreview === true}
+            key={bundle['og:url']}
+            url={bundle['og:url']}
+            bundle={bundle}
+          />
+        ))}
+      </UrlPreviewHolder>
+    ),
+    [urlPreview]
+  );
   const messageUrlsPreview = urlPreview ? renderUrlsPreview : undefined;
+  const messageBundlePreview = bundledPreview ? renderBundledPreviews : undefined;
 
   const renderCaption = () => {
     const hasCaption = content.body && content.body.trim().length > 0;
@@ -146,6 +163,7 @@ function RenderMessageContentInternal({
             content={content}
             renderBody={renderBody}
             renderUrlsPreview={messageUrlsPreview}
+            renderBundledPreviews={messageBundlePreview}
           />
         );
       return (
@@ -165,6 +183,7 @@ function RenderMessageContentInternal({
             content={content}
             renderBody={renderBody}
             renderUrlsPreview={messageUrlsPreview}
+            renderBundledPreviews={messageBundlePreview}
           />
         </Box>
       );
@@ -227,6 +246,7 @@ function RenderMessageContentInternal({
         content={content}
         renderBody={renderBody}
         renderUrlsPreview={messageUrlsPreview}
+        renderBundledPreviews={messageBundlePreview}
       />
     );
   }
@@ -248,6 +268,7 @@ function RenderMessageContentInternal({
         content={content}
         renderBody={renderBody}
         renderUrlsPreview={messageUrlsPreview}
+        renderBundledPreviews={messageBundlePreview}
       />
     );
   }
@@ -259,6 +280,7 @@ function RenderMessageContentInternal({
         content={content}
         renderBody={renderBody}
         renderUrlsPreview={messageUrlsPreview}
+        renderBundledPreviews={messageBundlePreview}
       />
     );
   }
diff --git a/src/app/components/message/MsgTypeRenderers.tsx b/src/app/components/message/MsgTypeRenderers.tsx
index 6d1a63cce..bd3c72ce5 100644
--- a/src/app/components/message/MsgTypeRenderers.tsx
+++ b/src/app/components/message/MsgTypeRenderers.tsx
@@ -1,6 +1,6 @@
 import { CSSProperties, ReactNode, useMemo } from 'react';
 import { Box, Chip, Icon, Icons, Text, toRem } from 'folds';
-import { IContent } from '$types/matrix-sdk';
+import { IContent, IPreviewUrlResponse } from '$types/matrix-sdk';
 import { JUMBO_EMOJI_REG, URL_REG } from '$utils/regex';
 import { trimReplyFromBody } from '$utils/room';
 import {
@@ -82,9 +82,17 @@ type MTextProps = {
   content: Record<string, unknown>;
   renderBody: (props: RenderBodyProps) => ReactNode;
   renderUrlsPreview?: (urls: string[]) => ReactNode;
+  renderBundledPreviews?: (bundles: IPreviewUrlResponse[]) => ReactNode;
   style?: CSSProperties;
 };
-export function MText({ edited, content, renderBody, renderUrlsPreview, style }: MTextProps) {
+export function MText({
+  edited,
+  content,
+  renderBody,
+  renderUrlsPreview,
+  renderBundledPreviews,
+  style,
+}: MTextProps) {
   const [jumboEmojiSize] = useSetting(settingsAtom, 'jumboEmojiSize');
 
   const body = typeof content.body === 'string' ? content.body : '';
@@ -139,8 +147,13 @@ export function MText({ edited, content, renderBody, renderUrlsPreview, style }:
 
   if (!body && !customBody) return <BrokenContent body={customBody ?? body} />;
 
-  const urlsMatch = renderUrlsPreview && trimmedBody.match(URL_REG);
-  const urls = urlsMatch ? [...new Set(urlsMatch)] : undefined;
+  let bundleContent: object[] | undefined;
+  const urlsMatch = trimmedBody.match(URL_REG);
+  let urls = urlsMatch ? [...new Set(urlsMatch)] : undefined;
+  bundleContent = content['com.beeper.linkpreviews'] as object[];
+  bundleContent = bundleContent?.filter((bundle) => !!urls?.includes((bundle as any).matched_url));
+  if (renderUrlsPreview && bundleContent)
+    urls = bundleContent.map((bundle) => (bundle as any).matched_url);
 
   if ((content['com.beeper.per_message_profile'] as PerMessageProfileBeeperFormat)?.has_fallback) {
     // unwrap per-message profile fallback if present
@@ -167,7 +180,11 @@ export function MText({ edited, content, renderBody, renderUrlsPreview, style }:
           customBody: unwrappedForwardedContent,
         })}
         {edited && <MessageEditedContent />}
-        {renderUrlsPreview && urls && urls.length > 0 && renderUrlsPreview(urls)}
+        {(renderUrlsPreview && urls && urls.length > 0 && renderUrlsPreview(urls)) ||
+          (renderBundledPreviews &&
+            bundleContent &&
+            bundleContent.length > 0 &&
+            renderBundledPreviews(bundleContent as IPreviewUrlResponse[]))}
       </MessageTextBody>
     );
   }
@@ -185,7 +202,11 @@ export function MText({ edited, content, renderBody, renderUrlsPreview, style }:
         })}
         {edited && <MessageEditedContent />}
       </MessageTextBody>
-      {renderUrlsPreview && urls && urls.length > 0 && renderUrlsPreview(urls)}
+      {(renderUrlsPreview && urls && urls.length > 0 && renderUrlsPreview(urls)) ||
+        (renderBundledPreviews &&
+          bundleContent &&
+          bundleContent.length > 0 &&
+          renderBundledPreviews(bundleContent as IPreviewUrlResponse[]))}
     </>
   );
 }
@@ -196,6 +217,7 @@ type MEmoteProps = {
   content: Record<string, unknown>;
   renderBody: (props: RenderBodyProps) => ReactNode;
   renderUrlsPreview?: (urls: string[]) => ReactNode;
+  renderBundledPreviews?: (bundles: IPreviewUrlResponse[]) => ReactNode;
 };
 export function MEmote({
   displayName,
@@ -203,6 +225,7 @@ export function MEmote({
   content,
   renderBody,
   renderUrlsPreview,
+  renderBundledPreviews,
 }: MEmoteProps) {
   const { body, formatted_body: customBody } = content;
   const [jumboEmojiSize] = useSetting(settingsAtom, 'jumboEmojiSize');
@@ -211,10 +234,14 @@ export function MEmote({
     return <BrokenContent body={typeof customBody === 'string' ? customBody : undefined} />;
   }
   const trimmedBody = trimReplyFromBody(body);
-  const urlsMatch = renderUrlsPreview && trimmedBody.match(URL_REG);
-  const urls = urlsMatch ? [...new Set(urlsMatch)] : undefined;
   const isJumbo = JUMBO_EMOJI_REG.test(trimmedBody);
 
+  let bundleContent: object[] | undefined;
+  const urlsMatch = trimmedBody.match(URL_REG);
+  const urls = urlsMatch ? [...new Set(urlsMatch)] : undefined;
+  bundleContent = content['com.beeper.linkpreviews'] as object[];
+  bundleContent = bundleContent?.filter((bundle) => !!urls?.includes((bundle as any).matched_url));
+
   return (
     <>
       <MessageTextBody
@@ -229,7 +256,11 @@ export function MEmote({
         })}
         {edited && <MessageEditedContent />}
       </MessageTextBody>
-      {renderUrlsPreview && urls && urls.length > 0 && renderUrlsPreview(urls)}
+      {(renderUrlsPreview && urls && urls.length > 0 && renderUrlsPreview(urls)) ||
+        (renderBundledPreviews &&
+          bundleContent &&
+          bundleContent.length > 0 &&
+          renderBundledPreviews(bundleContent as IPreviewUrlResponse[]))}
     </>
   );
 }
@@ -239,8 +270,15 @@ type MNoticeProps = {
   content: Record<string, unknown>;
   renderBody: (props: RenderBodyProps) => ReactNode;
   renderUrlsPreview?: (urls: string[]) => ReactNode;
+  renderBundledPreviews?: (bundles: IPreviewUrlResponse[]) => ReactNode;
 };
-export function MNotice({ edited, content, renderBody, renderUrlsPreview }: MNoticeProps) {
+export function MNotice({
+  edited,
+  content,
+  renderBody,
+  renderUrlsPreview,
+  renderBundledPreviews,
+}: MNoticeProps) {
   const { body, formatted_body: customBody } = content;
   const [jumboEmojiSize] = useSetting(settingsAtom, 'jumboEmojiSize');
 
@@ -248,10 +286,14 @@ export function MNotice({ edited, content, renderBody, renderUrlsPreview }: MNot
     return <BrokenContent body={typeof customBody === 'string' ? customBody : undefined} />;
   }
   const trimmedBody = trimReplyFromBody(body);
-  const urlsMatch = renderUrlsPreview && trimmedBody.match(URL_REG);
-  const urls = urlsMatch ? [...new Set(urlsMatch)] : undefined;
   const isJumbo = JUMBO_EMOJI_REG.test(trimmedBody);
 
+  let bundleContent: object[] | undefined;
+  const urlsMatch = trimmedBody.match(URL_REG);
+  const urls = urlsMatch ? [...new Set(urlsMatch)] : undefined;
+  bundleContent = content['com.beeper.linkpreviews'] as object[];
+  bundleContent = bundleContent?.filter((bundle) => !!urls?.includes((bundle as any).matched_url));
+
   return (
     <>
       <MessageTextBody
@@ -265,7 +307,11 @@ export function MNotice({ edited, content, renderBody, renderUrlsPreview }: MNot
         })}
         {edited && <MessageEditedContent />}
       </MessageTextBody>
-      {renderUrlsPreview && urls && urls.length > 0 && renderUrlsPreview(urls)}
+      {(renderUrlsPreview && urls && urls.length > 0 && renderUrlsPreview(urls)) ||
+        (renderBundledPreviews &&
+          bundleContent &&
+          bundleContent.length > 0 &&
+          renderBundledPreviews(bundleContent as IPreviewUrlResponse[]))}
     </>
   );
 }
diff --git a/src/app/components/url-preview/UrlPreviewCard.tsx b/src/app/components/url-preview/UrlPreviewCard.tsx
index 3ac780f74..63586b436 100644
--- a/src/app/components/url-preview/UrlPreviewCard.tsx
+++ b/src/app/components/url-preview/UrlPreviewCard.tsx
@@ -41,177 +41,90 @@ const openMediaInNewTab = async (url: string | undefined) => {
   window.open(blobUrl, '_blank');
 };
 
-export const UrlPreviewCard = as<'div', { url: string; ts: number; mediaType?: string | null }>(
-  ({ url, ts, mediaType, ...props }, ref) => {
-    const mx = useMatrixClient();
-    const useAuthentication = useMediaAuthentication();
+export const UrlPreviewCard = as<
+  'div',
+  {
+    urlPreview: boolean;
+    url: string;
+    ts?: number;
+    mediaType?: string | null;
+    bundle?: IPreviewUrlResponse;
+  }
+>(({ urlPreview, url, ts, mediaType, bundle, ...props }, ref) => {
+  const mx = useMatrixClient();
+  const useAuthentication = useMediaAuthentication();
 
-    const isDirect = !!mediaType;
+  const isDirect = !!mediaType;
 
-    const [previewStatus, loadPreview] = useAsyncCallback(
-      useCallback(() => {
-        if (isDirect) return Promise.resolve(null);
+  const [previewStatus, loadPreview] = useAsyncCallback(
+    useCallback(() => {
+      if (isDirect) return Promise.resolve(null);
+      if (!ts && !bundle) return Promise.resolve(null);
+      if (urlPreview && ts) {
         const clientCache = getClientCache(mx);
         const cached = clientCache.get(url);
         if (cached !== undefined) return cached;
-        const urlPreview = mx.getUrlPreview(url, ts);
-        clientCache.set(url, urlPreview);
-        urlPreview.finally(() => clientCache.delete(url));
-        return urlPreview;
-      }, [url, ts, mx, isDirect])
-    );
+        const previewResult = mx?.getUrlPreview(url, ts);
+        clientCache.set(url, previewResult);
+        previewResult.finally(() => clientCache.delete(url));
+        return previewResult;
+      }
+      return Promise.resolve(bundle);
+    }, [isDirect, ts, bundle, urlPreview, mx, url])
+  );
 
-    useEffect(() => {
-      loadPreview();
-    }, [url, loadPreview]);
+  useEffect(() => {
+    loadPreview();
+  }, [url, loadPreview]);
 
-    if (previewStatus.status === AsyncStatus.Error) return null;
+  if (previewStatus.status === AsyncStatus.Error) return null;
 
-    const renderContent = (prev: IPreviewUrlResponse) => {
-      const siteName = prev['og:site_name'];
-      const title = prev['og:title'];
-      const description = prev['og:description'];
-      const imgUrl = mxcUrlToHttp(
-        mx,
-        prev['og:image'] || '',
-        useAuthentication,
-        256,
-        256,
-        'scale',
-        false
-      );
-      const handleAuxClick = (ev: React.MouseEvent) => {
-        if (!prev['og:image']) {
-          console.warn('No image');
+  const renderContent = (prev: IPreviewUrlResponse) => {
+    const siteName = prev['og:site_name'];
+    const title = prev['og:title'];
+    const description = prev['og:description'];
+    const imgUrl = mxcUrlToHttp(
+      mx,
+      prev['og:image'] || '',
+      useAuthentication,
+      256,
+      256,
+      'scale',
+      false
+    );
+    const handleAuxClick = (ev: React.MouseEvent) => {
+      if (!prev['og:image']) {
+        console.warn('No image');
+        return;
+      }
+      if (ev.button === 1) {
+        ev.preventDefault();
+        const mxcUrl = mxcUrlToHttp(mx, prev['og:image'], /* useAuthentication */ true);
+        if (!mxcUrl) {
+          console.error('Error converting mxc:// url.');
           return;
         }
-        if (ev.button === 1) {
-          ev.preventDefault();
-          const mxcUrl = mxcUrlToHttp(mx, prev['og:image'], /* useAuthentication */ true);
-          if (!mxcUrl) {
-            console.error('Error converting mxc:// url.');
-            return;
-          }
-          openMediaInNewTab(mxcUrl);
-        }
-      };
+        openMediaInNewTab(mxcUrl);
+      }
+    };
 
-      return (
-        <Box
-          grow="Yes"
-          direction="Column"
+    return (
+      <Box
+        grow="Yes"
+        direction="Column"
+        style={{
+          overflow: 'hidden',
+          width: '100%',
+        }}
+      >
+        <UrlPreviewContent
           style={{
-            overflow: 'hidden',
-            width: '100%',
+            minWidth: 0,
+            display: 'flex',
+            flexDirection: 'column',
+            justifyContent: 'center',
           }}
         >
-          <UrlPreviewContent
-            style={{
-              minWidth: 0,
-              display: 'flex',
-              flexDirection: 'column',
-              justifyContent: 'center',
-            }}
-          >
-            <Text
-              style={linkStyles}
-              truncate
-              as="a"
-              href={url}
-              target="_blank"
-              rel="noreferrer"
-              size="T200"
-              priority="300"
-            >
-              {typeof siteName === 'string' && `${siteName} | `}
-              {safeDecodeUrl(url)}
-            </Text>
-            {title && (
-              <Text truncate priority="400">
-                <b>{title}</b>
-              </Text>
-            )}
-            {description && (
-              <Text size="T200" priority="300">
-                <UrlPreviewDescription>{description}</UrlPreviewDescription>
-              </Text>
-            )}
-          </UrlPreviewContent>
-          {prev['og:video'] && (
-            <VideoContent
-              style={{
-                width: '100%',
-                aspectRatio:
-                  ((prev['og:video:width'] as number) ?? 1) /
-                  ((prev['og:video:height'] as number) ?? 1),
-              }}
-              body={prev['og:title']}
-              info={{}}
-              url={prev['og:video'] as string}
-              mimeType={(prev['og:video:type'] as string) ?? ''}
-              renderVideo={(vidProps) => <Video style={{ objectFit: 'contain' }} {...vidProps} />}
-              renderThumbnail={() => <Image src={imgUrl ?? undefined} />}
-            />
-          )}
-          {!prev['og:video'] &&
-            prev['og:image'] &&
-            (() => {
-              const ogW = prev['og:image:width'];
-              const ogH = prev['og:image:height'];
-              const aspectRatio = ogW && ogH ? `${ogW} / ${ogH}` : undefined;
-              return (
-                <Box
-                  style={{
-                    width: '100%',
-                    maxHeight: '400px',
-                    aspectRatio: aspectRatio ?? '16 / 9',
-                    flexShrink: 0,
-                    overflow: 'hidden',
-                    position: 'relative',
-                  }}
-                >
-                  <ImageContent
-                    style={{ width: '100%', height: '100%', position: 'absolute', inset: 0 }}
-                    autoPlay
-                    onAuxClick={handleAuxClick}
-                    body={prev['og:title']}
-                    url={prev['og:image']}
-                    renderViewer={(p) => <ImageViewer {...p} />}
-                    renderImage={(p) => (
-                      <Image
-                        {...p}
-                        style={{
-                          width: '100%',
-                          height: '100%',
-                          objectFit: 'contain',
-                          objectPosition: 'center',
-                        }}
-                      />
-                    )}
-                  />
-                </Box>
-              );
-            })()}
-          {!prev['og:video'] && !prev['og:image'] && prev['og:audio'] && (
-            <Box className={css.UrlPreviewAudio} style={{ flexShrink: 0 }}>
-              <AudioContent
-                url={(prev['og:audio'] as string) ?? ''}
-                mimeType={(prev['og:audio:type'] as string) ?? ''}
-                info={{}}
-                renderMediaControl={(p) => <MediaControl {...p} />}
-              />
-            </Box>
-          )}
-        </Box>
-      );
-    };
-
-    let previewContent;
-    if (previewStatus.status === AsyncStatus.Success) {
-      previewContent = previewStatus.data ? (
-        renderContent(previewStatus.data)
-      ) : (
-        <UrlPreviewContent>
           <Text
             style={linkStyles}
             truncate
@@ -222,43 +135,141 @@ export const UrlPreviewCard = as<'div', { url: string; ts: number; mediaType?: s
             size="T200"
             priority="300"
           >
+            {typeof siteName === 'string' && `${siteName} | `}
             {safeDecodeUrl(url)}
           </Text>
+          {title && (
+            <Text truncate priority="400">
+              <b>{title}</b>
+            </Text>
+          )}
+          {description && (
+            <Text size="T200" priority="300">
+              <UrlPreviewDescription>{description}</UrlPreviewDescription>
+            </Text>
+          )}
         </UrlPreviewContent>
-      );
-    } else {
-      previewContent = (
-        <Box grow="Yes" alignItems="Center" justifyContent="Center">
-          <Spinner variant="Secondary" size="400" />
-        </Box>
-      );
-    }
-    return (
-      <UrlPreview
-        {...props}
-        ref={ref}
-        style={
-          isDirect
-            ? {
-                background: 'transparent',
-                border: 'none',
-                padding: 0,
-                boxShadow: 'none',
-                display: 'inline-block',
-                verticalAlign: 'middle',
-                width: 'max-content',
-                minWidth: 0,
-                maxWidth: '100%',
-                margin: 0,
-              }
-            : undefined
-        }
-      >
-        {previewContent}
-      </UrlPreview>
+        {prev['og:video'] && (
+          <VideoContent
+            style={{
+              width: '100%',
+              aspectRatio:
+                ((prev['og:video:width'] as number) ?? 1) /
+                ((prev['og:video:height'] as number) ?? 1),
+            }}
+            body={prev['og:title']}
+            info={{}}
+            url={prev['og:video'] as string}
+            mimeType={(prev['og:video:type'] as string) ?? ''}
+            renderVideo={(vidProps) => <Video style={{ objectFit: 'contain' }} {...vidProps} />}
+            renderThumbnail={() => <Image src={imgUrl ?? undefined} />}
+          />
+        )}
+        {!prev['og:video'] &&
+          prev['og:image'] &&
+          (() => {
+            const ogW = prev['og:image:width'];
+            const ogH = prev['og:image:height'];
+            const aspectRatio = ogW && ogH ? `${ogW} / ${ogH}` : undefined;
+            return (
+              <Box
+                style={{
+                  width: '100%',
+                  maxHeight: '400px',
+                  aspectRatio: aspectRatio ?? '16 / 9',
+                  flexShrink: 0,
+                  overflow: 'hidden',
+                  position: 'relative',
+                }}
+              >
+                <ImageContent
+                  style={{ width: '100%', height: '100%', position: 'absolute', inset: 0 }}
+                  autoPlay
+                  onAuxClick={handleAuxClick}
+                  body={prev['og:title']}
+                  url={prev['og:image']}
+                  renderViewer={(p) => <ImageViewer {...p} />}
+                  renderImage={(p) => (
+                    <Image
+                      {...p}
+                      style={{
+                        width: '100%',
+                        height: '100%',
+                        objectFit: 'contain',
+                        objectPosition: 'center',
+                      }}
+                    />
+                  )}
+                />
+              </Box>
+            );
+          })()}
+        {!prev['og:video'] && !prev['og:image'] && prev['og:audio'] && (
+          <Box className={css.UrlPreviewAudio} style={{ flexShrink: 0 }}>
+            <AudioContent
+              url={(prev['og:audio'] as string) ?? ''}
+              mimeType={(prev['og:audio:type'] as string) ?? ''}
+              info={{}}
+              renderMediaControl={(p) => <MediaControl {...p} />}
+            />
+          </Box>
+        )}
+      </Box>
+    );
+  };
+
+  let previewContent;
+  if (previewStatus.status === AsyncStatus.Success) {
+    previewContent = previewStatus.data ? (
+      renderContent(previewStatus.data)
+    ) : (
+      <UrlPreviewContent>
+        <Text
+          style={linkStyles}
+          truncate
+          as="a"
+          href={url}
+          target="_blank"
+          rel="noreferrer"
+          size="T200"
+          priority="300"
+        >
+          {safeDecodeUrl(url)}
+        </Text>
+      </UrlPreviewContent>
+    );
+  } else {
+    previewContent = (
+      <Box grow="Yes" alignItems="Center" justifyContent="Center">
+        <Spinner variant="Secondary" size="400" />
+      </Box>
     );
   }
-);
+  return (
+    <UrlPreview
+      {...props}
+      ref={ref}
+      style={
+        isDirect
+          ? {
+              background: 'transparent',
+              border: 'none',
+              padding: 0,
+              boxShadow: 'none',
+              display: 'inline-block',
+              verticalAlign: 'middle',
+              width: 'max-content',
+              minWidth: 0,
+              maxWidth: '100%',
+              margin: 0,
+            }
+          : undefined
+      }
+    >
+      {previewContent}
+    </UrlPreview>
+  );
+});
 
 export const UrlPreviewHolder = as<'div'>(({ children, ...props }, ref) => {
   const scrollRef = useRef<HTMLDivElement>(null);
diff --git a/src/app/features/room/RoomTimeline.tsx b/src/app/features/room/RoomTimeline.tsx
index fb4b33515..432e5370f 100644
--- a/src/app/features/room/RoomTimeline.tsx
+++ b/src/app/features/room/RoomTimeline.tsx
@@ -131,6 +131,7 @@ export function RoomTimeline({
   const [hideMembershipEvents] = useSetting(settingsAtom, 'hideMembershipEvents');
   const [hideNickAvatarEvents] = useSetting(settingsAtom, 'hideNickAvatarEvents');
   const [mediaAutoLoad] = useSetting(settingsAtom, 'mediaAutoLoad');
+  const [showBundledPreview] = useSetting(settingsAtom, 'bundledPreview');
   const [urlPreview] = useSetting(settingsAtom, 'urlPreview');
   const [encUrlPreview] = useSetting(settingsAtom, 'encUrlPreview');
   const [clientUrlPreview] = useSetting(settingsAtom, 'clientUrlPreview');
@@ -543,6 +544,7 @@ export function RoomTimeline({
       hour24Clock,
       dateFormatString,
       mediaAutoLoad,
+      showBundledPreview,
       showUrlPreview,
       showClientUrlPreview,
       autoplayStickers,
diff --git a/src/app/features/settings/general/General.tsx b/src/app/features/settings/general/General.tsx
index f7b8a6531..d2cdc0cc7 100644
--- a/src/app/features/settings/general/General.tsx
+++ b/src/app/features/settings/general/General.tsx
@@ -870,6 +870,7 @@ function Messages() {
     'hideNickAvatarEvents'
   );
   const [mediaAutoLoad, setMediaAutoLoad] = useSetting(settingsAtom, 'mediaAutoLoad');
+  const [bundledPreview, setBundledPreview] = useSetting(settingsAtom, 'bundledPreview');
   const [urlPreview, setUrlPreview] = useSetting(settingsAtom, 'urlPreview');
   const [encUrlPreview, setEncUrlPreview] = useSetting(settingsAtom, 'encUrlPreview');
   const [clientUrlPreview, setClientUrlPreview] = useSetting(settingsAtom, 'clientUrlPreview');
@@ -958,20 +959,29 @@ function Messages() {
       </SequenceCard>
       <SequenceCard className={SequenceCardStyle} variant="SurfaceVariant" direction="Column">
         <SettingTile
-          title="Url Preview"
+          title="Display Bundled Embeds"
+          description="Show embeds when provided by the message itself. The embeds may be fabricated or incorrect."
+          after={<Switch variant="Primary" value={bundledPreview} onChange={setBundledPreview} />}
+        />
+      </SequenceCard>
+      <SequenceCard className={SequenceCardStyle} variant="SurfaceVariant" direction="Column">
+        <SettingTile
+          title="Server-side Embeds"
+          description="Send the links from inside the messages to your homeserver to generate previews of the linked pages."
           after={<Switch variant="Primary" value={urlPreview} onChange={setUrlPreview} />}
         />
       </SequenceCard>
       <SequenceCard className={SequenceCardStyle} variant="SurfaceVariant" direction="Column">
         <SettingTile
-          title="Url Preview in Encrypted Room"
+          title="Server-side Embeds in Encrypted Room"
+          description="Request server-side embeds in E2EE chats. This partially decreases secrecy by revealing sent links to your homeserver"
           after={<Switch variant="Primary" value={encUrlPreview} onChange={setEncUrlPreview} />}
         />
       </SequenceCard>
       <SequenceCard className={SequenceCardStyle} variant="SurfaceVariant" direction="Column">
         <SettingTile
-          title="Client Side Embeds"
-          description="Attempt to preview unsupported urls (e.g. YouTube) on the client, without involving the homeserver. This will expose your IP Address to third party services."
+          title="Client-side Embeds"
+          description="Attempt to preview supported urls (e.g. YouTube) on the client, without involving the homeserver. This will expose your IP Address to third party services."
           after={
             <Switch
               variant="Primary"
@@ -989,7 +999,7 @@ function Messages() {
         style={clientUrlPreview ? {} : { display: 'none' }}
       >
         <SettingTile
-          title="Client Embeds in Encrypted Rooms"
+          title="Client-side Embeds in Encrypted Rooms"
           after={
             <Switch
               variant="Primary"
diff --git a/src/app/hooks/timeline/useTimelineEventRenderer.tsx b/src/app/hooks/timeline/useTimelineEventRenderer.tsx
index f7dca411a..6c5ce23f7 100644
--- a/src/app/hooks/timeline/useTimelineEventRenderer.tsx
+++ b/src/app/hooks/timeline/useTimelineEventRenderer.tsx
@@ -219,6 +219,7 @@ export interface TimelineEventRendererOptions {
     dateFormatString: string;
     mediaAutoLoad: boolean;
     showUrlPreview: boolean;
+    showBundledPreview: boolean;
     showClientUrlPreview: boolean;
     autoplayStickers: boolean;
     hideMemberInReadOnly: boolean;
@@ -272,6 +273,7 @@ export function useTimelineEventRenderer({
     hour24Clock,
     dateFormatString,
     mediaAutoLoad,
+    showBundledPreview,
     showUrlPreview,
     showClientUrlPreview,
     autoplayStickers,
@@ -451,6 +453,7 @@ export function useTimelineEventRenderer({
                 getContent={getContent}
                 mediaAutoLoad={mediaAutoLoad}
                 urlPreview={showUrlPreview}
+                bundledPreview={showBundledPreview}
                 clientUrlPreview={showClientUrlPreview}
                 htmlReactParserOptions={htmlReactParserOptions}
                 linkifyOpts={linkifyOpts}
@@ -613,6 +616,7 @@ export function useTimelineEventRenderer({
                       edited={!!editedEvent}
                       getContent={getContent}
                       mediaAutoLoad={mediaAutoLoad}
+                      bundledPreview={showBundledPreview}
                       urlPreview={showUrlPreview}
                       clientUrlPreview={showClientUrlPreview}
                       htmlReactParserOptions={htmlReactParserOptions}
diff --git a/src/app/state/settings.ts b/src/app/state/settings.ts
index 6c51cdb31..a708b5731 100644
--- a/src/app/state/settings.ts
+++ b/src/app/state/settings.ts
@@ -49,6 +49,7 @@ export interface Settings {
   legacyUsernameColor: boolean;
 
   mediaAutoLoad: boolean;
+  bundledPreview: boolean;
   urlPreview: boolean;
   encUrlPreview: boolean;
   clientUrlPreview: boolean;
@@ -140,6 +141,7 @@ const defaultSettings: Settings = {
   hideMembershipEvents: false,
   hideNickAvatarEvents: true,
   mediaAutoLoad: true,
+  bundledPreview: true,
   urlPreview: true,
   encUrlPreview: false,
   clientUrlPreview: false,