diff --git a/src/css/style.css b/src/css/style.css
index 35c836c..ae79c6e 100644
--- a/src/css/style.css
+++ b/src/css/style.css
@@ -40,6 +40,15 @@ h6 {
   font-family: var(--font-heading);
 }
 
+blockquote {
+  @apply relative mt-10 rounded-xl border-2 border-sky-500 ps-6 pe-6 font-normal text-slate-700 not-italic *:before:content-none *:after:content-none lg:ps-8 lg:pe-8 2xl:ps-10 2xl:pe-10 dark:text-slate-300;
+
+  &::before {
+    @apply absolute -top-8 left-4 block h-12 w-20 bg-slate-300 text-center text-8xl leading-none font-bold text-slate-300 not-italic content-['“'] dark:bg-slate-900 dark:text-slate-900;
+    -webkit-text-stroke: var(--color-sky-600) 0.25rem;
+  }
+}
+
 pre,
 code {
   font-family: var(--font-monospace);
diff --git a/src/layouts/blogpost.njk b/src/layouts/blogpost.njk
index 347a4f6..bfc24d2 100644
--- a/src/layouts/blogpost.njk
+++ b/src/layouts/blogpost.njk
@@ -31,7 +31,7 @@ layout: base.njk
     </div>
   </header>
 
-  <section class="mx-auto prose px-safe-offset-4 prose-slate md:prose-lg md:px-safe-offset-6 lg:prose-xl 2xl:prose-2xl dark:prose-invert prose-headings:font-normal prose-p:text-justify prose-blockquote:relative prose-blockquote:border-0 prose-blockquote:ps-16 prose-blockquote:font-normal prose-blockquote:text-slate-700 prose-blockquote:not-italic prose-blockquote:before:absolute prose-blockquote:before:top-0 prose-blockquote:before:left-0 prose-blockquote:before:-z-10 prose-blockquote:before:h-[1em] prose-blockquote:before:text-8xl prose-blockquote:before:leading-none prose-blockquote:before:font-bold prose-blockquote:before:text-sky-500 prose-blockquote:before:not-italic prose-blockquote:before:content-['“'] prose-blockquote:*:before:content-none prose-blockquote:*:after:content-none lg:prose-blockquote:ps-20 lg:prose-blockquote:before:text-9xl 2xl:prose-blockquote:ps-24 2xl:prose-blockquote:before:text-[10rem] prose-blockquote:dark:text-slate-300 prose-figcaption:text-center prose-figcaption:text-balance prose-strong:font-bold prose-strong:text-inherit prose-li:marker:text-inherit! prose-th:font-bold prose-img:mx-auto prose-img:rounded-3xl">
+  <section class="mx-auto prose px-safe-offset-4 prose-slate md:prose-lg md:px-safe-offset-6 lg:prose-xl 2xl:prose-2xl dark:prose-invert prose-headings:font-normal prose-p:text-justify prose-figcaption:text-center prose-figcaption:text-balance prose-strong:font-bold prose-strong:text-inherit prose-li:marker:text-inherit! prose-th:font-bold prose-img:mx-auto prose-img:rounded-3xl">
     {{ content | safe }}
   </section>
 </article>