diff --git a/ts/components/conversation/Quote.tsx b/ts/components/conversation/Quote.tsx
index 0193380ec..d5b4ce05e 100644
--- a/ts/components/conversation/Quote.tsx
+++ b/ts/components/conversation/Quote.tsx
@@ -1,6 +1,6 @@
 // tslint:disable:react-this-binding-issue
 
-import React from 'react';
+import React, { useState } from 'react';
 import classNames from 'classnames';
 
 import * as MIME from '../../../ts/types/MIME';
@@ -12,7 +12,9 @@ import { ContactName } from './ContactName';
 import { PubKey } from '../../session/types';
 import { ConversationTypeEnum } from '../../models/conversation';
 
-interface Props {
+import { useEncryptedFileFetch } from '../../hooks/useEncryptedFileFetch';
+
+interface QuoteProps {
   attachment?: QuotedAttachmentType;
   authorPhoneNumber: string;
   authorProfileName?: string;
@@ -25,15 +27,10 @@ interface Props {
   isPublic?: boolean;
   withContentAbove: boolean;
   onClick?: (e: any) => void;
-  onClose?: () => void;
   text: string;
   referencedMessageNotFound: boolean;
 }
 
-interface State {
-  imageBroken: boolean;
-}
-
 export interface QuotedAttachmentType {
   contentType: MIME.MIMEType;
   fileName: string;
@@ -48,7 +45,7 @@ interface Attachment {
   objectUrl?: string;
 }
 
-function validateQuote(quote: Props): boolean {
+function validateQuote(quote: QuoteProps): boolean {
   if (quote.text) {
     return true;
   }
@@ -92,30 +89,11 @@ function getTypeLabel({
 
   return;
 }
+export const QuoteIcon = (props: any) => {
+  const { icon } = props;
 
-export class Quote extends React.Component<Props, State> {
-  public handleImageErrorBound: () => void;
-
-  public constructor(props: Props) {
-    super(props);
-
-    this.handleImageErrorBound = this.handleImageError.bind(this);
-
-    this.state = {
-      imageBroken: false,
-    };
-  }
-
-  public handleImageError() {
-    // tslint:disable-next-line no-console
-    console.log('Message: Image failed to load; failing over to placeholder');
-    this.setState({
-      imageBroken: true,
-    });
-  }
-
-  public renderImage(url: string, i18n: LocalizerType, icon?: string) {
-    const iconElement = icon ? (
+  return (
+    <div className="module-quote__icon-container">
       <div className="module-quote__icon-container__inner">
         <div className="module-quote__icon-container__circle-background">
           <div
@@ -126,235 +104,236 @@ export class Quote extends React.Component<Props, State> {
           />
         </div>
       </div>
-    ) : null;
-
-    return (
-      <div className="module-quote__icon-container">
-        <img src={url} alt={i18n('quoteThumbnailAlt')} onError={this.handleImageErrorBound} />
-        {iconElement}
-      </div>
-    );
-  }
-
-  public renderIcon(icon: string) {
-    return (
-      <div className="module-quote__icon-container">
-        <div className="module-quote__icon-container__inner">
-          <div className="module-quote__icon-container__circle-background">
-            <div
-              className={classNames(
-                'module-quote__icon-container__icon',
-                `module-quote__icon-container__icon--${icon}`
-              )}
-            />
-          </div>
-        </div>
-      </div>
-    );
-  }
-
-  public renderGenericFile() {
-    const { attachment, isIncoming } = this.props;
+    </div>
+  );
+};
 
-    if (!attachment) {
-      return;
-    }
+export const QuoteImage = (props: any) => {
+  const { url, i18n, icon, contentType, handleImageErrorBound } = props;
 
-    const { fileName, contentType } = attachment;
-    const isGenericFile =
-      !GoogleChrome.isVideoTypeSupported(contentType) &&
-      !GoogleChrome.isImageTypeSupported(contentType) &&
-      !MIME.isAudio(contentType);
+  const { loading, urlToLoad } = useEncryptedFileFetch(url, contentType);
+  const srcData = !loading ? urlToLoad : '';
 
-    if (!isGenericFile) {
-      return null;
-    }
-
-    return (
-      <div className="module-quote__generic-file">
-        <div className="module-quote__generic-file__icon" />
+  const iconElement = icon ? (
+    <div className="module-quote__icon-container__inner">
+      <div className="module-quote__icon-container__circle-background">
         <div
           className={classNames(
-            'module-quote__generic-file__text',
-            isIncoming ? 'module-quote__generic-file__text--incoming' : null
+            'module-quote__icon-container__icon',
+            `module-quote__icon-container__icon--${icon}`
           )}
-        >
-          {fileName}
-        </div>
+        />
       </div>
-    );
+    </div>
+  ) : null;
+
+  return (
+    <div className="module-quote__icon-container">
+      <img src={srcData} alt={i18n('quoteThumbnailAlt')} onError={handleImageErrorBound} />
+      {iconElement}
+    </div>
+  );
+};
+
+export const QuoteGenericFile = (props: any) => {
+  const { attachment, isIncoming } = props;
+
+  if (!attachment) {
+    return <></>;
   }
 
-  public renderIconContainer() {
-    const { attachment, i18n } = this.props;
-    const { imageBroken } = this.state;
-
-    if (!attachment) {
-      return null;
-    }
-
-    const { contentType, thumbnail } = attachment;
-    const objectUrl = getObjectUrl(thumbnail);
-
-    if (GoogleChrome.isVideoTypeSupported(contentType)) {
-      return objectUrl && !imageBroken
-        ? this.renderImage(objectUrl, i18n, 'play')
-        : this.renderIcon('movie');
-    }
-    if (GoogleChrome.isImageTypeSupported(contentType)) {
-      return objectUrl && !imageBroken
-        ? this.renderImage(objectUrl, i18n)
-        : this.renderIcon('image');
-    }
-    if (MIME.isAudio(contentType)) {
-      return this.renderIcon('microphone');
-    }
+  const { fileName, contentType } = attachment;
+  const isGenericFile =
+    !GoogleChrome.isVideoTypeSupported(contentType) &&
+    !GoogleChrome.isImageTypeSupported(contentType) &&
+    !MIME.isAudio(contentType);
 
-    return null;
+  if (!isGenericFile) {
+    return <></>;
   }
 
-  public renderText() {
-    const { i18n, text, attachment, isIncoming, conversationType, convoId } = this.props;
-
-    if (text) {
-      return (
-        <div
-          dir="auto"
-          className={classNames(
-            'module-quote__primary__text',
-            isIncoming ? 'module-quote__primary__text--incoming' : null
-          )}
-        >
-          <MessageBody
-            isGroup={conversationType === 'group'}
-            convoId={convoId}
-            text={text}
-            disableLinks={true}
-            i18n={i18n}
-          />
-        </div>
-      );
-    }
-
-    if (!attachment) {
-      return null;
-    }
+  return (
+    <div className="module-quote__generic-file">
+      <div className="module-quote__generic-file__icon" />
+      <div
+        className={classNames(
+          'module-quote__generic-file__text',
+          isIncoming ? 'module-quote__generic-file__text--incoming' : null
+        )}
+      >
+        {fileName}
+      </div>
+    </div>
+  );
+};
 
-    const { contentType, isVoiceMessage } = attachment;
-
-    const typeLabel = getTypeLabel({ i18n, contentType, isVoiceMessage });
-    if (typeLabel) {
-      return (
-        <div
-          className={classNames(
-            'module-quote__primary__type-label',
-            isIncoming ? 'module-quote__primary__type-label--incoming' : null
-          )}
-        >
-          {typeLabel}
-        </div>
-      );
-    }
+export const QuoteIconContainer = (props: any) => {
+  const { attachment, i18n, imageBroken, handleImageErrorBound } = props;
 
+  if (!attachment) {
     return null;
   }
 
-  public renderClose() {
-    const { onClose } = this.props;
+  const { contentType, thumbnail } = attachment;
+  const objectUrl = getObjectUrl(thumbnail);
 
-    if (!onClose) {
-      return null;
-    }
+  if (GoogleChrome.isVideoTypeSupported(contentType)) {
+    return objectUrl && !imageBroken ? (
+      <QuoteImage url={objectUrl} i18n={i18n} icon={'play'} />
+    ) : (
+      <QuoteIcon icon="movie" />
+    );
+  }
+  if (GoogleChrome.isImageTypeSupported(contentType)) {
+    return objectUrl && !imageBroken ? (
+      <QuoteImage
+        url={objectUrl}
+        i18n={i18n}
+        contentType={contentType}
+        handleImageErrorBound={handleImageErrorBound}
+      />
+    ) : (
+      <QuoteIcon icon="image" />
+    );
+  }
+  if (MIME.isAudio(contentType)) {
+    return <QuoteIcon icon="microphone" />;
+  }
+  return null;
+};
 
-    // We don't want the overall click handler for the quote to fire, so we stop
-    //   propagation before handing control to the caller's callback.
-    const onClick = (e: any): void => {
-      e.stopPropagation();
-      onClose();
-    };
+export const QuoteText = (props: any) => {
+  const { i18n, text, attachment, isIncoming, conversationType, convoId } = props;
+  const isGroup = conversationType === ConversationTypeEnum.GROUP;
 
-    // We need the container to give us the flexibility to implement the iOS design.
+  if (text) {
     return (
-      <div className="module-quote__close-container">
-        <div className="module-quote__close-button" role="button" onClick={onClick} />
+      <div
+        dir="auto"
+        className={classNames(
+          'module-quote__primary__text',
+          isIncoming ? 'module-quote__primary__text--incoming' : null
+        )}
+      >
+        <MessageBody
+          isGroup={isGroup}
+          convoId={convoId}
+          text={text}
+          disableLinks={true}
+          i18n={i18n}
+        />
       </div>
     );
   }
 
-  public renderAuthor() {
-    const {
-      authorProfileName,
-      authorPhoneNumber,
-      authorName,
-      i18n,
-      isFromMe,
-      isIncoming,
-      isPublic,
-    } = this.props;
+  if (!attachment) {
+    return null;
+  }
+
+  const { contentType, isVoiceMessage } = attachment;
 
+  const typeLabel = getTypeLabel({ i18n, contentType, isVoiceMessage });
+  if (typeLabel) {
     return (
       <div
         className={classNames(
-          'module-quote__primary__author',
-          isIncoming ? 'module-quote__primary__author--incoming' : null
+          'module-quote__primary__type-label',
+          isIncoming ? 'module-quote__primary__type-label--incoming' : null
         )}
       >
-        {isFromMe ? (
-          i18n('you')
-        ) : (
-          <ContactName
-            phoneNumber={PubKey.shorten(authorPhoneNumber)}
-            name={authorName}
-            profileName={authorProfileName}
-            i18n={i18n}
-            compact={true}
-            shouldShowPubkey={Boolean(isPublic)}
-          />
-        )}
+        {typeLabel}
       </div>
     );
   }
 
-  public renderReferenceWarning() {
-    const { i18n, isIncoming, referencedMessageNotFound } = this.props;
+  return null;
+};
+
+export const QuoteAuthor = (props: any) => {
+  const {
+    authorProfileName,
+    authorPhoneNumber,
+    authorName,
+    i18n,
+    isFromMe,
+    isIncoming,
+    isPublic,
+  } = props;
+
+  return (
+    <div
+      className={classNames(
+        'module-quote__primary__author',
+        isIncoming ? 'module-quote__primary__author--incoming' : null
+      )}
+    >
+      {isFromMe ? (
+        i18n('you')
+      ) : (
+        <ContactName
+          phoneNumber={PubKey.shorten(authorPhoneNumber)}
+          name={authorName}
+          profileName={authorProfileName}
+          i18n={i18n}
+          compact={true}
+          shouldShowPubkey={Boolean(isPublic)}
+        />
+      )}
+    </div>
+  );
+};
 
-    if (!referencedMessageNotFound) {
-      return null;
-    }
+export const QuoteReferenceWarning = (props: any) => {
+  const { i18n, isIncoming, referencedMessageNotFound } = props;
 
-    return (
+  if (!referencedMessageNotFound) {
+    return null;
+  }
+
+  return (
+    <div
+      className={classNames(
+        'module-quote__reference-warning',
+        isIncoming ? 'module-quote__reference-warning--incoming' : null
+      )}
+    >
       <div
         className={classNames(
-          'module-quote__reference-warning',
-          isIncoming ? 'module-quote__reference-warning--incoming' : null
+          'module-quote__reference-warning__icon',
+          isIncoming ? 'module-quote__reference-warning__icon--incoming' : null
+        )}
+      />
+      <div
+        className={classNames(
+          'module-quote__reference-warning__text',
+          isIncoming ? 'module-quote__reference-warning__text--incoming' : null
         )}
       >
-        <div
-          className={classNames(
-            'module-quote__reference-warning__icon',
-            isIncoming ? 'module-quote__reference-warning__icon--incoming' : null
-          )}
-        />
-        <div
-          className={classNames(
-            'module-quote__reference-warning__text',
-            isIncoming ? 'module-quote__reference-warning__text--incoming' : null
-          )}
-        >
-          {i18n('originalMessageNotFound')}
-        </div>
+        {i18n('originalMessageNotFound')}
       </div>
-    );
-  }
+    </div>
+  );
+};
 
-  public render() {
-    const { isIncoming, onClick, referencedMessageNotFound, withContentAbove } = this.props;
+export const Quote = (props: QuoteProps) => {
+  const [imageBroken, setImageBroken] = useState(false);
 
-    if (!validateQuote(this.props)) {
-      return null;
-    }
+  const handleImageErrorBound = null;
 
-    return (
+  const handleImageError = () => {
+    // tslint:disable-next-line no-console
+    console.log('Message: Image failed to load; failing over to placeholder');
+    setImageBroken(true);
+  };
+
+  const { isIncoming, onClick, referencedMessageNotFound, withContentAbove } = props;
+
+  if (!validateQuote(props)) {
+    return null;
+  }
+
+  return (
+    <>
       <div
         className={classNames(
           'module-quote-container',
@@ -373,15 +352,14 @@ export class Quote extends React.Component<Props, State> {
           )}
         >
           <div className="module-quote__primary">
-            {this.renderAuthor()}
-            {this.renderGenericFile()}
-            {this.renderText()}
+            <QuoteAuthor {...props} />
+            <QuoteGenericFile {...props} />
+            <QuoteText {...props} />
           </div>
-          {this.renderIconContainer()}
-          {this.renderClose()}
+          <QuoteIconContainer {...props} handleImageErrorBound={handleImageErrorBound} />
         </div>
-        {this.renderReferenceWarning()}
+        <QuoteReferenceWarning {...props} />
       </div>
-    );
-  }
-}
+    </>
+  );
+};
diff --git a/ts/components/session/conversation/SessionQuotedMessageComposition.tsx b/ts/components/session/conversation/SessionQuotedMessageComposition.tsx
index 8a7a2a240..140c37d2d 100644
--- a/ts/components/session/conversation/SessionQuotedMessageComposition.tsx
+++ b/ts/components/session/conversation/SessionQuotedMessageComposition.tsx
@@ -1,8 +1,10 @@
 import React, { useContext } from 'react';
 import { Flex } from '../../basic/Flex';
-import { SessionIconButton, SessionIconSize, SessionIconType } from '../icon';
+import { SessionIcon, SessionIconButton, SessionIconSize, SessionIconType } from '../icon';
 import { ReplyingToMessageProps } from './SessionCompositionBox';
 import styled, { DefaultTheme, ThemeContext } from 'styled-components';
+import { getAlt, isAudio, isImageAttachment } from '../../../types/Attachment';
+import { Image } from '../../conversation/Image';
 
 // tslint:disable: react-unused-props-and-state
 interface Props {
@@ -44,6 +46,18 @@ export const SessionQuotedMessageComposition = (props: Props) => {
 
   const { text: body, attachments } = quotedMessageProps;
   const hasAttachments = attachments && attachments.length > 0;
+
+  let hasImageAttachment = false;
+
+  let firstImageAttachment;
+  if (attachments && attachments.length > 0) {
+    firstImageAttachment = attachments[0];
+    hasImageAttachment = true;
+  }
+
+  const hasAudioAttachment =
+    hasAttachments && attachments && attachments.length > 0 && isAudio(attachments);
+
   return (
     <QuotedMessageComposition theme={theme}>
       <Flex
@@ -61,7 +75,32 @@ export const SessionQuotedMessageComposition = (props: Props) => {
         />
       </Flex>
       <QuotedMessageCompositionReply>
-        <Subtle>{(hasAttachments && window.i18n('mediaMessage')) || body}</Subtle>
+        <Flex container={true} justifyContent="space-between" margin={theme.common.margins.xs}>
+          <Subtle>{(hasAttachments && window.i18n('mediaMessage')) || body}</Subtle>
+
+          {hasImageAttachment && (
+            <Image
+              alt={getAlt(firstImageAttachment, window.i18n)}
+              i18n={window.i18n}
+              attachment={firstImageAttachment}
+              height={100}
+              width={100}
+              curveTopLeft={true}
+              curveTopRight={true}
+              curveBottomLeft={true}
+              curveBottomRight={true}
+              url={firstImageAttachment.thumbnail.objectUrl}
+            />
+          )}
+
+          {hasAudioAttachment && (
+            <SessionIcon
+              iconType={SessionIconType.Microphone}
+              iconSize={SessionIconSize.Huge}
+              theme={theme}
+            />
+          )}
+        </Flex>
       </QuotedMessageCompositionReply>
     </QuotedMessageComposition>
   );
diff --git a/ts/receiver/queuedJob.ts b/ts/receiver/queuedJob.ts
index 23ca84dbd..195a1ad0e 100644
--- a/ts/receiver/queuedJob.ts
+++ b/ts/receiver/queuedJob.ts
@@ -79,7 +79,7 @@ async function handleGroups(
   return groupUpdate;
 }
 
-function contentTypeSupported(type: any): boolean {
+function contentTypeSupported(type: string): boolean {
   const Chrome = window.Signal.Util.GoogleChrome;
   return Chrome.isImageTypeSupported(type) || Chrome.isVideoTypeSupported(type);
 }
@@ -139,7 +139,7 @@ async function copyFromQuotedMessage(
     return;
   }
 
-  if (!firstAttachment || !contentTypeSupported(firstAttachment)) {
+  if (!firstAttachment || !contentTypeSupported(firstAttachment.contentType)) {
     return;
   }