diff --git a/Gemfile b/Gemfile
index 9d37be51469d6ede57cfb31343364c4ae2ef1b55..36676fc415eee9ed6505bbadd851107039e57774 100644
--- a/Gemfile
+++ b/Gemfile
@@ -1,6 +1,7 @@
 source "https://rubygems.org"
 
-gem "jekyll", "~> 4.0"
+gem "jekyll"
+gem "liquid-c"
 
 group :jekyll_plugins do
   gem "jekyll-random"
diff --git a/pages/_docs/divider.md b/pages/_docs/divider.md
index 32e14899c38cdbcfacf07028a61bbc68faf081ad..d50a9a4bf0cffd2c07bc0269a402aa372936e2e3 100644
--- a/pages/_docs/divider.md
+++ b/pages/_docs/divider.md
@@ -10,7 +10,15 @@ done: true
 <p>
   Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab consequatur maxime quia reprehenderit tempore? 
 </p>
-<h6 class="divider">OR</h6>
+<div class="hr-text">Left divider</div>
+<p>
+  Dicta error hic illo iure necessitatibus nihil officiis omnis perferendis, praesentium repellendus rerum, saepe sed, sit!
+</p>
+<div class="hr-text hr-text-center">Centered divider</div>
+<p>
+  Dicta error hic illo iure necessitatibus nihil officiis omnis perferendis, praesentium repellendus rerum, saepe sed, sit!
+</p>
+<div class="hr-text hr-text-right">Right divider</div>
 <p>
   Dicta error hic illo iure necessitatibus nihil officiis omnis perferendis, praesentium repellendus rerum, saepe sed, sit!
 </p>
diff --git a/pages/_includes/layout/css.html b/pages/_includes/layout/css.html
index 5ab11da6a02fdd5ad8f68343044b421fbdcdd756..7e25e89282c8ee2472c5258327d86164b1964fb9 100644
--- a/pages/_includes/layout/css.html
+++ b/pages/_includes/layout/css.html
@@ -1,8 +1,8 @@
 {% if site.data.libs %}
-<!-- Libs CSS -->
-{% for lib in site.data.libs.css %}
-<link href="{{ site.base }}/{% if jekyll.environment == 'production' %}dist/libs{% else %}node_modules{% endif %}/{% if jekyll.environment == 'production' %}{{ lib | replace: '@', '' }}{% else %}{{ lib }}{% endif %}?{{ site.time | date: '%s' }}" rel="stylesheet" />
-{% endfor %}
+   <!-- Libs CSS -->
+   {% for lib in site.data.libs.css %}
+   <link href="{{ site.base }}/{% if jekyll.environment == 'production' %}dist/libs{% else %}node_modules{% endif %}/{% if jekyll.environment == 'production' %}{{ lib | replace: '@', '' }}{% else %}{{ lib }}{% endif %}?{{ site.time | date: '%s' }}" rel="stylesheet" />
+   {% endfor %}
 {% endif %}
 
 <!-- Tabler Core -->
diff --git a/pages/_includes/layout/customize.html b/pages/_includes/layout/customize.html
index 4c80b8f5af7d46a1fc74c33e4d9aa2a501824c95..598863aa2f33a1af4255ea686da614a50f37509e 100644
--- a/pages/_includes/layout/customize.html
+++ b/pages/_includes/layout/customize.html
@@ -1,35 +1,35 @@
 <form action="#" class="js-layout-form">
    <div class="mb-2">
       <label class="form-label">Color scheme</label>
-      {% include ui/input-selectgroup.html name="color-scheme" values="light,dark" type="radio" class="w-100p" %}
+      {% include_cached ui/input-selectgroup.html name="color-scheme" values="light,dark" type="radio" class="w-100p" %}
    </div>
    <div class="mb-2">
       <label class="form-label">Nav position</label>
-      {% include ui/input-selectgroup.html name="nav-position" values="top,side" type="radio" class="w-100p" %}
+      {% include_cached ui/input-selectgroup.html name="nav-position" values="top,side" type="radio" class="w-100p" %}
    </div>
    <div class="mb-2">
       <label class="form-label">Header color</label>
-      {% include ui/input-selectgroup.html name="header-color" values="light,dark" type="radio" class="w-100p" %}
+      {% include_cached ui/input-selectgroup.html name="header-color" values="light,dark" type="radio" class="w-100p" %}
    </div>
    <!--<div class="mb-2">-->
    <!--<label class="form-label">Header fixed</label>-->
