diff --git a/src/app.html b/src/app.html
index 2a3de6a..8d94225 100644
--- a/src/app.html
+++ b/src/app.html
@@ -7,30 +7,26 @@
 		<link
 			rel="apple-touch-icon"
 			sizes="180x180"
-			href="%sveltekit.assets%/favicons/apple-touch-icon.png"
+			href="%sveltekit.assets%/favicon_io/apple-touch-icon.png"
 		/>
 		<link
 			rel="icon"
 			type="image/png"
 			sizes="32x32"
-			href="%sveltekit.assets%/favicons/favicon-32x32.png"
+			href="%sveltekit.assets%/favicon_io/favicon-32x32.png"
 		/>
 		<link
 			rel="icon"
 			type="image/png"
 			sizes="16x16"
-			href="%sveltekit.assets%/favicons/favicon-16x16.png"
+			href="%sveltekit.assets%/favicon_io/favicon-16x16.png"
 		/>
-		<link rel="manifest" href="%sveltekit.assets%/favicons/site.webmanifest" />
-		<link
-			rel="mask-icon"
-			href="%sveltekit.assets%/favicons/safari-pinned-tab.svg"
-			color="#0ca4a5"
-		/>
-		<link rel="shortcut icon" href="%sveltekit.assets%/favicons/favicon.ico" />
+		<link rel="manifest" href="%sveltekit.assets%/favicon_io/site.webmanifest" />
+
+		<link rel="shortcut icon" href="%sveltekit.assets%/favicon_io/favicon.ico" />
 
-		<link rel="icon" href="%sveltekit.assets%/favicons/favicon.png" />
-		<link rel="icon" type="image/x-icon" href="/favicons/favicon.ico" />
+		<link rel="icon" href="%sveltekit.assets%/favicon_io/favicon.ico" />
+		<link rel="icon" type="image/x-icon" href="/favicon_io/favicon.ico" />
 
 		<!-- Tell browser this site is responsive -->
 		<meta name="viewport" content="width=device-width, initial-scale=1" />
