diff --git a/assets/approval-requests-bundle.js b/assets/approval-requests-bundle.js
index ee26b3936..a3b51779d 100644
--- a/assets/approval-requests-bundle.js
+++ b/assets/approval-requests-bundle.js
@@ -184,7 +184,7 @@ const DetailRow = styled(Row$1) `
   }
 `;
 function ApprovalRequestDetails({ approvalRequest, baseLocale, }) {
-    return (jsxRuntimeExports.jsxs(Container$1, { children: [jsxRuntimeExports.jsx(ApprovalRequestHeader, { isBold: true, children: "Approval request details" }), jsxRuntimeExports.jsxs(DetailRow, { children: [jsxRuntimeExports.jsx(Col, { size: 4, children: jsxRuntimeExports.jsx(FieldLabel$1, { children: "Sent by" }) }), jsxRuntimeExports.jsx(Col, { size: 8, children: jsxRuntimeExports.jsx(MD, { children: approvalRequest.created_by_user.name }) })] }), jsxRuntimeExports.jsxs(DetailRow, { children: [jsxRuntimeExports.jsx(Col, { size: 4, children: jsxRuntimeExports.jsx(FieldLabel$1, { children: "Sent on" }) }), jsxRuntimeExports.jsx(Col, { size: 8, children: jsxRuntimeExports.jsx(MD, { children: formatApprovalRequestDate(approvalRequest.created_at, baseLocale) }) })] }), jsxRuntimeExports.jsxs(DetailRow, { children: [jsxRuntimeExports.jsx(Col, { size: 4, children: jsxRuntimeExports.jsx(FieldLabel$1, { children: "Approver" }) }), jsxRuntimeExports.jsx(Col, { size: 8, children: jsxRuntimeExports.jsx(MD, { children: approvalRequest.assignee_user.name }) })] }), jsxRuntimeExports.jsxs(DetailRow, { children: [jsxRuntimeExports.jsx(Col, { size: 4, children: jsxRuntimeExports.jsx(FieldLabel$1, { children: "Status" }) }), jsxRuntimeExports.jsx(Col, { size: 8, children: jsxRuntimeExports.jsx(MD, { children: jsxRuntimeExports.jsx(ApprovalStatusTag$1, { status: approvalRequest.status }) }) })] })] }));
+    return (jsxRuntimeExports.jsxs(Container$1, { children: [jsxRuntimeExports.jsx(ApprovalRequestHeader, { isBold: true, children: "Approval request details" }), jsxRuntimeExports.jsxs(DetailRow, { children: [jsxRuntimeExports.jsx(Col, { size: 4, children: jsxRuntimeExports.jsx(FieldLabel$1, { children: "Sent by" }) }), jsxRuntimeExports.jsx(Col, { size: 8, children: jsxRuntimeExports.jsx(MD, { children: approvalRequest.created_by_user.name }) })] }), jsxRuntimeExports.jsxs(DetailRow, { children: [jsxRuntimeExports.jsx(Col, { size: 4, children: jsxRuntimeExports.jsx(FieldLabel$1, { children: "Sent on" }) }), jsxRuntimeExports.jsx(Col, { size: 8, children: jsxRuntimeExports.jsx(MD, { children: formatApprovalRequestDate(approvalRequest.created_at, baseLocale) }) })] }), jsxRuntimeExports.jsxs(DetailRow, { children: [jsxRuntimeExports.jsx(Col, { size: 4, children: jsxRuntimeExports.jsx(FieldLabel$1, { children: "Approver" }) }), jsxRuntimeExports.jsx(Col, { size: 8, children: jsxRuntimeExports.jsx(MD, { children: approvalRequest.assignee_user.name }) })] }), jsxRuntimeExports.jsxs(DetailRow, { children: [jsxRuntimeExports.jsx(Col, { size: 4, children: jsxRuntimeExports.jsx(FieldLabel$1, { children: "Status" }) }), jsxRuntimeExports.jsx(Col, { size: 8, children: jsxRuntimeExports.jsx(MD, { children: jsxRuntimeExports.jsx(ApprovalStatusTag$1, { status: approvalRequest.status }) }) })] }), approvalRequest.decided_at && (jsxRuntimeExports.jsxs(DetailRow, { children: [jsxRuntimeExports.jsx(Col, { size: 4, children: jsxRuntimeExports.jsx(FieldLabel$1, { children: "Decided" }) }), jsxRuntimeExports.jsx(Col, { size: 8, children: jsxRuntimeExports.jsx(MD, { children: formatApprovalRequestDate(approvalRequest.decided_at, baseLocale) }) })] })), approvalRequest.decision_notes.length > 0 && (jsxRuntimeExports.jsxs(DetailRow, { children: [jsxRuntimeExports.jsx(Col, { size: 4, children: jsxRuntimeExports.jsx(FieldLabel$1, { children: "Comment" }) }), jsxRuntimeExports.jsx(Col, { size: 8, children: jsxRuntimeExports.jsx(MD, { children: approvalRequest.decision_notes[0] }) })] }))] }));
 }
 var ApprovalRequestDetails$1 = reactExports.memo(ApprovalRequestDetails);
 
