diff --git a/.changeset/five-laws-pull.md b/.changeset/five-laws-pull.md
new file mode 100644
index 00000000..b2887621
--- /dev/null
+++ b/.changeset/five-laws-pull.md
@@ -0,0 +1,5 @@
+---
+"@hyperdx/app": patch
+---
+
+fix: the banner for the clickhouse build can now be collapsed
diff --git a/packages/app/src/layout.tsx b/packages/app/src/layout.tsx
index 9b124528..ec32794b 100644
--- a/packages/app/src/layout.tsx
+++ b/packages/app/src/layout.tsx
@@ -1,11 +1,13 @@
 import React from 'react';
 import Link from 'next/link';
-import { Box, Center, Text } from '@mantine/core';
+import { Button, Center, Group, Text } from '@mantine/core';
+import { IconX } from '@tabler/icons-react';
 
 import AppNav from '@/components/AppNav';
 import { IS_CLICKHOUSE_BUILD } from '@/config';
 
 import { HDXSpotlightProvider } from './Spotlights';
+import { useLocalStorage } from './utils';
 
 /**
  * Next.js layout for pages that use the AppNav component. Using the same layout
@@ -16,44 +18,62 @@ import { HDXSpotlightProvider } from './Spotlights';
  *
  * @example SearchPage.getLayout = withAppNav;
  */
-export const withAppNav = (page: React.ReactNode) => {
+function PageWrapper({ children }: { children: React.ReactNode }) {
+  const [bannerState, setBannerState] = useLocalStorage(
+    'clickstack-banner-state',
+    'opened',
+  );
+  const [hasMounted, setHasMounted] = React.useState(false); // prevents banner flash
+  React.useEffect(() => setHasMounted(true), []);
+  const bannerIsActive =
+    hasMounted && IS_CLICKHOUSE_BUILD && bannerState === 'opened';
+
   return (
-    <HDXSpotlightProvider>
-      <div
-        className={
-          IS_CLICKHOUSE_BUILD ? 'app-layout-with-banner' : 'app-layout'
-        }
-      >
-        {IS_CLICKHOUSE_BUILD && (
-          <Box bg="var(--color-text-primary)">
-            <Center>
-              <Text py="xs" size="sm" c="var(--color-text-inverted)">
-                This is not recommended for production use and is lacking core
-                ClickStack features such as alerts and saved searches. For a
-                proper experience, visit the{' '}
-                <strong>
-                  <Link
-                    href="https://clickhouse.com/docs/use-cases/observability/clickstack/getting-started"
-                    target="_blank"
-                    rel="noopener norefeer"
-                  >
-                    ClickStack Docs
-                  </Link>
-                </strong>
-              </Text>
-            </Center>
-          </Box>
-        )}
-        <div className="d-flex" style={{ height: '100%', overflow: 'hidden' }}>
-          <AppNav />
-          <div
-            className="w-100 min-w-0"
-            style={{ minWidth: 0, overflow: 'auto' }}
+    <div className={bannerIsActive ? 'app-layout-with-banner' : 'app-layout'}>
+      {bannerIsActive && (
+        <Group bg="var(--color-text-primary)">
+          <Center style={{ flexGrow: 1 }}>
+            <Text py="xs" size="sm" c="var(--color-text-inverted)">
+              This is not recommended for production use and is lacking core
+              ClickStack features such as alerts and saved searches. For a
+              proper experience, visit the{' '}
+              <strong>
+                <Link
+                  href="https://clickhouse.com/docs/use-cases/observability/clickstack/getting-started"
+                  target="_blank"
+                  rel="noopener noreferrer"
+                >
+                  ClickStack Docs
+                </Link>
+              </strong>
+            </Text>
+          </Center>
+          <Button
+            onClick={() => setBannerState('closed')}
+            variant="transparent"
+            color="var(--color-text-inverted)"
           >
-            {page}
-          </div>
+            <IconX />{' '}
+          </Button>
+        </Group>
+      )}
+      <div className="d-flex" style={{ height: '100%', overflow: 'hidden' }}>
+        <AppNav />
+        <div
+          className="w-100 min-w-0"
+          style={{ minWidth: 0, overflow: 'auto' }}
+        >
+          {children}
         </div>
       </div>
+    </div>
+  );
+}
+
+export const withAppNav = (page: React.ReactNode): React.ReactNode => {
+  return (
+    <HDXSpotlightProvider>
+      <PageWrapper>{page}</PageWrapper>
     </HDXSpotlightProvider>
   );
 };