-   <!--{% include ui/input-selectgroup.html name="header-fixed" values="fixed,default" type="radio" class="w-100p" %}-->
+   <!--{% include_cached ui/input-selectgroup.html name="header-fixed" values="fixed,default" type="radio" class="w-100p" %}-->
    <!--</div>-->
    <div class="mb-2">
       <label class="form-label">Sidebar position</label>
-      {% include ui/input-selectgroup.html name="sidebar-position" values="left,right" type="radio" class="w-100p" %}
+      {% include_cached ui/input-selectgroup.html name="sidebar-position" values="left,right" type="radio" class="w-100p" %}
    </div>
    <div class="mb-2">
       <label class="form-label">Sidebar size</label>
-      {% include ui/input-selectgroup.html name="sidebar-size" values="default,folded" type="radio" class="w-100p" %}
+      {% include_cached ui/input-selectgroup.html name="sidebar-size" values="default,folded" type="radio" class="w-100p" %}
    </div>
    <div class="mb-2">
       <label class="form-label">Sidebar color</label>
-      {% include ui/input-selectgroup.html name="sidebar-color" values="light,dark" type="radio" class="w-100p" %}
+      {% include_cached ui/input-selectgroup.html name="sidebar-color" values="light,dark" type="radio" class="w-100p" %}
    </div>
    <div class="mb-2">
       <label class="form-label">Sidebar fixed</label>
-      {% include ui/input-selectgroup.html name="sidebar-fixed" values="fixed,default" type="radio" class="w-100p" %}
+      {% include_cached ui/input-selectgroup.html name="sidebar-fixed" values="fixed,default" type="radio" class="w-100p" %}
    </div>
 
 
diff --git a/pages/_includes/layout/homepage.html b/pages/_includes/layout/homepage.html
index 36980b2ba015bb8a800ee2f7f1ca4ab829ebd5e2..64d3e084bb7c62fd0ee10e5c6b3ff3fb43a4dc21 100644
--- a/pages/_includes/layout/homepage.html
+++ b/pages/_includes/layout/homepage.html
@@ -51,12 +51,6 @@
       </div>
    </div>
 
-   {% comment %}
-   <div class="col-md-4">
-      {% include cards/order-statistics.html %}
-   </div>
-   {% endcomment %}
-
    <div class="col-sm-6 col-xl-3">
       {% include cards/small-stats.html color="blue" icon="dollar-sign" count="132" subtitle="Sales" description="12 waiting payments" %}
    </div>
diff --git a/pages/_includes/layout/js-capture.html b/pages/_includes/layout/js-capture.html
new file mode 100644
index 0000000000000000000000000000000000000000..d9e388d2ff018ddc22d4ae909257d6fc6cc6707f
--- /dev/null
+++ b/pages/_includes/layout/js-capture.html
@@ -0,0 +1,3 @@
+{% removeemptylines %}
+{{ site.capture_global.scripts }}
+{% endremoveemptylines %}
diff --git a/pages/_includes/layout/js.html b/pages/_includes/layout/js.html
index d94a69d2361a4971b2930bf803cf219a0bc10d92..c228f044d4ba1c93533d371cf38ba4599fb5f9a8 100644
--- a/pages/_includes/layout/js.html
+++ b/pages/_includes/layout/js.html
@@ -16,7 +16,3 @@
 
 <!-- Tabler Plugins -->
 <script src="{{ site.base }}/dist/js/tabler-charts{% if jekyll.environment == 'production' %}.min{% endif %}.js?{{ site.time | date: '%s' }}"></script>
