diff --git a/packages/markups/src/blocks/QuoteBlock.js b/packages/markups/src/blocks/QuoteBlock.js
index 3717ab150a..8d2d171257 100644
--- a/packages/markups/src/blocks/QuoteBlock.js
+++ b/packages/markups/src/blocks/QuoteBlock.js
@@ -1,14 +1,25 @@
 import React from 'react';
 import PropTypes from 'prop-types';
+import { useTheme } from '@embeddedchat/ui-elements';
+import { css } from '@emotion/react';
 import ParagraphBlock from './ParagraphBlock';
 
-const QuoteBlock = ({ contents }) => (
-  <blockquote>
-    {contents.map((paragraph, index) => (
-      <ParagraphBlock key={index} contents={paragraph.value} />
-    ))}
-  </blockquote>
-);
+const QuoteBlock = ({ contents }) => {
+  const { theme } = useTheme();
+  return (
+    <blockquote
+      css={css`
+        background-color: ${theme.colors.secondary};
+        border-left: 1.7px solid ${theme.colors.primary};
+        padding-left: 0.5rem;
+      `}
+    >
+      {contents.map((paragraph, index) => (
+        <ParagraphBlock key={index} contents={paragraph.value} />
+      ))}
+    </blockquote>
+  );
+};
 
 export default QuoteBlock;
 
diff --git a/packages/markups/src/elements/PlainSpan.js b/packages/markups/src/elements/PlainSpan.js
index cc52613c02..15b4256a81 100644
--- a/packages/markups/src/elements/PlainSpan.js
+++ b/packages/markups/src/elements/PlainSpan.js
@@ -1,8 +1,25 @@
 import React from 'react';
 import PropTypes from 'prop-types';
+import { css } from '@emotion/react';
+import { useTheme } from '@embeddedchat/ui-elements';
 
-const PlainSpan = ({ contents }) => <>{contents}</>;
-
+const PlainSpan = ({ contents }) => {
+  const { theme } = useTheme();
+  if (contents === '>') {
+    return (
+      <blockquote
+        css={css`
+          background-color: ${theme.colors.secondary};
+          border-left: 1.7px solid ${theme.colors.primary};
+          padding-left: 0.5rem;
+        `}
+      >
+        &nbsp;
+      </blockquote>
+    );
+  }
+  return <>{contents}</>;
+};
 export default PlainSpan;
 
 PlainSpan.propTypes = {