diff --git a/src/skins/vector/css/_components.scss b/src/skins/vector/css/_components.scss
index 0dd6a1b1b..016658514 100644
--- a/src/skins/vector/css/_components.scss
+++ b/src/skins/vector/css/_components.scss
@@ -70,6 +70,7 @@
 @import "./matrix-react-sdk/views/rooms/_RoomTile.scss";
 @import "./matrix-react-sdk/views/rooms/_SearchableEntityList.scss";
 @import "./matrix-react-sdk/views/rooms/_TopUnreadMessagesBar.scss";
+@import "./matrix-react-sdk/views/rooms/_QuotePreview.scss";
 @import "./matrix-react-sdk/views/settings/_DevicesPanel.scss";
 @import "./matrix-react-sdk/views/settings/_IntegrationsManager.scss";
 @import "./matrix-react-sdk/views/voip/_CallView.scss";
diff --git a/src/skins/vector/css/matrix-react-sdk/views/rooms/_Autocomplete.scss b/src/skins/vector/css/matrix-react-sdk/views/rooms/_Autocomplete.scss
index 8ce81c0de..732ada088 100644
--- a/src/skins/vector/css/matrix-react-sdk/views/rooms/_Autocomplete.scss
+++ b/src/skins/vector/css/matrix-react-sdk/views/rooms/_Autocomplete.scss
@@ -11,20 +11,7 @@
     overflow: auto
 }
 
-.mx_Quoting {
-    position: absolute;
-    bottom: 0;
-    z-index: 1000;
-    width: 100%;
-    border: 1px solid $primary-hairline-color;
-    background: $primary-bg-color;
-    border-bottom: none;
-    border-radius: 4px 4px 0 0;
-    max-height: 50vh;
-    overflow: auto
-}
-
-.mx_Autocomplete_ProviderSection, .mx_Quoting_section {
+.mx_Autocomplete_ProviderSection {
     border-bottom: 1px solid $primary-hairline-color;
 }
 
@@ -87,25 +74,13 @@
     outline: none;
 }
 
-.mx_Autocomplete_provider_name, .mx_Quoting_header {
+.mx_Autocomplete_provider_name {
     margin: 12px;
     color: $primary-fg-color;
     font-weight: 400;
     opacity: 0.4;
 }
 
-.mx_Quoting_title {
-    float: left;
-}
-
-.mx_Quoting_cancel {
-    float: right;
-}
-
-.mx_Quoting_clear {
-    clear: both;
-}
-
 /* styling for common completion elements */
 .mx_Autocomplete_Completion_subtitle {
     font-style: italic;
@@ -115,3 +90,4 @@
 .mx_Autocomplete_Completion_description {
     color: gray;
 }
+
diff --git a/src/skins/vector/css/matrix-react-sdk/views/rooms/_QuotePreview.scss b/src/skins/vector/css/matrix-react-sdk/views/rooms/_QuotePreview.scss
new file mode 100644
index 000000000..f0fb62b8e
--- /dev/null
+++ b/src/skins/vector/css/matrix-react-sdk/views/rooms/_QuotePreview.scss
@@ -0,0 +1,35 @@
+.mx_QuotePreview {
+    position: absolute;
+    bottom: 0;
+    z-index: 1000;
+    width: 100%;
+    border: 1px solid $primary-hairline-color;
+    background: $primary-bg-color;
+    border-bottom: none;
+    border-radius: 4px 4px 0 0;
+    max-height: 50vh;
+    overflow: auto
+}
+
+.mx_QuotePreview_section {
+    border-bottom: 1px solid $primary-hairline-color;
+}
+
+.mx_QuotePreview_header {
+    margin: 12px;
+    color: $primary-fg-color;
+    font-weight: 400;
+    opacity: 0.4;
+}
+
+.mx_QuotePreview_title {
+    float: left;
+}
+
+.mx_QuotePreview_cancel {
+    float: right;
+}
+
+.mx_QuotePreview_clear {
+    clear: both;
+}