diff --git a/package.json b/package.json
index cb17d44351c..9a2c2b9265c 100644
--- a/package.json
+++ b/package.json
@@ -57,7 +57,7 @@
     "dependencies": {
         "@babel/runtime": "^7.12.5",
         "@matrix-org/analytics-events": "^0.4.0",
-        "@matrix-org/matrix-wysiwyg": "^0.19.0",
+        "@matrix-org/matrix-wysiwyg": "^0.20.0",
         "@matrix-org/react-sdk-module-api": "^0.0.3",
         "@sentry/browser": "^7.0.0",
         "@sentry/tracing": "^7.0.0",
diff --git a/res/css/views/rooms/wysiwyg_composer/components/_Editor.pcss b/res/css/views/rooms/wysiwyg_composer/components/_Editor.pcss
index 21db71a774b..cc805e1ac1e 100644
--- a/res/css/views/rooms/wysiwyg_composer/components/_Editor.pcss
+++ b/res/css/views/rooms/wysiwyg_composer/components/_Editor.pcss
@@ -44,9 +44,21 @@ limitations under the License.
             padding-inline-start: $spacing-28;
         }
 
+        blockquote {
+            color: #777;
+            border-left: 2px solid $blockquote-bar-color;
+            border-radius: 2px;
+            padding: 0 10px;
+
+            margin-block-start: 0;
+            margin-block-end: 0;
+            margin-inline-start: 0;
+            margin-inline-end: 0;
+        }
+
         // model output always includes a linebreak but we do not want the user
         // to see it when writing input in lists
