diff --git a/frontend/app/components/shared/DevTools/NetworkPanel/NetworkPanel.tsx b/frontend/app/components/shared/DevTools/NetworkPanel/NetworkPanel.tsx
index 241d449ff..0e634e02c 100644
--- a/frontend/app/components/shared/DevTools/NetworkPanel/NetworkPanel.tsx
+++ b/frontend/app/components/shared/DevTools/NetworkPanel/NetworkPanel.tsx
@@ -15,6 +15,7 @@ import { Duration } from 'luxon';
 import { connectPlayer, jump, pause } from 'Player';
 import { useModal } from 'App/components/Modal';
 import FetchDetailsModal from 'Shared/FetchDetailsModal';
+import { sort } from 'App/duck/sessions';
 
 const ALL = 'ALL';
 const XHR = 'xhr';
@@ -33,7 +34,7 @@ const TAB_TO_TYPE_MAP: any = {
   [OTHER]: TYPES.OTHER,
 };
 const TABS: any = [ALL, XHR, JS, CSS, IMG, MEDIA, OTHER].map((tab) => ({
-  text: tab,
+  text: tab === 'xhr' ? 'XHR (Fetch)' : tab,
   key: tab,
 }));
 
@@ -46,7 +47,7 @@ function compare(a: any, b: any, key: string) {
   return 0;
 }
 
