diff --git a/asciidoctor-stylesheet/sass/components/_asciidoc.scss b/asciidoctor-stylesheet/sass/components/_asciidoc.scss
index ce4b74d126b..3eea4151911 100644
--- a/asciidoctor-stylesheet/sass/components/_asciidoc.scss
+++ b/asciidoctor-stylesheet/sass/components/_asciidoc.scss
@@ -352,6 +352,10 @@ b.button:after {
   //margin-bottom: $panel-margin-bottom * 2;
   border-bottom: $sect-divider-size $sect-divider-style $sect-divider-color;
   padding-bottom: 0.5em;
+  
+  &:hover{
+    overflow-y: scroll !important;
+  }
   > ul {
     //margin-left: 0;
     //margin-left: emCalc(4px);
@@ -484,6 +488,34 @@ b.button:after {
   }
 }
 
+@media (min-width: 1024px){
+  #toc { 
+    width: 90% !important;
+    height: calc(100vh - 385px) !important;  
+    overflow-y: hidden !important;
+    -webkit-mask-image: linear-gradient(to bottom, black 50%, transparent 100%);
+    mask-image: linear-gradient(to bottom, black 50%, transparent 100%);
+  }
+
+  #toc:hover { 
+    overflow-y: scroll !important;
+  }
+
+  #toc::-webkit-scrollbar{
+    width: 16px;
+  }
+
+  #toc::-webkit-scrollbar-track{
+    box-shadow: inset 0 0 3px grey; 
+    border-radius: 5px;
+  }
+  
+  #toc::-webkit-scrollbar-thumb {
+    background: rgb(211, 210, 210); 
+    border-radius: 5px;
+  }
+}
+
 // toc within content
 #content #toc {
   @include panel($panel-bg, $panel-padding, false);
diff --git a/asciidoctor-stylesheet/sass/pages/docs.scss b/asciidoctor-stylesheet/sass/pages/docs.scss
index 7d2bf429c05..0483af69ec6 100644
--- a/asciidoctor-stylesheet/sass/pages/docs.scss
+++ b/asciidoctor-stylesheet/sass/pages/docs.scss
@@ -101,6 +101,8 @@ body.book.toc2.toc-left {
     }
 
     #header {
+      position: sticky !important; 
+      top: 0 !important;
       display: grid;
       grid-template-rows: 0 40px 1fr;
       grid-template-columns: calc(#{$content-max-width} * 0.3) calc(