-
-{% removeemptylines %}
-{{ site.capture_global.scripts }}
-{% endremoveemptylines %}
diff --git a/pages/_includes/layout/modals.html b/pages/_includes/layout/modals.html
index 6ead7fe03484055562f3f57875672555ef5e4f15..e69de29bb2d1d6434b8b29ae775ad8c2e48c5391 100644
--- a/pages/_includes/layout/modals.html
+++ b/pages/_includes/layout/modals.html
@@ -1,13 +0,0 @@
-<div class="modal fade" id="customize" tabindex="-1" role="dialog" aria-hidden="true">
-   <div class="modal-dialog" role="document">
-      <div class="modal-content">
-         <div class="modal-body">
-            <a class="close" data-dismiss="modal" aria-label="Close">
-               <span aria-hidden="true">&times;</span>
-            </a>
-
-            {% include layout/customize.html %}
-         </div>
-      </div>
-   </div>
-</div>
diff --git a/pages/_includes/layout/og.html b/pages/_includes/layout/og.html
index 3b5e82d87c5a0c33cbbb37650ca233b89b488adc..a5353be8029f75716d7eae51d839eee9424c1298 100644
--- a/pages/_includes/layout/og.html
+++ b/pages/_includes/layout/og.html
@@ -1,4 +1,4 @@
-{% if layout.og-component %}
+{% if include.show %}
 <meta name="twitter:image:src" content="https://preview-dev.tabler.io/img/components/{{ page.slug }}.png">
 <meta name="twitter:site" content="@tabler_ui">
 <meta name="twitter:card" content="summary">
diff --git a/pages/_includes/parts/input-selectgroups.html b/pages/_includes/parts/input-selectgroups.html
index ece3a2c3d8599a34610102806112299b8891a01a..f2a87aa1c93007a5960d4c594f5c1f53dd87ca2a 100644
--- a/pages/_includes/parts/input-selectgroups.html
+++ b/pages/_includes/parts/input-selectgroups.html
@@ -1,18 +1,18 @@
 <div class="mb-3">
    <label class="form-label">Shipping methods</label>
-   {% include ui/input-selectgroup.html values="Unregistered,Priority Mail,Express Mail" class="selectgroup-vertical" type="radio" name="shipping-method" %}
+   {% include_cached ui/input-selectgroup.html values="Unregistered,Priority Mail,Express Mail" class="selectgroup-vertical" type="radio" name="shipping-method" %}
 </div>
 <div class="mb-3">
    <label class="form-label">Icons input</label>
-   {% include ui/input-selectgroup.html values="i:smartphone,i:tablet,i:monitor,i:x" class="w-100" type="radio" name="device" %}
+   {% include_cached ui/input-selectgroup.html values="i:smartphone,i:tablet,i:monitor,i:x" class="w-100" type="radio" name="device" %}
 </div>
 
 <div class="mb-3">
    <label class="form-label">Icon input</label>
-   {% include ui/input-selectgroup.html values="i:sun,i:moon,i:cloud-rain,i:cloud,Other" class="selectgroup-pills" %}
+   {% include_cached ui/input-selectgroup.html values="i:sun,i:moon,i:cloud-rain,i:cloud,Other" class="selectgroup-pills" %}
 </div>
 
 <div class="mb-3">
    <label class="form-label">Your skills</label>
-   {% include ui/input-selectgroup.html values="HTML,CSS,PHP,JavaScript" class="selectgroup-pills selectgroup-separated" %}
+   {% include_cached ui/input-selectgroup.html values="HTML,CSS,PHP,JavaScript" class="selectgroup-pills selectgroup-separated" %}
 </div>
diff --git a/pages/_includes/ui/chart.html b/pages/_includes/ui/chart.html
index 6c83a3b8109849d03ac2e48edcb8e7fc16bb2736..34c4165b0983a0172b67745bb1382281cbc48719 100644
--- a/pages/_includes/ui/chart.html
+++ b/pages/_includes/ui/chart.html
@@ -132,8 +132,6 @@ document.addEventListener("DOMContentLoaded", function(event) {
       },
       {% endif %}
    })).render();
-   
-   console.log('chartEl.offsetHeight', chartEl.offsetHeight);
 });
 </script>
 {% endcapture_global %}
diff --git a/pages/_layouts/base.html b/pages/_layouts/base.html
index 2897358d43c78fc1593ecae26cc7bbc88b901e19..5a1dc9e87256d82f282d1933ba37fc2786a43e0d 100644
--- a/pages/_layouts/base.html
+++ b/pages/_layouts/base.html
@@ -26,9 +26,9 @@
    <meta name="description" content="{{ page.description | escape }}"/>
    {% endif %}
 
-   {% include layout/og.html %}
+   {% include_cached layout/og.html show=layout.og-component %}
 
-   {% include layout/css.html %}
+   {% include_cached layout/css.html %}
 
    <style>body { display: none; }</style>
 </head>
