diff --git a/frontend/app/components/BugFinder/SessionList/SessionList.js b/frontend/app/components/BugFinder/SessionList/SessionList.js
index 47f02e5f5..ea5532211 100644
--- a/frontend/app/components/BugFinder/SessionList/SessionList.js
+++ b/frontend/app/components/BugFinder/SessionList/SessionList.js
@@ -95,42 +95,48 @@ export default class SessionList extends React.PureComponent {
     const hasUserFilter = _filterKeys.includes(FilterKey.USERID) || _filterKeys.includes(FilterKey.USERANONYMOUSID);
 
     return (
-      <NoContent
-        title={<div className="flex items-center justify-center flex-col">
-          <AnimatedSVG name={ICONS.NO_RESULTS} size="170" />
-          {this.getNoContentMessage(activeTab)}
-        </div>}
-        // subtext="Please try changing your search parameters."
-        // animatedIcon="no-results"
-        show={ !loading && list.size === 0}
-        subtext={
-          <div>
-            <div>Please try changing your search parameters.</div>
-          </div>
-        }
-      >
-        <Loader loading={ loading }>
-          { list.map(session => (
-            <SessionItem
-              key={ session.sessionId }
-              session={ session }
-              hasUserFilter={hasUserFilter}
-              onUserClick={this.onUserClick}
-              metaList={metaList}
-              lastPlayedSessionId={lastPlayedSessionId}
-            />
-          ))}
-        </Loader>
-        <div className="w-full flex items-center justify-center py-6">
-          <Pagination
-            page={currentPage}
-            totalPages={Math.ceil(total / PER_PAGE)}
-            onPageChange={(page) => this.props.updateCurrentPage(page)}
-            limit={PER_PAGE}
-            debounceRequest={1000}
-          />
+      <div className="bg-white p-3 rounded border">
+        <NoContent
+          title={<div className="flex items-center justify-center flex-col">
+            <AnimatedSVG name={ICONS.NO_RESULTS} size="170" />
+            {this.getNoContentMessage(activeTab)}
+          </div>}
+          // subtext="Please try changing your search parameters."
+          // animatedIcon="no-results"
+          show={ !loading && list.size === 0}
+          subtext={
+            <div>
+              <div>Please try changing your search parameters.</div>
+            </div>
+          }
+        >
+          
+            <Loader loading={ loading }>
+              { list.map(session => (
+                <>
+                <SessionItem
+                  key={ session.sessionId }
+                  session={ session }
+                  hasUserFilter={hasUserFilter}
+                  onUserClick={this.onUserClick}
+                  metaList={metaList}
+                  lastPlayedSessionId={lastPlayedSessionId}
+                />
+                <div className="border-b" />
+                </>
+              ))}
+            </Loader>
+            <div className="w-full flex items-center justify-center py-6">
+              <Pagination
+                page={currentPage}
+                totalPages={Math.ceil(total / PER_PAGE)}
+                onPageChange={(page) => this.props.updateCurrentPage(page)}
+                limit={PER_PAGE}
+                debounceRequest={1000}
+              />
+            </div>
+          </NoContent>
         </div>
-      </NoContent>
     );
   }
 
