diff --git a/src/accordion/Accordion.tsx b/src/accordion/Accordion.tsx
index 8a1eb39a..54dc31de 100644
--- a/src/accordion/Accordion.tsx
+++ b/src/accordion/Accordion.tsx
@@ -11,7 +11,8 @@ export interface AccordionProps {
 
 const accordionItemCSS = css`
   cursor: pointer;
-  padding: var(--accordion-padding-top) var(--accordion-padding-side);
+  height: 40px;
+  padding: 0 var(--accordion-padding-side);
   display: block;
   width: 100%;
   display: flex;
@@ -48,12 +49,16 @@ export function Accordion({ children }: AccordionProps) {
       role="region"
       css={css`
         --accordion-animation-duration: ${theme.animation.global.duration}ms;
-
         &.ac-accordion--default {
           --accordion-padding-top: var(--ac-global-dimension-static-size-100);
           --accordion-padding-side: var(--ac-global-dimension-static-size-200);
           --accordion-font-size: ${theme.typography.sizes.medium.fontSize}px;
         }
+        .ac-accordion-item:not(:last-of-type) {
+          .ac-accordion-itemContent {
+            border-bottom: 1px solid var(--ac-global-border-color-dark);
+          }
+        }
       `}
     >
       {children}
@@ -77,6 +82,10 @@ export interface AccordionItemProps {
    * Callback function for when the collapsed state changes
    */
   onChange?: (isOpen: boolean) => void;
+  /**
+   * An extra element to show on the right hand side
+   */
+  extra?: ReactNode;
 }
 
 export function AccordionItem(props: AccordionItemProps) {
@@ -87,6 +96,7 @@ export function AccordionItem(props: AccordionItemProps) {
     defaultIsOpen = true,
     onChange,
     children,
+    extra,
   } = props;
   const [isOpen, setIsOpen] = useState(defaultIsOpen);
   const contentId = `${id}-content`,
@@ -137,15 +147,25 @@ export function AccordionItem(props: AccordionItemProps) {
           aria-expanded={isOpen}
         >
           {titleEl}
-          <Icon
-            svg={<ArrowIosDownwardOutline />}
-            className="ac-accordion-itemIndicator"
+          <div
             css={css`
-              transition: transform ease var(--accordion-animation-duration);
-              transform: rotate(0deg);
+              display: flex;
+              flex-direction: row;
+              align-items: center;
+              gap: var(--ac-global-dimension-static-size-100);
             `}
-            aria-hidden={true}
-          />
+          >
+            {extra}
+            <Icon
+              svg={<ArrowIosDownwardOutline />}
+              className="ac-accordion-itemIndicator"
+              css={css`
+                transition: transform ease var(--accordion-animation-duration);
+                transform: rotate(0deg);
+              `}
+              aria-hidden={true}
+            />
+          </div>
         </button>
       </Heading>
       <div
@@ -153,7 +173,6 @@ export function AccordionItem(props: AccordionItemProps) {
         id={contentId}
         role="region"
         css={css`
-          border-bottom: 1px solid var(--ac-global-border-color-dark);
           display: ${isOpen ? 'block' : 'none'};
         `}
         aria-labelledby={headerId}
diff --git a/stories/Accordion.stories.tsx b/stories/Accordion.stories.tsx
index 4a398e9c..8f5d7f2d 100644
--- a/stories/Accordion.stories.tsx
+++ b/stories/Accordion.stories.tsx
@@ -7,6 +7,8 @@ import {
   AccordionItem,
   Card,
   Counter,
+  Text,
+  Button,
 } from '../src';
 import InfoTip from './components/InfoTip';
 import { ThemeSplitView } from './components/ThemeSplitView';
@@ -20,14 +22,14 @@ const meta: Meta = {
 };
 
 const AccordionContents = () => (
-  <p style={{ padding: 16, margin: 10 }}>
+  <Text>
     Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
     tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
     quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
     consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
     cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat
     non proident, sunt in culpa qui officia deserunt mollit anim id est laborum
-  </p>
+  </Text>
 );
 
 export default meta;
@@ -68,3 +70,34 @@ const Template: Story<AccordionProps> = args => {
 // By passing using the Args format for exported stories, you can control the props for a component for reuse in a test
 // https://storybook.js.org/docs/react/workflows/unit-testing
 export const Default = Template.bind({});
+
+export function simple() {
+  return (
+    <ThemeSplitView>
+      <Accordion>
+        <AccordionItem
+          title="2 Predictions"
+          titleExtra={<InfoTip>Description of predictions</InfoTip>}
+          id="predictions"
+          extra={
+            <Button variant="default" size="compact">
+              Edit
+            </Button>
+          }
+        >
+          <AccordionContents />
+        </AccordionItem>
+        <AccordionItem
+          title="Features"
+          titleExtra={<Counter variant="light">100</Counter>}
+          id="features"
+        >
+          <AccordionContents />
+        </AccordionItem>
+        <AccordionItem title="10 Actuals" id="actuals">
+          <AccordionContents />
+        </AccordionItem>
+      </Accordion>
+    </ThemeSplitView>
+  );
+}