@@ -36,14 +36,15 @@
 
 {{ content}}
 
+{% include_cached layout/js.html %}
+{% include layout/js-capture.html %}
+
 {% if site.debug %}
 {% if jekyll.environment == 'development' %}
-{% include layout/debug.html %}
+{% include_cached layout/debug.html %}
 {% endif %}
 {% endif %}
 
-{% include layout/js.html %}
-
 <script>document.body.style.display = 'block';</script>
 </body>
 </html>
diff --git a/pages/_layouts/default.html b/pages/_layouts/default.html
index d53f124c8e29d9faf0ece113114e332567cc802f..a779a68f5ad51504d6548eb091252df3224ce06d 100644
--- a/pages/_layouts/default.html
+++ b/pages/_layouts/default.html
@@ -16,5 +16,3 @@ layout: base
       </main>
    </div>
 </div>
-
-{% include layout/modals.html %}
diff --git a/pages/_layouts/docs.html b/pages/_layouts/docs.html
index 333520a6ed63eb55a1cb06f21e34f6846a526e92..7743c6cfbd0df06b31cbc9cbfc1cc35048039e62 100644
--- a/pages/_layouts/docs.html
+++ b/pages/_layouts/docs.html
@@ -23,7 +23,7 @@ page-title: Documentation
    </div>
 	<div class="col-lg-9">
 		<div class="card">
-			<div class="card-body p-lg-7">
+			<div class="card-body p-md-6 p-xl-7">
 
 				<div class="markdown">
 					<h2 class="h1 mt-0 mb-4">{{ page.title }}{% if page.done %} {% include_cached ui/icon.html icon="check" color="green" %}{% endif %}</h2>
diff --git a/pages/calendars.html b/pages/calendars.html
deleted file mode 100644
index cd108176b67c129b0d00a7155e7baba5cd68027a..0000000000000000000000000000000000000000
--- a/pages/calendars.html
+++ /dev/null
@@ -1,19 +0,0 @@
----
----
-
-<div class="row">
-   <div class="col-md-4">
-      <div class="card">
-         <div class="card-body">
-            {% include parts/calendar.html class="border-0" %}
-         </div>
-      </div>
-   </div>
-   <div class="col-md-8">
-      <div class="card">
-         <div class="card-body">
-            {% include parts/calendar.html class="border-0" %}
-         </div>
-      </div>
-   </div>
-</div>
diff --git a/pages/charts-heatmap.html b/pages/charts-heatmap.html
index 7983b4c69b50093f40f189f4fe66de5062c1a643..28baa16b54fba5521075b978bb547cec18924839 100644
--- a/pages/charts-heatmap.html
+++ b/pages/charts-heatmap.html
@@ -17,9 +17,4 @@ done: true
 	<div class="col-xl-6">
 		{% include cards/charts/heatmap.html id="heatmap-colors" title="Heatmap - Color range" scale=true %}
 	</div>
-	{% comment %}
-	<div class="col-12">
-		{% include cards/charts/heatmap.html id="heatmap-range" title="Github style" color="#196127" count=30 %}
-	</div>
-	{% endcomment %}
 </div>
diff --git a/pages/icons.html b/pages/icons.html
index 335e69d1f7d5ba07c3849614766d6815312a4968..ec9c33b683a7a38ec12c8a1d2cccdf50f967b604 100644
--- a/pages/icons.html
+++ b/pages/icons.html
@@ -2,13 +2,12 @@
 title: Icons
 ---
 
-
- <div class="row">
-    <div class="col">
-       {% include cards/icons.html title="Feather icons" group="fe" %}
-    </div>
-    <div class="col">
-       {% include cards/icons.html title="Brand icons" group="brand" %}
-    </div>
- </div>
+<div class="row">
+   <div class="col">
+      {% include_cached cards/icons.html title="Feather icons" group="fe" %}
+   </div>
+   <div class="col">
+      {% include_cached cards/icons.html title="Brand icons" group="brand" %}
+   </div>
+</div>
 
