diff --git a/assets/_main.scss b/assets/_main.scss
index 7073e2b..4d6f7e6 100644
--- a/assets/_main.scss
+++ b/assets/_main.scss
@@ -362,3 +362,21 @@ body[dir="rtl"] .book-menu {
     padding: $padding-16 * 2 $padding-16;
   }
 }
+
+hr {
+  border: none;
+  border-top: 3px double #333;
+  color: #333;
+  overflow: visible;
+  text-align: center;
+  height: 10px;
+  padding-bottom: 5px;
+}
+
+hr:after {
+  background: #fff;
+  content: '§';
+  padding: 0 4px;
+  position: relative;
+  top: -13px;
+}
diff --git a/layouts/partials/docs/footer.html b/layouts/partials/docs/footer.html
index 5943b66..1fd0d3c 100644
--- a/layouts/partials/docs/footer.html
+++ b/layouts/partials/docs/footer.html
@@ -1,17 +1,16 @@
-<div class="flex flex-wrap justify-between">
-
 {{ if .Params.date }} <!-- Check if the date is specified in the page's front matter -->
-  <div>
-    {{- $date := .Params.date.Format .Site.Params.BookDateFormat }} <!-- Format the date based on your site's parameters -->
-    <a class="flex align-center" title='{{ i18n "Page dated" }} | {{ $date }}'>
-      <img src="{{ "svg/calendar.svg" | relURL }}" class="book-icon" alt="Calendar" />
-      <span>{{ $date }}</span>
-    </a>
+  <hr> <!-- This horizontal rule will only render if .Params.date exists -->
+  <div class="flex flex-wrap justify-between">
+    <div>
+      {{- $date := .Params.date.Format .Site.Params.BookDateFormat }} <!-- Format the date based on your site's parameters -->
+      <a class="flex align-center" title='{{ i18n "Page dated" }} | {{ $date }}'>
+        <img src="{{ "svg/calendar.svg" | relURL }}" class="book-icon" alt="Calendar" />
+        <span>{{ $date }}</span>
+      </a>
+    </div>
   </div>
 {{ end }}
 
-</div>
-
 {{ $script := resources.Get "clipboard.js" | resources.Minify }}
 {{ with $script.Content }}
   <script>{{ . | safeJS }}</script>