diff --git a/apps/blog/src/assets/quote.svg b/apps/blog/src/assets/quote.svg
new file mode 100644
index 00000000..9a39e307
--- /dev/null
+++ b/apps/blog/src/assets/quote.svg
@@ -0,0 +1,5 @@
+<svg width="24" height="20" viewBox="0 0 24 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="Quote">
+<path id="&#226;&#128;&#156;" d="M18.6186 20C16.8866 20 15.5052 19.3682 14.4742 18.1046C13.4433 16.7974 12.9278 15.0327 12.9278 12.8105C12.9278 10.0218 13.7732 7.47277 15.4639 5.1634C17.1546 2.85403 20 1.1329 24 0V3.39869C22.8041 3.83442 21.7938 4.29194 20.9691 4.77124C20.1856 5.20697 19.5876 5.72985 19.1753 6.33987C18.7629 6.90632 18.5567 7.62527 18.5567 8.49673C18.5567 8.97604 18.701 9.36819 18.9897 9.6732C19.3196 9.97821 19.7113 10.2614 20.1649 10.5229C20.6186 10.7843 21.0515 11.1111 21.4639 11.5033C21.9175 11.8519 22.2887 12.3529 22.5773 13.0065C22.9072 13.6166 23.0722 14.4444 23.0722 15.4902C23.0722 16.9717 22.6392 18.1046 21.7732 18.8889C20.9485 19.6296 19.8969 20 18.6186 20ZM5.69072 20C3.95876 20 2.57732 19.3682 1.54639 18.1046C0.515464 16.7974 0 15.0327 0 12.8105C0 10.0218 0.845361 7.47277 2.53608 5.1634C4.2268 2.85403 7.07217 1.1329 11.0722 0V3.39869C9.87629 3.83442 8.86598 4.29194 8.04124 4.77124C7.25773 5.20697 6.65979 5.72985 6.24742 6.33987C5.83505 6.90632 5.62886 7.62527 5.62886 8.49673C5.62886 8.97604 5.77319 9.36819 6.06186 9.6732C6.39175 9.97821 6.76289 10.2614 7.17526 10.5229C7.62887 10.7843 8.08247 11.1111 8.53608 11.5033C8.98969 11.8519 9.36082 12.3529 9.64948 13.0065C9.97938 13.6166 10.1443 14.4444 10.1443 15.4902C10.1443 16.9717 9.71134 18.1046 8.84536 18.8889C8.02062 19.6296 6.96907 20 5.69072 20Z" fill="#FCE26B"/>
+</g>
+</svg>
diff --git a/apps/blog/src/components/Blockquote/Blockquote.tsx b/apps/blog/src/components/Blockquote/Blockquote.tsx
new file mode 100644
index 00000000..0d1aafd1
--- /dev/null
+++ b/apps/blog/src/components/Blockquote/Blockquote.tsx
@@ -0,0 +1,8 @@
+export function Blockquote(props: React.BlockquoteHTMLAttributes<HTMLQuoteElement>) {
+  return (
+    <blockquote
+      className="relative border-none font-semibold not-italic pl-[2.5em] lg:pl-[2em] before:content-quote before:absolute before:left-[0]"
+      {...props}
+    />
+  )
+}
diff --git a/apps/blog/src/components/Blockquote/index.ts b/apps/blog/src/components/Blockquote/index.ts
new file mode 100644
index 00000000..5398e220
--- /dev/null
+++ b/apps/blog/src/components/Blockquote/index.ts
@@ -0,0 +1 @@
+export { Blockquote } from './Blockquote'
diff --git a/apps/blog/src/components/Mdx/Mdx.tsx b/apps/blog/src/components/Mdx/Mdx.tsx
index 6e660833..e50a7074 100644
--- a/apps/blog/src/components/Mdx/Mdx.tsx
+++ b/apps/blog/src/components/Mdx/Mdx.tsx
@@ -3,12 +3,13 @@ import Image from 'next/image'
 import { useMDXComponent } from 'next-contentlayer/hooks'
 import InstagramPost from '../InstagramPost'
 import { ExternalLink } from '../ExternalLink'
+import { Blockquote } from '../Blockquote'
 
 interface MdxProps {
   code: string
 }
 
-const components = { Image: (props: ImageProps) => <Image {...props} />, InstagramPost, a: ExternalLink }
+const components = { Image: (props: ImageProps) => <Image {...props} />, InstagramPost, a: ExternalLink, blockquote: Blockquote }
 
 export function Mdx({ code }: MdxProps) {
   const Component = useMDXComponent(code)
diff --git a/apps/blog/tailwind.config.js b/apps/blog/tailwind.config.js
index 774b7eee..fc28d181 100644
--- a/apps/blog/tailwind.config.js
+++ b/apps/blog/tailwind.config.js
@@ -44,11 +44,14 @@ module.exports = {
       },
       content: {
         externalLink: 'url("../../assets/ext-link-icon.svg")',
+        quote: 'url("../../assets/quote.svg")',
       },
       typography: {
         DEFAULT: {
           css: {
-            blockquote: { quotes: 'auto' },
+            blockquote: {
+              quotes: 'auto',
+            },
           },
         },
       },