diff --git a/pages/markdown.html b/pages/markdown.html
deleted file mode 100644
index 7a1fe55d77f68e9a33ca5c24103fda9ef8c65d02..0000000000000000000000000000000000000000
--- a/pages/markdown.html
+++ /dev/null
@@ -1,45 +0,0 @@
----
-title: Markdown
----
-
-<div class="row justify-content-center">
-   <div class="col-8">
-      <div class="markdown">
-
-         <div class="card">
-            <div class="card-body p-7">
-
-               <h1>It's a hug, Michael. I'm hugging you.</h1>
-               <p>Get me a vodka rocks. And a piece of toast. Say goodbye to these, because it's the last time! Guy's a pro. Michael! Across from where?</p>
-               <p>No… but I'd like to be asked! It's called 'taking advantage. <strong>' It's what gets you ahead in life.</strong> <em> Not tricks, Michael, illusions.</em> Army had half a day.</p>
-               <h2>Not tricks, Michael, illusions.</h2>
-               <p>Well, what do you expect, mother? Say goodbye to these, because it's the last time! I don't understand the question, and I won't respond to it. No, I did not kill Kitty. However, I am going to oblige and answer the nice officer's questions because I am an honest man with no secrets to hide.</p>
-               <ol>
-                  <li>I'm afraid I just blue myself.</li><li>It's called 'taking advantage.' It's what gets you ahead in life.</li><li>I don't understand the question, and I won't respond to it.</li>
-               </ol>
-
-               <h3>Across from where?</h3>
-               <p>I don't criticize you! And if you're worried about criticism, sometimes a diet is the best defense. Did you enjoy your meal, Mom? You drank it fast enough. Did you enjoy your meal, Mom? You drank it fast enough.</p>
-               <ul>
-                  <li>No! I was ashamed to be SEEN with you. I like being with you.</li><li>What's Spanish for "I know you speak English?"</li><li>No! I was ashamed to be SEEN with you. I like being with you.</li>
-               </ul>
-
-               <p>Steve Holt! Guy's a pro. I don't understand the question, and I won't respond to it. There's so many poorly chosen words in that sentence.</p>
-               <p>Oh, you're gonna be in a coma, all right. Bad news. Andy Griffith turned us down. He didn't like his trailer. It's called 'taking advantage.' It's what gets you ahead in life. That's why you always leave a note!</p>
-
-               <h4>That's what it said on 'Ask Jeeves.' Guy's a pro. </h4>
-               <p>There's so many poorly chosen words in that sentence. There's only one man I've ever called a coward, and that's Brian Doyle Murray. No, what I'm calling you is a television actor.</p>
-               <p>Whoa, this guy's straight? Say goodbye to these, because it's the last time! That's why you always leave a note! There's only one man I've ever called a coward, and that's Brian Doyle Murray. No, what I'm calling you is a television actor.</p>
-               <p>Say goodbye to these, because it's the last time! I'm afraid I just blue myself. Steve Holt! We just call it a sausage. We just call it a sausage. Steve Holt!</p>
-               <p>Not tricks, Michael, illusions. Guy's a pro. No! I was ashamed to be SEEN with you. I like being with you. Really? Did nothing cancel? We just call it a sausage.</p>
-               <p>Now, when you do this without getting punched in the chest, you'll have more fun. Guy's a pro. That's what it said on 'Ask Jeeves.' I don't understand the question, and I won't respond to it. Whoa, this guy's straight?</p>
-               <p>As you may or may not know, Lindsay and I have hit a bit of a rough patch. He'll want to use your yacht, and I don't want this thing smelling like fish. No… but I'd like to be asked! Did you enjoy your meal, Mom? You drank it fast enough.</p>
-               <p>We just call it a sausage. I care deeply for nature. It's a hug, Michael. I'm hugging you. Well, what do you expect, mother?</p>
-               <p>I don't understand the question, and I won't respond to it. Well, what do you expect, mother? Marry me. No, I did not kill Kitty. However, I am going to oblige and answer the nice officer's questions because I am an honest man with no secrets to hide.</p>
-               <p>He'll want to use your yacht, and I don't want this thing smelling like fish. I'm half machine. I'm a monster. But I bought a yearbook ad from you, doesn't that mean anything anymore? That's what it said on 'Ask Jeeves.'</p>
-            </div>
-         </div>
-
-      </div>
-   </div>
-</div>
diff --git a/pages/text.html b/pages/text.html
deleted file mode 100644
index 7366c2091174a9146b60939507cee8264982cf85..0000000000000000000000000000000000000000
--- a/pages/text.html
+++ /dev/null
@@ -1,44 +0,0 @@
----
----
-
-
-<div class="card">
-   <div class="card-body">
-      <div class="mb-3">
-         <h1>Lorem ipsum dolor sit amet</h1>
-         <p>
-            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dignissimos dolor incidunt nisi optio provident quod recusandae repellendus repudiandae tenetur. Cupiditate dignissimos esse expedita fugiat impedit modi nostrum omnis quaerat quo.
-            {% include_cached ui/button.html color="blue" size="sm" %}
-            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dignissimos dolor incidunt nisi optio provident quod recusandae repellendus repudiandae tenetur. Cupiditate dignissimos esse expedita fugiat impedit modi nostrum omnis quaerat quo.
-         </p>
-
-         <h2>Lorem ipsum dolor sit amet</h2>
-         <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dignissimos dolor incidunt nisi optio provident quod recusandae repellendus repudiandae tenetur. Cupiditate dignissimos esse expedita fugiat impedit modi nostrum omnis quaerat quo.</p>
-
-         <h3>Lorem ipsum dolor sit amet</h3>
-         <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dignissimos dolor incidunt nisi optio provident quod recusandae repellendus repudiandae tenetur. Cupiditate dignissimos esse expedita fugiat impedit modi nostrum omnis quaerat quo.</p>
-
-         <h4>Lorem ipsum dolor sit amet</h4>
-         <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dignissimos dolor incidunt nisi optio provident quod recusandae repellendus repudiandae tenetur. Cupiditate dignissimos esse expedita fugiat impedit modi nostrum omnis quaerat quo.</p>
-
-         <h5>Lorem ipsum dolor sit amet</h5>
-         <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dignissimos dolor incidunt nisi optio provident quod recusandae repellendus repudiandae tenetur. Cupiditate dignissimos esse expedita fugiat impedit modi nostrum omnis quaerat quo.</p>
-      </div>
-      <div class="mb-3">
-         {% include_cached ui/button.html color="blue" %}
-         {% include_cached ui/button.html color="danger" %}
-         {% include_cached ui/button.html color="green" %}
-      </div>
-      <div class="mb-3">
-         <input type="text" class="form-control d-inline-block w-auto" size="10">
-         {% include_cached ui/button.html color="blue"  %}
-
-         <input type="text" class="form-control form-control-sm d-inline-block w-auto" size="10">
-         {% include_cached ui/button.html color="blue" size="sm" %}
-
-         <input type="text" class="form-control form-control-lg d-inline-block w-auto" size="10">
-         {% include_cached ui/button.html color="blue" size="lg" %}
-      </div>
-
-   </div>
-</div>
diff --git a/pages/users.html b/pages/users.html
index a3fc50bf5fcb63094fc17435613bf5f506ba1602..484b06cec222ac5175d376160d494b9e61577c9d 100644
--- a/pages/users.html
+++ b/pages/users.html
@@ -23,13 +23,6 @@ menu: users
                   <h3 class="mb-0"><a href="#">{{ person.full_name }}</a></h3>
                   <div class="text-muted text-h5">{{ person.job_title }}</div>
                </div>
