diff --git a/bin/assets/ui/breeze.css b/bin/assets/ui/breeze.css
index 0f04cf5bf..b713c52ea 100644
--- a/bin/assets/ui/breeze.css
+++ b/bin/assets/ui/breeze.css
@@ -603,7 +603,6 @@ tab::icon {
 Tab::close {
 	width: 10dp;
 	height: 10dp;
-	border-radius: 5dp;
 	foreground-image: url("data:image/svg,<svg width='16' height='16' viewBox='0 0 16 16'><path fill='#ffffff' fill-rule='evenodd' d='M 2.3432061,13.657206 A 8.0002061,8.0002061 0 1 1 13.657206,2.3432061 8.0002061,8.0002061 0 0 1 2.3432061,13.657206 Z m 3.687,-8.6869999 a 0.75,0.75 0 0 0 -1.06,1.06 l 1.97,1.97 -1.97,1.97 a 0.75,0.75 0 1 0 1.06,1.0599999 l 1.97,-1.9699999 1.97,1.9699999 A 0.75,0.75 0 1 0 11.030206,9.9702061 l -1.9699999,-1.97 1.9699999,-1.97 a 0.75,0.75 0 1 0 -1.0599999,-1.06 l -1.97,1.97 z' /></svg>");
 	foreground-tint: var(--tab-close);
 	foreground-size: 10dp 10dp;
diff --git a/src/tools/ecode/applayout.xml.hpp b/src/tools/ecode/applayout.xml.hpp
index 2437ad934..fc6200a3b 100644
--- a/src/tools/ecode/applayout.xml.hpp
+++ b/src/tools/ecode/applayout.xml.hpp
@@ -422,8 +422,27 @@ Anchor.error:hover {
 #code_container Tab:hover > Tab::close {
 	opacity: 1;
 }
-#code_container Tab.tab_modified > tab::icon {
-	tint: var(--font-highlight);
+#code_container Tab > Tab::close {
+	foreground-image: icon(tab-close, 15dp);
+	foreground-tint: var(--tab-close);
+	foreground-position: center;
+	foreground-size: auto;
+}
+#code_container Tab > Tab::close:hover {
+	foreground-tint: var(--tab-close-hover);
+}
+#code_container Tab.tab_modified > tab::close {
+	foreground-image: icon(circle-filled, 16dp);
+	foreground-tint: var(--primary);
+	foreground-size: auto;
+	foreground-position: center;
+	opacity: 1;
+}
+#code_container Tab.tab_modified > Tab::close:hover {
+	foreground-image: icon(tab-close, 15dp);
+	foreground-tint: var(--tab-close-hover);
+	foreground-position: center;
+	foreground-size: auto;
 }
 #project_view ScrollBar {
 	opacity: 0;