diff --git a/package-lock.json b/package-lock.json
index bdf01257c5..52f1dfdddb 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -129,6 +129,26 @@
       "integrity": "sha512-9BCxFwvbGg/RsZK9tjXd8s4UcwR0MWeFQ1XEKIQVVvAGJyINdrqKMcTRyLoK8Rse1GjzLV9cwjWV1olXRWEXVA==",
       "dev": true
     },
+    "@sourcefabric/common": {
+      "version": "0.0.43",
+      "resolved": "https://registry.npmjs.org/@sourcefabric/common/-/common-0.0.43.tgz",
+      "integrity": "sha512-45UWnNsc026jztBDI7u6HHmLqbJaZsIXV7Uui74W4ZydcuDFUJZSIREoQdrbkY1JU1zkNe5LoweukslYx7VI0A==",
+      "requires": {
+        "date-fns": "2.7.0",
+        "lodash": "4.17.19",
+        "primereact": "^6.0.2",
+        "react": "16.9.0",
+        "react-dom": "16.9.0",
+        "react-sortable-hoc": "^1.11.0"
+      },
+      "dependencies": {
+        "date-fns": {
+          "version": "2.7.0",
+          "resolved": "https://registry.npmjs.org/date-fns/-/date-fns-2.7.0.tgz",
+          "integrity": "sha512-wxYp2PGoUDN5ZEACc61aOtYFvSsJUylIvCjpjDOqM1UDaKIIuMJ9fAnMYFHV3TQaDpfTVxhwNK/GiCaHKuemTA=="
+        }
+      }
+    },
     "@superdesk/build-tools": {
       "version": "file:build-tools",
       "dev": true,
diff --git a/package.json b/package.json
index 1fb8de65e5..621ab47336 100644
--- a/package.json
+++ b/package.json
@@ -31,6 +31,7 @@
   "dependencies": {
     "@metadata/exif": "github:superdesk/exif#431066d",
     "@popperjs/core": "2.10.2",
+    "@sourcefabric/common": "0.0.43",
     "@superdesk/common": "0.0.17",
     "@types/angular": "1.6.50",
     "@types/draft-js": "0.11.5",
diff --git a/scripts/apps/contacts/components/ContactFooter.tsx b/scripts/apps/contacts/components/ContactFooter.tsx
index 5d7564fc4e..1c21022186 100644
--- a/scripts/apps/contacts/components/ContactFooter.tsx
+++ b/scripts/apps/contacts/components/ContactFooter.tsx
@@ -13,7 +13,7 @@ interface IProps {
  */
 export const ContactFooter: React.FunctionComponent<IProps> = ({item}) => {
     return (
-        <Spacer style={{padding: 8}} h gap="4" justifyContent="start" alignItems="center" noGrow>
+        <Spacer style={{padding: 8}} h gap="16" justifyContent="start" alignItems="center" noGrow>
             <Spacer h gap="4" justifyContent="start" alignItems="center" noWrap>
                 <span className="sd-grid-item__text-label">{gettext('Updated:')}</span>
                 <DateTime dateTime={item._updated} />
diff --git a/scripts/apps/contacts/components/ContactInfo.tsx b/scripts/apps/contacts/components/ContactInfo.tsx
index a22e5b28f8..bccca6f68f 100644
--- a/scripts/apps/contacts/components/ContactInfo.tsx
+++ b/scripts/apps/contacts/components/ContactInfo.tsx
@@ -1,10 +1,12 @@
+/* eslint-disable react/no-multi-comp */
 import React from 'react';
 import {ItemContainer} from 'apps/contacts/components';
 import {ContactName, Notes, JobTitle} from 'apps/contacts/components/fields';
 import {isEmpty, findKey} from 'lodash';
 import {gettext} from 'core/utils';
 import {IContact} from 'superdesk-api';
-import {ContentDivider, Icon, Spacer} from 'superdesk-ui-framework/react';
+import {ContentDivider, Icon, Spacer, SpacerBlock} from 'superdesk-ui-framework/react';
+import {WithDivider} from '@sourcefabric/common';
 
 interface IProps {
     item: IContact;
@@ -12,6 +14,12 @@ interface IProps {
     hideHeader?: boolean;
 }
 
+const ContactDetail: React.FunctionComponent = ({children}: {children: Array<JSX.Element>}) => (
+    <Spacer h gap="8" justifyContent="start" alignItems="center" noWrap>
+        {children}
+    </Spacer>
+);
+
 /**
  * Media Contact Info - renders contact's information
  */
@@ -20,114 +28,92 @@ export const ContactInfo: React.FunctionComponent<IProps> = ({
     showIfContactIsInactive,
     hideHeader,
 }) => {
-    const meta = [];
-    const info = [];
-
     const contactJobTitle = item.job_title ? <JobTitle item={item} /> : null;
     const contactOrg = item.first_name && item.organisation ?
         <span>{item.organisation}</span> : null;
 
-    if (hideHeader != true) {
-        info.push(
-            <Spacer style={{margin: '8px 0'}} h gap="8" justifyContent="start" alignItems="center" noWrap>
-                <div
-                    style={{
-                        backgroundColor: 'var(--sd-colour-success)',
-                        borderRadius: '50%',
-                        width: 36,
-                        height: 36,
-                        display: 'flex',
-                        justifyContent: 'center',
-                        alignItems: 'center',
-                    }}
-                >
-                    <Icon size="small" color="white" name={`${item.first_name ? 'user' : 'business'}`} />
-                </div>
-                <h3 key="contact-name">
-                    <ContactName item={item} />
-                    {contactJobTitle && <span title={item.job_title}>{contactJobTitle}</span>}
-                </h3>
-                <div key="contact-org">
-                    <span className="item-info">{contactOrg}</span>
-                    {!item.is_active && showIfContactIsInactive && (
-                        <span
-                            title="inactive"
-                            className="label label--draft label--hollow pull-right"
+    return (
+        <div className="sd-grid-item__content" x-ms-format-detection="none">
+            {
+                hideHeader !== true && (
+                    <Spacer style={{margin: '8px 0'}} h gap="8" justifyContent="start" alignItems="center" noWrap>
+                        <div
+                            style={{
+                                backgroundColor: 'var(--sd-colour-success)',
+                                borderRadius: '50%',
+                                width: 36,
+                                height: 36,
+                                display: 'flex',
+                                justifyContent: 'center',
+                                alignItems: 'center',
+                            }}
                         >
-                            {gettext('Inactive')}
-                        </span>
-                    )}
-                </div>
-            </Spacer>,
-        );
-    }
+                            <Icon size="small" color="white" name={`${item.first_name ? 'user' : 'business'}`} />
+                        </div>
+                        <h3 key="contact-name">
+                            <ContactName item={item} />
+                            {contactJobTitle && <span title={item.job_title}>{contactJobTitle}</span>}
+                        </h3>
+                        <div key="contact-org">
+                            <span className="item-info">{contactOrg}</span>
+                            {!item.is_active && showIfContactIsInactive && (
+                                <span
+                                    title="inactive"
+                                    className="label label--draft label--hollow pull-right"
+                                >
+                                    {gettext('Inactive')}
+                                </span>
+                            )}
+                        </div>
+                    </Spacer>
+                )
+            }
 
-    meta.push(
-        <Spacer v gap="4" justifyContent="center" alignItems="center" noWrap>
-            <ContentDivider margin="x-small" orientation="horizontal" type="dotted" />
-            <Spacer h gap="8" justifyContent="start" alignItems="center" noWrap>
-                <Icon name="envelope" size="small" />
-                {!isEmpty(item.contact_email) && (<ItemContainer item={item} field="contact_email" />)}
-            </Spacer>
-            <ContentDivider margin="x-small" orientation="horizontal" type="dotted" />
-        </Spacer>,
-    );
+            <WithDivider
+                leading
+                trailing
+                divider={(
+                    <>
+                        <SpacerBlock v gap="4" />
+                        <ContentDivider margin="x-small" orientation="horizontal" type="dotted" />
+                        <SpacerBlock v gap="4" />
+                    </>
+                )}
+            >
+                <ContactDetail>
+                    <Icon name="envelope" size="small" />
+                    {!isEmpty(item.contact_email) && (<ItemContainer item={item} field="contact_email" />)}
+                </ContactDetail>
 
-    meta.push(
-        <Spacer v gap="4" justifyContent="center" alignItems="center" noWrap>
-            <Spacer h gap="8" justifyContent="start" alignItems="center" noWrap>
-                <Icon name="globe" size="small" />
-                {!isEmpty(item.contact_phone) && findKey(item.contact_phone, 'number') &&
-                    (<ItemContainer item={item} field="contact_phone" />)
-                }
-            </Spacer>
-            <ContentDivider margin="x-small" orientation="horizontal" type="dotted" />
-        </Spacer>,
-    );
+                <ContactDetail>
+                    <Icon name="globe" size="small" />
+                    {!isEmpty(item.contact_phone) && findKey(item.contact_phone, 'number') &&
+                        (<ItemContainer item={item} field="contact_phone" />)
+                    }
+                </ContactDetail>
 
-    meta.push(
-        <Spacer v gap="4" justifyContent="center" alignItems="center" noWrap>
-            <Spacer h gap="8" justifyContent="start" alignItems="center" noWrap>
-                <Icon name="phone" size="small" />
-                {item.website && (<ItemContainer item={item} field="website" />)}
-            </Spacer>
-            <ContentDivider margin="x-small" orientation="horizontal" type="dotted" />
-        </Spacer>,
-    );
+                <ContactDetail>
+                    <Icon name="phone" size="small" />
+                    {item.website && (<ItemContainer item={item} field="website" />)}
+                </ContactDetail>
 
-    meta.push(
-        <Spacer v gap="4" justifyContent="center" alignItems="center" noWrap>
-            <Spacer h gap="8" justifyContent="start" alignItems="center" noWrap>
-                <Icon name="mobile" size="small" />
-                {!isEmpty(item.mobile) && findKey(item.mobile, 'number') &&
-                    (<ItemContainer item={item} field="mobile" />)
-                }
-            </Spacer>
-            <ContentDivider margin="x-small" orientation="horizontal" type="dotted" />
-        </Spacer>,
-    );
+                <ContactDetail>
+                    <Icon name="mobile" size="small" />
+                    {!isEmpty(item.mobile) && findKey(item.mobile, 'number') &&
+                        (<ItemContainer item={item} field="mobile" />)
+                    }
+                </ContactDetail>
 
-    meta.push(
-        <Spacer v gap="4" justifyContent="center" alignItems="center" noWrap>
-            <Spacer h gap="8" justifyContent="start" alignItems="center" noWrap>
-                <Icon name="map-marker" size="small" />
-                {item && (<ItemContainer item={item} field="location" />)}
-            </Spacer>
-            <ContentDivider margin="x-small" orientation="horizontal" type="dotted" />
-        </Spacer>,
-    );
+                <ContactDetail>
+                    <Icon name="map-marker" size="small" />
+                    {item && (<ItemContainer item={item} field="location" />)}
+                </ContactDetail>
 
-    info.push(
-        <Spacer v gap="4" justifyContent="space-between" alignItems="center">
-            {meta}
-            <Spacer h gap="8" justifyContent="start" alignItems="center" noWrap>
-                <Icon name="info-sign" size="small" />
-                {item.notes && (<Notes item={item} />)}
-            </Spacer>
-        </Spacer>,
-    );
-
-    return (
-        <div className="sd-grid-item__content" x-ms-format-detection="none">{info}</div>
+                <ContactDetail>
+                    <Icon name="info-sign" size="small" />
+                    {item.notes && (<Notes item={item} />)}
+                </ContactDetail>
+            </WithDivider>
+        </div>
     );
 };
diff --git a/scripts/apps/contacts/components/fields/SocialInfo.tsx b/scripts/apps/contacts/components/fields/SocialInfo.tsx
index 6178c19aed..22a4c73796 100644
--- a/scripts/apps/contacts/components/fields/SocialInfo.tsx
+++ b/scripts/apps/contacts/components/fields/SocialInfo.tsx
@@ -1,6 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import {ItemContainer} from 'apps/contacts/components';
+import {Spacer} from 'superdesk-ui-framework/react';
 
 /**
  * SocialInfo - to display facebook, twitter etc. information of a contact
@@ -10,7 +11,9 @@ export const SocialInfo: React.StatelessComponent<any> = ({item}) => {
 
     return (
         <div key="contact-social" className="social-info">
-            {keys.map((k) => (item[k] && <ItemContainer key={k} item={item} field={k} />))}
+            <Spacer h gap="8">
+                {keys.map((k) => (item[k] && <ItemContainer key={k} item={item} field={k} />))}
+            </Spacer>
         </div>
     );
 };