-               {% comment %}
-               <div class="col-auto">
-                  <!-- todo: better buttons -->
-                  {% include_cached ui/button.html color="twitter" icon="brand/twitter" icon-only=true outline=true %}
-                  {% include_cached ui/button.html color="facebook" icon="brand/facebook" icon-only=true outline=true %}
-               </div>
-               {% endcomment %}
 
                {% if online_counter > 7 %}
                   <div class="col-auto leading-none align-self-start">
diff --git a/scss/ui/typo/_hr.scss b/scss/ui/typo/_hr.scss
index b39483643e109b9b097d1c1506b5b6eff2509efa..b3a4b4aec739155d5a6c3b6a46fe37b89d2720f9 100644
--- a/scss/ui/typo/_hr.scss
+++ b/scss/ui/typo/_hr.scss
@@ -13,7 +13,7 @@ Hr text
   display: flex;
   align-items: center;
   margin: $hr-margin-y 0;
-  font-size: $h6-font-size;
+  @include subheader;
 
   &::after,
   &::before {
@@ -23,8 +23,13 @@ Hr text
     opacity: $hr-opacity;
   }
 
+  &::before {
+    margin-right: .5rem;
+  }
+
   &::after {
     content: "";
+    margin-left: .5rem;
   }
 
   > *:first-child {