diff --git a/api-editor/gui/src/features/statistics/AnnotationStatistics.tsx b/api-editor/gui/src/features/statistics/AnnotationStatistics.tsx
index 4beb729ef..aeb4fc049 100644
--- a/api-editor/gui/src/features/statistics/AnnotationStatistics.tsx
+++ b/api-editor/gui/src/features/statistics/AnnotationStatistics.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { Button, Heading, SimpleGrid, VStack } from '@chakra-ui/react';
+import { Button, SimpleGrid } from '@chakra-ui/react';
 import { selectAnnotationStore } from '../annotations/annotationSlice';
 import { Annotation } from '../annotations/versioning/AnnotationStoreV2';
 import { useAppDispatch, useAppSelector } from '../../app/hooks';
@@ -52,33 +52,26 @@ export const AnnotationStatistics = function () {
     };
 
     return (
-        <VStack spacing={4}>
-            <Heading as="h3" size="md">
-                Annotations on Matched Elements
-            </Heading>
-            <SimpleGrid columns={{ base: 1, fullHD: 2 }} spacing={2}>
-                <Button onClick={() => filterAction('')}>Clear Filter</Button>
-                <Button onClick={() => filterAction('annotation:any')}>{'Any: ' + sum}</Button>
+        <SimpleGrid columns={{ base: 1, fullHD: 2 }} spacing={2}>
+            <Button onClick={() => filterAction('')}>Clear Filter</Button>
+            <Button onClick={() => filterAction('annotation:any')}>{'Any: ' + sum}</Button>
 
-                <Button onClick={() => filterAction('annotation:@boundary')}>
-                    {'@Boundary: ' + nBoundaryAnnotations}
-                </Button>
-                <Button onClick={() => filterAction('annotation:@calledAfter')}>
-                    {'@CalledAfter: ' + nCalledAfterAnnotations}
-                </Button>
-                <Button onClick={() => filterAction('annotation:@description')}>
-                    {'@Description: ' + nDescriptionAnnotations}
-                </Button>
-                <Button onClick={() => filterAction('annotation:@enum')}>{'@Enum: ' + nEnumAnnotations}</Button>
-                <Button onClick={() => filterAction('annotation:@group')}>{'@Group: ' + nGroupAnnotations}</Button>
-                <Button onClick={() => filterAction('annotation:@move')}>{'@Move: ' + nMoveAnnotations}</Button>
-                <Button onClick={() => filterAction('annotation:@pure')}>{'@Pure: ' + nPureAnnotations}</Button>
-                <Button onClick={() => filterAction('annotation:@remove')}>{'@Remove: ' + nRemoveAnnotations}</Button>
-                <Button onClick={() => filterAction('annotation:@rename')}>{'@Rename: ' + nRenameAnnotations}</Button>
-                <Button onClick={() => filterAction('annotation:@todo')}>{'@Todo: ' + nTodoAnnotations}</Button>
-                <Button onClick={() => filterAction('annotation:@value')}>{'@Value: ' + nValueAnnotations}</Button>
-            </SimpleGrid>
-        </VStack>
+            <Button onClick={() => filterAction('annotation:@boundary')}>{'@Boundary: ' + nBoundaryAnnotations}</Button>
+            <Button onClick={() => filterAction('annotation:@calledAfter')}>
+                {'@CalledAfter: ' + nCalledAfterAnnotations}
+            </Button>
+            <Button onClick={() => filterAction('annotation:@description')}>
+                {'@Description: ' + nDescriptionAnnotations}
+            </Button>
+            <Button onClick={() => filterAction('annotation:@enum')}>{'@Enum: ' + nEnumAnnotations}</Button>
+            <Button onClick={() => filterAction('annotation:@group')}>{'@Group: ' + nGroupAnnotations}</Button>
+            <Button onClick={() => filterAction('annotation:@move')}>{'@Move: ' + nMoveAnnotations}</Button>
+            <Button onClick={() => filterAction('annotation:@pure')}>{'@Pure: ' + nPureAnnotations}</Button>
+            <Button onClick={() => filterAction('annotation:@remove')}>{'@Remove: ' + nRemoveAnnotations}</Button>
+            <Button onClick={() => filterAction('annotation:@rename')}>{'@Rename: ' + nRenameAnnotations}</Button>
+            <Button onClick={() => filterAction('annotation:@todo')}>{'@Todo: ' + nTodoAnnotations}</Button>
+            <Button onClick={() => filterAction('annotation:@value')}>{'@Value: ' + nValueAnnotations}</Button>
+        </SimpleGrid>
     );
 };
 
