diff --git a/src/Frontend/Modules/Quotes/Layout/Templates/Quote.html.twig b/src/Frontend/Modules/Quotes/Layout/Templates/Quote.html.twig
new file mode 100644
index 0000000..f457a13
--- /dev/null
+++ b/src/Frontend/Modules/Quotes/Layout/Templates/Quote.html.twig
@@ -0,0 +1,15 @@
+{% macro quote(quote) %}
+  <blockquote>
+    <div class="row align-items-center">
+      {% if quote.image %}
+        <div class="col-2">
+          <img src="{{ quote.imageDirectoryUrl }}/x150/{{ quote.image }}" alt="{{ quote.name }}" class="img-responsive">
+        </div>
+      {% endif %}
+      <div class="{% if quote.image %} col-10{% else %} col-12{% endif %}">
+        {{ quote.quote|raw }}
+        <cite>{{ quote.name }}</cite>
+      </div>
+    </div>
+  </blockquote>
+{% endmacro %}
diff --git a/src/Frontend/Modules/Quotes/Layout/Widgets/AllQuotes.html.twig b/src/Frontend/Modules/Quotes/Layout/Widgets/AllQuotes.html.twig
index 203f88c..a10bc24 100644
--- a/src/Frontend/Modules/Quotes/Layout/Widgets/AllQuotes.html.twig
+++ b/src/Frontend/Modules/Quotes/Layout/Widgets/AllQuotes.html.twig
@@ -1,4 +1,7 @@
-{% for quote in quotes %}
-  <blockquote>{{ quote.quote|raw }}</blockquote>
-  <p>{{ quote.name }}</p>
-{% endfor %}
+{% import 'Modules/Quotes/Layout/Templates/Quote.html.twig' as quotesTemplates %}
+
+<section id="quotesAllQuotesWidget" class="quotes quotes-widget">
+  {% for quote in quotes %}
+    {{ quotesTemplates.quote(quote) }}
+  {% endfor %}
+</section>
diff --git a/src/Frontend/Modules/Quotes/Layout/Widgets/RandomQuote.html.twig b/src/Frontend/Modules/Quotes/Layout/Widgets/RandomQuote.html.twig
index 4e98f4f..fc97f75 100644
--- a/src/Frontend/Modules/Quotes/Layout/Widgets/RandomQuote.html.twig
+++ b/src/Frontend/Modules/Quotes/Layout/Widgets/RandomQuote.html.twig
@@ -1,23 +1,7 @@
-{% if quote %}
-  <blockquote>
-    <div class="row">
-    {% if quote.image %}
-      <div class="col-sm-4"> 
-        <img src="{{ quote.imageDirectoryUrl }}/x150/{{ quote.image }}" alt="{{ quote.name }}" class="img-responsive">
-      </div>
-      <div class="col-sm-8">
-        {{ quote.quote|raw }}
-        -- {{ quote.name }}
-      </div>
-    {% endif %}
-        
-    {% if not quote.image %}
-      <div class="col-sm-12">
-        {{ quote.quote|raw }}
-        -- {{ quote.name }}
-      </div>
-    {% endif %}
-    </div>
-  </blockquote>
-{% endif %}
+{% import 'Modules/Quotes/Layout/Templates/Quote.html.twig' as quotesTemplates %}
 
+<section id="quotesRandomQuoteWidget" class="quotes quotes-widget">
+  {% if quote %}
+    {{ quotesTemplates.quote(quote) }}
+  {% endif %}
+</section>
diff --git a/src/Frontend/Modules/Quotes/Layout/Widgets/SingleQuote.html.twig b/src/Frontend/Modules/Quotes/Layout/Widgets/SingleQuote.html.twig
index 9435343..d703ce8 100644
--- a/src/Frontend/Modules/Quotes/Layout/Widgets/SingleQuote.html.twig
+++ b/src/Frontend/Modules/Quotes/Layout/Widgets/SingleQuote.html.twig
@@ -1,22 +1,7 @@
-{% if quote %}
-  <blockquote>
-    <div class="row">
-    {% if quote.image %}
-      <div class="col-sm-4"> 
-        <img src="{{ quote.imageDirectoryUrl }}/x150/{{ quote.image }}" alt="{{ quote.name }}" class="img-responsive">
-      </div>
-      <div class="col-sm-8">
-        {{ quote.quote|raw }}
-        -- {{ quote.name }}
-      </div>
-    {% endif %}
-        
-    {% if not quote.image %}
-      <div class="col-sm-12">
-        {{ quote.quote|raw }}
-        -- {{ quote.name }}
-      </div>
-    {% endif %}
-    </div>
-  </blockquote>
-{% endif %}
+{% import 'Modules/Quotes/Layout/Templates/Quote.html.twig' as quotesTemplates %}
+
+<section id="quotesSingleQuoteWidget" class="quotes quotes-widget">
+  {% if quote %}
+    {{ quotesTemplates.quote(quote) }}
+  {% endif %}
+</section>