@@ -213,7 +213,11 @@ const CustomFieldsGrid = styled.div `
     grid-template-columns: repeat(2, 1fr);
   }
 `;
+const NULL_VALUE_PLACEHOLDER = "-";
 function CustomFieldValue({ value, }) {
+    if (!value) {
+        return jsxRuntimeExports.jsx(MD, { children: NULL_VALUE_PLACEHOLDER });
+    }
     if (Array.isArray(value)) {
         return (jsxRuntimeExports.jsx(MD, { children: value.map((val) => (jsxRuntimeExports.jsx(MultiselectTag, { hue: "grey", children: val }, val))) }));
     }
diff --git a/src/modules/approval-requests/components/approval-request/ApprovalRequestDetails.tsx b/src/modules/approval-requests/components/approval-request/ApprovalRequestDetails.tsx
index 6b73d226a..111905943 100644
--- a/src/modules/approval-requests/components/approval-request/ApprovalRequestDetails.tsx
+++ b/src/modules/approval-requests/components/approval-request/ApprovalRequestDetails.tsx
@@ -79,7 +79,31 @@ function ApprovalRequestDetails({
           </MD>
         </Col>
       </DetailRow>
-      {/* MKTODO: need to add decided at and decision notes when returning from the API */}
+      {approvalRequest.decided_at && (
+        <DetailRow>
+          <Col size={4}>
+            <FieldLabel>Decided</FieldLabel>
+          </Col>
+          <Col size={8}>
+            <MD>
+              {formatApprovalRequestDate(
+                approvalRequest.decided_at,
+                baseLocale
+              )}
+            </MD>
+          </Col>
+        </DetailRow>
+      )}
+      {approvalRequest.decision_notes.length > 0 && (
+        <DetailRow>
+          <Col size={4}>
+            <FieldLabel>Comment</FieldLabel>
+          </Col>
+          <Col size={8}>
+            <MD>{approvalRequest.decision_notes[0]}</MD>
+          </Col>
+        </DetailRow>
+      )}
     </Container>
   );
 }
diff --git a/src/modules/approval-requests/components/approval-request/ApprovalTicketDetails.tsx b/src/modules/approval-requests/components/approval-request/ApprovalTicketDetails.tsx
index c42f54225..87cb4d0fb 100644
--- a/src/modules/approval-requests/components/approval-request/ApprovalTicketDetails.tsx
+++ b/src/modules/approval-requests/components/approval-request/ApprovalTicketDetails.tsx
@@ -3,8 +3,8 @@ import styled from "styled-components";
 import { MD } from "@zendeskgarden/react-typography";
 import { getColorV8 } from "@zendeskgarden/react-theming";
 import { Grid } from "@zendeskgarden/react-grid";
-import type { MockTicket } from "../../types";
 import { Tag } from "@zendeskgarden/react-tags";
+import type { ApprovalRequestTicket } from "../../types";
 
 const TicketContainer = styled(Grid)`
   padding: ${(props) => props.theme.space.md}; /* 20px */
@@ -36,11 +36,16 @@ const CustomFieldsGrid = styled.div`
   }
 `;
 
+const NULL_VALUE_PLACEHOLDER = "-";
+
 function CustomFieldValue({
   value,
 }: {
   value: string | boolean | Array<string> | undefined;
 }) {
+  if (!value) {
+    return <MD>{NULL_VALUE_PLACEHOLDER}</MD>;
+  }
   if (Array.isArray(value)) {
     return (
       <MD>
@@ -61,7 +66,7 @@ function CustomFieldValue({
 }
 
 interface ApprovalTicketDetailsProps {
-  ticket: MockTicket;
+  ticket: ApprovalRequestTicket;
 }
 
 function ApprovalTicketDetails({ ticket }: ApprovalTicketDetailsProps) {
diff --git a/src/modules/approval-requests/types.ts b/src/modules/approval-requests/types.ts
index 29064998d..a0cfbef56 100644
--- a/src/modules/approval-requests/types.ts
+++ b/src/modules/approval-requests/types.ts
@@ -21,8 +21,10 @@ export interface ApprovalRequest {
   message: string;
   status: ApprovalRequestStatus;
   created_at: string;
-  assignee_user: ApprovalRequestUser;
   created_by_user: ApprovalRequestUser;
+  decided_at: string | null;
+  decision_notes: string[];
+  assignee_user: ApprovalRequestUser;
   ticket_details: ApprovalRequestTicket;
 }