diff --git a/packages/app/src/DBSearchPage.tsx b/packages/app/src/DBSearchPage.tsx
index be009eb98c..eb99285eea 100644
--- a/packages/app/src/DBSearchPage.tsx
+++ b/packages/app/src/DBSearchPage.tsx
@@ -112,7 +112,12 @@ import {
   parseTimeQuery,
   useNewTimeQuery,
 } from '@/timeQuery';
-import { QUERY_LOCAL_STORAGE, useLocalStorage, usePrevious } from '@/utils';
+import {
+  QUERY_LOCAL_STORAGE,
+  useLocalStorage,
+  usePrevious,
+  useWindowSize,
+} from '@/utils';
 
 import { SQLPreview } from './components/ChartSQLPreview';
 import DBSqlRowTableWithSideBar from './components/DBSqlRowTableWithSidebar';
@@ -841,6 +846,16 @@ function DBSearchPage() {
     [setIsLive, _setDenoiseResults],
   );
 
+  // Filters collapse state
+  const { width } = useWindowSize();
+  const isSmallScreen = (width ?? 1000) < 900;
+
+  // Default to collapsed on mobile, but allow user to override
+  const [isFiltersPreferCollapsed, setIsFiltersPreferCollapsed] =
+    useLocalStorage<boolean>('isSearchFiltersCollapsed', isSmallScreen);
+
+  const isFiltersCollapsed = isFiltersPreferCollapsed;
+
   // Get default source
   const defaultSourceId = useMemo(
     () => getDefaultSourceId(sources, lastSelectedSourceId),
@@ -1809,6 +1824,10 @@ function DBSearchPage() {
                   chartConfig={filtersChartConfig}
                   sourceId={inputSourceObj?.id}
                   showDelta={!!searchedSource?.durationExpression}
+                  isCollapsed={isFiltersCollapsed}
+                  onToggleCollapse={() =>
+                    setIsFiltersPreferCollapsed(!isFiltersPreferCollapsed)
+                  }
                   {...searchFilters}
                 />
               </ErrorBoundary>
diff --git a/packages/app/src/components/AppNav/AppNav.tsx b/packages/app/src/components/AppNav/AppNav.tsx
index 6cf7d26f90..7a2dfc1b39 100644
--- a/packages/app/src/components/AppNav/AppNav.tsx
+++ b/packages/app/src/components/AppNav/AppNav.tsx
@@ -450,14 +450,15 @@ export default function AppNav({ fixed = false }: { fixed?: boolean }) {
       defaultValue: true,
     });
   const { width } = useWindowSize();
+  const isSmallScreen = (width ?? 1000) < 900;
 
+  // Default to collapsed on mobile, but allow user to override
   const [isPreferCollapsed, setIsPreferCollapsed] = useLocalStorage<boolean>({
     key: 'isNavCollapsed',
-    defaultValue: false,
+    defaultValue: isSmallScreen,
   });
 
-  const isSmallScreen = (width ?? 1000) < 900;
-  const isCollapsed = isSmallScreen || isPreferCollapsed;
+  const isCollapsed = isPreferCollapsed;
 
   const navWidth = isCollapsed ? 50 : 230;
 
diff --git a/packages/app/src/components/DBSearchPageFilters.tsx b/packages/app/src/components/DBSearchPageFilters.tsx
index 853fdb3c08..a0d5a4a10a 100644
--- a/packages/app/src/components/DBSearchPageFilters.tsx
+++ b/packages/app/src/components/DBSearchPageFilters.tsx
@@ -15,6 +15,7 @@ import {
   Button,
   Center,
   Checkbox,
+  Collapse,
   Flex,
   Group,
   Loader,
@@ -33,6 +34,7 @@ import {
   IconChartBar,
   IconChartBarOff,
   IconChevronDown,
+  IconChevronLeft,
   IconChevronRight,
   IconChevronUp,
   IconFilterOff,
@@ -841,6 +843,8 @@ const DBSearchPageFiltersComponent = ({
   denoiseResults,
   setDenoiseResults,
   setFilterRange,
+  isCollapsed = false,
+  onToggleCollapse,
 }: {
   analysisMode: 'results' | 'delta' | 'pattern';
   setAnalysisMode: (mode: 'results' | 'delta' | 'pattern') => void;
@@ -851,6 +855,8 @@ const DBSearchPageFiltersComponent = ({
   denoiseResults: boolean;
   setDenoiseResults: (denoiseResults: boolean) => void;
   setFilterRange: (key: string, range: { min: number; max: number }) => void;
+  isCollapsed?: boolean;
+  onToggleCollapse?: () => void;
 } & FilterStateHook) => {
   const setFilterValue = useCallback(
     (
@@ -1150,22 +1156,94 @@ const DBSearchPageFiltersComponent = ({
   }, [filterState, source]);
 
   return (
-    <Box className={classes.filtersPanel} style={{ width: `${size}%` }}>
-      <div className={resizeStyles.resizeHandle} onMouseDown={startResize} />
-      <ScrollArea
+    <Box
+      className={classes.filtersPanel}
+      data-collapsed={isCollapsed}
+      style={{
+        width: isCollapsed ? 'auto' : `${size}%`,
+        minWidth: isCollapsed ? 'auto' : undefined,
+      }}
+    >
+      {!isCollapsed && (
+        <div className={resizeStyles.resizeHandle} onMouseDown={startResize} />
+      )}
+      <Stack
+        gap={0}
         h="100%"
-        scrollbarSize={4}
-        scrollbars="y"
         style={{
-          display: 'block',
-          width: '100%',
-          overflow: 'hidden',
+          position: 'relative',
         }}
       >
-        <Stack gap="sm" p="xs">
-          <Text size="xxs" c="dimmed" fw="bold">
-            Analysis Mode
-          </Text>
+        {onToggleCollapse && isCollapsed && (
+          <Flex
+            justify="center"
+            p="xs"
+            h="100%"
+          >
+            <Stack gap={8} align="center" style={{ cursor: 'pointer' }} onClick={onToggleCollapse}>
+              <ActionIcon
+                variant="subtle"
+                size="xs"
+                title="Expand Filters"
+                data-testid="toggle-filters-button"
+                color="gray"
+              >
+                <IconChevronRight size={14} />
+              </ActionIcon>
+              <Text
+                size="10px"
+                c="dimmed"
+                fw={500}
+                style={{
+                  writingMode: 'vertical-rl',
+                  textOrientation: 'mixed',
+                  letterSpacing: '1px',
+                  userSelect: 'none',
+                  transform: 'rotate(180deg)',
+                }}
+              >
+                FILTERS
+              </Text>
+            </Stack>
+          </Flex>
+        )}
+        <Collapse
+          in={!isCollapsed}
+          style={{
+            flex: 1,
+            overflow: 'hidden',
+            display: 'flex',
+            flexDirection: 'column',
+          }}
+        >
+          <ScrollArea
+            h="100%"
+            scrollbarSize={4}
+            scrollbars="y"
+            style={{
+              display: 'block',
+              width: '100%',
+              overflow: 'hidden',
+            }}
+          >
+            <Stack gap="sm" p="xs">
+          <Flex align="center" justify="space-between">
+            <Text size="xxs" c="dimmed" fw="bold">
+              Analysis Mode
+            </Text>
+            {onToggleCollapse && (
+              <ActionIcon
+                variant="subtle"
+                size="xs"
+                title="Collapse Filters"
+                onClick={onToggleCollapse}
+                data-testid="toggle-filters-button"
+                color="gray"
+              >
+                <IconChevronLeft size={14} />
+              </ActionIcon>
+            )}
+          </Flex>
           <Tabs
             value={analysisMode}
             onChange={value =>
@@ -1432,8 +1510,10 @@ const DBSearchPageFiltersComponent = ({
               </Text>
             </div>
           )}
-        </Stack>
-      </ScrollArea>
+            </Stack>
+          </ScrollArea>
+        </Collapse>
+      </Stack>
     </Box>
   );
 };
diff --git a/packages/app/styles/SearchPage.module.scss b/packages/app/styles/SearchPage.module.scss
index 72d32f1502..3a3b2a5ed9 100644
--- a/packages/app/styles/SearchPage.module.scss
+++ b/packages/app/styles/SearchPage.module.scss
@@ -13,6 +13,12 @@
   border-right: 1px solid var(--color-border);
   overflow: hidden;
   z-index: 3; // higher z-index to be above other elements
+  transition: min-width 0.2s ease;
+
+  &[data-collapsed='true'] {
+    min-width: 44px;
+    width: 44px !important;
+  }
 
   :global {
     .mantine-TextInput-wrapper {