diff --git a/frontend/app/components/Client/Audit/AuditView/AuditView.tsx b/frontend/app/components/Client/Audit/AuditView/AuditView.tsx
index b93c26d08..df30e64ff 100644
--- a/frontend/app/components/Client/Audit/AuditView/AuditView.tsx
+++ b/frontend/app/components/Client/Audit/AuditView/AuditView.tsx
@@ -46,7 +46,7 @@ function AuditView(props) {
                             ]}
                             defaultValue={order}
                             plain
-                            onChange={({ value }) => auditStore.updateKey('order', value)}
+                            onChange={({ value }) => auditStore.updateKey('order', value.value)}
                         />
                     </div>
                     <AuditSearchField onChange={(value) => auditStore.updateKey('searchQuery', value) }/>
diff --git a/frontend/app/components/Session_/Player/Controls/components/ReadNote.tsx b/frontend/app/components/Session_/Player/Controls/components/ReadNote.tsx
index edc58aa9f..7a9f54bcf 100644
--- a/frontend/app/components/Session_/Player/Controls/components/ReadNote.tsx
+++ b/frontend/app/components/Session_/Player/Controls/components/ReadNote.tsx
@@ -67,7 +67,7 @@ function ReadNote(props: Props) {
             <Icon name="close" size={18} />
           </div>
         </div>
-        <div className="text-xl py-3 overflow-y-scroll capitalize-first" style={{ maxHeight: 400 }}>
+        <div className="text-xl py-3 overflow-y-auto capitalize-first" style={{ maxHeight: 400 }}>
           {props.note.message}
         </div>
         <div className="w-full">
diff --git a/frontend/app/components/Session_/Player/Overlay/AutoplayTimer.tsx b/frontend/app/components/Session_/Player/Overlay/AutoplayTimer.tsx
index 83d993e6b..fc292e737 100644
--- a/frontend/app/components/Session_/Player/Overlay/AutoplayTimer.tsx
+++ b/frontend/app/components/Session_/Player/Overlay/AutoplayTimer.tsx
@@ -2,7 +2,7 @@ import React, { useEffect, useState } from 'react';
 import cn from 'classnames';
 import { connect } from 'react-redux';
 import { withRouter, RouteComponentProps } from 'react-router-dom';
-import { Button, Link } from 'UI';
+import { Button, Link, Icon } from 'UI';
 import { session as sessionRoute, withSiteId } from 'App/routes';
 import stl from './AutoplayTimer.module.css';
 import clsOv from './overlay.module.css';
@@ -51,7 +51,9 @@ function AutoplayTimer({ nextId, siteId, history }: IProps) {
             <Button variant="primary">Play Now</Button>
           </Link>
         </div>
-        <div className="mt-2 italic">Turn on/off auto-replay in: More options</div>
+        <div className="mt-2 flex items-center">
+          <span className="color-gray-medium">Turn on/off auto-replay in <Icon name="ellipsis-v" className="mx-2" /> More options</span>
+        </div>
       </div>
     </div>
   );
diff --git a/frontend/app/components/Session_/components/HeaderMenu.tsx b/frontend/app/components/Session_/components/HeaderMenu.tsx
index 08c875f96..003ca5ab3 100644
--- a/frontend/app/components/Session_/components/HeaderMenu.tsx
+++ b/frontend/app/components/Session_/components/HeaderMenu.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { Icon } from 'UI';
+import { Icon, Button } from 'UI';
 import styles from './menu.module.css';
 import cn from 'classnames';
 import OutsideClickDetectingDiv from 'Shared/OutsideClickDetectingDiv';
@@ -32,8 +32,8 @@ export default class ItemMenu extends React.PureComponent<Props> {
   };
 
   closeMenu = () => {
-    this.setState({ displayed: false })
-  }
+    this.setState({ displayed: false });
+  };
 
   render() {
     const { items } = this.props;
@@ -42,36 +42,22 @@ export default class ItemMenu extends React.PureComponent<Props> {
     return (
       <div className={styles.wrapper}>
         <OutsideClickDetectingDiv onClickOutside={this.closeMenu}>
-        <div
-          onClick={this.toggleMenu}
-          className={cn(
-            'flex items-center cursor-pointer select-none',
-            'rounded p-2', displayed ? 'bg-gray-light' : 'hover:bg-gray-light-shade'
-          )}
-        >
-          <div
-            className={cn('rounded-full flex items-center justify-center', {
-              'bg-gray-light': displayed,
-            })}
-            role="button"
-          >
-            <Icon name="ellipsis-v" size="16" />
+          <Button variant="text" icon="ellipsis-v" onClick={this.toggleMenu}>
+            More
+          </Button>
+          <div className={cn(styles.menu, styles.menuDim)} data-displayed={displayed}>
+            {items.map((item) =>
+              item.component ? (
+                <div
+                  key={item.key}
+                  role="menuitem"
+                  className="hover:bg-gray-light-shade cursor-pointer flex items-center w-full"
+                >
+                  {item.component}
+                </div>
+              ) : null
+            )}
           </div>
-          <span className={'mr-1 text-disabled-text'}>More</span>
-        </div>
-        <div className={cn(styles.menu, styles.menuDim)} data-displayed={displayed}>
-          {items.map((item) =>
-            item.component ? (
-              <div
-                key={item.key}
-                role="menuitem"
-                className="hover:bg-gray-light-shade cursor-pointer flex items-center w-full"
-              >
-                {item.component}
-              </div>
-            ) : null
-          )}
-        </div>
         </OutsideClickDetectingDiv>
       </div>
     );
diff --git a/frontend/app/components/shared/DevTools/ConsolePanel/ConsolePanel.tsx b/frontend/app/components/shared/DevTools/ConsolePanel/ConsolePanel.tsx
index 38714b92d..c9f040c50 100644
--- a/frontend/app/components/shared/DevTools/ConsolePanel/ConsolePanel.tsx
+++ b/frontend/app/components/shared/DevTools/ConsolePanel/ConsolePanel.tsx
@@ -72,14 +72,13 @@ function ConsolePanel(props: Props) {
   const {
     sessionStore: { devTools },
   } = useStore();
-  const [isDetailsModalActive, setIsDetailsModalActive] = useState(false);
   const [filteredList, setFilteredList] = useState([]);
   const filter = useObserver(() => devTools[INDEX_KEY].filter);
   const activeTab = useObserver(() => devTools[INDEX_KEY].activeTab);
   const activeIndex = useObserver(() => devTools[INDEX_KEY].index);
   const [pauseSync, setPauseSync] = useState(activeIndex > 0);
   const synRef: any = useRef({});
-  const { showModal } = useModal();
+  const { showModal, component: modalActive } = useModal();
 
   const onTabClick = (activeTab: any) => devTools.update(INDEX_KEY, { activeTab });
   const onFilterChange = ({ target: { value } }: any) => {
@@ -92,7 +91,7 @@ function ConsolePanel(props: Props) {
   };
 
   const removePause = () => {
-    setIsDetailsModalActive(false);
+    if (!!modalActive) return;
     clearTimeout(timeOut);
     timeOut = setTimeout(() => {
       devTools.update(INDEX_KEY, { index: getCurrentIndex() });
@@ -101,7 +100,6 @@ function ConsolePanel(props: Props) {
   };
 
   const onMouseLeave = () => {
-    if (isDetailsModalActive) return;
     removePause();
   };
 
@@ -136,7 +134,7 @@ function ConsolePanel(props: Props) {
   const _list = React.useRef();
 
   const showDetails = (log: any) => {
-    setIsDetailsModalActive(true);
+    clearTimeout(timeOut);
     showModal(<ErrorDetailsModal errorId={log.errorId} />, { right: true, onClose: removePause });
     devTools.update(INDEX_KEY, { index: filteredList.indexOf(log) });
     setPauseSync(true);
diff --git a/frontend/app/components/shared/DevTools/NetworkPanel/NetworkPanel.tsx b/frontend/app/components/shared/DevTools/NetworkPanel/NetworkPanel.tsx
index 634aa9bae..4a7e71ea2 100644
--- a/frontend/app/components/shared/DevTools/NetworkPanel/NetworkPanel.tsx
+++ b/frontend/app/components/shared/DevTools/NetworkPanel/NetworkPanel.tsx
@@ -140,11 +140,9 @@ interface Props {
 }
 function NetworkPanel(props: Props) {
   const { resources, time, domContentLoadedTime, loadTime, domBuildingTime, fetchList } = props;
-  const { showModal } = useModal();
-
+  const { showModal, component: modalActive } = useModal();
   const [filteredList, setFilteredList] = useState([]);
   const [showOnlyErrors, setShowOnlyErrors] = useState(false);
-  const [isDetailsModalActive, setIsDetailsModalActive] = useState(false);
   const additionalHeight = 0;
   const fetchPresented = fetchList.length > 0;
   const {
@@ -169,7 +167,7 @@ function NetworkPanel(props: Props) {
   };
 
   const removePause = () => {
-    setIsDetailsModalActive(false);
+    if (!!modalActive) return;
     clearTimeout(timeOut);
     timeOut = setTimeout(() => {
       devTools.update(INDEX_KEY, { index: getCurrentIndex() });
@@ -178,7 +176,7 @@ function NetworkPanel(props: Props) {
   };
 
   const onMouseLeave = () => {
-    if (isDetailsModalActive) return;
+    if (!!modalActive) return;
     removePause();
   };
 
@@ -261,7 +259,8 @@ function NetworkPanel(props: Props) {
   }, []);
 
   const showDetailsModal = (row: any) => {
-    setIsDetailsModalActive(true);
+    clearTimeout(timeOut);
+    setPauseSync(true);
     showModal(
       <FetchDetailsModal resource={row} rows={filteredList} fetchPresented={fetchPresented} />,
       {
@@ -270,7 +269,6 @@ function NetworkPanel(props: Props) {
       }
     );
     devTools.update(INDEX_KEY, { index: filteredList.indexOf(row) });
-    setPauseSync(true);
   };
 
   useEffect(() => {
diff --git a/frontend/app/components/shared/DevTools/StackEventPanel/StackEventPanel.tsx b/frontend/app/components/shared/DevTools/StackEventPanel/StackEventPanel.tsx
index 557c72172..d16122fb3 100644
--- a/frontend/app/components/shared/DevTools/StackEventPanel/StackEventPanel.tsx
+++ b/frontend/app/components/shared/DevTools/StackEventPanel/StackEventPanel.tsx
@@ -1,6 +1,6 @@
 import React, { useEffect, useMemo, useRef, useState } from 'react';
 import { hideHint } from 'Duck/components/player';
-import { Tooltip, Tabs, Input, NoContent, Icon, Toggler } from 'UI';
+import { Tabs, Input, NoContent, Icon } from 'UI';
 import { getRE } from 'App/utils';
 import { List, CellMeasurer, CellMeasurerCache, AutoSizer } from 'react-virtualized';
 
@@ -31,8 +31,7 @@ function StackEventPanel(props: Props) {
   const {
     sessionStore: { devTools },
   } = useStore();
-  const { showModal } = useModal();
-  const [isDetailsModalActive, setIsDetailsModalActive] = useState(false);
+  const { showModal, component: modalActive } = useModal();
   const [filteredList, setFilteredList] = useState([]);
   const filter = useObserver(() => devTools[INDEX_KEY].filter);
   const activeTab = useObserver(() => devTools[INDEX_KEY].activeTab);
@@ -55,8 +54,8 @@ function StackEventPanel(props: Props) {
   };
 
   const removePause = () => {
+    if (!!modalActive) return;
     clearTimeout(timeOut);
-    setIsDetailsModalActive(false);
     timeOut = setTimeout(() => {
       devTools.update(INDEX_KEY, { index: getCurrentIndex() });
       setPauseSync(false);
@@ -71,7 +70,6 @@ function StackEventPanel(props: Props) {
   }, [time]);
 
   const onMouseLeave = () => {
-    if (isDetailsModalActive) return;
     removePause();
   };
 
@@ -97,7 +95,7 @@ function StackEventPanel(props: Props) {
   });
 
   const showDetails = (item: any) => {
-    setIsDetailsModalActive(true);
+    clearTimeout(timeOut);
     showModal(<StackEventModal event={item} />, { right: true, onClose: removePause });
     devTools.update(INDEX_KEY, { index: filteredList.indexOf(item) });
     setPauseSync(true);
diff --git a/frontend/app/svg/icons/quotes.svg b/frontend/app/svg/icons/quotes.svg
index 252b3b50f..5989049be 100644
--- a/frontend/app/svg/icons/quotes.svg
+++ b/frontend/app/svg/icons/quotes.svg
@@ -1,3 +1,3 @@
-<svg viewBox="0 0 29 19" fill="none" xmlns="http://www.w3.org/2000/svg">
+<svg viewBox="0 0 29 19" xmlns="http://www.w3.org/2000/svg">
 <path opacity="0.7" d="M11.6355 2.9045C10.8963 1.75328 9.80334 0.873101 8.521 0.396241C7.23867 -0.0806184 5.83621 -0.128393 4.5244 0.260101C3.21259 0.648595 2.06231 1.45237 1.24645 2.55061C0.430585 3.64885 -0.00678382 4.98223 7.95597e-05 6.35034C0.00076002 7.48328 0.305669 8.59524 0.882952 9.57006C1.46024 10.5449 2.28871 11.3468 3.28182 11.892C4.27493 12.4372 5.39624 12.7058 6.52859 12.6695C7.66095 12.6333 8.76279 12.2937 9.71903 11.6861C9.22188 13.1623 8.29591 14.7372 6.77033 16.316C6.47844 16.6179 6.31846 17.0234 6.32558 17.4433C6.3327 17.8632 6.50633 18.2631 6.80828 18.555C7.11022 18.8469 7.51575 19.0069 7.93566 18.9997C8.35556 18.9926 8.75543 18.819 9.04731 18.517C14.6867 12.6728 13.9542 6.31998 11.6355 2.91209V2.9045ZM26.8154 2.9045C26.0762 1.75328 24.9833 0.873101 23.7009 0.396241C22.4186 -0.0806184 21.0161 -0.128393 19.7043 0.260101C18.3925 0.648595 17.2422 1.45237 16.4264 2.55061C15.6105 3.64885 15.1731 4.98223 15.18 6.35034C15.1807 7.48328 15.4856 8.59524 16.0629 9.57006C16.6402 10.5449 17.4686 11.3468 18.4617 11.892C19.4549 12.4372 20.5762 12.7058 21.7085 12.6695C22.8409 12.6333 23.9427 12.2937 24.899 11.6861C24.4018 13.1623 23.4758 14.7372 21.9503 16.316C21.6584 16.6179 21.4984 17.0234 21.5055 17.4433C21.5126 17.8632 21.6863 18.2631 21.9882 18.555C22.2901 18.8469 22.6957 19.0069 23.1156 18.9997C23.5355 18.9926 23.9354 18.819 24.2272 18.517C29.8666 12.6728 29.1342 6.31998 26.8154 2.91209V2.9045Z" />
 </svg>