diff --git a/source/generate.ts b/source/generate.ts
index dfa5937..ea43c71 100644
--- a/source/generate.ts
+++ b/source/generate.ts
@@ -14,7 +14,8 @@ import matter from "gray-matter" // parse markdown metadata
 import toc from "markdown-toc" // table of contents generation
 import markdownIt from "markdown-it" // rendering markdown
 import hljs from "highlight.js" // code block highlighting
-import tm from "markdown-it-texmath" // rendering mathematical expression
+import markdownItTexMath from "markdown-it-texmath" // rendering mathematical expression
+import markdownItAnchor from "markdown-it-anchor" // markdown anchor
 import katex from "katex" // rendering mathematical expression
 
 const markdownPath = "./markdown" // where it will look for markdown documents
@@ -49,7 +50,6 @@ interface Map {
 			title: string
 			date: string
 			tags: string[]
-			toc: string
 			preview: string
 		}
 	}
@@ -58,7 +58,6 @@ interface Map {
 	series: {
 		[key: string]: {
 			title: string
-			toc: string // in series home page and ≡ (3 horizontal line) button
 			length: number
 			order: string[] // url order
 			tags: string[]
@@ -112,11 +111,13 @@ const md = markdownIt({
 		return "" // use external default escaping
 	},
 	html: true,
-}).use(tm, {
-	engine: katex,
-	delimiters: "dollars",
-	katexOptions: { macros: { "\\RR": "\\mathbb{R}" } },
 })
+	.use(markdownItTexMath, {
+		engine: katex,
+		delimiters: "dollars",
+		katexOptions: { macros: { "\\RR": "\\mathbb{R}" } },
+	})
+	.use(markdownItAnchor, {})
 
 // converts file path to url
 function path2URL(pathToConvert: string): string {
@@ -156,12 +157,7 @@ function writeToJSON(JSONFilePath: string, dataToWrite: string) {
 	})
 
 	// write content to json file
-	fs.writeFileSync(
-		JSONFilePath,
-		JSON.stringify({
-			content: dataToWrite.trim(),
-		})
-	)
+	fs.writeFileSync(JSONFilePath, dataToWrite)
 }
 
 // A recursive function that calls itself for every files and directories that it finds
@@ -236,7 +232,10 @@ function recursiveParse(
 
 			writeToJSON(
 				`${contentDirectoryPath}${urlPath}.json`,
-				markdownData.content
+				JSON.stringify({
+					content: markdownData.content,
+					toc: toc(markdownRaw).json,
+				})
 			)
 
 			// Parse data that will be written to map.js
@@ -247,7 +246,6 @@ function recursiveParse(
 				readTime: humanizedDuration,
 				wordCount: totalWords,
 				tags: [],
-				toc: toc(markdownRaw).content,
 			}
 
 			// content preview
@@ -304,7 +302,9 @@ function recursiveParse(
 
 			writeToJSON(
 				`${contentDirectoryPath}/unsearchable${urlPath}.json`,
-				markdownData.content
+				JSON.stringify({
+					content: markdownData.content,
+				})
 			)
 
 			// Parse data that will be written to map.js
@@ -337,7 +337,10 @@ function recursiveParse(
 
 			writeToJSON(
 				`${contentDirectoryPath}${urlPath}.json`,
-				markdownData.content
+				JSON.stringify({
+					content: markdownData.content,
+					toc: toc(markdownRaw).json,
+				})
 			)
 
 			// Parse data that will be written to map.js
@@ -348,7 +351,6 @@ function recursiveParse(
 				readTime: humanizedDuration,
 				wordCount: totalWords,
 				tags: [],
-				toc: toc(markdownData.content).content,
 			}
 
 			// content preview
diff --git a/source/package.json b/source/package.json
index 80b07ba..d808f7f 100644
--- a/source/package.json
+++ b/source/package.json
@@ -23,6 +23,7 @@
 		"@fortawesome/react-fontawesome": "^0.1.14",
 		"@types/elasticlunr": "^0.9.2",
 		"@types/highlight.js": "^10.1.0",
+		"@types/react-router-hash-link": "^2.4.1",
 		"date-fns": "^2.23.0",
 		"elasticlunr": "^0.9.5",
 		"gray-matter": "^4.0.3",
@@ -30,9 +31,10 @@
 		"katex": "^0.13.13",
 		"local-storage-fallback": "^4.1.2",
 		"markdown-it": "^12.2.0",
+		"markdown-it-anchor": "^8.1.2",
+		"markdown-it-attrs": "^4.0.0",
 		"markdown-it-texmath": "^0.9.1",
 		"markdown-toc": "^1.2.0",
-		"marked": "^2.1.3",
 		"query-string": "^7.0.1",
 		"react": "^17.0.2",
 		"react-collapse": "^5.1.0",
@@ -41,6 +43,7 @@
 		"react-dom": "^17.0.2",
 		"react-helmet-async": "^1.0.9",
 		"react-router-dom": "^5.2.0",
+		"react-router-hash-link": "^2.4.3",
 		"react-scripts": "^4.0.3",
 		"react-tooltip": "^4.2.21",
 		"read-time-estimate": "^0.0.3",
diff --git a/source/src/App.tsx b/source/src/App.tsx
index 5066154..086bc0c 100644
--- a/source/src/App.tsx
+++ b/source/src/App.tsx
@@ -31,6 +31,7 @@ html, body, #root {
 	margin: 0;
 	display: flex;
 	flex-flow: column;
+	line-height: 1.5rem;
 	background-color: ${(props) =>
 		theming.theme(props.theme.currentTheme, {
 			light: theming.light.backgroundColor1,
@@ -161,7 +162,7 @@ table tr:nth-child(even){
 		})};
 }
 
-.link-color a {
+.white-link a {
 	text-decoration: none;
 	color: ${theming.color.linkColor};
 
@@ -170,10 +171,6 @@ table tr:nth-child(even){
 	}
 }
 
-p {
-	 line-height: 1.5rem;
-}
-
 blockquote {
 	background-color: ${(props) =>
 		theming.theme(props.theme.currentTheme, {
@@ -344,7 +341,7 @@ export default class App extends React.Component<AppProps, AppState> {
 
 									<Route exact path="/:path*">
 										{({ match }) => (
-											<Page key={match.params.path} />
+											<Page key={match?.params.path} />
 										)}
 									</Route>
 								</Switch>
diff --git a/source/src/components/PostCard.tsx b/source/src/components/PostCard.tsx
index 0e8e0f6..051d240 100644
--- a/source/src/components/PostCard.tsx
+++ b/source/src/components/PostCard.tsx
@@ -1,5 +1,4 @@
 import React from "react"
-import marked from "marked"
 import styled from "styled-components"
 import { Link } from "react-router-dom"
 
@@ -118,9 +117,9 @@ export default class PostCard extends React.Component<PostCardProps> {
 
 				<hr />
 				<StyledPostCardContent
-					className="link-color"
+					className="white-link"
 					dangerouslySetInnerHTML={{
-						__html: marked(this.props.postData.preview),
+						__html: this.props.postData.preview,
 					}}
 				></StyledPostCardContent>
 				<small>
diff --git a/source/src/pages/Page.tsx b/source/src/pages/Page.tsx
index 17fc927..249468d 100644
--- a/source/src/pages/Page.tsx
+++ b/source/src/pages/Page.tsx
@@ -1,8 +1,8 @@
 import React from "react"
-import marked from "marked"
 import { Helmet } from "react-helmet-async"
 import { Link } from "react-router-dom"
 import styled from "styled-components"
+import { HashLink } from "react-router-hash-link"
 import { Collapse } from "react-collapse"
 import storage from "local-storage-fallback"
 
@@ -92,6 +92,22 @@ const StyledCollapseContainer = styled.div`
 	}
 `
 
+function parseToc(json) {
+	console.log(json)
+
+	return (
+		<ol>
+			{json.map((elem) => (
+				<li key={elem.slug}>
+					<HashLink smooth to={location.pathname + "#" + elem.slug}>
+						{elem.content}
+					</HashLink>
+				</li>
+			))}
+		</ol>
+	)
+}
+
 interface PageProps {}
 
 interface PageState {
@@ -203,11 +219,15 @@ export default class Page extends React.Component<PageProps, PageState> {
 		}
 
 		const fetched_content = _isUnsearchable
-			? (await import(`../data/content/unsearchable${url}.json`)).content
-			: (await import(`../data/content${url}.json`)).content
+			? await import(`../data/content/unsearchable${url}.json`)
+			: await import(`../data/content${url}.json`)
 
-		fetchedPage.content = fetched_content ? fetched_content : "No content"
-		fetchedPage.toc = fetchedPage?.toc ? fetchedPage.toc : undefined
+		fetchedPage.content = fetched_content.content
+			? fetched_content.content
+			: "No content"
+		fetchedPage.toc = fetched_content.toc
+			? parseToc(fetched_content.toc)
+			: undefined
 		fetchedPage.title = fetchedPage?.title ? fetchedPage.title : "No title"
 		if (!_isUnsearchable) {
 			fetchedPage.date = fetchedPage?.date
@@ -301,47 +321,47 @@ export default class Page extends React.Component<PageProps, PageState> {
 
 						<hr />
 
-						<StyledTocToggleButton
-							onClick={() => {
-								this.setState({
-									isTocOpened: !this.state.isTocOpened,
-								})
-							}}
-						>
-							<strong>Table of Content </strong>
-							{this.state.isTocOpened ? (
-								<FontAwesomeIcon icon={faCaretUp} />
-							) : (
-								<FontAwesomeIcon icon={faCaretDown} />
-							)}
-						</StyledTocToggleButton>
 						{
 							// add table of contents if it exists
 							this.state.fetchedPage.toc && (
-								<StyledCollapseContainer>
-									<Collapse isOpened={this.state.isTocOpened}>
-										<div>
-											<div
-												className="link-color"
-												dangerouslySetInnerHTML={{
-													__html: marked(
-														this.state.fetchedPage
-															.toc
-													),
-												}}
-											></div>
-										</div>
-									</Collapse>
-								</StyledCollapseContainer>
+								<>
+									<StyledTocToggleButton
+										onClick={() => {
+											this.setState({
+												isTocOpened:
+													!this.state.isTocOpened,
+											})
+										}}
+									>
+										<strong>Table of Content </strong>
+										{this.state.isTocOpened ? (
+											<FontAwesomeIcon icon={faCaretUp} />
+										) : (
+											<FontAwesomeIcon
+												icon={faCaretDown}
+											/>
+										)}
+									</StyledTocToggleButton>
+									<StyledCollapseContainer>
+										<Collapse
+											isOpened={this.state.isTocOpened}
+										>
+											<div className="white-link">
+												{this.state.fetchedPage.toc}
+											</div>
+										</Collapse>
+									</StyledCollapseContainer>
+									<hr />
+								</>
 							)
 						}
-						<hr />
+
 						<div
-							className="link-color"
+							className="white-link"
 							dangerouslySetInnerHTML={{
-								__html: marked(this.state.fetchedPage.content),
+								__html: this.state.fetchedPage.content,
 							}}
-						></div>
+						/>
 					</div>
 				</>
 			)
diff --git a/source/yarn.lock b/source/yarn.lock
index 3b26a7f..e732ff2 100644
--- a/source/yarn.lock
+++ b/source/yarn.lock
@@ -1840,6 +1840,11 @@
   dependencies:
     highlight.js "*"
 
+"@types/history@*":
+  version "4.7.9"
+  resolved "https://registry.yarnpkg.com/@types/history/-/history-4.7.9.tgz#1cfb6d60ef3822c589f18e70f8b12f9a28ce8724"
+  integrity sha512-MUc6zSmU3tEVnkQ78q0peeEjKWPUADMlC/t++2bI8WnAG2tvYRPIgHG8lWkXwqc8MsUF6Z2MOf+Mh5sazOmhiQ==
+
 "@types/hoist-non-react-statics@*":
   version "3.3.1"
   resolved "https://registry.yarnpkg.com/@types/hoist-non-react-statics/-/hoist-non-react-statics-3.3.1.tgz#1124aafe5118cb591977aeb1ceaaed1070eb039f"
@@ -1929,6 +1934,31 @@
   dependencies:
     "@types/react" "*"
 
+"@types/react-router-dom@*":
+  version "5.1.8"
+  resolved "https://registry.yarnpkg.com/@types/react-router-dom/-/react-router-dom-5.1.8.tgz#bf3e1c8149b3d62eaa206d58599de82df0241192"
+  integrity sha512-03xHyncBzG0PmDmf8pf3rehtjY0NpUj7TIN46FrT5n1ZWHPZvXz32gUyNboJ+xsL8cpg8bQVLcllptcQHvocrw==
+  dependencies:
+    "@types/history" "*"
+    "@types/react" "*"
+    "@types/react-router" "*"
+
+"@types/react-router-hash-link@^2.4.1":
+  version "2.4.1"
+  resolved "https://registry.yarnpkg.com/@types/react-router-hash-link/-/react-router-hash-link-2.4.1.tgz#9e5da328817e12f489a2005613857cbf50127e61"
+  integrity sha512-SPVymyscQUBWMAPEpAn3I35MQXarTx0rOPmcfHl1xWYaTSDP5kxQnrFjmMxJlX5mjIPVHb3XBm8t6DTQNjkGEQ==
+  dependencies:
+    "@types/react" "*"
+    "@types/react-router-dom" "*"
+
+"@types/react-router@*":
+  version "5.1.16"
+  resolved "https://registry.yarnpkg.com/@types/react-router/-/react-router-5.1.16.tgz#f3ba045fb96634e38b21531c482f9aeb37608a99"
+  integrity sha512-8d7nR/fNSqlTFGHti0R3F9WwIertOaaA1UEB8/jr5l5mDMOs4CidEgvvYMw4ivqrBK+vtVLxyTj2P+Pr/dtgzg==
+  dependencies:
+    "@types/history" "*"
+    "@types/react" "*"
+
 "@types/react@*":
   version "17.0.5"
   resolved "https://registry.yarnpkg.com/@types/react/-/react-17.0.5.tgz#3d887570c4489011f75a3fc8f965bf87d09a1bea"
@@ -7645,6 +7675,16 @@ map-visit@^1.0.0:
   dependencies:
     object-visit "^1.0.0"
 
+markdown-it-anchor@^8.1.2:
+  version "8.1.2"
+  resolved "https://registry.yarnpkg.com/markdown-it-anchor/-/markdown-it-anchor-8.1.2.tgz#1f26b102005cb7750d5159d06ba3cfa9400ebc3d"
+  integrity sha512-9D58TKK4dakqmjcmVuqHoB3ntKBpQJ0Ld38B83aiHJcBD72IZIyPjNtihPA6ayRI5WD33e1W68mArliNLHCprg==
+
+markdown-it-attrs@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/markdown-it-attrs/-/markdown-it-attrs-4.0.0.tgz#eadae3ea0c7d17c5e83b98a4ec95a47f4e4960f5"
+  integrity sha512-uLjtdCmhhmL3BuZsReYkFxk74qKjj5ahe34teBpOCJ4hYZZl7/ftLyXWLowngC2moRkbLEvKwN/7TMwbhbHE/A==
+
 markdown-it-texmath@^0.9.1:
   version "0.9.1"
   resolved "https://registry.yarnpkg.com/markdown-it-texmath/-/markdown-it-texmath-0.9.1.tgz#fdf1442afbca474e9170b9707b6155125384bae2"
@@ -7684,11 +7724,6 @@ markdown-toc@^1.2.0:
     repeat-string "^1.6.1"
     strip-color "^0.1.0"
 
-marked@^2.1.3:
-  version "2.1.3"
-  resolved "https://registry.yarnpkg.com/marked/-/marked-2.1.3.tgz#bd017cef6431724fd4b27e0657f5ceb14bff3753"
-  integrity sha512-/Q+7MGzaETqifOMWYEA7HVMaZb4XbcRfaOzcSsHZEith83KGlvaSG33u0SKu89Mj5h+T8V2hM+8O45Qc5XTgwA==
-
 math-random@^1.0.1:
   version "1.0.4"
   resolved "https://registry.yarnpkg.com/math-random/-/math-random-1.0.4.tgz#5dd6943c938548267016d4e34f057583080c514c"
@@ -9794,6 +9829,13 @@ react-router-dom@^5.2.0:
     tiny-invariant "^1.0.2"
     tiny-warning "^1.0.0"
 
+react-router-hash-link@^2.4.3:
+  version "2.4.3"
+  resolved "https://registry.yarnpkg.com/react-router-hash-link/-/react-router-hash-link-2.4.3.tgz#570824d53d6c35ce94d73a46c8e98673a127bf08"
+  integrity sha512-NU7GWc265m92xh/aYD79Vr1W+zAIXDWp3L2YZOYP4rCqPnJ6LI6vh3+rKgkidtYijozHclaEQTAHaAaMWPVI4A==
+  dependencies:
+    prop-types "^15.7.2"
+
 react-router@5.2.0:
   version "5.2.0"
   resolved "https://registry.yarnpkg.com/react-router/-/react-router-5.2.0.tgz#424e75641ca8747fbf76e5ecca69781aa37ea293"