diff --git a/module/block/css/common.ui.css b/module/block/css/common.ui.css
new file mode 100644
index 0000000000..74e145bbcb
--- /dev/null
+++ b/module/block/css/common.ui.css
@@ -0,0 +1,11 @@
+.nav-tabs.nav-stacked .nav-item {height:36px; line-height: 36px;}
+.nav-tabs.nav-stacked .nav-item:hover {background-color: #FCFDFE;}
+.nav-tabs.nav-stacked .nav-item > a.title {color: #5E626D;}
+.nav-tabs.nav-stacked .nav-item > a.title:before {background: transparent;}
+.nav-tabs.nav-stacked .nav-item > a.title.active {color: #0B0F18;border-left: 2px solid #2E7FFF; background-color: #FCFDFE;}
+.nav-tabs.nav-stacked .nav-item > a.title:hover {border-left: 2px solid #2E7FFF; background-color: #FCFDFE;}
+.nav-tabs.nav-stacked .nav-item:hover > a {color: #0B0F18;}
+.nav-tabs.nav-stacked .nav-item:hover > a.link {display: flex!important;}
+.nav-tabs.nav-stacked .nav-item:hover > span.link {display: flex!important;}
+.nav-tabs.nav-stacked .nav-item.nav-prev {display: none}
+.nav-tabs.nav-stacked .nav-item.nav-next {display: none}
diff --git a/module/block/css/executionstatisticblock.ui.css b/module/block/css/executionstatisticblock.ui.css
index 087caf13d5..a4fc982e60 100644
--- a/module/block/css/executionstatisticblock.ui.css
+++ b/module/block/css/executionstatisticblock.ui.css
@@ -8,17 +8,6 @@
 .executionstatistic-block .chart {margin: auto;}
 .executionstatistic-block .story-num {margin: auto;}
 
-.executionstatistic-block.block-long .nav-tabs .nav-item {height:36px; line-height: 36px;}
-.executionstatistic-block.block-long .nav-tabs .nav-item:hover {border-left: 2px solid #2E7FFF; background-color: #FCFDFE;}
-.executionstatistic-block.block-long .nav-tabs .nav-item.active {border-left: 2px solid #2E7FFF; background-color: #FCFDFE;}
-.executionstatistic-block.block-long .nav-tabs .nav-item > a {color: #5E626D;}
-.executionstatistic-block.block-long .nav-tabs .nav-item > a:before {background: transparent;}
-.executionstatistic-block.block-long .nav-tabs .nav-item.active > a {color: #0B0F18;}
-.executionstatistic-block.block-long .nav-tabs .nav-item:hover > a {color: #0B0F18;}
-.executionstatistic-block.block-long .nav-tabs .nav-item:hover > a.link {display: flex!important;}
-.executionstatistic-block.block-long .nav-tabs .nav-item.nav-prev {display: none}
-.executionstatistic-block.block-long .nav-tabs .nav-item.nav-next {display: none}
-
 .executionstatistic-block.block-sm .nav-tabs .nav-item.active {display: flex!important;}
 .executionstatistic-block.block-sm .nav-tabs .nav-item > a {width: 100%;}
 .executionstatistic-block.block-sm .nav-tabs .nav-item {display: none}
diff --git a/module/block/css/guideblock.ui.css b/module/block/css/guideblock.ui.css
index 0bead7ecad..54ca358647 100644
--- a/module/block/css/guideblock.ui.css
+++ b/module/block/css/guideblock.ui.css
@@ -3,16 +3,6 @@
 .guide-block .tab-content {width: 100%;}
 .guide-block .tab-pane {padding: 0;}
 .guide-block .bg-secondary-pale {background: #F3F6FA;}
-
-.guide-block .nav-tabs .nav-item {height:36px; line-height: 36px;}
-.guide-block .nav-tabs .nav-item:hover {background-color: #FCFDFE;}
-.guide-block .nav-tabs .nav-item > a {color: #5E626D;}
-.guide-block .nav-tabs .nav-item > a:before {background: transparent;}
-.guide-block .nav-tabs .nav-item > a.active {color: #0B0F18;border-left: 2px solid #2E7FFF; background-color: #FCFDFE;}
-.guide-block .nav-tabs .nav-item > a:hover {border-left: 2px solid #2E7FFF; background-color: #FCFDFE;}
-.guide-block .nav-tabs .nav-item:hover > a {color: #0B0F18;}
-.guide-block .nav-tabs .nav-item:hover > span.link {display: flex!important;}
-
 .guide-block .mode-switch img {height: 180px; margin: auto; object-fit: cover;}
 .guide-block .vision-switch img {height: 180px; margin: auto; object-fit: cover;}
 
diff --git a/module/block/css/productstatisticblock.ui.css b/module/block/css/productstatisticblock.ui.css
index aa04c5d83c..f711a6650d 100644
--- a/module/block/css/productstatisticblock.ui.css
+++ b/module/block/css/productstatisticblock.ui.css
@@ -9,12 +9,12 @@
 .productstatistic-block .story-num {margin: auto;}
 
 .productstatistic-block.block-long .nav-tabs .nav-item {height:36px; line-height: 36px;}
-.productstatistic-block.block-long .nav-tabs .nav-item:hover {border-left: 2px solid #2E7FFF; background-color: #FCFDFE;}
-.productstatistic-block.block-long .nav-tabs .nav-item.active {border-left: 2px solid #2E7FFF; background-color: #FCFDFE;}
-.productstatistic-block.block-long .nav-tabs .nav-item > a {color: #5E626D;}
-.productstatistic-block.block-long .nav-tabs .nav-item > a:before {background: transparent;}
-.productstatistic-block.block-long .nav-tabs .nav-item.active > a {color: #0B0F18;}
-.productstatistic-block.block-long .nav-tabs .nav-item:hover > a {color: #0B0F18;}
+.productstatistic-block.block-long .nav-tabs .nav-item:hover {background-color: #FCFDFE;}
+.productstatistic-block.block-long .nav-tabs .nav-item > a.title {color: #5E626D;}
+.productstatistic-block.block-long .nav-tabs .nav-item > a.title:before {background: transparent;}
+.productstatistic-block.block-long .nav-tabs .nav-item > a.title.active {color: #0B0F18;border-left: 2px solid #2E7FFF; background-color: #FCFDFE;}
+.productstatistic-block.block-long .nav-tabs .nav-item > a.title:hover {border-left: 2px solid #2E7FFF;}
+.productstatistic-block.block-long .nav-tabs .nav-item:hover > a.title {color: #0B0F18;}
 .productstatistic-block.block-long .nav-tabs .nav-item:hover > a.link {display: flex!important;}
 .productstatistic-block.block-long .nav-tabs .nav-item.nav-prev {display: none}
 .productstatistic-block.block-long .nav-tabs .nav-item.nav-next {display: none}
diff --git a/module/block/css/projectstatisticblock.ui.css b/module/block/css/projectstatisticblock.ui.css
index 373893daf0..482bebbf6e 100644
--- a/module/block/css/projectstatisticblock.ui.css
+++ b/module/block/css/projectstatisticblock.ui.css
@@ -2,7 +2,3 @@
 .projectstatistic-block .panel-body {padding: 0;}
 .projectstatistic-block .tab-content {width: 100%;}
 .projectstatistic-block .bg-secondary-pale {background: #F3F6FA;}
-.projectstatistic-block .nav-tabs .nav-item:hover {border-left: 2px solid #2E7FFF; background-color: #FCFDFE;}
-.projectstatistic-block .nav-tabs .nav-item.active {border-left: 2px solid #2E7FFF; background-color: #FCFDFE;}
-.projectstatistic-block .nav-tabs .nav-item:hover > a.link {display: flex!important;}
-.projectstatistic-block .nav-tabs .nav-item > a:before {background: transparent;}
diff --git a/module/block/css/qastatisticblock.ui.css b/module/block/css/qastatisticblock.ui.css
index ba21bf9761..df088cfb17 100644
--- a/module/block/css/qastatisticblock.ui.css
+++ b/module/block/css/qastatisticblock.ui.css
@@ -8,17 +8,6 @@
 .qastatistic-block .chart {margin: auto;}
 .qastatistic-block .story-num {margin: auto;}
 
-.qastatistic-block.block-long .nav-tabs .nav-item {height:36px; line-height: 36px;}
-.qastatistic-block.block-long .nav-tabs .nav-item:hover {border-left: 2px solid #2E7FFF; background-color: #FCFDFE;}
-.qastatistic-block.block-long .nav-tabs .nav-item.active {border-left: 2px solid #2E7FFF; background-color: #FCFDFE;}
-.qastatistic-block.block-long .nav-tabs .nav-item > a {color: #5E626D;}
-.qastatistic-block.block-long .nav-tabs .nav-item > a:before {background: transparent;}
-.qastatistic-block.block-long .nav-tabs .nav-item.active > a {color: #0B0F18;}
-.qastatistic-block.block-long .nav-tabs .nav-item:hover > a {color: #0B0F18;}
-.qastatistic-block.block-long .nav-tabs .nav-item:hover > a.link {display: flex!important;}
-.qastatistic-block.block-long .nav-tabs .nav-item.nav-prev {display: none}
-.qastatistic-block.block-long .nav-tabs .nav-item.nav-next {display: none}
-
 .qastatistic-block.block-sm .nav-tabs .nav-item.active {display: flex!important;}
 .qastatistic-block.block-sm .nav-tabs .nav-item > a {width: 100%;}
 .qastatistic-block.block-sm .nav-tabs .nav-item {display: none}
diff --git a/module/block/ui/executionstatisticblock.html.php b/module/block/ui/executionstatisticblock.html.php
index b987b7d9bf..74b8d85b5c 100644
--- a/module/block/ui/executionstatisticblock.html.php
+++ b/module/block/ui/executionstatisticblock.html.php
@@ -28,10 +28,10 @@ function getExecutionTabs($executions, $blockNavCode): array
     {
         $navTabs[] = li
         (
-            set('class', 'nav-item' . ($execution->id == $selected ? ' active' : '')),
+            set('class', 'nav-item'),
             a
             (
-                set('class', 'ellipsis'),
+                set('class', 'ellipsis title ' . ($execution->id == $selected ? 'active' : '')),
                 set('data-toggle', 'tab'),
                 set('href', "#tab3{$blockNavCode}Content{$execution->id}"),
                 $execution->name
diff --git a/module/block/ui/guideblock.html.php b/module/block/ui/guideblock.html.php
index 2a5e338334..d831f86beb 100644
--- a/module/block/ui/guideblock.html.php
+++ b/module/block/ui/guideblock.html.php
@@ -38,7 +38,7 @@ function getGuideTabs(string $blockNavCode): array
             set('class', 'nav-item w-full'),
             a
             (
-                set('class', 'ellipsis guide-tab text-dark' . ($tab == $selected ? ' active' : '')),
+                set('class', 'ellipsis guide-tab text-dark title ' . ($tab == $selected ? ' active' : '')),
                 set('data-tab', $tab),
                 set('data-toggle', 'tab'),
                 set('href', "#tab{$blockNavCode}Content{$tab}"),
diff --git a/module/block/ui/productstatisticblock.html.php b/module/block/ui/productstatisticblock.html.php
index 9ba933f4b1..c7c146047e 100644
--- a/module/block/ui/productstatisticblock.html.php
+++ b/module/block/ui/productstatisticblock.html.php
@@ -34,10 +34,10 @@ function getProductTabs(array $products, string $blockNavCode, bool $longBlock):
     {
         $navTabs[] = li
         (
-            set('class', 'nav-item nav-switch w-full' . ($product->id == $selected ? ' active' : '')),
+            set('class', 'nav-item nav-switch w-full'),
             a
             (
-                set('class', 'ellipsis text-dark'),
+                set('class', 'ellipsis text-dark title ' . ($product->id == $selected ? ' active' : '')),
                 $longBlock ? set('data-toggle', 'tab') : null,
                 set('href', $longBlock ? "#tab3{$blockNavCode}Content{$product->id}" : helper::createLink('product', 'browse', "productID=$product->id")),
                 $product->name
diff --git a/module/block/ui/projectstatisticblock.html.php b/module/block/ui/projectstatisticblock.html.php
index e2c88edf3d..8df198f765 100644
--- a/module/block/ui/projectstatisticblock.html.php
+++ b/module/block/ui/projectstatisticblock.html.php
@@ -28,10 +28,10 @@ function getProjectTabs($projects, $blockNavCode): array
     {
         $navTabs[] = li
         (
-            set('class', 'nav-item' . ($project->id == $selected ? ' active' : '')),
+            set('class', 'nav-item'),
             a
             (
-                set('class', 'ellipsis'),
+                set('class', 'ellipsis title ' . ($project->id == $selected ? ' active' : '')),
                 set('data-toggle', 'tab'),
                 set('href', "#tab3{$blockNavCode}Content{$project->id}"),
                 $project->name
diff --git a/module/block/ui/qastatisticblock.html.php b/module/block/ui/qastatisticblock.html.php
index 28242f99a5..1dedb5ce3e 100644
--- a/module/block/ui/qastatisticblock.html.php
+++ b/module/block/ui/qastatisticblock.html.php
@@ -28,10 +28,10 @@ function getProductTabs($products, $blockNavCode): array
     {
         $navTabs[] = li
         (
-            set('class', 'nav-item' . ($product->id == $selected ? ' active' : '')),
+            set('class', 'nav-item'),
             a
             (
-                set('class', 'ellipsis'),
+                set('class', 'ellipsis title ' . ($product->id == $selected ? 'active' : '')),
                 set('data-toggle', 'tab'),
                 set('href', "#tab3{$blockNavCode}Content{$product->id}"),
                 $product->name