diff --git a/src/lib/components/atoms/Banner.svelte b/src/lib/components/atoms/Banner.svelte
index 83bf6ea..5e9051c 100644
--- a/src/lib/components/atoms/Banner.svelte
+++ b/src/lib/components/atoms/Banner.svelte
@@ -14,7 +14,7 @@
 <style lang="scss">
 	.svg-container {
 		height: 480px;
-		background-image: url("data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" width='900' height='10' viewBox='0 0 768 480' fill='rgb(254, 74, 30)'><path d='M1005.2 123.646C1027.43 11.7464 953.881 -97.3506 843.527 -126.92L138.041 -315.954C40.5775 -342.07 -63.6767 -288.152 -91.5498 -191.16C-119.946 -92.2144 -61.7805 10.2473 37.2454 36.7812L306.002 108.794L55.7571 263.014C-106.71 363.089 -70.6249 608.894 113.559 658.246C170.006 673.371 230.427 665.068 280.715 635.209L900.796 267.959C954.822 237.428 993.036 184.656 1005.25 123.451L1005.2 123.646Z' fill='rgb(254, 74, 30)' fill-opacity='1'/></svg>");
+		background-image: url("data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" width='900' height='10' viewBox='0 0 768 480' fill='rgb(254, 74, 30)'><path d='M1005.2 123.646C1027.43 11.7464 953.881 -97.3506 843.527 -126.92L138.041 -315.954C40.5775 -342.07 -63.6767 -288.152 -91.5498 -191.16C-119.946 -92.2144 -61.7805 10.2473 37.2454 36.7812L306.002 108.794L55.7571 263.014C-106.71 363.089 -70.6249 608.894 113.559 658.246C170.006 673.371 230.427 665.068 280.715 635.209L900.796 267.959C954.822 237.428 993.036 184.656 1005.25 123.451L1005.2 123.646Z' fill='rgb(245, 245, 245)' fill-opacity='.12'/></svg>");
 		background-size: cover;
 		background-repeat: no-repeat;
 		background-position: center;
diff --git a/src/lib/components/atoms/HeroCard.svelte b/src/lib/components/atoms/HeroCard.svelte
index f2b0770..f30c6fb 100644
--- a/src/lib/components/atoms/HeroCard.svelte
+++ b/src/lib/components/atoms/HeroCard.svelte
@@ -28,14 +28,14 @@
 <style lang="scss">
 	.details-card {
 		background-color: rgba(26, 26, 26, 0.48);
-		padding: 1.5rem;
+		padding: 1.4rem;
 		border-radius: 1.5rem;
 
 		p {
 			color: rgba(245, 245, 245, 0.8);
 			font-size: 16px;
-			min-height: 100px;
-			margin-top: 28px;
+			margin-block: 28px;
+			line-height: 1.5;
 		}
 	}
 
diff --git a/src/lib/components/atoms/Slider.svelte b/src/lib/components/atoms/Slider.svelte
index bf451fe..87f40b6 100644
--- a/src/lib/components/atoms/Slider.svelte
+++ b/src/lib/components/atoms/Slider.svelte
@@ -10,7 +10,6 @@
 <div class="slider-container">
 	{#each titleArr as item}
 		<div class={item.link ? 'has-link' : ''}>
-			<!-- Render title and wrap with a link if available -->
 			{#if item.link}
 				<a href={item.link} target="_blank" rel="noopener noreferrer">
 					<p>{item.title}</p>
@@ -37,10 +36,6 @@
 		position: relative;
 		left: 0;
 
-		@media (min-width: 2080px) {
-			justify-content: center;
-		}
-
 		div {
 			flex: 0 0 auto;
 			width: 280px;
@@ -52,7 +47,7 @@
 			border-radius: 1.5rem;
 			background-color: rgba(255, 49, 0, 0.8);
 			box-sizing: border-box;
-			border: 1px solid transparent;
+			border: 2px solid transparent;
 
 			a {
 				color: rgba(245, 245, 245, 0.96);
@@ -61,7 +56,7 @@
 		}
 
 		div.has-link:hover {
-			border: 1px solid rgba(245, 245, 245, 0.92);
+			border: 2px solid rgba(245, 245, 245, 0.92);
 			cursor: pointer;
 		}
 
diff --git a/src/lib/components/atoms/Table.svelte b/src/lib/components/atoms/Table.svelte
index 40c86b9..dbc9bec 100644
--- a/src/lib/components/atoms/Table.svelte
+++ b/src/lib/components/atoms/Table.svelte
@@ -36,9 +36,11 @@
 	</table>
 </div>
 
-<style>
+<style lang="scss">
+	@import '$lib/scss/breakpoints.scss';
+
 	.table-container {
-		overflow-x: auto;
+		overflow-x: auto; // Allows horizontal scrolling
 		margin-top: 3rem;
 		padding-inline: 1.5rem;
 	}
@@ -53,27 +55,25 @@
 		border-bottom: 1px solid black;
 		padding: 8px;
 		text-align: left;
-		white-space: nowrap;
-	}
-
-	/* Scrollbar styles */
-	.table-container::-webkit-scrollbar {
-		height: 12px; /* Adjust the height of the scrollbar */
+		white-space: normal; // Change from nowrap to normal for better wrapping
+		overflow: hidden; // Hide overflowing content
+		text-overflow: ellipsis; // Add ellipsis for overflowing text
 	}
 
-	.table-container::-webkit-scrollbar-track {
-		background: #f1f1f1; /* Background of the scrollbar track */
+	// Media queries for responsiveness
+	@include for-phone-only {
+		th,
+		td {
+			padding: 4px; // Reduce padding for smaller screens
+			font-size: 12px; // Reduce font size for smaller screens
+		}
 	}
 
-	.table-container::-webkit-scrollbar-thumb {
-		background-color: rgba(255, 49, 0, 1); /* The sliding part of the scrollbar */
-		border-radius: 10px; /* Rounded corners for the scrollbar */
-		border: 2px solid #f1f1f1; /* Optional: border around the scrollbar thumb */
-	}
-
-	/* Firefox scrollbar styling */
-	.table-container {
-		scrollbar-width: thin; /* For Firefox */
-		scrollbar-color: rgba(255, 49, 0, 1) #f1f1f1; /* Thumb color and track color */
+	@include for-tablet-portrait-up {
+		th,
+		td {
+			padding: 8px; // Normal padding for tablets and up
+			font-size: 14px; // Normal font size for tablets and up
+		}
 	}
 </style>
diff --git a/src/lib/components/atoms/TableOfContents.svelte b/src/lib/components/atoms/TableOfContents.svelte
index a0bc5b3..0cc7e2e 100644
--- a/src/lib/components/atoms/TableOfContents.svelte
+++ b/src/lib/components/atoms/TableOfContents.svelte
@@ -4,6 +4,7 @@
 	interface Section {
 		name: string;
 		id: string;
+		subsections?: Section[];
 	}
 
 	export let sections: Section[] = [];
@@ -30,6 +31,14 @@
 			if (sectionElement) {
 				observer.observe(sectionElement);
 			}
+			if (section.subsections) {
+				section.subsections.forEach((subsection) => {
+					const subsectionElement = document.getElementById(subsection.id);
+					if (subsectionElement) {
+						observer.observe(subsectionElement);
+					}
+				});
+			}
 		});
 
 		return () => {
@@ -43,6 +52,15 @@
 		{#each sections as section}
 			<li class={section.id === activeSection ? 'active' : ''}>
 				<a href={'#' + section.id}>{section.name}</a>
+				{#if section.subsections && section.subsections.length > 0}
+					<ul class="sublist">
+						{#each section.subsections as subsection}
+							<li class={subsection.id === activeSection ? 'active' : ''}>
+								<a href={'#' + subsection.id}>{subsection.name}</a>
+							</li>
+						{/each}
+					</ul>
+				{/if}
 			</li>
 		{/each}
 	</ul>
@@ -53,7 +71,7 @@
 
 	.sticky-nav {
 		background: rgba(26, 26, 26, 1);
-		width: 350px;
+		width: 300px;
 		padding-inline: 0;
 		position: sticky;
 		top: 40px;
@@ -64,18 +82,40 @@
 		list-style: none;
 		padding: 0;
 		margin: 0;
-	}
 
-	.active {
-		font-weight: bold;
-	}
+		li {
+			margin-top: 16px;
+
+			a {
+				color: rgba(245, 245, 245, 0.96);
+				font-size: 0.875rem;
+				text-decoration: none;
 
-	a {
-		color: rgba(245, 245, 245, 0.96);
-		font-size: 0.875rem;
+				&:hover {
+					color: rgba(255, 49, 0, 0.96);
+				}
+			}
 
-		&:hover {
-			color: rgba(255, 49, 0, 0.96);
+			&.active a {
+				font-weight: bold;
+				color: rgba(255, 49, 0, 0.96);
+			}
+
+			/* Sublist styling */
+			ul.sublist {
+				margin-left: 20px;
+				list-style-type: none;
+				margin-top: 16px;
+
+				li {
+					margin-top: 8px;
+
+					ul.sublist {
+						margin-left: 20px;
+						list-style-type: circle;
+					}
+				}
+			}
 		}
 	}
 </style>
diff --git a/src/lib/components/molecules/Callout.svelte b/src/lib/components/molecules/Callout.svelte
index e5e451b..ce6b206 100644
--- a/src/lib/components/molecules/Callout.svelte
+++ b/src/lib/components/molecules/Callout.svelte
@@ -18,54 +18,38 @@
 			{/if}
 		</div>
 	{/if}
-	<slot />
+	<div class="content">
+		<slot />
+	</div>
 </div>
 
 <style lang="scss">
 	.callout-block {
-		--bg-color: var(--color--page-background);
-		--accent-color: transparent;
-		--text-color: var(--color--text);
-
-		margin: 40px 0 30px;
-		padding: 25px 25px;
-		border-top-right-radius: 10px;
-		border-bottom-right-radius: 10px;
-		background: var(--bg-color);
-		color: var(--text-color);
-		border-left: 4px solid var(--accent-color);
-
-		position: relative;
+		display: flex;
+		gap: 1rem;
+		background: rgba(36, 36, 36, 1);
+		color: rgba(245, 245, 245, 0.96);
+		border: 1px solid rgba(245, 245, 245, 0.08);
+		border-radius: 1.5rem;
+		padding: 24px;
+		margin-block: 1.5rem;
 
 		.icon-wrapper {
-			position: absolute;
-			width: 50px;
-			height: 50px;
-			top: 0;
-			left: 0;
-			transform: translate(calc(-50% - 1.5px), -50%);
-			background: var(--color--post-page-background);
-			padding: 8px;
-			border-radius: 50%;
-			fill: var(--accent-color);
-			color: var(--accent-color);
+			background-color: transparent;
+			flex-shrink: 0;
 		}
 
 		&.info {
-			--bg-color: var(--color--callout-background--info);
-			--accent-color: var(--color--callout-accent--info);
+			background-color: rgba(245, 245, 245, 0.08);
 		}
 		&.warning {
-			--bg-color: var(--color--callout-background--warning);
-			--accent-color: var(--color--callout-accent--warning);
+			background-color: rgba(245, 245, 245, 0.08);
 		}
 		&.error {
-			--bg-color: var(--color--callout-background--error);
-			--accent-color: var(--color--callout-accent--error);
+			background-color: rgba(245, 245, 245, 0.08);
 		}
 		&.success {
-			--bg-color: var(--color--callout-background--success);
-			--accent-color: var(--color--callout-accent--success);
+			background-color: rgba(245, 245, 245, 0.08);
 		}
 	}
 </style>
diff --git a/src/lib/components/molecules/CodeBlock.svelte b/src/lib/components/molecules/CodeBlock.svelte
index bb6d385..3b2397f 100644
--- a/src/lib/components/molecules/CodeBlock.svelte
+++ b/src/lib/components/molecules/CodeBlock.svelte
@@ -45,7 +45,7 @@
 	.code-block {
 		display: block;
 		position: relative;
-		background-color: var(--color--code-background);
+		background-color: rgba(245, 245, 245, 0.08);
 		color: var(--color--code-text);
 		font-family: var(--font--mono);
 		font-size: 1rem;
@@ -77,7 +77,7 @@
 			position: absolute;
 			right: 0;
 			top: -15px;
-			background: inherit;
+			background-color: rgba(36, 36, 36, 1);
 			border-radius: 8px;
 			padding: 5px 10px;
 			z-index: 2;
@@ -85,7 +85,7 @@
 		}
 
 		.filename {
-			background: inherit;
+			background-color: rgba(245, 245, 245, 0.08);
 			border-top-left-radius: 8px;
 			border-top-right-radius: 8px;
 			margin-bottom: -2px;
@@ -119,7 +119,7 @@
 		}
 
 		.copy-button-gray:hover {
-			background-color: #2d3748;
+			background-color: rgba(245, 245, 245, 0.08);
 		}
 	}
 </style>
diff --git a/src/lib/components/organisms/Footer.svelte b/src/lib/components/organisms/Footer.svelte
index 0c23f57..d8b126a 100644
--- a/src/lib/components/organisms/Footer.svelte
+++ b/src/lib/components/organisms/Footer.svelte
@@ -3,12 +3,14 @@
 </script>
 
 <footer>
-	<div>
-		<Nautilus />
-	</div>
-	<div>
-		<p>CC-BY-SA 4.0</p>
-		<p>Nautilus Cyberneering S.L.U. 2024</p>
+	<div class="footer-wrapper">
+		<div>
+			<Nautilus />
+		</div>
+		<div>
+			<p>CC-BY-SA 4.0</p>
+			<p>Nautilus Cyberneering S.L.U. 2024</p>
+		</div>
 	</div>
 </footer>
 
@@ -19,39 +21,47 @@
 		background-color: rgba(26, 26, 26, 1);
 		color: rgba(245, 245, 245, 0.96);
 		display: flex;
-		flex-direction: column;
 		justify-content: center;
-		align-items: center;
-		padding: 4rem 1.5rem;
 		border-bottom: 16px solid rgba(255, 49, 0, 1);
+		padding: 2rem 1.5rem;
 
-		div {
-			font-size: 16px;
+		.footer-wrapper {
+			display: flex;
+			flex-direction: column;
+			align-items: center;
+			width: 100%;
+			padding: 1rem;
 			text-align: center;
-		}
 
-		@include for-desktop-up {
-			padding-inline: 9rem;
-		}
-	}
+			@include for-tablet-portrait-up {
+				flex-direction: row;
+				align-items: center;
+				gap: 24px;
+				text-align: left;
+				max-width: 2500px;
+			}
 
-	footer div:nth-of-type(2) p:first-of-type {
-		margin-top: 1.5rem;
-	}
+			@include for-desktop-up {
+				padding: 0rem;
+			}
 
-	@include for-tablet-portrait-up {
-		footer {
-			flex-direction: row;
-			justify-content: flex-start;
-			gap: 1.5rem;
+			div {
+				font-size: 16px;
+			}
 		}
 
 		footer div:nth-of-type(2) p:first-of-type {
-			margin-top: 0rem;
+			margin-top: 1.5rem;
+		}
+
+		@include for-tablet-portrait-up {
+			footer div:nth-of-type(2) p:first-of-type {
+				margin-top: 0rem;
+			}
 		}
 
-		p {
-			text-align: left;
+		@include for-desktop-up {
+			padding-inline: 9rem;
 		}
 	}
 </style>
diff --git a/src/lib/components/organisms/Header.svelte b/src/lib/components/organisms/Header.svelte
index 1e6fda8..fc07bfa 100644
--- a/src/lib/components/organisms/Header.svelte
+++ b/src/lib/components/organisms/Header.svelte
@@ -13,53 +13,56 @@
 </script>
 
 <header>
-	<a class="logo" href="/" aria-label="Site logo">
-		<Header />
-	</a>
-	<AnimatedHamburger {isMenuOpen} {toggleMenu}>
-		<div class="links-wrapper">
-			<ul class="links">
-				<li>
-					<a
-						href="/torrent-index"
-						class={currentPath === '/torrent-index' ? 'active' : ''}
-						on:click={toggleMenu}>Index</a
-					>
-				</li>
-				<li>
-					<a
-						href="/torrent-tracker"
-						class={currentPath === '/torrent-tracker' ? 'active' : ''}
-						on:click={toggleMenu}>Tracker</a
-					>
-				</li>
-				<li>
-					<a
-						href="/self-host"
-						class={currentPath === '/self-host' ? 'active' : ''}
-						on:click={toggleMenu}>Self&#8209;host</a
-					>
-				</li>
-				<li>
-					<a
-						href="/community"
-						class={currentPath === '/community' ? 'active' : ''}
-						on:click={toggleMenu}>Community</a
-					>
-				</li>
-				<li>
-					<a href="/blog" class={currentPath === '/blog' ? 'active' : ''} on:click={toggleMenu}
-						>Blog</a
-					>
-				</li>
-				<li>
-					<a href="/about" class={currentPath === '/about' ? 'active' : ''} on:click={toggleMenu}
-						>About</a
-					>
-				</li>
-			</ul>
-		</div>
-	</AnimatedHamburger>
+	<div class="header-wrapper">
+		<a class="logo" href="/" aria-label="Site logo">
+			<Header />
+		</a>
+		<AnimatedHamburger {isMenuOpen} {toggleMenu}>
+			<div class="links-wrapper">
+				<ul class="links">
+					<!-- Menu items -->
+					<li>
+						<a
+							href="/torrent-index"
+							class={currentPath === '/torrent-index' ? 'active' : ''}
+							on:click={toggleMenu}>Index</a
+						>
+					</li>
+					<li>
+						<a
+							href="/torrent-tracker"
+							class={currentPath === '/torrent-tracker' ? 'active' : ''}
+							on:click={toggleMenu}>Tracker</a
+						>
+					</li>
+					<li>
+						<a
+							href="/self-host"
+							class={currentPath === '/self-host' ? 'active' : ''}
+							on:click={toggleMenu}>Self&#8209;host</a
+						>
+					</li>
+					<li>
+						<a
+							href="/community"
+							class={currentPath === '/community' ? 'active' : ''}
+							on:click={toggleMenu}>Community</a
+						>
+					</li>
+					<li>
+						<a href="/blog" class={currentPath === '/blog' ? 'active' : ''} on:click={toggleMenu}
+							>Blog</a
+						>
+					</li>
+					<li>
+						<a href="/about" class={currentPath === '/about' ? 'active' : ''} on:click={toggleMenu}
+							>About</a
+						>
+					</li>
+				</ul>
+			</div>
+		</AnimatedHamburger>
+	</div>
 </header>
 
 <style lang="scss">
@@ -69,14 +72,19 @@
 		position: relative;
 		z-index: 1000;
 		background-color: rgba(255, 49, 0, 1);
-		display: flex;
-		justify-content: space-between;
-		align-items: center;
-		position: relative;
+		width: 100%;
 		padding-inline: 1.5rem;
 
-		@include for-phone-only {
-			height: 64px;
+		.header-wrapper {
+			display: flex;
+			justify-content: space-between;
+			align-items: center;
+			width: 100%;
+			margin: 0 auto;
+
+			@include for-phone-only {
+				height: 64px;
+			}
 		}
 
 		ul {
@@ -90,7 +98,6 @@
 			font-size: 1.1rem;
 		}
 
-		/* navlink animations */
 		li > a {
 			display: inline-block;
 			transition: all 200ms ease-in-out;
diff --git a/src/lib/components/organisms/Hero.svelte b/src/lib/components/organisms/Hero.svelte
index d0a14f5..a7ef0c4 100644
--- a/src/lib/components/organisms/Hero.svelte
+++ b/src/lib/components/organisms/Hero.svelte
@@ -32,23 +32,15 @@
 	@import '$lib/scss/breakpoints.scss';
 
 	.svg-container {
-		display: flex;
-		flex-direction: column;
-		text-align: center;
-		background-color: rgba(255, 49, 0, 1);
-		color: rgba(245, 245, 245, 0.96);
-		padding: 0;
-	}
-
-	.svg-container {
-		width: 100%;
-		background-image: url("data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" fill='rgb(254, 74, 30)'><path d='M1005.2 123.646C1027.43 11.7464 953.881 -97.3506 843.527 -126.92L138.041 -315.954C40.5775 -342.07 -63.6767 -288.152 -91.5498 -191.16C-119.946 -92.2144 -61.7805 10.2473 37.2454 36.7812L306.002 108.794L55.7571 263.014C-106.71 363.089 -70.6249 608.894 113.559 658.246C170.006 673.371 230.427 665.068 280.715 635.209L900.796 267.959C954.822 237.428 993.036 184.656 1005.25 123.451L1005.2 123.646Z' fill='rgb(254, 74, 30)' fill-opacity='1'/></svg>");
+		background-image: url('data:image/svg+xml,%3Csvg%20width%3D%221368%22%20height%3D%22680%22%20viewBox%3D%220%200%201368%20680%22%20fill%3D%22none%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%3E%3Cpath%20d%3D%22M1388.04%202.06213C1378.81%20-138.439%201256.27%20-245%201115.27%20-245H213.872C89.3427%20-245%20-17.7176%20-147.423%20-19.9636%20-22.8936C-22.2096%20104.131%2079.8594%20207.698%20206.385%20207.698H549.777L300.718%20471.48C139.005%20642.677%20260.539%20924.178%20495.872%20924.178C567.994%20924.178%20637.371%20894.98%20687.782%20843.321L1309.68%20207.448C1364.33%20153.793%201393.03%2078.6764%201388.04%201.81261V2.06213Z%22%20fill%3D%22%23F5F5F5%22%20fill-opacity%3D%220.12%22/%3E%3C/svg%3E');
 		background-size: cover;
 		background-repeat: no-repeat;
 		background-position: center;
-		background-color: rgb(255, 50, 1);
-		color: white;
-		padding-inline: 1.5rem;
+		background-color: rgba(255, 49, 0, 1);
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		color: rgba(245, 245, 245, 0.96);
 
 		@include for-tablet-portrait-up {
 			.hero-heading,
@@ -62,7 +54,7 @@
 			}
 
 			.hero-para {
-				padding-top: 1.5rem;
+				padding-top: 24px;
 			}
 		}
 	}
@@ -73,6 +65,7 @@
 		h1 {
 			font-size: 48px;
 			margin-top: 2rem;
+			line-height: 48px;
 		}
 
 		p {
diff --git a/src/lib/components/organisms/RelatedPosts.svelte b/src/lib/components/organisms/RelatedPosts.svelte
index c676c94..15eb9f3 100644
--- a/src/lib/components/organisms/RelatedPosts.svelte
+++ b/src/lib/components/organisms/RelatedPosts.svelte
@@ -24,14 +24,19 @@
 	.container {
 		color: rgba(245, 245, 245, 0.8);
 		background: rgba(26, 26, 26, 1);
+		padding-bottom: 64px;
 	}
 
 	.grid {
 		width: 100%;
 		display: grid;
-		grid-template-columns: 1fr 1fr;
+		grid-template-columns: 1fr;
 		grid-gap: 20px;
 
+		@include for-tablet-portrait-up {
+			grid-template-columns: 1fr 1fr;
+		}
+
 		@include for-desktop-up {
 			grid-template-columns: 1fr 1fr 1fr;
 		}
diff --git a/src/lib/components/singletons/RecentPosts.svelte b/src/lib/components/singletons/RecentPosts.svelte
index 9f2a77f..3ee4b1c 100644
--- a/src/lib/components/singletons/RecentPosts.svelte
+++ b/src/lib/components/singletons/RecentPosts.svelte
@@ -22,8 +22,18 @@
 	@import '$lib/scss/breakpoints.scss';
 
 	.container {
-		color: rgba(245, 245, 245, 0.8);
+		display: flex;
+		flex-direction: column;
+		margin: 0 auto;
+		padding-top: 3rem;
 		background: rgba(26, 26, 26, 1);
+		color: rgba(245, 245, 245, 0.96);
+		padding-bottom: 64px;
+		box-sizing: border-box;
+
+		@include for-desktop-up {
+			max-width: 1200px;
+		}
 	}
 
 	.grid {
diff --git a/src/lib/components/singletons/TorrustIndexPost.svelte b/src/lib/components/singletons/TorrustIndexPost.svelte
index 2a0a86e..fc83220 100644
--- a/src/lib/components/singletons/TorrustIndexPost.svelte
+++ b/src/lib/components/singletons/TorrustIndexPost.svelte
@@ -4,10 +4,15 @@
 
 	// Array of section objects with display names and IDs
 	let sections = [
-		{ name: 'Installation', id: 'installation' },
-		{ name: 'Software requirements', id: 'softwareRequirements' },
-		{ name: 'Build from sources', id: 'buildSources' },
-		{ name: 'Run with docker', id: 'docker' },
+		{
+			name: 'Installation',
+			id: 'installation',
+			subsections: [
+				{ name: 'Software requirements', id: 'softwareRequirements' },
+				{ name: 'Build from sources', id: 'buildSources' },
+				{ name: 'Run with docker', id: 'docker' }
+			]
+		},
 		{ name: 'Roadmap', id: 'roadmap' },
 		{ name: 'License', id: 'license' }
 	];
diff --git a/src/lib/icons/alert.svelte b/src/lib/icons/alert.svelte
index 29e7367..d8c4cc0 100644
--- a/src/lib/icons/alert.svelte
+++ b/src/lib/icons/alert.svelte
@@ -1,21 +1,25 @@
-<svg
-	width="100%"
-	height="100%"
-	stroke-width="1.5"
-	viewBox="0 0 24 24"
-	fill="none"
-	xmlns="http://www.w3.org/2000/svg"
->
-	<path d="M12 7L12 13" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" />
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
 	<path
-		d="M12 17.01L12.01 16.9989"
-		stroke="currentColor"
+		d="M10.29 3.86002L1.82002 18C1.64539 18.3024 1.55299 18.6453 1.55201 18.9945C1.55103 19.3438 1.64151 19.6872 1.81445 19.9905C1.98738 20.2939 2.23675 20.5468 2.53773 20.7239C2.83871 20.901 3.18082 20.9962 3.53002 21H20.47C20.8192 20.9962 21.1613 20.901 21.4623 20.7239C21.7633 20.5468 22.0127 20.2939 22.1856 19.9905C22.3585 19.6872 22.449 19.3438 22.448 18.9945C22.4471 18.6453 22.3547 18.3024 22.18 18L13.71 3.86002C13.5318 3.56613 13.2807 3.32314 12.9812 3.15451C12.6817 2.98587 12.3438 2.89728 12 2.89728C11.6563 2.89728 11.3184 2.98587 11.0188 3.15451C10.7193 3.32314 10.4683 3.56613 10.29 3.86002Z"
+		stroke="#F5F5F5"
+		stroke-opacity="0.92"
+		stroke-width="1.5"
 		stroke-linecap="round"
 		stroke-linejoin="round"
 	/>
 	<path
-		d="M12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22Z"
-		stroke="currentColor"
+		d="M12 9V13"
+		stroke="#F5F5F5"
+		stroke-opacity="0.92"
+		stroke-width="1.5"
+		stroke-linecap="round"
+		stroke-linejoin="round"
+	/>
+	<path
+		d="M12 17H12.01"
+		stroke="#F5F5F5"
+		stroke-opacity="0.92"
+		stroke-width="1.5"
 		stroke-linecap="round"
 		stroke-linejoin="round"
 	/>
diff --git a/src/lib/icons/check.svelte b/src/lib/icons/check.svelte
index fec37d4..ba7fbbd 100644
--- a/src/lib/icons/check.svelte
+++ b/src/lib/icons/check.svelte
@@ -1,20 +1,17 @@
-<svg
-	width="100%"
-	height="100%"
-	stroke-width="1.5"
-	viewBox="0 0 24 24"
-	fill="none"
-	xmlns="http://www.w3.org/2000/svg"
->
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
 	<path
-		d="M7 12.5L10 15.5L17 8.5"
-		stroke="currentColor"
+		d="M22 11.08V12C21.9988 14.1564 21.3005 16.2547 20.0093 17.9818C18.7182 19.709 16.9033 20.9725 14.8354 21.5839C12.7674 22.1953 10.5573 22.1219 8.53447 21.3746C6.51168 20.6273 4.78465 19.2461 3.61096 17.4371C2.43727 15.628 1.87979 13.4881 2.02168 11.3363C2.16356 9.18455 2.99721 7.13631 4.39828 5.49706C5.79935 3.85781 7.69279 2.71537 9.79619 2.24013C11.8996 1.7649 14.1003 1.98232 16.07 2.85999"
+		stroke="#F5F5F5"
+		stroke-opacity="0.92"
+		stroke-width="1.5"
 		stroke-linecap="round"
 		stroke-linejoin="round"
 	/>
 	<path
-		d="M12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22Z"
-		stroke="currentColor"
+		d="M22 4L12 14.01L9 11.01"
+		stroke="#F5F5F5"
+		stroke-opacity="0.92"
+		stroke-width="1.5"
 		stroke-linecap="round"
 		stroke-linejoin="round"
 	/>
diff --git a/src/lib/icons/info.svelte b/src/lib/icons/info.svelte
index afcfaae..d91271d 100644
--- a/src/lib/icons/info.svelte
+++ b/src/lib/icons/info.svelte
@@ -1,21 +1,25 @@
-<svg
-	width="100%"
-	height="100%"
-	stroke-width="1.5"
-	viewBox="0 0 24 24"
-	fill="none"
-	xmlns="http://www.w3.org/2000/svg"
->
-	<path d="M12 11.5V16.5" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" />
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
 	<path
-		d="M12 7.51L12.01 7.49889"
-		stroke="currentColor"
+		d="M12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22Z"
+		stroke="#F5F5F5"
+		stroke-opacity="0.92"
+		stroke-width="1.5"
 		stroke-linecap="round"
 		stroke-linejoin="round"
 	/>
 	<path
-		d="M12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22Z"
-		stroke="currentColor"
+		d="M12 16V12"
+		stroke="#F5F5F5"
+		stroke-opacity="0.92"
+		stroke-width="1.5"
+		stroke-linecap="round"
+		stroke-linejoin="round"
+	/>
+	<path
+		d="M12 8H12.01"
+		stroke="#F5F5F5"
+		stroke-opacity="0.92"
+		stroke-width="1.5"
 		stroke-linecap="round"
 		stroke-linejoin="round"
 	/>
diff --git a/src/lib/scss/_markdown.scss b/src/lib/scss/_markdown.scss
index 208e020..9130c62 100644
--- a/src/lib/scss/_markdown.scss
+++ b/src/lib/scss/_markdown.scss
@@ -56,10 +56,8 @@
 
 		blockquote {
 			padding: 25px 25px 15px;
-			border-radius: 20px;
-			font-size: 1.1rem;
-			border-left: 4px solid var(--color--primary);
-			background: var(--color--callout-background);
+			border-left: 4px solid rgba(255, 49, 0, 1);
+			background: rgba(36, 36, 36, 1);
 		}
 
 		code:not([class^='language-']) {
diff --git a/src/routes/(article)/+layout.svelte b/src/routes/(article)/+layout.svelte
index 2c131f5..0c71413 100644
--- a/src/routes/(article)/+layout.svelte
+++ b/src/routes/(article)/+layout.svelte
@@ -79,7 +79,9 @@
 			</div>
 			{#if post && post.coverImage}
 				<div class="cover-image">
-					<Image src={post.coverImage} alt={post.title} />
+					{#key post.coverImage}
+						<Image src={post.coverImage + '?v=' + post.slug} alt={post.title} />
+					{/key}
 				</div>
 			{/if}
 			<div class="content">
diff --git a/src/routes/(article)/benchmarking-the-torrust-bittorrent-tracker/+page.md b/src/routes/(article)/benchmarking-the-torrust-bittorrent-tracker/+page.md
index 1813acc..4b3a8b5 100644
--- a/src/routes/(article)/benchmarking-the-torrust-bittorrent-tracker/+page.md
+++ b/src/routes/(article)/benchmarking-the-torrust-bittorrent-tracker/+page.md
@@ -14,41 +14,45 @@ hidden: false
 ---
 
 <script>
-  import Toc from 'svelte-toc';
   import Callout from "$lib/components/molecules/Callout.svelte";
   import CodeBlock from "$lib/components/molecules/CodeBlock.svelte";
   import Image from "$lib/components/atoms/Image.svelte";
   import PostBody from "$lib/components/molecules/PostBody.svelte";
   import PostContainer from "$lib/components/molecules/PostContainer.svelte";
   import PostTable from "$lib/components/molecules/PostTable.svelte";
+  import TableOfContents from '$lib/components/atoms/TableOfContents.svelte';
+
+  let sections = [
+		{ name: 'Introduction', id: 'introduction' },
+		{ name: 'Understating The Tracker', id: 'understating-the-tracker' },
+		{ name: 'Benchmarking Methodology', id: 'benchmarking-methodology' },
+		{ name: 'Internal Repository Benchmarking', id: 'internal-repository-benchmarking' },
+		{ name: 'E2E UDP Benchmarking', id: 'e2e-udp-benchmarking' },
+		{
+			name: 'Comparative UDP Benchmarking With Other Trackers',
+			id: 'comparative-udp-benchmarking-with-other-trackers',
+			subsections: [
+				{ name: 'Setup The Chihaya Tracker', id: 'setup-the-chihaya-tracker' },
+				{ name: 'Setup The Opentracker Tracker', id: 'setup-the-opentracker-tracker' },
+				{ name: 'Setup The Aquatic Tracker', id: 'setup-the-aquatic-tracker' },
+				{ name: 'Running The Bencher', id: 'running-the-bencher' },
+				{ name: 'Bencher Results', id: 'bencher-results' }
+			]
+		},
+		{ name: 'Conclusion', id: 'conclusion' },
+		{ name: 'Links', id: 'links' }
+	];
+
+	let activeSection = '';
 </script>
 
 <PostContainer>
 <PostTable>
-<Toc
-  title=""
-  --toc-active-color="rgba(255, 49, 0, 0.96)"
-  --toc-li-hover-color="rgba(255, 49, 0, 0.96)"
-  --toc-active-bg="transparent"
->
 
 ## Table of Contents
 
-- [Introduction](#introduction)
-- [Understating The Tracker](#understating-the-tracker)
-- [Benchmarking Methodology](#benchmarking-methodology)
-- [Internal Repository Benchmarking](#internal-repository-benchmarking)
-- [E2E UDP Benchmarking](#e2e-udp-benchmarking)
-- [Comparative UDP Benchmarking With Other Trackers](#comparative-udp-benchmarking-with-other-trackers)
-  - [Setup The Chihaya Tracker](#setup-the-chihaya-tracker)
-  - [Setup The Opentracker Tracker](#setup-the-opentracker-tracker)
-  - [Setup The Aquatic Tracker](#setup-the-aquatic-tracker)
-  - [Running The Bencher](#running-the-bencher)
-  - [Bencher Results](#bencher-results)
-- [Conclusion](#conclusion)
-- [Links](#links)
-
-</Toc>
+<TableOfContents {sections} {activeSection} />
+
 </PostTable>
 
 <PostBody>
diff --git a/src/routes/(article)/containerizing-rust-applications-best-practices/+page.md b/src/routes/(article)/containerizing-rust-applications-best-practices/+page.md
index 3163c68..199df59 100644
--- a/src/routes/(article)/containerizing-rust-applications-best-practices/+page.md
+++ b/src/routes/(article)/containerizing-rust-applications-best-practices/+page.md
@@ -16,48 +16,57 @@ hidden: false
 ---
 
 <script>
-  import Toc from 'svelte-toc';
   import Callout from "$lib/components/molecules/Callout.svelte";
   import CodeBlock from "$lib/components/molecules/CodeBlock.svelte";
   import Image from "$lib/components/atoms/Image.svelte";
   import PostBody from "$lib/components/molecules/PostBody.svelte";
   import PostContainer from "$lib/components/molecules/PostContainer.svelte";
   import PostTable from "$lib/components/molecules/PostTable.svelte";
+  import TableOfContents from '$lib/components/atoms/TableOfContents.svelte';
+
+  let sections = [
+    { name: "Introduction", id: "introduction" },
+    { name: "Requirements", id: "requirements" },
+    { name: "We Use Docker (OCI) Containers", id: "we-use-docker-oci-containers" },
+    { name: "Basic Dockerized Rust Application", id: "basic-dockerized-rust-application" },
+    { name: "Use Multi-Stage Builds to Minimize the Image Size", id: "use-multi-stage-builds-to-minimize-the-image-size" },
+    { name: "Image Variants", id: "image-variants" },
+    { name: "Introduction to Docker Layers Cache", id: "introduction-to-docker-layers-cache" },
+    { 
+      name: "Caching Cargo Dependencies", 
+      id: "caching-cargo-dependencies",
+      subsections: [
+        { name: "Demonstration of Caching Cargo Dependencies Using a Custom Solution", id: "demonstration-of-caching-cargo-dependencies-using-a-custom-solution" },
+        { name: "Caching Cargo Dependencies With Cargo Chef", id: "caching-cargo-dependencies-with-cargo-chef" }
+      ]
+    },
+    { name: "Installing Rust Binaries With Cargo Binstall", id: "installing-rust-binaries-with-cargo-binstall" },
+    { name: "Archiving And Reusing Builds With Cargo Nextest", id: "archiving-and-reusing-builds-with-cargo-nextest" },
+    { 
+      name: "Running Container Without Sudo", 
+      id: "running-container-without-sudo",
+      subsections: [
+        { name: "Use The `docker run --user` Argument", id: "use-the-docker-run---user-argument" },
+        { name: "Create The User At Runtime", id: "create-the-user-at-runtime" }
+      ]
+    },
+    { name: "Decomposing the Torrust Tracker Containerfile", id: "decomposing-the-torrust-tracker-containerfile" },
+    { name: "Other Good Practices", id: "other-good-practices" },
+    { name: "Other Considerations", id: "other-considerations" },
+    { name: "Links", id: "links" },
+    { name: "Conclusion", id: "conclusion" }
+  ]
+
+  let activeSection = '';
 </script>
 
 <PostContainer>
 <PostTable>
-<Toc
-  title=""
-  --toc-active-color="rgba(255, 49, 0, 0.96)"
-  --toc-li-hover-color="rgba(255, 49, 0, 0.96)"
-  --toc-active-bg="transparent"
->
 
 ## Table of Contents
 
-- [Introduction](#introduction)
-- [Requirements](#requirements)
-- [We Use Docker (OCI) Containers](#we-use-docker-oci-containers)
-- [Basic Dockerized Rust Application](#basic-dockerized-rust-application)
-- [Use Multi-Stage Builds to Minimize the Image Size](#use-multi-stage-builds-to-minimize-the-image-size)
-- [Image Variants](#image-variants)
-- [Introduction to Docker Layers Cache](#introduction-to-docker-layers-cache)
-- [Caching Cargo Dependencies](#caching-cargo-dependencies)
-  - [Demonstration of Caching Cargo Dependencies Using a Custom Solution](#demonstration-of-caching-cargo-dependencies-using-a-custom-solution)
-  - [Caching Cargo Dependencies With Cargo Chef](#caching-cargo-dependencies-with-cargo-chef)
-- [Installing Rust Binaries With Cargo Binstall](#installing-rust-binaries-with-cargo-binstall)
-- [Archiving And Reusing Builds With Cargo Nextest](#archiving-and-reusing-builds-with-cargo-nextest)
-- [Running Container Without Sudo](#running-container-without-sudo)
-  - [Use The `docker run --user` Argument](#use-the-docker-run---user-argument)
-  - [Create The User At Runtime](#create-the-user-at-runtime)
-- [Decomposing the Torrust Tracker Containerfile](#decomposing-the-torrust-tracker-containerfile)
-- [Other Good Practices](#other-good-practices)
-- [Other Considerations](#other-considerations)
-- [Links](#links)
-- [Conclusion](#conclusion)
-
-</Toc>
+<TableOfContents {sections} {activeSection} />
+
 </PostTable>
 
 <PostBody>
diff --git a/src/routes/(article)/deploying-torrust-to-production/+page.md b/src/routes/(article)/deploying-torrust-to-production/+page.md
index d9a6893..d7148c7 100644
--- a/src/routes/(article)/deploying-torrust-to-production/+page.md
+++ b/src/routes/(article)/deploying-torrust-to-production/+page.md
@@ -15,52 +15,71 @@ hidden: false
 ---
 
 <script>
-  import Toc from 'svelte-toc';
   import Callout from "$lib/components/molecules/Callout.svelte";
   import CodeBlock from "$lib/components/molecules/CodeBlock.svelte";
   import Image from "$lib/components/atoms/Image.svelte";
   import PostBody from "$lib/components/molecules/PostBody.svelte";
   import PostContainer from "$lib/components/molecules/PostContainer.svelte";
   import PostTable from "$lib/components/molecules/PostTable.svelte";
+  import TableOfContents from '$lib/components/atoms/TableOfContents.svelte';
+
+  let sections = [
+      { name: "Introduction", id: "introduction" },
+      { name: "Requirements", id: "requirements" },
+      { 
+        name: "Initial Server Setup", 
+        id: "initial-server-setup",
+        subsections: [
+          { name: "Setup SSH Keys", id: "setup-ssh-keys" },
+          { name: "Install Docker", id: "install-docker" },
+          { name: "Install Docker Compose", id: "install-docker-compose" },
+          { name: "Install SQLite", id: "install-sqlite" }
+        ]
+      },
+      { name: "Setup The DNS", id: "setup-the-dns" },
+      { 
+        name: "Install The Application", 
+        id: "install-the-application",
+        subsections: [
+          { name: "Without Certificates", id: "without-certificates" },
+          { name: "Generate Certificates With Let's Encrypt", id: "generate-certificates-with-lets-encrypt" },
+          { name: "Change Nginx Configuration To Use Certificates", id: "change-nginx-configuration-to-use-certificates" },
+          { name: "Setup Cronjob To Renew Certificates", id: "setup-cronjob-to-renew-certificates" }
+        ]
+      },
+      { 
+        name: "Exposed Services", 
+        id: "exposed-services",
+        subsections: [
+          { name: "Firewall", id: "firewall" },
+          { name: "Health checks", id: "health-checks" }
+        ]
+      },
+      { name: "Troubleshooting", id: "troubleshooting" },
+      { 
+        name: "Maintenance", 
+        id: "maintenance",
+        subsections: [
+          { name: "Backups", id: "backups" },
+          { name: "Monitoring", id: "monitoring" }
+        ]
+      },
+      { name: "Cost", id: "cost" },
+      { name: "Other Considerations", id: "other-considerations" },
+      { name: "Links", id: "links" },
+      { name: "Conclusion", id: "conclusion" }
+  ]
+
+  let activeSection = '';
 </script>
 
 <PostContainer>
 <PostTable>
-<Toc
-  title=""
-  --toc-active-color="rgba(255, 49, 0, 0.96)"
-  --toc-li-hover-color="rgba(255, 49, 0, 0.96)"
-  --toc-active-bg="transparent"
->
 
 ## Table of Contents
 
-- [Introduction](#introduction)
-- [Requirements](#requirements)
-- [Initial Server Setup](#initial-server-setup)
-  - [Setup SSH Keys](#setup-ssh-keys)
-  - [Install Docker](#install-docker)
-  - [Install Docker Compose](#install-docker-compose)
-  - [Install SQLite](#install-sqlite)
-- [Setup The DNS](#setup-the-dns)
-- [Install The Application](#install-the-application)
-  - [Without Certificates](#without-certificates)
-  - [Generate Certificates With Let's Encrypt](#generate-certificates-with-lets-encrypt)
-  - [Change Nginx Configuration To Use Certificates](#change-nginx-configuration-to-use-certificates)
-  - [Setup Cronjob To Renew Certificates](#setup-cronjob-to-renew-certificates)
-- [Exposed Services](#exposed-services)
-  - [Firewall](#firewall)
-  - [Health checks](#health-checks)
-- [Troubleshooting](#troubleshooting)
-- [Maintenance](#maintenance)
-  - [Backups](#backups)
-  - [Monitoring](#monitoring)
-- [Cost](#cost)
-- [Other Considerations](#other-considerations)
-- [Links](#links)
-- [Conclusion](#conclusion)
-
-</Toc>
+<TableOfContents {sections} {activeSection} />
+
 </PostTable>
 
 <PostBody>
@@ -145,7 +164,9 @@ torrust/index-gui   develop           sha256:b30deb84cdee8fa34e4d3783ce2f467542e
 </CodeBlock>
 
 <Callout type="info">
-  We will update them to use a concrete tag v3.0 after releasing it.
+
+We will update them to use a concrete tag v3.0 after releasing it.
+
 </Callout>
 
 ### Domain
@@ -159,8 +180,10 @@ Starting off, we'll set up a virtual server using Ubuntu 22.04. Think of it as p
 This section covers the initial configuration of your Ubuntu 22.04 server, focusing on essential security and performance optimizations.
 
 <Callout type="info">
-  Disclaimer: For the initial server setup we only highlight the main points. We provide the links to Digital Ocean tutorials
-  where you will find detailed information.
+
+Disclaimer: For the initial server setup we only highlight the main points. We provide the links to Digital Ocean tutorials
+where you will find detailed information.
+
 </Callout>
 
 Please refer to [Digital Ocean Documentation](https://docs.digitalocean.com/) for more information about how to create projects and droplets. Projects are the way DO (Digital Ocean) organizes resources (virtual machines, databases, domains, etc.). We have a project called "torrust-demo.com".
@@ -320,7 +343,9 @@ Some useful commands are:
 Before running the application we have to setup the DNS. You can load the application using your domain instead of the droplet IP.
 
 <Callout type="info">
-  The droplet has an IP that can be used to setup the DNS, but we recommend using an reserved IP. You can link the reserved IP to the droplet.
+
+The droplet has an IP that can be used to setup the DNS, but we recommend using an reserved IP. You can link the reserved IP to the droplet.
+
 </Callout>
 
 First at all, you need to change your name servers and use the ones from Digital Ocean. You have to find out how to do that
@@ -452,7 +477,9 @@ jcrmbzlGyeP7z53TUQtXmtltMb5TubsIE9e0DPLnS4Ih29JddQw5JA==
 </CodeBlock>
 
 <Callout type="info">
-  NOTICE: We are not sending emails from the application because user's email validation is disabled on registration for the demo. If you want to enable email validation you will need to provide the SMTP configuration including the password in the `storage/index/etc/index.toml` config file.
+
+NOTICE: We are not sending emails from the application because user's email validation is disabled on registration for the demo. If you want to enable email validation you will need to provide the SMTP configuration including the password in the `storage/index/etc/index.toml` config file.
+
 </Callout>
 
 Now, you should be able to run the application with the following command:
@@ -488,7 +515,9 @@ docker compose run --entrypoint /bin/sh certbot
 </CodeBlock>
 
 <Callout type="info">
-  Notice that the previous command recreates the docker containers so you site will be down for some seconds.
+
+Notice that the previous command recreates the docker containers so you site will be down for some seconds.
+
 </Callout>
 
 Once you are logged in the certbot container you need to execute these certbot commands to generate the staging certificates:
@@ -867,9 +896,11 @@ You can disable both, direct access to the container (without using the Nginx pr
 need to enable a firewall on the server or the Digital Ocean firewall.
 
 <Callout type="info">
-  Notice: The UDP tracker is not available via the proxy. If you want all requests to go through the
-  proxy you need to change the Nginx configuration to set up a UDP proxy. There is a discussion
-  on the Tracker repository on GitHub about how to setup the proxy for the UDP tracker.
+
+Notice: The UDP tracker is not available via the proxy. If you want all requests to go through the
+proxy you need to change the Nginx configuration to set up a UDP proxy. There is a discussion
+on the Tracker repository on GitHub about how to setup the proxy for the UDP tracker.
+
 </Callout>
 
 ### Firewall
@@ -900,7 +931,9 @@ sudo ufw status verbose
 </CodeBlock>
 
 <Callout type="info">
-  However, there is a problem with setting up your own firewall. By default, Docker manipulates iptables to set up network isolation. However, this can interfere with UFW. To fix this, you need to tell Docker not to modify iptables.
+
+However, there is a problem with setting up your own firewall. By default, Docker manipulates iptables to set up network isolation. However, this can interfere with UFW. To fix this, you need to tell Docker not to modify iptables.
+
 </Callout>
 
 ### Health checks
@@ -926,7 +959,9 @@ Direct access:
 - Tracker HTTP: <http://tracker.torrust-demo.com:7070/health_check>
 
 <Callout type="info">
-  These endpoints are very useful to test if your installation is OK.
+
+These endpoints are very useful to test if your installation is OK.
+
 </Callout>
 
 ## Troubleshooting
diff --git a/src/routes/(article)/hash2torrent-retrieve-torrent-files-effortlessly/+page.md b/src/routes/(article)/hash2torrent-retrieve-torrent-files-effortlessly/+page.md
index 52ad0b0..cfdb9aa 100644
--- a/src/routes/(article)/hash2torrent-retrieve-torrent-files-effortlessly/+page.md
+++ b/src/routes/(article)/hash2torrent-retrieve-torrent-files-effortlessly/+page.md
@@ -17,36 +17,35 @@ hidden: false
 ---
 
 <script>
-  import Toc from 'svelte-toc';
   import Callout from "$lib/components/molecules/Callout.svelte";
   import CodeBlock from "$lib/components/molecules/CodeBlock.svelte";
   import Image from "$lib/components/atoms/Image.svelte";
   import PostBody from "$lib/components/molecules/PostBody.svelte";
   import PostContainer from "$lib/components/molecules/PostContainer.svelte";
   import PostTable from "$lib/components/molecules/PostTable.svelte";
+  import TableOfContents from '$lib/components/atoms/TableOfContents.svelte';
+
+  let sections = [
+    { name: "Why this tool", id: "why-this-tool" },
+    { name: "Implementation", id: "implementation" },
+    { name: "Alternative Methods", id: "alternative-methods" },
+    { name: "Benefits of Using Hash2Torrent", id: "benefits-of-using-hash2torrent" },
+    { name: "Conclusion", id: "conclusion" },
+    { name: "Links", id: "links" },
+    { name: "Acknowledgments", id: "acknowledgments" }
+  ]
+
+  let activeSection = '';
 </script>
 
 <PostContainer>
 
 <PostTable>
-<Toc
-  title=""
-  --toc-active-color="rgba(255, 49, 0, 0.96)"
-  --toc-li-hover-color="rgba(255, 49, 0, 0.96)"
-  --toc-active-bg="transparent"
->
 
 ## Table of contents
 
-- [Why this tool](#why-this-tool)
-- [Implementation](#implementation)
-- [Alternative Methods](#alternative-methods)
-- [Benefits of Using Hash2Torrent](#benefits-of-using-hash2torrent)
-- [Conclusion](#conclusion)
-- [Links](#links)
-- [Acknowledgments](#acknowledgments)
+<TableOfContents {sections} {activeSection} />
 
-</Toc>
 </PostTable>
 
 <PostBody>
diff --git a/src/routes/(article)/how-to-contribute-to-this-site/+page.md b/src/routes/(article)/how-to-contribute-to-this-site/+page.md
index 92e226a..8b5d7e6 100644
--- a/src/routes/(article)/how-to-contribute-to-this-site/+page.md
+++ b/src/routes/(article)/how-to-contribute-to-this-site/+page.md
@@ -11,32 +11,31 @@ hidden: false
 ---
 
 <script>
-  import Toc from 'svelte-toc';
   import Callout from "$lib/components/molecules/Callout.svelte";
   import CodeBlock from "$lib/components/molecules/CodeBlock.svelte";
   import Image from "$lib/components/atoms/Image.svelte";
   import PostBody from "$lib/components/molecules/PostBody.svelte";
   import PostContainer from "$lib/components/molecules/PostContainer.svelte";
   import PostTable from "$lib/components/molecules/PostTable.svelte";
+  import TableOfContents from '$lib/components/atoms/TableOfContents.svelte';
+
+  let sections = [
+    { name: "Processing", id: "processing" },
+    { name: "Creating a new post", id: "creating-a-new-post" },
+    { name: "Managing blog posts", id: "managing-blog-posts" },
+    { name: "RSS", id: "rss" }
+  ]
+
+  let activeSection = '';
 </script>
 
 <PostContainer>
 <PostTable>
-<Toc
-  title=""
-  --toc-active-color="rgba(255, 49, 0, 0.96)"
-  --toc-li-hover-color="rgba(255, 49, 0, 0.96)"
-  --toc-active-bg="transparent"
->
 
 ## Table of Contents
 
-- [Processing](#processing)
-- [Creating a new post](#creating-a-new-post)
-- [Managing blog posts](#managing-blog-posts)
-- [RSS](#rss)
+<TableOfContents {sections} {activeSection} />
 
-</Toc>
 </PostTable>
 
 <PostBody>
@@ -48,7 +47,9 @@ This way, the URL for each blog post is generated with the folder's name. For ex
 All posts are Markdown files, which means you can use the [Markdown syntax](https://www.markdownguide.org/basic-syntax) in them, and it will work out of the box. However, since this projects uses [MDsveX](https://mdsvex.pngwn.io/) to parse Markdown, you can also use Svelte components inside them! This means that the components used in other pages can also be used in blog posts.
 
 <Callout type="info">
-  This is a Svelte component inside a Markdown file!
+
+This is a Svelte component inside a Markdown file!
+
 </Callout>
 
 ## Processing
diff --git a/src/routes/(article)/how-to-run-a-local-demo/+page.md b/src/routes/(article)/how-to-run-a-local-demo/+page.md
index e9990d9..57c9a15 100644
--- a/src/routes/(article)/how-to-run-a-local-demo/+page.md
+++ b/src/routes/(article)/how-to-run-a-local-demo/+page.md
@@ -15,33 +15,32 @@ hidden: false
 ---
 
 <script>
-  import Toc from 'svelte-toc';
   import Callout from "$lib/components/molecules/Callout.svelte";
   import CodeBlock from "$lib/components/molecules/CodeBlock.svelte";
   import Image from "$lib/components/atoms/Image.svelte";
   import PostBody from "$lib/components/molecules/PostBody.svelte";
   import PostContainer from "$lib/components/molecules/PostContainer.svelte";
   import PostTable from "$lib/components/molecules/PostTable.svelte";
+  import TableOfContents from '$lib/components/atoms/TableOfContents.svelte';
+
+  let sections = [
+    { name: "Requirements", id: "requirements" },
+    { name: "Running the demo", id: "running-the-demo" },
+    { name: "Application Setup", id: "application-setup" },
+    { name: "Advanced Setup", id: "advanced-setup" },
+    { name: "Conclusion", id: "conclusion" }
+  ]
+
+  let activeSection = '';
 </script>
 
 <PostContainer>
 <PostTable>
-<Toc
-  title=""
-  --toc-active-color="rgba(255, 49, 0, 0.96)"
-  --toc-li-hover-color="rgba(255, 49, 0, 0.96)"
-  --toc-active-bg="transparent"
->
 
 ## Table of Contents
 
-- [Requirements](#requirements)
-- [Running the demo](#running-the-demo)
-- [Application Setup](#application-setup)
-- [Advanced Setup](#advanced-setup)
-- [Conclusion](#conclusion)
+<TableOfContents {sections} {activeSection} />
 
-</Toc>
 </PostTable>
 
 <PostBody>
@@ -60,7 +59,9 @@ At the time of writing, we are using Git version `2.39.2` and Docker version `26
 By default, the demo uses SQLite3 as database driver, but you can also use MySQL. If you want to use SQLite3, you do not need to install anything else. If you want to take a look at the internal database structure or data, you can install [DB Browser for SQLite](https://sqlitebrowser.org/).
 
 <Callout type="info">
-  Although we use some small bash scripts, you can run the demo on different operating systems by executing the docker-compose command manually. We have tested it on Linux.
+
+Although we use some small bash scripts, you can run the demo on different operating systems by executing the docker-compose command manually. We have tested it on Linux.
+
 </Callout>
 
 ## Running the demo
@@ -117,7 +118,9 @@ c10ad938b283   dockage/mailcatcher:0.8.2   "entrypoint mailcatcher"   5 seconds
 </CodeBlock>
 
 <Callout type="info">
-  IMPORTANT! We use the latest commit from the develop branches of the Torrust repositories. If you want to use the latest stable version, you can change the tag for the docker images in the `docker-compose.yml` file.
+
+IMPORTANT! We use the latest commit from the develop branches of the Torrust repositories. If you want to use the latest stable version, you can change the tag for the docker images in the `docker-compose.yml` file.
+
 </Callout>
 
 Once the demo is running, you go to <http://localhost:3000/> to start using it.
@@ -129,7 +132,9 @@ The application has some public pages like the torrent list or torrent details p
 <http://localhost:3000/signup>
 
 <Callout type="info">
-  The first user registered will be the <code>admin</code> user. The application only has one admin user.
+
+The first user registered will be the <code>admin</code> user. The application only has one admin user.
+
 </Callout>
 
 The application is very easy to use but you can find comprehensive documentation in the following links:
diff --git a/src/routes/(article)/how-to-setup-the-development-environment/+page.md b/src/routes/(article)/how-to-setup-the-development-environment/+page.md
index adee587..784abe9 100644
--- a/src/routes/(article)/how-to-setup-the-development-environment/+page.md
+++ b/src/routes/(article)/how-to-setup-the-development-environment/+page.md
@@ -17,36 +17,36 @@ hidden: false
 ---
 
 <script>
-  import Toc from 'svelte-toc';
   import Callout from "$lib/components/molecules/Callout.svelte";
   import CodeBlock from "$lib/components/molecules/CodeBlock.svelte";
   import Image from "$lib/components/atoms/Image.svelte";
   import PostBody from "$lib/components/molecules/PostBody.svelte";
   import PostContainer from "$lib/components/molecules/PostContainer.svelte";
   import PostTable from "$lib/components/molecules/PostTable.svelte";
+
+  import TableOfContents from '$lib/components/atoms/TableOfContents.svelte';
+
+  let sections = [
+    { name: "Introduction", id: "introduction" },
+    { name: "Common Dependencies", id: "common-dependencies" },
+    { name: "Set Up the Torrust Tracker", id: "set-up-the-torrust-tracker" },
+    { name: "Set Up the Torrust Index", id: "set-up-the-torrust-index" },
+    { name: "Set Up the Torrust Index GUI", id: "set-up-the-torrust-index-gui" },
+    { name: "Application Setup", id: "application-setup" },
+    { name: "Development tools", id: "development-tools" },
+    { name: "Conclusion", id: "conclusion" }
+  ]
+
+  let activeSection = '';
 </script>
 
 <PostContainer>
 <PostTable>
-<Toc
-  title=""
-  --toc-active-color="rgba(255, 49, 0, 0.96)"
-  --toc-li-hover-color="rgba(255, 49, 0, 0.96)"
-  --toc-active-bg="transparent"
->
 
 ## Table of Contents
 
-- [Introduction](#introduction)
-- [Common Dependencies](#common-dependencies)
-- [Set Up the Torrust Tracker](#set-up-the-torrust-tracker)
-- [Set Up the Torrust Index](#set-up-the-torrust-index)
-- [Set Up the Torrust Index GUI](#set-up-the-torrust-index-gui)
-- [Application Setup](#application-setup)
-- [Development tools](#development-tools)
-- [Conclusion](#conclusion)
+<TableOfContents {sections} {activeSection} />
 
-</Toc>
 </PostTable>
 
 <PostBody>
@@ -78,7 +78,9 @@ cd torrust
 </CodeBlock>
 
 <Callout type="info">
-  This guide uses bash commands and it has been tested on Ubuntu Ubuntu 23.04. You should not encounter any problem if you are using a different Linux distribution, but there are some reported issues with Windows compilation for the Tracker. The installation scripts are very simple, so you can easily adapt them to your system or run the commands manually.
+
+This guide uses bash commands and it has been tested on Ubuntu Ubuntu 23.04. You should not encounter any problem if you are using a different Linux distribution, but there are some reported issues with Windows compilation for the Tracker. The installation scripts are very simple, so you can easily adapt them to your system or run the commands manually.
+
 </Callout>
 
 ## Common Dependencies
@@ -135,7 +137,9 @@ cargo run
 </CodeBlock>
 
 <Callout type="info">
-  NOTICE: You do not need to change the default values for development.
+
+NOTICE: You do not need to change the default values for development.
+
 </Callout>
 
 After running the Tracker with `cargo run` you should see the following output:
@@ -161,7 +165,9 @@ Loading configuration from default configuration file: `./share/default/config/t
 </CodeBlock>
 
 <Callout type="info">
-  IMPORTANT: Every time you change the configuration you need to restart the service.
+
+IMPORTANT: Every time you change the configuration you need to restart the service.
+
 </Callout>
 
 By default, if you don't specify any `Config.toml` file, the application will use this:
@@ -237,7 +243,9 @@ TORRUST_TRACKER_CONFIG_TOML=`cat share/default/config/tracker.development.sqlite
 </CodeBlock>
 
 <Callout type="info">
-  NOTICE: We load the whole file into the env var. This is not useful for development, but it's a different way to inject the configuration. It's used when running the tracker with docker.
+
+NOTICE: We load the whole file into the env var. This is not useful for development, but it's a different way to inject the configuration. It's used when running the tracker with docker.
+
 </Callout>
 
 The response should be like this:
@@ -386,7 +394,9 @@ To access those pages you need to create an account. You can do it from the sign
 <http://localhost:3000/signup>
 
 <Callout type="info">
-  The first user created will be the <code>admin</code> user.
+
+The first user created will be the <code>admin</code> user.
+
 </Callout>
 
 ## Development tools
diff --git a/src/routes/(article)/introducing-the-new-sample-torrent-migration-tool/+page.md b/src/routes/(article)/introducing-the-new-sample-torrent-migration-tool/+page.md
index 92dd8b7..2e0e0bd 100644
--- a/src/routes/(article)/introducing-the-new-sample-torrent-migration-tool/+page.md
+++ b/src/routes/(article)/introducing-the-new-sample-torrent-migration-tool/+page.md
@@ -14,13 +14,23 @@ hidden: false
 ---
 
 <script>
-  import Toc from 'svelte-toc';
   import Callout from "$lib/components/molecules/Callout.svelte";
   import CodeBlock from "$lib/components/molecules/CodeBlock.svelte";
   import Image from "$lib/components/atoms/Image.svelte";
   import PostBody from "$lib/components/molecules/PostBody.svelte";
   import PostContainer from "$lib/components/molecules/PostContainer.svelte";
   import PostTable from "$lib/components/molecules/PostTable.svelte";
+  import TableOfContents from '$lib/components/atoms/TableOfContents.svelte';
+
+  let sections = [
+    { name: "Why this tool?", id: "why-this-tool" },
+    { name: "Capabilities", id: "capabilities" },
+    { name: "Conclusion", id: "conclusion" },
+    { name: "Links", id: "links" },
+    { name: "Acknowledgments", id: "acknowledgments" }
+  ]
+
+  let activeSection = '';
 </script>
 
 Photo by David Dibert: <https://www.pexels.com/photo/a-flock-of-geese-flying-7177008/>.
@@ -31,22 +41,11 @@ We're always looking for ways to enhance your experience with Torrust, and today
 
 <PostContainer>
 <PostTable>
-<Toc
-  title=""
-  --toc-active-color="rgba(255, 49, 0, 0.96)"
-  --toc-li-hover-color="rgba(255, 49, 0, 0.96)"
-  --toc-active-bg="transparent"
->
 
 ## Table of contents
 
-- [Why this tool?](#why-this-tool)
-- [Capabilities](#capabilities)
-- [Conclusion](#conclusion)
-- [Links](#links)
-- [Acknowledgments](#acknowledgments)
+<TableOfContents {sections} {activeSection} />
 
-</Toc>
 </PostTable>
 
 <PostBody>
diff --git a/src/routes/(article)/live-demo-beta-v3/+page.md b/src/routes/(article)/live-demo-beta-v3/+page.md
index 850f716..48f6b29 100644
--- a/src/routes/(article)/live-demo-beta-v3/+page.md
+++ b/src/routes/(article)/live-demo-beta-v3/+page.md
@@ -14,35 +14,34 @@ hidden: false
 ---
 
 <script>
-  import Toc from 'svelte-toc';
   import Callout from "$lib/components/molecules/Callout.svelte";
   import CodeBlock from "$lib/components/molecules/CodeBlock.svelte";
   import Image from "$lib/components/atoms/Image.svelte";
   import PostBody from "$lib/components/molecules/PostBody.svelte";
   import PostContainer from "$lib/components/molecules/PostContainer.svelte";
   import PostTable from "$lib/components/molecules/PostTable.svelte";
+  import TableOfContents from '$lib/components/atoms/TableOfContents.svelte';
+
+  let sections = [
+    { name: "Hello, Torrent Enthusiasts!", id: "hello-torrent-enthusiasts" },
+    { name: "Experience the Beta Demo Today", id: "experience-the-beta-demo-today" },
+    { name: "Your Feedback Makes Us Better", id: "your-feedback-makes-us-better" },
+    { name: "Join the Conversation", id: "join-the-conversation" },
+    { name: "Important Notice: Demo Availability", id: "important-notice-demo-availability" },
+    { name: "A Heartfelt Thank You to Our Contributors", id: "a-heartfelt-thank-you-to-our-contributors" },
+    { name: "Join Us in This Exciting Journey", id: "join-us-in-this-exciting-journey" }
+  ]
+
+  let activeSection = '';
 </script>
 
 <PostContainer>
 <PostTable>
-<Toc
-  title=""
-  --toc-active-color="rgba(255, 49, 0, 0.96)"
-  --toc-li-hover-color="rgba(255, 49, 0, 0.96)"
-  --toc-active-bg="transparent"
->
 
 ## Table of contents
 
-- [Hello, Torrent Enthusiasts!](#hello-torrent-enthusiasts)
-- [Experience the Beta Demo Today](#experience-the-beta-demo-today)
-- [Your Feedback Makes Us Better](#your-feedback-makes-us-better)
-- [Join the Conversation](#join-the-conversation)
-- [Important Notice: Demo Availability](#important-notice-demo-availability)
-- [A Heartfelt Thank You to Our Contributors](#a-heartfelt-thank-you-to-our-contributors)
-- [Join Us in This Exciting Journey](#join-us-in-this-exciting-journey)
+<TableOfContents {sections} {activeSection} />
 
-</Toc>
 </PostTable>
 
 <PostBody>
diff --git a/src/routes/(article)/profiling-the-torrust-bittorrent-udp-tracker/+page.md b/src/routes/(article)/profiling-the-torrust-bittorrent-udp-tracker/+page.md
index 9f1f74c..c9d8bed 100644
--- a/src/routes/(article)/profiling-the-torrust-bittorrent-udp-tracker/+page.md
+++ b/src/routes/(article)/profiling-the-torrust-bittorrent-udp-tracker/+page.md
@@ -18,37 +18,36 @@ hidden: false
 ---
 
 <script>
-  import Toc from 'svelte-toc';
   import Callout from "$lib/components/molecules/Callout.svelte";
   import CodeBlock from "$lib/components/molecules/CodeBlock.svelte";
   import Image from "$lib/components/atoms/Image.svelte";
   import PostBody from "$lib/components/molecules/PostBody.svelte";
   import PostContainer from "$lib/components/molecules/PostContainer.svelte";
   import PostTable from "$lib/components/molecules/PostTable.svelte";
+  import TableOfContents from '$lib/components/atoms/TableOfContents.svelte';
+
+  let sections = [
+    { name: "Introduction", id: "introduction" },
+    { name: "Understanding The Tracker", id: "understanding-the-tracker" },
+    { name: "Current Challenges", id: "current-challenges" },
+    { name: "Internal Repository Benchmarking", id: "internal-repository-benchmarking" },
+    { name: "Profiling With Valgrind", id: "profiling-with-valgrind" },
+    { name: "Profiling With Perf", id: "profiling-with-perf" },
+    { name: "Conclusion", id: "conclusion" },
+    { name: "Acknowledgments", id: "acknowledgments" },
+    { name: "Links", id: "links" }
+  ]
+
+  let activeSection = '';
 </script>
 
 <PostContainer>
 <PostTable>
-<Toc
-  title=""
-  --toc-active-color="rgba(255, 49, 0, 0.96)"
-  --toc-li-hover-color="rgba(255, 49, 0, 0.96)"
-  --toc-active-bg="transparent"
->
 
 ## Table of Contents
 
-- [Introduction](#introduction)
-- [Understanding The Tracker](#understanding-the-tracker)
-- [Current Challenges](#current-challenges)
-- [Internal Repository Benchmarking](#internal-repository-benchmarking)
-- [Profiling With Valgrind](#profiling-with-valgrind)
-- [Profiling With Perf](#profiling-with-perf)
-- [Conclusion](#conclusion)
-- [Acknowledgments](#acknowledgments)
-- [Links](#links)
-
-</Toc>
+<TableOfContents {sections} {activeSection} />
+
 </PostTable>
 
 <PostBody>
diff --git a/src/routes/(article)/released-v3-0-0-alpha-12/+page.md b/src/routes/(article)/released-v3-0-0-alpha-12/+page.md
index 7e1bbc1..1c84dbb 100644
--- a/src/routes/(article)/released-v3-0-0-alpha-12/+page.md
+++ b/src/routes/(article)/released-v3-0-0-alpha-12/+page.md
@@ -14,35 +14,34 @@ hidden: false
 ---
 
 <script>
-  import Toc from 'svelte-toc';
   import Callout from "$lib/components/molecules/Callout.svelte";
   import CodeBlock from "$lib/components/molecules/CodeBlock.svelte";
   import Image from "$lib/components/atoms/Image.svelte";
   import PostBody from "$lib/components/molecules/PostBody.svelte";
   import PostContainer from "$lib/components/molecules/PostContainer.svelte";
   import PostTable from "$lib/components/molecules/PostTable.svelte";
+  import TableOfContents from '$lib/components/atoms/TableOfContents.svelte';
+
+  let sections = [
+    { name: "Hello, Torrust Community!", id: "hello-torrust-community" },
+    { name: "What's New in v3.0.0-alpha.12", id: "whats-new-in-v300-alpha12" },
+    { name: "Release Schedule", id: "release-schedule" },
+    { name: "How to Get Involved", id: "how-to-get-involved" },
+    { name: "Your Feedback Makes Us Better", id: "your-feedback-makes-us-better" },
+    { name: "Important Notice: Demo Availability", id: "important-notice-demo-availability" },
+    { name: "Acknowledgments", id: "acknowledgments" }
+  ]
+
+  let activeSection = '';
 </script>
 
 <PostContainer>
 <PostTable>
-<Toc
-  title=""
-  --toc-active-color="rgba(255, 49, 0, 0.96)"
-  --toc-li-hover-color="rgba(255, 49, 0, 0.96)"
-  --toc-active-bg="transparent"
->
 
 ## Table of contents
 
-- [Hello, Torrust Community!](#hello-torrust-community)
-- [What's New in v3.0.0-alpha.12](#whats-new-in-v300-alpha12)
-- [Release Schedule](#release-schedule)
-- [How to Get Involved](#how-to-get-involved)
-- [Your Feedback Makes Us Better](#your-feedback-makes-us-better)
-- [Important Notice: Demo Availability](#important-notice-demo-availability)
-- [Acknowledgments](#acknowledgments)
+<TableOfContents {sections} {activeSection} />
 
-</Toc>
 </PostTable>
 
 <PostBody>
diff --git a/src/routes/(article)/released-v3-0-0-beta/+page.md b/src/routes/(article)/released-v3-0-0-beta/+page.md
index 6732871..5aa8f73 100644
--- a/src/routes/(article)/released-v3-0-0-beta/+page.md
+++ b/src/routes/(article)/released-v3-0-0-beta/+page.md
@@ -14,34 +14,33 @@ hidden: false
 ---
 
 <script>
-  import Toc from 'svelte-toc';
   import Callout from "$lib/components/molecules/Callout.svelte";
   import CodeBlock from "$lib/components/molecules/CodeBlock.svelte";
   import Image from "$lib/components/atoms/Image.svelte";
   import PostBody from "$lib/components/molecules/PostBody.svelte";
   import PostContainer from "$lib/components/molecules/PostContainer.svelte";
   import PostTable from "$lib/components/molecules/PostTable.svelte";
+  import TableOfContents from '$lib/components/atoms/TableOfContents.svelte';
+
+  let sections = [
+    { name: "Greetings, Torrust Fans!", id: "greetings-torrust-fans" },
+    { name: "Release Schedule", id: "release-schedule" },
+    { name: "How to Participate", id: "how-to-participate" },
+    { name: "Your Input Helps Us Improve", id: "your-input-helps-us-improve" },
+    { name: "Important Notice: Demo Availability", id: "important-notice-demo-availability" },
+    { name: "Special Thanks", id: "special-thanks" }
+  ]
+
+  let activeSection = '';
 </script>
 
 <PostContainer>
 <PostTable>
-<Toc
-  title=""
-  --toc-active-color="rgba(255, 49, 0, 0.96)"
-  --toc-li-hover-color="rgba(255, 49, 0, 0.96)"
-  --toc-active-bg="transparent"
->
 
 ## Table of contents
 
-- [Greetings, Torrust Fans!](#greetings-torrust-fans)
-- [Release Schedule](#release-schedule)
-- [How to Participate](#how-to-participate)
-- [Your Input Helps Us Improve](#your-input-helps-us-improve)
-- [Important Notice: Demo Availability](#important-notice-demo-availability)
-- [Special Thanks](#special-thanks)
+<TableOfContents {sections} {activeSection} />
 
-</Toc>
 </PostTable>
 
 <PostBody>
diff --git a/src/routes/(article)/review-and-setup-guide-for-unit3d/+page.md b/src/routes/(article)/review-and-setup-guide-for-unit3d/+page.md
index c0a8e12..03894b5 100644
--- a/src/routes/(article)/review-and-setup-guide-for-unit3d/+page.md
+++ b/src/routes/(article)/review-and-setup-guide-for-unit3d/+page.md
@@ -16,41 +16,50 @@ hidden: false
 ---
 
 <script>
-  import Toc from 'svelte-toc';
   import Callout from "$lib/components/molecules/Callout.svelte";
   import CodeBlock from "$lib/components/molecules/CodeBlock.svelte";
   import Image from "$lib/components/atoms/Image.svelte";
   import PostBody from "$lib/components/molecules/PostBody.svelte";
   import PostContainer from "$lib/components/molecules/PostContainer.svelte";
   import PostTable from "$lib/components/molecules/PostTable.svelte";
+  import TableOfContents from '$lib/components/atoms/TableOfContents.svelte';
+
+  let sections = [
+    {
+      name: "Introduction to UNIT3D", 
+      id: "introduction-to-unit3d", 
+      subsections: [
+        { name: "Overview", id: "overview" },
+        { name: "Key features", id: "key-features" }
+      ]
+    },
+    { name: "UNIT3D Review", id: "unit3d-review" },
+    { 
+      name: "Tutorial: Setting Up UNIT3D on a Digital Ocean Droplet", 
+      id: "tutorial-setting-up-unit3d-on-a-digital-ocean-droplet",
+      subsections: [
+        { name: "Requirements", id: "requirements" },
+        { name: "Step 1. Create the Droplet in Digital Ocean", id: "step-1-create-the-droplet-in-digital-ocean" },
+        { name: "Step 2. Update the Server", id: "step-2-update-the-server" },
+        { name: "Step 3. Run the UNIT3D Installer", id: "step-3-run-the-unit3d-installer" },
+        { name: "Step 4. Login Page", id: "step-4-login-page" },
+        { name: "Troubleshooting", id: "troubleshooting" }
+      ]
+    },
+    { name: "User Interface", id: "user-interface" },
+    { name: "Conclusion", id: "conclusion" }
+  ]
+
+  let activeSection = '';
 </script>
 
 <PostContainer>
 <PostTable>
-<Toc
-  title=""
-  --toc-active-color="rgba(255, 49, 0, 0.96)"
-  --toc-li-hover-color="rgba(255, 49, 0, 0.96)"
-  --toc-active-bg="transparent"
->
 
 ## Table of contents
 
-- [Introduction to UNIT3D](#introduction-to-unit3d)
-  - [Overview](#overview)
-  - [Key features](#key-features)
-- [UNIT3D Review](#unit3d-review)
-- [Tutorial: Setting Up UNIT3D on a Digital Ocean Droplet](#tutorial-setting-up-unit3d-on-a-digital-ocean-droplet)
-  - [Requirements](#requirements)
-  - [Step 1. Create the Droplet in Digital Ocean](#step-1-create-the-droplet-in-digital-ocean)
-  - [Step 2. Update the Server](#step-2-update-the-server)
-  - [Step 3. Run the UNIT3D Installer](#step-3-run-the-unit3d-installer)
-  - [Step 4. Login Page](#step-4-login-page)
-  - [Troubleshooting](#troubleshooting)
-- [User Interface](#user-interface)
-- [Conclusion](#conclusion)
-
-</Toc>
+<TableOfContents {sections} {activeSection} />
+
 </PostTable>
 
 <PostBody>
diff --git a/src/routes/(article)/the-enigmatic-torrent-source-field/+page.md b/src/routes/(article)/the-enigmatic-torrent-source-field/+page.md
index 5c9fa1c..5a65336 100644
--- a/src/routes/(article)/the-enigmatic-torrent-source-field/+page.md
+++ b/src/routes/(article)/the-enigmatic-torrent-source-field/+page.md
@@ -14,38 +14,37 @@ hidden: false
 ---
 
 <script>
-  import Toc from 'svelte-toc';
   import Callout from "$lib/components/molecules/Callout.svelte";
   import CodeBlock from "$lib/components/molecules/CodeBlock.svelte";
   import Image from "$lib/components/atoms/Image.svelte";
   import PostBody from "$lib/components/molecules/PostBody.svelte";
   import PostContainer from "$lib/components/molecules/PostContainer.svelte";
   import PostTable from "$lib/components/molecules/PostTable.svelte";
+  import TableOfContents from '$lib/components/atoms/TableOfContents.svelte';
+
+  let sections = [
+	{ name: "Unraveling the \"Source\" Field", id: "unraveling-the-source-field" },
+	{ name: "\"Source\" field internals", id: "source-field-internals" },
+	{ name: "BitTorrent Documentation: Lost in the Ether?", id: "bittorrent-documentation-lost-in-the-ether" },
+	{ name: "Cross-seeding", id: "cross-seeding" },
+	{ name: "What are the reliable sources for BitTorrent documentation?", id: "what-are-the-reliable-sources-for-bittorrent-documentation" },
+	{ name: "Links", id: "links" },
+	{ name: "Acknowledgments", id: "acknowledgments" },
+	{ name: "Conclusion", id: "conclusion" }
+  ]
+
+  let activeSection = '';
 </script>
 
 The BitTorrent protocol, despite its widespread usage, has often been met with raised eyebrows by the tech community due to its sometimes vague or entirely missing documentation. Today, we'll dive into one such mystery: the "source" field located within the "info" part of torrent files.
 
 <PostContainer>
 <PostTable>
-<Toc
-  title=""
-  --toc-active-color="rgba(255, 49, 0, 0.96)"
-  --toc-li-hover-color="rgba(255, 49, 0, 0.96)"
-  --toc-active-bg="transparent"
->
 
 ## Table of contents
 
-- [Unraveling the "Source" Field](#unraveling-the-source-field)
-- ["Source" field internals](#source-field-internals)
-- [BitTorrent Documentation: Lost in the Ether?](#bittorrent-documentation-lost-in-the-ether)
-- [Cross-seeding](#cross-seeding)
-- [What are the reliable sources for BitTorrent documentation?](#what-are-the-reliable-sources-for-bittorrent-documentation)
-- [Links](#links)
-- [Acknowledgments](#acknowledgments)
-- [Conclusion](#conclusion)
+<TableOfContents {sections} {activeSection} />
 
-</Toc>
 </PostTable>
 
 <PostBody>
diff --git a/src/routes/(article)/torrust-enhancing-the-bittorrent-ecosystem/+page.md b/src/routes/(article)/torrust-enhancing-the-bittorrent-ecosystem/+page.md
index 045878a..8b75a40 100644
--- a/src/routes/(article)/torrust-enhancing-the-bittorrent-ecosystem/+page.md
+++ b/src/routes/(article)/torrust-enhancing-the-bittorrent-ecosystem/+page.md
@@ -14,35 +14,34 @@ hidden: false
 ---
 
 <script>
-  import Toc from 'svelte-toc';
   import Callout from "$lib/components/molecules/Callout.svelte";
   import CodeBlock from "$lib/components/molecules/CodeBlock.svelte";
   import Image from "$lib/components/atoms/Image.svelte";
   import PostBody from "$lib/components/molecules/PostBody.svelte";
   import PostContainer from "$lib/components/molecules/PostContainer.svelte";
   import PostTable from "$lib/components/molecules/PostTable.svelte";
+  import TableOfContents from '$lib/components/atoms/TableOfContents.svelte';
+
+  let sections = [
+    { name: "Hello World!", id: "hello-world" },
+    { name: "Why is BitTorrent important?", id: "why-is-bittorrent-important" }
+  ]
+
+  let activeSection = '';
 </script>
 
 <PostContainer>
 <PostTable>
-<Toc
-  title=""
-  --toc-active-color="rgba(255, 49, 0, 0.96)"
-  --toc-li-hover-color="rgba(255, 49, 0, 0.96)"
-  --toc-active-bg="transparent"
->
 
 ## Table of contents
 
-- [Hello World](#hello-world)
-- [Why is BitTorrent important?](#why-is-bittorrent-important)
+<TableOfContents {sections} {activeSection} />
 
-</Toc>
 </PostTable>
 
 <PostBody>
 
-## Hello World! <!-- markdownlint-disable MD026 -->
+## Hello World!
 
 We haven't introduced the Torrust Organization in this blog yet, including its vision, mission, and roadmap. This should have been the first post, but after contributing to the BitTorrent ecosystem for over three years, we now have a better understanding of what the BitTorrent protocols offer and how we can enhance the ecosystem.
 
diff --git a/src/routes/(article)/what-is-a-bittorrent-tracker/+page.md b/src/routes/(article)/what-is-a-bittorrent-tracker/+page.md
index 0b8a53a..a54aa62 100644
--- a/src/routes/(article)/what-is-a-bittorrent-tracker/+page.md
+++ b/src/routes/(article)/what-is-a-bittorrent-tracker/+page.md
@@ -19,35 +19,35 @@ description: Basic explanation of  what a BitTorrent tracker is and the two type
 ---
 
 <script>
-  import Toc from 'svelte-toc';
   import Callout from "$lib/components/molecules/Callout.svelte";
   import CodeBlock from "$lib/components/molecules/CodeBlock.svelte";
   import Image from "$lib/components/atoms/Image.svelte";
   import PostBody from "$lib/components/molecules/PostBody.svelte";
   import PostContainer from "$lib/components/molecules/PostContainer.svelte";
   import PostTable from "$lib/components/molecules/PostTable.svelte";
+	import TableOfContents from '$lib/components/atoms/TableOfContents.svelte';
+
+  let sections = [
+		{ name: 'Introduction', id: 'introduction' },
+		{ name: 'What is a BitTorrent Tracker', id: 'what-is-a-bittorrent-tracker' },
+		{ name: 'Public trackers', id: 'public-trackers' },
+		{ name: 'Private trackers', id: 'private-trackers' },
+		{ name: 'BitTorrent Index vs BitTorrent Tracker', id: 'bittorrent-index-vs-bittorrent-tracker' }
+	];
+
+
+	let activeSection = '';
 </script>
 
 Photo by Alex Andrews: <https://www.pexels.com/photo/shallow-focus-photography-of-black-and-silver-compasses-on-top-of-map-1203808/>.
 
 <PostContainer>
 <PostTable>
-<Toc
-  title=""
-  --toc-active-color="rgba(255, 49, 0, 0.96)"
-  --toc-li-hover-color="rgba(255, 49, 0, 0.96)"
-  --toc-active-bg="transparent"
->
 
 ## Table of Contents
 
-- [Introduction](#introduction)
-- [What is a BitTorrent Tracker](#what-is-a-bittorrent-tracker)
-- [Public trackers](#public-trackers)
-- [Private trackers](#private-trackers)
-- [BitTorrent Index vs BitTorrent Tracker](#bittorrent-index-vs-bittorrent-tracker)
+<TableOfContents {sections} {activeSection} />
 
-</Toc>
 </PostTable>
 
 <PostBody>
diff --git a/src/routes/(home)/+layout.svelte b/src/routes/(home)/+layout.svelte
index 774c3fc..1c6e466 100644
--- a/src/routes/(home)/+layout.svelte
+++ b/src/routes/(home)/+layout.svelte
@@ -27,5 +27,6 @@
 <style lang="scss">
 	main {
 		background-color: rgba(26, 26, 26, 1);
+		padding-bottom: 64px;
 	}
 </style>
diff --git a/src/routes/(pages)/+layout.svelte b/src/routes/(pages)/+layout.svelte
index 63fb13e..bdcadd9 100644
--- a/src/routes/(pages)/+layout.svelte
+++ b/src/routes/(pages)/+layout.svelte
@@ -6,10 +6,13 @@
 </div>
 
 <style lang="scss">
+	@import '$lib/scss/breakpoints.scss';
+
 	.layout-container {
 		background: rgba(26, 26, 26, 1);
 		padding: 0;
 		color: rgba(245, 245, 245, 0.96);
+		padding-bottom: 64px;
 	}
 
 	.layout-container :global(.slider-wrapper) {
diff --git a/src/routes/(pages)/about/+page.svelte b/src/routes/(pages)/about/+page.svelte
index edd036f..d2ff593 100644
--- a/src/routes/(pages)/about/+page.svelte
+++ b/src/routes/(pages)/about/+page.svelte
@@ -58,7 +58,7 @@
 	];
 </script>
 
-<div>
+<div class="container">
 	<h1>About</h1>
 	<div class="layout">
 		<div class="toc">
@@ -395,7 +395,13 @@
 		padding-inline: 1.5rem;
 	}
 
+	.container {
+		margin: 0 auto;
+	}
+
 	.layout {
+		display: flex;
+		flex-direction: column;
 		margin-top: 4rem;
 	}
 
@@ -404,7 +410,7 @@
 	}
 
 	h1 {
-		padding-top: 1rem;
+		padding-top: 64px;
 		font-size: 2.25rem;
 	}
 
@@ -414,7 +420,7 @@
 	}
 
 	h2:not(:first-of-type) {
-		padding-top: 1.5rem; /* Add top padding to all h2 elements except the first one */
+		padding-top: 1.5rem;
 	}
 
 	h3 {
@@ -422,26 +428,40 @@
 		font-size: 1.3rem;
 	}
 
-	h2:not(:first-of-type) {
-		padding-top: 1.5rem; /* Add top padding to all h2 elements except the first one */
-	}
-
 	p {
 		font-size: 1rem;
 		padding-top: 1.5rem;
 		color: rgba(245, 245, 245, 0.8);
 	}
 
+	#bitTorrentProtocol {
+		border-top: 1px solid rgba(245, 245, 245, 0.08);
+		margin-top: 48px;
+	}
+
+	img {
+		border-radius: 24px;
+	}
+
+	@include for-tablet-portrait-up {
+		.layout {
+			flex-direction: column;
+		}
+
+		.content {
+			margin-top: 2rem;
+		}
+	}
+
 	@include for-desktop-up {
-		h1,
 		.layout {
-			display: flex;
+			flex-direction: row;
 			gap: 2rem;
-			padding-inline: 9.25rem;
 		}
 
 		.content {
-			margin-top: 0rem;
+			width: 75%;
+			margin-top: 0;
 		}
 
 		h1 {
diff --git a/src/routes/(pages)/community/+page.svelte b/src/routes/(pages)/community/+page.svelte
index 30b1035..4108644 100644
--- a/src/routes/(pages)/community/+page.svelte
+++ b/src/routes/(pages)/community/+page.svelte
@@ -12,7 +12,7 @@
 	let activeSection = '';
 </script>
 
-<div>
+<div class="container">
 	<h1>Community</h1>
 	<div class="layout">
 		<div>
@@ -226,7 +226,7 @@
 	}
 
 	h1 {
-		padding-top: 1rem;
+		padding-top: 64px;
 		font-size: 2.25rem;
 	}
 
@@ -251,10 +251,13 @@
 	}
 
 	@include for-desktop-up {
+		.container {
+			margin: 0 auto;
+		}
+
 		h1,
 		.layout {
 			display: flex;
-			padding-inline: 9.25rem;
 			gap: 2rem;
 		}
 
diff --git a/src/routes/(pages)/self-host/+page.svelte b/src/routes/(pages)/self-host/+page.svelte
index bdd715d..d5dbd23 100644
--- a/src/routes/(pages)/self-host/+page.svelte
+++ b/src/routes/(pages)/self-host/+page.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-	import TableOfContents from '$lib/components/atoms/TableOfContents.svelte'; // Adjust the path if needed
+	import TableOfContents from '$lib/components/atoms/TableOfContents.svelte';
 	import Callout from '$lib/components/molecules/Callout.svelte';
 
 	// Array of section objects with display names and IDs
@@ -12,7 +12,7 @@
 	let activeSection = '';
 </script>
 
-<div>
+<div class="container">
 	<h1>Self-host</h1>
 
 	<div class="layout">
@@ -134,7 +134,7 @@
 	}
 
 	h1 {
-		padding-top: 1rem;
+		padding-top: 64px;
 		font-size: 2.25rem;
 	}
 
@@ -159,10 +159,13 @@
 	}
 
 	@include for-desktop-up {
+		.container {
+			margin: 0 auto;
+		}
+
 		h1,
 		.layout {
 			display: flex;
-			padding-inline: 9.25rem;
 			gap: 2rem;
 		}
 
diff --git a/src/routes/(pages)/torrent-index/+page.svelte b/src/routes/(pages)/torrent-index/+page.svelte
index c8c7cdb..acc5bcc 100644
--- a/src/routes/(pages)/torrent-index/+page.svelte
+++ b/src/routes/(pages)/torrent-index/+page.svelte
@@ -52,7 +52,9 @@
 	</div>
 
 	<div class="slider-wrapper">
-		<Slider titleArr={indexTitleArr1} />
+		<div class="slider-content">
+			<Slider titleArr={indexTitleArr1} />
+		</div>
 	</div>
 
 	<div class="inner-container">
@@ -118,6 +120,15 @@
 		width: 100vw;
 		margin-left: calc(50% - 50vw);
 		overflow-x: hidden;
+		display: flex;
+		justify-content: center;
+
+		.slider-content {
+			width: 100%;
+			max-width: 2070px;
+			display: flex;
+			justify-content: center;
+		}
 	}
 
 	.inner-container {
diff --git a/src/routes/blog/+page.svelte b/src/routes/blog/+page.svelte
index 71f6da1..7723efa 100644
--- a/src/routes/blog/+page.svelte
+++ b/src/routes/blog/+page.svelte
@@ -28,13 +28,30 @@
 	.container {
 		display: flex;
 		flex-direction: column;
+		margin: 0 auto;
 		padding-top: 3rem;
 		background: rgba(26, 26, 26, 1);
 		color: rgba(245, 245, 245, 0.96);
+		padding-bottom: 64px;
+		box-sizing: border-box;
+
+		@include for-desktop-up {
+			max-width: 1800px;
+		}
 	}
 
 	.header {
 		padding-inline: 3.5rem;
+		margin: 0 auto;
+
+		@include for-tablet-portrait-up {
+			width: 700px;
+		}
+
+		@include for-desktop-up {
+			width: 1100px;
+			padding-inline: 0rem;
+		}
 
 		h1 {
 			padding-bottom: 1rem;
diff --git a/static/favicon_io/android-chrome-192x192.png b/static/favicon_io/android-chrome-192x192.png
new file mode 100644
index 0000000..bf5855b
Binary files /dev/null and b/static/favicon_io/android-chrome-192x192.png differ
diff --git a/static/favicon_io/android-chrome-512x512.png b/static/favicon_io/android-chrome-512x512.png
new file mode 100644
index 0000000..cb34671
Binary files /dev/null and b/static/favicon_io/android-chrome-512x512.png differ
diff --git a/static/favicon_io/apple-touch-icon.png b/static/favicon_io/apple-touch-icon.png
new file mode 100644
index 0000000..479d311
Binary files /dev/null and b/static/favicon_io/apple-touch-icon.png differ
diff --git a/static/favicon_io/favicon-16x16.png b/static/favicon_io/favicon-16x16.png
new file mode 100644
index 0000000..fa70ce0
Binary files /dev/null and b/static/favicon_io/favicon-16x16.png differ
diff --git a/static/favicon_io/favicon-32x32.png b/static/favicon_io/favicon-32x32.png
new file mode 100644
index 0000000..aa8d3ce
Binary files /dev/null and b/static/favicon_io/favicon-32x32.png differ
diff --git a/static/favicon_io/favicon.ico b/static/favicon_io/favicon.ico
new file mode 100644
index 0000000..11e028e
Binary files /dev/null and b/static/favicon_io/favicon.ico differ
diff --git a/static/favicon_io/site.webmanifest b/static/favicon_io/site.webmanifest
new file mode 100644
index 0000000..52a2fe3
--- /dev/null
+++ b/static/favicon_io/site.webmanifest
@@ -0,0 +1,11 @@
+{
+	"name": "",
+	"short_name": "",
+	"icons": [
+		{ "src": "/android-chrome-192x192.png", "sizes": "192x192", "type": "image/png" },
+		{ "src": "/android-chrome-512x512.png", "sizes": "512x512", "type": "image/png" }
+	],
+	"theme_color": "#ffffff",
+	"background_color": "#ffffff",
+	"display": "standalone"
+}
diff --git a/static/favicons/android-chrome-192x192.png b/static/favicons/android-chrome-192x192.png
deleted file mode 100644
index 84a71bc..0000000
Binary files a/static/favicons/android-chrome-192x192.png and /dev/null differ
diff --git a/static/favicons/android-chrome-512x512.png b/static/favicons/android-chrome-512x512.png
deleted file mode 100644
index 9c5b019..0000000
Binary files a/static/favicons/android-chrome-512x512.png and /dev/null differ
diff --git a/static/favicons/apple-touch-icon.png b/static/favicons/apple-touch-icon.png
deleted file mode 100644
index 22615ae..0000000
Binary files a/static/favicons/apple-touch-icon.png and /dev/null differ
diff --git a/static/favicons/favicon-16x16.png b/static/favicons/favicon-16x16.png
deleted file mode 100644
index f524ba1..0000000
Binary files a/static/favicons/favicon-16x16.png and /dev/null differ
diff --git a/static/favicons/favicon-32x32.png b/static/favicons/favicon-32x32.png
deleted file mode 100644
index eb8d253..0000000
Binary files a/static/favicons/favicon-32x32.png and /dev/null differ
diff --git a/static/favicons/favicon.ico b/static/favicons/favicon.ico
deleted file mode 100644
index b13052b..0000000
Binary files a/static/favicons/favicon.ico and /dev/null differ
diff --git a/static/favicons/favicon.png b/static/favicons/favicon.png
deleted file mode 100644
index 84a71bc..0000000
Binary files a/static/favicons/favicon.png and /dev/null differ
diff --git a/static/favicons/safari-pinned-tab.svg b/static/favicons/safari-pinned-tab.svg
deleted file mode 100644
index 07fe1f7..0000000
--- a/static/favicons/safari-pinned-tab.svg
+++ /dev/null
@@ -1,35 +0,0 @@
-<?xml version="1.0" standalone="no"?>
-<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"
- "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
-<svg version="1.0" xmlns="http://www.w3.org/2000/svg"
- width="500.000000pt" height="500.000000pt" viewBox="0 0 500.000000 500.000000"
- preserveAspectRatio="xMidYMid meet">
-<metadata>
-Created by potrace 1.14, written by Peter Selinger 2001-2017
-</metadata>
-<g transform="translate(0.000000,500.000000) scale(0.100000,-0.100000)"
-fill="#000000" stroke="none">
-<path d="M1019 4602 c-12 -2 -14 -86 -12 -575 0 -314 2 -582 2 -594 l1 -23
-220 0 c203 0 220 1 221 18 0 9 1 171 1 359 1 320 2 342 18 333 10 -5 19 -7 22
--5 9 9 78 12 78 2 0 -6 4 -6 13 0 6 6 21 8 32 6 11 -2 26 -4 33 -3 13 1 45 1
-65 0 6 0 31 1 55 3 24 2 45 0 47 -4 3 -3 17 -4 32 -2 26 4 66 5 103 3 8 -1 27
-1 43 3 15 2 27 0 27 -6 0 -6 5 -6 13 -1 6 5 26 8 42 7 44 -5 47 -4 78 0 15 2
-27 0 27 -5 0 -5 5 -6 11 -2 18 11 100 10 107 -1 6 -10 10 -3144 4 -3200 l-4
--30 -311 1 c-172 0 -317 -3 -322 -7 -7 -5 -10 -90 -9 -236 1 -125 2 -230 3
--233 1 -7 1741 -7 1742 0 5 30 3 162 -3 166 -4 3 -4 13 0 22 11 22 9 268 -2
-279 -4 4 -150 8 -324 8 l-317 1 -1 1609 c0 886 1 1615 3 1621 4 11 43 11 62 0
-5 -4 12 -3 15 2 3 5 20 7 38 5 43 -5 48 -5 81 0 15 2 27 0 27 -6 0 -6 5 -6 13
--1 6 5 26 8 42 7 44 -5 47 -4 78 0 15 2 27 0 27 -5 0 -5 5 -6 12 -2 7 5 28 7
-48 6 19 -1 41 -2 48 -2 13 1 43 1 67 0 8 0 22 0 30 0 8 0 21 0 28 0 6 0 35 1
-62 3 28 1 56 -1 63 -6 7 -6 12 -6 12 0 0 11 50 11 67 0 6 -4 14 -1 16 5 9 21
-9 32 8 -592 -1 -36 0 -76 2 -90 l2 -25 220 0 220 0 0 95 c0 52 5 98 10 102 7
-5 7 8 0 8 -6 0 -10 44 -10 112 0 64 4 116 10 120 7 5 7 8 0 8 -6 0 -9 44 -8
-117 5 286 5 615 -1 621 -6 5 -2996 10 -3027 4z m1616 -1089 c-2 -10 -4 -20 -4
--23 -1 -3 -5 2 -11 10 -6 9 -5 17 3 22 16 10 16 10 12 -9z m-120 -113 c-3 -5
--10 -10 -16 -10 -5 0 -9 5 -9 10 0 6 7 10 16 10 8 0 12 -4 9 -10z m-35 -10 c0
--5 -5 -10 -11 -10 -5 0 -7 5 -4 10 3 6 8 10 11 10 2 0 4 -4 4 -10z m-50 -31
-c0 -5 -4 -8 -9 -4 -5 3 -17 -2 -25 -11 -13 -12 -16 -13 -16 -1 0 7 3 17 7 20
-10 11 43 8 43 -4z m107 -2835 c-3 -3 -12 -4 -19 -1 -8 3 -5 6 6 6 11 1 17 -2
-13 -5z"/>
-</g>
-</svg>
diff --git a/static/favicons/site.webmanifest b/static/favicons/site.webmanifest
deleted file mode 100644
index ad8f8d7..0000000
--- a/static/favicons/site.webmanifest
+++ /dev/null
@@ -1,19 +0,0 @@
-{
-	"name": "Torrust Website",
-	"short_name": "Torrust Website",
-	"icons": [
-		{
-			"src": "/favicons/android-chrome-192x192.png",
-			"sizes": "192x192",
-			"type": "image/png"
-		},
-		{
-			"src": "/favicons/android-chrome-512x512.png",
-			"sizes": "512x512",
-			"type": "image/png"
-		}
-	],
-	"theme_color": "#ffffff",
-	"background_color": "#ffffff",
-	"display": "standalone"
-}