diff --git a/opentech/static_src/src/sass/components/_blockquote.scss b/opentech/static_src/src/sass/components/_blockquote.scss
index c6b291b0dffac1e85bd74cf14440ab8e23e7f50f..b836e0ab8a6176bf4bad9f444743358cd9869063 100644
--- a/opentech/static_src/src/sass/components/_blockquote.scss
+++ b/opentech/static_src/src/sass/components/_blockquote.scss
@@ -1,6 +1,25 @@
-blockquote {
-    padding: 1rem;
-    margin: 1rem 0;
-    background: $color--tertiary;
-    border-left: 10px solid $color--secondary;
+.blockquote {
+    @extend %h3;
+    position: relative;
+    font-weight: $weight--black;
+    text-align: center;
+
+    &__cite,
+    &__job-title {
+        @include responsive-font-sizes(15px, 17px);
+        display: block;
+        font-style: normal;
+        color: $color--darkest-blue;
+        text-transform: uppercase;
+    }
+
+    &__cite {
+        h5 {
+            margin: 0;
+        }
+    }
+
+    &__job-title {
+        font-weight: $weight--normal;
+    }
 }
diff --git a/opentech/static_src/src/sass/components/_wrapper.scss b/opentech/static_src/src/sass/components/_wrapper.scss
index 66af824b9e4fca032d1d5b37f337729ae20b0316..c6124e30a771f88686b9741014c2a1e9497eff01 100644
--- a/opentech/static_src/src/sass/components/_wrapper.scss
+++ b/opentech/static_src/src/sass/components/_wrapper.scss
@@ -19,6 +19,61 @@
     &--flex {
         display: flex;
         flex-direction: column;
+    &--breakout {
+        position: relative;
+        right: 50%;
+        left: 50%;
+        width: 100vw;
+        margin-right: -50vw;
+        margin-left: -50vw;
+    }
+
+    &--blockquote {
+        padding: 1rem 0;
+        margin-top: 2rem;
+        margin-bottom: 2rem;
+        background: $color--light-grey;
+
+        @include media-query(tablet-portrait) {
+            padding: 4rem 0;
+            margin-top: 4rem;
+            margin-bottom: 4rem;
+        }
+
+        svg {
+            position: absolute;
+            display: none;
+            width: 110px;
+            height: 110px;
+            fill: $color--white;
+
+            @include media-query(tablet-portrait) {
+                display: block;
+            }
+
+            &:first-child {
+                top: 0;
+                left: 0;
+                transform: rotate(90deg);
+            }
+
+            &:last-child {
+                right: 0;
+                bottom: 0;
+                transform: rotate(-90deg);
+            }
+        }
+    }
+
+    &--dark-bg {
+        padding: 2rem 20px;
+        color: $color--white;
+        background-color: $color--mustard;
+
+        @include media-query(tablet-portrait) {
+            padding: 4rem 20px;
+        }
+    }
 
         @include media-query(tablet-portrait) {
             flex-direction: row;
diff --git a/opentech/templates/blocks/quote_block.html b/opentech/templates/blocks/quote_block.html
index 8af2d06ef4232167609fdb8cf155a058d305ae01..97f35842e2f764978a834af8447207b0b0de0b8d 100644
--- a/opentech/templates/blocks/quote_block.html
+++ b/opentech/templates/blocks/quote_block.html
@@ -1,5 +1,15 @@
-<blockquote>
-    <p>{{ value.quote }}</p>
-    {% if value.attribution %}{{ value.attribution }}{% endif %}
-    {% if value.attribution %}{{ value.job_title }}{% endif %}
-</blockquote>
+<div class="wrapper wrapper--breakout wrapper--blockquote">
+    <svg><use xlink:href="#hero-standard-left-pixels"></use></svg>
+    <div class="wrapper wrapper--medium">
+        <blockquote class="blockquote" {% if value.attribution %} cite="{{ value.attribution }}"{% endif %}>
+            <p>{{ value.quote }}</p>
+            {% if value.attribution %}
+                <cite class="blockquote__cite"><h5>{{ value.attribution }}</h5></cite>
+            {% endif %}
+            {% if value.job_title %}
+                <div class="blockquote__job-title">{{ value.job_title }}</div>
+            {% endif %}
+        </blockquote>
+    </div>
+    <svg><use xlink:href="#hero-standard-left-pixels"></use></svg>
+</div>