diff --git a/.eslintrc.js b/.eslintrc.js
index c0223d80..0d7d099f 100644
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -298,8 +298,13 @@ module.exports = {
     // Regex Plugin
     "regex/invalid": [
       "error",
-      // Don't use trailing slashes or cyclic index imports. Don't use numerical strings. Don't use "styled" components. Don't disable rules.
-      ['import.*(/|\\.)";', '"\\d+"', "Style[d]", "eslint\\-disable"],
+      [
+        'import.*(/|\\.)";', // Don't use trailing slashes or cyclic index imports.
+        '"\\d+"', // Don't use numerical strings.
+        "[^\\d]0\\px", // Don't use pixels unit for zero values.
+        "Style[d]", // Don't use "styled" components.
+        "eslint\\-disable", // Don't disable rules.
+      ],
     ],
 
     // GraphQL Plugin
diff --git a/_pages/profile/[id]/index.js b/_pages/profile/[id]/index.js
index b88f224f..bca05651 100644
--- a/_pages/profile/[id]/index.js
+++ b/_pages/profile/[id]/index.js
@@ -1,6 +1,7 @@
 import { Card, Text, useQuery } from "@kleros/components";
 import { graphql } from "relay-hooks";
 
+import SubmissionDetailsAccordion from "./submission-details-accordion";
 import SubmissionDetailsCard from "./submission-details-card";
 
 import { submissionStatusEnum } from "data";
@@ -36,6 +37,7 @@ export default function ProfileWithID() {
       {props?.submission && (
         <SubmissionDetailsCard submission={props.submission} />
       )}
+      <SubmissionDetailsAccordion />
     </>
   );
 }
diff --git a/_pages/profile/[id]/submission-details-accordion/appeal-accordion-item.js b/_pages/profile/[id]/submission-details-accordion/appeal-accordion-item.js
new file mode 100644
index 00000000..bf50b6bf
--- /dev/null
+++ b/_pages/profile/[id]/submission-details-accordion/appeal-accordion-item.js
@@ -0,0 +1,17 @@
+import {
+  AccordionItem,
+  AccordionItemHeading,
+  AccordionItemPanel,
+  Text,
+} from "@kleros/components";
+
+export default function AppealAccordionItem() {
+  return (
+    <AccordionItem>
+      <AccordionItemHeading>Appeal</AccordionItemHeading>
+      <AccordionItemPanel>
+        <Text>Appeal.</Text>
+      </AccordionItemPanel>
+    </AccordionItem>
+  );
+}
diff --git a/_pages/profile/[id]/submission-details-accordion/evidence-accordion-item.js b/_pages/profile/[id]/submission-details-accordion/evidence-accordion-item.js
new file mode 100644
index 00000000..593ed12d
--- /dev/null
+++ b/_pages/profile/[id]/submission-details-accordion/evidence-accordion-item.js
@@ -0,0 +1,17 @@
+import {
+  AccordionItem,
+  AccordionItemHeading,
+  AccordionItemPanel,
+  Text,
+} from "@kleros/components";
+
+export default function EvidenceAccordionItem() {
+  return (
+    <AccordionItem>
+      <AccordionItemHeading>Evidence</AccordionItemHeading>
+      <AccordionItemPanel>
+        <Text>Evidence.</Text>
+      </AccordionItemPanel>
+    </AccordionItem>
+  );
+}
diff --git a/_pages/profile/[id]/submission-details-accordion/index.js b/_pages/profile/[id]/submission-details-accordion/index.js
new file mode 100644
index 00000000..fbc3c93c
--- /dev/null
+++ b/_pages/profile/[id]/submission-details-accordion/index.js
@@ -0,0 +1,15 @@
+import { Accordion } from "@kleros/components";
+
+import AppealAccordionItem from "./appeal-accordion-item";
+import EvidenceAccordionItem from "./evidence-accordion-item";
+import VotingHistoryAccordionItem from "./voting-history-accordion-item";
+
+export default function SubmissionDetailsAccordion() {
+  return (
+    <Accordion>
+      <AppealAccordionItem />
+      <EvidenceAccordionItem />
+      <VotingHistoryAccordionItem />
+    </Accordion>
+  );
+}
diff --git a/_pages/profile/[id]/submission-details-accordion/voting-history-accordion-item.js b/_pages/profile/[id]/submission-details-accordion/voting-history-accordion-item.js
new file mode 100644
index 00000000..3f94f7f5
--- /dev/null
+++ b/_pages/profile/[id]/submission-details-accordion/voting-history-accordion-item.js
@@ -0,0 +1,17 @@
+import {
+  AccordionItem,
+  AccordionItemHeading,
+  AccordionItemPanel,
+  Text,
+} from "@kleros/components";
+
+export default function VotingHistoryAccordionItem() {
+  return (
+    <AccordionItem>
+      <AccordionItemHeading>Voting History</AccordionItemHeading>
+      <AccordionItemPanel>
+        <Text>Voting History.</Text>
+      </AccordionItemPanel>
+    </AccordionItem>
+  );
+}
diff --git a/components/accordion.js b/components/accordion.js
new file mode 100644
index 00000000..52f143f1
--- /dev/null
+++ b/components/accordion.js
@@ -0,0 +1,51 @@
+import {
+  Accordion as _Accordion,
+  AccordionItem as _AccordionItem,
+  AccordionItemButton as _AccordionItemButton,
+  AccordionItemHeading as _AccordionItemHeading,
+  AccordionItemPanel as _AccordionItemPanel,
+} from "react-accessible-accordion";
+import { Box } from "theme-ui";
+
+export default function Accordion({
+  allowMultipleExpanded = true,
+  allowZeroExpanded = true,
+  ...rest
+}) {
+  return (
+    <Box
+      as={(props) => (
+        <_Accordion
+          allowMultipleExpanded={allowMultipleExpanded}
+          allowZeroExpanded={allowZeroExpanded}
+          {...rest}
+          {...props}
+        />
+      )}
+      {...rest}
+    />
+  );
+}
+
+export function AccordionItem(props) {
+  return <Box as={_AccordionItem} variant="accordion.item" {...props} />;
+}
+
+export function AccordionItemHeading(props) {
+  return (
+    <Box
+      as={({ children, ...rest }) => (
+        <_AccordionItemHeading {...props} {...rest}>
+          <Box as={_AccordionItemButton} variant="accordion.heading">
+            {children}
+          </Box>
+        </_AccordionItemHeading>
+      )}
+      {...props}
+    />
+  );
+}
+
+export function AccordionItemPanel(props) {
+  return <Box as={_AccordionItemPanel} variant="accordion.panel" {...props} />;
+}
diff --git a/components/index.js b/components/index.js
index f568f85c..e79ed831 100644
--- a/components/index.js
+++ b/components/index.js
@@ -1,5 +1,11 @@
 export { Box, Flex } from "theme-ui";
 
