diff --git a/taker-frontend/src/App.tsx b/taker-frontend/src/App.tsx
index a6fe608..24ce792 100644
--- a/taker-frontend/src/App.tsx
+++ b/taker-frontend/src/App.tsx
@@ -1,4 +1,14 @@
-import { Box, StackDivider, useToast, VStack } from "@chakra-ui/react";
+import {
+    Accordion,
+    AccordionButton,
+    AccordionIcon,
+    AccordionItem,
+    AccordionPanel,
+    Box,
+    StackDivider,
+    useToast,
+    VStack,
+} from "@chakra-ui/react";
 import * as React from "react";
 import { useEffect, useState } from "react";
 import { useAsync } from "react-async";
@@ -162,10 +172,25 @@ export const App = () => {
                                 cfds={cfds.filter((cfd) => cfd.state.getGroup() !== StateGroupKey.CLOSED)}
                                 title={"Open Positions"}
                             />
-                            <History
-                                cfds={cfds.filter((cfd) => cfd.state.getGroup() === StateGroupKey.CLOSED)}
-                                title={"Closed Positions"}
-                            />
+
+                            <Accordion allowToggle width={"100%"}>
+                                <AccordionItem>
+                                    <h2>
+                                        <AccordionButton>
+                                            <AccordionIcon />
+                                            <Box w={"100%"} textAlign="center">
+                                                Show Closed Positions
+                                            </Box>
+                                            <AccordionIcon />
+                                        </AccordionButton>
+                                    </h2>
+                                    <AccordionPanel pb={4}>
+                                        <History
+                                            cfds={cfds.filter((cfd) => cfd.state.getGroup() === StateGroupKey.CLOSED)}
+                                        />
+                                    </AccordionPanel>
+                                </AccordionItem>
+                            </Accordion>
                         </VStack>
                     </Route>
                 </Switch>
diff --git a/taker-frontend/src/components/History.tsx b/taker-frontend/src/components/History.tsx
index 54596e2..8e06108 100644
--- a/taker-frontend/src/components/History.tsx
+++ b/taker-frontend/src/components/History.tsx
@@ -35,13 +35,14 @@ import { Cfd, StateGroupKey, StateKey, Tx, TxLabel } from "./Types";
 
 interface HistoryProps {
     cfds: Cfd[];
-    title: string;
+    title?: string;
 }
 
 const History = ({ cfds, title }: HistoryProps) => {
     return (
         <VStack spacing={3}>
-            <Heading size={"lg"} padding={2}>{title}</Heading>
+            {title
+                && <Heading size={"lg"} padding={2}>{title}</Heading>}
             <SimpleGrid
                 columns={{ sm: 2, md: 4 }}
                 gap={4}