diff --git a/packages/tiles-playground/components/Banner.tsx b/packages/tiles-playground/components/Banner.tsx
index b8a3dca1..2984d660 100644
--- a/packages/tiles-playground/components/Banner.tsx
+++ b/packages/tiles-playground/components/Banner.tsx
@@ -2,20 +2,25 @@ import Link from 'next/link';
 
 export default function Banner() {
   return (
-    <div className="bg-yellow-100 border-b border-yellow-200 px-4 py-3">
-      <div className="flex items-center justify-center text-sm">
-        <span className="text-yellow-800">
-          Update: The work on the project has been paused.{' '}
-          <Link 
-            href="https://ankeshbharti.com/stories/announcing-tiles-notebook-alpha"
-            className="text-yellow-900 underline hover:text-yellow-700 font-medium"
-            target="_blank"
-            rel="noopener noreferrer"
-          >
-            Learn more
-          </Link>
-        </span>
-      </div>
+    <div
+      style={{
+        background: '#EEE',
+        borderBottom: '1px solid #027BFF',
+        padding: '8px 16px',
+        textAlign: 'center',
+        color: '#027BFF',
+        fontSize: '14px',
+      }}
+    >
+      Work on the project has been paused.{" "}
+      <Link
+        href="https://ankeshbharti.com/stories/announcing-tiles-notebook-alpha"
+        target="_blank"
+        rel="noopener noreferrer"
+        style={{ color: '#F00', textDecoration: 'underline', fontWeight: 500 }}
+      >
+        Learn more
+      </Link>
     </div>
   );
-} 
\ No newline at end of file
+}
\ No newline at end of file