diff --git a/app/components/ChangeLog.tsx b/app/components/ChangeLog.tsx
index 57e14a21b..d739f73c1 100644
--- a/app/components/ChangeLog.tsx
+++ b/app/components/ChangeLog.tsx
@@ -1,14 +1,18 @@
 import { useMemo, useState } from "react";
-import Card from "react-bootstrap/Card";
 import Table from "react-bootstrap/Table";
+import Accordion from "react-bootstrap/Accordion";
 import { formatDateTime } from "@/utils/formatters";
-import ChangeLogDetails from "./ChangeLogDetails";
+import ChangeLogDetails from "@/components/ChangeLogDetails";
 import {
   ChangeLogEntry,
   ChangeLogDiff,
   ChangeLogEntryEnriched,
 } from "@/types/changeLog";
 
+// used to track the accordion expanded state of the change log
+const localStorageKey = "crashHistoryCardExpandedItem";
+const recordHistoryItemName = "recordHistory";
+
 const KEYS_TO_IGNORE = ["updated_at", "updated_by", "position"];
 
 /**
@@ -77,59 +81,73 @@ const isNewRecordEvent = (change: ChangeLogEntryEnriched) =>
 export default function ChangeLog({ logs }: { logs: ChangeLogEntry[] }) {
   const [selectedChange, setSelectedChange] =
     useState<ChangeLogEntryEnriched | null>(null);
+  // tracks the accordion expanded state, if null then the accordion is closed
+  const [expandedItem, setExpandedItem] = useState<string | null>(
+    localStorage.getItem(localStorageKey)
+  );
 
   const changes = useChangeLogData(logs);
 
   return (
-    <Card>
-      <Card.Header>Record history</Card.Header>
-      <Card.Body>
-        <Table striped hover>
-          <thead>
-            <tr>
-              <th>Record type</th>
-              <th>Event</th>
-              <th>Affected fields</th>
-              <th>Edited by</th>
-              <th>Date</th>
-            </tr>
-          </thead>
-          <tbody className="font-monospace">
-            {changes.length === 0 && (
-              // this should only happen in local dev where change log is not downloaded from replica
+    <Accordion
+      activeKey={expandedItem}
+      // on accordion click save new expanded item state to local storage
+      onSelect={(eventKey) => {
+        const localStorageValue = String(eventKey); // local storage value must be a string type
+        localStorage.setItem(localStorageKey, localStorageValue);
+        setExpandedItem(localStorageValue);
+      }}
+    >
+      <Accordion.Item eventKey={recordHistoryItemName}>
+        <Accordion.Header>Record history</Accordion.Header>
+        <Accordion.Body>
+          <Table striped hover>
+            <thead>
               <tr>
-                <td colSpan={5} className="text-center">
-                  No changes found
-                </td>
-              </tr>
-            )}
-            {changes.map((change) => (
-              <tr
-                key={change.id}
-                onClick={() => setSelectedChange(change)}
-                style={{ cursor: "pointer" }}
-              >
-                <td>{change.record_type}</td>
-                <td>{change.operation_type}</td>
-                <td>
-                  {isNewRecordEvent(change)
-                    ? ""
-                    : change.affected_fields.join(", ")}
-                </td>
-                <td>{change.created_by}</td>
-                <td>{formatDateTime(change.created_at)}</td>
+                <th>Record type</th>
+                <th>Event</th>
+                <th>Affected fields</th>
+                <th>Edited by</th>
+                <th>Date</th>
               </tr>
-            ))}
-          </tbody>
-        </Table>
-        {/* Modal with change details table */}
-        {selectedChange && (
-          <ChangeLogDetails
-            selectedChange={selectedChange}
-            setSelectedChange={setSelectedChange}
-          />
-        )}
-      </Card.Body>
-    </Card>
+            </thead>
+            <tbody className="font-monospace">
+              {changes.length === 0 && (
+                // this should only happen in local dev where change log is not downloaded from replica
+                <tr>
+                  <td colSpan={5} className="text-center">
+                    No changes found
+                  </td>
+                </tr>
+              )}
+              {changes.map((change) => (
+                <tr
+                  key={change.id}
+                  onClick={() => setSelectedChange(change)}
+                  style={{ cursor: "pointer" }}
+                >
+                  <td>{change.record_type}</td>
+                  <td>{change.operation_type}</td>
+                  <td>
+                    {isNewRecordEvent(change)
+                      ? ""
+                      : change.affected_fields.join(", ")}
+                  </td>
+                  <td>{change.created_by}</td>
+                  <td>{formatDateTime(change.created_at)}</td>
+                </tr>
+              ))}
+            </tbody>
+          </Table>
+          {/* Modal with change details table */}
+          {selectedChange && (
+            <ChangeLogDetails
+              selectedChange={selectedChange}
+              setSelectedChange={setSelectedChange}
+            />
+          )}
+        </Accordion.Body>
+      </Accordion.Item>
+    </Accordion>
   );
 }
diff --git a/app/components/SidebarLayout.tsx b/app/components/SidebarLayout.tsx
index 5279ea765..1afc6b6a1 100644
--- a/app/components/SidebarLayout.tsx
+++ b/app/components/SidebarLayout.tsx
@@ -33,9 +33,9 @@ export default function SidebarLayout({ children }: { children: ReactNode }) {
 
   const toggleSidebar = useCallback(
     () =>
-      setIsCollapsed((prevSate) => {
-        localStorage.setItem(localStorageKey, String(!prevSate));
-        return !prevSate;
+      setIsCollapsed((prevState) => {
+        localStorage.setItem(localStorageKey, String(!prevState));
+        return !prevState;
       }),
     []
   );