diff --git a/src/app/app/v2/[virtualLabId]/[projectId]/explore/page.tsx b/src/app/app/v2/[virtualLabId]/[projectId]/explore/page.tsx
index 60611179d..0400c3d7b 100644
--- a/src/app/app/v2/[virtualLabId]/[projectId]/explore/page.tsx
+++ b/src/app/app/v2/[virtualLabId]/[projectId]/explore/page.tsx
@@ -1,12 +1,10 @@
-import { Suspense } from 'react';
+import { ExploreLayout, ExploreInnerLayout } from '@/ui/layouts/explore-layout';
 
-import { TreeSkeleton } from '@/features/brain-region-hierarchy/brain-region-skeleton';
-import { BrainRegionHierarchy } from '@/features/brain-region-hierarchy';
-
-import { AtlasViewer } from '@/features/brain-atlas-viewer';
-import { ExploreLayout } from '@/ui/layouts/explore-layout';
+import { ExploreMenu } from '@/ui/segments/explore/left-menu';
 import { ExploreHeader } from '@/ui/segments/explore/header';
+
 import { resolveDataKey } from '@/utils/key-builder';
+import { Atlas } from '@/ui/segments/explore/atlas';
 import { Card } from '@/ui/molecules/card';
 
 import type { ServerSideComponentProp, WorkspaceContext } from '@/types/common';