-        :is(ol, ul, pre) + br:last-of-type {
+        :is(ol, ul, pre, blockquote) + br:last-of-type {
             display: none;
         }
 
diff --git a/res/img/element-icons/room/composer/quote.svg b/res/img/element-icons/room/composer/quote.svg
new file mode 100644
index 00000000000..82cc2d28752
--- /dev/null
+++ b/res/img/element-icons/room/composer/quote.svg
@@ -0,0 +1,6 @@
+<svg width="14" height="12" viewBox="0 0 14 12" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M2.1458 0.893371C2.20888 0.465499 1.90205 0.0690897 1.46046 0.00796516C1.01887 -0.0531594 0.609758 0.244148 0.546674 0.67202L0.00822047 4.32413C-0.0548633 4.752 0.251974 5.14841 0.69356 5.20954C1.13515 5.27066 1.54426 4.97336 1.60735 4.54548L2.1458 0.893371Z" fill="currentColor"/>
+<path d="M10.2226 7.67587C10.2857 7.248 9.97885 6.85159 9.53726 6.79046C9.09568 6.72934 8.68656 7.02664 8.62348 7.45452L8.08502 11.1066C8.02194 11.5345 8.32878 11.9309 8.77036 11.992C9.21195 12.0532 9.62107 11.7559 9.68415 11.328L10.2226 7.67587Z" fill="currentColor"/>
+<path d="M5.21224 0.00574343C5.65509 0.0575575 5.97074 0.447414 5.91727 0.876513L5.90255 0.993287C5.89309 1.06788 5.87936 1.17541 5.86224 1.30757C5.828 1.57178 5.78013 1.93492 5.72561 2.33035C5.6179 3.11153 5.48009 4.04989 5.36895 4.58829C5.28147 5.01211 4.85597 5.28697 4.41856 5.20221C3.98115 5.11744 3.69748 4.70515 3.78496 4.28133C3.88411 3.80099 4.01552 2.91329 4.12447 2.12309C4.17828 1.73284 4.22559 1.37397 4.25946 1.11259C4.27639 0.981947 4.28994 0.875787 4.29925 0.802389L4.31351 0.689266C4.36698 0.260167 4.76938 -0.0460706 5.21224 0.00574343Z" fill="currentColor"/>
+<path d="M13.9918 7.67587C14.0549 7.248 13.748 6.85159 13.3064 6.79046C12.8649 6.72934 12.4557 7.02664 12.3927 7.45452L11.8542 11.1066C11.7911 11.5345 12.098 11.9309 12.5395 11.992C12.9811 12.0532 13.3902 11.7559 13.4533 11.328L13.9918 7.67587Z" fill="currentColor"/>
+</svg>
diff --git a/src/components/views/rooms/wysiwyg_composer/components/FormattingButtons.tsx b/src/components/views/rooms/wysiwyg_composer/components/FormattingButtons.tsx
index c80857b9f16..80f2563d1d8 100644
--- a/src/components/views/rooms/wysiwyg_composer/components/FormattingButtons.tsx
+++ b/src/components/views/rooms/wysiwyg_composer/components/FormattingButtons.tsx
@@ -22,6 +22,7 @@ import { Icon as BoldIcon } from "../../../../../../res/img/element-icons/room/c
 import { Icon as ItalicIcon } from "../../../../../../res/img/element-icons/room/composer/italic.svg";
 import { Icon as UnderlineIcon } from "../../../../../../res/img/element-icons/room/composer/underline.svg";
 import { Icon as StrikeThroughIcon } from "../../../../../../res/img/element-icons/room/composer/strikethrough.svg";
+import { Icon as QuoteIcon } from "../../../../../../res/img/element-icons/room/composer/quote.svg";
 import { Icon as InlineCodeIcon } from "../../../../../../res/img/element-icons/room/composer/inline_code.svg";
 import { Icon as LinkIcon } from "../../../../../../res/img/element-icons/room/composer/link.svg";
 import { Icon as BulletedListIcon } from "../../../../../../res/img/element-icons/room/composer/bulleted_list.svg";
@@ -126,6 +127,12 @@ export function FormattingButtons({ composer, actionStates }: FormattingButtonsP
                 onClick={() => composer.orderedList()}
                 icon={<NumberedListIcon className="mx_FormattingButtons_Icon" />}
             />
+            <Button
+                actionState={actionStates.quote}
+                label={_td("Quote")}
+                onClick={() => composer.quote()}
+                icon={<QuoteIcon className="mx_FormattingButtons_Icon" />}
+            />
             <Button
                 actionState={actionStates.inlineCode}
                 label={_td("Code")}
diff --git a/test/components/views/rooms/wysiwyg_composer/components/FormattingButtons-test.tsx b/test/components/views/rooms/wysiwyg_composer/components/FormattingButtons-test.tsx
index adee606ac51..1d9faa02712 100644
--- a/test/components/views/rooms/wysiwyg_composer/components/FormattingButtons-test.tsx
+++ b/test/components/views/rooms/wysiwyg_composer/components/FormattingButtons-test.tsx
@@ -32,6 +32,7 @@ const mockWysiwyg = {
     link: jest.fn(),
     orderedList: jest.fn(),
     unorderedList: jest.fn(),
+    quote: jest.fn(),
 } as unknown as FormattingFunctions;
 
 const openLinkModalSpy = jest.spyOn(LinkModal, "openLinkModal");
@@ -49,6 +50,7 @@ const testCases: Record<
     link: { label: "Link", mockFormatFn: openLinkModalSpy },
     orderedList: { label: "Numbered list", mockFormatFn: mockWysiwyg.orderedList },
     unorderedList: { label: "Bulleted list", mockFormatFn: mockWysiwyg.unorderedList },
+    quote: { label: "Quote", mockFormatFn: mockWysiwyg.quote },
 };
 
 const createActionStates = (state: ActionState): AllActionStates => {
diff --git a/yarn.lock b/yarn.lock
index c90986604e2..e39b0a43f84 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1589,10 +1589,10 @@
   resolved "https://registry.yarnpkg.com/@matrix-org/matrix-sdk-crypto-js/-/matrix-sdk-crypto-js-0.1.0-alpha.2.tgz#a09d0fea858e817da971a3c9f904632ef7b49eb6"
   integrity sha512-oVkBCh9YP7H9i4gAoQbZzswniczfo/aIptNa4dxRi4Ff9lSvUCFv6Hvzi7C+90c0/PWZLXjIDTIAWZYmwyd2fA==
 
-"@matrix-org/matrix-wysiwyg@^0.19.0":
-  version "0.19.0"
-  resolved "https://registry.yarnpkg.com/@matrix-org/matrix-wysiwyg/-/matrix-wysiwyg-0.19.0.tgz#5ffbabf8a59317ecdb45ba5fa1d06fff150ede40"
-  integrity sha512-1iL/+kjwWAlpWAq64DbkDkE7KGxvR5lNojZgCKMIyuvuKWv8Ikqxa9VOOYFtovKvSqgGRJaYN7/OkKWxZjiDcw==
+"@matrix-org/matrix-wysiwyg@^0.20.0":
+  version "0.20.0"
+  resolved "https://registry.yarnpkg.com/@matrix-org/matrix-wysiwyg/-/matrix-wysiwyg-0.20.0.tgz#6193f790b031eaa96e944b647fe2b27018639d57"
+  integrity sha512-9VqzyccwizglssShi/M+tCxdZDgzsecH4WjlS0HC5KkLmljIxxlHFstf/D3C/G4ZfRodFUh6wUvd+oQI/ScPpw==
 
 "@matrix-org/olm@https://gitlab.matrix.org/api/v4/projects/27/packages/npm/@matrix-org/olm/-/@matrix-org/olm-3.2.14.tgz":
   version "3.2.14"