diff --git a/layouts/_default/baseof.html b/layouts/_default/baseof.html
index 1629ee6933..f75c74e73b 100644
--- a/layouts/_default/baseof.html
+++ b/layouts/_default/baseof.html
@@ -10,7 +10,22 @@
   {{ partial "header.html" . }}
   <main class="relative flex w-full max-w-[1920px]">
     <!-- Sidebar -->
-    <div x-data
+    <div style="scroll-behavior: smooth;" x-data x-init="$nextTick(() => {
+          const container = $el; // The div with overflow
+          const item = document.getElementById('sidebar-current-page')
+          if (item) {
+              const containerTop = container.scrollTop;
+              const containerBottom = containerTop + container.clientHeight;
+
+              const itemTop = item.offsetTop - container.offsetTop;
+              const itemBottom = itemTop + item.offsetHeight;
+
+              // Scroll only if the item is out of view
+              if (itemBottom > containerBottom - 200) {
+                  container.scrollTop = itemTop - (container.clientHeight / 2 - item.offsetHeight / 2);
+              }
+          }
+      })"
       class="md:h-[calc(100vh - 64px)] fixed md:sticky top-0 md:top-16 z-40 hidden h-screen flex-none overflow-y-auto overflow-x-hidden bg-background-light dark:bg-gray-dark-100 w-full md:z-auto md:block md:w-[300px]"
       :class="{ 'hidden': ! $store.showSidebar }">
       <!-- Gray backdrop on small screens -->
diff --git a/layouts/partials/sidebar/sections.html b/layouts/partials/sidebar/sections.html
index 6dcb7b54c0..fff61376a8 100644
--- a/layouts/partials/sidebar/sections.html
+++ b/layouts/partials/sidebar/sections.html
@@ -34,7 +34,8 @@
       <div class="w-full py-2 truncate">
         {{- if .Permalink }}
           {{/* If the link is not empty, use it */}}
-          <a class="block select-none hover:text-blue-light hover:dark:text-blue-dark"
+          <a {{ if $isCurrent }}aria-current="page" id="sidebar-current-page" {{ end }}
+              class="block select-none hover:text-blue-light hover:dark:text-blue-dark"
             href="{{ .Permalink }}">
             {{ template "renderTitle" . }}
           </a>
@@ -74,7 +75,7 @@
     {{ $isCurrent := eq page . }}
     <li class="rounded px-4 hover:text-blue-light hover:dark:text-blue-dark
       {{ if $isCurrent }} bg-gray-light-200 dark:bg-gray-dark-200{{ end }}">
-      <a {{ if $isCurrent }}aria-current="page" {{ end }} class="py-2 w-full truncate block"
+      <a {{ if $isCurrent }}aria-current="page" id="sidebar-current-page" {{ end }} class="py-2 w-full truncate block"
         href="{{ .Permalink }}" title="{{ .LinkTitle }}">
         {{ template "renderTitle" . }}
       </a>