-export function renderType(r) {
+export function renderType(r: any) {
   return (
     <Popup style={{ width: '100%' }} content={<div>{r.type}</div>}>
       <div>{r.type}</div>
@@ -181,6 +182,7 @@ function NetworkPanel(props: Props) {
   const { showModal, hideModal } = useModal();
   const [activeTab, setActiveTab] = useState(ALL);
   const [sortBy, setSortBy] = useState('time');
+  const [sortAscending, setSortAscending] = useState(true);
   const [filter, setFilter] = useState('');
   const [showOnlyErrors, setShowOnlyErrors] = useState(false);
   const onTabClick = (activeTab: any) => setActiveTab(activeTab);
@@ -200,22 +202,29 @@ function NetworkPanel(props: Props) {
   );
 
   const filterRE = getRE(filter, 'i');
-  let filtered = resources;
-  fetchList.forEach(
-    (fetchCall: any) =>
-      (filtered = filtered.filter((networkCall: any) => networkCall.url !== fetchCall.url))
-  );
-  filtered = filtered.concat(fetchList);
-  filtered = filtered.sort((a: any, b: any) => {
-    return compare(a, b, sortBy);
-  });
+  let filtered = React.useMemo(() => {
+    let list = resources;
+    fetchList.forEach(
+      (fetchCall: any) =>
+        (list = list.filter((networkCall: any) => networkCall.url !== fetchCall.url))
+    );
+    list = list.concat(fetchList);
+    list = list.sort((a: any, b: any) => {
+      return compare(a, b, sortBy);
+    });
 
-  filtered = filtered.filter(
-    ({ type, name, status }: any) =>
-      (!!filter ? filterRE.test(status) || filterRE.test(name) || filterRE.test(type) : true) &&
-      (activeTab === ALL || type === TAB_TO_TYPE_MAP[activeTab]) &&
-      (showOnlyErrors ? parseInt(status) >= 400 : true)
-  );
+    if (!sortAscending) {
+      list = list.reverse();
+    }
+
+    list = list.filter(
+      ({ type, name, status }: any) =>
+        (!!filter ? filterRE.test(status) || filterRE.test(name) || filterRE.test(type) : true) &&
+        (activeTab === ALL || type === TAB_TO_TYPE_MAP[activeTab]) &&
+        (showOnlyErrors ? parseInt(status) >= 400 : true)
+    );
+    return list;
+  }, [filter, sortBy, sortAscending, showOnlyErrors, activeTab]);
 
   // const lastIndex = currentIndex || filtered.filter((item: any) => item.time <= time).length - 1;
   const referenceLines = [];
@@ -240,10 +249,10 @@ function NetworkPanel(props: Props) {
 
   const handleSort = (sortKey: string) => {
     if (sortKey === sortBy) {
-      setSortBy('time');
-    } else {
-      setSortBy(sortKey);
+      setSortAscending(!sortAscending);
+      // setSortBy('time');
     }
+    setSortBy(sortKey);
   };
 
   return (
@@ -330,6 +339,7 @@ function NetworkPanel(props: Props) {
               additionalHeight={additionalHeight}
               onJump={jump}
               sortBy={sortBy}
+              sortAscending={sortAscending}
               // activeIndex={lastIndex}
             >
               {[
diff --git a/frontend/app/components/shared/DevTools/TimeTable/TimeTable.tsx b/frontend/app/components/shared/DevTools/TimeTable/TimeTable.tsx
index a0af1c906..921d3557d 100644
--- a/frontend/app/components/shared/DevTools/TimeTable/TimeTable.tsx
+++ b/frontend/app/components/shared/DevTools/TimeTable/TimeTable.tsx
@@ -71,7 +71,8 @@ type Props = {
   hoverable?: boolean;
   onRowClick?: (row: any, index: number) => void;
   onJump?: (time: any) => void;
-  sortBy?: string
+  sortBy?: string;
+  sortAscending?: boolean;
 };
 
 type TimeLineInfo = {
@@ -262,10 +263,10 @@ export default class TimeTable extends React.PureComponent<Props, State> {
   onColumnClick = (dataKey: string, onClick: any) => {
     if (typeof onClick === 'function') {
       // this.scroller.current.scrollToRow(0);
-      onClick(dataKey)
+      onClick(dataKey);
       this.scroller.current.forceUpdateGrid();
     }
-  }
+  };
 
   render() {
     const {
@@ -277,6 +278,7 @@ export default class TimeTable extends React.PureComponent<Props, State> {
       additionalHeight = 0,
       activeIndex,
       sortBy = '',
+      sortAscending = true,
     } = this.props;
     const { timewidth, timestart } = this.state;
 
@@ -324,14 +326,14 @@ export default class TimeTable extends React.PureComponent<Props, State> {
           <div className={stl.infoHeaders}>
             {columns.map(({ label, width, dataKey, onClick = null }) => (
               <div
-                className={cn(stl.headerCell, 'flex items-center',  { 'cursor-pointer': typeof onClick === 'function' })}
+                className={cn(stl.headerCell, 'flex items-center select-none', {
+                  'cursor-pointer': typeof onClick === 'function',
+                })}
                 style={{ width: `${width}px` }}
                 onClick={() => this.onColumnClick(dataKey, onClick)}
               >
                 <span>{label}</span>
-                {!!sortBy && sortBy === dataKey && (
-                  <Icon name="caret-down-fill" className="ml-1" />
-                )}
+                {!!sortBy && sortBy === dataKey && <Icon name={ sortAscending ? "caret-down-fill" : "caret-up-fill" } className="ml-1" />}
               </div>
             ))}
           </div>
diff --git a/frontend/app/components/ui/SVG.tsx b/frontend/app/components/ui/SVG.tsx
index b12dd305b..2ce71aba7 100644
--- a/frontend/app/components/ui/SVG.tsx
+++ b/frontend/app/components/ui/SVG.tsx
@@ -97,7 +97,7 @@ const SVG = (props: Props) => {
     case 'caret-down-fill': return <svg viewBox="0 0 16 16" width={ `${ width }px` } height={ `${ height }px` } ><path d="M7.247 11.14 2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z"/></svg>;
     case 'caret-left-fill': return <svg viewBox="0 0 16 16" width={ `${ width }px` } height={ `${ height }px` } ><path d="m3.86 8.753 5.482 4.796c.646.566 1.658.106 1.658-.753V3.204a1 1 0 0 0-1.659-.753l-5.48 4.796a1 1 0 0 0 0 1.506z"/></svg>;
     case 'caret-right-fill': return <svg viewBox="0 0 16 16" width={ `${ width }px` } height={ `${ height }px` } ><path d="m12.14 8.753-5.482 4.796c-.646.566-1.658.106-1.658-.753V3.204a1 1 0 0 1 1.659-.753l5.48 4.796a1 1 0 0 1 0 1.506z"/></svg>;
-    case 'caret-up-fill': return <svg viewBox="0 0 320 512" width={ `${ width }px` } height={ `${ height }px` } ><path d="M288.662 352H31.338c-17.818 0-26.741-21.543-14.142-34.142l128.662-128.662c7.81-7.81 20.474-7.81 28.284 0l128.662 128.662c12.6 12.599 3.676 34.142-14.142 34.142z"/></svg>;
+    case 'caret-up-fill': return <svg viewBox="0 0 16 16" width={ `${ width }px` } height={ `${ height }px` } ><path d="m7.247 4.86-4.796 5.481c-.566.647-.106 1.659.753 1.659h9.592a1 1 0 0 0 .753-1.659l-4.796-5.48a1 1 0 0 0-1.506 0z"/></svg>;
     case 'chat-dots': return <svg viewBox="0 0 16 16" width={ `${ width }px` } height={ `${ height }px` } ><path d="M5 8a1 1 0 1 1-2 0 1 1 0 0 1 2 0zm4 0a1 1 0 1 1-2 0 1 1 0 0 1 2 0zm3 1a1 1 0 1 0 0-2 1 1 0 0 0 0 2z"/><path d="m2.165 15.803.02-.004c1.83-.363 2.948-.842 3.468-1.105A9.06 9.06 0 0 0 8 15c4.418 0 8-3.134 8-7s-3.582-7-8-7-8 3.134-8 7c0 1.76.743 3.37 1.97 4.6a10.437 10.437 0 0 1-.524 2.318l-.003.011a10.722 10.722 0 0 1-.244.637c-.079.186.074.394.273.362a21.673 21.673 0 0 0 .693-.125zm.8-3.108a1 1 0 0 0-.287-.801C1.618 10.83 1 9.468 1 8c0-3.192 3.004-6 7-6s7 2.808 7 6c0 3.193-3.004 6-7 6a8.06 8.06 0 0 1-2.088-.272 1 1 0 0 0-.711.074c-.387.196-1.24.57-2.634.893a10.97 10.97 0 0 0 .398-2z"/></svg>;
     case 'chat-right-text': return <svg viewBox="0 0 16 16" width={ `${ width }px` } height={ `${ height }px` } ><path d="M2 1a1 1 0 0 0-1 1v8a1 1 0 0 0 1 1h9.586a2 2 0 0 1 1.414.586l2 2V2a1 1 0 0 0-1-1H2zm12-1a2 2 0 0 1 2 2v12.793a.5.5 0 0 1-.854.353l-2.853-2.853a1 1 0 0 0-.707-.293H2a2 2 0 0 1-2-2V2a2 2 0 0 1 2-2h12z"/><path d="M3 3.5a.5.5 0 0 1 .5-.5h9a.5.5 0 0 1 0 1h-9a.5.5 0 0 1-.5-.5zM3 6a.5.5 0 0 1 .5-.5h9a.5.5 0 0 1 0 1h-9A.5.5 0 0 1 3 6zm0 2.5a.5.5 0 0 1 .5-.5h5a.5.5 0 0 1 0 1h-5a.5.5 0 0 1-.5-.5z"/></svg>;
     case 'chat-square-quote': return <svg viewBox="0 0 16 16" width={ `${ width }px` } height={ `${ height }px` } ><path d="M14 1a1 1 0 0 1 1 1v8a1 1 0 0 1-1 1h-2.5a2 2 0 0 0-1.6.8L8 14.333 6.1 11.8a2 2 0 0 0-1.6-.8H2a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1h12zM2 0a2 2 0 0 0-2 2v8a2 2 0 0 0 2 2h2.5a1 1 0 0 1 .8.4l1.9 2.533a1 1 0 0 0 1.6 0l1.9-2.533a1 1 0 0 1 .8-.4H14a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2H2z"/><path d="M7.066 4.76A1.665 1.665 0 0 0 4 5.668a1.667 1.667 0 0 0 2.561 1.406c-.131.389-.375.804-.777 1.22a.417.417 0 1 0 .6.58c1.486-1.54 1.293-3.214.682-4.112zm4 0A1.665 1.665 0 0 0 8 5.668a1.667 1.667 0 0 0 2.561 1.406c-.131.389-.375.804-.777 1.22a.417.417 0 1 0 .6.58c1.486-1.54 1.293-3.214.682-4.112z"/></svg>;
diff --git a/frontend/app/svg/icons/caret-down-fill.svg b/frontend/app/svg/icons/caret-down-fill.svg
index 12557a66e..e0fd6b7aa 100644
--- a/frontend/app/svg/icons/caret-down-fill.svg
+++ b/frontend/app/svg/icons/caret-down-fill.svg
@@ -1,3 +1,3 @@
-<svg xmlns="http://www.w3.org/2000/svg" class="bi bi-caret-down-fill" viewBox="0 0 16 16">
+<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" class="bi bi-caret-down-fill" viewBox="0 0 16 16">
   <path d="M7.247 11.14 2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z"/>
 </svg>
\ No newline at end of file
diff --git a/frontend/app/svg/icons/caret-up-fill.svg b/frontend/app/svg/icons/caret-up-fill.svg
index b4c7e5485..3270a7ffa 100644
--- a/frontend/app/svg/icons/caret-up-fill.svg
+++ b/frontend/app/svg/icons/caret-up-fill.svg
@@ -1 +1,3 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512"><path d="M288.662 352H31.338c-17.818 0-26.741-21.543-14.142-34.142l128.662-128.662c7.81-7.81 20.474-7.81 28.284 0l128.662 128.662c12.6 12.599 3.676 34.142-14.142 34.142z"/></svg>
\ No newline at end of file
+<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" class="bi bi-caret-up-fill" viewBox="0 0 16 16">
+  <path d="m7.247 4.86-4.796 5.481c-.566.647-.106 1.659.753 1.659h9.592a1 1 0 0 0 .753-1.659l-4.796-5.48a1 1 0 0 0-1.506 0z"/>
+</svg>
\ No newline at end of file