diff --git a/package.json b/package.json
index d0f68614..f84dcc41 100644
--- a/package.json
+++ b/package.json
@@ -45,6 +45,7 @@
     "lint": "next lint --max-warnings 100"
   },
   "dependencies": {
+    "@radix-ui/react-accordion": "^1.2.12",
     "@radix-ui/react-dialog": "^1.1.15",
     "@radix-ui/react-scroll-area": "^1.2.9",
     "@radix-ui/react-separator": "^1.1.7",
diff --git a/src/components/ui/MainPanel/MetaDataInfo.tsx b/src/components/ui/MainPanel/MetaDataInfo.tsx
index 66937af5..293ef87c 100644
--- a/src/components/ui/MainPanel/MetaDataInfo.tsx
+++ b/src/components/ui/MainPanel/MetaDataInfo.tsx
@@ -196,7 +196,7 @@ const MetaDataInfo = ({ meta, metadata, setShowMeta, setOpenVariables, popoverSi
         <b>{`${meta.long_name} `}</b>
           { popoverSide=="left" ? <Popover>
             <PopoverTrigger className="cursor-pointer" asChild>
-              <Badge variant="default">
+              <Badge variant="default" className="block">
               Attributes
               </Badge>
             </PopoverTrigger>
@@ -209,7 +209,7 @@ const MetaDataInfo = ({ meta, metadata, setShowMeta, setOpenVariables, popoverSi
             </PopoverContent>
           </Popover>
           :
-          <Metadata data={metadata} variable ={'Attributes'} />
+          <div> <Metadata data={metadata} variable ={'Attributes'} /> </div>
           }
         <br/>
         <br/>
diff --git a/src/components/ui/MainPanel/Variables.tsx b/src/components/ui/MainPanel/Variables.tsx
index f490ef1c..733b3add 100644
--- a/src/components/ui/MainPanel/Variables.tsx
+++ b/src/components/ui/MainPanel/Variables.tsx
@@ -20,6 +20,12 @@ import {
   DialogContent,
   DialogTitle,
 } from "@/components/ui/dialog";
+import {
+  Accordion,
+  AccordionContent,
+  AccordionItem,
+  AccordionTrigger,
+} from "@/components/ui/accordion";
 import { ZarrDataset } from "@/components/zarr/ZarrLoaderLRU";
 
 const Variables = ({
@@ -44,42 +50,105 @@ const Variables = ({
   );
   const { currentStore } = useZarrStore(useShallow(state => ({
     currentStore: state.currentStore,
-  })))
-  const ZarrDS = useMemo(() => new ZarrDataset(currentStore), [currentStore])
+  })));
+  const ZarrDS = useMemo(() => new ZarrDataset(currentStore), [currentStore]);
 
-  const [dimArrays, setDimArrays] = useState([[0],[0],[0]])
-  const [dimUnits, setDimUnits] = useState([null,null,null])
-  const [dimNames, setDimNames] = useState<string[]> (["Default"])
+  const [dimArrays, setDimArrays] = useState([[0],[0],[0]]);
+  const [dimUnits, setDimUnits] = useState([null,null,null]);
+  const [dimNames, setDimNames] = useState<string[]>(["Default"]);
 
   const [selectedIndex, setSelectedIndex] = useState<number | null>(null);
   const [selectedVar, setSelectedVar] = useState<string | null>(null);
   const [meta, setMeta] = useState<any>(null);
   const [query, setQuery] = useState("");
+  // root *open by default* (collapsible but starts open)
+  const [openAccordionItems, setOpenAccordionItems] = useState<string[]>(["root"]);
 
-  const filtered = useMemo(() => {
+  // Build nested variable tree
+  const tree = useMemo(() => {
     const q = query.toLowerCase().trim();
-    if (!q) return variables;
-    return variables.filter((variable) =>
-      variable.toLowerCase().includes(q)
-    );
+    let filteredVars = variables ?? [];
+
+    if (q) {
+      filteredVars = filteredVars.filter((variable) =>
+        variable.toLowerCase().includes(q)
+      );
+    }
+
+    const buildTree = (vars: string[]) => {
+      const t: any = {};
+      vars.forEach((v) => {
+        const parts = v.split("/");
+        let current = t;
+        parts.forEach((p, i) => {
+          if (!current[p]) current[p] = i === parts.length - 1 ? null : {};
+          current = current[p];
+        });
+      });
+      return t;
+    };
+
+    return buildTree(filteredVars);
   }, [query, variables]);
 
+  // Get all group paths (for auto-open when searching)
+  const getGroupPaths = (subtree: any, basePath = ""): string[] => {
+    let paths: string[] = [];
+    Object.entries(subtree).forEach(([key, value]) => {
+      const currentPath = basePath ? `${basePath}/${key}` : key;
+      if (value && typeof value === "object") {
+        paths.push(currentPath);
+        paths = paths.concat(getGroupPaths(value, currentPath));
+      }
+    });
+    return paths;
+  };
+
+  // Auto-open accordions that contain matches
+  useEffect(() => {
+    if (query.trim()) {
+      const openPaths = getGroupPaths(tree);
+      setOpenAccordionItems(["root", ...openPaths]);
+    } else {
+      // when not searching keep root open by default
+      setOpenAccordionItems(["root"]);
+    }
+  }, [query, tree]);
+
+  // Handle variable selection
+  const handleVariableSelect = (val: string, idx: number) => {
+    setSelectedIndex(idx);
+    setSelectedVar(val);
+    GetDimInfo(val).then(e => {
+      setDimNames(e.dimNames);
+      setDimArrays(e.dimArrays);
+      setDimUnits(e.dimUnits);
+    });
+
+    if (popoverSide === "left") {
+      setOpenMetaPopover(true);
+    } else {
+      setShowMeta(true);
+    }
+  };
+
   useEffect(() => {
     if (variables && zMeta && selectedVar) {
       const relevant = zMeta.find((e: any) => e.name === selectedVar);
       if (relevant){
         setMeta({...relevant, dimInfo : {dimArrays, dimNames, dimUnits}});
-        ZarrDS.GetAttributes(selectedVar).then(e=>setMetadata(e))
+        ZarrDS.GetAttributes(selectedVar).then(e=>setMetadata(e));
       }
     }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [selectedVar, variables, zMeta, dimArrays, dimNames, dimUnits]);
 
   useEffect(()=>{
-    setSelectedIndex(null)
-    setSelectedVar(null)
-    setMeta(null)
-    setMetadata(null)
-  },[initStore])
+    setSelectedIndex(null);
+    setSelectedVar(null);
+    setMeta(null);
+    setMetadata(null);
+  },[initStore, setMetadata]);
 
   useEffect(() => {
     const handleResize = () => {
@@ -90,38 +159,99 @@ const Variables = ({
     return () => window.removeEventListener("resize", handleResize);
   }, []);
 
+  // Variable item renderer (keeps separator between variables in same group)
+  const VariableItem = ({ val, idx, arrayLength }: { val: string; idx: number; arrayLength: number }) => {
+    const variableName = val.split('/').pop() || val;
+    const isLastItem = idx === arrayLength - 1;
+
+    return (
+      <React.Fragment key={val}>
+        <div
+          className="cursor-pointer pl-2 py-1 text-sm hover:bg-muted rounded"
+          style={{
+            background: selectedVar === val ? "var(--muted-foreground)" : "",
+          }}
+          onClick={() => handleVariableSelect(val, idx)}
+        >
+          {variableName}
+        </div>
+        {!isLastItem && <Separator className="my-1" />}
+      </React.Fragment>
+    );
+  };
+
+  // render a subtree inside an Accordion (ensures AccordionItem children are direct children of an Accordion)
+  const renderSubtreeAccordion = (subtree: any, basePath = "") => {
+    // Determine entries (keep variables first then groups for clarity)
+    const entries = Object.entries(subtree);
+    const variableEntries = entries.filter(([_, v]) => v === null);
+    const groupEntries = entries.filter(([_, v]) => v && typeof v === "object");
+
+    return (
+      <Accordion
+        key={basePath || "__root_inner__"}
+        type="multiple"
+        value={openAccordionItems}
+        onValueChange={setOpenAccordionItems}
+        className="w-full"
+      >
+        {/* variables at this level */}
+        {variableEntries.length > 0 && (
+          <div className="px-1">
+            {variableEntries.map(([name], idx) => {
+              const varPath = basePath ? `${basePath}/${name}` : name;
+              return (
+                <VariableItem
+                  key={varPath}
+                  val={varPath}
+                  idx={idx}
+                  arrayLength={variableEntries.length}
+                />
+              );
+            })}
+          </div>
+        )}
+
+        {/* groups at this level */}
+        {groupEntries.map(([name, subtreeValue]) => {
+          const currentPath = basePath ? `${basePath}/${name}` : name;
+          return (
+            <AccordionItem key={currentPath} value={currentPath}>
+              <AccordionTrigger className="cursor-pointer pl-2">
+                {name}
+              </AccordionTrigger>
+              <AccordionContent className="flex flex-col pl-2">
+                {/* recursively render children inside their own Accordion */}
+                {renderSubtreeAccordion(subtreeValue, currentPath)}
+              </AccordionContent>
+            </AccordionItem>
+          );
+        })}
+      </Accordion>
+    );
+  };
+
+  // render full Variable list under "root" accordion item
   const VariableList = (
     <div className="overflow-y-auto flex-1 [&::-webkit-scrollbar]:hidden">
-      {filtered.length > 0 ? (
-        filtered.map((val, idx) => (
-          <React.Fragment key={idx}>
-            <div
-              className="cursor-pointer pl-2 py-1 text-sm hover:bg-muted rounded"
-              style={{
-                background:
-                  idx === selectedIndex ? "var(--muted-foreground)" : "",
-              }}
-              onClick={() => {
-                setSelectedIndex(idx);
-                setSelectedVar(val);
-                GetDimInfo(val).then(e=>{setDimNames(e.dimNames); setDimArrays(e.dimArrays); setDimUnits(e.dimUnits)})
-                if (popoverSide === "left") {
-                  setOpenMetaPopover(true);
-                } else {
-                  setShowMeta(true);
-                }
-              }}
-            >
-              {val}
-            </div>
-            {idx !== filtered.length - 1 && <Separator className="my-1" />}
-          </React.Fragment>
-        ))
+      {Object.keys(tree).length > 0 ? (
+        <Accordion
+          type="multiple"
+          className="w-full"
+          value={openAccordionItems}
+          onValueChange={setOpenAccordionItems}
+        >
+          <AccordionItem key="root" value="root">
+            <AccordionTrigger className="cursor-pointer">/</AccordionTrigger>
+            <AccordionContent className="flex flex-col">
+              {/* render the top-level subtree inside its own Accordion so nested AccordionItems are legal */}
+              {renderSubtreeAccordion(tree, "")}
+            </AccordionContent>
+          </AccordionItem>
+        </Accordion>
       ) : (
         <div className="text-center text-muted-foreground py-2">
-          {query
-            ? "No variables found matching your search."
-            : "No variables available."}
+          {query ? "No variables found matching your search." : "No variables available."}
         </div>
       )}
     </div>
@@ -187,11 +317,11 @@ const Variables = ({
         <Popover open={openMetaPopover} onOpenChange={setOpenMetaPopover}>
           <PopoverTrigger asChild>
             <div
-          className="absolute -top-8" // adjust top position as needed
-          style={{
-            left: `-${280}px`, // move left
-            }}
-        />
+              className="absolute -top-8" // adjust top position as needed
+              style={{
+                left: `-${280}px`, // move to left of variable popover
+              }}
+            />
           </PopoverTrigger>
           <PopoverContent
             data-meta-popover
@@ -200,13 +330,13 @@ const Variables = ({
             className="max-h-[80vh] overflow-y-auto w-[300px]"
           >
             {meta && (
-                <MetaDataInfo 
-                  meta={meta}
-                  metadata={metadata??{}}
-                  setShowMeta={setOpenMetaPopover} 
-                  setOpenVariables={setOpenVariables}
-                  popoverSide={"left"}
-                />
+              <MetaDataInfo
+                meta={meta}
+                metadata={metadata ?? {}}
+                setShowMeta={setOpenMetaPopover}
+                setOpenVariables={setOpenVariables}
+                popoverSide={"left"}
+              />
             )}
           </PopoverContent>
         </Popover>
@@ -219,7 +349,7 @@ const Variables = ({
               {meta && (
                 <MetaDataInfo
                   meta={meta}
-                  metadata={metadata??{}}
+                  metadata={metadata ?? {}}
                   setShowMeta={setShowMeta}
                   setOpenVariables={setOpenVariables}
                   popoverSide={"top"}
diff --git a/src/components/ui/accordion.tsx b/src/components/ui/accordion.tsx
new file mode 100644
index 00000000..abb96119
--- /dev/null
+++ b/src/components/ui/accordion.tsx
@@ -0,0 +1,67 @@
+"use client"
+
+import * as React from "react"
+import * as AccordionPrimitive from "@radix-ui/react-accordion"
+import { ChevronDownIcon } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+
+function Accordion({
+  ...props
+}: React.ComponentProps<typeof AccordionPrimitive.Root>) {
+  return <AccordionPrimitive.Root data-slot="accordion" {...props} />
+}
+
+function AccordionItem({
+  className,
+  ...props
+}: React.ComponentProps<typeof AccordionPrimitive.Item>) {
+  return (
+    <AccordionPrimitive.Item
+      data-slot="accordion-item"
+      className={cn("border-b last:border-b-0 mb-1", className)}
+      {...props}
+    />
+  )
+}
+
+function AccordionTrigger({
+  className,
+  children,
+  ...props
+}: React.ComponentProps<typeof AccordionPrimitive.Trigger>) {
+  return (
+    <AccordionPrimitive.Header className="flex">
+      <AccordionPrimitive.Trigger
+        data-slot="accordion-trigger"
+        className={cn(
+          "focus-visible:border-ring focus-visible:ring-ring/50 flex flex-1 items-start justify-between gap-4 rounded-md py-2 text-left text-sm font-medium transition-all outline-none hover:underline focus-visible:ring-[3px] disabled:pointer-events-none disabled:opacity-50 [&[data-state=open]>svg]:rotate-180",
+          className
+        )}
+        {...props}
+      >
+        {children}
+        <ChevronDownIcon className="text-muted-foreground pointer-events-none size-4 shrink-0 translate-y-0.5 transition-transform duration-200" />
+      </AccordionPrimitive.Trigger>
+    </AccordionPrimitive.Header>
+  )
+}
+
+function AccordionContent({
+  className,
+  children,
+  ...props
+}: React.ComponentProps<typeof AccordionPrimitive.Content>) {
+  return (
+    <AccordionPrimitive.Content
+      data-slot="accordion-content"
+      className="data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down overflow-hidden text-sm"
+      {...props}
+    >
+      <div className={cn("pt-0 pb-2", className)}>{children}</div>
+    </AccordionPrimitive.Content>
+  )
+}
+
+export { Accordion, AccordionItem, AccordionTrigger, AccordionContent }
+
diff --git a/src/components/zarr/GetMetadata.tsx b/src/components/zarr/GetMetadata.tsx
index df8e8d03..74f81f5e 100644
--- a/src/components/zarr/GetMetadata.tsx
+++ b/src/components/zarr/GetMetadata.tsx
@@ -57,6 +57,11 @@ export async function GetZarrMetadata(groupStore: Promise<zarr.Group<zarr.FetchS
             
             const totalSize = totalElements * dtypeSize;
             const chunkSize = chunkElements * dtypeSize;
+            // Extract group path from the item path
+            const fullPath = item.path.substring(1); // Remove leading '/'
+            const pathParts = fullPath.split('/');
+            const groupPath = pathParts.length > 1 ? pathParts.slice(0, -1).join('/') : undefined;
+            // ? should we query the node type instead or in addition?
 
             variables.push({
                 name: item.path.substring(1),
@@ -69,7 +74,8 @@ export async function GetZarrMetadata(groupStore: Promise<zarr.Group<zarr.FetchS
                 totalSizeFormatted: formatBytes(totalSize),
                 chunkCount: chunkCount,
                 chunkSize: chunkSize,
-                chunkSizeFormatted: formatBytes(chunkSize)
+                chunkSizeFormatted: formatBytes(chunkSize),
+                groupPath: groupPath
             });
         }
     }
diff --git a/src/components/zarr/Interfaces.tsx b/src/components/zarr/Interfaces.tsx
index 8984548b..bda24e9e 100644
--- a/src/components/zarr/Interfaces.tsx
+++ b/src/components/zarr/Interfaces.tsx
@@ -8,6 +8,7 @@ export interface ZarrMetadata {
     chunkCount: number;
     chunkSize: number;  // in bytes
     chunkSizeFormatted: string;  // human readable
+    groupPath?: string;  // path to the group containing this array
 }
 
 export interface ZarrTitleDescription {
diff --git a/src/components/zarr/MetadataText.tsx b/src/components/zarr/MetadataText.tsx
index 21f85b90..720e8250 100644
--- a/src/components/zarr/MetadataText.tsx
+++ b/src/components/zarr/MetadataText.tsx
@@ -47,7 +47,7 @@ export default function MetadataText({
 
   const content = `
 name: ${metadata.name}
-shape: [${formatArray(metadata.shape)}]
+${metadata.groupPath ? `group: ${metadata.groupPath}\n` : ''}shape: [${formatArray(metadata.shape)}]
 chunks: [${formatArray(metadata.chunks)}]
 dtype: ${metadata.dtype}
 total size: ${metadata.totalSizeFormatted}
diff --git a/src/components/zarr/ZarrLoaderLRU.ts b/src/components/zarr/ZarrLoaderLRU.ts
index 4a7dfb1d..ce3f38a9 100644
--- a/src/components/zarr/ZarrLoaderLRU.ts
+++ b/src/components/zarr/ZarrLoaderLRU.ts
@@ -543,8 +543,11 @@ export class ZarrDataset{
 		const fallBackNames: string[] = [];
 		if (this.dimNames){
 			for (const dim of this.dimNames){
-				dimArr.push(cache.get(`${initStore}_${dim}`));
-				dimUnits.push(cache.get(`${initStore}_${dim}_meta`).units)
+				const dimArray = cache.get(`${initStore}_${dim}`)
+				const dimMeta = cache.get(`${initStore}_${dim}_meta`)
+				
+				dimArr.push(dimArray ?? [0]) // this should not happend
+				dimUnits.push(dimMeta?.units ?? null) // Units may not be present
 			}
 		} else {
 			const shape = cache.get(`${initStore}_${variable}_meta`).shape
diff --git a/src/utils/HelperFuncs.ts b/src/utils/HelperFuncs.ts
index 4ca27693..97fc9c4b 100644
--- a/src/utils/HelperFuncs.ts
+++ b/src/utils/HelperFuncs.ts
@@ -294,8 +294,11 @@ export async function GetDimInfo(variable:string){
     const dimNames = meta._ARRAY_DIMENSIONS as string[]
     if (dimNames){
       for (const dim of dimNames){
-        dimArrays.push(cache.get(`${initStore}_${dim}`))
-        dimUnits.push(cache.get(`${initStore}_${dim}_meta`).units)
+        const dimArray = cache.get(`${initStore}_${dim}`)
+        const dimMeta = cache.get(`${initStore}_${dim}_meta`)
+
+        dimArrays.push(dimArray ?? [0]) // guard against missing cached arrays, though this should not happen
+        dimUnits.push(dimMeta?.units ?? null) // guards against missing cached metadata
       }
     } else {
       for (const dimLength of meta.shape){