diff --git a/frontend/app/components/Assist/components/SessionList/SessionList.tsx b/frontend/app/components/Assist/components/SessionList/SessionList.tsx
index dc8b54025..6de55c0d1 100644
--- a/frontend/app/components/Assist/components/SessionList/SessionList.tsx
+++ b/frontend/app/components/Assist/components/SessionList/SessionList.tsx
@@ -4,6 +4,7 @@ import { fetchLiveList } from 'Duck/sessions';
 import { Loader, NoContent, Label } from 'UI';
 import SessionItem from 'Shared/SessionItem';
 import { useModal } from 'App/components/Modal';
+import AnimatedSVG, { ICONS } from 'Shared/AnimatedSVG/AnimatedSVG';
 
 interface Props {
     loading: boolean;
@@ -24,14 +25,26 @@ function SessionList(props: Props) {
 
     return (
         <div style={{ width: '50vw' }}>
-            <div className="border-r shadow h-screen overflow-y-auto" style={{ backgroundColor: '#FAFAFA', zIndex: 999, width: '100%', minWidth: '700px' }}>
+            <div
+                className="border-r shadow h-screen overflow-y-auto"
+                style={{ backgroundColor: '#FAFAFA', zIndex: 999, width: '100%', minWidth: '700px' }}
+            >
                 <div className="p-4">
                     <div className="text-2xl">
                         {props.userId}'s <span className="color-gray-medium">Live Sessions</span>{' '}
                     </div>
                 </div>
                 <Loader loading={props.loading}>
-                    <NoContent show={!props.loading && props.list.size === 0} title="No live sessions.">
+                    <NoContent
+                        show={!props.loading && props.list.size === 0}
+                        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>
+                        }
+                    >
                         <div className="p-4">
                             {props.list.map((session: any) => (
                                 <div className="mb-6">
diff --git a/frontend/app/components/Dashboard/components/WidgetSessions/WidgetSessions.tsx b/frontend/app/components/Dashboard/components/WidgetSessions/WidgetSessions.tsx
index 66a4654e3..e3de553d2 100644
--- a/frontend/app/components/Dashboard/components/WidgetSessions/WidgetSessions.tsx
+++ b/frontend/app/components/Dashboard/components/WidgetSessions/WidgetSessions.tsx
@@ -1,21 +1,21 @@
-import React, { useEffect, useState } from "react";
-import { NoContent, Loader, Pagination } from "UI";
-import Select from "Shared/Select";
-import cn from "classnames";
-import { useStore } from "App/mstore";
-import SessionItem from "Shared/SessionItem";
-import { observer, useObserver } from "mobx-react-lite";
-import { DateTime } from "luxon";
-import { debounce } from "App/utils";
-import useIsMounted from "App/hooks/useIsMounted";
-import AnimatedSVG, { ICONS } from "Shared/AnimatedSVG/AnimatedSVG";
+import React, { useEffect, useState } from 'react';
+import { NoContent, Loader, Pagination } from 'UI';
+import Select from 'Shared/Select';
+import cn from 'classnames';
+import { useStore } from 'App/mstore';
+import SessionItem from 'Shared/SessionItem';
+import { observer, useObserver } from 'mobx-react-lite';
+import { DateTime } from 'luxon';
+import { debounce } from 'App/utils';
+import useIsMounted from 'App/hooks/useIsMounted';
+import AnimatedSVG, { ICONS } from 'Shared/AnimatedSVG/AnimatedSVG';
 
 interface Props {
     className?: string;
 }
 function WidgetSessions(props: Props) {
-    const { className = "" } = props;
-    const [activeSeries, setActiveSeries] = useState("all");
+    const { className = '' } = props;
+    const [activeSeries, setActiveSeries] = useState('all');
     const [data, setData] = useState<any>([]);
     const isMounted = useIsMounted();
     const [loading, setLoading] = useState(false);
@@ -23,15 +23,9 @@ function WidgetSessions(props: Props) {
     const { dashboardStore, metricStore } = useStore();
     const filter = useObserver(() => dashboardStore.drillDownFilter);
     const widget: any = useObserver(() => metricStore.instance);
-    const startTime = DateTime.fromMillis(filter.startTimestamp).toFormat(
-        "LLL dd, yyyy HH:mm"
-    );
-    const endTime = DateTime.fromMillis(filter.endTimestamp).toFormat(
-        "LLL dd, yyyy HH:mm"
-    );
-    const [seriesOptions, setSeriesOptions] = useState([
-        { label: "All", value: "all" },
-    ]);
+    const startTime = DateTime.fromMillis(filter.startTimestamp).toFormat('LLL dd, yyyy HH:mm');
+    const endTime = DateTime.fromMillis(filter.endTimestamp).toFormat('LLL dd, yyyy HH:mm');
+    const [seriesOptions, setSeriesOptions] = useState([{ label: 'All', value: 'all' }]);
 
     const writeOption = ({ value }: any) => setActiveSeries(value.value);
     useEffect(() => {
@@ -40,7 +34,7 @@ function WidgetSessions(props: Props) {
             label: item.seriesName,
             value: item.seriesId,
         }));
-        setSeriesOptions([{ label: "All", value: "all" }, ...seriesOptions]);
+        setSeriesOptions([{ label: 'All', value: 'all' }, ...seriesOptions]);
     }, [data]);
 
     const fetchSessions = (metricId: any, filter: any) => {
@@ -55,10 +49,7 @@ function WidgetSessions(props: Props) {
                 setLoading(false);
             });
     };
-    const debounceRequest: any = React.useCallback(
-        debounce(fetchSessions, 1000),
-        []
-    );
+    const debounceRequest: any = React.useCallback(debounce(fetchSessions, 1000), []);
 
     const depsString = JSON.stringify(widget.series);
     useEffect(() => {
@@ -68,13 +59,7 @@ function WidgetSessions(props: Props) {
             page: metricStore.sessionsPage,
             limit: metricStore.sessionsPageSize,
         });
-    }, [
-        filter.startTimestamp,
-        filter.endTimestamp,
-        filter.filters,
-        depsString,
-        metricStore.sessionsPage,
-    ]);
+    }, [filter.startTimestamp, filter.endTimestamp, filter.filters, depsString, metricStore.sessionsPage]);
 
     return useObserver(() => (
         <div className={cn(className)}>
@@ -82,28 +67,15 @@ function WidgetSessions(props: Props) {
                 <div className="flex items-baseline">
                     <h2 className="text-2xl">Sessions</h2>
                     <div className="ml-2 color-gray-medium">
-                        between{" "}
-                        <span className="font-medium color-gray-darkest">
-                            {startTime}
-                        </span>{" "}
-                        and{" "}
-                        <span className="font-medium color-gray-darkest">
-                            {endTime}
-                        </span>{" "}
+                        between <span className="font-medium color-gray-darkest">{startTime}</span> and{' '}
+                        <span className="font-medium color-gray-darkest">{endTime}</span>{' '}
                     </div>
                 </div>
 
-                {widget.metricType !== "table" && (
+                {widget.metricType !== 'table' && (
                     <div className="flex items-center ml-6">
-                        <span className="mr-2 color-gray-medium">
-                            Filter by Series
-                        </span>
-                        <Select
-                            options={seriesOptions}
-                            defaultValue={"all"}
-                            onChange={writeOption}
-                            plain
-                        />
+                        <span className="mr-2 color-gray-medium">Filter by Series</span>
+                        <Select options={seriesOptions} defaultValue={'all'} onChange={writeOption} plain />
                     </div>
                 )}
             </div>
@@ -112,14 +84,10 @@ function WidgetSessions(props: Props) {
                 <Loader loading={loading}>
                     <NoContent
                         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="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">No relevant sessions found for the selected time period.</div>
                             </div>
                         }
                         show={filteredSessions.sessions.length === 0}
@@ -134,13 +102,8 @@ function WidgetSessions(props: Props) {
                         <div className="w-full flex items-center justify-center py-6">
                             <Pagination
                                 page={metricStore.sessionsPage}
-                                totalPages={Math.ceil(
-                                    filteredSessions.total /
-                                        metricStore.sessionsPageSize
-                                )}
-                                onPageChange={(page: any) =>
-                                    metricStore.updateKey("sessionsPage", page)
-                                }
+                                totalPages={Math.ceil(filteredSessions.total / metricStore.sessionsPageSize)}
+                                onPageChange={(page: any) => metricStore.updateKey('sessionsPage', page)}
                                 limit={metricStore.sessionsPageSize}
                                 debounceRequest={500}
                             />
@@ -155,13 +118,9 @@ function WidgetSessions(props: Props) {
 const getListSessionsBySeries = (data: any, seriesId: any) => {
     const arr: any = { sessions: [], total: 0 };
     data.forEach((element: any) => {
-        if (seriesId === "all") {
+        if (seriesId === 'all') {
             const sessionIds = arr.sessions.map((i: any) => i.sessionId);
-            arr.sessions.push(
-                ...element.sessions.filter(
-                    (i: any) => !sessionIds.includes(i.sessionId)
-                )
-            );
+            arr.sessions.push(...element.sessions.filter((i: any) => !sessionIds.includes(i.sessionId)));
             arr.total = element.total;
         } else {
             if (element.seriesId === seriesId) {
diff --git a/frontend/app/components/Session_/EventsBlock/Metadata/SessionList.js b/frontend/app/components/Session_/EventsBlock/Metadata/SessionList.js
index bc0868933..fe414a30d 100644
--- a/frontend/app/components/Session_/EventsBlock/Metadata/SessionList.js
+++ b/frontend/app/components/Session_/EventsBlock/Metadata/SessionList.js
@@ -4,52 +4,57 @@ import { NoContent, Icon, Loader } from 'UI';
 import Session from 'Types/session';
 import SessionItem from 'Shared/SessionItem';
 import stl from './sessionList.module.css';
+import AnimatedSVG, { ICONS } from 'Shared/AnimatedSVG/AnimatedSVG';
 
-@connect(state => ({ 
-	currentSessionId: state.getIn([ 'sessions', 'current', 'sessionId' ])
+@connect((state) => ({
+    currentSessionId: state.getIn(['sessions', 'current', 'sessionId']),
 }))
 class SessionList extends React.PureComponent {
-  render() {
-    const { 
-			similarSessions,
-			loading,
-			currentSessionId,
-		} = this.props;
+    render() {
+        const { similarSessions, loading, currentSessionId } = this.props;
 
-		const similarSessionWithoutCurrent = similarSessions.map(({sessions, ...rest}) => {
-			return {
-				...rest,
-				sessions: sessions.map(Session).filter(({ sessionId }) => sessionId !== currentSessionId)
-			}
-    }).filter(site => site.sessions.length > 0);
-    
-    return (
-      <Loader loading={ loading }>
-        <NoContent 
-          show={ !loading && (similarSessionWithoutCurrent.length === 0 || similarSessionWithoutCurrent.size === 0 )}
-          title="No recordings found."
-        >
-          <div className={ stl.sessionList }>
-            { similarSessionWithoutCurrent.map(site => (
-              <div className={ stl.siteWrapper } key={ site.host }>
-                <div className={ stl.siteHeader }>
-                  <Icon name="window" size="14" color="gray-medium" marginRight="10" />
-                  <span>{ site.name }</span>
-                </div>
-                <div className="bg-white p-3 rounded border">
-                  { site.sessions.map(session => (
-                    <div className="border-b last:border-none">
-                      <SessionItem key={ session.sessionId } session={ session } />
+        const similarSessionWithoutCurrent = similarSessions
+            .map(({ sessions, ...rest }) => {
+                return {
+                    ...rest,
+                    sessions: sessions.map(Session).filter(({ sessionId }) => sessionId !== currentSessionId),
+                };
+            })
+            .filter((site) => site.sessions.length > 0);
+
+        return (
+            <Loader loading={loading}>
+                <NoContent
+                    show={!loading && (similarSessionWithoutCurrent.length === 0 || similarSessionWithoutCurrent.size === 0)}
+                    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">No sessions found.</div>
+                        </div>
+                    }
+                >
+                    <div className={stl.sessionList}>
+                        {similarSessionWithoutCurrent.map((site) => (
+                            <div className={stl.siteWrapper} key={site.host}>
+                                <div className={stl.siteHeader}>
+                                    <Icon name="window" size="14" color="gray-medium" marginRight="10" />
+                                    <span>{site.name}</span>
+                                </div>
+                                <div className="bg-white p-3 rounded border">
+                                    {site.sessions.map((session) => (
+                                        <div className="border-b last:border-none">
+                                            <SessionItem key={session.sessionId} session={session} />
+                                        </div>
+                                    ))}
+                                </div>
+                            </div>
+                        ))}
                     </div>
-                  )) }
-                </div>
-              </div>
-            )) }
-          </div>
-        </NoContent> 
-      </Loader>
-    );
-  }
+                </NoContent>
+            </Loader>
+        );
+    }
 }
 
 export default SessionList;