diff --git a/client/homebrew/editor/snippetbar/snippets/tableOfContents.gen.js b/client/homebrew/editor/snippetbar/snippets/tableOfContents.gen.js
index 8a03b0530..e2a1221eb 100644
--- a/client/homebrew/editor/snippetbar/snippets/tableOfContents.gen.js
+++ b/client/homebrew/editor/snippetbar/snippets/tableOfContents.gen.js
@@ -1,4 +1,5 @@
 const _ = require('lodash');
+const dedent = require('dedent-tabs').default;
 
 const getTOC = (pages)=>{
 	const add1 = (title, page)=>{
@@ -51,13 +52,13 @@ module.exports = function(brew){
 	const pages = brew.text.split('\\page');
 	const TOC = getTOC(pages);
 	const markdown = _.reduce(TOC, (r, g1, idx1)=>{
-		r.push(`- **[${idx1 + 1} ${g1.title}](#p${g1.page})**`);
+		r.push(`\t\t- ### [{{ ${g1.title}}}{{ ${g1.page}}}](#p${g1.page})`);
 		if(g1.children.length){
 			_.each(g1.children, (g2, idx2)=>{
-				r.push(`  - [${idx1 + 1}.${idx2 + 1} ${g2.title}](#p${g2.page})`);
+				r.push(`\t\t  - #### [{{ ${g2.title}}}{{ ${g2.page}}}](#p${g2.page})`);
 				if(g2.children.length){
 					_.each(g2.children, (g3, idx3)=>{
-						r.push(`    - [${idx1 + 1}.${idx2 + 1}.${idx3 + 1} ${g3.title}](#p${g3.page})`);
+						r.push(`\t\t    - [{{ ${g3.title}}}{{ ${g3.page}}}](#p${g3.page})`);
 					});
 				}
 			});
@@ -65,8 +66,11 @@ module.exports = function(brew){
 		return r;
 	}, []).join('\n');
 
-	return `<div class='toc'>
-##### Table Of Contents
+	return dedent`
+		{{toc
+		# Table Of Contents
+
 ${markdown}
-</div>\n`;
+		}}
+		\n`;
 };
diff --git a/client/homebrew/phbStyle/phb.style.less b/client/homebrew/phbStyle/phb.style.less
index ded9462e1..30ecb657a 100644
--- a/client/homebrew/phbStyle/phb.style.less
+++ b/client/homebrew/phbStyle/phb.style.less
@@ -505,19 +505,60 @@ body {
 	-webkit-column-break-inside : avoid;
 	page-break-inside           : avoid;
 	break-inside                : avoid;
+	h1 {
+		text-align    : center;
+		margin-bottom : 0.1cm;
+	}
 	a{
-		color           : black;
+		display         : table;
+		color           : inherit;
 		text-decoration : none;
 		&:hover{
 			text-decoration : underline;
 		}
 	}
+	h4 {
+		margin-top : 0.1cm;
+	}
 	ul{
 		padding-left    : 0;
 		list-style-type : none;
-	}
-	&>ul>li{
-		margin-bottom : 10px;
+		li + li h3 {
+			margin-top  : 0.26cm;
+			line-height : 1em
+		}
+		h3 span:first-child::after {
+			border : none;
+		}
+		span {
+			display : table-cell;
+			&:first-child {
+				position   :       relative;
+				overflow   :       hidden;
+				&::after {
+					content       : "";
+					position      : absolute;
+					bottom        : 0.08cm;        /* Set as you want */
+					margin-left   : 0.06cm;        /* Spacing before dot leaders */
+					width         : 100%;
+					border-bottom : 0.05cm dotted #000;
+				}
+			}
+			&:last-child {
+				font-family		 : BookInsanityRemake;
+				font-size   	 : 0.34cm;
+				font-weight		 : normal;
+				color		       : black;
+				text-align     : right;
+				vertical-align : bottom;       /* Keep Price text bottom-aligned */
+				width          : 1%;
+				padding-left   : 0.06cm;       /* Spacing after dot leaders */
+				/*white-space: nowrap;         /* Uncomment if needed */
+			}
+		}
+		ul { /*List indent*/
+			margin-left : 1em;
+		}
 	}
 }