diff --git a/css/m-components.css b/css/m-components.css
index 5bded04d..21a4e0cc 100644
--- a/css/m-components.css
+++ b/css/m-components.css
@@ -404,6 +404,31 @@ article > header .m-date-day {
   padding-bottom: 0.15rem;
   font-size: 1.25rem;
 }
+article > header .m-translations-lang {
+  display: block;
+  line-height: 95%;
+  font-size: 0.75rem;
+  font-weight: normal;
+  white-space: nowrap;
+}
+article > header .m-translations {
+  display: block;
+  width: 2.5rem;
+  float: right;
+  text-align: center;
+  line-height: 95%;
+  font-weight: bold;
+  padding-top: 0.2rem;
+  padding-bottom: 0.15rem;
+  font-size: 1.25rem;
+  border-left-style: solid;
+  border-left-width: 0.125rem;
+  border-color: var(--article-heading-color);
+  padding-left: 0.75rem;
+  margin-top: -0.1rem;
+  margin-right: 0.75rem;
+  margin-bottom: 0.25rem;
+}
 article > header p {
   color: var(--article-header-color);
   font-size: 1.125rem;
diff --git a/pelican-theme/templates/article_header.html b/pelican-theme/templates/article_header.html
index fd782411..e2af9078 100644
--- a/pelican-theme/templates/article_header.html
+++ b/pelican-theme/templates/article_header.html
@@ -5,6 +5,13 @@ <h1><a href="{{ article.url|format_siteurl }}" rel="bookmark" title="Permalink t
       {{ month }} <span class="m-date-day">{{ day }}</span> {{year}}
     </time>
     {{ article.title }}
-  </a></h1>
+  </a>
+  {% if article.translations %}<nav class="m-translations"><!-- Read in: -->
+    {% for translation in article.translations %}
+        <li class="m-translations-lang"><a href="{{ SITEURL }}/{{ translation.url }}">{{ translation.lang }}</a></li>
+    {% endfor %}
+    </nav>
+  {% endif %}
+  </h1>
   {{ article.summary|indent(2) }}
 </header>