diff --git a/openmetadata-ui/src/main/resources/ui/src/components/APIEndpoint/APIEndpointVersion/APIEndpointVersion.tsx b/openmetadata-ui/src/main/resources/ui/src/components/APIEndpoint/APIEndpointVersion/APIEndpointVersion.tsx
index a3a367f54d5..15e0bc59f1a 100644
--- a/openmetadata-ui/src/main/resources/ui/src/components/APIEndpoint/APIEndpointVersion/APIEndpointVersion.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/components/APIEndpoint/APIEndpointVersion/APIEndpointVersion.tsx
@@ -134,6 +134,7 @@ const APIEndpointVersion: FC<APIEndpointVersionProp> = ({
               flex="220px">
               <Space className="w-full" direction="vertical" size="large">
                 <DataProductsContainer
+                  newLook
                   activeDomain={domain}
                   dataProducts={currentVersionData?.dataProducts ?? []}
                   hasPermission={false}
diff --git a/openmetadata-ui/src/main/resources/ui/src/components/Container/ContainerVersion/ContainerVersion.component.tsx b/openmetadata-ui/src/main/resources/ui/src/components/Container/ContainerVersion/ContainerVersion.component.tsx
index 6303faeb5fe..92b44e25f4e 100644
--- a/openmetadata-ui/src/main/resources/ui/src/components/Container/ContainerVersion/ContainerVersion.component.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/components/Container/ContainerVersion/ContainerVersion.component.tsx
@@ -178,6 +178,7 @@ const ContainerVersion: React.FC<ContainerVersionProp> = ({
               flex="220px">
               <Space className="w-full" direction="vertical" size="large">
                 <DataProductsContainer
+                  newLook
                   activeDomain={domain}
                   dataProducts={dataProducts ?? []}
                   hasPermission={false}
diff --git a/openmetadata-ui/src/main/resources/ui/src/components/Dashboard/DashboardVersion/DashboardVersion.component.tsx b/openmetadata-ui/src/main/resources/ui/src/components/Dashboard/DashboardVersion/DashboardVersion.component.tsx
index 76cf5576e86..6737073e34e 100644
--- a/openmetadata-ui/src/main/resources/ui/src/components/Dashboard/DashboardVersion/DashboardVersion.component.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/components/Dashboard/DashboardVersion/DashboardVersion.component.tsx
@@ -207,6 +207,7 @@ const DashboardVersion: FC<DashboardVersionProp> = ({
               flex="220px">
               <Space className="w-full" direction="vertical" size="large">
                 <DataProductsContainer
+                  newLook
                   activeDomain={domain}
                   dataProducts={dataProducts ?? []}
                   hasPermission={false}
diff --git a/openmetadata-ui/src/main/resources/ui/src/components/Dashboard/DataModel/DataModelVersion/DataModelVersion.component.tsx b/openmetadata-ui/src/main/resources/ui/src/components/Dashboard/DataModel/DataModelVersion/DataModelVersion.component.tsx
index c444b151874..e59250b4a4c 100644
--- a/openmetadata-ui/src/main/resources/ui/src/components/Dashboard/DataModel/DataModelVersion/DataModelVersion.component.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/components/Dashboard/DataModel/DataModelVersion/DataModelVersion.component.tsx
@@ -165,6 +165,7 @@ const DataModelVersion: FC<DataModelVersionProp> = ({
               flex="220px">
               <Space className="w-full" direction="vertical" size="large">
                 <DataProductsContainer
+                  newLook
                   activeDomain={domain}
                   dataProducts={dataProducts ?? []}
                   hasPermission={false}
diff --git a/openmetadata-ui/src/main/resources/ui/src/components/DataAssets/CommonWidgets/CommonWidgets.tsx b/openmetadata-ui/src/main/resources/ui/src/components/DataAssets/CommonWidgets/CommonWidgets.tsx
index 82454c1e98b..e170c2d9b6b 100644
--- a/openmetadata-ui/src/main/resources/ui/src/components/DataAssets/CommonWidgets/CommonWidgets.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/components/DataAssets/CommonWidgets/CommonWidgets.tsx
@@ -266,6 +266,7 @@ export const CommonWidgets = ({
   const dataProductsWidget = useMemo(() => {
     return (
       <DataProductsContainer
+        newLook
         activeDomain={domain as EntityReference}
         dataProducts={dataProducts ?? []}
         hasPermission={editDataProductPermission}
diff --git a/openmetadata-ui/src/main/resources/ui/src/components/DataProducts/DataProductsContainer/DataProductsContainer.component.tsx b/openmetadata-ui/src/main/resources/ui/src/components/DataProducts/DataProductsContainer/DataProductsContainer.component.tsx
index 5a2b720acbb..218ddf697e0 100644
--- a/openmetadata-ui/src/main/resources/ui/src/components/DataProducts/DataProductsContainer/DataProductsContainer.component.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/components/DataProducts/DataProductsContainer/DataProductsContainer.component.tsx
@@ -18,6 +18,7 @@ import { useTranslation } from 'react-i18next';
 import { useHistory } from 'react-router-dom';
 import { ReactComponent as DataProductIcon } from '../../../assets/svg/ic-data-product.svg';
 import { NO_DATA_PLACEHOLDER } from '../../../constants/constants';
+import { TAG_CONSTANT, TAG_START_WITH } from '../../../constants/Tag.constants';
 import { EntityType } from '../../../enums/entity.enum';
 import { DataProduct } from '../../../generated/entity/domains/dataProduct';
 import { EntityReference } from '../../../generated/entity/type';
@@ -29,6 +30,7 @@ import {
   EditIconButton,
   PlusIconButton,
 } from '../../common/IconButtons/EditIconButton';
+import TagsV1 from '../../Tag/TagsV1/TagsV1.component';
 import DataProductsSelectList from '../DataProductsSelectList/DataProductsSelectList';
 interface DataProductsContainerProps {
   showHeader?: boolean;
@@ -36,6 +38,7 @@ interface DataProductsContainerProps {
   dataProducts: EntityReference[];
   activeDomain?: EntityReference;
   onSave?: (dataProducts: DataProduct[]) => Promise<void>;
+  newLook?: boolean;
 }
 
 const DataProductsContainer = ({
@@ -44,6 +47,7 @@ const DataProductsContainer = ({
   dataProducts,
   activeDomain,
   onSave,
+  newLook = false,
 }: DataProductsContainerProps) => {
   const { t } = useTranslation();
   const history = useHistory();
@@ -172,25 +176,66 @@ const DataProductsContainer = ({
     );
   }, [showHeader, dataProducts, hasPermission, showAddTagButton]);
 
+  const addTagButton = useMemo(
+    () =>
+      showAddTagButton ? (
+        <Col
+          className="m-t-xss"
+          data-testid="add-data-product"
+          onClick={handleAddClick}>
+          <TagsV1 startWith={TAG_START_WITH.PLUS} tag={TAG_CONSTANT} />
+        </Col>
+      ) : null,
+    [showAddTagButton]
+  );
+
+  const renderer = useMemo(() => {
+    if (isEditMode) {
+      return autoCompleteFormSelectContainer;
+    }
+
+    if (newLook && isEmpty(renderDataProducts)) {
+      return null;
+    }
+
+    return (
+      <Row data-testid="data-products-list">
+        <Col className="flex flex-wrap gap-2">
+          {!newLook && addTagButton}
+          {renderDataProducts}
+        </Col>
+      </Row>
+    );
+  }, [
+    newLook,
+    isEditMode,
+    addTagButton,
+    renderDataProducts,
+    autoCompleteFormSelectContainer,
+  ]);
+
   const cardProps = useMemo(() => {
     return {
       title: header,
     };
   }, [header, showAddTagButton, isEditMode]);
 
+  if (newLook) {
+    return (
+      <ExpandableCard
+        cardProps={cardProps}
+        dataTestId="data-products-container"
+        isExpandDisabled={isEmpty(dataProducts)}>
+        {renderer}
+      </ExpandableCard>
+    );
+  }
+
   return (
-    <ExpandableCard
-      cardProps={cardProps}
-      dataTestId="data-products-container"
-      isExpandDisabled={isEmpty(dataProducts)}>
-      {isEditMode ? (
-        autoCompleteFormSelectContainer
-      ) : isEmpty(renderDataProducts) ? null : (
-        <Row data-testid="data-products-list">
-          <Col className="flex flex-wrap gap-2">{renderDataProducts}</Col>
-        </Row>
-      )}
-    </ExpandableCard>
+    <div className="w-full" data-testid="data-products-container">
+      {header}
+      {renderer}
+    </div>
   );
 };
 
diff --git a/openmetadata-ui/src/main/resources/ui/src/components/Database/StoredProcedureVersion/StoredProcedureVersion.component.tsx b/openmetadata-ui/src/main/resources/ui/src/components/Database/StoredProcedureVersion/StoredProcedureVersion.component.tsx
index 0b2fe88ebf2..3d3b1e5b81a 100644
--- a/openmetadata-ui/src/main/resources/ui/src/components/Database/StoredProcedureVersion/StoredProcedureVersion.component.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/components/Database/StoredProcedureVersion/StoredProcedureVersion.component.tsx
@@ -130,6 +130,7 @@ const StoredProcedureVersion = ({
               flex="220px">
               <Space className="w-full" direction="vertical" size="large">
                 <DataProductsContainer
+                  newLook
                   activeDomain={domain}
                   dataProducts={dataProducts ?? []}
                   hasPermission={false}
diff --git a/openmetadata-ui/src/main/resources/ui/src/components/Database/TableVersion/TableVersion.component.tsx b/openmetadata-ui/src/main/resources/ui/src/components/Database/TableVersion/TableVersion.component.tsx
index 2efd18c2448..fc966e1be05 100644
--- a/openmetadata-ui/src/main/resources/ui/src/components/Database/TableVersion/TableVersion.component.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/components/Database/TableVersion/TableVersion.component.tsx
@@ -181,6 +181,7 @@ const TableVersion: React.FC<TableVersionProp> = ({
               flex="220px">
               <Space className="w-full" direction="vertical" size="large">
                 <DataProductsContainer
+                  newLook
                   activeDomain={domain}
                   dataProducts={dataProducts ?? []}
                   hasPermission={false}
diff --git a/openmetadata-ui/src/main/resources/ui/src/components/Entity/EntityRightPanel/EntityRightPanel.tsx b/openmetadata-ui/src/main/resources/ui/src/components/Entity/EntityRightPanel/EntityRightPanel.tsx
index 6f014f6de3b..290186b6db3 100644
--- a/openmetadata-ui/src/main/resources/ui/src/components/Entity/EntityRightPanel/EntityRightPanel.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/components/Entity/EntityRightPanel/EntityRightPanel.tsx
@@ -80,6 +80,7 @@ const EntityRightPanel = <T extends ExtentionEntitiesKeys>({
         {showDataProductContainer && (
           <div data-testid="KnowledgePanel.DataProducts">
             <DataProductsContainer
+              newLook
               activeDomain={domain}
               dataProducts={dataProducts}
               hasPermission={editDataProductPermission ?? false}
diff --git a/openmetadata-ui/src/main/resources/ui/src/components/Metric/MetricVersion/MetricVersion.tsx b/openmetadata-ui/src/main/resources/ui/src/components/Metric/MetricVersion/MetricVersion.tsx
index 34c2d65f936..34a73fcba34 100644
--- a/openmetadata-ui/src/main/resources/ui/src/components/Metric/MetricVersion/MetricVersion.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/components/Metric/MetricVersion/MetricVersion.tsx
@@ -136,6 +136,7 @@ const MetricVersion: FC<MetricVersionProp> = ({
               flex="220px">
               <Space className="w-full" direction="vertical" size="large">
                 <DataProductsContainer
+                  newLook
                   activeDomain={domain}
                   dataProducts={currentVersionData?.dataProducts ?? []}
                   hasPermission={false}
diff --git a/openmetadata-ui/src/main/resources/ui/src/components/MlModel/MlModelVersion/MlModelVersion.component.tsx b/openmetadata-ui/src/main/resources/ui/src/components/MlModel/MlModelVersion/MlModelVersion.component.tsx
index f5fdbab85f7..24f4fb9ed75 100644
--- a/openmetadata-ui/src/main/resources/ui/src/components/MlModel/MlModelVersion/MlModelVersion.component.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/components/MlModel/MlModelVersion/MlModelVersion.component.tsx
@@ -288,6 +288,7 @@ const MlModelVersion: FC<MlModelVersionProp> = ({
               flex="220px">
               <Space className="w-full" direction="vertical" size="large">
                 <DataProductsContainer
+                  newLook
                   activeDomain={domain}
                   dataProducts={dataProducts ?? []}
                   hasPermission={false}
diff --git a/openmetadata-ui/src/main/resources/ui/src/components/Pipeline/PipelineVersion/PipelineVersion.component.tsx b/openmetadata-ui/src/main/resources/ui/src/components/Pipeline/PipelineVersion/PipelineVersion.component.tsx
index 85be7803fba..c9996e4e056 100644
--- a/openmetadata-ui/src/main/resources/ui/src/components/Pipeline/PipelineVersion/PipelineVersion.component.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/components/Pipeline/PipelineVersion/PipelineVersion.component.tsx
@@ -217,6 +217,7 @@ const PipelineVersion: FC<PipelineVersionProp> = ({
               flex="220px">
               <Space className="w-full" direction="vertical" size="large">
                 <DataProductsContainer
+                  newLook
                   activeDomain={domain}
                   dataProducts={dataProducts ?? []}
                   hasPermission={false}
diff --git a/openmetadata-ui/src/main/resources/ui/src/components/SearchIndexVersion/SearchIndexVersion.tsx b/openmetadata-ui/src/main/resources/ui/src/components/SearchIndexVersion/SearchIndexVersion.tsx
index 177f57e7561..d70998a0e26 100644
--- a/openmetadata-ui/src/main/resources/ui/src/components/SearchIndexVersion/SearchIndexVersion.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/components/SearchIndexVersion/SearchIndexVersion.tsx
@@ -159,6 +159,7 @@ const SearchIndexVersion: React.FC<SearchIndexVersionProps> = ({
               flex="220px">
               <Space className="w-full" direction="vertical" size="large">
                 <DataProductsContainer
+                  newLook
                   activeDomain={domain}
                   dataProducts={dataProducts ?? []}
                   hasPermission={false}
diff --git a/openmetadata-ui/src/main/resources/ui/src/components/Topic/TopicVersion/TopicVersion.component.tsx b/openmetadata-ui/src/main/resources/ui/src/components/Topic/TopicVersion/TopicVersion.component.tsx
index 760ed31cada..d31b9bfb15d 100644
--- a/openmetadata-ui/src/main/resources/ui/src/components/Topic/TopicVersion/TopicVersion.component.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/components/Topic/TopicVersion/TopicVersion.component.tsx
@@ -152,6 +152,7 @@ const TopicVersion: FC<TopicVersionProp> = ({
               flex="220px">
               <Space className="w-full" direction="vertical" size="large">
                 <DataProductsContainer
+                  newLook
                   activeDomain={domain}
                   dataProducts={dataProducts ?? []}
                   hasPermission={false}
diff --git a/openmetadata-ui/src/main/resources/ui/src/pages/APICollectionPage/APICollectionVersionPage.tsx b/openmetadata-ui/src/main/resources/ui/src/pages/APICollectionPage/APICollectionVersionPage.tsx
index 74f5ef8b6e1..05043e3ba31 100644
--- a/openmetadata-ui/src/main/resources/ui/src/pages/APICollectionPage/APICollectionVersionPage.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/pages/APICollectionPage/APICollectionVersionPage.tsx
@@ -298,6 +298,7 @@ const APICollectionVersionPage = () => {
               flex="220px">
               <Space className="w-full" direction="vertical" size="large">
                 <DataProductsContainer
+                  newLook
                   activeDomain={domain}
                   dataProducts={currentVersionData?.dataProducts ?? []}
                   hasPermission={false}
diff --git a/openmetadata-ui/src/main/resources/ui/src/pages/DatabaseSchemaVersionPage/DatabaseSchemaVersionPage.tsx b/openmetadata-ui/src/main/resources/ui/src/pages/DatabaseSchemaVersionPage/DatabaseSchemaVersionPage.tsx
index 3ce309eda38..7ff03d2a1c0 100644
--- a/openmetadata-ui/src/main/resources/ui/src/pages/DatabaseSchemaVersionPage/DatabaseSchemaVersionPage.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/pages/DatabaseSchemaVersionPage/DatabaseSchemaVersionPage.tsx
@@ -268,6 +268,7 @@ function DatabaseSchemaVersionPage() {
               flex="220px">
               <Space className="w-full" direction="vertical" size="large">
                 <DataProductsContainer
+                  newLook
                   activeDomain={domain}
                   dataProducts={currentVersionData.dataProducts ?? []}
                   hasPermission={false}
diff --git a/openmetadata-ui/src/main/resources/ui/src/pages/DatabaseVersionPage/DatabaseVersionPage.tsx b/openmetadata-ui/src/main/resources/ui/src/pages/DatabaseVersionPage/DatabaseVersionPage.tsx
index bf4945520be..7a8cf0029cf 100644
--- a/openmetadata-ui/src/main/resources/ui/src/pages/DatabaseVersionPage/DatabaseVersionPage.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/pages/DatabaseVersionPage/DatabaseVersionPage.tsx
@@ -215,6 +215,7 @@ function DatabaseVersionPage() {
               flex="220px">
               <Space className="w-full" direction="vertical" size="large">
                 <DataProductsContainer
+                  newLook
                   activeDomain={domain}
                   dataProducts={currentVersionData.dataProducts ?? []}
                   hasPermission={false}
diff --git a/openmetadata-ui/src/main/resources/ui/src/utils/GenericWidget/GenericWidgetUtils.tsx b/openmetadata-ui/src/main/resources/ui/src/utils/GenericWidget/GenericWidgetUtils.tsx
index d33fe45340e..9b731744000 100644
--- a/openmetadata-ui/src/main/resources/ui/src/utils/GenericWidget/GenericWidgetUtils.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/utils/GenericWidget/GenericWidgetUtils.tsx
@@ -125,6 +125,7 @@ export const WIDGET_COMPONENTS = {
   ),
   [DetailPageWidgetKeys.DATA_PRODUCTS]: () => (
     <DataProductsContainer
+      newLook
       dataProducts={tableClassBase.getDummyData().dataProducts ?? []}
       hasPermission={false}
       showHeader={false}