diff --git a/api-editor/gui/src/features/statistics/ApiSizeStatistics.tsx b/api-editor/gui/src/features/statistics/ApiSizeStatistics.tsx
index 1dc2dc990..213277bfd 100644
--- a/api-editor/gui/src/features/statistics/ApiSizeStatistics.tsx
+++ b/api-editor/gui/src/features/statistics/ApiSizeStatistics.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { Box, Flex, Heading, VStack } from '@chakra-ui/react';
+import { Box, Flex } from '@chakra-ui/react';
 import { useAppSelector } from '../../app/hooks';
 import { selectRawPythonPackage } from '../packageData/apiSlice';
 import { selectUsages } from '../usages/usageSlice';
@@ -26,24 +26,19 @@ export const ApiSizeStatistics = function () {
     const parameterBarChart = <CustomBarChart labels={parameterLabels} values={parameterValues} title={'Parameters'} />;
 
     return (
-        <VStack spacing={2}>
-            <Heading as="h3" size="md">
-                API Size
-            </Heading>
-            <Box width="100%">
-                <Flex wrap="wrap">
-                    <Box minWidth="350px" flex="1 1 33%">
-                        {classBarChart}
-                    </Box>
-                    <Box minWidth="350px" flex="1 1 33%">
-                        {functionBarChart}
-                    </Box>
-                    <Box minWidth="350px" flex="1 33%">
-                        {parameterBarChart}
-                    </Box>
-                </Flex>
-            </Box>
-        </VStack>
+        <Box width="100%">
+            <Flex wrap="wrap">
+                <Box minWidth="350px" flex="1 1 33%">
+                    {classBarChart}
+                </Box>
+                <Box minWidth="350px" flex="1 1 33%">
+                    {functionBarChart}
+                </Box>
+                <Box minWidth="350px" flex="1 33%">
+                    {parameterBarChart}
+                </Box>
+            </Flex>
+        </Box>
     );
 };
 
diff --git a/api-editor/gui/src/features/statistics/ApiSizeVsUsefulnessStatistics.tsx b/api-editor/gui/src/features/statistics/ApiSizeVsUsefulnessStatistics.tsx
index f064b867a..d8a8cd5dd 100644
--- a/api-editor/gui/src/features/statistics/ApiSizeVsUsefulnessStatistics.tsx
+++ b/api-editor/gui/src/features/statistics/ApiSizeVsUsefulnessStatistics.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { Box, Flex, Heading, VStack } from '@chakra-ui/react';
+import { Box, Flex } from '@chakra-ui/react';
 import { useAppSelector } from '../../app/hooks';
 import { selectRawPythonPackage } from '../packageData/apiSlice';
 import { selectUsages } from '../usages/usageSlice';
@@ -43,23 +43,18 @@ export const ApiSizeVsUsefulnessStatistics = function () {
     );
 
     return (
-        <VStack spacing={2}>
-            <Heading as="h3" size="md">
-                API Size per Minimum Usefulness Threshold
-            </Heading>
-            <Box width="100%">
-                <Flex wrap="wrap">
-                    <Box minWidth="350px" flex="1 1 33%">
-                        {classLineChart}
-                    </Box>
-                    <Box minWidth="350px" flex="1 1 33%">
-                        {functionLineChart}
-                    </Box>
-                    <Box minWidth="350px" flex="1 1 33%">
-                        {parameterLineChart}
-                    </Box>
-                </Flex>
-            </Box>
-        </VStack>
+        <Box width="100%">
+            <Flex wrap="wrap">
+                <Box minWidth="350px" flex="1 1 33%">
+                    {classLineChart}
+                </Box>
+                <Box minWidth="350px" flex="1 1 33%">
+                    {functionLineChart}
+                </Box>
+                <Box minWidth="350px" flex="1 1 33%">
+                    {parameterLineChart}
+                </Box>
+            </Flex>
+        </Box>
     );
 };
