diff --git a/src/components/Card.js b/src/components/Card.js
index 8437e2e47..2374c2cb1 100644
--- a/src/components/Card.js
+++ b/src/components/Card.js
@@ -1,11 +1,13 @@
 import React from 'react';
-import clsx from 'classnames';
 import styled from 'styled-components';
 
 export default function Card({ className, children }) {
-  return <CardRoot className={clsx('card', className)}>{children}</CardRoot>;
+  return <CardRoot className={className}>{children}</CardRoot>;
 }
 
 const CardRoot = styled.div`
   padding: 15px;
+  margin: 15px;
+  background: #fff;
+  border: 1px solid #d2dce2;
 `;
diff --git a/src/containers/Drawers/CustomerDetailsDrawer/CustomerDetailsHeader.js b/src/containers/Drawers/CustomerDetailsDrawer/CustomerDetailsHeader.js
index a9aeabcf3..fd5a1dc12 100644
--- a/src/containers/Drawers/CustomerDetailsDrawer/CustomerDetailsHeader.js
+++ b/src/containers/Drawers/CustomerDetailsDrawer/CustomerDetailsHeader.js
@@ -28,11 +28,6 @@ export default function CustomerDetailsHeader() {
           <h3 class="big-number">{customer.formatted_balance}</h3>
         </DetailItem>
 
-        <DetailItem
-          label={<T id={'customer.drawer.label.customer_name'} />}
-          name={'name'}
-          children={customer?.display_name}
-        />
         <DetailItem
           label={<T id={'customer.drawer.label.customer_type'} />}
           name={'type'}
@@ -44,6 +39,13 @@ export default function CustomerDetailsHeader() {
       </DetailsMenu>
 
       <DetailsMenu direction={'horizantal'} minLabelSize={'175px'}>
+        <DetailItem
+          label={<T id={'customer.drawer.label.customer_name'} />}
+          name={'name'}
+        >
+          <strong>{customer?.display_name}</strong>
+        </DetailItem>
+
         <DetailItem
           label={<T id={'customer.drawer.label.company_name'} />}
           children={defaultTo(customer?.company_name, '--')}
diff --git a/src/containers/Drawers/VendorDetailsDrawer/VendorDetailsHeader.js b/src/containers/Drawers/VendorDetailsDrawer/VendorDetailsHeader.js
index 3ff466e5d..f84bb05d0 100644
--- a/src/containers/Drawers/VendorDetailsDrawer/VendorDetailsHeader.js
+++ b/src/containers/Drawers/VendorDetailsDrawer/VendorDetailsHeader.js
@@ -28,17 +28,19 @@ export default function VendorDetailsHeader() {
           <h3 class="big-number">{vendor.formatted_balance}</h3>
         </DetailItem>
 
-        <DetailItem
-          label={<T id={'vendor.drawer.label.vendor'} />}
-          name={'name'}
-          children={vendor?.display_name}
-        />
         <DetailItem label={<T id={'vendor.drawer.label.unused_credits'} />}>
           0
         </DetailItem>
       </DetailsMenu>
 
       <DetailsMenu direction={'horizantal'} minLabelSize={'175px'}>
+        <DetailItem
+          label={<T id={'vendor.drawer.label.vendor'} />}
+          name={'name'}
+        >
+          <strong>{vendor?.display_name}</strong>
+        </DetailItem>
+
         <DetailItem
           label={<T id={'vendor.drawer.label.company_name'} />}
           children={defaultTo(vendor?.company_name, '--')}
diff --git a/src/style/App.scss b/src/style/App.scss
index a3be2d356..55b604c00 100644
--- a/src/style/App.scss
+++ b/src/style/App.scss
@@ -22,7 +22,6 @@
 @import 'components/resizer';
 @import 'components/CloudSpinner';
 @import 'components/Alert';
-@import 'components/Card';
 @import 'components/Toast';
 @import 'components/PageForm';
 @import 'components/Tooltip';
diff --git a/src/style/components/Card.scss b/src/style/components/Card.scss
deleted file mode 100644
index 5662ab350..000000000
--- a/src/style/components/Card.scss
+++ /dev/null
@@ -1,5 +0,0 @@
-
-.card{
-  background: #fff;
-  border: 1px solid #d2dce2;
-}
\ No newline at end of file