diff --git a/src/scss/custom.scss b/src/scss/custom.scss
index e039bff7c61..4b9b9ad44fa 100644
--- a/src/scss/custom.scss
+++ b/src/scss/custom.scss
@@ -830,7 +830,7 @@ code:hover .code-unfocus {
 div[class^='theme-announcement-bar'] {
   font-family: var(--font-mm-euclid);
   font-size: 1.4rem;
-  padding: 1rem 2rem;
+  padding: 0.5rem 2rem;
   text-align: center;
   border-bottom: 1px solid var(--general-gray-light);
   background-color: var(--developer-purple-light);
diff --git a/src/theme/AnnouncementBar/index.tsx b/src/theme/AnnouncementBar/index.tsx
new file mode 100644
index 00000000000..11339f32270
--- /dev/null
+++ b/src/theme/AnnouncementBar/index.tsx
@@ -0,0 +1,24 @@
+import React from 'react'
+import { useLocation } from '@docusaurus/router'
+
+export default function AnnouncementBar(): JSX.Element | null {
+  const location = useLocation()
+  
+  // Show on smart-accounts-kit paths or main/homepage
+  const isSmartAccountsKitPath = location.pathname.includes('/smart-accounts-kit')
+  const isMainPath = location.pathname === '/'
+
+  const isValidPath = isSmartAccountsKitPath || isMainPath
+
+  if (!isValidPath) {
+    return null
+  }
+
+  return (
+    <div className="theme-announcement-bar" role="banner" data-announcement-bar="true">
+      <div style={{ textAlign: 'center' }}>
+        <strong>Delegation Toolkit is now renamed to <a href="/smart-accounts-kit">Smart Accounts Kit</a>.</strong>
+      </div>
+    </div>
+  )
+}