diff --git a/api-editor/gui/src/features/statistics/ProgressStatistics.tsx b/api-editor/gui/src/features/statistics/ProgressStatistics.tsx
index 7bfdcfd96..00d6cdfd5 100644
--- a/api-editor/gui/src/features/statistics/ProgressStatistics.tsx
+++ b/api-editor/gui/src/features/statistics/ProgressStatistics.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { Box, Heading, SimpleGrid, useColorModeValue, VStack } from '@chakra-ui/react';
+import { Box, SimpleGrid, useColorModeValue } from '@chakra-ui/react';
 import { useAppSelector } from '../../app/hooks';
 import { selectMatchedNodes } from '../packageData/apiSlice';
 import { selectAllAnnotationsOnTargets, selectAnnotationStore } from '../annotations/annotationSlice';
@@ -74,20 +74,15 @@ export const ProgressStatistics = function () {
     };
 
     return (
-        <VStack spacing={2}>
-            <Heading as="h3" size="md">
-                Progress on Matched Elements
-            </Heading>
-            <Box width="100%">
-                <SimpleGrid columns={{ base: 1, fullHD: 2 }} width="100%">
-                    <Box>
-                        <Pie data={completionData} options={completionOptions} />
-                    </Box>
-                    <Box>
-                        <Pie data={correctnessData} options={correctnessOptions} />
-                    </Box>
-                </SimpleGrid>
-            </Box>
-        </VStack>
+        <Box width="100%">
+            <SimpleGrid columns={{ base: 1, fullHD: 2 }} width="100%">
+                <Box>
+                    <Pie data={completionData} options={completionOptions} />
+                </Box>
+                <Box>
+                    <Pie data={correctnessData} options={correctnessOptions} />
+                </Box>
+            </SimpleGrid>
+        </Box>
     );
 };
diff --git a/api-editor/gui/src/features/statistics/QualityStatistics.tsx b/api-editor/gui/src/features/statistics/QualityStatistics.tsx
index 6a7aed885..b7503a745 100644
--- a/api-editor/gui/src/features/statistics/QualityStatistics.tsx
+++ b/api-editor/gui/src/features/statistics/QualityStatistics.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { Box, Heading, SimpleGrid, useColorModeValue, VStack } from '@chakra-ui/react';
+import { Box, SimpleGrid, useColorModeValue } from '@chakra-ui/react';
 import { useAppSelector } from '../../app/hooks';
 import { Pie } from 'react-chartjs-2';
 
@@ -13,31 +13,20 @@ export const QualityStatistics = function () {
     const annotationStore = useAppSelector(selectAnnotationStore);
 
     return (
-        <VStack spacing={2}>
-            <Heading as="h3" size="md">
-                Quality of Autogenerated Annotations
-            </Heading>
-            <Box width="100%">
-                <SimpleGrid columns={{ base: 1, fullHD: 2 }} width="100%">
-                    <QualityPieChart
-                        annotationType="Boundary"
-                        annotations={Object.values(annotationStore.boundaryAnnotations)}
-                    />
-                    <QualityPieChart
-                        annotationType="Enum"
-                        annotations={Object.values(annotationStore.enumAnnotations)}
-                    />
-                    <QualityPieChart
-                        annotationType="Remove"
-                        annotations={Object.values(annotationStore.removeAnnotations)}
-                    />
-                    <QualityPieChart
-                        annotationType="Value"
-                        annotations={Object.values(annotationStore.valueAnnotations)}
-                    />
-                </SimpleGrid>
-            </Box>
-        </VStack>
+        <Box width="100%">
+            <SimpleGrid columns={{ base: 1, fullHD: 2 }} width="100%">
+                <QualityPieChart
+                    annotationType="Boundary"
+                    annotations={Object.values(annotationStore.boundaryAnnotations)}
+                />
+                <QualityPieChart annotationType="Enum" annotations={Object.values(annotationStore.enumAnnotations)} />
+                <QualityPieChart
+                    annotationType="Remove"
+                    annotations={Object.values(annotationStore.removeAnnotations)}
+                />
+                <QualityPieChart annotationType="Value" annotations={Object.values(annotationStore.valueAnnotations)} />
+            </SimpleGrid>
+        </Box>
     );
 };
 