@@ -20,18 +18,20 @@ export default async function Page({
   return (
     <ExploreLayout>
       <ExploreHeader />
-      <div className="h-full max-h-[calc(100vh-10.7rem)] w-full px-3 [grid-area:aside]">
-        <Card borderless className="h-full w-full py-0">
-          <Suspense fallback={<TreeSkeleton />}>
-            <BrainRegionHierarchy dataKey={dataKey} />
-          </Suspense>
-        </Card>
-      </div>
-      <div className="h-full w-full [grid-area:main]">
-        <div id="3d-area" className="3d bg-primary-9 relative h-full w-full rounded-2xl p-1">
-          <AtlasViewer dataKey={dataKey} />
+      <ExploreInnerLayout>
+        <div
+          id="explore-left-menu"
+          data-testid="explore-left-menu"
+          className="h-full max-h-[calc(100vh-11.8rem)] min-h-0 w-full overflow-hidden [grid-area:aside]"
+        >
+          <Card borderless className="h-full w-full gap-0 bg-white py-0 shadow-lg">
+            <ExploreMenu dataKey={dataKey} />
+          </Card>
+        </div>
+        <div className="h-full max-h-[calc(100vh-11.8rem)] w-full rounded-2xl [grid-area:body]">
+          <Atlas dataKey={dataKey} />
         </div>
-      </div>
+      </ExploreInnerLayout>
     </ExploreLayout>
   );
 }
diff --git a/src/components/GenericErrorFallback/index.tsx b/src/components/GenericErrorFallback/index.tsx
index 35c5a0cf2..246dcfe26 100644
--- a/src/components/GenericErrorFallback/index.tsx
+++ b/src/components/GenericErrorFallback/index.tsx
@@ -4,7 +4,7 @@ import { WarningOutlined } from '@ant-design/icons';
 import { ReactNode } from 'react';
 import Link from 'next/link';
 
-import { classNames } from '@/util/utils';
+import { cn } from '@/utils/css-class';
 
 interface Props {
   error?: Error & { cause?: unknown };
@@ -33,7 +33,7 @@ export function ErrorComponent({
 }: Props) {
   return (
     <div
-      className={classNames(
+      className={cn(
         'bg-primary-9 flex h-screen w-full flex-col items-center justify-center p-6 text-white',
         cls.container
       )}
diff --git a/src/components/icons/buttons.tsx b/src/components/icons/buttons.tsx
index 79763c34c..0b0bbe8fb 100644
--- a/src/components/icons/buttons.tsx
+++ b/src/components/icons/buttons.tsx
@@ -98,3 +98,22 @@ export function PeopleCommunity(props: React.SVGProps<SVGSVGElement>) {
     </svg>
   );
 }
+
+export function HierarchySquare(props: React.SVGProps<SVGSVGElement>) {
+  return (
+    <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24" {...props}>
+      {/* Icon from Huge Icons by Hugeicons - undefined */}
+      <g
+        fill="none"
+        stroke="currentColor"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        strokeWidth="1.5"
+        color="currentColor"
+      >
+        <path d="M2 20c0-.943 0-1.414.293-1.707S3.057 18 4 18h1c.943 0 1.414 0 1.707.293S7 19.057 7 20s0 1.414-.293 1.707S5.943 22 5 22H4c-.943 0-1.414 0-1.707-.293S2 20.943 2 20m15 0c0-.943 0-1.414.293-1.707S18.057 18 19 18h1c.943 0 1.414 0 1.707.293S22 19.057 22 20s0 1.414-.293 1.707S20.943 22 20 22h-1c-.943 0-1.414 0-1.707-.293S17 20.943 17 20m2.5-2.5c0-3.31-.648-4-3.75-4H14.5m-10 4c0-3.31.648-4 3.75-4H9.5M12 7v4m-2-9h4c1.815 0 2 .925 2 2.5S15.815 7 14 7h-4c-1.815 0-2-.925-2-2.5S8.185 2 10 2" />
+        <path d="M14.5 13.5a2.5 2.5 0 1 1-5 0a2.5 2.5 0 0 1 5 0" />
+      </g>
+    </svg>
+  );
+}
diff --git a/src/components/tree/elements/helpers.ts b/src/components/tree/elements/helpers.ts
index 6ec2ac8a7..5de6bf64d 100644
--- a/src/components/tree/elements/helpers.ts
+++ b/src/components/tree/elements/helpers.ts
@@ -117,14 +117,59 @@ export function scrollToNode<TNode extends TTreeNode>(
   if (!node || typeof document === 'undefined') return;
 
   const element = document.querySelector(`[data-node-id="${node.id}"]`);
-  if (element) {
-    setTimeout(() => {
-      element.scrollIntoView({
-        behavior: 'smooth',
-        block,
-      });
-    }, 50);
-  }
+  if (!element) return;
+
+  const findScrollableAncestor = (el: Element | null): HTMLElement | null => {
+    let current: HTMLElement | null = el as HTMLElement | null;
+    while (current && current.parentElement) {
+      const parent = current.parentElement as HTMLElement;
+      const style = window.getComputedStyle(parent);
+      const overflowY = style.overflowY || style.overflow;
+      const isScrollable = /auto|scroll/i.test(overflowY);
+      if (isScrollable && parent.scrollHeight > parent.clientHeight) {
+        return parent;
+      }
+      current = parent;
+    }
+    // fallback to document scrolling element
+    return (document.scrollingElement || document.documentElement) as HTMLElement;
+  };
+
+  // delay to allow DOM (expansions) to settle
+  window.setTimeout(() => {
+    const container = findScrollableAncestor(element);
+    if (!container) return;
+
+    const containerRect = container.getBoundingClientRect();
+    const elementRect = element.getBoundingClientRect();
+
+    // current scroll position of the container
+    const currentTop = container.scrollTop;
+    const offsetTop = elementRect.top - containerRect.top + currentTop;
+
+    let targetScrollTop = offsetTop;
+    if (block === 'center') {
+      targetScrollTop = offsetTop - container.clientHeight / 2 + elementRect.height / 2;
+    } else if (block === 'start') {
+      targetScrollTop = offsetTop;
+    } else if (block === 'end') {
+      targetScrollTop = offsetTop - container.clientHeight + elementRect.height;
+    } else if (block === 'nearest') {
+      // of already in view, do nothing; otherwise choose the closer edge
+      const inView =
+        elementRect.top >= containerRect.top && elementRect.bottom <= containerRect.bottom;
+      if (!inView) {
+        const distanceToTop = Math.abs(elementRect.top - containerRect.top);
+        const distanceToBottom = Math.abs(elementRect.bottom - containerRect.bottom);
+        if (distanceToTop < distanceToBottom) targetScrollTop = offsetTop;
+        else targetScrollTop = offsetTop - container.clientHeight + elementRect.height;
+      } else {
+        return;
+      }
+    }
+
+    container.scrollTo({ top: Math.max(0, targetScrollTop), behavior: 'smooth' });
+  }, 50);
 }
 
 /**
@@ -134,6 +179,7 @@ export function scrollToNode<TNode extends TTreeNode>(
  * @param obj - The object to process. If `null`, the function returns `null`.
  * @param field - The key name to be renamed throughout the object.
  * @param newKey - The new key name to replace the old key.
+ * @param keepOriginal - Whether to keep the original key alongside the new key (default: false).
  * @returns A new object with the specified key renamed at all levels, or `null` if the input is `null`.
  *
  * @example
@@ -141,26 +187,44 @@ export function scrollToNode<TNode extends TTreeNode>(
  * const obj = { a: 1, b: { a: 2 }, c: [{ a: 3 }] };
  * const result = renameKeyDeep(obj, 'a', 'x');
  * // result: { x: 1, b: { x: 2 }, c: [{ x: 3 }] }
+ *
+ * const resultWithOriginal = renameKeyDeep(obj, 'a', 'x', true);
+ * // result: { a: 1, x: 1, b: { a: 2, x: 2 }, c: [{ a: 3, x: 3 }] }
  * ```
  */
 export function renameKeyDeep<T extends Record<string, any>>(
   obj: T | null,
   field: string,
-  newKey: string
+  newKey: string,
+  keepOriginal: boolean = false
 ): T | null {
   if (!obj) return null;
 
   return transform(obj, (result, value, key) => {
     if (!result) return;
 
-    const sanitizedField = key === field ? newKey : key;
     const dic = result as Record<string, any>;
+
+    // Process the value recursively if it's an object or array
+    let processedValue: any;
     if (isArray(value)) {
-      dic[sanitizedField] = value.map((item) => renameKeyDeep(item, field, newKey));
+      processedValue = value.map((item) => renameKeyDeep(item, field, newKey, keepOriginal));
     } else if (isObject(value)) {
-      dic[sanitizedField] = renameKeyDeep(value, field, newKey);
+      processedValue = renameKeyDeep(value, field, newKey, keepOriginal);
+    } else {
+      processedValue = value;
+    }
+
+    if (key === field) {
+      // set the new key
+      dic[newKey] = processedValue;
+      // optionally keep the original key
+      if (keepOriginal) {
+        dic[key] = processedValue;
+      }
     } else {
-      dic[sanitizedField] = value;
+      // key doesn't match, set it as-is
+      dic[key] = processedValue;
     }
   });
 }
diff --git a/src/components/tree/index.tsx b/src/components/tree/index.tsx
index db78b7f74..dbd96cdc2 100644
--- a/src/components/tree/index.tsx
+++ b/src/components/tree/index.tsx
@@ -44,7 +44,7 @@ function Container({
 }) {
   return (
     <div
-      className={classNames('no-scrollbar w-full overflow-y-auto', className)}
+      className={classNames('no-scrollbar h-full min-h-0 w-full overflow-y-auto', className)}
       style={{ height }}
     >
       {children}
diff --git a/src/features/brain-atlas-viewer/full-screen.tsx b/src/features/brain-atlas-viewer/full-screen.tsx
index ebe3ea520..2e0640951 100644
--- a/src/features/brain-atlas-viewer/full-screen.tsx
+++ b/src/features/brain-atlas-viewer/full-screen.tsx
@@ -1,38 +1,17 @@
-import { RefObject, useEffect, useReducer } from 'react';
 import { FullscreenExitOutlined, FullscreenOutlined } from '@ant-design/icons';
 
-export default function FullScreen({
-  elementRef,
-}: {
-  elementRef?: RefObject<HTMLDivElement | null> | null;
-}) {
-  const [isFullScreen, toggleFullScreen] = useReducer((value) => !value, false);
-
-  const onFullScreenEnter = () => {
-    if (elementRef?.current && !document.fullscreenElement) {
-      elementRef.current.requestFullscreen();
-    }
-  };
-  const onFullScreenExit = () => {
-    if (elementRef?.current && document.fullscreenElement && document.exitFullscreen) {
-      document.exitFullscreen();
-    }
-  };
-
-  useEffect(() => {
-    document.addEventListener('fullscreenchange', toggleFullScreen);
-
-    return () => {
-      document.removeEventListener('fullscreenchange', toggleFullScreen);
-    };
-  }, []);
+interface FullScreenProps {
+  isFullScreen: boolean;
+  onToggle: () => void;
+}
 
+export default function FullScreen({ isFullScreen, onToggle }: FullScreenProps) {
   return (
     <div className="absolute top-4 left-4 z-50 cursor-pointer text-white">
       {isFullScreen ? (
-        <FullscreenExitOutlined className="h-5 w-5 text-xl" onClick={onFullScreenExit} />
+        <FullscreenExitOutlined className="h-5 w-5 text-xl" onClick={onToggle} />
       ) : (
-        <FullscreenOutlined className="h-5 w-5 text-xl" onClick={onFullScreenEnter} />
+        <FullscreenOutlined className="h-5 w-5 text-xl" onClick={onToggle} />
       )}
     </div>
   );
diff --git a/src/features/brain-atlas-viewer/index.tsx b/src/features/brain-atlas-viewer/index.tsx
index d122fb1fb..952143911 100644
--- a/src/features/brain-atlas-viewer/index.tsx
+++ b/src/features/brain-atlas-viewer/index.tsx
@@ -1,8 +1,9 @@
 'use client';
 
-import { useCallback, useRef, useState } from 'react';
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { OrbitControls } from '@react-three/drei';
 import { Canvas } from '@react-three/fiber';
+import { match } from 'ts-pattern';
 import { Vector3 } from 'three';
 
 import ViewerComposer from '@/features/brain-atlas-viewer/viewer-composer';
@@ -14,10 +15,37 @@ import type { TSuspenseStatus } from '@/components/suspense-with-status';
 export function AtlasViewer({ dataKey }: { dataKey: string }) {
   const threeDRef = useRef<HTMLDivElement>(null);
   const [meshLoadingStatus, setMeshLoadingStatus] = useState<TSuspenseStatus>('pending');
+  const [isFullScreen, setIsFullScreen] = useState(false);
 
   const [pointCloudLoadingStatus, setPointCloudLoadingStatus] =
     useState<TSuspenseStatus>('pending');
 
+  // Track container size using ResizeObserver to ensure the Canvas always fits its parent
+  const [containerSize, setContainerSize] = useState<{ width: number; height: number }>({
+    width: 0,
+    height: 0,
+  });
+
+  useEffect(() => {
+    const element = threeDRef.current;
+    if (!element) return;
+
+    // Initialize with current size
+    const rect = element.getBoundingClientRect();
+    setContainerSize({ width: Math.floor(rect.width) - 10, height: Math.floor(rect.height) });
+
+    // Observe size changes
+    const observer = new ResizeObserver((entries) => {
+      const entry = entries[0];
+      if (!entry) return;
+      const { width, height } = entry.contentRect;
+      setContainerSize({ width: Math.floor(width) - 10, height: Math.floor(height) });
+    });
+
+    observer.observe(element);
+    return () => observer.disconnect();
+  }, [isFullScreen]);
+
   const onMeshLoadingStatusChange = useCallback((status: TSuspenseStatus) => {
     setMeshLoadingStatus(status);
   }, []);
@@ -26,36 +54,74 @@ export function AtlasViewer({ dataKey }: { dataKey: string }) {
     setPointCloudLoadingStatus(status);
   }, []);
 
+  const handleFullScreenToggle = () => {
+    setIsFullScreen((prev) => !prev);
+  };
+
   const isLoading = meshLoadingStatus === 'pending' || pointCloudLoadingStatus === 'pending';
 
-  return (
-    <div ref={threeDRef} className="relative h-full w-full">
-      {isLoading && (
-        <div className="absolute inset-0 z-10 flex items-center justify-center bg-black/5">
-          <Loader className="text-neutral-3" />
-        </div>
-      )}
-      <FullScreen elementRef={threeDRef} />
-      <Canvas
-        dpr={[1, 2]}
-        camera={{
-          position: [506.098, 1683.079, -14311.903],
-          up: [0, -1, 0],
-          fov: 55,
-          far: 100000,
-          zoom: 1.3,
-          type: 'PerspectiveCamera',
-        }}
-      >
-        <OrbitControls target={new Vector3(6612.504, 3938.164, 5712.791)} zoomSpeed={0.3} />
-        <ViewerComposer
-          dataKey={dataKey}
-          onMeshLoadingStatusChange={onMeshLoadingStatusChange}
-          onPointCloudLoadingStatusChange={onPointCloudLoadingStatusChange}
-        />
-      </Canvas>
-    </div>
+  const renderViewer = useMemo(
+    () => (
+      <>
+        <Canvas
+          dpr={[1, 2]}
+          style={{ width: containerSize.width, height: containerSize.height, display: 'block' }}
+          camera={{
+            position: [506.098, 1683.079, -14311.903],
+            up: [0, -1, 0],
+            fov: 55,
+            far: 100000,
+            zoom: 1.3,
+            type: 'PerspectiveCamera',
+          }}
+        >
+          <OrbitControls target={new Vector3(6612.504, 3938.164, 5712.791)} zoomSpeed={0.3} />
+          <ViewerComposer
+            dataKey={dataKey}
+            onMeshLoadingStatusChange={onMeshLoadingStatusChange}
+            onPointCloudLoadingStatusChange={onPointCloudLoadingStatusChange}
+          />
+        </Canvas>
+      </>
+    ),
+    [
+      dataKey,
+      onMeshLoadingStatusChange,
+      onPointCloudLoadingStatusChange,
+      containerSize.width,
+      containerSize.height,
+    ]
   );
+
+  return match(isFullScreen)
+    .with(true, () => {
+      return (
+        <div className="fixed inset-0 z-[9999] bg-black">
+          <FullScreen isFullScreen={isFullScreen} onToggle={handleFullScreenToggle} />
+          {isLoading && (
+            <div className="absolute inset-0 z-10 flex items-center justify-center rounded-2xl bg-black/5">
+              <Loader className="text-neutral-3" />
+            </div>
+          )}
+          <div ref={threeDRef} className="relative h-full w-full">
+            {renderViewer}
+          </div>
+        </div>
+      );
+    })
+    .otherwise(() => {
+      return (
+        <div ref={threeDRef} className="relative h-full max-h-full w-full max-w-full">
+          <FullScreen isFullScreen={isFullScreen} onToggle={handleFullScreenToggle} />
+          {isLoading && (
+            <div className="absolute inset-0 z-10 flex items-center justify-center rounded-2xl bg-black/5">
+              <Loader className="text-neutral-3" />
+            </div>
+          )}
+          {renderViewer}
+        </div>
+      );
+    });
 }
 
 export default AtlasViewer;
diff --git a/src/features/brain-region-hierarchy/context.tsx b/src/features/brain-region-hierarchy/context.tsx
index 4e3daf136..76c151d1f 100644
--- a/src/features/brain-region-hierarchy/context.tsx
+++ b/src/features/brain-region-hierarchy/context.tsx
@@ -2,7 +2,7 @@
 
 import { parseAsInteger, parseAsString, useQueryStates } from 'nuqs';
 import { useEffect, useRef } from 'react';
-import { atom, useAtomValue, useSetAtom } from 'jotai';
+import { atom, useAtom, useAtomValue, useSetAtom } from 'jotai';
 import lowerCase from 'lodash/lowerCase';
 import find from 'lodash/find';
 import omit from 'lodash/omit';
@@ -109,14 +109,18 @@ export const brainRegionBasicCellGroupsRegionsHierarchyAtom = atom(
     }
     let options: Array<BrainRegionHierarchyOption> = [];
     let leaves: Map<string, IBrainRegionHierarchy[]> = new Map();
-    const nodes = renameKeyDeep<IBrainRegionHierarchy>(root, 'color_hex_triplet', 'color');
+    const nodes = renameKeyDeep<IBrainRegionHierarchy>(root, 'color_hex_triplet', 'color', true);
 
-    if (nodes) {
+    if (root) {
       options = flattenTreeAsObject<IBrainRegionHierarchy>(root).map((region) => ({
         av: region.annotation_value,
         value: region.id,
         label: `${region.name}`,
-        data: region,
+        data: {
+          ...region,
+          color_hex_triplet: region.color_hex_triplet,
+          color: region.color_hex_triplet,
+        },
       }));
       leaves = getLeavesForEachRegion(root);
     }
@@ -142,8 +146,9 @@ export const brainRegionBasicCellGroupsRegionsHierarchyAtom = atom(
  */
 export const useBrainRegionHierarchy = ({ dataKey }: Props) => {
   const key = getSectionFromDataKey(dataKey);
-  const updateSelectedBrainRegion = useSetAtom(selectedBrainRegionAtom);
+  const [selectedBrainRegion, updateSelectedBrainRegion] = useAtom(selectedBrainRegionAtom);
   const brainRegions = useUnwrappedValue(brainRegionBasicCellGroupsRegionsHierarchyAtom);
+
   const defaultSelectedBrainRegion = brainRegions?.options.find(
     (o) => lowerCase(o.label).trim() === lowerCase(DEFAULT_SELECTED_BRAIN_REGION_NAME).trim()
   );
@@ -174,11 +179,16 @@ export const useBrainRegionHierarchy = ({ dataKey }: Props) => {
 
   useEffect(() => {
     if (isInitializedRef.current || !brainRegions) return;
-
     const hasURLParams = !!id && !!annotation_value;
 
     if (hasURLParams) {
       isInitializedRef.current = true;
+      if (selectedBrainRegion?.id !== id) {
+        const foundNode = find(brainRegions?.options, (o) => o.data.id === id)?.data;
+        if (foundNode) {
+          updateSelectedBrainRegion(omit(foundNode, 'children'));
+        }
+      }
       return;
     }
 
@@ -186,7 +196,9 @@ export const useBrainRegionHierarchy = ({ dataKey }: Props) => {
       if (id !== stored.id || annotation_value !== stored.annotation_value) {
         setHierarchyConfig(stored);
         const foundNode = find(brainRegions?.options, (o) => o.data.id === stored.id)?.data;
-        if (foundNode) updateSelectedBrainRegion(omit(foundNode, 'children'));
+        if (foundNode) {
+          updateSelectedBrainRegion(omit(foundNode, 'children'));
+        }
       }
       isInitializedRef.current = true;
       return;
diff --git a/src/features/brain-region-hierarchy/index.tsx b/src/features/brain-region-hierarchy/index.tsx
index bf008ee91..b59a58179 100644
--- a/src/features/brain-region-hierarchy/index.tsx
+++ b/src/features/brain-region-hierarchy/index.tsx
@@ -62,15 +62,15 @@ export function BrainRegionHierarchy({ dataKey }: { dataKey: string }) {
   return (
     <div
       className={classNames(
-        'group flex h-full flex-col rounded-xl bg-white transition-all duration-300 ease-in-out',
+        'group flex h-full min-h-0 flex-col rounded-xl bg-white transition-all duration-300 ease-in-out',
         isCollapsed ? 'collapsed w-full' : 'w-full'
       )}
     >
-      <div className="flex h-full w-full flex-col gap-4 overflow-hidden p-4 pt-3">
-        <div className="flex h-full flex-col items-center justify-start">
+      <div className="flex h-full min-h-0 w-full flex-col gap-4 overflow-hidden p-4 pt-0">
+        <div className="flex h-full min-h-0 flex-col items-center justify-start">
           <div
             className={classNames(
-              'flex w-full flex-col gap-4 overflow-hidden transition-all duration-300 ease-in-out',
+              'flex min-h-0 w-full flex-col gap-4 overflow-hidden transition-all duration-300 ease-in-out',
               isCollapsed ? 'invisible max-h-0 opacity-0' : 'visible h-full opacity-100'
             )}
           >
diff --git a/src/features/brain-region-hierarchy/region-banner.tsx b/src/features/brain-region-hierarchy/region-banner.tsx
new file mode 100644
index 000000000..c8f6dfe47
--- /dev/null
+++ b/src/features/brain-region-hierarchy/region-banner.tsx
@@ -0,0 +1,98 @@
+'use client';
+
+import { CloseOutlined } from '@ant-design/icons';
+
+import { useGetSelectedBrainRegion } from '@/features/brain-region-hierarchy/context';
+// import { SpeciesSwitcher } from '@/features/brain-region-hierarchy/species-switcher';
+import { HierarchySquare } from '@/components/icons/buttons';
+import { Button } from '@/ui/molecules/button';
+import { cn } from '@/utils/css-class';
+
+// import type { ISpecies } from '@/api/entitycore/types/shared/global';
+
+export const ExploreLeftMenuContext = {
+  BrainRegionHierarchy: 'brain-region-hierarchy',
+  DataType: 'data-type',
+} as const;
+export type TExploreLeftMenuContext =
+  (typeof ExploreLeftMenuContext)[keyof typeof ExploreLeftMenuContext];
+
+type Props = {
+  view: TExploreLeftMenuContext;
+  onSwitchView: (_view: TExploreLeftMenuContext) => void;
+};
+
+export function RegionBanner({ view, onSwitchView }: Props) {
+  const { selectedBrainRegion } = useGetSelectedBrainRegion();
+  // const [currentSpecies, setCurrentSpecies] = useState<ISpecies | null>(null);
+  // const speciesOptions = [
+  //   { value: 'rodent', label: 'Rodent', data: null },
+  //   { value: 'human', label: 'Human', data: null },
+  //   { value: 'primate', label: 'Primate', data: null },
+  // ];
+
+  // const handleSpeciesChange = (species: ISpecies | null) => {
+  //   setCurrentSpecies(species);
+  // };
+
+  return (
+    <div
+      id="entity-counter-container"
+      data-testid="entity-counter-container"
+      className="flex flex-col items-center justify-between gap-2 px-4 py-5"
+    >
+      <div
+        className={cn(
+          'border-neutral-1 flex w-full items-center justify-between gap-6 rounded-full py-2 pr-2 pl-4',
+          { 'shadow-2xl': Boolean(selectedBrainRegion?.id) }
+        )}
+      >
+        <div className="flex items-center justify-center gap-2">
+          {/* {currentSpecies?.name && (
+            <div className="flex items-center justify-center gap-1">
+              <span className="text-neutral-2">Species</span>
+              <span className="text-primary-9/90">{currentSpecies.name}</span>
+            </div>
+          )} */}
+          {selectedBrainRegion && (
+            <div className="flex items-center justify-center gap-1">
+              <span className="text-neutral-2">Region:</span>
+              <div className="text-primary-9/90 flex items-center justify-center gap-1.5">
+                <div
+                  key={`color-${selectedBrainRegion.id}-${selectedBrainRegion.color_hex_triplet}`}
+                  className="block h-3! w-3! min-w-3! rounded-full"
+                  style={{ backgroundColor: `#${selectedBrainRegion.color_hex_triplet}` }}
+                />
+                <span className="line-clamp-2 leading-4 font-bold">{selectedBrainRegion.name}</span>
+              </div>
+            </div>
+          )}
+        </div>
+        <Button
+          rounded
+          variant="ghost"
+          className="h-8 w-8"
+          onClick={() =>
+            onSwitchView(
+              view === ExploreLeftMenuContext.BrainRegionHierarchy
+                ? ExploreLeftMenuContext.DataType
+                : ExploreLeftMenuContext.BrainRegionHierarchy
+            )
+          }
+        >
+          {view === ExploreLeftMenuContext.BrainRegionHierarchy ? (
+            <HierarchySquare />
+          ) : (
+            <CloseOutlined className="text-primary-9/90" />
+          )}
+        </Button>
+      </div>
+      {/* <div className="flex w-full items-center gap-2 text-sm">
+        <div className="relative flex w-full flex-col items-start">
+          <span className="text-neutral-3">Species</span>
+          <SpeciesSwitcher options={speciesOptions} onSelect={handleSpeciesChange} />
+        </div>
+      </div> */}
+    </div>
+  );
+}
diff --git a/src/features/brain-region-hierarchy/species-switcher.tsx b/src/features/brain-region-hierarchy/species-switcher.tsx
new file mode 100644
index 000000000..597a24202
--- /dev/null
+++ b/src/features/brain-region-hierarchy/species-switcher.tsx
@@ -0,0 +1,63 @@
+import { useCallback, useState } from 'react';
+import { ConfigProvider, Select } from 'antd';
+
+import filterAndSortBasedOnPosition from '@/util/filterAndSortBasedOnPosition';
+import { cn } from '@/utils/css-class';
+
+import type { ISpecies } from '@/api/entitycore/types/shared/global';
+
+interface Props {
+  options: Array<{ value: string; label: string; data: ISpecies | null }>;
+  onSelect?: (species: ISpecies | null) => void;
+}
+
+export function SpeciesSwitcher({ options, onSelect }: Props) {
+  const [searchValue, setSearchValue] = useState<string | undefined>(undefined);
+  const handleSelect = useCallback(
+    (value: string) => {
+      const selectedOption = options.find((option) => option.value === value);
+      if (selectedOption) {
+        onSelect?.(selectedOption.data);
+      }
+    },
+    [options, onSelect]
+  );
+
+  return (
+    <div className="w-full">
+      <ConfigProvider theme={{ hashed: false }}>
+        <Select
+          id="region-search"
+          showSearch
+          allowClear
+          size="large"
+          autoClearSearchValue
+          placeholder="Search region..."
+          optionFilterProp="label"
+          value={searchValue}
+          onChange={(value) => {
+            setSearchValue(value);
+            handleSelect(value);
+          }}
+          style={{ width: '100%' }}
+          options={options}
+          onSearch={(value) => {
+            return filterAndSortBasedOnPosition(value, options);
+          }}
+          className={cn(
+            'rounded-full! outline-none',
+            '[&:hover_.ant-select-selector]:border-white!',
+            '[&.ant-select-focused_.ant-select-selector]:border-neutral-3!',
+            '[&.ant-select-focused_.ant-select-selector]:shadow-none!',
+            'has-[.ant-select-clear]:[&_.ant-select-arrow]:hidden!',
+            '[&_.ant-select-clear]:bg-transparent!',
+            '[&_.ant-select-selector]:rounded-full!',
+            '[&_.ant-select-selector]:border-neutral-1!',
+            '[&_.ant-select-selection-search-input]:text-sm!',
+            '[&_.ant-select-outlined:not(.ant-select-customize-input)_.ant-select-selector]:border-neutral-1!'
+          )}
+        />
+      </ConfigProvider>
+    </div>
+  );
+}
diff --git a/src/ui/layouts/explore-layout.tsx b/src/ui/layouts/explore-layout.tsx
index b860fc1b4..3d071d5e7 100644
--- a/src/ui/layouts/explore-layout.tsx
+++ b/src/ui/layouts/explore-layout.tsx
@@ -8,7 +8,18 @@ export function ExploreLayout({ children }: Props) {
   return (
     <div
       id="explore-layout"
-      className="bg-neutral-1 grid h-full max-h-[calc(100vh-6rem)] w-full grid-cols-[27rem_1fr] grid-rows-[4rem_1fr] gap-2 overflow-hidden [grid-template-areas:'header_header''aside_main']"
+      className="bg-neutral-1 grid h-full max-h-[calc(100vh-6rem)] w-full grid-cols-[27rem_1fr] grid-rows-[4rem_1fr] gap-2 overflow-hidden [grid-template-areas:'header_header''main_main']"
+    >
+      {children}
+    </div>
+  );
+}
+
+export function ExploreInnerLayout({ children }: Props) {
+  return (
+    <div
+      id="explore-inner-layout"
+      className="bg-neutral-1 border-neutral-2 mx-2 mb-2 grid h-full max-h-[calc(100vh-8rem)] w-[calc(100%-10px)] grid-cols-[27rem_1fr] gap-4 overflow-hidden rounded-2xl border p-2 [grid-area:main] [grid-template-areas:'aside_body']"
     >
       {children}
     </div>
diff --git a/src/ui/segments/ai/container.tsx b/src/ui/segments/ai/container.tsx
index 7f02edbf1..a3a7e8a16 100644
--- a/src/ui/segments/ai/container.tsx
+++ b/src/ui/segments/ai/container.tsx
@@ -44,7 +44,7 @@ export function Container(): JSX.Element {
   }, [isCollapsed, isFullscreen]);
 
   const targetHeight = useMemo<string>(
-    () => (isFullscreen ? 'calc(100vh - 1rem)' : 'calc(100vh - 6rem)'),
+    () => (isFullscreen ? 'calc(100vh - 1rem)' : 'calc(100vh - 5.7rem)'),
     [isFullscreen]
   );
 
diff --git a/src/ui/segments/explore/atlas.tsx b/src/ui/segments/explore/atlas.tsx
new file mode 100644
index 000000000..066c50818
--- /dev/null
+++ b/src/ui/segments/explore/atlas.tsx
@@ -0,0 +1,32 @@
+'use client';
+
+import { ErrorBoundary } from 'react-error-boundary';
+
+import { useGetSelectedBrainRegion } from '@/features/brain-region-hierarchy/context';
+import { withErrorConfig } from '@/components/GenericErrorFallback';
+import { AtlasViewer } from '@/features/brain-atlas-viewer';
+
+type Props = {
+  dataKey: string;
+};
+
+export function Atlas({ dataKey }: Props) {
+  const { selectedBrainRegion } = useGetSelectedBrainRegion();
+  return (
+    <div id="3d-area" className="3d bg-primary-9 relative h-full w-full rounded-2xl p-1">
+      <ErrorBoundary
+        FallbackComponent={withErrorConfig({
+          customError: 'failed to load atlas viewer',
+          showButtons: false,
+          cls: {
+            container:
+              'absolute inset-0 flex items-center justify-center bg-black/5 h-full! rounded-md',
+          },
+        })}
+        resetKeys={[selectedBrainRegion?.id]}
+      >
+        <AtlasViewer dataKey={dataKey} />
+      </ErrorBoundary>
+    </div>
+  );
+}
diff --git a/src/ui/segments/explore/entity-count.tsx b/src/ui/segments/explore/entity-count.tsx
new file mode 100644
index 000000000..747c9c7c6
--- /dev/null
+++ b/src/ui/segments/explore/entity-count.tsx
@@ -0,0 +1,255 @@
+import { LoadingOutlined } from '@ant-design/icons';
+import { useQueries } from '@tanstack/react-query';
+import { useMemo } from 'react';
+import { match } from 'ts-pattern';
+import get from 'lodash/get';
+
+import { ElectricalRecordingOriginDictionary } from '@/api/entitycore/types/entities/electrical-cell-recording';
+import { getElectricalCellRecordings } from '@/api/entitycore/queries/experimental/electrical-cell-recording';
+import { useFilteredCircuits } from '@/components/explore-section/Circuit/ListView/ExploreCircuitTable';
+import { PillTabs, PillTabsList, PillTabsTrigger } from '@/ui/molecules/tabs';
+import { getEntitiesCount } from '@/api/entitycore/queries/general/entity';
+import { useDefaultBreakpoint } from '@/ui/hooks/create-break-point';
+import { EntityTypeEnum } from '@/api/entitycore/types/entity-type';
+import { useTabs } from '@/components/detail-view-tabs';
+import { useWorkspace } from '@/ui/hooks/use-workspace';
+import { keyBuilder } from '@/ui/use-query-keys/data';
+import { Button } from '@/ui/molecules/button';
+import {
+  ExperimentalEntitiesTileTypes,
+  ModelEntitiesTileTypes,
+} from '@/ui/segments/explore/helpers';
+import {
+  DEFAULT_BRAIN_REGION_HIERARCHY_ID,
+  useGetSelectedBrainRegion,
+} from '@/features/brain-region-hierarchy/context';
+import { cn } from '@/utils/css-class';
+
+import type { WorkspaceContext } from '@/types/common';
+
+function getAllEntitiesCount({
+  virtualLabId,
+  projectId,
+  brainRegionId,
+}: WorkspaceContext & { brainRegionId: string }) {
+  return getEntitiesCount({
+    context: virtualLabId && projectId ? { virtualLabId, projectId } : undefined,
+    types: [
+      'experimental_synapses_per_connection',
+      'experimental_neuron_density',
+      'experimental_bouton_density',
+      'reconstruction_morphology',
+      'single_neuron_synaptome',
+      'memodel',
+      'emodel',
+    ],
+    brainRegion: {
+      within_brain_region_hierarchy_id: DEFAULT_BRAIN_REGION_HIERARCHY_ID,
+      within_brain_region_brain_region_id: brainRegionId ?? null,
+      within_brain_region_ascendants: false,
+    },
+  });
+}
+
+function getElectricalCellRecordingsCount({
+  virtualLabId,
+  projectId,
+  brainRegionId,
+}: WorkspaceContext & { brainRegionId: string }) {
+  return getElectricalCellRecordings({
+    withFacets: false,
+    context: virtualLabId && projectId ? { virtualLabId, projectId } : undefined,
+    filters: {
+      recording_origin: ElectricalRecordingOriginDictionary.InVitro,
+      page: 1,
+      page_size: 1,
+      within_brain_region_hierarchy_id: DEFAULT_BRAIN_REGION_HIERARCHY_ID,
+      within_brain_region_brain_region_id: brainRegionId ?? null,
+      within_brain_region_ascendants: false,
+    },
+  });
+}
+
+const ExploreDataTypeTabs = {
+  Experimental: 'experimental',
+  Model: 'model',
+} as const;
+type TExploreDataTypeTabs = (typeof ExploreDataTypeTabs)[keyof typeof ExploreDataTypeTabs];
+
+const tabsConfigItems: Array<{
+  key: TExploreDataTypeTabs;
+  title: string;
+  position: 'first' | 'middle' | 'last';
+}> = [
+  {
+    key: ExploreDataTypeTabs.Experimental,
+    title: 'Experimental',
+    position: 'first',
+  },
+  {
+    key: ExploreDataTypeTabs.Model,
+    title: 'Model',
+    position: 'last',
+  },
+];
+
+type Props = {
+  dataKey: string;
+};
+
+export function EntityCount({ dataKey }: Props) {
+  const breakpoint = useDefaultBreakpoint();
+  const { virtualLabId, projectId } = useWorkspace();
+  const { selectedBrainRegion } = useGetSelectedBrainRegion();
+  const { activeTab, onChangeTab } = useTabs<TExploreDataTypeTabs>({
+    tabsConfig: tabsConfigItems,
+    tabKey: 'data-type',
+    shallow: true,
+  });
+
+  const { filteredCircuits } = useFilteredCircuits({ dataKey });
+
+  const params = {
+    virtualLabId,
+    projectId,
+    brainRegionId: selectedBrainRegion?.id!,
+  };
+
+  const [{ isLoading: allLoading, data: allData }, { isLoading: ephysLoading, data: ephysData }] =
+    useQueries({
+      queries: [
+        {
+          queryKey: keyBuilder.dataCount({ ...params }),
+          queryFn: () => getAllEntitiesCount({ ...params }),
+          enabled: Boolean(selectedBrainRegion?.id),
+        },
+        {
+          queryKey: keyBuilder.electricalCellRecordingsCount({ ...params }),
+          queryFn: () =>
+            getElectricalCellRecordingsCount({
+              ...params,
+            }),
+          enabled: Boolean(selectedBrainRegion?.id),
+        },
+      ],
+    });
+
+  const experimentalState = useMemo(
+    () => [
+      ...Object.entries(ExperimentalEntitiesTileTypes).map(([, value]) => {
+        if (value.type === EntityTypeEnum.ElectricalCellRecording) {
+          return { ...value, isLoading: ephysLoading };
+        }
+        return { ...value, isLoading: allLoading };
+      }),
+    ],
+    [allLoading, ephysLoading]
+  );
+
+  const modelState = useMemo(
+    () => [
+      ...Object.entries(ModelEntitiesTileTypes).map(([, value]) => ({
+        ...value,
+        isLoading: allLoading,
+      })),
+    ],
+    [allLoading]
+  );
+
+  const content = match(activeTab)
+    .with('experimental', () => (
+      <>
+        {experimentalState.map((value) => {
+          let count: number | null = get(allData, value.type, null);
+          if (value.type === EntityTypeEnum.ElectricalCellRecording) {
+            count = ephysData?.pagination.total_items ?? null;
+          }
+
+          return (
+            <Button
+              rounded
+              key={`counter-${value.type}`}
+              variant="outline"
+              size="lg"
+              className="group w-full"
+            >
+              <div className="flex w-full items-center justify-between">
+                <div className="font-bold text-current">{value.title}</div>
+                <div className="text-neutral-4 text-sm font-light group-hover:font-bold group-hover:text-white">
+                  {value.isLoading ? <LoadingOutlined /> : <div>{count}</div>}
+                </div>
+              </div>
+            </Button>
+          );
+        })}
+      </>
+    ))
+    .with('model', () => (
+      <>
+        {modelState.map((value) => {
+          const count = get(allData, value.type, null);
+
+          return (
+            <Button
+              rounded
+              key={`counter-${value.type}`}
+              variant="outline"
+              size="lg"
+              className="group w-full"
+            >
+              <div className="flex w-full items-center justify-between">
+                <div className="font-bold text-current">{value.title}</div>
+                <div className="text-neutral-4 text-sm font-light group-hover:font-bold group-hover:text-white">
+                  {value.isLoading ? <LoadingOutlined /> : <div>{count}</div>}
+                </div>
+              </div>
+            </Button>
+          );
+        })}
+        <Button rounded key="counter-circuit" variant="outline" size="lg" className="group w-full">
+          <div className="flex w-full items-center justify-between">
+            <div className="font-bold text-current">Circuit</div>
+            <div className="text-neutral-4 text-sm font-light group-hover:font-bold group-hover:text-white">
+              {filteredCircuits.count}
+            </div>
+          </div>
+        </Button>
+      </>
+    ))
+    .otherwise(() => null);
+
+  return (
+    <div className="px-4">
+      <PillTabs
+        value={activeTab ?? 'all-public'}
+        defaultValue={activeTab ?? 'all-public'}
+        className="w-full"
+        activationMode="manual"
+        onValueChange={(value) => {
+          onChangeTab(value as TExploreDataTypeTabs)();
+        }}
+      >
+        <PillTabsList
+          className={cn('grid h-10 w-full grid-cols-2 bg-white p-0 shadow-2xl', {
+            'h-12': breakpoint === 'xl',
+          })}
+        >
+          {tabsConfigItems.map((tab) => (
+            <PillTabsTrigger
+              key={tab.key}
+              value={tab.key}
+              position={tab.position}
+              className={cn(
+                'data-[state=active]:bg-primary-9 hover:bg-neutral-1 hover:text-primary-8 h-10 px-14! py-3 text-base select-none data-[state=active]:font-bold data-[state=active]:text-white',
+                { 'h-12': breakpoint === 'xl' }
+              )}
+            >
+              {tab.title}
+            </PillTabsTrigger>
+          ))}
+        </PillTabsList>
+      </PillTabs>
+      <div className="my-4 flex w-full flex-col items-center justify-center gap-2">{content}</div>
+    </div>
+  );
+}
diff --git a/src/ui/segments/explore/header.tsx b/src/ui/segments/explore/header.tsx
index c0fecfe4c..a7cc94594 100644
--- a/src/ui/segments/explore/header.tsx
+++ b/src/ui/segments/explore/header.tsx
@@ -11,7 +11,6 @@ import { cn } from '@/utils/css-class';
 const ExploreSections = {
   AllPublic: 'all-public',
   Project: 'project',
-  Bookmarks: 'bookmarks',
 } as const;
 
 type ExploreSectionsKeys = (typeof ExploreSections)[keyof typeof ExploreSections];
@@ -29,11 +28,6 @@ const tabsConfigItems: Array<{
   {
     key: ExploreSections.Project,
     title: 'Project',
-    position: 'middle',
-  },
-  {
-    key: ExploreSections.Bookmarks,
-    title: 'Bookmarks',
     position: 'last',
   },
 ];
@@ -57,7 +51,7 @@ function ExploreTabs() {
       }}
     >
       <PillTabsList
-        className={cn('grid h-10 w-full grid-cols-3 bg-white p-0 shadow-2xl', {
+        className={cn('grid h-10 w-full grid-cols-2 bg-white p-0 shadow-2xl', {
           'h-12': breakpoint === 'xl',
         })}
       >
@@ -84,8 +78,20 @@ export function ExploreHeader() {
 
   return (
     <div className="flex w-full items-center justify-between gap-4 px-3 [grid-area:header]">
-      <div className="max-w-1/2">
+      <div className="flex max-w-1/2 items-center justify-center gap-2">
         <ExploreTabs />
+        <Button
+          rounded
+          size="lg"
+          variant="outline"
+          className={cn(
+            'inline-flex h-full items-center justify-center px-6 py-3 text-sm font-medium whitespace-nowrap shadow-2xl transition-all focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-none disabled:pointer-events-none disabled:opacity-50',
+            'hover:bg-neutral-1 hover:text-primary-8 h-10 border-none px-14! py-3 text-base select-none',
+            { 'h-12': breakpoint === 'xl' }
+          )}
+        >
+          Bookmarks
+        </Button>
       </div>
       <div className="max-w-1/2">
         <Button
diff --git a/src/ui/segments/explore/helpers.ts b/src/ui/segments/explore/helpers.ts
new file mode 100644
index 000000000..1f3c3537f
--- /dev/null
+++ b/src/ui/segments/explore/helpers.ts
@@ -0,0 +1,23 @@
+import { ReconstructionMorphology } from '@/entity-configuration/domain/experimental/reconstruction-morphology';
+import { ElectricalCellRecording } from '@/entity-configuration/domain/experimental/electrical-cell-recording';
+import { NeuronDensity } from '@/entity-configuration/domain/experimental/neuron-density';
+import { BoutonDensity } from '@/entity-configuration/domain/experimental/bouton-density';
+import { SynapsePerConnection } from '@/entity-configuration/domain/experimental/synapse-per-connection';
+import { Emodel } from '@/entity-configuration/domain/model/e-model';
+import { MEmodel } from '@/entity-configuration/domain/model/me-model';
+import { SingleNeuronSynaptome } from '@/entity-configuration/domain/model/single-neuron-synaptome';
+// import { Circuit } from '@/entity-configuration/domain/model/circuit';
+
+export const ExperimentalEntitiesTileTypes = {
+  ReconstructionMorphology,
+  ElectricalCellRecording,
+  NeuronDensity,
+  BoutonDensity,
+  SynapsePerConnection,
+} as const;
+
+export const ModelEntitiesTileTypes = {
+  Emodel,
+  MEmodel,
+  SingleNeuronSynaptome,
+} as const;
diff --git a/src/ui/segments/explore/left-menu.tsx b/src/ui/segments/explore/left-menu.tsx
new file mode 100644
index 000000000..2fdbecd46
--- /dev/null
+++ b/src/ui/segments/explore/left-menu.tsx
@@ -0,0 +1,66 @@
+'use client';
+
+import { AnimatePresence, motion } from 'motion/react';
+import React, { Suspense, useState } from 'react';
+
+import { TreeSkeleton } from '@/features/brain-region-hierarchy/brain-region-skeleton';
+import { BrainRegionHierarchy } from '@/features/brain-region-hierarchy';
+import { EntityCount } from '@/ui/segments/explore/entity-count';
+import {
+  ExploreLeftMenuContext,
+  RegionBanner,
+  TExploreLeftMenuContext,
+} from '@/features/brain-region-hierarchy/region-banner';
+
+type Props = { dataKey: string };
+
+export function ExploreMenu({ dataKey }: Props) {
+  const [view, updateView] = useState<TExploreLeftMenuContext>(
+    ExploreLeftMenuContext.BrainRegionHierarchy
+  );
+
+  const onSwitchView = (_view: TExploreLeftMenuContext) => updateView(_view);
+
+  return (
+    <div className="flex h-full flex-col">
+      <RegionBanner view={view} onSwitchView={onSwitchView} />
+      <AnimatePresence mode="wait" initial={false}>
+        {view === ExploreLeftMenuContext.BrainRegionHierarchy ? (
+          <motion.div
+            key="brain-region-hierarchy"
+            id="brain-region-hierarchy"
+            data-testid="brain-region-hierarchy"
+            initial={{ opacity: 0, y: 6 }}
+            animate={{ opacity: 1, y: 0 }}
+            exit={{ opacity: 0, y: -6 }}
+            transition={{ duration: 0.18, ease: 'easeOut' }}
+            className="min-h-0 flex-1 overflow-hidden"
+          >
+            <Suspense fallback={<TreeSkeleton />}>
+              <div className="flex h-full min-h-0 flex-col overflow-hidden">
+                <div className="text-primary-9/90 mb-1 px-5 text-base font-bold">Brain region</div>
+                <div className="min-h-0 flex-1 overflow-hidden">
+                  <BrainRegionHierarchy dataKey={dataKey} />
+                </div>
+              </div>
+            </Suspense>
+          </motion.div>
+        ) : (
+          <motion.div
+            key="data-type"
+            id="data-type"
+            data-testid="data-type"
+            initial={{ opacity: 0, y: 6 }}
+            animate={{ opacity: 1, y: 0 }}
+            exit={{ opacity: 0, y: -6 }}
+            transition={{ duration: 0.18, ease: 'easeOut' }}
+          >
+            <Suspense>
+              <EntityCount dataKey={dataKey} />
+            </Suspense>
+          </motion.div>
+        )}
+      </AnimatePresence>
+    </div>
+  );
+}
diff --git a/src/ui/segments/workspaces/space-switcher/index.tsx b/src/ui/segments/workspaces/space-switcher/index.tsx
index 4532944a2..bdb550a25 100644
--- a/src/ui/segments/workspaces/space-switcher/index.tsx
+++ b/src/ui/segments/workspaces/space-switcher/index.tsx
@@ -181,7 +181,12 @@ export function SpaceSwitcher({ className }: Props) {
     : 'Select project';
 
   useWorkspaceConfigurationClickEvent((event) => {
-    setBoardModalOpen(event.detail.on);
+    if (isExpanded && event.detail.on) setBoardModalOpen(event.detail.on);
+    else if (isExpanded && !event.detail.on) {
+      setBoardModalOpen(event.detail.on);
+      // TODO: ask for right behavior needed either to close the space switcher or to keep it open
+      setIsExpanded(false);
+    }
   });
 
   const onProClick = () => {
diff --git a/src/ui/use-query-keys/data.tsx b/src/ui/use-query-keys/data.tsx
new file mode 100644
index 000000000..7c0fc580d
--- /dev/null
+++ b/src/ui/use-query-keys/data.tsx
@@ -0,0 +1,22 @@
+import { WorkspaceContext } from '@/types/common';
+
+const prefix = 'explore-data';
+
+export const keyBuilder = {
+  dataCount: ({
+    virtualLabId,
+    projectId,
+    brainRegionId,
+  }: WorkspaceContext & { brainRegionId?: string }) => [
+    `${prefix}-count`,
+    { virtualLabId, projectId, brainRegionId: brainRegionId ?? '' },
+  ],
+  electricalCellRecordingsCount: ({
+    virtualLabId,
+    projectId,
+    brainRegionId,
+  }: WorkspaceContext & { brainRegionId?: string }) => [
+    `${prefix}-electrical-cell-recordings-count`,
+    { virtualLabId, projectId, brainRegionId: brainRegionId ?? '' },
+  ],
+};
diff --git a/src/ui/use-query-keys/workspace.tsx b/src/ui/use-query-keys/workspace.tsx
index 8f4feb51c..97e06f54b 100644
--- a/src/ui/use-query-keys/workspace.tsx
+++ b/src/ui/use-query-keys/workspace.tsx
@@ -4,18 +4,22 @@ const prefix = 'workspace';
 
 export const keyBuilder = {
   getOne: ({ virtualLabId, projectId }: WorkspaceContext) => [
-    `${prefix}-project/${virtualLabId}/${projectId}`,
+    `${prefix}/project`,
+    { virtualLabId, projectId },
   ],
-  getOneLab: ({ virtualLabId }: { virtualLabId: string }) => [`${prefix}-lab/${virtualLabId}`],
-  listAllLabs: () => [`${prefix}-all`],
+  getOneLab: ({ virtualLabId }: { virtualLabId: string }) => [`${prefix}-lab`, { virtualLabId }],
+  listAllLabs: () => [`${prefix}/all`],
   listWorkspaceProjects: ({ virtualLabId }: { virtualLabId: string }) => [
-    `${prefix}-projects-list/${virtualLabId}`,
+    `${prefix}/projects-list`,
+    { virtualLabId },
   ],
   listVirtualLabTeam: ({ virtualLabId }: { virtualLabId: string }) => [
-    `${prefix}-team/${virtualLabId}`,
+    `${prefix}/team`,
+    { virtualLabId },
   ],
   listProjectTeam: ({ virtualLabId, projectId }: WorkspaceContext) => [
-    `${prefix}-project-team/${virtualLabId}/${projectId}`,
+    `${prefix}/project-team`,
+    { virtualLabId, projectId },
   ],
   roles: () => [`${prefix}/roles`],
   credits: ({
@@ -24,16 +28,19 @@ export const keyBuilder = {
     page,
     pageSize,
   }: WorkspaceContext & { page: number; pageSize: number }) => [
-    `${prefix}}-project-credits/${virtualLabId}/${projectId}/${page}/${pageSize}`,
+    `${prefix}}/project-credits`,
+    { virtualLabId, projectId, page, pageSize },
   ],
   wallet: ({ virtualLabId, projectId }: WorkspaceContext) => [
-    `${prefix}-project-wallet/${virtualLabId}/${projectId}`,
+    `${prefix}/project-wallet`,
+    { virtualLabId, projectId },
   ],
   accounting: ({ virtualLabId }: { virtualLabId: string }) => [
-    `${prefix}-virtual-lab-balance/${virtualLabId}`,
+    `${prefix}/virtual-lab-balance/${virtualLabId}`,
   ],
   metrics: ({ virtualLabId, projectId }: WorkspaceContext) => [
-    `${prefix}-project-metrics/${virtualLabId}/${projectId}`,
+    `${prefix}/project-metrics`,
+    { virtualLabId, projectId },
   ],
   purchases: ({
     virtualLabId,
@@ -43,5 +50,5 @@ export const keyBuilder = {
     virtualLabId: string;
     page: number;
     pageSize: number;
-  }) => [`${prefix}-virtual-lab-purchases/${virtualLabId}/${page}/${pageSize}`],
+  }) => [`${prefix}/virtual-lab-purchases`, { virtualLabId, page, pageSize }],
 };