diff --git a/openmetadata-ui/src/main/resources/ui/src/components/DataMarketplace/AnnouncementsWidgetV2/AnnouncementItemV2.component.tsx b/openmetadata-ui/src/main/resources/ui/src/components/DataMarketplace/AnnouncementsWidgetV2/AnnouncementItemV2.component.tsx
index e588a293b692..68869a5ce0d6 100644
--- a/openmetadata-ui/src/main/resources/ui/src/components/DataMarketplace/AnnouncementsWidgetV2/AnnouncementItemV2.component.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/components/DataMarketplace/AnnouncementsWidgetV2/AnnouncementItemV2.component.tsx
@@ -72,8 +72,10 @@ const AnnouncementItemV2 = ({
         }
       }}>
       <AnnouncementCardV1Content
+        backgroundColor="var(--tw-color-utility-blue-dark-50)"
+        borderColor="var(--tw-color-utility-blue-dark-500)"
         columnName={columnName}
-        currentBackgroundColor="var(--color-utility-blue-100)"
+        currentBackgroundColor="var(--tw-color-utility-blue-dark-600)"
         description={description}
         entityFQN={entityFQN}
         entityIcon={entityIcon}
diff --git a/openmetadata-ui/src/main/resources/ui/src/components/DataMarketplace/AnnouncementsWidgetV2/AnnouncementsWidgetV2.component.tsx b/openmetadata-ui/src/main/resources/ui/src/components/DataMarketplace/AnnouncementsWidgetV2/AnnouncementsWidgetV2.component.tsx
index ebf6d5ee78cd..03a25d1d8b31 100644
--- a/openmetadata-ui/src/main/resources/ui/src/components/DataMarketplace/AnnouncementsWidgetV2/AnnouncementsWidgetV2.component.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/components/DataMarketplace/AnnouncementsWidgetV2/AnnouncementsWidgetV2.component.tsx
@@ -118,7 +118,7 @@ const AnnouncementsWidgetV2 = ({ isEditView }: WidgetCommonProps) => {
   if (loading) {
     return (
       <div
-        className="tw:rounded-xl tw:border tw:border-border-primary tw:bg-utility-blue-100 tw:px-1 tw:pt-3 tw:pb-1"
+        className="tw:rounded-xl tw:border tw:border-gray-blue-100 tw:bg-utility-blue-dark-50 tw:px-1 tw:pt-3 tw:pb-1"
         data-testid="announcements-widget-v2">
         <Loader size="small" />
       </div>
@@ -131,7 +131,7 @@ const AnnouncementsWidgetV2 = ({ isEditView }: WidgetCommonProps) => {
 
   return (
     <div
-      className="tw:rounded-xl tw:border tw:border-border-primary tw:bg-utility-blue-100 tw:px-1 tw:pt-3 tw:pb-1 tw:mb-5"
+      className="tw:rounded-xl tw:border tw:border-gray-blue-100 tw:bg-utility-blue-dark-50 tw:px-1 tw:pt-3 tw:pb-1 tw:mb-5"
       data-testid="announcements-widget-v2">
       <div className="tw:flex tw:items-center tw:justify-between tw:mb-2 tw:px-3">
         <div className="tw:flex tw:items-center tw:gap-2">
@@ -148,7 +148,7 @@ const AnnouncementsWidgetV2 = ({ isEditView }: WidgetCommonProps) => {
             className="tw:rounded-md tw:bg-bg-primary tw:px-2 tw:py-0.5 tw:text-text-tertiary"
             size="text-sm"
             weight="medium">
-            {String(announcements.length).padStart(2, '0')}
+            {announcements.length}
           </Typography>
         </div>
       </div>
diff --git a/openmetadata-ui/src/main/resources/ui/src/components/MyData/Widgets/AnnouncementsWidgetV1/AnnouncementCardV1/AnnouncementCardV1.component.tsx b/openmetadata-ui/src/main/resources/ui/src/components/MyData/Widgets/AnnouncementsWidgetV1/AnnouncementCardV1/AnnouncementCardV1.component.tsx
index 84642ce008aa..b65dc41de34c 100644
--- a/openmetadata-ui/src/main/resources/ui/src/components/MyData/Widgets/AnnouncementsWidgetV1/AnnouncementCardV1/AnnouncementCardV1.component.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/components/MyData/Widgets/AnnouncementsWidgetV1/AnnouncementCardV1/AnnouncementCardV1.component.tsx
@@ -14,15 +14,11 @@ import { Card, Typography } from 'antd';
 import classNames from 'classnames';
 import { useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
-import { Link } from 'react-router-dom';
 import { AnnouncementEntity } from '../../../../../rest/announcementsAPI';
-import { getShortRelativeTime } from '../../../../../utils/date-time/DateTimeUtils';
-import entityUtilClassBase from '../../../../../utils/EntityUtilClassBase';
 import { getEntityFQN, getEntityType } from '../../../../../utils/FeedUtils';
-import { getUserPath } from '../../../../../utils/RouterUtils';
 import { getEntityIcon } from '../../../../../utils/TableUtils';
-import RichTextEditorPreviewerV1 from '../../../../common/RichTextEditor/RichTextEditorPreviewerV1';
 import './announcement-card-v1.less';
+import AnnouncementCardV1Content from './AnnouncementCardV1Content.component';
 
 interface AnnouncementCardV1Props {
   announcement: AnnouncementEntity;
@@ -61,115 +57,35 @@ const AnnouncementCardV1 = ({
     };
   }, [announcement]);
 
-  const {
-    announcementTitleSectionStyle,
-    announcementTitleStyle,
-    userNameStyle,
-    timeStampStyle,
-  } = useMemo(() => {
-    if (!currentBackgroundColor) {
-      return {};
-    }
-
-    return {
-      announcementTitleSectionStyle: {
-        background: `linear-gradient(270deg, #ffffff -12.07%, ${currentBackgroundColor} 500.72%)`,
-        color: `${currentBackgroundColor} !important`,
-      },
-      announcementTitleStyle: {
-        borderLeft: `3px solid ${currentBackgroundColor}`,
-        color: `${currentBackgroundColor} !important`,
-      },
-      userNameStyle: {
-        color: currentBackgroundColor,
-      },
-      timeStampStyle: {
-        color: currentBackgroundColor,
-      },
-    };
-  }, [currentBackgroundColor]);
-
   const entityIcon = useMemo(() => getEntityIcon(entityType), [entityType]);
 
+  const gradientBackground = currentBackgroundColor
+    ? `linear-gradient(270deg, #ffffff -12.07%, ${currentBackgroundColor} 500.72%)`
+    : undefined;
+
   return (
     <Card
       className={classNames('announcement-card-v1', disabled ? 'disabled' : '')}
       data-testid={`announcement-card-v1-${announcement.id}`}
       onClick={onClick}>
-      <div className="announcement-card-v1-content">
-        <div className="announcement-header-container">
-          <div
-            className="announcement-title-section"
-            style={announcementTitleSectionStyle}>
-            <div className="announcement-header" style={announcementTitleStyle}>
-              {userName && (
-                <Link
-                  className="user-name"
-                  data-testid="user-link"
-                  style={userNameStyle}
-                  to={getUserPath(userName)}
-                  onClick={(e) => e.stopPropagation()}>
-                  {userName}
-                </Link>
-              )}
-              <span
-                className="announcement-card-entity-icon"
-                style={{ color: currentBackgroundColor ?? 'inherit' }}>
-                {entityIcon}
-              </span>
-              {entityFQN && entityType ? (
-                <Typography.Text
-                  ellipsis={{ tooltip: true }}
-                  style={{ color: currentBackgroundColor ?? 'inherit' }}>
-                  <Link
-                    className="announcement-entity-name"
-                    data-testid="announcement-entity-link"
-                    style={{ color: currentBackgroundColor ?? 'inherit' }}
-                    to={entityUtilClassBase.getEntityLink(
-                      entityType,
-                      entityFQN
-                    )}
-                    onClick={(e) => e.stopPropagation()}>
-                    {entityName}
-                  </Link>
-                </Typography.Text>
-              ) : (
-                <Typography.Text
-                  className="announcement-entity-name"
-                  ellipsis={{ tooltip: true }}
-                  style={{ color: currentBackgroundColor ?? 'inherit' }}>
-                  {entityName}
-                </Typography.Text>
-              )}
-            </div>
-            <Typography.Text className="timestamp" style={timeStampStyle}>
-              {getShortRelativeTime(timestamp)}
-            </Typography.Text>
-          </div>
-        </div>
-
-        <Typography.Paragraph
-          className="announcement-title"
-          ellipsis={{ tooltip: true, rows: 2 }}>
-          {title}
-        </Typography.Paragraph>
-
-        {description && (
-          <RichTextEditorPreviewerV1
-            className="announcement-description"
-            data-testid="announcement-description"
-            markdown={description}
-            maxLength={200}
-            showReadMoreBtn={false}
-          />
-        )}
-
-        {!description && (
-          <Typography.Text className="text-grey-muted text-xs">
-            {t('message.no-announcement-message')}
-          </Typography.Text>
-        )}
-      </div>
+      <AnnouncementCardV1Content
+        backgroundColor={gradientBackground}
+        columnName=""
+        currentBackgroundColor={currentBackgroundColor}
+        description={description}
+        entityFQN={entityFQN}
+        entityIcon={entityIcon}
+        entityName={entityName}
+        entityType={entityType}
+        timestamp={timestamp}
+        title={title}
+        userName={userName}
+      />
+      {!description && (
+        <Typography.Text className="text-grey-muted text-xs">
+          {t('message.no-announcement-message')}
+        </Typography.Text>
+      )}
     </Card>
   );
 };
diff --git a/openmetadata-ui/src/main/resources/ui/src/components/MyData/Widgets/AnnouncementsWidgetV1/AnnouncementCardV1/AnnouncementCardV1Content.component.tsx b/openmetadata-ui/src/main/resources/ui/src/components/MyData/Widgets/AnnouncementsWidgetV1/AnnouncementCardV1/AnnouncementCardV1Content.component.tsx
index 510f5b7a2a93..d58e72c6499b 100644
--- a/openmetadata-ui/src/main/resources/ui/src/components/MyData/Widgets/AnnouncementsWidgetV1/AnnouncementCardV1/AnnouncementCardV1Content.component.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/components/MyData/Widgets/AnnouncementsWidgetV1/AnnouncementCardV1/AnnouncementCardV1Content.component.tsx
@@ -26,6 +26,8 @@ import './announcement-card-v1-content.less';
 const PRIMARY_COLOR = 'var(--ant-primary-color)';
 
 interface AnnouncementCardV1ContentProps {
+  backgroundColor?: string;
+  borderColor?: string;
   className?: string;
   columnName: string;
   currentBackgroundColor?: string;
@@ -44,13 +46,15 @@ interface AnnouncementCardV1ContentProps {
 const VARIANT_CONFIG = {
   default: {
     header: 'tw:h-11 tw:text-[16px] tw:rounded-lg',
+    titleSection: '',
     entityName: 'tw:!text-base tw:!font-medium',
     iconSize: 'tw:size-4',
     title: 'tw:text-sm tw:font-medium tw:!mb-1',
     description: 'tw:text-sm tw:mt-2',
   },
   compact: {
-    header: 'tw:h-[30px] tw:text-xs tw:rounded-l-md',
+    header: 'tw:h-[30px] tw:flex-none tw:text-xs tw:rounded-[4px]',
+    titleSection: 'tw:px-[10px] tw:py-[6px] tw:pl-1',
     entityName: 'tw:!text-[11px] tw:!font-normal',
     iconSize: 'tw:size-[9px]',
     title: 'tw:text-xs tw:font-medium tw:!mb-0',
@@ -59,6 +63,8 @@ const VARIANT_CONFIG = {
 };
 
 const AnnouncementCardV1Content = ({
+  backgroundColor,
+  borderColor,
   className,
   columnName,
   currentBackgroundColor,
@@ -77,6 +83,8 @@ const AnnouncementCardV1Content = ({
   const { t } = useTranslation();
 
   const color = currentBackgroundColor ?? PRIMARY_COLOR;
+  const bgColor = backgroundColor ?? color;
+  const accentBorderColor = borderColor ?? color;
 
   const {
     announcementTitleSectionStyle,
@@ -86,11 +94,11 @@ const AnnouncementCardV1Content = ({
   } = useMemo(() => {
     return {
       announcementTitleSectionStyle: {
-        background: `linear-gradient(270deg, #ffffff -12.07%, ${color} 500.72%)`,
+        background: bgColor,
+        borderLeft: `3px solid ${accentBorderColor}`,
         color: `${color} !important`,
       },
       announcementTitleStyle: {
-        borderLeft: `3px solid ${color}`,
         color: `${color} !important`,
       },
       userNameStyle: {
@@ -100,7 +108,7 @@ const AnnouncementCardV1Content = ({
         color,
       },
     };
-  }, [color]);
+  }, [color, bgColor, accentBorderColor]);
 
   const handleEntityClick = (e: React.MouseEvent) => {
     e.stopPropagation();
@@ -116,30 +124,35 @@ const AnnouncementCardV1Content = ({
         <div
           className={classNames(
             'announcement-title-section',
-            variantConfig.header
+            variantConfig.header,
+            variantConfig.titleSection
           )}
           style={announcementTitleSectionStyle}>
-          {fieldOperation && fieldOperation !== FieldOperation.None ? (
+          {userName || entityName ? (
             <div
               className={classNames(
                 'announcement-header',
                 variantConfig.header
               )}
               style={announcementTitleStyle}>
-              <Link
-                className="user-name"
-                data-testid="user-link"
-                style={userNameStyle}
-                to={getUserPath(userName)}
-                onClick={handleUserClick}>
-                {userName}
-              </Link>
-              <Typography.Text
-                className="field-operation-text"
-                style={{ color }}>
-                {' '}
-                {getFieldOperationText(fieldOperation)}
-              </Typography.Text>
+              {userName && (
+                <Link
+                  className="user-name"
+                  data-testid="user-link"
+                  style={userNameStyle}
+                  to={getUserPath(userName)}
+                  onClick={handleUserClick}>
+                  {userName}
+                </Link>
+              )}
+              {fieldOperation && fieldOperation !== FieldOperation.None && (
+                <Typography.Text
+                  className="field-operation-text"
+                  style={{ color }}>
+                  {' '}
+                  {getFieldOperationText(fieldOperation)}
+                </Typography.Text>
+              )}
               <span
                 className={classNames(
                   'announcement-card-entity-icon tw:flex tw:items-center',
@@ -204,7 +217,7 @@ const AnnouncementCardV1Content = ({
         </div>
       </div>
 
-      {fieldOperation && fieldOperation !== FieldOperation.None && (
+      {(userName || entityName) && title && (
         <Typography.Paragraph
           className={classNames('announcement-title', variantConfig.title)}
           ellipsis={{ tooltip: true, rows: 2 }}>
diff --git a/openmetadata-ui/src/main/resources/ui/src/components/MyData/Widgets/AnnouncementsWidgetV1/AnnouncementCardV1/announcement-card-v1-content.less b/openmetadata-ui/src/main/resources/ui/src/components/MyData/Widgets/AnnouncementsWidgetV1/AnnouncementCardV1/announcement-card-v1-content.less
index 45ef72b71d2e..f562df42d2a3 100644
--- a/openmetadata-ui/src/main/resources/ui/src/components/MyData/Widgets/AnnouncementsWidgetV1/AnnouncementCardV1/announcement-card-v1-content.less
+++ b/openmetadata-ui/src/main/resources/ui/src/components/MyData/Widgets/AnnouncementsWidgetV1/AnnouncementCardV1/announcement-card-v1-content.less
@@ -90,7 +90,6 @@
 
       .announcement-header {
         align-items: center;
-        border-left: 3px solid @primary-color;
         display: flex;
         flex: 1;
         font-weight: @font-semibold;