diff --git a/api-editor/gui/src/features/statistics/StatisticsView.tsx b/api-editor/gui/src/features/statistics/StatisticsView.tsx
index 2000e7417..81c4853c5 100644
--- a/api-editor/gui/src/features/statistics/StatisticsView.tsx
+++ b/api-editor/gui/src/features/statistics/StatisticsView.tsx
@@ -1,5 +1,13 @@
 import React from 'react';
-import { VStack } from '@chakra-ui/react';
+import {
+    Accordion,
+    AccordionButton,
+    AccordionIcon,
+    AccordionItem,
+    AccordionPanel,
+    Box,
+    VStack,
+} from '@chakra-ui/react';
 import { AnnotationStatistics } from './AnnotationStatistics';
 import { ApiSizeStatistics } from './ApiSizeStatistics';
 import { ApiSizeVsUsefulnessStatistics } from './ApiSizeVsUsefulnessStatistics';
@@ -9,13 +17,95 @@ import { QualityStatistics } from './QualityStatistics';
 
 export const StatisticsView: React.FC = function () {
     return (
-        <VStack spacing={8}>
-            <ProgressStatistics />
-            <AnnotationStatistics />
-            <ApiSizeStatistics />
-            <ApiSizeVsUsefulnessStatistics />
-            <QualityStatistics />
-            <AchievementDisplay />
-        </VStack>
+        <Accordion defaultIndex={0} allowToggle>
+            <AccordionItem>
+                <h2>
+                    <AccordionButton>
+                        <Box flex="1" textAlign="left">
+                            Progress on Matched Elements
+                        </Box>
+                        <AccordionIcon />
+                    </AccordionButton>
+                </h2>
+                <AccordionPanel pb={4}>
+                    <VStack spacing={8}>
+                        <ProgressStatistics />
+                    </VStack>
+                </AccordionPanel>
+            </AccordionItem>
+            <AccordionItem>
+                <h2>
+                    <AccordionButton>
+                        <Box flex="1" textAlign="left">
+                            Annotations on Matched Elements
+                        </Box>
+                        <AccordionIcon />
+                    </AccordionButton>
+                </h2>
+                <AccordionPanel pb={4}>
+                    <AnnotationStatistics />
+                </AccordionPanel>
+            </AccordionItem>
+            <AccordionItem>
+                <h2>
+                    <AccordionButton>
+                        <Box flex="1" textAlign="left">
+                            API Size
+                        </Box>
+                        <AccordionIcon />
+                    </AccordionButton>
+                </h2>
+                <AccordionPanel pb={4}>
+                    <VStack spacing={8}>
+                        <ApiSizeStatistics />
+                    </VStack>
+                </AccordionPanel>
+            </AccordionItem>
+            <AccordionItem>
+                <h2>
+                    <AccordionButton>
+                        <Box flex="1" textAlign="left">
+                            API Size per Minimum Usefulness Threshold
+                        </Box>
+                        <AccordionIcon />
+                    </AccordionButton>
+                </h2>
+                <AccordionPanel pb={4}>
+                    <VStack spacing={8}>
+                        <ApiSizeVsUsefulnessStatistics />
+                    </VStack>
+                </AccordionPanel>
+            </AccordionItem>
+            <AccordionItem>
+                <h2>
+                    <AccordionButton>
+                        <Box flex="1" textAlign="left">
+                            Quality of Autogenerated Annotations
+                        </Box>
+                        <AccordionIcon />
+                    </AccordionButton>
+                </h2>
+                <AccordionPanel pb={4}>
+                    <VStack spacing={8}>
+                        <QualityStatistics />
+                    </VStack>
+                </AccordionPanel>
+            </AccordionItem>
+            <AccordionItem>
+                <h2>
+                    <AccordionButton>
+                        <Box flex="1" textAlign="left">
+                            Achievements
+                        </Box>
+                        <AccordionIcon />
+                    </AccordionButton>
+                </h2>
+                <AccordionPanel pb={4}>
+                    <VStack spacing={8}>
+                        <AchievementDisplay />
+                    </VStack>
+                </AccordionPanel>
+            </AccordionItem>
+        </Accordion>
     );
 };