diff --git a/asciidoctor-stylesheet/sass/components/_asciidoc.scss b/asciidoctor-stylesheet/sass/components/_asciidoc.scss
index ce4b74d126b..c09d6b720b0 100644
--- a/asciidoctor-stylesheet/sass/components/_asciidoc.scss
+++ b/asciidoctor-stylesheet/sass/components/_asciidoc.scss
@@ -391,6 +391,66 @@ b.button:after {
   font-size: 1.2em;
 }
 
+.toc {
+  display: flex;
+  flex-wrap: wrap;
+  li {
+    border: 0.05rem solid rgba(43, 41, 45, 0.2);
+    list-style: none;
+    width: 48%;
+    margin: 1%;
+    border-radius: 0.4rem;
+    padding: 0.75rem;
+    p {
+      &:before {
+        background-size: 90px auto;
+        background-image: url('/images/icons8-facebook_like.png');
+        content: "";
+        display: inline-block;
+        width: 90px;
+        height: 75px;
+        background-repeat: no-repeat;
+        position: relative;
+      }
+      a {
+        height: 100px;
+        position: relative;
+        top: -18px;
+      }
+    }
+  }
+}
+ 
+.chapters {
+  display: flex;
+  flex-wrap: wrap;
+  li {
+    border: 0.05rem solid rgba(43, 41, 45, 0.2);
+    list-style: none;
+    width: 48%;
+    margin: 1%;
+    border-radius: 0.4rem;
+    padding: 0.75rem;
+  }
+  p {
+    &:before {
+      background-size: 90px auto;
+      background-image: url('/images/icons8-facebook_like.png');
+      content: "";
+      display: inline-block;
+      width: 90px;
+      height: 75px;
+      background-repeat: no-repeat;
+      position: relative;
+    }
+    a {
+      height: 100px;
+      position: relative;
+      top: -18px;
+    }
+  }
+}
+
 // IMPORTANT below this breakpoint, toc2 acts as the header toc!!
 @media #{$small} {
   #toctitle {