diff --git a/frontend/app/components/Dashboard/Widgets/CustomMetricsWidgets/CustomMetricTableSessions/CustomMetricTableSessions.tsx b/frontend/app/components/Dashboard/Widgets/CustomMetricsWidgets/CustomMetricTableSessions/CustomMetricTableSessions.tsx
index f258dba8c..8e2fa38ea 100644
--- a/frontend/app/components/Dashboard/Widgets/CustomMetricsWidgets/CustomMetricTableSessions/CustomMetricTableSessions.tsx
+++ b/frontend/app/components/Dashboard/Widgets/CustomMetricsWidgets/CustomMetricTableSessions/CustomMetricTableSessions.tsx
@@ -16,7 +16,10 @@ function CustomMetricTableSessions(props: Props) {
     return useObserver(() => (
         <NoContent show={!metric || !metric.data || !metric.data.sessions || metric.data.sessions.length === 0} size="small">
             {metric.data.sessions && metric.data.sessions.map((session: any, index: any) => (
-                <SessionItem session={session} key={session.sessionId} />
+                <>
+                    <SessionItem session={session} key={session.sessionId} />
+                    <div className="border-b" />
+                </>
             ))}
             
             {isEdit && (
diff --git a/frontend/app/components/Dashboard/components/WidgetSessions/WidgetSessions.tsx b/frontend/app/components/Dashboard/components/WidgetSessions/WidgetSessions.tsx
index 64fa9db4c..06a722cfd 100644
--- a/frontend/app/components/Dashboard/components/WidgetSessions/WidgetSessions.tsx
+++ b/frontend/app/components/Dashboard/components/WidgetSessions/WidgetSessions.tsx
@@ -90,7 +90,7 @@ function WidgetSessions(props: Props) {
                 )}
             </div>
 
-            <div className="mt-3">
+            <div className="mt-3 bg-white p-3 rounded border">
                 <Loader loading={loading}>
                     <NoContent
                         title={
@@ -102,7 +102,10 @@ function WidgetSessions(props: Props) {
                         show={filteredSessions.sessions.length === 0}
                     >
                         {filteredSessions.sessions.map((session: any) => (
-                            <SessionItem key={ session.sessionId } session={ session }  />
+                            <>
+                                <SessionItem key={ session.sessionId } session={ session }  />
+                                <div className="border-b" />
+                            </>
                         ))}
 
                         <div className="w-full flex items-center justify-center py-6">
diff --git a/frontend/app/components/Session_/EventsBlock/Metadata/SessionList.js b/frontend/app/components/Session_/EventsBlock/Metadata/SessionList.js
index 679e6b401..6565d5c23 100644
--- a/frontend/app/components/Session_/EventsBlock/Metadata/SessionList.js
+++ b/frontend/app/components/Session_/EventsBlock/Metadata/SessionList.js
@@ -36,7 +36,14 @@ class SessionList extends React.PureComponent {
                   <Icon name="window" size="14" color="gray-medium" marginRight="10" />
                   <span>{ site.name }</span>
                 </div>
-                { site.sessions.map(session => <SessionItem key={ session.sessionId } session={ session } />) }
+                <div className="bg-white p-3 rounded border">
+                  { site.sessions.map(session => (
+                    <>
+                      <SessionItem key={ session.sessionId } session={ session } />
+                      <div className="border-b" />
+                    </>
+                  )) }
+                </div>
               </div>
             )) }
           </div>
diff --git a/frontend/app/components/shared/LiveSessionList/LiveSessionList.tsx b/frontend/app/components/shared/LiveSessionList/LiveSessionList.tsx
index eae686134..0fe4b0b9a 100644
--- a/frontend/app/components/shared/LiveSessionList/LiveSessionList.tsx
+++ b/frontend/app/components/shared/LiveSessionList/LiveSessionList.tsx
@@ -124,40 +124,46 @@ function LiveSessionList(props: Props) {
           <SortOrderButton onChange={(state: any) => props.applyFilter({ order: state })} sortOrder={filter.order} />
         </div>
       </div>
-
+      
       <NoContent
-        title={"No live sessions."}
-        subtext={
-          <span>
-            See how to <a target="_blank" className="link" href="https://docs.openreplay.com/plugins/assist">{'enable Assist'}</a> and ensure you're using tracker-assist <span className="font-medium">v3.5.0</span> or higher.
-          </span>
-        }
-        image={<img src="/assets/img/live-sessions.png"
-        style={{ width: '70%', marginBottom: '30px' }}/>}
-        show={ !loading && list.size === 0}
-      >
-        <Loader loading={ loading }>
-          {list.map(session => (
-            <SessionItem
-              key={ session.sessionId }
-              session={ session }
-              live
-              hasUserFilter={hasUserFilter}
-              onUserClick={onUserClick}
-              metaList={metaList}
-            />
-          ))}
+          title={"No live sessions."}
+          subtext={
+            <span>
+              See how to <a target="_blank" className="link" href="https://docs.openreplay.com/plugins/assist">{'enable Assist'}</a> and ensure you're using tracker-assist <span className="font-medium">v3.5.0</span> or higher.
+            </span>
+          }
+          image={<img src="/assets/img/live-sessions.png"
+          style={{ width: '70%', marginBottom: '30px' }}/>}
+          show={ !loading && list.size === 0}
+        >
+          <div className="bg-white p-3 rounded border">
+          <Loader loading={ loading }>
+            {list.map(session => (
+              <>
+                <SessionItem
+                  key={ session.sessionId }
+                  session={ session }
+                  live
+                  hasUserFilter={hasUserFilter}
+                  onUserClick={onUserClick}
+                  metaList={metaList}
+                />
+                <div className="border-b" />
+              </>
+            ))}
 
-        <div className="w-full flex items-center justify-center py-6">
-          <Pagination
-            page={currentPage}
-            totalPages={Math.ceil(total / PER_PAGE)}
-            onPageChange={(page: any) => props.updateCurrentPage(page)}
-            limit={PER_PAGE}
-          />
-        </div>
-        </Loader>
-      </NoContent>
+          <div className="w-full flex items-center justify-center py-6">
+            <Pagination
+              page={currentPage}
+              totalPages={Math.ceil(total / PER_PAGE)}
+              onPageChange={(page: any) => props.updateCurrentPage(page)}
+              limit={PER_PAGE}
+            />
+          </div>
+          
+          </Loader>
+          </div>
+        </NoContent>
     </div>
   )
 }
diff --git a/frontend/app/components/shared/SessionItem/PlayLink/PlayLink.tsx b/frontend/app/components/shared/SessionItem/PlayLink/PlayLink.tsx
index 203b72089..2234a5242 100644
--- a/frontend/app/components/shared/SessionItem/PlayLink/PlayLink.tsx
+++ b/frontend/app/components/shared/SessionItem/PlayLink/PlayLink.tsx
@@ -36,7 +36,7 @@ export default function PlayLink(props: Props) {
             onMouseEnter={() => toggleHover(true)}
             onMouseLeave={() => toggleHover(false)}
         >
-            <Icon name={iconName} size="42" color={isAssist ? "tealx" : "teal"} />
+            <Icon name={iconName} size={38} color={isAssist ? "tealx" : "teal"} />
         </Link>
     )
 }
\ No newline at end of file
diff --git a/frontend/app/components/shared/SessionItem/SessionItem.tsx b/frontend/app/components/shared/SessionItem/SessionItem.tsx
index 23aeab9f6..8fc751503 100644
--- a/frontend/app/components/shared/SessionItem/SessionItem.tsx
+++ b/frontend/app/components/shared/SessionItem/SessionItem.tsx
@@ -5,6 +5,7 @@ import {
   Avatar,
   TextEllipsis,
   Label,
+  Icon,
 } from 'UI';
 import { useStore } from 'App/mstore';
 import { observer } from 'mobx-react-lite';
@@ -104,7 +105,7 @@ function SessionItem(props: RouteComponentProps<Props>) {
   });
 
   return (
-    <div className={ cn(stl.sessionItem, "flex flex-col p-3 mb-3") } id="session-item" >
+    <div className={ cn(stl.sessionItem, "flex flex-col p-2") } id="session-item" >
         <div className="flex items-start">
           <div className={ cn('flex items-center w-full')}>
             <div className="flex items-center pr-2" style={{ width: "30%"}}>
@@ -114,36 +115,38 @@ function SessionItem(props: RouteComponentProps<Props>) {
                   className={cn('text-lg', {'color-teal cursor-pointer': !disableUser && hasUserId, [stl.userName]: !disableUser && hasUserId, 'color-gray-medium' : disableUser || !hasUserId})}
                   onClick={() => (!disableUser && !hasUserFilter) && onUserClick(userId, userAnonymousId)}
                 >
-                  <TextEllipsis text={userDisplayName} maxWidth={200} popupProps={{ inverted: true, size: 'tiny' }} />
+                  <TextEllipsis text={userDisplayName} maxWidth="200" popupProps={{ inverted: true, size: 'tiny' }} />
                 </div>
               </div>
             </div>
             <div style={{ width: "30%" }} className="px-2 flex flex-col justify-between">
               <div>{formatTimeOrDate(startedAt, timezone) }</div>
-              <div className="flex items-center color-gray-medium">
+              <div className="flex items-center color-gray-medium py-1">
                 {!isAssist && (
                     <>
                       <div className="color-gray-medium">
                         <span className="mr-1">{ eventsCount }</span>
                         <span>{ eventsCount === 0 || eventsCount > 1 ? 'Events' : 'Event' }</span>
                       </div>
-                      <div className="mx-2 text-4xl">·</div>
+                      <Icon name="circle-fill" size={3} className="mx-4" />
                     </>
                 )}
                 <div>{ live ? <Counter startTime={startedAt} /> : formattedDuration }</div>
               </div>
             </div>
             <div style={{ width: "30%" }} className="px-2 flex flex-col justify-between">
-              <div style={{ height: '21px'}}><CountryFlag country={ userCountry } style={{ paddingTop: '4px' }} label /></div>
-              <div className="color-gray-medium flex items-center">
+              <div style={{ height: '21px'}}>
+                <CountryFlag country={ userCountry } style={{ paddingTop: '4px' }} label />
+              </div>
+              <div className="color-gray-medium flex items-center py-1">
                 <span className="capitalize" style={{ maxWidth: '70px'}}>
                   <TextEllipsis text={ capitalize(userBrowser) } popupProps={{ inverted: true, size: "tiny" }} />
                 </span>
-                <div className="mx-2 text-4xl">·</div>
+                <Icon name="circle-fill" size={3} className="mx-4" />
                 <span className="capitalize" style={{ maxWidth: '70px'}}>
                   <TextEllipsis text={ capitalize(userOs) } popupProps={{ inverted: true, size: "tiny" }} />
                 </span>
-                <div className="mx-2 text-4xl">·</div>
+                <Icon name="circle-fill" size={3} className="mx-4" />
                 <span className="capitalize" style={{ maxWidth: '70px'}}>
                   <TextEllipsis text={ capitalize(userDeviceType) } popupProps={{ inverted: true, size: "tiny" }} />
                 </span>
diff --git a/frontend/app/components/shared/SessionItem/sessionItem.module.css b/frontend/app/components/shared/SessionItem/sessionItem.module.css
index 897ee327f..34ed53ad9 100644
--- a/frontend/app/components/shared/SessionItem/sessionItem.module.css
+++ b/frontend/app/components/shared/SessionItem/sessionItem.module.css
@@ -1,8 +1,8 @@
 .sessionItem {
   background-color: #fff;
   user-select: none;
-  border-radius: 3px;
-  border: solid thin #EEEEEE;
+  /* border-radius: 3px; */
+  /* border: solid thin #EEEEEE; */
   transition: all 0.4s;
 
   & .favorite {
@@ -14,7 +14,7 @@
 
   &:hover {
     background-color: $active-blue;
-    border: solid thin $active-blue-border;
+    /* border: solid thin $active-blue-border; */
     transition: all 0.2s;
 
     & .playLink {
diff --git a/frontend/app/components/ui/Icon/Icon.js b/frontend/app/components/ui/Icon/Icon.js
index 7fc6ffee9..0ed03acaa 100644
--- a/frontend/app/components/ui/Icon/Icon.js
+++ b/frontend/app/components/ui/Icon/Icon.js
@@ -11,7 +11,7 @@ const Icon = ({
   color = 'gray-medium',
   className = '',
   style={},
-  marginRight,
+  marginRight = 0,
   inline = false,
   ...props
 }) => {
diff --git a/frontend/app/components/ui/SVG.tsx b/frontend/app/components/ui/SVG.tsx
index 5cfd4ebb9..b489a90c6 100644
--- a/frontend/app/components/ui/SVG.tsx
+++ b/frontend/app/components/ui/SVG.tsx
@@ -306,7 +306,7 @@ const SVG = (props: Props) => {
     case 'play-circle': return <svg viewBox="0 0 512 512" width={ `${ width }px` } height={ `${ height }px` } ><path d="M256 504c137 0 248-111 248-248S393 8 256 8 8 119 8 256s111 248 248 248zM40 256c0-118.7 96.1-216 216-216 118.7 0 216 96.1 216 216 0 118.7-96.1 216-216 216-118.7 0-216-96.1-216-216zm331.7-18-176-107c-15.8-8.8-35.7 2.5-35.7 21v208c0 18.4 19.8 29.8 35.7 21l176-101c16.4-9.1 16.4-32.8 0-42zM192 335.8V176.9c0-4.7 5.1-7.6 9.1-5.1l134.5 81.7c3.9 2.4 3.8 8.1-.1 10.3L201 341c-4 2.3-9-.6-9-5.2z"/></svg>;
     case 'play-fill-new': return <svg viewBox="0 0 16 16" width={ `${ width }px` } height={ `${ height }px` } ><path d="m11.596 8.697-6.363 3.692c-.54.313-1.233-.066-1.233-.697V4.308c0-.63.692-1.01 1.233-.696l6.363 3.692a.802.802 0 0 1 0 1.393z"/></svg>;
     case 'play-fill': return <svg viewBox="0 0 52 52" width={ `${ width }px` } height={ `${ height }px` } ><path d="M26 0A26 26 0 1 1 0 26 26 26 0 0 1 26 0Zm0 1.58A24.42 24.42 0 1 0 50.42 26 24.42 24.42 0 0 0 26 1.58Zm10.3 22c2.27 1.36 2.27 3.6 0 5l-13.16 7.79c-2.28 1.36-4.14.44-4.14-2v-16.7c0-2.49 1.86-3.4 4.13-2Z"/></svg>;
-    case 'play-hover': return <svg width={ `${ width }px` } height={ `${ height }px` } ><g clipPath="url(#a)"><path d="M21 0a21 21 0 1 1 0 42 21 21 0 0 1 0-42Zm0 1.276a19.724 19.724 0 1 0 0 39.448 19.724 19.724 0 0 0 0-39.448Z"/><circle cx="21" cy="21" r="20"/><path d="M29.32 23.084c1.833-1.13 1.833-2.94 0-4.039l-10.638-6.389c-1.833-1.13-3.336-.395-3.336 1.616V27.76c0 1.971 1.503 2.714 3.344 1.616l10.63-6.292Z" fill="#fff"/></g><defs><clipPath id="a"><path fill="#fff" d="M0 0h42v42H0z"/></clipPath></defs></svg>;
+    case 'play-hover': return <svg viewBox="0 0 42 42" width={ `${ width }px` } height={ `${ height }px` } ><g clipPath="url(#a)"><path d="M21 0a21 21 0 1 1 0 42 21 21 0 0 1 0-42Zm0 1.276a19.724 19.724 0 1 0 0 39.448 19.724 19.724 0 0 0 0-39.448Z"/><circle cx="21" cy="21" r="20"/><path d="M29.32 23.084c1.833-1.13 1.833-2.94 0-4.039l-10.638-6.389c-1.833-1.13-3.336-.395-3.336 1.616V27.76c0 1.971 1.503 2.714 3.344 1.616l10.63-6.292Z" fill="#fff"/></g><defs><clipPath id="a"><path fill="#fff" d="M0 0h42v42H0z"/></clipPath></defs></svg>;
     case 'play': return <svg viewBox="0 0 16 16" width={ `${ width }px` } height={ `${ height }px` } ><path d="M10.804 8 5 4.633v6.734L10.804 8zm.792-.696a.802.802 0 0 1 0 1.392l-6.363 3.692C4.713 12.69 4 12.345 4 11.692V4.308c0-.653.713-.998 1.233-.696l6.363 3.692z"/></svg>;
     case 'plus-circle': return <svg viewBox="0 0 16 16" width={ `${ width }px` } height={ `${ height }px` } ><path d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z"/><path d="M8 4a.5.5 0 0 1 .5.5v3h3a.5.5 0 0 1 0 1h-3v3a.5.5 0 0 1-1 0v-3h-3a.5.5 0 0 1 0-1h3v-3A.5.5 0 0 1 8 4z"/></svg>;
     case 'plus': return <svg viewBox="0 0 8 8" width={ `${ width }px` } height={ `${ height }px` } ><path d="M4 0a.5.5 0 0 1 .5.5v3h3a.5.5 0 0 1 0 1h-3v3a.5.5 0 0 1-1 0v-3h-3a.5.5 0 0 1 0-1h3v-3A.5.5 0 0 1 4 0Z"/></svg>;
diff --git a/frontend/app/svg/icons/play-hover.svg b/frontend/app/svg/icons/play-hover.svg
index 4939d51d9..13b3c271b 100644
--- a/frontend/app/svg/icons/play-hover.svg
+++ b/frontend/app/svg/icons/play-hover.svg
@@ -1,4 +1,4 @@
-<svg width="42" height="42" viewBox="0 0 42 42" fill="inherit" xmlns="http://www.w3.org/2000/svg">
+<svg viewBox="0 0 42 42" fill="inherit" xmlns="http://www.w3.org/2000/svg">
 <g clip-path="url(#clip0_1_47)">
 <path d="M21 0C25.1534 0 29.2135 1.23163 32.667 3.53914C36.1204 5.84665 38.812 9.1264 40.4015 12.9636C41.9909 16.8009 42.4068 21.0233 41.5965 25.0969C40.7862 29.1705 38.7861 32.9123 35.8492 35.8492C32.9123 38.7861 29.1705 40.7862 25.0969 41.5965C21.0233 42.4068 16.8009 41.9909 12.9636 40.4015C9.1264 38.812 5.84665 36.1204 3.53914 32.667C1.23163 29.2135 0 25.1534 0 21C0 15.4305 2.21249 10.089 6.15076 6.15076C10.089 2.21249 15.4305 0 21 0ZM21 1.27615C17.099 1.27615 13.2856 2.43294 10.042 4.60022C6.79845 6.76751 4.27039 9.84795 2.77754 13.452C1.28469 17.0561 0.894093 21.0219 1.65514 24.8479C2.41619 28.674 4.29471 32.1884 7.05313 34.9469C9.81156 37.7053 13.326 39.5838 17.1521 40.3449C20.9781 41.1059 24.9439 40.7153 28.548 39.2225C32.1521 37.7296 35.2325 35.2015 37.3998 31.958C39.5671 28.7144 40.7238 24.901 40.7238 21C40.7238 18.4098 40.2137 15.845 39.2225 13.452C38.2312 11.059 36.7784 8.88466 34.9469 7.05313C33.1153 5.22161 30.941 3.76876 28.548 2.77754C26.155 1.78633 23.5902 1.27615 21 1.27615Z" />
 <circle cx="21" cy="21" r="20" fill="inherit" />