+export {
+  default as Accordion,
+  AccordionItem,
+  AccordionItemHeading,
+  AccordionItemPanel,
+} from "./accordion";
 export { default as AccountSettingsPopup } from "./account-settings-popup";
 export { default as ArchonProvider, useArchon } from "./archon-provider";
 export { default as Button } from "./button";
diff --git a/components/theme-provider.js b/components/theme-provider.js
index 62920bb9..db915a45 100644
--- a/components/theme-provider.js
+++ b/components/theme-provider.js
@@ -60,6 +60,27 @@ const theme = merge(merge(base, toTheme(typographyTheme)), {
   },
 
   // Components
+  accordion: {
+    item: {
+      marginY: 2,
+    },
+    heading: {
+      backgroundColor: "accent",
+      borderRadius: 3,
+      color: "background",
+      fontWeight: "bold",
+      paddingX: 2,
+      paddingY: 1,
+    },
+    panel: {
+      backgroundColor: "background",
+      bordeRadius: 3,
+      boxShadow: "0 6px 90px rgba(255, 153, 0, 0.25)",
+      fontSize: 1,
+      paddingX: 4,
+      paddingY: 3,
+    },
+  },
   buttons: {
     primary: {
       borderRadius: 300,
diff --git a/package-lock.json b/package-lock.json
index d91bb009..6bb514e7 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -15972,6 +15972,11 @@
         "prop-types": "^15.6.2"
       }
     },
+    "react-accessible-accordion": {
+      "version": "3.3.3",
+      "resolved": "https://registry.npmjs.org/react-accessible-accordion/-/react-accessible-accordion-3.3.3.tgz",
+      "integrity": "sha512-I1Niy21IIyXIzcDuIlTnnN3k8bUux7puq60eyNuwf+lhvftnocn7hLhAz2NycXrZOqBClqi50YBqXlnbOTNrjQ=="
+    },
     "react-dom": {
       "version": "16.13.1",
       "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-16.13.1.tgz",
diff --git a/package.json b/package.json
index 0112253c..fac54cdf 100644
--- a/package.json
+++ b/package.json
@@ -45,6 +45,7 @@
     "next": "^9.5.1",
     "path-to-regexp": "^6.1.0",
     "react": "^16.13.1",
+    "react-accessible-accordion": "^3.3.3",
     "react-dom": "^16.13.1",
     "react-loading-skeleton": "^2.1.1",
     "react-player": "^2.6.1",