diff --git a/.changeset/light-socks-admire.md b/.changeset/light-socks-admire.md
new file mode 100644
index 00000000..50193fa6
--- /dev/null
+++ b/.changeset/light-socks-admire.md
@@ -0,0 +1,7 @@
+---
+'@spotlightjs/overlay': patch
+'@spotlightjs/electron': patch
+'@spotlightjs/spotlight': patch
+---
+
+Overhaul React code for multiple fixes and performance improvements
diff --git a/.vscode/settings.json b/.vscode/settings.json
index 744146b9..81af5f75 100644
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@@ -9,6 +9,8 @@
     "spotlightjs",
     "svgr",
     "tailwindcss",
-    "uuidv"
+    "ttfb",
+    "uuidv",
+    "webvitals"
   ]
 }
diff --git a/packages/overlay/src/components/Overview.tsx b/packages/overlay/src/components/Overview.tsx
index 4a694a52..69c2f234 100644
--- a/packages/overlay/src/components/Overview.tsx
+++ b/packages/overlay/src/components/Overview.tsx
@@ -51,21 +51,12 @@ export default function Overview({
       <Tabs tabs={tabs} setOpen={setOpen} />
       <div className="flex-1 overflow-auto overflow-x-hidden">
         <Routes>
-          <Route path="/not-found" element={<p>Not Found - How'd you manage to get here?</p>} key={'not-found'}></Route>
-          {tabs.map(tab => {
-            const TabContent = tab.content && tab.content;
-
-            if (TabContent) {
-              return (
-                <Route
-                  path={`/${tab.id}/*`}
-                  key={tab.id}
-                  element={createElement(TabContent, { processedEvents: tab.processedEvents })}
-                ></Route>
-              );
-            }
-            return null;
-          })}
+          <Route path="/not-found" element={<p>Not Found - How'd you manage to get here?</p>} key={'not-found'} />
+          {tabs.map(({ content: TabContent, id, processedEvents }) =>
+            TabContent ? (
+              <Route path={`/${id}/*`} key={id} element={createElement(TabContent, { processedEvents })} />
+            ) : null,
+          )}
         </Routes>
       </div>
     </>
diff --git a/packages/overlay/src/components/Tabs.tsx b/packages/overlay/src/components/Tabs.tsx
index 78cd8d97..eefc5a27 100644
--- a/packages/overlay/src/components/Tabs.tsx
+++ b/packages/overlay/src/components/Tabs.tsx
@@ -55,14 +55,14 @@ export default function Tabs({ tabs, nested, setOpen }: Props) {
           className="border-primary-800 bg-primary-800 hover:bg-primary-700 hover:border-primary-700 focus:bg-primary-800 text-primary-100 block w-full rounded-md py-2 pl-3 pr-10 focus:outline-none sm:text-sm"
           onChange={e => {
             const activeTab = tabs.find(tab => tab.id === e.target.value);
-            if (activeTab && activeTab.onSelect) {
+            if (activeTab?.onSelect) {
               activeTab.onSelect();
             }
             navigate(`${nested ? '' : '/'}${activeTab?.id || 'not-found'}`);
           }}
         >
-          {tabs.map((tab, tabIdx) => (
-            <option key={tabIdx} value={tab.id}>
+          {tabs.map(tab => (
+            <option key={tab.id} value={tab.id}>
               {tab.title} {tab.notificationCount?.count}
             </option>
           ))}
@@ -83,7 +83,7 @@ export default function Tabs({ tabs, nested, setOpen }: Props) {
                   '-m-y -mx-2 flex select-none whitespace-nowrap border-b-2 px-2 py-3 text-sm font-medium',
                 )
               }
-              onClick={() => tab.onSelect && tab.onSelect()}
+              onClick={() => tab.onSelect?.()}
             >
               {tab.title}
               {tab.notificationCount !== undefined ? (
diff --git a/packages/overlay/src/components/Trigger.tsx b/packages/overlay/src/components/Trigger.tsx
index 6d58b4bc..6257a6b0 100644
--- a/packages/overlay/src/components/Trigger.tsx
+++ b/packages/overlay/src/components/Trigger.tsx
@@ -16,7 +16,7 @@ function getAnchorClasses(anchor: AnchorConfig) {
       return 'top-4 right-4';
     case 'bottomLeft':
       return 'bottom-4 left-4';
-    case 'bottomRight':
+    // case 'bottomRight':
     default:
       return 'bottom-4 right-4';
   }
@@ -35,7 +35,7 @@ function ToolbarItem({
     <div className="gap-x hover:bg-primary-400 relative flex items-center rounded p-3" {...props}>
       {children}
 
-      {!!count && (
+      {count && (
         <span
           className={classNames(
             severe ? 'bg-red-500' : 'bg-primary-500',
diff --git a/packages/overlay/src/integrations/console/console-tab.tsx b/packages/overlay/src/integrations/console/console-tab.tsx
index 91b51109..dd72ed9c 100644
--- a/packages/overlay/src/integrations/console/console-tab.tsx
+++ b/packages/overlay/src/integrations/console/console-tab.tsx
@@ -1,4 +1,4 @@
-import { ConsoleMessage } from './types';
+import type { ConsoleMessage } from './types';
 
 type Props = {
   processedEvents?: ConsoleMessage[];
diff --git a/packages/overlay/src/integrations/sentry/components/HiddenItemsButton.tsx b/packages/overlay/src/integrations/sentry/components/HiddenItemsButton.tsx
index cde62011..a34578a5 100644
--- a/packages/overlay/src/integrations/sentry/components/HiddenItemsButton.tsx
+++ b/packages/overlay/src/integrations/sentry/components/HiddenItemsButton.tsx
@@ -1,4 +1,4 @@
-import { type ComponentProps } from 'react';
+import type { ComponentProps } from 'react';
 
 export default function HiddenItemsButton({
   itemCount,
diff --git a/packages/overlay/src/integrations/sentry/components/SdkList.tsx b/packages/overlay/src/integrations/sentry/components/SdkList.tsx
index d1f1b830..9142282d 100644
--- a/packages/overlay/src/integrations/sentry/components/SdkList.tsx
+++ b/packages/overlay/src/integrations/sentry/components/SdkList.tsx
@@ -11,19 +11,17 @@ export default function SdkList() {
     <>
       {sdkList.length !== 0 ? (
         <CardList>
-          {sdkList.map(sdk => {
-            return (
-              <div className="flex items-center gap-x-4 px-6 py-2" key={`${sdk.name}-${sdk.version}`}>
-                <PlatformIcon className="rounded-md" platform={sdkToPlatform(sdk.name)} />
+          {sdkList.map(sdk => (
+            <div className="flex items-center gap-x-4 px-6 py-2" key={`${sdk.name}-${sdk.version}`}>
+              <PlatformIcon className="rounded-md" platform={sdkToPlatform(sdk.name)} />
 
-                <div className="text-primary-300 flex flex-col truncate font-mono text-sm">
-                  <div>{sdk.name}</div>
-                  <div>{sdk.version}</div>
-                  <TimeSince date={sdk.lastSeen} />
-                </div>
+              <div className="text-primary-300 flex flex-col truncate font-mono text-sm">
+                <div>{sdk.name}</div>
+                <div>{sdk.version}</div>
+                <TimeSince date={sdk.lastSeen} />
               </div>
-            );
-          })}
+            </div>
+          ))}
         </CardList>
       ) : (
         <div className="text-primary-300 p-6">Looks like there's no SDKs that have reported yet. 🤔</div>
diff --git a/packages/overlay/src/integrations/sentry/components/SpanResizer.tsx b/packages/overlay/src/integrations/sentry/components/SpanResizer.tsx
index c9631328..8f8eb7b7 100644
--- a/packages/overlay/src/integrations/sentry/components/SpanResizer.tsx
+++ b/packages/overlay/src/integrations/sentry/components/SpanResizer.tsx
@@ -1,4 +1,4 @@
-import { MouseEventHandler, useState } from 'react';
+import { useState, type MouseEventHandler } from 'react';
 import classNames from '~/lib/classNames';
 
 type SpanResizerProps = {
diff --git a/packages/overlay/src/integrations/sentry/components/Tags.tsx b/packages/overlay/src/integrations/sentry/components/Tags.tsx
index 78cbdfd5..2aaabcfc 100644
--- a/packages/overlay/src/integrations/sentry/components/Tags.tsx
+++ b/packages/overlay/src/integrations/sentry/components/Tags.tsx
@@ -3,9 +3,9 @@ import Tag from '~/ui/Tag';
 export default function Tags({ tags }: { tags: { [key: string]: string } }) {
   return (
     <div className="flex flex-row flex-wrap gap-2 pt-2">
-      {Object.keys(tags).map(tagKey => {
-        return <Tag key={tagKey} tagKey={tagKey} value={tags[tagKey]}></Tag>;
-      })}
+      {Object.keys(tags).map(tagKey => (
+        <Tag key={tagKey} tagKey={tagKey} value={tags[tagKey]} />
+      ))}
     </div>
   );
 }
diff --git a/packages/overlay/src/integrations/sentry/components/developerInfo/EnvelopeDetails.tsx b/packages/overlay/src/integrations/sentry/components/developerInfo/EnvelopeDetails.tsx
index d63e4640..3e7dbc62 100644
--- a/packages/overlay/src/integrations/sentry/components/developerInfo/EnvelopeDetails.tsx
+++ b/packages/overlay/src/integrations/sentry/components/developerInfo/EnvelopeDetails.tsx
@@ -1,6 +1,6 @@
-import { Envelope } from '@sentry/types';
+import type { Envelope } from '@sentry/types';
 import { useState } from 'react';
-import { RawEventContext } from '~/integrations/integration';
+import type { RawEventContext } from '~/integrations/integration';
 import SidePanel, { SidePanelHeader } from '~/ui/SidePanel';
 import JsonViewer from './JsonViewer';
 
@@ -14,13 +14,11 @@ export default function EnvelopeDetails({ data }: { data: { envelope: Envelope;
       <SidePanelHeader
         title="Envelope Details"
         subtitle={
-          <>
-            {header.event_id && (
-              <>
-                Event Id <span className="text-primary-500">&mdash;</span> {header.event_id}
-              </>
-            )}
-          </>
+          header.event_id ? (
+            <>
+              Event Id <span className="text-primary-500">&mdash;</span> {header.event_id}
+            </>
+          ) : undefined
         }
         backto="/devInfo"
       />
@@ -33,8 +31,8 @@ export default function EnvelopeDetails({ data }: { data: { envelope: Envelope;
             onChange={() => setShowRawJSON(prev => !prev)}
             checked={showRawJSON}
           />
-          <div className="bg-primary-400 h-4 w-10 rounded-full shadow-inner"></div>
-          <div className="dot absolute -left-1 -top-1 h-6 w-6 rounded-full bg-white shadow transition"></div>
+          <div className="bg-primary-400 h-4 w-10 rounded-full shadow-inner" />
+          <div className="dot absolute -left-1 -top-1 h-6 w-6 rounded-full bg-white shadow transition" />
         </div>
         <span className="ml-2">Show Raw Data</span>
       </label>
diff --git a/packages/overlay/src/integrations/sentry/components/developerInfo/EnvelopeList.tsx b/packages/overlay/src/integrations/sentry/components/developerInfo/EnvelopeList.tsx
index 9793d802..6fa43257 100644
--- a/packages/overlay/src/integrations/sentry/components/developerInfo/EnvelopeList.tsx
+++ b/packages/overlay/src/integrations/sentry/components/developerInfo/EnvelopeList.tsx
@@ -26,7 +26,7 @@ export default function EnvelopeList() {
     ? sentryDataCache.getEnvelopes().find(({ envelope: _env }) => _env[0].event_id === eventId) || null
     : null;
 
-  if (allEnvelopes && allEnvelopes.length) {
+  if (allEnvelopes?.length) {
     return (
       <>
         {hiddenItemCount > 0 && !showAll && (
@@ -47,44 +47,43 @@ export default function EnvelopeList() {
               const envelopeEventId: string | unknown = header.event_id;
               const { trace_id } = (header?.trace as { trace_id?: string }) || {};
               const envelopeItem = envelope[1].length > 0 ? (envelope[1][0] as EnvelopeItem) : null;
-              if (typeof envelopeEventId === 'string') {
-                return (
-                  <Link key={envelopeEventId} to={`/devInfo/${header.event_id}`}>
-                    <div
-                      key={`${header.event_id}`}
-                      className={classNames(
-                        'hover:bg-primary-900 border-b-primary-900 flex cursor-pointer items-center gap-4 border-b px-6 py-2 transition-all',
-                        eventId === envelopeEventId ? 'bg-primary-900' : '',
-                      )}
-                    >
-                      <PlatformIcon className="rounded-md" platform={sdkToPlatform(header.sdk?.name || 'unknown')} />
-                      <div className="text-primary-300 flex flex-[0.25] flex-col truncate font-mono text-sm">
-                        <h2 className="text-primary-50 text-xs">Event Id</h2>
-                        <div className="flex items-center gap-x-2">
-                          <div>{envelopeEventId.substring(0, 8)}</div>
-                          {trace_id && helpers.isLocalToSession(trace_id) ? (
-                            <Badge title="This trace is part of your local session.">Local</Badge>
-                          ) : null}
-                        </div>
+              if (typeof envelopeEventId !== 'string') {
+                return null;
+              }
+              return (
+                <Link key={envelopeEventId} to={`/devInfo/${header.event_id}`}>
+                  <div
+                    className={classNames(
+                      'hover:bg-primary-900 border-b-primary-900 flex cursor-pointer items-center gap-4 border-b px-6 py-2 transition-all',
+                      eventId === envelopeEventId ? 'bg-primary-900' : '',
+                    )}
+                  >
+                    <PlatformIcon className="rounded-md" platform={sdkToPlatform(header.sdk?.name || 'unknown')} />
+                    <div className="text-primary-300 flex flex-[0.25] flex-col truncate font-mono text-sm">
+                      <h2 className="text-primary-50 text-xs">Event Id</h2>
+                      <div className="flex items-center gap-x-2">
+                        <div>{envelopeEventId.substring(0, 8)}</div>
+                        {trace_id && helpers.isLocalToSession(trace_id) ? (
+                          <Badge title="This trace is part of your local session.">Local</Badge>
+                        ) : null}
                       </div>
+                    </div>
 
-                      <div className="text-primary-300 flex flex-[0.25] flex-col truncate font-mono text-sm">
-                        <h2 className="text-primary-50 text-xs">Type</h2>
-                        {envelopeItem && envelopeItem[0]?.type ? <>{envelopeItem[0].type}</> : '-'}
-                      </div>
-                      <div className="text-primary-300 flex flex-[0.25] flex-col truncate font-mono text-sm">
-                        <h2 className="text-primary-50 text-xs">Recieved</h2>
-                        {(header.sent_at as string | Date | number) ? (
-                          <TimeSince date={header.sent_at as string | Date | number} />
-                        ) : (
-                          '-'
-                        )}
-                      </div>
+                    <div className="text-primary-300 flex flex-[0.25] flex-col truncate font-mono text-sm">
+                      <h2 className="text-primary-50 text-xs">Type</h2>
+                      {envelopeItem?.[0]?.type ? envelopeItem[0].type : '-'}
                     </div>
-                  </Link>
-                );
-              }
-              return null;
+                    <div className="text-primary-300 flex flex-[0.25] flex-col truncate font-mono text-sm">
+                      <h2 className="text-primary-50 text-xs">Received</h2>
+                      {(header.sent_at as string | Date | number) ? (
+                        <TimeSince date={header.sent_at as string | Date | number} />
+                      ) : (
+                        '-'
+                      )}
+                    </div>
+                  </div>
+                </Link>
+              );
             })}
           </div>
         </div>
diff --git a/packages/overlay/src/integrations/sentry/components/events/Event.tsx b/packages/overlay/src/integrations/sentry/components/events/Event.tsx
index 9e8c3f85..72ca707e 100644
--- a/packages/overlay/src/integrations/sentry/components/events/Event.tsx
+++ b/packages/overlay/src/integrations/sentry/components/events/Event.tsx
@@ -1,14 +1,16 @@
-import { SentryEvent } from '../../types';
-import { Error, ErrorSummary, ErrorTitle } from './error/Error';
+import type { SentryEvent } from '../../types';
+import { ErrorItem, ErrorSummary, ErrorTitle } from './error/Error';
 
 function getEventMessage(event: SentryEvent) {
   if (typeof event.message === 'string') {
     return event.message;
-  } else if (event.message !== undefined && typeof event.message.formatted === 'string') {
+  }
+
+  if (event.message !== undefined && typeof event.message.formatted === 'string') {
     return event.message.formatted;
-  } else {
-    return '';
   }
+
+  return '';
 }
 
 export function EventTitle({ event }: { event: SentryEvent }) {
@@ -16,11 +18,7 @@ export function EventTitle({ event }: { event: SentryEvent }) {
     return <ErrorTitle event={event} />;
   }
 
-  return (
-    <>
-      <strong className="font-bold">{getEventMessage(event)}</strong>
-    </>
-  );
+  return <strong className="font-bold">{getEventMessage(event)}</strong>;
 }
 
 export function EventSummary({ event }: { event: SentryEvent }) {
@@ -38,7 +36,7 @@ export function EventSummary({ event }: { event: SentryEvent }) {
 
 export default function Event({ event }: { event: SentryEvent }) {
   if ('exception' in event) {
-    return <Error event={event} />;
+    return <ErrorItem event={event} />;
   }
 
   return (
diff --git a/packages/overlay/src/integrations/sentry/components/events/EventBreadcrumbs.tsx b/packages/overlay/src/integrations/sentry/components/events/EventBreadcrumbs.tsx
index 733f376d..690c5a1d 100644
--- a/packages/overlay/src/integrations/sentry/components/events/EventBreadcrumbs.tsx
+++ b/packages/overlay/src/integrations/sentry/components/events/EventBreadcrumbs.tsx
@@ -35,10 +35,10 @@ export default function EventBreadcrumbs({ event }: { event: SentryEvent }) {
   }
   return (
     <div className="divide-primary-800 grid-cols-2-auto -mx-2 grid space-y-2 divide-y">
-      {breadcrumbs.map((crumb, crumbIdx) => {
-        if (!crumb.message) return null;
-        return (
-          <Fragment key={crumbIdx}>
+      {breadcrumbs
+        .filter(crumb => crumb.message)
+        .map((crumb, crumbIdx) => (
+          <Fragment key={`${crumb.timestamp}-${crumb.category}-${crumb.type}`}>
             <div className="flex flex-none flex-col p-2">
               <div className="text-lg font-semibold">{crumb.category || ' '}</div>
               <div className="text-primary-300 text-xs">
@@ -54,8 +54,7 @@ export default function EventBreadcrumbs({ event }: { event: SentryEvent }) {
               {crumb.message}
             </pre>
           </Fragment>
-        );
-      })}
+        ))}
     </div>
   );
 }
diff --git a/packages/overlay/src/integrations/sentry/components/events/EventContexts.tsx b/packages/overlay/src/integrations/sentry/components/events/EventContexts.tsx
index 521ee1c4..4b85bd79 100644
--- a/packages/overlay/src/integrations/sentry/components/events/EventContexts.tsx
+++ b/packages/overlay/src/integrations/sentry/components/events/EventContexts.tsx
@@ -12,7 +12,7 @@ export default function EventContexts({ event }: { event: SentryEvent }) {
 
   const tags = event.tags;
 
-  if ((!contexts || !Object.values(contexts).find(v => !!v)) && !tags) {
+  if ((!contexts || !Object.values(contexts).some(v => v)) && !tags) {
     return (
       <div className="space-y-4 px-6">
         <div className="text-primary-300">
@@ -31,32 +31,29 @@ export default function EventContexts({ event }: { event: SentryEvent }) {
         </div>
       )}
       <div className="space-y-6">
-        {Object.entries(contexts).map(([ctxKey, ctxValues]) => {
-          if (!ctxValues) return null;
-          return (
+        {Object.entries(contexts).map(([ctxKey, ctxValues]) =>
+          ctxValues ? (
             <div key={ctxKey}>
               <h2 className="font-bold uppercase">{ctxKey}</h2>
               <table className="w-full">
                 <tbody>
-                  {Object.entries(ctxValues).map(([key, value]) => {
-                    return (
-                      <tr key={key}>
-                        <th className="text-primary-300 w-1/12 py-0.5 pr-4 text-left font-mono font-normal">
-                          <div className="w-full truncate">{key}</div>
-                        </th>
-                        <td className="py-0.5">
-                          <pre className="text-primary-300 whitespace-nowrap font-mono">
-                            {JSON.stringify(value, undefined, 2)}
-                          </pre>
-                        </td>
-                      </tr>
-                    );
-                  })}
+                  {Object.entries(ctxValues).map(([key, value]) => (
+                    <tr key={key}>
+                      <th className="text-primary-300 w-1/12 py-0.5 pr-4 text-left font-mono font-normal">
+                        <div className="w-full truncate">{key}</div>
+                      </th>
+                      <td className="py-0.5">
+                        <pre className="text-primary-300 whitespace-nowrap font-mono">
+                          {JSON.stringify(value, undefined, 2)}
+                        </pre>
+                      </td>
+                    </tr>
+                  ))}
                 </tbody>
               </table>
             </div>
-          );
-        })}
+          ) : null,
+        )}
       </div>
     </>
   );
diff --git a/packages/overlay/src/integrations/sentry/components/events/EventDetails.tsx b/packages/overlay/src/integrations/sentry/components/events/EventDetails.tsx
index 249708cd..0ab72e28 100644
--- a/packages/overlay/src/integrations/sentry/components/events/EventDetails.tsx
+++ b/packages/overlay/src/integrations/sentry/components/events/EventDetails.tsx
@@ -57,7 +57,7 @@ export default function EventDetails() {
       <div className="bg-primary-950 flex items-center gap-x-2 px-6 py-4">
         <PlatformIcon event={event} className="rounded-md" />
         <h1 className="max-w-full flex-1 truncate text-2xl">{renderEventTitle(event)}</h1>
-        {!!traceCtx && (
+        {traceCtx && (
           <div className="text-primary-300 font-mono">
             <div>
               T:{' '}
diff --git a/packages/overlay/src/integrations/sentry/components/events/EventList.tsx b/packages/overlay/src/integrations/sentry/components/events/EventList.tsx
index a4d87369..d84375c5 100644
--- a/packages/overlay/src/integrations/sentry/components/events/EventList.tsx
+++ b/packages/overlay/src/integrations/sentry/components/events/EventList.tsx
@@ -56,7 +56,7 @@ export default function EventList() {
                   <Badge title="This event is part of your local session.">Local</Badge>
                 ) : null}
               </div>
-              <span></span>
+              <span />
               <TimeSince date={e.timestamp} />
             </div>
             <div className="flex-1">{renderEvent(e)}</div>
diff --git a/packages/overlay/src/integrations/sentry/components/events/error/Error.tsx b/packages/overlay/src/integrations/sentry/components/events/error/Error.tsx
index 03863d0e..53cfb816 100644
--- a/packages/overlay/src/integrations/sentry/components/events/error/Error.tsx
+++ b/packages/overlay/src/integrations/sentry/components/events/error/Error.tsx
@@ -1,8 +1,8 @@
-import { EventException, EventExceptionValue, SentryErrorEvent } from '../../../types';
+import type { EventException, EventExceptionValue, SentryErrorEvent } from '../../../types';
 import Frame from './Frame';
 
 export function ErrorTitle({ event }: { event: SentryErrorEvent }) {
-  const values = arraifyValues(event.exception);
+  const values = valuesToArray(event.exception);
   return (
     <>
       <strong className="font-bold">{values[0].type}:</strong> {values[0].value}
@@ -11,7 +11,7 @@ export function ErrorTitle({ event }: { event: SentryErrorEvent }) {
 }
 
 export function ErrorSummary({ event }: { event: SentryErrorEvent }) {
-  const values = arraifyValues(event.exception);
+  const values = valuesToArray(event.exception);
 
   return (
     <div className="space-y-4 font-mono">
@@ -23,8 +23,8 @@ export function ErrorSummary({ event }: { event: SentryErrorEvent }) {
   );
 }
 
-export function Error({ event }: { event: SentryErrorEvent }) {
-  const values = arraifyValues(event.exception);
+export function ErrorItem({ event }: { event: SentryErrorEvent }) {
+  const values = valuesToArray(event.exception);
 
   return (
     <>
@@ -56,7 +56,7 @@ export function Error({ event }: { event: SentryErrorEvent }) {
   );
 }
 
-function arraifyValues(exception: EventException): EventExceptionValue[] {
+function valuesToArray(exception: EventException): EventExceptionValue[] {
   if (exception.value) {
     return [exception.value];
   }
diff --git a/packages/overlay/src/integrations/sentry/components/events/error/Frame.tsx b/packages/overlay/src/integrations/sentry/components/events/error/Frame.tsx
index 02346648..770245b7 100644
--- a/packages/overlay/src/integrations/sentry/components/events/error/Frame.tsx
+++ b/packages/overlay/src/integrations/sentry/components/events/error/Frame.tsx
@@ -96,20 +96,19 @@ export default function Frame({
       </div>
       {isOpen && (
         <div className="bg-primary-950">
-          {frame.pre_context &&
-            frame.pre_context.map((line, lineNo) => {
-              return (
-                <div className="flex items-center" key={lineNo}>
-                  {frame.lineno !== undefined && (
-                    <div className="text-primary-300 w-16 text-right">
-                      {frame.lineno - frame.pre_context!.length + lineNo}
-                    </div>
-                  )}
-                  <pre className="text-primary-100 flex-1  whitespace-pre-wrap px-2 py-1">{line}</pre>
-                </div>
-              );
-            })}
-          {!!frame.context_line && (
+          {frame.pre_context?.map((line, relativeLineNo) => {
+            const lineNo =
+              frame.lineno != null
+                ? frame.lineno - (frame.pre_context as string[]).length + relativeLineNo
+                : relativeLineNo;
+            return (
+              <div className="flex items-center" key={`pre-context-${lineNo}`}>
+                {frame.lineno !== undefined && <div className="text-primary-300 w-16 text-right">{lineNo}</div>}
+                <pre className="text-primary-100 flex-1  whitespace-pre-wrap px-2 py-1">{line}</pre>
+              </div>
+            );
+          })}
+          {frame.context_line && (
             <div
               className={classNames(
                 frame.pre_context || frame.post_context ? 'bg-primary-600' : 'bg-primary-900',
@@ -120,17 +119,15 @@ export default function Frame({
               <pre className="text-primary-100 whitespace-pre-wrap px-2 py-1">{frame.context_line}</pre>
             </div>
           )}
-          {frame.post_context &&
-            frame.post_context.map((line, lineNo) => {
-              return (
-                <div className="flex items-center" key={lineNo}>
-                  {frame.lineno !== undefined && (
-                    <div className="text-primary-300 w-16 text-right">{frame.lineno + 1 + lineNo}</div>
-                  )}
-                  <pre className="text-primary-100 flex-1  whitespace-pre-wrap px-2 py-1">{line}</pre>
-                </div>
-              );
-            })}
+          {frame.post_context?.map((line, relativeLineNo) => {
+            const lineNo = frame.lineno != null ? frame.lineno + 1 + relativeLineNo : relativeLineNo;
+            return (
+              <div className="flex items-center" key={`post-context-${lineNo}`}>
+                {frame.lineno !== undefined && <div className="text-primary-300 w-16 text-right">{lineNo}</div>}
+                <pre className="text-primary-100 flex-1  whitespace-pre-wrap px-2 py-1">{line}</pre>
+              </div>
+            );
+          })}
           {frame.vars && <ContextLocals vars={frame.vars} />}
         </div>
       )}
diff --git a/packages/overlay/src/integrations/sentry/components/performance/PerformanceTabDetails.tsx b/packages/overlay/src/integrations/sentry/components/performance/PerformanceTabDetails.tsx
index d5236760..71b24942 100644
--- a/packages/overlay/src/integrations/sentry/components/performance/PerformanceTabDetails.tsx
+++ b/packages/overlay/src/integrations/sentry/components/performance/PerformanceTabDetails.tsx
@@ -55,7 +55,7 @@ export default function PerformanceTabDetails() {
         <Routes>
           <Route path="queries/:type" element={<QuerySummary showAll={showAll} />} />
           <Route path="resources" element={<Resources showAll={showAll} />} />
-          <Route path="webvitals" element={<WebVitals showAll={showAll} />} />
+          <Route path="webvitals" element={<WebVitals />} />
           <Route path="webvitals/:page" element={<WebVitalsDetail />} />
           {/* Default tab */}
           <Route path="*" element={<Queries showAll={showAll} />} />
diff --git a/packages/overlay/src/integrations/sentry/components/performance/Queries.tsx b/packages/overlay/src/integrations/sentry/components/performance/Queries.tsx
index ecc0e34a..ceccc327 100644
--- a/packages/overlay/src/integrations/sentry/components/performance/Queries.tsx
+++ b/packages/overlay/src/integrations/sentry/components/performance/Queries.tsx
@@ -1,11 +1,11 @@
-import { useEffect, useState } from 'react';
+import { useMemo, useState } from 'react';
 import { Link } from 'react-router-dom';
 import { ReactComponent as Sort } from '~/assets/sort.svg';
 import { ReactComponent as SortDown } from '~/assets/sortDown.svg';
 import classNames from '~/lib/classNames';
 import { QUERIES_HEADERS, QUERIES_SORT_KEYS } from '../../constants';
 import { useSentrySpans } from '../../data/useSentrySpans';
-import { Span } from '../../types';
+import type { Span } from '../../types';
 import { getFormattedDuration } from '../../utils/duration';
 
 const filterDBSpans = (spans: Span[], regex?: RegExp) => {
@@ -35,67 +35,51 @@ const calculateQueryInfo = ({ query, spanData }: { query: string; spanData: Span
   };
 };
 
+type QueryInfoComparator = (a: QueryInfo, b: QueryInfo) => number;
+type QuerySortTypes = (typeof QUERIES_SORT_KEYS)[keyof typeof QUERIES_SORT_KEYS];
+const COMPARATORS: Record<QuerySortTypes, QueryInfoComparator> = {
+  [QUERIES_SORT_KEYS.queryDesc]: (a, b) => {
+    if (a.description < b.description) return -1;
+    if (a.description > b.description) return 1;
+    return 0;
+  },
+  [QUERIES_SORT_KEYS.avgDuration]: (a, b) => a.avgDuration - b.avgDuration,
+  [QUERIES_SORT_KEYS.timeSpent]: (a, b) => a.timeSpent - b.timeSpent,
+};
+
 const Queries = ({ showAll }: { showAll: boolean }) => {
   const [allSpans, localSpans] = useSentrySpans();
-  const [queriesData, setQueriesData] = useState<QueryInfo[]>([]);
   const [sort, setSort] = useState({
     active: QUERIES_SORT_KEYS.timeSpent,
     asc: false,
   });
 
-  const toggleSortOrder = (type: string) => {
-    if (sort.active === type) {
-      setSort(prev => ({
-        active: type,
-        asc: !prev.asc,
-      }));
-    } else {
-      setSort({
-        active: type,
-        asc: false,
-      });
-    }
-  };
+  const toggleSortOrder = (type: string) =>
+    setSort(prev =>
+      prev.active === type
+        ? {
+            active: type,
+            asc: !prev.asc,
+          }
+        : {
+            active: type,
+            asc: false,
+          },
+    );
 
-  const compareQueryInfo = (a: QueryInfo, b: QueryInfo) => {
-    switch (sort.active) {
-      case QUERIES_SORT_KEYS.queryDesc: {
-        if (a.description < b.description) return -1;
-        if (a.description > b.description) return 1;
-        return 0;
-      }
-      case QUERIES_SORT_KEYS.avgDuration:
-        return a.avgDuration - b.avgDuration;
-      case QUERIES_SORT_KEYS.timeSpent:
-        return a.timeSpent - b.timeSpent;
-      default:
-        return a.timeSpent - b.timeSpent;
-    }
-  };
+  const queriesData: QueryInfo[] = useMemo(() => {
+    const compareQueryInfo = COMPARATORS[sort.active] || COMPARATORS[QUERIES_SORT_KEYS.timeSpent];
 
-  useEffect(() => {
     const onlyDBSpans = filterDBSpans(showAll ? allSpans : localSpans, /db\.[A-Za-z]+/);
+    const uniqueSpansSet = new Set(onlyDBSpans.map(span => String(span?.description).trim()));
+    // CLear out empty ones (they collapse as a single empty string since this is a set)
+    uniqueSpansSet.delete('');
+    return [...uniqueSpansSet]
+      .map(query => calculateQueryInfo({ query, spanData: onlyDBSpans }))
+      .sort((a, b) => (sort.asc ? compareQueryInfo(a, b) : compareQueryInfo(b, a)));
+  }, [allSpans, localSpans, showAll, sort]);
 
-    if (onlyDBSpans.length > 0) {
-      const uniqueQueries: string[] = [
-        ...new Set(
-          onlyDBSpans
-            .map(span => span?.description)
-            .map(String)
-            .filter(query => query.trim() !== ''),
-        ),
-      ];
-      setQueriesData(
-        uniqueQueries
-          .map(query => calculateQueryInfo({ query, spanData: onlyDBSpans }))
-          .sort((a, b) => {
-            return sort.asc ? compareQueryInfo(a, b) : compareQueryInfo(b, a);
-          }),
-      );
-    }
-  }, [showAll, sort]);
-
-  if (queriesData && queriesData.length) {
+  if (queriesData?.length) {
     return (
       <table className="divide-primary-700 w-full table-fixed divide-y">
         <thead>
diff --git a/packages/overlay/src/integrations/sentry/components/performance/QuerySummary.tsx b/packages/overlay/src/integrations/sentry/components/performance/QuerySummary.tsx
index b2dcfb10..0ff366f2 100644
--- a/packages/overlay/src/integrations/sentry/components/performance/QuerySummary.tsx
+++ b/packages/overlay/src/integrations/sentry/components/performance/QuerySummary.tsx
@@ -1,4 +1,4 @@
-import { useEffect, useState } from 'react';
+import { useMemo, useState } from 'react';
 import { Link, useParams } from 'react-router-dom';
 import { ReactComponent as Sort } from '~/assets/sort.svg';
 import { ReactComponent as SortDown } from '~/assets/sortDown.svg';
@@ -6,7 +6,7 @@ import classNames from '~/lib/classNames';
 import Breadcrumbs from '~/ui/Breadcrumbs';
 import { QUERY_SUMMARY_HEADERS, QUERY_SUMMARY_SORT_KEYS } from '../../constants';
 import { useSentrySpans } from '../../data/useSentrySpans';
-import { Span } from '../../types';
+import type { Span } from '../../types';
 import { getFormattedDuration } from '../../utils/duration';
 
 const filterDBSpans = (spans: Span[], type?: string) => {
@@ -17,141 +17,130 @@ const filterDBSpans = (spans: Span[], type?: string) => {
   return [];
 };
 
+type SpanInfoComparator = (a: Span, b: Span) => number;
+type QuerySummarySortTypes = (typeof QUERY_SUMMARY_SORT_KEYS)[keyof typeof QUERY_SUMMARY_SORT_KEYS];
+const COMPARATORS: Record<QuerySummarySortTypes, SpanInfoComparator> = {
+  [QUERY_SUMMARY_SORT_KEYS.foundIn]: (a, b) => {
+    if (a.trace_id < b.trace_id) return -1;
+    if (a.trace_id > b.trace_id) return 1;
+    return 0;
+  },
+  [QUERY_SUMMARY_SORT_KEYS.spanId]: (a, b) => {
+    if (a.span_id < b.span_id) return -1;
+    if (a.span_id > b.span_id) return 1;
+    return 0;
+  },
+  [QUERY_SUMMARY_SORT_KEYS.timeSpent]: (a, b) => a.timestamp - a.start_timestamp - (b.timestamp - b.start_timestamp),
+};
+
 const QuerySummary = ({ showAll }: { showAll: boolean }) => {
   const [allSpans, localSpans] = useSentrySpans();
   const { type } = useParams();
-  const [filteredDBSpans, setFilteredDBSpans] = useState<Span[]>([]);
   const [sort, setSort] = useState({
     active: QUERY_SUMMARY_SORT_KEYS.timeSpent,
     asc: false,
   });
 
-  const toggleSortOrder = (type: string) => {
-    if (sort.active === type) {
-      setSort(prev => ({
-        active: type,
-        asc: !prev.asc,
-      }));
-    } else {
-      setSort({
-        active: type,
-        asc: false,
-      });
-    }
-  };
+  const toggleSortOrder = (type: string) =>
+    setSort(prev =>
+      prev.active === type
+        ? {
+            active: type,
+            asc: !prev.asc,
+          }
+        : {
+            active: type,
+            asc: false,
+          },
+    );
 
-  const compareSpanInfo = (a: Span, b: Span) => {
-    switch (sort.active) {
-      case QUERY_SUMMARY_SORT_KEYS.foundIn: {
-        if (a.trace_id < b.trace_id) return -1;
-        if (a.trace_id > b.trace_id) return 1;
-        return 0;
-      }
-      case QUERY_SUMMARY_SORT_KEYS.spanId: {
-        if (a.span_id < b.span_id) return -1;
-        if (a.span_id > b.span_id) return 1;
-        return 0;
-      }
-      case QUERY_SUMMARY_SORT_KEYS.timeSpent: {
-        const aTimeSpent = a.timestamp - a.start_timestamp;
-        const bTimeSpent = b.timestamp - b.start_timestamp;
-        return aTimeSpent - bTimeSpent;
-      }
-      default: {
-        const aTimeSpent = a.timestamp - a.start_timestamp;
-        const bTimeSpent = b.timestamp - b.start_timestamp;
-        return aTimeSpent - bTimeSpent;
-      }
-    }
-  };
+  const filteredDBSpans: Span[] = useMemo(() => {
+    const compareSpanInfo = COMPARATORS[sort.active] || COMPARATORS[QUERY_SUMMARY_SORT_KEYS.timeSpent];
 
-  useEffect(() => {
-    setFilteredDBSpans(
-      filterDBSpans(showAll ? allSpans : localSpans, type).sort((a, b) => {
-        return sort.asc ? compareSpanInfo(a, b) : compareSpanInfo(b, a);
-      }),
+    return filterDBSpans(showAll ? allSpans : localSpans, type).sort((a, b) =>
+      sort.asc ? compareSpanInfo(a, b) : compareSpanInfo(b, a),
     );
-  }, [showAll, sort]);
+  }, [allSpans, localSpans, showAll, sort, type]);
 
-  if (type && filteredDBSpans && filteredDBSpans.length) {
-    return (
-      <>
-        <Breadcrumbs
-          crumbs={[
-            {
-              id: 'queries',
-              label: 'Queries',
-              link: true,
-              to: '/performance/queries',
-            },
-            {
-              id: 'querySummary',
-              label: 'Query Summary',
-              link: false,
-            },
-          ]}
-        />
-        <table className="divide-primary-700 w-full table-fixed divide-y">
-          <thead>
-            <tr>
-              {QUERY_SUMMARY_HEADERS.map(header => (
-                <th
-                  key={header.id}
-                  scope="col"
+  if (!type || !filteredDBSpans || !filteredDBSpans.length) {
+    return <p className="text-primary-300 px-6 py-4">Query not found.</p>;
+  }
+  return (
+    <>
+      <Breadcrumbs
+        crumbs={[
+          {
+            id: 'queries',
+            label: 'Queries',
+            link: true,
+            to: '/performance/queries',
+          },
+          {
+            id: 'querySummary',
+            label: 'Query Summary',
+            link: false,
+          },
+        ]}
+      />
+      <table className="divide-primary-700 w-full table-fixed divide-y">
+        <thead>
+          <tr>
+            {QUERY_SUMMARY_HEADERS.map(header => (
+              <th
+                key={header.id}
+                scope="col"
+                className={classNames(
+                  'text-primary-100 px-6 py-3.5 text-sm font-semibold',
+                  header.primary ? 'w-2/5' : 'w-[15%]',
+                )}
+              >
+                <div
                   className={classNames(
-                    'text-primary-100 px-6 py-3.5 text-sm font-semibold',
-                    header.primary ? 'w-2/5' : 'w-[15%]',
+                    'flex cursor-pointer select-none items-center gap-1',
+                    header.primary ? 'justify-start' : 'justify-end',
                   )}
+                  onClick={() => toggleSortOrder(header.sortKey)}
                 >
-                  <div
-                    className={classNames(
-                      'flex cursor-pointer select-none items-center gap-1',
-                      header.primary ? 'justify-start' : 'justify-end',
-                    )}
-                    onClick={() => toggleSortOrder(header.sortKey)}
-                  >
-                    {header.title}
-                    {sort.active === header.sortKey ? (
-                      <SortDown
-                        width={12}
-                        height={12}
-                        className={classNames(
-                          'fill-primary-300',
-                          sort.asc ? '-translate-y-0.5 rotate-0' : 'translate-y-0.5 rotate-180',
-                        )}
-                      />
-                    ) : (
-                      <Sort width={12} height={12} className="stroke-primary-300" />
-                    )}
-                  </div>
-                </th>
-              ))}
-            </tr>
-          </thead>
-          <tbody>
-            {filteredDBSpans.map(span => (
-              <tr key={span.span_id} className="hover:bg-primary-900">
-                <td className="text-primary-200 w-2/5 truncate whitespace-nowrap px-6 py-4 text-left text-sm font-medium">
-                  <Link className="truncate hover:underline" to={`/traces/${span.trace_id}`}>
-                    {span.trace_id}
-                  </Link>
-                </td>
-                <td className="text-primary-200 w-[15%] whitespace-nowrap px-6 py-4 text-right text-sm font-medium">
-                  <Link className="truncate hover:underline" to={`/traces/${span.trace_id}/${span.span_id}`}>
-                    {span.span_id}
-                  </Link>
-                </td>
-                <td className="text-primary-200 w-[15%] whitespace-nowrap px-6 py-4 text-right text-sm font-medium">
-                  {getFormattedDuration(span.timestamp - span.start_timestamp)}
-                </td>
-              </tr>
+                  {header.title}
+                  {sort.active === header.sortKey ? (
+                    <SortDown
+                      width={12}
+                      height={12}
+                      className={classNames(
+                        'fill-primary-300',
+                        sort.asc ? '-translate-y-0.5 rotate-0' : 'translate-y-0.5 rotate-180',
+                      )}
+                    />
+                  ) : (
+                    <Sort width={12} height={12} className="stroke-primary-300" />
+                  )}
+                </div>
+              </th>
             ))}
-          </tbody>
-        </table>
-      </>
-    );
-  }
-  return <p className="text-primary-300 px-6 py-4">Query not found.</p>;
+          </tr>
+        </thead>
+        <tbody>
+          {filteredDBSpans.map(span => (
+            <tr key={span.span_id} className="hover:bg-primary-900">
+              <td className="text-primary-200 w-2/5 truncate whitespace-nowrap px-6 py-4 text-left text-sm font-medium">
+                <Link className="truncate hover:underline" to={`/traces/${span.trace_id}`}>
+                  {span.trace_id}
+                </Link>
+              </td>
+              <td className="text-primary-200 w-[15%] whitespace-nowrap px-6 py-4 text-right text-sm font-medium">
+                <Link className="truncate hover:underline" to={`/traces/${span.trace_id}/${span.span_id}`}>
+                  {span.span_id}
+                </Link>
+              </td>
+              <td className="text-primary-200 w-[15%] whitespace-nowrap px-6 py-4 text-right text-sm font-medium">
+                {getFormattedDuration(span.timestamp - span.start_timestamp)}
+              </td>
+            </tr>
+          ))}
+        </tbody>
+      </table>
+    </>
+  );
 };
 
 export default QuerySummary;
diff --git a/packages/overlay/src/integrations/sentry/components/performance/Resources.tsx b/packages/overlay/src/integrations/sentry/components/performance/Resources.tsx
index d10f22d6..cfe84af0 100644
--- a/packages/overlay/src/integrations/sentry/components/performance/Resources.tsx
+++ b/packages/overlay/src/integrations/sentry/components/performance/Resources.tsx
@@ -1,11 +1,11 @@
-import { useEffect, useState } from 'react';
+import { useMemo, useState } from 'react';
 import { ReactComponent as Sort } from '~/assets/sort.svg';
 import { ReactComponent as SortDown } from '~/assets/sortDown.svg';
 import classNames from '~/lib/classNames';
 import Tooltip from '~/ui/Tooltip';
 import { RESOURCES_SORT_KEYS, RESOURCE_HEADERS } from '../../constants';
 import { useSentrySpans } from '../../data/useSentrySpans';
-import { Span } from '../../types';
+import type { Span } from '../../types';
 import { formatBytes } from '../../utils/bytes';
 import { getFormattedDuration } from '../../utils/duration';
 
@@ -53,6 +53,19 @@ const getResourceSpans = (spans: Span[], options: { type?: string; regex?: RegEx
   return [];
 };
 
+type ResourceInfoComparator = (a: ResourceInfo, b: ResourceInfo) => number;
+type ResourceSortTypes = (typeof RESOURCES_SORT_KEYS)[keyof typeof RESOURCES_SORT_KEYS];
+const COMPARATORS: Record<ResourceSortTypes, ResourceInfoComparator> = {
+  [RESOURCES_SORT_KEYS.description]: (a, b) => {
+    if (a.description < b.description) return -1;
+    if (a.description > b.description) return 1;
+    return 0;
+  },
+  [RESOURCES_SORT_KEYS.avgEncodedSize]: (a, b) => a.avgEncodedSize - b.avgEncodedSize,
+  [RESOURCES_SORT_KEYS.avgDuration]: (a, b) => a.avgDuration - b.avgDuration,
+  [RESOURCES_SORT_KEYS.timeSpent]: (a, b) => a.timeSpent - b.timeSpent,
+};
+
 const Resources = ({ showAll }: { showAll: boolean }) => {
   const [allSpans, localSpans] = useSentrySpans();
 
@@ -60,139 +73,113 @@ const Resources = ({ showAll }: { showAll: boolean }) => {
     active: RESOURCES_SORT_KEYS.timeSpent,
     asc: false,
   });
-  const [resources, setResources] = useState<ResourceInfo[]>([]);
-
-  const compareResourceInfo = (a: ResourceInfo, b: ResourceInfo) => {
-    switch (sort.active) {
-      case RESOURCES_SORT_KEYS.description: {
-        if (a.description < b.description) return -1;
-        if (a.description > b.description) return 1;
-        return 0;
-      }
-      case RESOURCES_SORT_KEYS.avgEncodedSize:
-        return a.avgEncodedSize - b.avgEncodedSize;
-      case RESOURCES_SORT_KEYS.avgDuration:
-        return a.avgDuration - b.avgDuration;
-      case RESOURCES_SORT_KEYS.timeSpent:
-        return a.timeSpent - b.timeSpent;
-      default:
-        return a.timeSpent - b.timeSpent;
-    }
-  };
 
-  const toggleSortOrder = (type: string) => {
-    if (sort.active === type) {
-      setSort(prev => ({
-        active: type,
-        asc: !prev.asc,
-      }));
-    } else {
-      setSort({
-        active: type,
-        asc: false,
-      });
-    }
-  };
+  const toggleSortOrder = (type: string) =>
+    setSort(prev =>
+      prev.active === type
+        ? {
+            active: type,
+            asc: !prev.asc,
+          }
+        : {
+            active: type,
+            asc: false,
+          },
+    );
 
-  useEffect(() => {
+  const resources = useMemo(() => {
     const filteredResourceSpans = getResourceSpans(showAll ? allSpans : localSpans, { regex: /resource\.[A-Za-z]+/ });
-    if (filteredResourceSpans.length > 0) {
-      const uniqueResourceDescriptions: string[] = [
-        ...new Set(
-          filteredResourceSpans
-            .map(span => span?.description)
-            .map(String)
-            .filter(resource => resource.trim() !== ''),
-        ),
-      ];
-      setResources(
-        uniqueResourceDescriptions
-          .map(resource => calculateResourceInfo({ resource, spanData: filteredResourceSpans }))
-          .sort((a, b) => {
-            return sort.asc ? compareResourceInfo(a, b) : compareResourceInfo(b, a);
-          }),
-      );
-    }
-  }, [sort, showAll]);
+    const uniqueResourceDescriptionsSet = new Set(filteredResourceSpans.map(span => String(span?.description).trim()));
+    // CLear out empty ones (they collapse as a single empty string since this is a set)
+    uniqueResourceDescriptionsSet.delete('');
+    const uniqueResourceDescriptions: string[] = [...uniqueResourceDescriptionsSet];
+    const compareResourceInfo = COMPARATORS[sort.active] || COMPARATORS[RESOURCES_SORT_KEYS.timeSpent];
+
+    return uniqueResourceDescriptions
+      .map(resource => calculateResourceInfo({ resource, spanData: filteredResourceSpans }))
+      .sort((a, b) => {
+        return sort.asc ? compareResourceInfo(a, b) : compareResourceInfo(b, a);
+      });
+  }, [sort, showAll, allSpans, localSpans]);
 
-  if (resources && resources.length) {
-    return (
-      <table className="divide-primary-700 w-full table-fixed divide-y">
-        <thead>
-          <tr>
-            {RESOURCE_HEADERS.map(header => (
-              <th
-                key={header.id}
-                scope="col"
+  if (!resources?.length) {
+    return <p className="text-primary-300 px-6 py-4">No Resource found.</p>;
+  }
+  return (
+    <table className="divide-primary-700 w-full table-fixed divide-y">
+      <thead>
+        <tr>
+          {RESOURCE_HEADERS.map(header => (
+            <th
+              key={header.id}
+              scope="col"
+              className={classNames(
+                'text-primary-100 px-6 py-3.5 text-sm font-semibold',
+                header.primary ? 'w-2/5' : 'w-[15%]',
+              )}
+            >
+              <div
                 className={classNames(
-                  'text-primary-100 px-6 py-3.5 text-sm font-semibold',
-                  header.primary ? 'w-2/5' : 'w-[15%]',
+                  'flex cursor-pointer select-none items-center gap-1',
+                  header.primary ? 'justify-start' : 'justify-end',
                 )}
+                onClick={() => toggleSortOrder(header.sortKey)}
               >
-                <div
-                  className={classNames(
-                    'flex cursor-pointer select-none items-center gap-1',
-                    header.primary ? 'justify-start' : 'justify-end',
-                  )}
-                  onClick={() => toggleSortOrder(header.sortKey)}
-                >
-                  {header.title}
-                  {sort.active === header.sortKey ? (
-                    <SortDown
-                      width={12}
-                      height={12}
-                      className={classNames(
-                        'fill-primary-300',
-                        sort.asc ? '-translate-y-0.5 rotate-0' : 'translate-y-0.5 rotate-180',
-                      )}
-                    />
-                  ) : (
-                    <Sort width={12} height={12} className="stroke-primary-300" />
-                  )}
-                </div>
-              </th>
-            ))}
-          </tr>
-        </thead>
-        <tbody>
-          {resources.map((resource: ResourceInfo) => (
-            <tr key={resource.description} className="hover:bg-primary-900">
-              <td className="text-primary-200 relative w-2/5 whitespace-nowrap px-6 py-4 text-left text-sm font-medium">
-                <Tooltip
-                  position="right"
-                  content={
-                    resource.similarResources[0].op === 'resource.img' &&
-                    resource.description?.indexOf('/') === 0 && (
-                      <div className="bg-primary-800 cursor-pointer rounded-lg p-4 shadow-md">
-                        <h2 className="mb-2 font-bold">Preview</h2>
-                        <img
-                          src={resource.description}
-                          className="inline-block max-h-[150px] max-w-[150px] rounded p-1"
-                          alt="preview"
-                        />
-                      </div>
-                    )
-                  }
-                >
-                  <div className="truncate">{resource.description}</div>
-                </Tooltip>
-              </td>
-              <td className="text-primary-200 w-[15%] whitespace-nowrap px-6 py-4 text-right text-sm font-medium">
-                {getFormattedDuration(resource.avgDuration)}
-              </td>
-              <td className="text-primary-200 w-[15%] whitespace-nowrap px-6 py-4 text-right text-sm font-medium">
-                {getFormattedDuration(resource.timeSpent)}
-              </td>
-              <td className="text-primary-200 w-[15%] whitespace-nowrap px-6 py-4 text-right text-sm font-medium">
-                {formatBytes(resource.avgEncodedSize)}
-              </td>
-            </tr>
+                {header.title}
+                {sort.active === header.sortKey ? (
+                  <SortDown
+                    width={12}
+                    height={12}
+                    className={classNames(
+                      'fill-primary-300',
+                      sort.asc ? '-translate-y-0.5 rotate-0' : 'translate-y-0.5 rotate-180',
+                    )}
+                  />
+                ) : (
+                  <Sort width={12} height={12} className="stroke-primary-300" />
+                )}
+              </div>
+            </th>
           ))}
-        </tbody>
-      </table>
-    );
-  }
-  return <p className="text-primary-300 px-6 py-4">No Resource found.</p>;
+        </tr>
+      </thead>
+      <tbody>
+        {resources.map((resource: ResourceInfo) => (
+          <tr key={resource.description} className="hover:bg-primary-900">
+            <td className="text-primary-200 relative w-2/5 whitespace-nowrap px-6 py-4 text-left text-sm font-medium">
+              <Tooltip
+                position="right"
+                content={
+                  resource.similarResources[0].op === 'resource.img' &&
+                  resource.description?.indexOf('/') === 0 && (
+                    <div className="bg-primary-800 cursor-pointer rounded-lg p-4 shadow-md">
+                      <h2 className="mb-2 font-bold">Preview</h2>
+                      <img
+                        src={resource.description}
+                        className="inline-block max-h-[150px] max-w-[150px] rounded p-1"
+                        alt="preview"
+                      />
+                    </div>
+                  )
+                }
+              >
+                <div className="truncate">{resource.description}</div>
+              </Tooltip>
+            </td>
+            <td className="text-primary-200 w-[15%] whitespace-nowrap px-6 py-4 text-right text-sm font-medium">
+              {getFormattedDuration(resource.avgDuration)}
+            </td>
+            <td className="text-primary-200 w-[15%] whitespace-nowrap px-6 py-4 text-right text-sm font-medium">
+              {getFormattedDuration(resource.timeSpent)}
+            </td>
+            <td className="text-primary-200 w-[15%] whitespace-nowrap px-6 py-4 text-right text-sm font-medium">
+              {formatBytes(resource.avgEncodedSize)}
+            </td>
+          </tr>
+        ))}
+      </tbody>
+    </table>
+  );
 };
 
 export default Resources;
diff --git a/packages/overlay/src/integrations/sentry/components/performance/webVitals/PerformanceChart.tsx b/packages/overlay/src/integrations/sentry/components/performance/webVitals/PerformanceChart.tsx
index c4c6c920..b025b505 100644
--- a/packages/overlay/src/integrations/sentry/components/performance/webVitals/PerformanceChart.tsx
+++ b/packages/overlay/src/integrations/sentry/components/performance/webVitals/PerformanceChart.tsx
@@ -1,9 +1,9 @@
 import { useRef, useState } from 'react';
-import { MetricScoreProps, MetricWeightsProps } from '~/integrations/sentry/types';
+import type { MetricScoreProps, MetricWeightsProps } from '~/integrations/sentry/types';
 import { calculateLabelCoordinates } from '~/integrations/sentry/utils/webVitals';
 import classNames from '~/lib/classNames';
 import { RingChart } from '~/ui/Chart';
-import { WebVitals } from '../../../constants';
+import type { WebVitals } from '../../../constants';
 import useMouseTracking from '../../../hooks/useMouseTracking';
 
 type Coordinates = {
diff --git a/packages/overlay/src/integrations/sentry/components/performance/webVitals/WebVitalsDetail.tsx b/packages/overlay/src/integrations/sentry/components/performance/webVitals/WebVitalsDetail.tsx
index be8e4106..cfd952c6 100644
--- a/packages/overlay/src/integrations/sentry/components/performance/webVitals/WebVitalsDetail.tsx
+++ b/packages/overlay/src/integrations/sentry/components/performance/webVitals/WebVitalsDetail.tsx
@@ -1,7 +1,7 @@
 import { useParams } from 'react-router-dom';
 import { PERFORMANCE_SCORE_PROFILES } from '~/integrations/sentry/constants';
 import { useSentryEvents } from '~/integrations/sentry/data/useSentryEvents';
-import { MetricScoreProps, MetricWeightsProps, SentryEventWithPerformanceData } from '~/integrations/sentry/types';
+import type { MetricScoreProps, MetricWeightsProps, SentryEventWithPerformanceData } from '~/integrations/sentry/types';
 import { getFormattedDuration } from '~/integrations/sentry/utils/duration';
 import Breadcrumbs from '~/ui/Breadcrumbs';
 import { normalizePerformanceScore } from '../../../utils/webVitals';
diff --git a/packages/overlay/src/integrations/sentry/components/performance/webVitals/index.tsx b/packages/overlay/src/integrations/sentry/components/performance/webVitals/index.tsx
index 3f044745..5b17b85f 100644
--- a/packages/overlay/src/integrations/sentry/components/performance/webVitals/index.tsx
+++ b/packages/overlay/src/integrations/sentry/components/performance/webVitals/index.tsx
@@ -1,73 +1,55 @@
-import { useEffect, useState } from 'react';
+import { useMemo, useState } from 'react';
 import { Link } from 'react-router-dom';
 import { ReactComponent as Sort } from '~/assets/sort.svg';
 import { ReactComponent as SortDown } from '~/assets/sortDown.svg';
 import { PERFORMANCE_SCORE_PROFILES, WEB_VITALS_HEADERS, WEB_VITALS_SORT_KEYS } from '~/integrations/sentry/constants';
 import { useSentryEvents } from '~/integrations/sentry/data/useSentryEvents';
-import { SentryEventWithPerformanceData } from '~/integrations/sentry/types';
+import type { SentryEventWithPerformanceData } from '~/integrations/sentry/types';
 import { getFormattedDuration } from '~/integrations/sentry/utils/duration';
 import classNames from '~/lib/classNames';
 import { normalizePerformanceScore } from '../../../utils/webVitals';
 
-const WebVitals = ({ showAll }: { showAll: boolean }) => {
+type SentryEventComparator = (a: SentryEventWithPerformanceData, b: SentryEventWithPerformanceData) => number;
+type WebVitalsSortTypes = (typeof WEB_VITALS_SORT_KEYS)[keyof typeof WEB_VITALS_SORT_KEYS];
+const COMPARATORS: Record<WebVitalsSortTypes, SentryEventComparator> = {
+  [WEB_VITALS_SORT_KEYS.pages]: (a, b) => {
+    if (a.transaction && b.transaction && a.transaction < b.transaction) return -1;
+    if (a.transaction && b.transaction && a.transaction > b.transaction) return 1;
+    return 0;
+  },
+  [WEB_VITALS_SORT_KEYS.lcp]: (a, b) => a.measurements['score.lcp'].value - b.measurements['score.lcp'].value,
+  [WEB_VITALS_SORT_KEYS.fid]: (a, b) => a.measurements['score.fid'].value - b.measurements['score.fid'].value,
+  [WEB_VITALS_SORT_KEYS.fcp]: (a, b) => a.measurements['score.fcp'].value - b.measurements['score.fcp'].value,
+  [WEB_VITALS_SORT_KEYS.cls]: (a, b) => a.measurements['score.cls'].value - b.measurements['score.cls'].value,
+  [WEB_VITALS_SORT_KEYS.ttfb]: (a, b) => a.measurements['score.ttfb'].value - b.measurements['score.ttfb'].value,
+  [WEB_VITALS_SORT_KEYS.score]: (a, b) => a.measurements['score.total'].value - b.measurements['score.total'].value,
+};
+
+const WebVitals = () => {
   const events = useSentryEvents();
-  const [measurementEvents, setMeasurementEvents] = useState<SentryEventWithPerformanceData[]>([]);
   const [sort, setSort] = useState({
     active: WEB_VITALS_SORT_KEYS.score,
     asc: false,
   });
 
-  const toggleSortOrder = (type: string) => {
-    if (sort.active === type) {
-      setSort(prev => ({
-        active: type,
-        asc: !prev.asc,
-      }));
-    } else {
-      setSort({
-        active: type,
-        asc: false,
-      });
-    }
-  };
+  const toggleSortOrder = (type: string) =>
+    setSort(prev =>
+      prev.active === type
+        ? {
+            active: type,
+            asc: !prev.asc,
+          }
+        : {
+            active: type,
+            asc: false,
+          },
+    );
 
-  const compareEvents = (a: SentryEventWithPerformanceData, b: SentryEventWithPerformanceData) => {
-    switch (sort.active) {
-      case WEB_VITALS_SORT_KEYS.pages: {
-        if (a.transaction && b.transaction && a.transaction < b.transaction) return -1;
-        if (a.transaction && b.transaction && a.transaction > b.transaction) return 1;
-        return 0;
-      }
-      case WEB_VITALS_SORT_KEYS.lcp: {
-        return a.measurements['score.lcp'].value - b.measurements['score.lcp'].value;
-      }
-      case WEB_VITALS_SORT_KEYS.fid: {
-        return a.measurements['score.fid'].value - b.measurements['score.fid'].value;
-      }
-      case WEB_VITALS_SORT_KEYS.fcp: {
-        return a.measurements['score.fcp'].value - b.measurements['score.fcp'].value;
-      }
-      case WEB_VITALS_SORT_KEYS.cls: {
-        return a.measurements['score.cls'].value - b.measurements['score.cls'].value;
-      }
-      case WEB_VITALS_SORT_KEYS.ttfb: {
-        return a.measurements['score.ttfb'].value - b.measurements['score.ttfb'].value;
-      }
-      case WEB_VITALS_SORT_KEYS.score: {
-        return a.measurements['score.total'].value - b.measurements['score.total'].value;
-      }
-      default: {
-        return a.measurements['score.total'].value - b.measurements['score.total'].value;
-      }
-    }
-  };
+  const measurementEvents: SentryEventWithPerformanceData[] = useMemo(() => {
+    const compareEvents = COMPARATORS[sort.active] || COMPARATORS[WEB_VITALS_SORT_KEYS.score];
 
-  useEffect(() => {
-    const _measurementEvents = [];
-    for (const event of events) {
-      if (
-        event.measurements &&
-        event?.contexts?.trace?.op === 'pageload'
+    return (
+      events
         // TODO: Skipping this check because of not getting all required metrics
         // && !PERFORMANCE_SCORE_PROFILES.profiles[0].scoreComponents.some(c => {
         //   return (
@@ -76,94 +58,91 @@ const WebVitals = ({ showAll }: { showAll: boolean }) => {
         //     !c.optional
         //   );
         // })
-      ) {
-        const updatedEvent = { ...event };
-        normalizePerformanceScore(updatedEvent, PERFORMANCE_SCORE_PROFILES);
-        _measurementEvents.push(updatedEvent as unknown as SentryEventWithPerformanceData);
-      }
-    }
-    setMeasurementEvents(
-      _measurementEvents.sort((a, b) => {
-        return sort.asc ? compareEvents(a, b) : compareEvents(b, a);
-      }),
+        .filter(event => event.measurements && event?.contexts?.trace?.op === 'pageload')
+        .map(event => {
+          const updatedEvent = { ...event };
+          normalizePerformanceScore(updatedEvent, PERFORMANCE_SCORE_PROFILES);
+          return updatedEvent as unknown as SentryEventWithPerformanceData;
+        })
+        .sort((a, b) => (sort.asc ? compareEvents(a, b) : compareEvents(b, a)))
     );
-  }, [showAll, sort]);
+  }, [events, sort]);
 
-  if (measurementEvents && measurementEvents.length) {
-    return (
-      <>
-        <table className="divide-primary-700 w-full table-fixed divide-y">
-          <thead>
-            <tr>
-              {WEB_VITALS_HEADERS.map(header => (
-                <th
-                  key={header.id}
-                  scope="col"
+  if (!measurementEvents?.length) {
+    return <p className="text-primary-300 px-6 py-4">No Measurements found.</p>;
+  }
+  return (
+    <>
+      <table className="divide-primary-700 w-full table-fixed divide-y">
+        <thead>
+          <tr>
+            {WEB_VITALS_HEADERS.map(header => (
+              <th
+                key={header.id}
+                scope="col"
+                className={classNames(
+                  'text-primary-100 px-6 py-3.5 text-sm font-semibold',
+                  header.primary ? 'w-2/5' : 'w-[15%]',
+                )}
+              >
+                <div
                   className={classNames(
-                    'text-primary-100 px-6 py-3.5 text-sm font-semibold',
-                    header.primary ? 'w-2/5' : 'w-[15%]',
+                    'flex cursor-pointer select-none items-center gap-1',
+                    header.primary ? 'justify-start' : 'justify-end',
                   )}
+                  onClick={() => toggleSortOrder(header.sortKey)}
                 >
-                  <div
-                    className={classNames(
-                      'flex cursor-pointer select-none items-center gap-1',
-                      header.primary ? 'justify-start' : 'justify-end',
-                    )}
-                    onClick={() => toggleSortOrder(header.sortKey)}
-                  >
-                    {header.title}
-                    {sort.active === header.sortKey ? (
-                      <SortDown
-                        width={12}
-                        height={12}
-                        className={classNames(
-                          'fill-primary-300',
-                          sort.asc ? '-translate-y-0.5 rotate-0' : 'translate-y-0.5 rotate-180',
-                        )}
-                      />
-                    ) : (
-                      <Sort width={12} height={12} className="stroke-primary-300" />
-                    )}
-                  </div>
-                </th>
-              ))}
-            </tr>
-          </thead>
-          <tbody>
-            {measurementEvents.map(event => (
-              <tr key={event.event_id} className="hover:bg-primary-900">
-                <td className="text-primary-200 w-2/5 truncate whitespace-nowrap px-6 py-4 text-left text-sm font-medium">
-                  <Link className="truncate hover:underline" to={`/performance/webvitals/${event.event_id}`}>
-                    {event.transaction}
-                  </Link>
-                </td>
-                <td className="text-primary-200 w-[15%] whitespace-nowrap px-6 py-4 text-right text-sm font-medium">
-                  {event.measurements?.lcp ? getFormattedDuration(event.measurements.lcp.value) : '-'}
-                </td>
-                <td className="text-primary-200 w-[15%] whitespace-nowrap px-6 py-4 text-right text-sm font-medium">
-                  {event.measurements?.fcp ? getFormattedDuration(event.measurements.fcp.value) : '-'}
-                </td>
-                <td className="text-primary-200 w-[15%] whitespace-nowrap px-6 py-4 text-right text-sm font-medium">
-                  {event.measurements?.fid ? getFormattedDuration(event.measurements.fid.value) : '-'}
-                </td>
-                <td className="text-primary-200 w-[15%] whitespace-nowrap px-6 py-4 text-right text-sm font-medium">
-                  {event.measurements?.cls ? event.measurements.cls.value : '-'}
-                </td>
-                <td className="text-primary-200 w-[15%] whitespace-nowrap px-6 py-4 text-right text-sm font-medium">
-                  {event.measurements?.ttfb ? getFormattedDuration(event.measurements.ttfb.value) : '-'}
-                </td>
-                <td className="text-primary-200 w-[15%] whitespace-nowrap px-6 py-4 text-right text-sm font-medium">
-                  {event.measurements['score.total']?.value
-                    ? Math.trunc(event.measurements['score.total'].value * 100)
-                    : '-'}
-                </td>
-              </tr>
+                  {header.title}
+                  {sort.active === header.sortKey ? (
+                    <SortDown
+                      width={12}
+                      height={12}
+                      className={classNames(
+                        'fill-primary-300',
+                        sort.asc ? '-translate-y-0.5 rotate-0' : 'translate-y-0.5 rotate-180',
+                      )}
+                    />
+                  ) : (
+                    <Sort width={12} height={12} className="stroke-primary-300" />
+                  )}
+                </div>
+              </th>
             ))}
-          </tbody>
-        </table>
-      </>
-    );
-  }
-  return <p className="text-primary-300 px-6 py-4">No Measurements found.</p>;
+          </tr>
+        </thead>
+        <tbody>
+          {measurementEvents.map(event => (
+            <tr key={event.event_id} className="hover:bg-primary-900">
+              <td className="text-primary-200 w-2/5 truncate whitespace-nowrap px-6 py-4 text-left text-sm font-medium">
+                <Link className="truncate hover:underline" to={`/performance/webvitals/${event.event_id}`}>
+                  {event.transaction}
+                </Link>
+              </td>
+              <td className="text-primary-200 w-[15%] whitespace-nowrap px-6 py-4 text-right text-sm font-medium">
+                {event.measurements?.lcp ? getFormattedDuration(event.measurements.lcp.value) : '-'}
+              </td>
+              <td className="text-primary-200 w-[15%] whitespace-nowrap px-6 py-4 text-right text-sm font-medium">
+                {event.measurements?.fcp ? getFormattedDuration(event.measurements.fcp.value) : '-'}
+              </td>
+              <td className="text-primary-200 w-[15%] whitespace-nowrap px-6 py-4 text-right text-sm font-medium">
+                {event.measurements?.fid ? getFormattedDuration(event.measurements.fid.value) : '-'}
+              </td>
+              <td className="text-primary-200 w-[15%] whitespace-nowrap px-6 py-4 text-right text-sm font-medium">
+                {event.measurements?.cls ? event.measurements.cls.value : '-'}
+              </td>
+              <td className="text-primary-200 w-[15%] whitespace-nowrap px-6 py-4 text-right text-sm font-medium">
+                {event.measurements?.ttfb ? getFormattedDuration(event.measurements.ttfb.value) : '-'}
+              </td>
+              <td className="text-primary-200 w-[15%] whitespace-nowrap px-6 py-4 text-right text-sm font-medium">
+                {event.measurements['score.total']?.value
+                  ? Math.trunc(event.measurements['score.total'].value * 100)
+                  : '-'}
+              </td>
+            </tr>
+          ))}
+        </tbody>
+      </table>
+    </>
+  );
 };
 export default WebVitals;
diff --git a/packages/overlay/src/integrations/sentry/components/traces/TraceDetails.tsx b/packages/overlay/src/integrations/sentry/components/traces/TraceDetails.tsx
index d915e865..3454b016 100644
--- a/packages/overlay/src/integrations/sentry/components/traces/TraceDetails.tsx
+++ b/packages/overlay/src/integrations/sentry/components/traces/TraceDetails.tsx
@@ -72,14 +72,14 @@ export default function TraceDetails() {
           onChange={handleSearch}
           placeholder="Search in Trace"
         />
-        {query && (
+        {query ? (
           <CrossIcon
             onClick={handleResetSearch}
             className="fill-primary-50 absolute right-1 top-[5px] cursor-pointer"
             height={20}
             width={20}
           />
-        )}
+        ) : null}
       </div>
       <div className="flex-1 px-2 pb-6">
         <SpanTree
diff --git a/packages/overlay/src/integrations/sentry/components/traces/TraceIcon.tsx b/packages/overlay/src/integrations/sentry/components/traces/TraceIcon.tsx
index b3be0ef3..212a3dcb 100644
--- a/packages/overlay/src/integrations/sentry/components/traces/TraceIcon.tsx
+++ b/packages/overlay/src/integrations/sentry/components/traces/TraceIcon.tsx
@@ -17,23 +17,21 @@ export default function TraceIcon({ trace }: TraceIconProps) {
   }
   if (platformsInTrace.length === 1) {
     return <PlatformIcon className="rounded-md" platform={platformsInTrace[0]} />;
-  } else {
-    return (
-      <div className="bg-primary-900 flex h-[42px] w-[42px] flex-wrap items-center justify-center overflow-hidden rounded-md">
-        {platformsInTrace
-          .slice(0, 4)
-          .map((_platform, ind) =>
-            ind < 3 ? (
-              <PlatformIcon key={_platform} title={_platform} size={21} platform={_platform} />
-            ) : (
-              <div
-                key={(platformsInTrace.slice(3) || []).join(', ')}
-                title={(platformsInTrace.slice(3) || []).join(', ')}
-                className="h-[21px] w-[21px] bg-black p-0.5 text-xs font-bold text-white"
-              >{`+${platformsInTrace.length - 3}`}</div>
-            ),
-          )}
-      </div>
-    );
   }
+
+  const dominantPlatforms = platformsInTrace.slice(0, 3);
+  const remainingPlatforms = platformsInTrace.slice(3);
+  return (
+    <div className="bg-primary-900 flex h-[42px] w-[42px] flex-wrap items-center justify-center overflow-hidden rounded-md">
+      {dominantPlatforms.map(platform => (
+        <PlatformIcon key={platform} title={platform} size={21} platform={platform} />
+      ))}
+      {remainingPlatforms.length && (
+        <div
+          title={remainingPlatforms.join(', ')}
+          className="h-[21px] w-[21px] bg-black p-0.5 text-xs font-bold text-white"
+        >{`+${remainingPlatforms.length}`}</div>
+      )}
+    </div>
+  );
 }
diff --git a/packages/overlay/src/integrations/sentry/components/traces/spans/SpanDetails.tsx b/packages/overlay/src/integrations/sentry/components/traces/spans/SpanDetails.tsx
index 961b771e..86c06198 100644
--- a/packages/overlay/src/integrations/sentry/components/traces/spans/SpanDetails.tsx
+++ b/packages/overlay/src/integrations/sentry/components/traces/spans/SpanDetails.tsx
@@ -26,7 +26,7 @@ function formatValue(name: string, value: unknown): ReactNode {
     if (name.indexOf('size') !== -1 || name.indexOf('length') !== -1) return formatBytes(value);
     return value.toLocaleString();
   }
-  return value as ReactNode;
+  return `${value}` as ReactNode;
 }
 
 export default function SpanDetails({
@@ -91,7 +91,7 @@ export default function SpanDetails({
           </div>
         </div>
 
-        {!!errors.length && (
+        {errors.length && (
           <div className="flex flex-col items-start">
             <h2 className="mb-2 font-bold uppercase">Related Errors</h2>
             {errors.map(event => (
@@ -130,18 +130,16 @@ export default function SpanDetails({
           {span.tags && Object.keys(span.tags).length ? (
             <table className="w-full text-sm">
               <tbody>
-                {Object.entries(span.tags).map(([key, value]) => {
-                  return (
-                    <tr key={key} className="text-primary-300">
-                      <th className=" w-1/12 py-0.5 pr-4 text-left font-mono font-normal">
-                        <div className="w-full truncate">{key}</div>
-                      </th>
-                      <td className="py-0.5">
-                        <pre className="whitespace-nowrap font-mono">{JSON.stringify(value, undefined, 2)}</pre>
-                      </td>
-                    </tr>
-                  );
-                })}
+                {Object.entries(span.tags).map(([key, value]) => (
+                  <tr key={key} className="text-primary-300">
+                    <th className=" w-1/12 py-0.5 pr-4 text-left font-mono font-normal">
+                      <div className="w-full truncate">{key}</div>
+                    </th>
+                    <td className="py-0.5">
+                      <pre className="whitespace-nowrap font-mono">{JSON.stringify(value, undefined, 2)}</pre>
+                    </td>
+                  </tr>
+                ))}
               </tbody>
             </table>
           ) : (
@@ -159,7 +157,11 @@ export default function SpanDetails({
                 [
                   'parent',
                   span.parent_span_id ? (
-                    <Link className="underline" to={`/traces/${span.trace_id}/${span.parent_span_id}`}>
+                    <Link
+                      className="underline"
+                      to={`/traces/${span.trace_id}/${span.parent_span_id}`}
+                      key={`link-to-${span.parent_span_id}`}
+                    >
                       {span.parent_span_id}
                     </Link>
                   ) : (
@@ -167,18 +169,16 @@ export default function SpanDetails({
                   ),
                 ],
                 ['op', span.op],
-              ].map(([key, value]) => {
-                return (
-                  <tr key={key as string} className="text-primary-300">
-                    <th className=" w-1/12 py-0.5 pr-4 text-left font-mono font-normal">
-                      <div className="w-full truncate">{key}</div>
-                    </th>
-                    <td className="py-0.5">
-                      <pre className="whitespace-nowrap font-mono">{value}</pre>
-                    </td>
-                  </tr>
-                );
-              })}
+              ].map(([key, value]) => (
+                <tr key={key as string} className="text-primary-300">
+                  <th className=" w-1/12 py-0.5 pr-4 text-left font-mono font-normal">
+                    <div className="w-full truncate">{key}</div>
+                  </th>
+                  <td className="py-0.5">
+                    <pre className="whitespace-nowrap font-mono">{value}</pre>
+                  </td>
+                </tr>
+              ))}
             </tbody>
           </table>
         </div>
@@ -188,24 +188,22 @@ export default function SpanDetails({
             <h2 className="mb-2 font-bold uppercase">Data</h2>
             <table className="w-full text-sm">
               <tbody>
-                {Object.entries(span.data).map(([key, value]) => {
-                  return (
-                    <tr key={key} className="text-primary-300">
-                      <th className=" w-1/12 py-0.5 pr-4 text-left font-mono font-normal">
-                        <div className="w-full truncate">{key}</div>
-                      </th>
-                      <td className="py-0.5">
-                        <pre className="whitespace-nowrap font-mono">{formatValue(key, value)}</pre>
-                      </td>
-                    </tr>
-                  );
-                })}
+                {Object.entries(span.data).map(([key, value]) => (
+                  <tr key={key} className="text-primary-300">
+                    <th className=" w-1/12 py-0.5 pr-4 text-left font-mono font-normal">
+                      <div className="w-full truncate">{key}</div>
+                    </th>
+                    <td className="py-0.5">
+                      <pre className="whitespace-nowrap font-mono">{formatValue(key, value)}</pre>
+                    </td>
+                  </tr>
+                ))}
               </tbody>
             </table>
           </div>
         )}
 
-        {!!span.children?.length && (
+        {span.children?.length && (
           <div>
             <h2 className="mb-2 font-bold uppercase">Sub-tree</h2>
             <SpanTree
diff --git a/packages/overlay/src/integrations/sentry/components/traces/spans/SpanItem.tsx b/packages/overlay/src/integrations/sentry/components/traces/spans/SpanItem.tsx
index 4fa8af5e..8c03d8a8 100644
--- a/packages/overlay/src/integrations/sentry/components/traces/spans/SpanItem.tsx
+++ b/packages/overlay/src/integrations/sentry/components/traces/spans/SpanItem.tsx
@@ -2,7 +2,7 @@ import { useRef, useState } from 'react';
 import { Link, useParams } from 'react-router-dom';
 import { ReactComponent as ChevronIcon } from '~/assets/chevronDown.svg';
 import classNames from '../../../../../lib/classNames';
-import { Span, TraceContext } from '../../../types';
+import type { Span, TraceContext } from '../../../types';
 import { getDuration, getSpanDurationClassName } from '../../../utils/duration';
 import PlatformIcon from '../../PlatformIcon';
 import SpanResizer from '../../SpanResizer';
diff --git a/packages/overlay/src/integrations/sentry/components/traces/traceInfo/TraceGeneralInfo.tsx b/packages/overlay/src/integrations/sentry/components/traces/traceInfo/TraceGeneralInfo.tsx
index 2dd0fc9f..55ccdc50 100644
--- a/packages/overlay/src/integrations/sentry/components/traces/traceInfo/TraceGeneralInfo.tsx
+++ b/packages/overlay/src/integrations/sentry/components/traces/traceInfo/TraceGeneralInfo.tsx
@@ -1,4 +1,4 @@
-import { Trace } from '~/integrations/sentry/types';
+import type { Trace } from '~/integrations/sentry/types';
 import { getDuration } from '~/integrations/sentry/utils/duration';
 import DateTime from '../../DateTime';
 
@@ -20,18 +20,16 @@ export default function TraceGeneralInfo({ trace }: TraceGeneralInfoProps) {
             ['Errors', trace.errors || '-'],
             ['Start Timestamp', <DateTime date={trace.start_timestamp} /> || '-'],
             ['Total Duration', `${getDuration(trace.start_timestamp, trace.timestamp).toLocaleString()} ms`],
-          ].map(([key, value]) => {
-            return (
-              <tr key={key as string} className="text-primary-300">
-                <th className=" w-1/12 py-0.5 pr-4 text-left font-mono font-normal">
-                  <div className="w-full truncate">{key}</div>
-                </th>
-                <td className="py-0.5">
-                  <pre className="whitespace-nowrap font-mono">{value}</pre>
-                </td>
-              </tr>
-            );
-          })}
+          ].map(([key, value]) => (
+            <tr key={key as string} className="text-primary-300">
+              <th className=" w-1/12 py-0.5 pr-4 text-left font-mono font-normal">
+                <div className="w-full truncate">{key}</div>
+              </th>
+              <td className="py-0.5">
+                <pre className="whitespace-nowrap font-mono">{value}</pre>
+              </td>
+            </tr>
+          ))}
         </tbody>
       </table>
     </div>
diff --git a/packages/overlay/src/integrations/sentry/components/traces/traceInfo/TraceTags.tsx b/packages/overlay/src/integrations/sentry/components/traces/traceInfo/TraceTags.tsx
index 804893a4..d7571dfb 100644
--- a/packages/overlay/src/integrations/sentry/components/traces/traceInfo/TraceTags.tsx
+++ b/packages/overlay/src/integrations/sentry/components/traces/traceInfo/TraceTags.tsx
@@ -1,4 +1,4 @@
-import { Trace } from '~/integrations/sentry/types';
+import type { Trace } from '~/integrations/sentry/types';
 
 type TraceTagsProps = {
   trace: Trace;
@@ -8,7 +8,7 @@ export default function TraceTags({ trace }: TraceTagsProps) {
   const tags = trace.transactions
     .map(tsx => tsx.tags)
     .reduce((prev, current) => {
-      return { ...prev, ...current };
+      return Object.assign(prev!, current);
     }, {});
 
   return (
@@ -17,18 +17,16 @@ export default function TraceTags({ trace }: TraceTagsProps) {
       {tags && Object.keys(tags).length ? (
         <table className="w-full text-sm">
           <tbody>
-            {Object.entries(tags).map(([key, value]) => {
-              return (
-                <tr key={key} className="text-primary-300">
-                  <th className=" w-1/12 py-0.5 pr-4 text-left font-mono font-normal">
-                    <div className="w-full truncate">{key}</div>
-                  </th>
-                  <td className="py-0.5">
-                    <pre className="whitespace-nowrap font-mono">{JSON.stringify(value, undefined, 2)}</pre>
-                  </td>
-                </tr>
-              );
-            })}
+            {Object.entries(tags).map(([key, value]) => (
+              <tr key={key} className="text-primary-300">
+                <th className=" w-1/12 py-0.5 pr-4 text-left font-mono font-normal">
+                  <div className="w-full truncate">{key}</div>
+                </th>
+                <td className="py-0.5">
+                  <pre className="whitespace-nowrap font-mono">{JSON.stringify(value, undefined, 2)}</pre>
+                </td>
+              </tr>
+            ))}
           </tbody>
         </table>
       ) : (
diff --git a/packages/overlay/src/integrations/sentry/components/traces/traceInfo/index.tsx b/packages/overlay/src/integrations/sentry/components/traces/traceInfo/index.tsx
index 2835d10c..b85dd445 100644
--- a/packages/overlay/src/integrations/sentry/components/traces/traceInfo/index.tsx
+++ b/packages/overlay/src/integrations/sentry/components/traces/traceInfo/index.tsx
@@ -1,6 +1,6 @@
 import SidePanel, { SidePanelHeader } from '~/ui/SidePanel';
 import dataCache from '../../../data/sentryDataCache';
-import { TraceContext } from '../../../types';
+import type { TraceContext } from '../../../types';
 import TraceGeneralInfo from './TraceGeneralInfo';
 import TraceTags from './TraceTags';
 
diff --git a/packages/overlay/src/integrations/sentry/data/sentryEventsContext.tsx b/packages/overlay/src/integrations/sentry/data/sentryEventsContext.tsx
index 5c56a39f..5905b222 100644
--- a/packages/overlay/src/integrations/sentry/data/sentryEventsContext.tsx
+++ b/packages/overlay/src/integrations/sentry/data/sentryEventsContext.tsx
@@ -34,12 +34,9 @@ export const SentryEventsContextProvider: React.FC<{
   const [events, setEvents] = useReducer(eventReducer, sentryDataCache.getEvents());
 
   useEffect(() => {
-    const unsubscribe = sentryDataCache.subscribe('event', (e: SentryEvent) => {
+    return sentryDataCache.subscribe('event', (e: SentryEvent) => {
       setEvents({ action: 'APPEND', e });
     });
-    return () => {
-      unsubscribe();
-    };
   }, []);
 
   const contextValue: SentryEventsContextProps = {
diff --git a/packages/overlay/src/ui/Tooltip/Tooltip.tsx b/packages/overlay/src/ui/Tooltip/Tooltip.tsx
index 67606266..4aad2583 100644
--- a/packages/overlay/src/ui/Tooltip/Tooltip.tsx
+++ b/packages/overlay/src/ui/Tooltip/Tooltip.tsx
@@ -1,4 +1,4 @@
-import { ReactNode, useState } from 'react';
+import { type ReactNode, useState } from 'react';
 import classNames from '~/lib/classNames';
 
 const getPositionClass = (position: string) => {