diff --git a/src/config/sections.js b/src/config/sections.js
index 4a2a237..ba448af 100644
--- a/src/config/sections.js
+++ b/src/config/sections.js
@@ -15,7 +15,7 @@ export const sections = {
 		id: "html",
 		title: "HTML",
 		description: "Semantic markup and native elements",
-		color: "#9b59b6",
+		color: "#e91e63",
 		order: 2
 	},
 	tailwind: {
diff --git a/src/index.html b/src/index.html
index 8b2c911..4c9fdac 100644
--- a/src/index.html
+++ b/src/index.html
@@ -145,7 +145,7 @@
 								<span class="section-card-progress" id="css-progress"></span>
 							</a>
 							<a href="#html" class="section-card" data-section="html">
-								<div class="section-card-icon" style="background: #9b59b6">HTML</div>
+								<div class="section-card-icon" style="background: #e91e63">HTML</div>
 								<h3>HTML</h3>
 								<p data-i18n="landingHtmlDesc">Semantic markup and native elements</p>
 								<span class="section-card-progress" id="html-progress"></span>
diff --git a/src/main.css b/src/main.css
index 081c09f..5ff2762 100644
--- a/src/main.css
+++ b/src/main.css
@@ -1755,7 +1755,7 @@ input:checked + .toggle-slider::before {
 
 .coming-soon-badge {
 	display: inline-block;
-	background: linear-gradient(135deg, #0891b2, #0e7490);
+	background: linear-gradient(135deg, #7c6f8a, #5e5168);
 	color: white;
 	font-size: 0.65rem;
 	font-weight: 600;