diff --git a/assets/data/news.json b/assets/data/news.json
index f15aeaad0..4f15ee406 100644
--- a/assets/data/news.json
+++ b/assets/data/news.json
@@ -1,9 +1,6 @@
 {
-    "id": 52,
-    "content": "Tailwind Presets for Unstyled PrimeVue",
+    "id": 60,
+    "content": "Introducing the new Styled Mode Theming",
     "linkText": "Learn More",
-    "linkHref": "http://tailwind.primevue.org",
-    "backgroundStyle": "background-color:var(--primary-color)",
-    "textStyle": "color:var(--primary-color-text);font-weight:500",
-    "linkStyle": "color:var(--primary-color-text);font-weight:700;text-decoration: underline;"
+    "linkHref": "http://primevue.org/theming"
 }
diff --git a/assets/styles/layout/_news.scss b/assets/styles/layout/_news.scss
index d4507bffd..7fb5dfadc 100644
--- a/assets/styles/layout/_news.scss
+++ b/assets/styles/layout/_news.scss
@@ -6,6 +6,7 @@
     width: 100%;
     height: 2rem;
     padding: 0 2rem;
+    background-color: var(--primary-color);
 
     .layout-news-container {
         display: flex;
@@ -30,6 +31,8 @@
         text-overflow: ellipsis;
         overflow: hidden;
         min-width: 0%;
+        font-weight: 500;
+        color: var(--primary-inverse-color);
     }
 
     .layout-news-link {
@@ -41,7 +44,7 @@
     .layout-news-link,
     .layout-news-link:visited,
     .layout-news-link:active {
-        color:var(--primary-color-inverse);
+        color:var(--primary-inverse-color);
         font-weight:700;
     }
     .layout-news-link:hover {