diff --git a/docs/assets/_custom.scss b/docs/assets/_custom.scss
index cfee7ca7b66eb..9e4b342bb4b1c 100644
--- a/docs/assets/_custom.scss
+++ b/docs/assets/_custom.scss
@@ -87,7 +87,6 @@ aside nav ul {
     width: 0px;
 }
 
-/*
 aside.book-menu nav {
     a:hover {
         font-weight: bold;
@@ -98,7 +97,7 @@ aside.book-menu nav {
         font-weight: bold;
         color: var(--body-font-color);
     }
-}*/
+}
 
 aside.book-menu > li {
     padding: 10px 5px 5px 5px;
diff --git a/flink-docs/README.md b/flink-docs/README.md
index 731a61b3ddd12..e4ed8ca2739b5 100644
--- a/flink-docs/README.md
+++ b/flink-docs/README.md
@@ -29,7 +29,7 @@ To integrate a new endpoint into the generator
 1. Add a new `DocumentingRestEndpoint` class to `RestAPIDocGenerator` that extends the new endpoint class
 2. Add another call to `createHtmlFile` in `RestAPIDocGenerator#main`
 3. Regenerate the documentation by running `mvn package -Dgenerate-rest-docs -pl flink-docs -am -nsu -DskipTests`
-4. Integrate the generated file into the REST API documentation by adding `{% include generated/<file-name>.html %}` to the corresponding markdown file.
+4. Integrate the generated file into the REST API documentation by adding `{{< generated/<file-name> }}` to the corresponding markdown file.
 
 The documentation must be regenerated whenever
 * a handler is added to/removed from a `RestServerEndpoint`
@@ -41,7 +41,7 @@ The `ConfigOptionsDocGenerator` can be use to generate a reference of `ConfigOpt
 
 To integrate an `*Options` class from another package, add another module-package argument pair to `ConfigOptionsDocGenerator#LOCATIONS`.
 
-The files can be generated by running `mvn package -Dgenerate-config-docs -pl flink-docs -am -nsu -DskipTests`, and can be integrated into the documentation using `{% include generated/<file-name>.html %}`.
+The files can be generated by running `mvn package -Dgenerate-config-docs -pl flink-docs -am -nsu -DskipTests`, and can be integrated into the documentation using `{{ include generated/<file-name> >}}`.
 
 The documentation must be regenerated whenever
 * an `*Options` class was added or removed
diff --git a/flink-docs/src/main/java/org/apache/flink/docs/configuration/ConfigOptionsDocGenerator.java b/flink-docs/src/main/java/org/apache/flink/docs/configuration/ConfigOptionsDocGenerator.java
index a8a50c0aae8a4..5869703e97bd7 100644
--- a/flink-docs/src/main/java/org/apache/flink/docs/configuration/ConfigOptionsDocGenerator.java
+++ b/flink-docs/src/main/java/org/apache/flink/docs/configuration/ConfigOptionsDocGenerator.java
@@ -389,7 +389,7 @@ private static boolean shouldBeDocumented(Field field) {
      */
     private static String toHtmlTable(final List<OptionWithMetaInfo> options) {
         StringBuilder htmlTable = new StringBuilder();
-        htmlTable.append("<table class=\"table table-bordered\">\n");
+        htmlTable.append("<table class=\"configuration table table-bordered\">\n");
         htmlTable.append("    <thead>\n");
         htmlTable.append("        <tr>\n");
         htmlTable.append("            <th class=\"text-left\" style=\"width: 20%\">Key</th>\n");
diff --git a/flink-docs/src/main/java/org/apache/flink/docs/rest/RestAPIDocGenerator.java b/flink-docs/src/main/java/org/apache/flink/docs/rest/RestAPIDocGenerator.java
index 50a5decff1c52..b16f1ebf25e3c 100644
--- a/flink-docs/src/main/java/org/apache/flink/docs/rest/RestAPIDocGenerator.java
+++ b/flink-docs/src/main/java/org/apache/flink/docs/rest/RestAPIDocGenerator.java
@@ -160,7 +160,7 @@ private static String createHtmlEntry(MessageHeaders<?, ?, ?> spec) {
 
         StringBuilder sb = new StringBuilder();
         {
-            sb.append("<table class=\"table table-bordered\">\n");
+            sb.append("<table class=\"rest-api table table-bordered\">\n");
             sb.append("  <tbody>\n");
             sb.append("    <tr>\n");
             sb.append(
@@ -220,32 +220,44 @@ private static String createHtmlEntry(MessageHeaders<?, ?, ?> spec) {
         {
             sb.append("    <tr>\n");
             sb.append("      <td colspan=\"2\">\n");
-            sb.append(
-                    "        <button data-toggle=\"collapse\" data-target=\"#"
-                            + reqHash
-                            + "\">Request</button>\n");
-            sb.append("        <div id=\"" + reqHash + "\" class=\"collapse\">\n");
+            sb.append("      <div class=\"book-expand\">\n");
+            sb.append("        <label>\n");
+            sb.append("          <div class=\"book-expand-head flex justify-between\">\n");
+            sb.append("            <span>Request</span>\n");
+            sb.append("            &nbsp;");
+            sb.append("            <span>▾</span>\n");
+            sb.append("          </div>\n");
+            sb.append("          <input type=\"checkbox\" class=\"hidden\">\n");
+            sb.append("          <div class=\"book-expand-content markdown-inner\">\n");
             sb.append("          <pre>\n");
             sb.append("            <code>\n");
             sb.append(requestEntry);
             sb.append("            </code>\n");
             sb.append("          </pre>\n");
-            sb.append("         </div>\n");
+            sb.append("          </div>\n");
+            sb.append("        </label>\n");
+            sb.append("      </div>\n");
             sb.append("      </td>\n");
             sb.append("    </tr>\n");
             sb.append("    <tr>\n");
             sb.append("      <td colspan=\"2\">\n");
-            sb.append(
-                    "        <button data-toggle=\"collapse\" data-target=\"#"
-                            + resHash
-                            + "\">Response</button>\n");
-            sb.append("        <div id=\"" + resHash + "\" class=\"collapse\">\n");
+            sb.append("      <div class=\"book-expand\">\n");
+            sb.append("        <label>\n");
+            sb.append("          <div class=\"book-expand-head flex justify-between\">\n");
+            sb.append("            <span>Response</span>\n");
+            sb.append("            &nbsp;");
+            sb.append("            <span>▾</span>\n");
+            sb.append("          </div>\n");
+            sb.append("          <input type=\"checkbox\" class=\"hidden\">\n");
+            sb.append("          <div class=\"book-expand-content markdown-inner\">\n");
             sb.append("          <pre>\n");
             sb.append("            <code>\n");
             sb.append(responseEntry);
             sb.append("            </code>\n");
             sb.append("          </pre>\n");
-            sb.append("         </div>\n");
+            sb.append("          </div>\n");
+            sb.append("        </label>\n");
+            sb.append("      </div>\n");
             sb.append("      </td>\n");
             sb.append("    </tr>\n");
             sb.append("  </tbody>\n");
diff --git a/flink-docs/src/test/java/org/apache/flink/docs/configuration/ConfigOptionsDocGeneratorTest.java b/flink-docs/src/test/java/org/apache/flink/docs/configuration/ConfigOptionsDocGeneratorTest.java
index cfc64ea92f882..dcec6dc5599c0 100644
--- a/flink-docs/src/test/java/org/apache/flink/docs/configuration/ConfigOptionsDocGeneratorTest.java
+++ b/flink-docs/src/test/java/org/apache/flink/docs/configuration/ConfigOptionsDocGeneratorTest.java
@@ -120,7 +120,7 @@ static class TypeTestConfigGroup {
     @Test
     public void testCreatingTypes() {
         final String expectedTable =
-                "<table class=\"table table-bordered\">\n"
+                "<table class=\"configuration table table-bordered\">\n"
                         + "    <thead>\n"
                         + "        <tr>\n"
                         + "            <th class=\"text-left\" style=\"width: 20%\">Key</th>\n"
@@ -179,7 +179,7 @@ public void testCreatingTypes() {
     @Test
     public void testCreatingDescription() {
         final String expectedTable =
-                "<table class=\"table table-bordered\">\n"
+                "<table class=\"configuration table table-bordered\">\n"
                         + "    <thead>\n"
                         + "        <tr>\n"
                         + "            <th class=\"text-left\" style=\"width: 20%\">Key</th>\n"
@@ -307,7 +307,7 @@ public void testCreatingMultipleGroups() {
         }
 
         assertEquals(
-                "<table class=\"table table-bordered\">\n"
+                "<table class=\"configuration table table-bordered\">\n"
                         + "    <thead>\n"
                         + "        <tr>\n"
                         + "            <th class=\"text-left\" style=\"width: 20%\">Key</th>\n"
@@ -327,7 +327,7 @@ public void testCreatingMultipleGroups() {
                         + "</table>\n",
                 tablesConverted.get("firstGroup"));
         assertEquals(
-                "<table class=\"table table-bordered\">\n"
+                "<table class=\"configuration table table-bordered\">\n"
                         + "    <thead>\n"
                         + "        <tr>\n"
                         + "            <th class=\"text-left\" style=\"width: 20%\">Key</th>\n"
@@ -347,7 +347,7 @@ public void testCreatingMultipleGroups() {
                         + "</table>\n",
                 tablesConverted.get("secondGroup"));
         assertEquals(
-                "<table class=\"table table-bordered\">\n"
+                "<table class=\"configuration table table-bordered\">\n"
                         + "    <thead>\n"
                         + "        <tr>\n"
                         + "            <th class=\"text-left\" style=\"width: 20%\">Key</th>\n"
@@ -393,7 +393,7 @@ static class TestConfigGroupWithOverriddenDefault {
     @Test
     public void testOverrideDefault() {
         final String expectedTable =
-                "<table class=\"table table-bordered\">\n"
+                "<table class=\"configuration table table-bordered\">\n"
                         + "    <thead>\n"
                         + "        <tr>\n"
                         + "            <th class=\"text-left\" style=\"width: 20%\">Key</th>\n"
@@ -442,7 +442,7 @@ public void testSections() throws IOException, ClassNotFoundException {
         Formatter formatter = new HtmlFormatter();
 
         String expected1 =
-                "<table class=\"table table-bordered\">\n"
+                "<table class=\"configuration table table-bordered\">\n"
                         + "    <thead>\n"
                         + "        <tr>\n"
                         + "            <th class=\"text-left\" style=\"width: 20%\">Key</th>\n"
@@ -480,7 +480,7 @@ public void testSections() throws IOException, ClassNotFoundException {
                         + "</table>\n";
 
         String expected2 =
-                "<table class=\"table table-bordered\">\n"
+                "<table class=\"configuration table table-bordered\">\n"
                         + "    <thead>\n"
                         + "        <tr>\n"
                         + "            <th class=\"text-left\" style=\"width: 20%\">Key</th>\n"
@@ -543,7 +543,7 @@ static class TestConfigGroupWithExclusion {
     @Test
     public void testConfigOptionExclusion() {
         final String expectedTable =
-                "<table class=\"table table-bordered\">\n"
+                "<table class=\"configuration table table-bordered\">\n"
                         + "    <thead>\n"
                         + "        <tr>\n"
                         + "            <th class=\"text-left\" style=\"width: 20%\">Key</th>\n"
diff --git a/flink-docs/src/test/java/org/apache/flink/docs/configuration/ConfigOptionsDocsCompletenessITCase.java b/flink-docs/src/test/java/org/apache/flink/docs/configuration/ConfigOptionsDocsCompletenessITCase.java
index 36e6920c1e03f..14d59e4596729 100644
--- a/flink-docs/src/test/java/org/apache/flink/docs/configuration/ConfigOptionsDocsCompletenessITCase.java
+++ b/flink-docs/src/test/java/org/apache/flink/docs/configuration/ConfigOptionsDocsCompletenessITCase.java
@@ -47,7 +47,6 @@
 import java.util.stream.Collectors;
 import java.util.stream.Stream;
 
-import static org.apache.flink.docs.configuration.ConfigOptionsDocGenerator.COMMON_SECTION_FILE_NAME;
 import static org.apache.flink.docs.configuration.ConfigOptionsDocGenerator.DEFAULT_PATH_PREFIX;
 import static org.apache.flink.docs.configuration.ConfigOptionsDocGenerator.LOCATIONS;
 import static org.apache.flink.docs.configuration.ConfigOptionsDocGenerator.extractConfigOptions;
@@ -222,20 +221,11 @@ private static void compareDocumentedAndExistingOptions(
         }
     }
 
-    private static Map<String, List<DocumentedOption>> parseDocumentedCommonOptions()
-            throws IOException {
-        final String rootDir = ConfigOptionsDocGeneratorTest.getProjectRootDir();
-
-        Path commonSection =
-                Paths.get(rootDir, "docs", "_includes", "generated", COMMON_SECTION_FILE_NAME);
-        return parseDocumentedOptionsFromFile(commonSection).stream()
-                .collect(Collectors.groupingBy(option -> option.key, Collectors.toList()));
-    }
-
     private static Map<String, List<DocumentedOption>> parseDocumentedOptions() throws IOException {
         final String rootDir = ConfigOptionsDocGeneratorTest.getProjectRootDir();
 
-        Path includeFolder = Paths.get(rootDir, "docs", "_includes", "generated").toAbsolutePath();
+        Path includeFolder =
+                Paths.get(rootDir, "docs", "layouts", "shortcodes", "generated").toAbsolutePath();
         return Files.list(includeFolder)
                 .filter(
                         (path) -> {
diff --git a/pom.xml b/pom.xml
index 2135d0017fad2..44d0c7be0f2c6 100644
--- a/pom.xml
+++ b/pom.xml
@@ -145,7 +145,7 @@ under the License.
 			to revisit the impact at that time.
 		-->
 		<minikdc.version>3.2.0</minikdc.version>
-		<generated.docs.dir>./docs/_includes/generated</generated.docs.dir>
+		<generated.docs.dir>./docs/layouts/shortcodes/generated</generated.docs.dir>
 		<hive.version>2.3.4</hive.version>
 		<hive-2.2.0-orc-version>1.4.3</hive-2.2.0-orc-version>
 		<orc.version>1.5.6</orc.version>