diff --git a/frontend/app/components/Assist/components/SessionList/SessionList.tsx b/frontend/app/components/Assist/components/SessionList/SessionList.tsx
index 4f297d2c5..4835cfafd 100644
--- a/frontend/app/components/Assist/components/SessionList/SessionList.tsx
+++ b/frontend/app/components/Assist/components/SessionList/SessionList.tsx
@@ -39,8 +39,8 @@ function SessionList(props: Props) {
                     title={
                         <div className="flex items-center justify-center flex-col">
                             <AnimatedSVG name={ICONS.NO_LIVE_SESSIONS} size={170} />
-                            <div className="mt-2" />
-                            <div className="text-center text-gray-600">No live sessions found.</div>
+                            <div className="mt-4" />
+                            <div className="text-center">No live sessions found.</div>
                         </div>
                     }
                 >
diff --git a/frontend/app/components/Client/Audit/AuditList/AuditList.tsx b/frontend/app/components/Client/Audit/AuditList/AuditList.tsx
index 5993aa7bb..6563ef164 100644
--- a/frontend/app/components/Client/Audit/AuditList/AuditList.tsx
+++ b/frontend/app/components/Client/Audit/AuditList/AuditList.tsx
@@ -38,7 +38,7 @@ function AuditList(props: Props) {
                 title={
                     <div className="flex flex-col items-center justify-center">
                     <AnimatedSVG name={ICONS.NO_AUDIT_TRAIL} size={80} />
-                    <div className="text-center text-gray-600 my-4">No data available</div>
+                    <div className="text-center my-4">No data available</div>
                     </div>
                 }
                 size="small"
diff --git a/frontend/app/components/Client/CustomFields/CustomFields.js b/frontend/app/components/Client/CustomFields/CustomFields.js
index ecc724606..fc3aa1c4c 100644
--- a/frontend/app/components/Client/CustomFields/CustomFields.js
+++ b/frontend/app/components/Client/CustomFields/CustomFields.js
@@ -92,7 +92,7 @@ function CustomFields(props) {
                         <div className="flex flex-col items-center justify-center">
                             <AnimatedSVG name={ICONS.NO_METADATA} size={170} />
                             {/* <div className="mt-4" /> */}
-                            <div className="text-center text-gray-600 my-4">None added yet</div>
+                            <div className="text-center my-4">None added yet</div>
                         </div>
                     }
                     size="small"
diff --git a/frontend/app/components/Client/Sites/Sites.js b/frontend/app/components/Client/Sites/Sites.js
index 82dd37d00..feea944ce 100644
--- a/frontend/app/components/Client/Sites/Sites.js
+++ b/frontend/app/components/Client/Sites/Sites.js
@@ -78,7 +78,7 @@ class Sites extends React.PureComponent {
                         title={
                             <div className="flex flex-col items-center justify-center">
                             <AnimatedSVG name={ICONS.NO_PROJECTS} size={170} />
-                            <div className="text-center text-gray-600 my-4">No matching results.</div>
+                            <div className="text-center my-4">No matching results.</div>
                             </div>
                         }
                         size="small"
diff --git a/frontend/app/components/Client/Users/components/UserList/UserList.tsx b/frontend/app/components/Client/Users/components/UserList/UserList.tsx
index 8756de048..c4af9e835 100644
--- a/frontend/app/components/Client/Users/components/UserList/UserList.tsx
+++ b/frontend/app/components/Client/Users/components/UserList/UserList.tsx
@@ -46,7 +46,7 @@ function UserList(props: Props) {
                 title={
                     <div className="flex flex-col items-center justify-center">
                     <AnimatedSVG name={ICONS.NO_AUDIT_TRAIL} size={80} />
-                    <div className="text-center text-gray-600 my-4">No matching results.</div>
+                    <div className="text-center my-4">No matching results.</div>
                     </div>
                 }
                 size="small"
diff --git a/frontend/app/components/Client/Webhooks/Webhooks.tsx b/frontend/app/components/Client/Webhooks/Webhooks.tsx
index 1db4a5711..57b4496ff 100644
--- a/frontend/app/components/Client/Webhooks/Webhooks.tsx
+++ b/frontend/app/components/Client/Webhooks/Webhooks.tsx
@@ -60,7 +60,7 @@ function Webhooks() {
                     title={
                         <div className="flex flex-col items-center justify-center">
                             <AnimatedSVG name={ICONS.NO_WEBHOOKS} size={170} />
-                            <div className="text-center text-gray-600 my-4">None added yet</div>
+                            <div className="text-center my-4">None added yet</div>
                         </div>
                     }
                     size="small"
diff --git a/frontend/app/components/Dashboard/Widgets/CustomMetricsWidgets/CustomMetricTableSessions/CustomMetricTableSessions.tsx b/frontend/app/components/Dashboard/Widgets/CustomMetricsWidgets/CustomMetricTableSessions/CustomMetricTableSessions.tsx
index 0f0f3aafa..1e8ef2d69 100644
--- a/frontend/app/components/Dashboard/Widgets/CustomMetricsWidgets/CustomMetricTableSessions/CustomMetricTableSessions.tsx
+++ b/frontend/app/components/Dashboard/Widgets/CustomMetricsWidgets/CustomMetricTableSessions/CustomMetricTableSessions.tsx
@@ -27,8 +27,8 @@ function CustomMetricTableSessions(props: Props) {
       title={
         <div className="flex items-center justify-center flex-col">
           <AnimatedSVG name={ICONS.NO_SESSIONS} size={170} />
-          <div className="mt-2" />
-          <div className="text-center text-gray-600">
+          <div className="mt-4" />
+          <div className="text-center">
             No relevant sessions found for the selected time period.
           </div>
         </div>
diff --git a/frontend/app/components/Dashboard/components/Alerts/AlertsList.tsx b/frontend/app/components/Dashboard/components/Alerts/AlertsList.tsx
index 7b4981d8e..0d2cba933 100644
--- a/frontend/app/components/Dashboard/components/Alerts/AlertsList.tsx
+++ b/frontend/app/components/Dashboard/components/Alerts/AlertsList.tsx
@@ -39,11 +39,9 @@ function AlertsList({ siteId }: Props) {
           <div className="text-center mt-4">
             {alertsSearch !== '' ? 'No matching results' : "You haven't created any alerts yet"}
           </div>
-          <div className="text-sm color-gray-medium font-normal">
-            Alerts helps your team stay up to date with the activity on your app.
-          </div>
         </div>
       }
+      subtext="Alerts helps your team stay up to date with the activity on your app."
     >
       <div className="mt-3 border-b">
         <div className="grid grid-cols-12 py-2 font-medium px-6">
diff --git a/frontend/app/components/Dashboard/components/DashboardList/DashboardList.tsx b/frontend/app/components/Dashboard/components/DashboardList/DashboardList.tsx
index efc275e61..47fde2825 100644
--- a/frontend/app/components/Dashboard/components/DashboardList/DashboardList.tsx
+++ b/frontend/app/components/Dashboard/components/DashboardList/DashboardList.tsx
@@ -21,11 +21,9 @@ function DashboardList() {
           <div className="text-center mt-4">
             {dashboardsSearch !== '' ? 'No matching results' : "You haven't created any dashboards yet"}
           </div>
-          <div className="text-sm color-gray-medium font-normal">
-            A Dashboard is a collection of Cards that can be shared across teams.
-          </div>
         </div>
       }
+      subtext="A Dashboard is a collection of Cards that can be shared across teams."
     >
       <div className="mt-3 border-b">
         <div className="grid grid-cols-12 py-2 font-medium px-6">
diff --git a/frontend/app/components/Dashboard/components/DashboardWidgetGrid/DashboardWidgetGrid.tsx b/frontend/app/components/Dashboard/components/DashboardWidgetGrid/DashboardWidgetGrid.tsx
index 0064d98b8..f8a3bdd32 100644
--- a/frontend/app/components/Dashboard/components/DashboardWidgetGrid/DashboardWidgetGrid.tsx
+++ b/frontend/app/components/Dashboard/components/DashboardWidgetGrid/DashboardWidgetGrid.tsx
@@ -40,7 +40,7 @@ function DashboardWidgetGrid(props: Props) {
         title={
           <div className="bg-white rounded">
             <div className="border-b p-5">
-              <div className="text-2xl font-normal color-gray-darkest">
+              <div className="text-2xl font-normal">
                 There are no cards in this dashboard
               </div>
               <div className="text-base font-normal">
diff --git a/frontend/app/components/Dashboard/components/Funnels/FunnelIssuesList/FunnelIssuesList.tsx b/frontend/app/components/Dashboard/components/Funnels/FunnelIssuesList/FunnelIssuesList.tsx
index a59202043..0f7dafdf5 100644
--- a/frontend/app/components/Dashboard/components/Funnels/FunnelIssuesList/FunnelIssuesList.tsx
+++ b/frontend/app/components/Dashboard/components/Funnels/FunnelIssuesList/FunnelIssuesList.tsx
@@ -46,7 +46,7 @@ function FunnelIssuesList(props: RouteComponentProps<Props>) {
             title={
                 <div className="flex flex-col items-center justify-center">
                     <AnimatedSVG name={ICONS.NO_ISSUES} size="170" />
-                    <div className="mt-3 text-xl">No issues found</div>
+                    <div className="mt-4">No issues found</div>
                 </div>
             }
         >
diff --git a/frontend/app/components/Dashboard/components/MetricsList/MetricsList.tsx b/frontend/app/components/Dashboard/components/MetricsList/MetricsList.tsx
index ab412676f..2b9f1519f 100644
--- a/frontend/app/components/Dashboard/components/MetricsList/MetricsList.tsx
+++ b/frontend/app/components/Dashboard/components/MetricsList/MetricsList.tsx
@@ -57,11 +57,9 @@ function MetricsList({
           <div className="text-center mt-4">
             {metricsSearch !== '' ? 'No matching results' : "You haven't created any cards yet"}
           </div>
-          <div className="text-sm color-gray-medium font-normal">
-            Create cards to capture key interactions and track KPIs.
-          </div>
         </div>
       }
+      subtext="Create cards to capture key interactions and track KPIs."
     >
       {listView ? (
         <ListView
diff --git a/frontend/app/components/Dashboard/components/WidgetSessions/WidgetSessions.tsx b/frontend/app/components/Dashboard/components/WidgetSessions/WidgetSessions.tsx
index 3720dd94b..7d6a60e1b 100644
--- a/frontend/app/components/Dashboard/components/WidgetSessions/WidgetSessions.tsx
+++ b/frontend/app/components/Dashboard/components/WidgetSessions/WidgetSessions.tsx
@@ -140,8 +140,8 @@ function WidgetSessions(props: Props) {
             title={
               <div className="flex items-center justify-center flex-col">
                 <AnimatedSVG name={ICONS.NO_SESSIONS} size={170} />
-                <div className="mt-2" />
-                <div className="text-center text-gray-600">
+                <div className="mt-4" />
+                <div className="text-center">
                   No relevant sessions found for the selected time period.
                 </div>
               </div>
diff --git a/frontend/app/components/Dashboard/components/WidgetView/WidgetView.tsx b/frontend/app/components/Dashboard/components/WidgetView/WidgetView.tsx
index debb909cc..3d0283fba 100644
--- a/frontend/app/components/Dashboard/components/WidgetView/WidgetView.tsx
+++ b/frontend/app/components/Dashboard/components/WidgetView/WidgetView.tsx
@@ -91,7 +91,7 @@ function WidgetView(props: Props) {
                     title={
                         <div className="flex flex-col items-center justify-between">
                             <AnimatedSVG name={ICONS.EMPTY_STATE} size={100} />
-                            <div className="mt-6 text-2xl">Metric not found!</div>
+                            <div className="mt-4">Metric not found!</div>
                         </div>
                     }
                 >
diff --git a/frontend/app/components/Errors/Error/ErrorInfo.js b/frontend/app/components/Errors/Error/ErrorInfo.js
index 6b5b08c0c..ff15d4589 100644
--- a/frontend/app/components/Errors/Error/ErrorInfo.js
+++ b/frontend/app/components/Errors/Error/ErrorInfo.js
@@ -71,7 +71,7 @@ export default class ErrorInfo extends React.PureComponent {
         title={
           <div className="flex flex-col items-center justify-center">
             <AnimatedSVG name={ICONS.EMPTY_STATE} size="170" />
-            <div className="mt-6 text-2xl">No Error Found!</div>
+            <div className="mt-4">No Error Found!</div>
           </div>
         }
         subtext="Please try to find existing one."
diff --git a/frontend/app/components/Funnels/FunnelIssues/FunnelIssues.js b/frontend/app/components/Funnels/FunnelIssues/FunnelIssues.js
index 0175008a8..33c0e25c3 100644
--- a/frontend/app/components/Funnels/FunnelIssues/FunnelIssues.js
+++ b/frontend/app/components/Funnels/FunnelIssues/FunnelIssues.js
@@ -46,7 +46,7 @@ function FunnelIssues(props) {
         title={
           <div className="flex flex-col items-center justify-center">
               <AnimatedSVG name={ICONS.NO_RESULTS} size="170" />
-              <div className="mt-6 text-2xl">No Issues Found!</div>
+              <div className="mt-4">No Issues Found!</div>
             </div>
         }
         subtext="Please try changing your search parameters."
diff --git a/frontend/app/components/Funnels/FunnelSessionList/FunnelSessionList.js b/frontend/app/components/Funnels/FunnelSessionList/FunnelSessionList.js
index f51538696..f146c8ab9 100644
--- a/frontend/app/components/Funnels/FunnelSessionList/FunnelSessionList.js
+++ b/frontend/app/components/Funnels/FunnelSessionList/FunnelSessionList.js
@@ -32,7 +32,7 @@ function FunnelSessionList(props) {
         title={
           <div className="flex flex-col items-center justify-center">
             <AnimatedSVG name={ICONS.NO_RESULTS} size="170" />
-            <div className="mt-6 text-2xl">No recordings found!</div>
+            <div className="mt-4">No recordings found!</div>
           </div>
         }
         subtext="Please try changing your search parameters."
diff --git a/frontend/app/components/Session_/Fetch/FetchDetails.js b/frontend/app/components/Session_/Fetch/FetchDetails.js
index 1b91a9c91..ea7074c8c 100644
--- a/frontend/app/components/Session_/Fetch/FetchDetails.js
+++ b/frontend/app/components/Session_/Fetch/FetchDetails.js
@@ -45,7 +45,7 @@ export default class FetchDetails extends React.PureComponent {
             title={
 				<div className="flex flex-col items-center justify-center">
 					<AnimatedSVG name={ICONS.NO_RESULTS} size="170" />
-					<div className="mt-6 text-2xl">Body is Empty.</div>
+					<div className="mt-4">Body is Empty.</div>
 				</div>
 			}
             size="small"
@@ -69,7 +69,7 @@ export default class FetchDetails extends React.PureComponent {
             title={
 				<div className="flex flex-col items-center justify-center">
 					<AnimatedSVG name={ICONS.NO_RESULTS} size="170" />
-					<div className="mt-6 text-2xl">Body is Empty.</div>
+					<div className="mt-4">Body is Empty.</div>
 				</div>
 			}
             size="small"
diff --git a/frontend/app/components/Session_/Fetch/components/Headers/Headers.tsx b/frontend/app/components/Session_/Fetch/components/Headers/Headers.tsx
index 17214a215..9e0ace287 100644
--- a/frontend/app/components/Session_/Fetch/components/Headers/Headers.tsx
+++ b/frontend/app/components/Session_/Fetch/components/Headers/Headers.tsx
@@ -10,7 +10,7 @@ function Headers(props) {
         title={
           <div className="flex flex-col items-center justify-center">
             <AnimatedSVG name={ICONS.NO_RESULTS} size="170" />
-            <div className="mt-6 text-2xl">No data available.</div>
+            <div className="mt-4">No data available.</div>
           </div>
         }
         size="small"
diff --git a/frontend/app/components/shared/SessionListContainer/components/Notes/NoteList.tsx b/frontend/app/components/shared/SessionListContainer/components/Notes/NoteList.tsx
index 3c48d2af0..9389877a5 100644
--- a/frontend/app/components/shared/SessionListContainer/components/Notes/NoteList.tsx
+++ b/frontend/app/components/shared/SessionListContainer/components/Notes/NoteList.tsx
@@ -23,7 +23,7 @@ function NotesList({ members }: { members: Array<Record<string, any>> }) {
           <div className="flex flex-col items-center justify-center">
             {/* <Icon name="no-dashboard" size={80} color="figmaColors-accent-secondary" /> */}
             <AnimatedSVG name={ICONS.NO_NOTES} size={180} />
-            <div className="text-center text-gray-600 mt-4">No notes yet.</div>
+            <div className="text-center mt-4">No notes yet.</div>
           </div>
         }
         subtext={
diff --git a/frontend/app/components/shared/UserSessionsModal/UserSessionsModal.tsx b/frontend/app/components/shared/UserSessionsModal/UserSessionsModal.tsx
index 890fc3ce7..5ed66d93a 100644
--- a/frontend/app/components/shared/UserSessionsModal/UserSessionsModal.tsx
+++ b/frontend/app/components/shared/UserSessionsModal/UserSessionsModal.tsx
@@ -62,8 +62,8 @@ function UserSessionsModal(props: Props) {
             <NoContent show={data.sessions.length === 0} title={
                 <div>
                     <AnimatedSVG name={ICONS.NO_SESSIONS} size={170} />
-                    <div className="mt-2" />
-                    <div className="text-center text-gray-600">No recordings found.</div>
+                    <div className="mt-4" />
+                    <div className="text-center">No recordings found.</div>
                 </div>
             }>
                 <div className="border rounded m-5 overflow-y-auto" style={{ maxHeight: 'calc(100vh - 85px)'}}>