diff --git a/src/backend/views/components/sidebar.twig b/src/backend/views/components/sidebar.twig
index 7bf2116..d452cc8 100644
--- a/src/backend/views/components/sidebar.twig
+++ b/src/backend/views/components/sidebar.twig
@@ -8,10 +8,10 @@
   <aside class="docs-sidebar__content docs-sidebar__content--hidden">
     {% for firstLevelPage in menu %}
       <section class="docs-sidebar__section" data-id="{{firstLevelPage._id}}">
-        <a
-          class="docs-sidebar__section-title {{page is defined and page._id == firstLevelPage._id ? 'docs-sidebar__section-title--active' : ''}}"
+        <a class="docs-sidebar__section-title-wrapper"
           href="{{firstLevelPage.uri ? '/' ~ firstLevelPage.uri : '/page/' ~ firstLevelPage._id }}"
         >
+        <div class="docs-sidebar__section-title {{page is defined and page._id == firstLevelPage._id ? 'docs-sidebar__section-title--active' : ''}}">
           <span>
             {{ firstLevelPage.title | striptags }}
           </span>
@@ -20,15 +20,18 @@
               {{ svg('arrow-up') }}
             </button>
           {% endif %}
+        </div>
         </a>
         {% if firstLevelPage.children is not empty %}
           <ul class="docs-sidebar__section-list">
             {% for child in firstLevelPage.children %}
-              <li class="docs-sidebar__section-list-item-wrapper">
+              <li>
                 <a
-                  class="docs-sidebar__section-list-item {{page is defined and page._id == child._id ? 'docs-sidebar__section-list-item--active' : ''}}"
+                  class="docs-sidebar__section-list-item-wrapper"
                   href="{{ child.uri ? '/' ~ child.uri : '/page/' ~ child._id }}">
-                    <span> {{ child.title | striptags }} </span>
+                    <div class="docs-sidebar__section-list-item {{page is defined and page._id == child._id ? 'docs-sidebar__section-list-item--active' : ''}}">
+                      <span>{{ child.title | striptags }}</span>
+                    </div>
                 </a>
               </li>
             {% endfor %}
@@ -42,9 +45,9 @@
           <div class="docs-sidebar__logo-image">
             {{ svg('aside-logo') }}
           </div>
-          <div class="docs-sidebar__logo-caption">
-            <span>Powered by CodeX Docs</span>
-          </div>
+          <p class="docs-sidebar__logo-caption">
+            Powered by CodeX Docs
+          </p>
         </a>
     </div>
 
diff --git a/src/frontend/styles/components/sidebar.pcss b/src/frontend/styles/components/sidebar.pcss
index d4d816c..91a48fa 100644
--- a/src/frontend/styles/components/sidebar.pcss
+++ b/src/frontend/styles/components/sidebar.pcss
@@ -88,20 +88,34 @@
     transition-duration: 0.1s;
     @apply --squircle;
   }
+
   &__section-title > span,
-  &__section-list-item > span{
+  &__section-list-item > span {
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
   }
 
-  &__section-list-item-wrapper,
-  &__section-title {
+  &__section-title-wrapper {
     &:not(:last-child) {
-      margin-bottom: 2px;
+      padding-bottom: 1px;
+      display: block;
     }
   }
 
+
+  &__section-list-item-wrapper {
+    padding: 1px 0;
+    display: block;
+  }
+
+  li:last-child {
+    .docs-sidebar__section-list-item-wrapper {
+      padding-bottom: 0;
+    }
+  }
+
+
   &__section-title:not(&__section-title--active),
   &__section-list-item:not(&__section-list-item--active) {
     @media (--can-hover) {