diff --git a/frontend/app/components/Client/Client.js b/frontend/app/components/Client/Client.js
index 2574f0758..97d8e5aab 100644
--- a/frontend/app/components/Client/Client.js
+++ b/frontend/app/components/Client/Client.js
@@ -52,7 +52,7 @@ export default class Client extends React.PureComponent {
           <div className={ styles.tabMenu }>
             <PreferencesMenu activeTab={activeTab} />
           </div>
-          <div className="bg-white w-full rounded-lg mx-4 my-6 p-5 border">
+          <div className="bg-white w-full rounded-lg mx-4 my-6 border">
             { activeTab && this.renderActiveTab() }
           </div>
         </div>
diff --git a/frontend/app/components/Client/CustomFields/CustomFields.js b/frontend/app/components/Client/CustomFields/CustomFields.js
index 89962de64..6bda20b02 100644
--- a/frontend/app/components/Client/CustomFields/CustomFields.js
+++ b/frontend/app/components/Client/CustomFields/CustomFields.js
@@ -66,14 +66,14 @@ function CustomFields(props) {
     const { fields, loading } = props;
     return (
         <div>
-            <div className={styles.tabHeader}>
+            <div className={cn(styles.tabHeader, 'px-5 pt-5')}>
                 <h3 className={cn(styles.tabTitle, 'text-2xl')}>{'Metadata'}</h3>
                 <div style={{ marginRight: '15px' }}>
                     <SiteDropdown value={currentSite && currentSite.id} onChange={onChangeSelect} />
                 </div>
                 <Button variant="primary" onClick={() => init()}>Add</Button>
             </div>
-            <div className="text-base text-disabled-text flex items-center mt-3">
+            <div className="text-base text-disabled-text flex px-5 items-center mt-3">
                 <Icon name="info-circle-fill" className="mr-2" size={16} />
                 See additonal user information in sessions.
                 <a href="https://docs.openreplay.com/installation/metadata" className="link ml-1" target="_blank">Learn more</a>
diff --git a/frontend/app/components/Client/CustomFields/ListItem.js b/frontend/app/components/Client/CustomFields/ListItem.js
index 19c49e925..c62903f6d 100644
--- a/frontend/app/components/Client/CustomFields/ListItem.js
+++ b/frontend/app/components/Client/CustomFields/ListItem.js
@@ -7,7 +7,7 @@ const ListItem = ({ field, onEdit, disabled }) => {
     return (
         <div
             className={cn(
-                'border-b group last:border-none hover:bg-active-blue flex items-center justify-between p-3 cursor-pointer',
+                'border-t group hover:bg-active-blue flex items-center justify-between py-3 px-5 cursor-pointer',
                 field.index === 0 ? styles.preDefined : '',
                 {
                     [styles.disabled]: disabled,
diff --git a/frontend/app/components/Client/Integrations/Integrations.tsx b/frontend/app/components/Client/Integrations/Integrations.tsx
index 9890fee6f..c418a0529 100644
--- a/frontend/app/components/Client/Integrations/Integrations.tsx
+++ b/frontend/app/components/Client/Integrations/Integrations.tsx
@@ -73,7 +73,7 @@ function Integrations(props: Props) {
     };
 
     return (
-        <div className="mb-4">
+        <div className="mb-4 p-5">
             {!hideHeader && <PageTitle title={<div>Integrations</div>} />}
             {integrations.map((cat: any) => (
                 <div className="mb-2 border-b last:border-none py-3">
diff --git a/frontend/app/components/Client/Notifications/Notifications.js b/frontend/app/components/Client/Notifications/Notifications.js
index d01b12456..88855dd45 100644
--- a/frontend/app/components/Client/Notifications/Notifications.js
+++ b/frontend/app/components/Client/Notifications/Notifications.js
@@ -21,7 +21,7 @@ function Notifications(props) {
     };
 
     return (
-        <div className={stl.wrapper}>
+        <div className="p-5">
             <div className={stl.tabHeader}>{<h3 className={cn(stl.tabTitle, 'text-2xl')}>{'Notifications'}</h3>}</div>
             <div className="">
                 <div className="text-lg font-medium">Weekly project summary</div>
diff --git a/frontend/app/components/Client/ProfileSettings/ProfileSettings.js b/frontend/app/components/Client/ProfileSettings/ProfileSettings.js
index 7e4ec5fb2..e8b508072 100644
--- a/frontend/app/components/Client/ProfileSettings/ProfileSettings.js
+++ b/frontend/app/components/Client/ProfileSettings/ProfileSettings.js
@@ -19,7 +19,7 @@ export default class ProfileSettings extends React.PureComponent {
     render() {
         const { account, isEnterprise } = this.props;
         return (
-            <React.Fragment>
+            <div className="p-5">
                 <PageTitle title={<div>Account</div>} />
                 <div className="flex items-center">
                     <div className={styles.left}>
@@ -106,7 +106,7 @@ export default class ProfileSettings extends React.PureComponent {
                         </div>
                     </>
                 )}
-            </React.Fragment>
+            </div>
         );
     }
 }
diff --git a/frontend/app/components/Client/Sites/Sites.js b/frontend/app/components/Client/Sites/Sites.js
index 86bbddd66..7c6d2c1a6 100644
--- a/frontend/app/components/Client/Sites/Sites.js
+++ b/frontend/app/components/Client/Sites/Sites.js
@@ -14,6 +14,7 @@ import ProjectKey from './ProjectKey';
 import { useModal } from 'App/components/Modal';
 import { getInitials } from 'App/utils';
 import AnimatedSVG, { ICONS } from 'Shared/AnimatedSVG/AnimatedSVG';
+import cn from 'classnames'
 
 const STATUS_MESSAGE_MAP = {
     [RED]: ' There seems to be an issue (please verify your installation)',
@@ -67,7 +68,7 @@ class Sites extends React.PureComponent {
         return (
             <Loader loading={loading}>
                 <div className={stl.wrapper}>
-                    <div className={stl.tabHeader}>
+                    <div className={cn(stl.tabHeader, 'px-5 pt-5')}>
                         <PageTitle title={<div className="mr-4">Projects</div>} actionButton={<AddProjectButton isAdmin={isAdmin} />} />
 
                         <div className="flex ml-auto items-center">
@@ -87,7 +88,7 @@ class Sites extends React.PureComponent {
                         size="small"
                         show={!loading && filteredSites.size === 0}
                     >
-                        <div className="grid grid-cols-12 gap-2 w-full items-center border-b px-2 py-3 font-medium">
+                        <div className="grid grid-cols-12 gap-2 w-full items-center px-5 py-3 font-medium">
                             <div className="col-span-4">Project Name</div>
                             <div className="col-span-4">Key</div>
                             <div className="col-span-4"></div>
@@ -95,7 +96,7 @@ class Sites extends React.PureComponent {
                         {filteredSites.map((_site) => (
                             <div
                                 key={_site.key}
-                                className="grid grid-cols-12 gap-2 w-full group hover:bg-active-blue items-center border-b px-2 py-3 last:border-none"
+                                className="grid grid-cols-12 gap-2 w-full group hover:bg-active-blue items-center border-t px-5 py-3"
                             >
                                 <div className="col-span-4">
                                     <div className="flex items-center">
diff --git a/frontend/app/components/Client/Users/UsersView.tsx b/frontend/app/components/Client/Users/UsersView.tsx
index 7948837ed..6d8d94527 100644
--- a/frontend/app/components/Client/Users/UsersView.tsx
+++ b/frontend/app/components/Client/Users/UsersView.tsx
@@ -37,7 +37,7 @@ function UsersView(props: Props) {
 
     return (
         <div>
-            <div className="flex items-center justify-between">
+            <div className="flex items-center justify-between px-5 pt-5">
                 <PageTitle
                     title={
                         <div>
diff --git a/frontend/app/components/Client/Users/components/UserList/UserList.tsx b/frontend/app/components/Client/Users/components/UserList/UserList.tsx
index 54acae74a..f18e3586c 100644
--- a/frontend/app/components/Client/Users/components/UserList/UserList.tsx
+++ b/frontend/app/components/Client/Users/components/UserList/UserList.tsx
@@ -54,7 +54,7 @@ function UserList(props: Props) {
                 show={!loading && length === 0}
             >
                 <div className="mt-3 rounded bg-white">
-                    <div className="grid grid-cols-12 p-3 border-b font-medium">
+                    <div className="grid grid-cols-12 py-3 px-5 font-medium">
                         <div className="col-span-5">Name</div>
                         <div className="col-span-3">Role</div>
                         {!isOnboarding && <div className="col-span-2">Created On</div>}
diff --git a/frontend/app/components/Client/Users/components/UserListItem/UserListItem.tsx b/frontend/app/components/Client/Users/components/UserListItem/UserListItem.tsx
index f8aecf7f6..1611b6cf2 100644
--- a/frontend/app/components/Client/Users/components/UserListItem/UserListItem.tsx
+++ b/frontend/app/components/Client/Users/components/UserListItem/UserListItem.tsx
@@ -24,7 +24,7 @@ interface Props {
 function UserListItem(props: Props) {
     const { user, editHandler = () => {}, generateInvite = () => {}, copyInviteCode = () => {}, isEnterprise = false, isOnboarding = false } = props;
     return (
-        <div className="grid grid-cols-12 p-3 py-4 border-b items-center select-none hover:bg-active-blue group cursor-pointer" onClick={editHandler}>
+        <div className="grid grid-cols-12 py-4 px-5 border-t items-center select-none hover:bg-active-blue group cursor-pointer" onClick={editHandler}>
             <div className="col-span-5">
                 <span className="mr-2">{user.name}</span>
                 {isEnterprise && <AdminPrivilegeLabel user={user} />}
diff --git a/frontend/app/components/Client/Webhooks/ListItem.js b/frontend/app/components/Client/Webhooks/ListItem.js
index ab640b8e8..568c0fb88 100644
--- a/frontend/app/components/Client/Webhooks/ListItem.js
+++ b/frontend/app/components/Client/Webhooks/ListItem.js
@@ -5,7 +5,7 @@ import { Button } from 'UI';
 
 const ListItem = ({ webhook, onEdit, onDelete }) => {
     return (
-        <div className="border-b group last:border-none hover:bg-active-blue flex items-center justify-between p-3 cursor-pointer" onClick={onEdit}>
+        <div className="border-t group hover:bg-active-blue flex items-center justify-between py-3 px-5 cursor-pointer" onClick={onEdit}>
             <div>
                 <span>{webhook.name}</span>
                 <div className={styles.endpoint}>{webhook.endpoint}</div>
diff --git a/frontend/app/components/Client/Webhooks/Webhooks.js b/frontend/app/components/Client/Webhooks/Webhooks.js
index 42f73d799..7f57c61de 100644
--- a/frontend/app/components/Client/Webhooks/Webhooks.js
+++ b/frontend/app/components/Client/Webhooks/Webhooks.js
@@ -43,13 +43,13 @@ function Webhooks(props) {
 
   return (
     <div>
-      <div className={styles.tabHeader}>
+      <div className={cn(styles.tabHeader, 'px-5 pt-5')}>
         <h3 className={cn(styles.tabTitle, 'text-2xl')}>{'Webhooks'}</h3>
         {/* <Button rounded={true} icon="plus" variant="outline" onClick={() => init()} /> */}
         <Button variant="primary" onClick={() => init()}>Add</Button>
       </div>
 
-      <div className="text-base text-disabled-text flex items-center mt-3">
+      <div className="text-base text-disabled-text flex items-center mt-3 px-5">
           <Icon name="info-circle-fill" className="mr-2" size={16} />
           Leverage webhooks to push OpenReplay data to other systems.
       </div>