diff --git a/openmetadata-ui/src/main/resources/ui/src/components/MyData/Widgets/DataAssetsWidget/DataAssetCard/DataAssetCard.component.tsx b/openmetadata-ui/src/main/resources/ui/src/components/MyData/Widgets/DataAssetsWidget/DataAssetCard/DataAssetCard.component.tsx
index d9199038824..5490a6d7ad2 100644
--- a/openmetadata-ui/src/main/resources/ui/src/components/MyData/Widgets/DataAssetsWidget/DataAssetCard/DataAssetCard.component.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/components/MyData/Widgets/DataAssetsWidget/DataAssetCard/DataAssetCard.component.tsx
@@ -23,6 +23,7 @@ import {
 import serviceUtilClassBase from '../../../../../utils/ServiceUtilClassBase';
 import AppBadge from '../../../../common/Badge/Badge.component';
 import '../data-assets-widget.less';
+
 interface DataAssetCardProps {
   service: Bucket;
 }
@@ -47,19 +48,19 @@ const DataAssetCard = ({ service: { key, doc_count } }: DataAssetCardProps) => {
       to={redirectLink}>
       <Card className="service-card" data-testid="service-card" size="small">
         <div
-          className="p-t-xs d-flex justify-center items-center"
+          className="d-flex justify-center items-center"
           data-testid="service-icon">
           {getServiceLogo(capitalize(key) ?? '', 'h-8')}
         </div>
 
         <Typography.Text
-          className="m-t-xss text-base text-grey-body font-medium truncate w-full d-inline-block"
+          className="m-t-sm text-sm text-grey-body font-medium truncate w-full d-inline-block"
           data-testid={`service-name-${key}`}>
-          {capitalize(key)}
+          {serviceUtilClassBase.getServiceName(key)}
         </Typography.Text>
 
         <AppBadge
-          className="data-asset-badge m-t-xs m-b-xss"
+          className="data-asset-badge m-t-sm"
           label={toString(doc_count)}
         />
       </Card>
diff --git a/openmetadata-ui/src/main/resources/ui/src/components/MyData/Widgets/DataAssetsWidget/DataAssetCard/DataAssetCard.test.tsx b/openmetadata-ui/src/main/resources/ui/src/components/MyData/Widgets/DataAssetsWidget/DataAssetCard/DataAssetCard.test.tsx
index 100318372b9..0755b5e68a2 100644
--- a/openmetadata-ui/src/main/resources/ui/src/components/MyData/Widgets/DataAssetsWidget/DataAssetCard/DataAssetCard.test.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/components/MyData/Widgets/DataAssetsWidget/DataAssetCard/DataAssetCard.test.tsx
@@ -33,6 +33,7 @@ jest.mock('../../../../../utils/CommonUtils', () => ({
 
 jest.mock('../../../../../utils/ServiceUtilClassBase', () => ({
   getDataAssetsService: jest.fn().mockReturnValue('tables'),
+  getServiceName: jest.fn().mockReturnValue('Mysql'),
 }));
 
 jest.mock('../../../../common/Badge/Badge.component', () => {
diff --git a/openmetadata-ui/src/main/resources/ui/src/components/MyData/Widgets/DataAssetsWidget/DataAssetsWidget.component.tsx b/openmetadata-ui/src/main/resources/ui/src/components/MyData/Widgets/DataAssetsWidget/DataAssetsWidget.component.tsx
index 37192e2e090..0fdb307b662 100644
--- a/openmetadata-ui/src/main/resources/ui/src/components/MyData/Widgets/DataAssetsWidget/DataAssetsWidget.component.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/components/MyData/Widgets/DataAssetsWidget/DataAssetsWidget.component.tsx
@@ -71,7 +71,7 @@ const DataAssetsWidget = ({
       className="data-assets-explore-widget-container card-widget h-full"
       data-testid="data-assets-widget"
       loading={loading}>
-      <Row gutter={[0, 15]}>
+      <Row gutter={[0, 16]}>
         <Col span={24}>
           <Row justify="space-between">
             <Col>
@@ -119,7 +119,7 @@ const DataAssetsWidget = ({
               </Typography.Paragraph>
             </ErrorPlaceHolder>
           ) : (
-            <Row gutter={[10, 15]}>
+            <Row gutter={[0, 8]}>
               {services.map((service) => (
                 <Col key={service.key} lg={6} xl={4}>
                   <DataAssetCard service={service} />
diff --git a/openmetadata-ui/src/main/resources/ui/src/components/MyData/Widgets/DataAssetsWidget/data-assets-widget.less b/openmetadata-ui/src/main/resources/ui/src/components/MyData/Widgets/DataAssetsWidget/data-assets-widget.less
index 215106d9939..47524381195 100644
--- a/openmetadata-ui/src/main/resources/ui/src/components/MyData/Widgets/DataAssetsWidget/data-assets-widget.less
+++ b/openmetadata-ui/src/main/resources/ui/src/components/MyData/Widgets/DataAssetsWidget/data-assets-widget.less
@@ -24,7 +24,7 @@
       transition: 0.3s ease-in-out;
 
       &:hover {
-        background: @grey-2;
+        background: @grey-1;
       }
 
       .ant-card-body {
@@ -32,11 +32,12 @@
         flex-direction: column;
         text-align: center;
         align-items: center;
+        padding: 20px 0;
 
         .data-asset-badge {
           width: max-content;
           padding: 6px 14px;
-          background-color: @blue-5;
+          background-color: @blue-1;
           .ant-typography {
             color: @primary-color;
             font-size: 12px;
diff --git a/openmetadata-ui/src/main/resources/ui/src/utils/ServiceUtilClassBase.ts b/openmetadata-ui/src/main/resources/ui/src/utils/ServiceUtilClassBase.ts
index 7951e6a3e80..f77d99ec7df 100644
--- a/openmetadata-ui/src/main/resources/ui/src/utils/ServiceUtilClassBase.ts
+++ b/openmetadata-ui/src/main/resources/ui/src/utils/ServiceUtilClassBase.ts
@@ -11,7 +11,7 @@
  *  limitations under the License.
  */
 
-import { cloneDeep, toLower } from 'lodash';
+import { capitalize, cloneDeep, toLower } from 'lodash';
 import {
   AIRBYTE,
   AIRFLOW,
@@ -510,6 +510,82 @@ class ServiceUtilClassBase {
     }
   }
 
+  public getServiceName = (serviceType: string) => {
+    switch (serviceType) {
+      case this.DatabaseServiceTypeSmallCase.CustomDatabase:
+        return 'Custom Database';
+      case this.DatabaseServiceTypeSmallCase.AzureSQL:
+        return 'AzureSQL';
+      case this.DatabaseServiceTypeSmallCase.BigQuery:
+        return 'BigQuery';
+      case this.DatabaseServiceTypeSmallCase.BigTable:
+        return 'BigTable';
+      case this.DatabaseServiceTypeSmallCase.DeltaLake:
+        return 'DeltaLake';
+      case this.DatabaseServiceTypeSmallCase.DomoDatabase:
+        return 'DomoDatabase';
+      case this.DatabaseServiceTypeSmallCase.DynamoDB:
+        return 'DynamoDB';
+      case this.DatabaseServiceTypeSmallCase.MariaDB:
+        return 'MariaDB';
+      case this.DatabaseServiceTypeSmallCase.MongoDB:
+        return 'MongoDB';
+      case this.DatabaseServiceTypeSmallCase.PinotDB:
+        return 'pinotdb';
+      case this.DatabaseServiceTypeSmallCase.SapHana:
+        return 'SapHana';
+      case this.DatabaseServiceTypeSmallCase.SAS:
+        return 'SAS';
+      case this.DatabaseServiceTypeSmallCase.SingleStore:
+        return 'SingleStore';
+      case this.DatabaseServiceTypeSmallCase.SQLite:
+        return 'SQlite';
+      case this.DatabaseServiceTypeSmallCase.UnityCatalog:
+        return 'UnityCatalog';
+      case this.MessagingServiceTypeSmallCase.CustomMessaging:
+        return 'Custom Messaging';
+      case this.DashboardServiceTypeSmallCase.DomoDashboard:
+        return 'DomoDashboard';
+      case this.DashboardServiceTypeSmallCase.PowerBI:
+        return 'PowerBI';
+      case this.DashboardServiceTypeSmallCase.QlikCloud:
+        return 'QlikCloud';
+      case this.DashboardServiceTypeSmallCase.QlikSense:
+        return 'QlikSense';
+      case this.DashboardServiceTypeSmallCase.QuickSight:
+        return 'QuickSight';
+      case this.DashboardServiceTypeSmallCase.CustomDashboard:
+        return 'Custom Dashboard';
+      case this.PipelineServiceTypeSmallCase.DatabricksPipeline:
+        return 'DatabricksPipeline';
+      case this.PipelineServiceTypeSmallCase.DBTCloud:
+        return 'DBTCloud';
+      case this.PipelineServiceTypeSmallCase.DomoPipeline:
+        return 'DomoPipeline';
+      case this.PipelineServiceTypeSmallCase.GluePipeline:
+        return 'Glue Pipeline';
+      case this.PipelineServiceTypeSmallCase.KafkaConnect:
+        return 'KafkaConnect';
+      case this.PipelineServiceTypeSmallCase.OpenLineage:
+        return 'OpenLineage';
+      case this.PipelineServiceTypeSmallCase.CustomPipeline:
+        return 'Custom Pipeline';
+      case this.MlModelServiceTypeSmallCase.SageMaker:
+        return 'SageMaker';
+      case this.MlModelServiceTypeSmallCase.CustomMlModel:
+        return 'Custom Ml Model';
+      case this.StorageServiceTypeSmallCase.CustomStorage:
+        return 'Custom Storage';
+      case this.SearchServiceTypeSmallCase.ElasticSearch:
+        return 'ElasticSearch';
+      case this.SearchServiceTypeSmallCase.CustomSearch:
+        return 'Custom Search';
+
+      default:
+        return capitalize(serviceType);
+    }
+  };
+
   public getStorageServiceConfig(type: StorageServiceType) {
     let schema = {};
     const uiSchema = { ...COMMON_UI_SCHEMA };