diff --git a/templates/Instance/settings.php b/templates/Instance/settings.php
index f020b1f..6cdfc90 100644
--- a/templates/Instance/settings.php
+++ b/templates/Instance/settings.php
@@ -1,4 +1,5 @@
 <?php
+
 $variantFromSeverity = [
     'critical' => 'danger',
     'warning' => 'warning',
@@ -82,7 +83,7 @@ function genContentForNav($sectionSettings, $appView)
     $mainPanelHeight = 'calc(100vh - 42px - 1rem - 56px - 38px - 1rem)';
     $container =  '<div class="d-flex">';
     $container .=   "<div class=\"\" style=\"flex: 0 0 10em;\">{$scrollspyNav}</div>";
-    $container .=   "<div data-spy=\"scroll\" data-target=\"#navbar-scrollspy-setting\" data-offset=\"25\" style=\"height: {$mainPanelHeight}\" class=\"p-3 overflow-auto position-relative flex-grow-1\">{$contentHtml}</div>";
+    $container .=   "<div data-spy=\"scroll\" data-target=\"#navbar-scrollspy-setting\" data-offset=\"25s\" style=\"height: {$mainPanelHeight}\" class=\"p-3 overflow-auto position-relative flex-grow-1\">{$contentHtml}</div>";
     $container .= '</div>';
     return $container;
 }
@@ -90,7 +91,8 @@ function genContentForNav($sectionSettings, $appView)
 function genSection($sectionName, $subSectionSettings, $appView)
 {
     $sectionContent = [];
-    $sectionContent[] = sprintf('<div id="%s">', sprintf('sp-%s', h($sectionName)));
+    $sectionContent[] = '<div>';
+    $sectionContent[] = sprintf('<h2 id="%s">%s</h2>', getResolvableID($sectionName), h($sectionName));
     if (isLeaf($subSectionSettings)) {
         $panelHTML = $appView->element('Settings/panel', [
             'sectionName' => $sectionName,
@@ -120,6 +122,15 @@ function isLeaf($setting)
 {
     return !empty($setting['name']) && !empty($setting['type']);
 }
+
+function getResolvableID($sectionName, $panelName=false)
+{
+    $id = sprintf('sp-%s', h($sectionName));
+    if (!empty($panelName)) {
+        $id .= preg_replace('/(\.|\s)/', '_', h($panelName));
+    }
+    return $id;
+}
 ?>
 
 <script>
diff --git a/templates/element/Settings/panel.php b/templates/element/Settings/panel.php
index b273fde..a556df1 100644
--- a/templates/element/Settings/panel.php
+++ b/templates/element/Settings/panel.php
@@ -9,7 +9,7 @@ if (isLeaf($panelSettings)) {
     ]);
     $panelHTML = "<div>{$singleSetting}</div>";
 } else {
-    $panelID = sprintf('sp-%s-%s', h($sectionName), h($panelName)); 
+    $panelID = getResolvableID($sectionName, $panelName);
     $panelHTML .= sprintf('<h4 id="%s"><a class="text-reset text-decoration-none" href="#%s">%s</a></h4>', $panelID, $panelID, h($panelName));
     $groupIssueSeverity = false;
     foreach ($panelSettings as $singleSettingName => $singleSetting) {
diff --git a/templates/element/Settings/scrollspyNav.php b/templates/element/Settings/scrollspyNav.php
index b8bce10..6ce9a6f 100644
--- a/templates/element/Settings/scrollspyNav.php
+++ b/templates/element/Settings/scrollspyNav.php
@@ -1,10 +1,10 @@
 <nav id="navbar-scrollspy-setting" class="navbar">
     <nav class="nav nav-pills flex-column">
         <?php foreach ($groupedSetting as $group => $sections): ?>
-            <a class="nav-link main-group text-reset p-1" href="#<?= sprintf('sp-%s', h($group)) ?>"><?= h($group) ?></a>
-                <nav class="nav nav-pills sub-group collapse flex-column" data-maingroup="<?= sprintf('sp-%s', h($group)) ?>">
+            <a class="nav-link main-group text-reset p-1" href="#<?= getResolvableID($group) ?>"><?= h($group) ?></a>
+                <nav class="nav nav-pills sub-group collapse flex-column" data-maingroup="<?= getResolvableID($group) ?>">
                     <?php foreach ($sections as $section): ?>
-                        <a class="nav-link nav-link-group text-reset ml-3 my-1 p-1" href="#<?= sprintf('sp-%s-%s', h($group), h($section)) ?>"><?= h($section) ?></a>
+                        <a class="nav-link nav-link-group text-reset ml-3 my-1 p-1" href="#<?= getResolvableID($group, $section) ?>"><?= h($section) ?></a>
                     <?php endforeach; ?>
                 </nav>
             </a>