diff --git a/.changeset/warm-bags-lick.md b/.changeset/warm-bags-lick.md
new file mode 100644
index 00000000..1b4a4650
--- /dev/null
+++ b/.changeset/warm-bags-lick.md
@@ -0,0 +1,5 @@
+---
+'@hyperdx/app': patch
+---
+
+Set up ESLint rule for sorting imports
diff --git a/.vscode/settings.json b/.vscode/settings.json
index 0c1bb29f..0f0a25c2 100644
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@@ -1,5 +1,8 @@
 {
   "editor.formatOnSave": true,
+  "editor.codeActionsOnSave": {
+    "source.fixAll": true
+  },
   "[typescript]": {
     "editor.defaultFormatter": "esbenp.prettier-vscode"
   },
diff --git a/packages/app/.eslintrc.js b/packages/app/.eslintrc.js
index 8d229dc6..28aaf009 100644
--- a/packages/app/.eslintrc.js
+++ b/packages/app/.eslintrc.js
@@ -1,7 +1,7 @@
 module.exports = {
   root: true,
   parser: '@typescript-eslint/parser',
-  plugins: ['@typescript-eslint', 'prettier'],
+  plugins: ['simple-import-sort', '@typescript-eslint', 'prettier'],
   parserOptions: {
     tsconfigRootDir: __dirname,
     project: ['./tsconfig.json'],
@@ -20,5 +20,26 @@ module.exports = {
     'react/display-name': 'off',
     '@typescript-eslint/no-explicit-any': 'off',
     '@typescript-eslint/no-empty-function': 'off',
+    'simple-import-sort/imports': 'error',
+    'simple-import-sort/exports': 'error',
   },
+  overrides: [
+    {
+      files: ['**/*.js', '**/*.ts', '**/*.tsx'],
+      rules: {
+        'simple-import-sort/imports': [
+          'error',
+          {
+            groups: [
+              ['^react$', '^next', '^[a-z]', '^@'],
+              ['^\\.\\.(?!/?$)', '^\\.\\./?$'],
+              ['^\\./(?=.*/)(?!/?$)', '^\\.(?!/?$)', '^\\./?$'],
+              ['^.+\\.s?css$'],
+              ['^\\u0000'],
+            ],
+          },
+        ],
+      },
+    },
+  ],
 };
diff --git a/packages/app/package.json b/packages/app/package.json
index c13830f8..5e9085ed 100644
--- a/packages/app/package.json
+++ b/packages/app/package.json
@@ -110,6 +110,7 @@
     "eslint-config-next": "^12.3.3",
     "eslint-config-prettier": "^8.6.0",
     "eslint-plugin-prettier": "^4.2.1",
+    "eslint-plugin-simple-import-sort": "^10.0.0",
     "jest": "^28.1.3",
     "ts-jest": "^28.0.7",
     "typescript": "^4.9.5"
diff --git a/packages/app/pages/_app.tsx b/packages/app/pages/_app.tsx
index 9f5c7e8e..a93af287 100644
--- a/packages/app/pages/_app.tsx
+++ b/packages/app/pages/_app.tsx
@@ -1,26 +1,24 @@
-import Head from 'next/head';
 import React, { useEffect } from 'react';
-import SSRProvider from 'react-bootstrap/SSRProvider';
 import type { AppProps } from 'next/app';
+import Head from 'next/head';
+import { NextAdapter } from 'next-query-params';
+import SSRProvider from 'react-bootstrap/SSRProvider';
 import { QueryClient, QueryClientProvider } from 'react-query';
 import { ReactQueryDevtools } from 'react-query/devtools';
 import { ToastContainer } from 'react-toastify';
-import { NextAdapter } from 'next-query-params';
 import { QueryParamProvider } from 'use-query-params';
-import { useConfirmModal } from '../src/useConfirm';
 
 import * as config from '../src/config';
+import { useConfirmModal } from '../src/useConfirm';
 import { QueryParamProvider as HDXQueryParamProvider } from '../src/useQueryParam';
 import { UserPreferencesProvider } from '../src/useUserPreferences';
 
 import 'react-toastify/dist/ReactToastify.css';
-
 import '../styles/globals.css';
 import '../styles/app.scss';
 import '../src/LandingPage.scss';
 
 const queryClient = new QueryClient();
-
 import HyperDX from '@hyperdx/browser';
 
 export default function MyApp({ Component, pageProps }: AppProps) {
diff --git a/packages/app/setup-jest.ts b/packages/app/setup-jest.ts
index 02fbfdb8..d94902df 100644
--- a/packages/app/setup-jest.ts
+++ b/packages/app/setup-jest.ts
@@ -1,4 +1,5 @@
-import '@testing-library/jest-dom';
 import setup from '@deploysentinel/jest-rtl-debugger/setup';
 
+import '@testing-library/jest-dom';
+
 setup();
diff --git a/packages/app/src/Alert.tsx b/packages/app/src/Alert.tsx
index 7ec91067..7e87d170 100644
--- a/packages/app/src/Alert.tsx
+++ b/packages/app/src/Alert.tsx
@@ -1,7 +1,8 @@
 import { sub } from 'date-fns';
 import { Form, FormSelectProps } from 'react-bootstrap';
+
 import api from './api';
-import type { AlertInterval, AlertChannelType } from './types';
+import type { AlertChannelType, AlertInterval } from './types';
 
 export function intervalToGranularity(interval: AlertInterval) {
   if (interval === '1m') return '1 minute' as const;
diff --git a/packages/app/src/AppNav.tsx b/packages/app/src/AppNav.tsx
index d04efe53..9aef55e2 100644
--- a/packages/app/src/AppNav.tsx
+++ b/packages/app/src/AppNav.tsx
@@ -1,7 +1,9 @@
+import { useEffect, useState } from 'react';
 import Link from 'next/link';
-import cx from 'classnames';
-import { useQueryClient } from 'react-query';
 import Router, { useRouter } from 'next/router';
+import cx from 'classnames';
+import { Button } from 'react-bootstrap';
+import { useQueryClient } from 'react-query';
 import {
   NumberParam,
   StringParam,
@@ -10,15 +12,13 @@ import {
   withDefault,
 } from 'use-query-params';
 import HyperDX from '@hyperdx/browser';
-import { useEffect, useState } from 'react';
 
 import api from './api';
-import Logo from './Logo';
-import { API_SERVER_URL } from './config';
-import { useWindowSize } from './utils';
-import { Button } from 'react-bootstrap';
-import Icon from './Icon';
 import AuthLoadingBlocker from './AuthLoadingBlocker';
+import { API_SERVER_URL } from './config';
+import Icon from './Icon';
+import Logo from './Logo';
+import { useWindowSize } from './utils';
 
 const APP_PERFORMANCE_DASHBOARD_CONFIG = {
   id: '',
diff --git a/packages/app/src/AuthPage.tsx b/packages/app/src/AuthPage.tsx
index ca625a49..6f289e4e 100644
--- a/packages/app/src/AuthPage.tsx
+++ b/packages/app/src/AuthPage.tsx
@@ -1,16 +1,16 @@
-import { useForm, SubmitHandler } from 'react-hook-form';
-import { Button, Form } from 'react-bootstrap';
-import { NextSeo } from 'next-seo';
-import { API_SERVER_URL } from './config';
-import { useRouter } from 'next/router';
 import { useEffect } from 'react';
 import Link from 'next/link';
+import { useRouter } from 'next/router';
+import { NextSeo } from 'next-seo';
 import cx from 'classnames';
+import { Button, Form } from 'react-bootstrap';
+import { SubmitHandler, useForm } from 'react-hook-form';
 
-import { PasswordCheck, CheckOrX } from './PasswordCheck';
-import LandingHeader from './LandingHeader';
-import * as config from './config';
 import api from './api';
+import { API_SERVER_URL } from './config';
+import * as config from './config';
+import LandingHeader from './LandingHeader';
+import { CheckOrX, PasswordCheck } from './PasswordCheck';
 
 type FormData = {
   email: string;
diff --git a/packages/app/src/AutocompleteInput.tsx b/packages/app/src/AutocompleteInput.tsx
index c7dad6a7..fbb183c4 100644
--- a/packages/app/src/AutocompleteInput.tsx
+++ b/packages/app/src/AutocompleteInput.tsx
@@ -1,6 +1,6 @@
 import { useEffect, useMemo, useRef, useState } from 'react';
-import { Form, InputGroup, OverlayTrigger } from 'react-bootstrap';
 import Fuse from 'fuse.js';
+import { Form, InputGroup, OverlayTrigger } from 'react-bootstrap';
 
 import { useDebounce } from './utils';
 
diff --git a/packages/app/src/ChartPage.tsx b/packages/app/src/ChartPage.tsx
index a4789768..cae9f633 100644
--- a/packages/app/src/ChartPage.tsx
+++ b/packages/app/src/ChartPage.tsx
@@ -1,24 +1,22 @@
-import Head from 'next/head';
-import { Button } from 'react-bootstrap';
-import { useQueryParam, StringParam, withDefault } from 'use-query-params';
 import { useCallback, useEffect, useState } from 'react';
-import { encodeArray, decodeArray } from 'serialize-query-params';
+import Head from 'next/head';
 import produce from 'immer';
+import { Button } from 'react-bootstrap';
+import { toast } from 'react-toastify';
+import type { QueryParamConfig } from 'serialize-query-params';
+import { decodeArray, encodeArray } from 'serialize-query-params';
+import { StringParam, useQueryParam, withDefault } from 'use-query-params';
 
-import { useQueryParam as useHDXQueryParam } from './useQueryParam';
+import AppNav from './AppNav';
+import { AggFn, ChartSeries, ChartSeriesForm } from './ChartUtils';
+import DSSelect from './DSSelect';
+import HDXLineChart from './HDXLineChart';
+import { LogTableWithSidePanel } from './LogTableWithSidePanel';
 import SearchTimeRangePicker, {
   parseTimeRangeInput,
 } from './SearchTimeRangePicker';
-import DSSelect from './DSSelect';
-import AppNav from './AppNav';
-
-import HDXLineChart from './HDXLineChart';
-import { ChartSeries, AggFn, ChartSeriesForm } from './ChartUtils';
-
-import type { QueryParamConfig } from 'serialize-query-params';
-import { LogTableWithSidePanel } from './LogTableWithSidePanel';
 import { parseTimeQuery, useTimeQuery } from './timeQuery';
-import { toast } from 'react-toastify';
+import { useQueryParam as useHDXQueryParam } from './useQueryParam';
 
 export const ChartSeriesParam: QueryParamConfig<ChartSeries[] | undefined> = {
   encode: (
diff --git a/packages/app/src/ChartUtils.tsx b/packages/app/src/ChartUtils.tsx
index 4142ca8a..b769c0c1 100644
--- a/packages/app/src/ChartUtils.tsx
+++ b/packages/app/src/ChartUtils.tsx
@@ -1,12 +1,12 @@
 import { useMemo, useRef } from 'react';
+import { add } from 'date-fns';
 import Select from 'react-select';
 import AsyncSelect from 'react-select/async';
 
 import api from './api';
-import { add } from 'date-fns';
-import SearchInput from './SearchInput';
-import MetricTagFilterInput from './MetricTagFilterInput';
 import Checkbox from './Checkbox';
+import MetricTagFilterInput from './MetricTagFilterInput';
+import SearchInput from './SearchInput';
 
 export const SORT_ORDER = [
   { value: 'asc' as const, label: 'Ascending' },
diff --git a/packages/app/src/Clipboard.tsx b/packages/app/src/Clipboard.tsx
index 2f99a363..34b1f626 100644
--- a/packages/app/src/Clipboard.tsx
+++ b/packages/app/src/Clipboard.tsx
@@ -1,7 +1,7 @@
+import { useState } from 'react';
 import cx from 'classnames';
 import { Button } from 'react-bootstrap';
 import { CopyToClipboard } from 'react-copy-to-clipboard';
-import { useState } from 'react';
 
 export default function Clipboard({
   text,
diff --git a/packages/app/src/ControllerSelect.tsx b/packages/app/src/ControllerSelect.tsx
index c489d587..c5ceb4f2 100644
--- a/packages/app/src/ControllerSelect.tsx
+++ b/packages/app/src/ControllerSelect.tsx
@@ -1,8 +1,7 @@
+import type { Control } from 'react-hook-form';
 import { Controller } from 'react-hook-form';
 import Select from 'react-select';
 
-import type { Control } from 'react-hook-form';
-
 export default function ControllerSelect<
   Option extends { value: string | undefined; label: React.ReactNode },
 >({
diff --git a/packages/app/src/CreateLogAlertModal.tsx b/packages/app/src/CreateLogAlertModal.tsx
index f676d88c..cd9b19f3 100644
--- a/packages/app/src/CreateLogAlertModal.tsx
+++ b/packages/app/src/CreateLogAlertModal.tsx
@@ -1,28 +1,27 @@
+import { useEffect, useMemo, useState } from 'react';
 import { Button, Form, Modal } from 'react-bootstrap';
 import { Controller, useForm } from 'react-hook-form';
 import { toast } from 'react-toastify';
-import { useEffect, useMemo, useState } from 'react';
 
-import HDXLineChart from './HDXLineChart';
-import TabBar from './TabBar';
+import {
+  ALERT_CHANNEL_OPTIONS,
+  ALERT_INTERVAL_OPTIONS,
+  intervalToDateRange,
+  intervalToGranularity,
+  SlackChannelForm,
+} from './Alert';
 import api from './api';
 import { FieldSelect } from './ChartUtils';
-import { capitalizeFirstLetter } from './utils';
+import HDXLineChart from './HDXLineChart';
 import { genEnglishExplanation } from './queryv2';
-
+import TabBar from './TabBar';
 import type {
   AlertChannelType,
   AlertInterval,
   AlertType,
   LogView,
 } from './types';
-import {
-  intervalToGranularity,
-  intervalToDateRange,
-  ALERT_INTERVAL_OPTIONS,
-  ALERT_CHANNEL_OPTIONS,
-  SlackChannelForm,
-} from './Alert';
+import { capitalizeFirstLetter } from './utils';
 
 function AlertForm({
   alertId,
diff --git a/packages/app/src/DOMPlayer.tsx b/packages/app/src/DOMPlayer.tsx
index d79f91ce..2fca1b45 100644
--- a/packages/app/src/DOMPlayer.tsx
+++ b/packages/app/src/DOMPlayer.tsx
@@ -1,8 +1,8 @@
-import throttle from 'lodash/throttle';
 import { useCallback, useEffect, useRef, useState } from 'react';
+import cx from 'classnames';
+import throttle from 'lodash/throttle';
 import { useHotkeys } from 'react-hotkeys-hook';
 import { Replayer } from 'rrweb';
-import cx from 'classnames';
 
 import { useSearchEventStream } from './search';
 import { useDebugMode } from './utils';
diff --git a/packages/app/src/DashboardPage.tsx b/packages/app/src/DashboardPage.tsx
index 9a961bd0..23201219 100644
--- a/packages/app/src/DashboardPage.tsx
+++ b/packages/app/src/DashboardPage.tsx
@@ -1,4 +1,3 @@
-import Head from 'next/head';
 import {
   ForwardedRef,
   forwardRef,
@@ -8,12 +7,12 @@ import {
   useRef,
   useState,
 } from 'react';
-import RGL, { WidthProvider } from 'react-grid-layout';
-import produce from 'immer';
-import HDXMarkdownChart from './HDXMarkdownChart';
-import { Button, Form, Modal } from 'react-bootstrap';
-import { useHotkeys } from 'react-hotkeys-hook';
+import Head from 'next/head';
 import { useRouter } from 'next/router';
+import produce from 'immer';
+import { Button, Form, Modal } from 'react-bootstrap';
+import RGL, { WidthProvider } from 'react-grid-layout';
+import { useHotkeys } from 'react-hotkeys-hook';
 import { useQueryClient } from 'react-query';
 import { toast } from 'react-toastify';
 import {
@@ -23,37 +22,37 @@ import {
   withDefault,
 } from 'use-query-params';
 
-import HDXLineChart from './HDXLineChart';
-import AppNav from './AppNav';
-import SearchTimeRangePicker from './SearchTimeRangePicker';
-import { Granularity, convertDateRangeToGranularityString } from './ChartUtils';
-import { FloppyIcon, Histogram } from './SVGIcons';
-import SearchInput from './SearchInput';
-import { hashCode } from './utils';
-import TabBar from './TabBar';
-import HDXHistogramChart from './HDXHistogramChart';
 import api from './api';
-import { LogTableWithSidePanel } from './LogTableWithSidePanel';
-import { parseTimeQuery, useNewTimeQuery, useTimeQuery } from './timeQuery';
-import type { Alert } from './types';
+import AppNav from './AppNav';
+import { convertDateRangeToGranularityString, Granularity } from './ChartUtils';
+import type { Chart } from './EditChartForm';
 import {
-  EditSearchChartForm,
-  EditMarkdownChartForm,
   EditHistogramChartForm,
   EditLineChartForm,
+  EditMarkdownChartForm,
   EditNumberChartForm,
+  EditSearchChartForm,
   EditTableChartForm,
 } from './EditChartForm';
-import HDXNumberChart from './HDXNumberChart';
 import GranularityPicker from './GranularityPicker';
+import HDXHistogramChart from './HDXHistogramChart';
+import HDXLineChart from './HDXLineChart';
+import HDXMarkdownChart from './HDXMarkdownChart';
+import HDXNumberChart from './HDXNumberChart';
 import HDXTableChart from './HDXTableChart';
+import { LogTableWithSidePanel } from './LogTableWithSidePanel';
+import SearchInput from './SearchInput';
+import SearchTimeRangePicker from './SearchTimeRangePicker';
+import { FloppyIcon, Histogram } from './SVGIcons';
+import TabBar from './TabBar';
+import { parseTimeQuery, useNewTimeQuery, useTimeQuery } from './timeQuery';
+import type { Alert } from './types';
 import { useConfirm } from './useConfirm';
-
-import type { Chart } from './EditChartForm';
+import { hashCode } from './utils';
+import { ZIndexContext } from './zIndex';
 
 import 'react-grid-layout/css/styles.css';
 import 'react-resizable/css/styles.css';
-import { ZIndexContext } from './zIndex';
 
 const makeId = () => Math.floor(100000000 * Math.random()).toString(36);
 
diff --git a/packages/app/src/EditChartForm.tsx b/packages/app/src/EditChartForm.tsx
index 53055bc9..10a98f8a 100644
--- a/packages/app/src/EditChartForm.tsx
+++ b/packages/app/src/EditChartForm.tsx
@@ -1,27 +1,28 @@
-import { useMemo, useState, useEffect } from 'react';
+import { useEffect, useMemo, useState } from 'react';
 import produce from 'immer';
-import HDXMarkdownChart from './HDXMarkdownChart';
-import Select from 'react-select';
 import { Button, Form, InputGroup, Modal } from 'react-bootstrap';
-import * as config from './config';
-import type { Alert } from './types';
-import Checkbox from './Checkbox';
-import HDXLineChart from './HDXLineChart';
+import Select from 'react-select';
+
+import { intervalToGranularity } from './Alert';
 import {
   AGG_FNS,
   AggFn,
   ChartSeriesForm,
-  FieldSelect,
   convertDateRangeToGranularityString,
+  FieldSelect,
 } from './ChartUtils';
-import { hashCode, useDebounce } from './utils';
-import HDXHistogramChart from './HDXHistogramChart';
-import { LogTableWithSidePanel } from './LogTableWithSidePanel';
+import Checkbox from './Checkbox';
+import * as config from './config';
+import { METRIC_ALERTS_ENABLED } from './config';
 import EditChartFormAlerts from './EditChartFormAlerts';
+import HDXHistogramChart from './HDXHistogramChart';
+import HDXLineChart from './HDXLineChart';
+import HDXMarkdownChart from './HDXMarkdownChart';
 import HDXNumberChart from './HDXNumberChart';
 import HDXTableChart from './HDXTableChart';
-import { intervalToGranularity } from './Alert';
-import { METRIC_ALERTS_ENABLED } from './config';
+import { LogTableWithSidePanel } from './LogTableWithSidePanel';
+import type { Alert } from './types';
+import { hashCode, useDebounce } from './utils';
 
 export type Chart = {
   id: string;
diff --git a/packages/app/src/EditChartFormAlerts.tsx b/packages/app/src/EditChartFormAlerts.tsx
index 07266ec5..13f9baf4 100644
--- a/packages/app/src/EditChartFormAlerts.tsx
+++ b/packages/app/src/EditChartFormAlerts.tsx
@@ -1,14 +1,14 @@
 import * as React from 'react';
-import { Form } from 'react-bootstrap';
-import { omit } from 'lodash';
 import produce from 'immer';
-import type { Alert } from './types';
+import { omit } from 'lodash';
+import { Form } from 'react-bootstrap';
 
 import {
-  ALERT_INTERVAL_OPTIONS,
   ALERT_CHANNEL_OPTIONS,
+  ALERT_INTERVAL_OPTIONS,
   SlackChannelForm,
 } from './Alert';
+import type { Alert } from './types';
 
 // Don't allow 1 minute alerts for charts
 const CHART_ALERT_INTERVAL_OPTIONS = omit(ALERT_INTERVAL_OPTIONS, '1m');
diff --git a/packages/app/src/FieldMultiSelect.tsx b/packages/app/src/FieldMultiSelect.tsx
index 266fc5ea..911a7f22 100644
--- a/packages/app/src/FieldMultiSelect.tsx
+++ b/packages/app/src/FieldMultiSelect.tsx
@@ -1,4 +1,3 @@
-import AsyncSelect from 'react-select/async';
 import React, { MouseEventHandler, useMemo } from 'react';
 import {
   components,
@@ -7,12 +6,13 @@ import {
   OnChangeValue,
   Props,
 } from 'react-select';
+import AsyncSelect from 'react-select/async';
 import {
   SortableContainer,
   SortableContainerProps,
   SortableElement,
-  SortEndHandler,
   SortableHandle,
+  SortEndHandler,
 } from 'react-sortable-hoc';
 
 import { usePropertyOptions } from './ChartUtils';
diff --git a/packages/app/src/HDXHistogramChart.tsx b/packages/app/src/HDXHistogramChart.tsx
index 8da1e95b..c34cdbf0 100644
--- a/packages/app/src/HDXHistogramChart.tsx
+++ b/packages/app/src/HDXHistogramChart.tsx
@@ -1,15 +1,15 @@
+import { memo, useCallback, useMemo, useRef } from 'react';
 import Link from 'next/link';
+import { useHotkeys } from 'react-hotkeys-hook';
 import {
+  Bar,
+  BarChart,
+  ResponsiveContainer,
+  Tooltip,
   XAxis,
   YAxis,
-  Tooltip,
-  ResponsiveContainer,
-  BarChart,
-  Bar,
 } from 'recharts';
 import { CategoricalChartState } from 'recharts/types/chart/generateCategoricalChart';
-import { memo, useCallback, useMemo, useRef } from 'react';
-import { useHotkeys } from 'react-hotkeys-hook';
 
 import api from './api';
 import { generateSearchUrl } from './utils';
diff --git a/packages/app/src/HDXLineChart.tsx b/packages/app/src/HDXLineChart.tsx
index 963e96f3..ef71145e 100644
--- a/packages/app/src/HDXLineChart.tsx
+++ b/packages/app/src/HDXLineChart.tsx
@@ -1,28 +1,27 @@
+import { memo, useEffect, useMemo, useRef, useState } from 'react';
+import Link from 'next/link';
+import cx from 'classnames';
+import { add, format } from 'date-fns';
+import pick from 'lodash/pick';
 import {
-  XAxis,
-  YAxis,
-  Tooltip,
-  ResponsiveContainer,
-  Line,
-  LineChart,
-  Legend,
-  ReferenceLine,
-  ReferenceArea,
-  Label,
   Bar,
   BarChart,
+  Label,
+  Legend,
+  Line,
+  LineChart,
+  ReferenceArea,
+  ReferenceLine,
+  ResponsiveContainer,
+  Tooltip,
+  XAxis,
+  YAxis,
 } from 'recharts';
-import { memo, useEffect, useMemo, useRef, useState } from 'react';
-import { format, add } from 'date-fns';
-import cx from 'classnames';
-import Link from 'next/link';
-import pick from 'lodash/pick';
-
-import { AggFn, Granularity, convertGranularityToSeconds } from './ChartUtils';
-import { semanticKeyedColor, truncateMiddle, TIME_TOKENS } from './utils';
-import useUserPreferences, { TimeFormat } from './useUserPreferences';
 
 import api from './api';
+import { AggFn, convertGranularityToSeconds, Granularity } from './ChartUtils';
+import useUserPreferences, { TimeFormat } from './useUserPreferences';
+import { semanticKeyedColor, TIME_TOKENS, truncateMiddle } from './utils';
 
 function ExpandableLegendItem({ value, entry }: any) {
   const [expanded, setExpanded] = useState(false);
diff --git a/packages/app/src/HDXTableChart.tsx b/packages/app/src/HDXTableChart.tsx
index 977cc7bb..cdf61ba3 100644
--- a/packages/app/src/HDXTableChart.tsx
+++ b/packages/app/src/HDXTableChart.tsx
@@ -1,3 +1,6 @@
+import { memo, useCallback, useMemo, useRef } from 'react';
+import { useRouter } from 'next/router';
+import cx from 'classnames';
 import {
   flexRender,
   getCoreRowModel,
@@ -5,12 +8,10 @@ import {
   useReactTable,
 } from '@tanstack/react-table';
 import { useVirtualizer } from '@tanstack/react-virtual';
-import { useCallback, useRef, useMemo, memo } from 'react';
-import cx from 'classnames';
-import { UNDEFINED_WIDTH } from './tableUtils';
-import { useRouter } from 'next/router';
+
 import api from './api';
 import { AggFn } from './ChartUtils';
+import { UNDEFINED_WIDTH } from './tableUtils';
 
 const Table = ({
   data,
diff --git a/packages/app/src/InstallInstructionsModal.tsx b/packages/app/src/InstallInstructionsModal.tsx
index 113d7c3d..4a83b96f 100644
--- a/packages/app/src/InstallInstructionsModal.tsx
+++ b/packages/app/src/InstallInstructionsModal.tsx
@@ -1,8 +1,8 @@
 import cx from 'classnames';
 import { Button, Modal } from 'react-bootstrap';
 
-import Clipboard from './Clipboard';
 import api from './api';
+import Clipboard from './Clipboard';
 
 function CopyableValue({
   label = '',
diff --git a/packages/app/src/JoinTeamPage.tsx b/packages/app/src/JoinTeamPage.tsx
index 001c44c9..2d6386e4 100644
--- a/packages/app/src/JoinTeamPage.tsx
+++ b/packages/app/src/JoinTeamPage.tsx
@@ -1,7 +1,8 @@
-import { Button, Form } from 'react-bootstrap';
-import { NextSeo } from 'next-seo';
-import { API_SERVER_URL } from './config';
 import { useRouter } from 'next/router';
+import { NextSeo } from 'next-seo';
+import { Button, Form } from 'react-bootstrap';
+
+import { API_SERVER_URL } from './config';
 
 export default function JoinTeam() {
   const router = useRouter();
diff --git a/packages/app/src/LandingHeader.tsx b/packages/app/src/LandingHeader.tsx
index dd3d70d5..b03f305e 100644
--- a/packages/app/src/LandingHeader.tsx
+++ b/packages/app/src/LandingHeader.tsx
@@ -1,9 +1,9 @@
 import Link from 'next/link';
-import { Button, Container, Navbar, Nav, NavDropdown } from 'react-bootstrap';
+import { Button, Container, Nav, Navbar, NavDropdown } from 'react-bootstrap';
 
+import api from './api';
 import Logo from './Logo';
 import NavHoverDropdown from './NavHoverDropdown';
-import api from './api';
 
 export default function LandingHeader({ activeKey }: { activeKey: string }) {
   const { data: me } = api.useMe();
diff --git a/packages/app/src/LogSidePanel.tsx b/packages/app/src/LogSidePanel.tsx
index e21bd316..27783a11 100644
--- a/packages/app/src/LogSidePanel.tsx
+++ b/packages/app/src/LogSidePanel.tsx
@@ -1,59 +1,58 @@
-import Button from 'react-bootstrap/Button';
-import CopyToClipboard from 'react-copy-to-clipboard';
-import Drawer from 'react-modern-drawer';
-import Fuse from 'fuse.js';
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import Link from 'next/link';
-import Timestamp from 'timestamp-nano';
 import cx from 'classnames';
+import { add, format } from 'date-fns';
+import Fuse from 'fuse.js';
 import get from 'lodash/get';
 import isPlainObject from 'lodash/isPlainObject';
 import mapValues from 'lodash/mapValues';
 import pickBy from 'lodash/pickBy';
-import stripAnsi from 'strip-ansi';
-import { ErrorBoundary } from 'react-error-boundary';
 import { Form, OverlayTrigger, Tooltip } from 'react-bootstrap';
-import { JSONTree } from 'react-json-tree';
-import { StringParam, withDefault } from 'serialize-query-params';
-import { add, format } from 'date-fns';
-import { toast } from 'react-toastify';
-import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import Button from 'react-bootstrap/Button';
+import CopyToClipboard from 'react-copy-to-clipboard';
+import { ErrorBoundary } from 'react-error-boundary';
 import { useHotkeys } from 'react-hotkeys-hook';
+import { JSONTree } from 'react-json-tree';
+import Drawer from 'react-modern-drawer';
+import { toast } from 'react-toastify';
+import { StringParam, withDefault } from 'serialize-query-params';
+import stripAnsi from 'strip-ansi';
+import Timestamp from 'timestamp-nano';
 import { useQueryParam } from 'use-query-params';
-import type { StacktraceFrame, StacktraceBreadcrumb } from './types';
-import {
-  useShowMoreRows,
-  networkColumns,
-  stacktraceColumns,
-  breadcrumbColumns,
-  headerColumns,
-  StacktraceValue,
-  CollapsibleSection,
-  SectionWrapper,
-  NetworkBody,
-  LogSidePanelKbdShortcuts,
-} from './LogSidePanelElements';
-import { Table } from './components/Table';
 
+import { Table } from './components/Table';
 import api from './api';
+import { CurlGenerator } from './curlGenerator';
 import LogLevel from './LogLevel';
+import {
+  breadcrumbColumns,
+  CollapsibleSection,
+  headerColumns,
+  LogSidePanelKbdShortcuts,
+  NetworkBody,
+  networkColumns,
+  SectionWrapper,
+  stacktraceColumns,
+  StacktraceValue,
+  useShowMoreRows,
+} from './LogSidePanelElements';
 import SearchInput from './SearchInput';
+import SessionSubpanel from './SessionSubpanel';
 import TabBar from './TabBar';
 import TimelineChart from './TimelineChart';
-import SessionSubpanel from './SessionSubpanel';
+import { dateRangeToString } from './timeQuery';
+import type { StacktraceBreadcrumb, StacktraceFrame } from './types';
+import { Dictionary } from './types';
 import {
   formatDistanceToNowStrictShort,
   useFirstNonNullValue,
   useLocalStorage,
   useWindowSize,
 } from './utils';
-import { dateRangeToString } from './timeQuery';
+import { useZIndex, ZIndexContext } from './zIndex';
 
 import 'react-bootstrap-range-slider/dist/react-bootstrap-range-slider.css';
 import 'react-modern-drawer/dist/index.css';
-import { CurlGenerator } from './curlGenerator';
-import { Dictionary } from './types';
-import { ZIndexContext, useZIndex } from './zIndex';
-
 import styles from '../styles/LogSidePanel.module.scss';
 
 const HDX_BODY_FIELD = '_hdx_body';
diff --git a/packages/app/src/LogSidePanelElements.tsx b/packages/app/src/LogSidePanelElements.tsx
index 292f247c..bbb3e6ce 100644
--- a/packages/app/src/LogSidePanelElements.tsx
+++ b/packages/app/src/LogSidePanelElements.tsx
@@ -1,13 +1,15 @@
 import * as React from 'react';
 import { format } from 'date-fns';
-import { JSONTree } from 'react-json-tree';
-import type { StacktraceFrame, StacktraceBreadcrumb } from './types';
-import styles from '../styles/LogSidePanel.module.scss';
 import { CloseButton } from 'react-bootstrap';
-import { useLocalStorage } from './utils';
+import { JSONTree } from 'react-json-tree';
 import { ColumnDef, Row } from '@tanstack/react-table';
+
 import { TableCellButton } from './components/Table';
 import { UNDEFINED_WIDTH } from './tableUtils';
+import type { StacktraceBreadcrumb, StacktraceFrame } from './types';
+import { useLocalStorage } from './utils';
+
+import styles from '../styles/LogSidePanel.module.scss';
 
 export const CollapsibleSection = ({
   title,
diff --git a/packages/app/src/LogTable.tsx b/packages/app/src/LogTable.tsx
index 90040dec..c433599b 100644
--- a/packages/app/src/LogTable.tsx
+++ b/packages/app/src/LogTable.tsx
@@ -1,34 +1,34 @@
+import { memo, useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import cx from 'classnames';
+import { format } from 'date-fns';
+import { formatInTimeZone } from 'date-fns-tz';
+import curry from 'lodash/curry';
+import { Button, Modal } from 'react-bootstrap';
+import { CSVLink } from 'react-csv';
+import { useHotkeys } from 'react-hotkeys-hook';
+import stripAnsi from 'strip-ansi';
 import {
   ColumnDef,
   ColumnResizeMode,
   flexRender,
   getCoreRowModel,
-  TableOptions,
   Row as TableRow,
+  TableOptions,
   useReactTable,
 } from '@tanstack/react-table';
-import { formatInTimeZone } from 'date-fns-tz';
-import { format } from 'date-fns';
 import { useVirtualizer } from '@tanstack/react-virtual';
-import { useState, useCallback, useRef, useEffect, useMemo, memo } from 'react';
-import cx from 'classnames';
-import { Button, Modal } from 'react-bootstrap';
-import stripAnsi from 'strip-ansi';
-import { CSVLink } from 'react-csv';
-import curry from 'lodash/curry';
 
+import api from './api';
 import Checkbox from './Checkbox';
 import FieldMultiSelect from './FieldMultiSelect';
 import InstallInstructionsModal from './InstallInstructionsModal';
 import LogLevel from './LogLevel';
-import api from './api';
-import { useLocalStorage, usePrevious, useWindowSize } from './utils';
 import { useSearchEventStream } from './search';
-import { useHotkeys } from 'react-hotkeys-hook';
-import { TIME_TOKENS } from './utils';
-import useUserPreferences from './useUserPreferences';
-import type { TimeFormat } from './useUserPreferences';
 import { UNDEFINED_WIDTH } from './tableUtils';
+import type { TimeFormat } from './useUserPreferences';
+import useUserPreferences from './useUserPreferences';
+import { useLocalStorage, usePrevious, useWindowSize } from './utils';
+import { TIME_TOKENS } from './utils';
 
 import styles from '../styles/LogTable.module.scss';
 
diff --git a/packages/app/src/LogTableWithSidePanel.tsx b/packages/app/src/LogTableWithSidePanel.tsx
index 730ad909..ad59b74e 100644
--- a/packages/app/src/LogTableWithSidePanel.tsx
+++ b/packages/app/src/LogTableWithSidePanel.tsx
@@ -1,9 +1,9 @@
-import { useState, useCallback } from 'react';
+import { useCallback, useState } from 'react';
 import usePortal from 'react-useportal';
 
-import type { LogView } from './types';
 import LogSidePanel from './LogSidePanel';
 import LogTable from './LogTable';
+import type { LogView } from './types';
 import { useDisplayedColumns } from './useDisplayedColumns';
 
 export function LogTableWithSidePanel({
diff --git a/packages/app/src/PasswordResetPage.tsx b/packages/app/src/PasswordResetPage.tsx
index 35b3cbc5..53813115 100644
--- a/packages/app/src/PasswordResetPage.tsx
+++ b/packages/app/src/PasswordResetPage.tsx
@@ -1,9 +1,10 @@
-import LandingHeader from './LandingHeader';
-import { Button, Form } from 'react-bootstrap';
-import { NextSeo } from 'next-seo';
-import { API_SERVER_URL } from './config';
-import { useRouter } from 'next/router';
 import Link from 'next/link';
+import { useRouter } from 'next/router';
+import { NextSeo } from 'next-seo';
+import { Button, Form } from 'react-bootstrap';
+
+import { API_SERVER_URL } from './config';
+import LandingHeader from './LandingHeader';
 
 export default function PasswordResetPage({
   action,
diff --git a/packages/app/src/PatternSidePanel.tsx b/packages/app/src/PatternSidePanel.tsx
index 2e65af05..782f5112 100644
--- a/packages/app/src/PatternSidePanel.tsx
+++ b/packages/app/src/PatternSidePanel.tsx
@@ -1,15 +1,15 @@
-import Drawer from 'react-modern-drawer';
-import { useHotkeys } from 'react-hotkeys-hook';
 import { useCallback, useMemo, useState } from 'react';
+import { useHotkeys } from 'react-hotkeys-hook';
+import Drawer from 'react-modern-drawer';
 import usePortal from 'react-useportal';
 import stripAnsi from 'strip-ansi';
 
 import LogSidePanel from './LogSidePanel';
 import { RawLogTable } from './LogTable';
 import { LogView } from './types';
+import { ZIndexContext } from './zIndex';
 
 import 'react-modern-drawer/dist/index.css';
-import { ZIndexContext } from './zIndex';
 
 export type Pattern = {
   pattern: string;
diff --git a/packages/app/src/PatternTable.tsx b/packages/app/src/PatternTable.tsx
index 1dc11b19..dbaf70e6 100644
--- a/packages/app/src/PatternTable.tsx
+++ b/packages/app/src/PatternTable.tsx
@@ -1,3 +1,16 @@
+import { memo, useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import cx from 'classnames';
+import {
+  Bar,
+  BarChart,
+  Line,
+  LineChart,
+  ResponsiveContainer,
+  Tooltip,
+  XAxis,
+  YAxis,
+} from 'recharts';
+import stripAnsi from 'strip-ansi';
 import {
   ColumnDef,
   flexRender,
@@ -6,26 +19,13 @@ import {
   useReactTable,
 } from '@tanstack/react-table';
 import { useVirtualizer } from '@tanstack/react-virtual';
-import { useState, useCallback, useRef, useEffect, useMemo, memo } from 'react';
-import cx from 'classnames';
-import stripAnsi from 'strip-ansi';
-import {
-  Line,
-  LineChart,
-  ResponsiveContainer,
-  XAxis,
-  YAxis,
-  Tooltip,
-  BarChart,
-  Bar,
-} from 'recharts';
 
-import LogLevel from './LogLevel';
 import api from './api';
-import { useWindowSize } from './utils';
-import { Pattern } from './PatternSidePanel';
 import { Granularity, timeBucketByGranularity } from './ChartUtils';
+import LogLevel from './LogLevel';
+import { Pattern } from './PatternSidePanel';
 import { UNDEFINED_WIDTH } from './tableUtils';
+import { useWindowSize } from './utils';
 
 const PatternTrendChartTooltip = (props: any) => {
   return null;
diff --git a/packages/app/src/PatternTableWithSidePanel.tsx b/packages/app/src/PatternTableWithSidePanel.tsx
index 7509e5fd..48e67584 100644
--- a/packages/app/src/PatternTableWithSidePanel.tsx
+++ b/packages/app/src/PatternTableWithSidePanel.tsx
@@ -1,11 +1,10 @@
-import { useState, useCallback, memo } from 'react';
+import { memo, useCallback, useState } from 'react';
 import usePortal from 'react-useportal';
 
+import type { Pattern } from './PatternSidePanel';
 import PatternSidePanel from './PatternSidePanel';
 import PatternTable from './PatternTable';
 
-import type { Pattern } from './PatternSidePanel';
-
 function PatternTableWithSidePanel({
   config,
   isUTC,
diff --git a/packages/app/src/Playbar.tsx b/packages/app/src/Playbar.tsx
index 7817a9ae..3a11146f 100644
--- a/packages/app/src/Playbar.tsx
+++ b/packages/app/src/Playbar.tsx
@@ -1,15 +1,15 @@
-import Button from 'react-bootstrap/Button';
-import throttle from 'lodash/throttle';
-import ReactSlider from 'react-slider';
-import { OverlayTrigger, Tooltip } from 'react-bootstrap';
+import { useMemo, useRef, useState } from 'react';
 import { format } from 'date-fns';
-import { useMemo, useState, useRef } from 'react';
+import throttle from 'lodash/throttle';
+import { OverlayTrigger, Tooltip } from 'react-bootstrap';
+import Button from 'react-bootstrap/Button';
+import ReactSlider from 'react-slider';
 
 import Checkbox from './Checkbox';
+import { useSessionEvents } from './sessionUtils';
 import { getShortUrl, truncateText, useLocalStorage } from './utils';
 
 import 'react-bootstrap-range-slider/dist/react-bootstrap-range-slider.css';
-import { useSessionEvents } from './sessionUtils';
 
 function formatTs({
   ts,
diff --git a/packages/app/src/SaveSearchModal.tsx b/packages/app/src/SaveSearchModal.tsx
index c4867b2d..feb4c65d 100644
--- a/packages/app/src/SaveSearchModal.tsx
+++ b/packages/app/src/SaveSearchModal.tsx
@@ -1,4 +1,4 @@
-import { FormEvent, useState, useEffect } from 'react';
+import { FormEvent, useEffect, useState } from 'react';
 import { Button, Form, Modal } from 'react-bootstrap';
 import { toast } from 'react-toastify';
 
diff --git a/packages/app/src/SearchInput.tsx b/packages/app/src/SearchInput.tsx
index 6adcd1b2..44ad6b50 100644
--- a/packages/app/src/SearchInput.tsx
+++ b/packages/app/src/SearchInput.tsx
@@ -1,8 +1,8 @@
 import { useEffect, useMemo, useRef, useState } from 'react';
 
-import { genEnglishExplanation } from './queryv2';
 import api from './api';
 import AutocompleteInput from './AutocompleteInput';
+import { genEnglishExplanation } from './queryv2';
 
 export default function SearchInput({
   inputRef,
diff --git a/packages/app/src/SearchPage.tsx b/packages/app/src/SearchPage.tsx
index 69ea9504..dc1539ed 100644
--- a/packages/app/src/SearchPage.tsx
+++ b/packages/app/src/SearchPage.tsx
@@ -1,52 +1,52 @@
+import {
+  FormEvent,
+  memo,
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+} from 'react';
 import Head from 'next/head';
 import Link from 'next/link';
 import { useRouter } from 'next/router';
+import { clamp, format, sub } from 'date-fns';
+import { formatInTimeZone } from 'date-fns-tz';
+import { Button } from 'react-bootstrap';
+import { ErrorBoundary } from 'react-error-boundary';
+import { useHotkeys } from 'react-hotkeys-hook';
+import { toast } from 'react-toastify';
 import {
-  BarChart,
   Bar,
+  BarChart,
+  ReferenceArea,
+  ResponsiveContainer,
+  Tooltip,
   XAxis,
   YAxis,
-  Tooltip,
-  ResponsiveContainer,
-  ReferenceArea,
 } from 'recharts';
 import {
-  useQueryParam,
   StringParam,
-  withDefault,
+  useQueryParam,
   useQueryParams,
+  withDefault,
 } from 'use-query-params';
-import {
-  FormEvent,
-  useState,
-  useCallback,
-  useRef,
-  useEffect,
-  useMemo,
-  memo,
-} from 'react';
-import { format, sub, clamp } from 'date-fns';
-import { formatInTimeZone } from 'date-fns-tz';
-import { toast } from 'react-toastify';
-import { useHotkeys } from 'react-hotkeys-hook';
-import { Button } from 'react-bootstrap';
-
-import 'react-modern-drawer/dist/index.css';
 
 import api from './api';
-import SearchTimeRangePicker from './SearchTimeRangePicker';
 import AppNav from './AppNav';
-import LogTable from './LogTable';
-import LogSidePanel from './LogSidePanel';
-import SearchInput from './SearchInput';
-import SaveSearchModal from './SaveSearchModal';
 import CreateLogAlertModal from './CreateLogAlertModal';
-import SearchPageActionBar from './SearchPageActionBar';
-import { useTimeQuery } from './timeQuery';
+import LogSidePanel from './LogSidePanel';
+import LogTable from './LogTable';
 import { MemoPatternTableWithSidePanel } from './PatternTableWithSidePanel';
-import { ErrorBoundary } from 'react-error-boundary';
+import SaveSearchModal from './SaveSearchModal';
+import SearchInput from './SearchInput';
+import SearchPageActionBar from './SearchPageActionBar';
+import SearchTimeRangePicker from './SearchTimeRangePicker';
+import { useTimeQuery } from './timeQuery';
 import { useDisplayedColumns } from './useDisplayedColumns';
 
+import 'react-modern-drawer/dist/index.css';
+
 const formatDate = (
   date: Date,
   isUTC: boolean,
diff --git a/packages/app/src/SearchPageActionBar.tsx b/packages/app/src/SearchPageActionBar.tsx
index 3d96ed08..7054a71a 100644
--- a/packages/app/src/SearchPageActionBar.tsx
+++ b/packages/app/src/SearchPageActionBar.tsx
@@ -1,6 +1,6 @@
-import OverlayTrigger from 'react-bootstrap/OverlayTrigger';
-import { Button } from 'react-bootstrap';
 import { useState } from 'react';
+import { Button } from 'react-bootstrap';
+import OverlayTrigger from 'react-bootstrap/OverlayTrigger';
 
 import { FloppyIcon } from './SVGIcons';
 import { useWindowSize } from './utils';
diff --git a/packages/app/src/SearchTimeRangePicker.tsx b/packages/app/src/SearchTimeRangePicker.tsx
index d0786015..2c604a18 100644
--- a/packages/app/src/SearchTimeRangePicker.tsx
+++ b/packages/app/src/SearchTimeRangePicker.tsx
@@ -1,14 +1,15 @@
-import { Form, InputGroup } from 'react-bootstrap';
-import cx from 'classnames';
-import { useRef, useEffect, useState } from 'react';
-import DatePicker from 'react-datepicker';
-import OverlayTrigger from 'react-bootstrap/OverlayTrigger';
-import { endOfDay, format, sub } from 'date-fns';
+import { useEffect, useRef, useState } from 'react';
 import * as chrono from 'chrono-node';
+import cx from 'classnames';
+import { endOfDay, format, sub } from 'date-fns';
+import { Form, InputGroup } from 'react-bootstrap';
+import OverlayTrigger from 'react-bootstrap/OverlayTrigger';
+import DatePicker from 'react-datepicker';
+import { useHotkeys } from 'react-hotkeys-hook';
+
+import { TimeFormat } from './useUserPreferences';
 
 import 'react-datepicker/dist/react-datepicker.css';
-import { useHotkeys } from 'react-hotkeys-hook';
-import { TimeFormat } from './useUserPreferences';
 
 export function parseTimeRangeInput(str: string): [Date | null, Date | null] {
   const parsedTimeResult = chrono.parse(str);
diff --git a/packages/app/src/SessionSidePanel.tsx b/packages/app/src/SessionSidePanel.tsx
index c3a99071..39201979 100644
--- a/packages/app/src/SessionSidePanel.tsx
+++ b/packages/app/src/SessionSidePanel.tsx
@@ -1,16 +1,16 @@
-import CopyToClipboard from 'react-copy-to-clipboard';
-import Drawer from 'react-modern-drawer';
-import { Button } from 'react-bootstrap';
-import { toast } from 'react-toastify';
-import { useHotkeys } from 'react-hotkeys-hook';
 import { useState } from 'react';
+import { Button } from 'react-bootstrap';
+import CopyToClipboard from 'react-copy-to-clipboard';
+import { useHotkeys } from 'react-hotkeys-hook';
+import Drawer from 'react-modern-drawer';
+import { toast } from 'react-toastify';
 
 import api from './api';
 import SessionSubpanel from './SessionSubpanel';
 import { formatDistanceToNowStrictShort } from './utils';
+import { ZIndexContext } from './zIndex';
 
 import 'react-modern-drawer/dist/index.css';
-import { ZIndexContext } from './zIndex';
 
 export default function SessionSidePanel({
   sessionId,
diff --git a/packages/app/src/SessionSubpanel.tsx b/packages/app/src/SessionSubpanel.tsx
index aa27dd9d..2b6ab042 100644
--- a/packages/app/src/SessionSubpanel.tsx
+++ b/packages/app/src/SessionSubpanel.tsx
@@ -1,18 +1,18 @@
-import ReactDOM from 'react-dom';
-import throttle from 'lodash/throttle';
-import { NumberParam, StringParam, withDefault } from 'serialize-query-params';
-import { format } from 'date-fns';
 import { memo, useCallback, useEffect, useMemo, useRef, useState } from 'react';
-import { useVirtualizer } from '@tanstack/react-virtual';
+import { format } from 'date-fns';
+import throttle from 'lodash/throttle';
+import ReactDOM from 'react-dom';
+import { NumberParam, StringParam, withDefault } from 'serialize-query-params';
 import { useQueryParam } from 'use-query-params';
+import { useVirtualizer } from '@tanstack/react-virtual';
 
 import DOMPlayer from './DOMPlayer';
 import LogSidePanel from './LogSidePanel';
 import Playbar from './Playbar';
 import SearchInput from './SearchInput';
+import { useSessionEvents } from './sessionUtils';
 import TabBar from './TabBar';
 import { getShortUrl, usePrevious } from './utils';
-import { useSessionEvents } from './sessionUtils';
 
 function SessionEventList({
   config: { where, dateRange },
diff --git a/packages/app/src/SessionsPage.tsx b/packages/app/src/SessionsPage.tsx
index 2dce93f3..c14f0489 100644
--- a/packages/app/src/SessionsPage.tsx
+++ b/packages/app/src/SessionsPage.tsx
@@ -1,28 +1,28 @@
-import Head from 'next/head';
-import { Button, Form } from 'react-bootstrap';
-import {
-  useQueryParam,
-  StringParam,
-  withDefault,
-  useQueryParams,
-} from 'use-query-params';
 import { memo, useCallback, useEffect, useMemo, useRef, useState } from 'react';
-import { NumberParam } from 'serialize-query-params';
+import Head from 'next/head';
+import { sub } from 'date-fns';
+import { Button, Form } from 'react-bootstrap';
 import { toast } from 'react-toastify';
+import { NumberParam } from 'serialize-query-params';
+import {
+  StringParam,
+  useQueryParam,
+  useQueryParams,
+  withDefault,
+} from 'use-query-params';
+import { useVirtualizer } from '@tanstack/react-virtual';
 
 import api from './api';
-import SearchTimeRangePicker from './SearchTimeRangePicker';
 import AppNav from './AppNav';
 import Dropdown from './Dropdown';
+import SearchInput from './SearchInput';
+import SearchTimeRangePicker from './SearchTimeRangePicker';
+import SessionSidePanel from './SessionSidePanel';
+import { parseTimeQuery, useTimeQuery } from './timeQuery';
 import {
   formatDistanceToNowStrictShort,
   formatHumanReadableDate,
 } from './utils';
-import { parseTimeQuery, useTimeQuery } from './timeQuery';
-import SearchInput from './SearchInput';
-import SessionSidePanel from './SessionSidePanel';
-import { sub } from 'date-fns';
-import { useVirtualizer } from '@tanstack/react-virtual';
 
 function SessionCard({
   email,
diff --git a/packages/app/src/TeamPage.tsx b/packages/app/src/TeamPage.tsx
index 5da3363f..ccc4397d 100644
--- a/packages/app/src/TeamPage.tsx
+++ b/packages/app/src/TeamPage.tsx
@@ -1,24 +1,24 @@
+import { useState } from 'react';
 import Head from 'next/head';
 import Link from 'next/link';
 import {
   Badge,
   Button,
-  ToggleButton,
-  ToggleButtonGroup,
   Container,
   Form,
   Modal,
   Row,
   Spinner,
+  ToggleButton,
+  ToggleButtonGroup,
 } from 'react-bootstrap';
 import { CopyToClipboard } from 'react-copy-to-clipboard';
 import { toast } from 'react-toastify';
-import { useState } from 'react';
 
+import api from './api';
+import AppNav from './AppNav';
 import useUserPreferences from './useUserPreferences';
 import { TimeFormat } from './useUserPreferences';
-import AppNav from './AppNav';
-import api from './api';
 import { isValidUrl } from './utils';
 
 export default function TeamPage() {
diff --git a/packages/app/src/TimelineChart.tsx b/packages/app/src/TimelineChart.tsx
index c57dbc7a..39830451 100644
--- a/packages/app/src/TimelineChart.tsx
+++ b/packages/app/src/TimelineChart.tsx
@@ -1,7 +1,7 @@
+import { memo, RefObject, useEffect, useRef, useState } from 'react';
 import cx from 'classnames';
 import OverlayTrigger from 'react-bootstrap/OverlayTrigger';
 import Tooltip from 'react-bootstrap/Tooltip';
-import { useEffect, useRef, useState, memo, RefObject } from 'react';
 import { useVirtualizer } from '@tanstack/react-virtual';
 
 import { useDrag, usePrevious } from './utils';
diff --git a/packages/app/src/__test__/fixtures.ts b/packages/app/src/__test__/fixtures.ts
index 37fa9c58..570f2cc5 100644
--- a/packages/app/src/__test__/fixtures.ts
+++ b/packages/app/src/__test__/fixtures.ts
@@ -1,6 +1,6 @@
 import { Router } from 'next/router';
-import { LocationMock } from '@jedmao/location';
 import type { UrlObject } from 'url';
+import { LocationMock } from '@jedmao/location';
 
 type PartialRouter = Partial<Router>;
 
diff --git a/packages/app/src/__test__/timeQuery.test.tsx b/packages/app/src/__test__/timeQuery.test.tsx
index d144daae..44bc8b99 100644
--- a/packages/app/src/__test__/timeQuery.test.tsx
+++ b/packages/app/src/__test__/timeQuery.test.tsx
@@ -1,17 +1,19 @@
+import * as React from 'react';
+import { useImperativeHandle } from 'react';
+import { useRouter } from 'next/router';
+import { NextAdapter } from 'next-query-params';
+import { QueryParamProvider } from 'use-query-params';
+import { LocationMock } from '@jedmao/location';
+import { render } from '@testing-library/react';
+
 import {
   getLiveTailTimeRange,
   useNewTimeQuery,
   type UseTimeQueryInputType,
   type UseTimeQueryReturnType,
 } from '../timeQuery';
-import { useRouter } from 'next/router';
-import { render } from '@testing-library/react';
-import * as React from 'react';
-import { useImperativeHandle } from 'react';
-import { QueryParamProvider } from 'use-query-params';
-import { NextAdapter } from 'next-query-params';
+
 import { TestRouter } from './fixtures';
-import { LocationMock } from '@jedmao/location';
 
 // Setting a fixed time of 10/03/23 at 12pm EDT
 const INITIAL_DATE_STRING =
diff --git a/packages/app/src/api.ts b/packages/app/src/api.ts
index d331dca7..273885c8 100644
--- a/packages/app/src/api.ts
+++ b/packages/app/src/api.ts
@@ -1,5 +1,7 @@
 import Router from 'next/router';
+import type { HTTPError } from 'ky';
 import ky from 'ky-universal';
+import type { UseQueryOptions } from 'react-query';
 import {
   useInfiniteQuery,
   useMutation,
@@ -8,17 +10,14 @@ import {
 } from 'react-query';
 
 import { API_SERVER_URL } from './config';
-
 import type {
   AlertChannel,
   AlertInterval,
-  AlertType,
   AlertSource,
+  AlertType,
   LogView,
   Session,
 } from './types';
-import type { HTTPError } from 'ky';
-import type { UseQueryOptions } from 'react-query';
 
 type ApiAlertInput = {
   channel: AlertChannel;
diff --git a/packages/app/src/components/Table.tsx b/packages/app/src/components/Table.tsx
index 1c27ecbb..b8e4ec3c 100644
--- a/packages/app/src/components/Table.tsx
+++ b/packages/app/src/components/Table.tsx
@@ -1,11 +1,12 @@
 import * as React from 'react';
 import cx from 'classnames';
 import {
-  useReactTable,
-  getCoreRowModel,
-  flexRender,
   ColumnDef,
+  flexRender,
+  getCoreRowModel,
+  useReactTable,
 } from '@tanstack/react-table';
+
 import { UNDEFINED_WIDTH } from '../tableUtils';
 
 import styles from './Table.module.scss';
diff --git a/packages/app/src/search.ts b/packages/app/src/search.ts
index cbe1fc1a..5b0ba0ae 100644
--- a/packages/app/src/search.ts
+++ b/packages/app/src/search.ts
@@ -1,6 +1,6 @@
-import { fetchEventSource } from '@microsoft/fetch-event-source';
 import { useCallback, useEffect, useRef, useState } from 'react';
 import { UseQueryOptions } from 'react-query';
+import { fetchEventSource } from '@microsoft/fetch-event-source';
 
 import { API_SERVER_URL } from './config';
 import { usePrevious } from './utils';
diff --git a/packages/app/src/timeQuery.ts b/packages/app/src/timeQuery.ts
index 14cf4da6..a8929ad1 100644
--- a/packages/app/src/timeQuery.ts
+++ b/packages/app/src/timeQuery.ts
@@ -1,23 +1,24 @@
-import { useRouter } from 'next/router';
-import * as chrono from 'chrono-node';
 import {
-  useQueryParam,
-  StringParam,
-  withDefault,
-  NumberParam,
-  useQueryParams,
-} from 'use-query-params';
-import {
-  useState,
+  Dispatch,
+  SetStateAction,
   useCallback,
   useEffect,
   useMemo,
   useRef,
-  Dispatch,
-  SetStateAction,
+  useState,
 } from 'react';
-import { format, sub, startOfSecond, isValid } from 'date-fns';
+import { useRouter } from 'next/router';
+import * as chrono from 'chrono-node';
+import { format, isValid, startOfSecond, sub } from 'date-fns';
 import { formatInTimeZone } from 'date-fns-tz';
+import {
+  NumberParam,
+  StringParam,
+  useQueryParam,
+  useQueryParams,
+  withDefault,
+} from 'use-query-params';
+
 import { usePrevious } from './utils';
 
 const LIVE_TAIL_TIME_QUERY = 'Live Tail';
diff --git a/packages/app/src/useConfirm.tsx b/packages/app/src/useConfirm.tsx
index 8b4e8c19..7b0ec6b6 100644
--- a/packages/app/src/useConfirm.tsx
+++ b/packages/app/src/useConfirm.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { atom, useAtomValue, useSetAtom } from 'jotai';
-import Modal from 'react-bootstrap/Modal';
 import Button from 'react-bootstrap/Button';
+import Modal from 'react-bootstrap/Modal';
 
 type ConfirmAtom = {
   message: string;
diff --git a/packages/app/src/useNextraSeoProps.ts b/packages/app/src/useNextraSeoProps.ts
index bf640feb..798a8c5d 100644
--- a/packages/app/src/useNextraSeoProps.ts
+++ b/packages/app/src/useNextraSeoProps.ts
@@ -1,4 +1,5 @@
 import { useConfig } from 'nextra-theme-docs';
+
 import { useIsBlog, useIsDocs, useIsTerms } from './utils';
 
 export default function useNextraSeoProps() {
diff --git a/packages/app/src/useQueryParam.tsx b/packages/app/src/useQueryParam.tsx
index 81491bab..798625dc 100644
--- a/packages/app/src/useQueryParam.tsx
+++ b/packages/app/src/useQueryParam.tsx
@@ -1,4 +1,3 @@
-import { useRouter } from 'next/router';
 import {
   createContext,
   useCallback,
@@ -6,6 +5,8 @@ import {
   useEffect,
   useState,
 } from 'react';
+import { useRouter } from 'next/router';
+
 import { usePrevious } from './utils';
 
 type QueryParamContextType = Record<string, any> & {
diff --git a/packages/app/src/useUserPreferences.tsx b/packages/app/src/useUserPreferences.tsx
index 7b098a2d..a1a46107 100644
--- a/packages/app/src/useUserPreferences.tsx
+++ b/packages/app/src/useUserPreferences.tsx
@@ -1,4 +1,5 @@
-import React, { useContext, useState, useEffect } from 'react';
+import React, { useContext, useEffect, useState } from 'react';
+
 import { useLocalStorage } from './utils';
 export type TimeFormat = '12h' | '24h';
 
diff --git a/packages/app/src/utils.tsx b/packages/app/src/utils.tsx
index b70a7d36..41db1e64 100644
--- a/packages/app/src/utils.tsx
+++ b/packages/app/src/utils.tsx
@@ -1,7 +1,6 @@
-import { format as fnsFormat, formatDistanceToNowStrict } from 'date-fns';
+import { useEffect, useRef, useState } from 'react';
 import { useRouter } from 'next/router';
-import { useState, useEffect, useRef } from 'react';
-
+import { format as fnsFormat, formatDistanceToNowStrict } from 'date-fns';
 import type { MutableRefObject } from 'react';
 
 import { dateRangeToString } from './timeQuery';
diff --git a/yarn.lock b/yarn.lock
index 061fbaaa..c018a864 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -4655,7 +4655,7 @@
   dependencies:
     "@types/react" "*"
 
-"@types/react@*", "@types/react@>=16", "@types/react@>=16.9.11", "@types/react@^17", "@types/react@^17.0.52":
+"@types/react@*", "@types/react@17.0.52", "@types/react@>=16", "@types/react@>=16.9.11", "@types/react@^17", "@types/react@^17.0.52":
   version "17.0.52"
   resolved "https://registry.yarnpkg.com/@types/react/-/react-17.0.52.tgz#10d8b907b5c563ac014a541f289ae8eaa9bf2e9b"
   integrity sha512-vwk8QqVODi0VaZZpDXQCmEmiOuyjEFPY7Ttaw5vjM112LOq37yz1CDJGrRJwA1fYEq4Iitd5rnjd1yWAc/bT+A==
@@ -7397,6 +7397,11 @@ eslint-plugin-react@^7.31.7:
     semver "^6.3.0"
     string.prototype.matchall "^4.0.8"
 
+eslint-plugin-simple-import-sort@^10.0.0:
+  version "10.0.0"
+  resolved "https://registry.yarnpkg.com/eslint-plugin-simple-import-sort/-/eslint-plugin-simple-import-sort-10.0.0.tgz#cc4ceaa81ba73252427062705b64321946f61351"
+  integrity sha512-AeTvO9UCMSNzIHRkg8S6c3RPy5YEwKWSQPx3DYghLedo2ZQxowPFLGDN1AZ2evfg6r6mjBSZSLxLFsWSu3acsw==
+
 eslint-scope@^5.1.1:
   version "5.1.1"
   resolved "https://registry.yarnpkg.com/eslint-scope/-/eslint-scope-5.1.1.tgz#e786e59a66cb92b3f6c1fb0d508aab174848f48c"