diff --git a/src/analytics/task/useAnnotationAnalytics.ts b/src/analytics/task/useAnnotationAnalytics.ts
index fce458b23c..589d4c22f4 100644
--- a/src/analytics/task/useAnnotationAnalytics.ts
+++ b/src/analytics/task/useAnnotationAnalytics.ts
@@ -1,6 +1,5 @@
 import { useQuery } from "@apollo/client";
-import get from "lodash/get";
-import { useParams, useLocation } from "react-router-dom";
+import { useParams } from "react-router-dom";
 import { useAnalyticsRoot } from "analytics/useAnalyticsRoot";
 import {
   BuildBaronQuery,
@@ -9,10 +8,9 @@ import {
   AnnotationEventDataQueryVariables,
 } from "gql/generated/types";
 import { ANNOTATION_EVENT_DATA, BUILD_BARON } from "gql/queries";
+import { useQueryParam } from "hooks/useQueryParam";
 import { RequiredQueryParams } from "types/task";
-import { queryString } from "utils";
 
-const { parseQueryString } = queryString;
 type Action =
   | { name: "Click Jira Summary Link" }
   | { name: "Build Baron File Ticket" }
@@ -29,10 +27,8 @@ type Action =
 
 export const useAnnotationAnalytics = () => {
   const { id } = useParams<{ id: string }>();
+  const [execution] = useQueryParam(RequiredQueryParams.Execution, 0);
 
-  const location = useLocation();
-  const parsed = parseQueryString(location.search);
-  const execution = Number(parsed[RequiredQueryParams.Execution]);
   const { data: eventData } = useQuery<
     AnnotationEventDataQuery,
     AnnotationEventDataQueryVariables
@@ -49,16 +45,12 @@ export const useAnnotationAnalytics = () => {
     }
   );
 
-  const annotation = get(eventData, "task.annotation", undefined);
-  const bbConfigured = get(
-    bbData,
-    "buildBaron.buildBaronConfigured",
-    undefined
-  );
+  const { annotation } = eventData?.task || {};
+  const { buildBaronConfigured } = bbData?.buildBaron || {};
 
   return useAnalyticsRoot<Action>("Annotations", {
     taskId: id,
     annotation,
-    bbConfigured,
+    bbConfigured: buildBaronConfigured,
   });
 };
diff --git a/src/gql/mocks/getSpruceConfig.ts b/src/gql/mocks/getSpruceConfig.ts
index 7acce0a624..a30e9e3245 100644
--- a/src/gql/mocks/getSpruceConfig.ts
+++ b/src/gql/mocks/getSpruceConfig.ts
@@ -1,6 +1,8 @@
 import {
   SpruceConfigQuery,
   SpruceConfigQueryVariables,
+  UserSettingsQuery,
+  UserSettingsQueryVariables,
 } from "gql/generated/types";
 import { SPRUCE_CONFIG } from "gql/queries";
 import { ApolloMock } from "types/gql";
@@ -38,7 +40,11 @@ export const getSpruceConfigMock: ApolloMock<
             location: "/path/to/key",
           },
         ],
-        jira: { host: "jira.mongodb.org", __typename: "JiraConfig" },
+        jira: {
+          host: "jira.mongodb.org",
+          __typename: "JiraConfig",
+          email: "test@example.com",
+        },
         providers: {
           aws: {
             maxVolumeSizePerUser: 1500,
@@ -61,3 +67,43 @@ export const getSpruceConfigMock: ApolloMock<
     },
   },
 };
+
+export const getUserSettingsMock: ApolloMock<
+  UserSettingsQuery,
+  UserSettingsQueryVariables
+> = {
+  request: {
+    query: SPRUCE_CONFIG,
+    variables: null,
+  },
+  result: {
+    data: {
+      userSettings: {
+        __typename: "UserSettings",
+        dateFormat: "MM/DD/YYYY",
+        githubUser: {
+          lastKnownAs: "user",
+          __typename: "GithubUser",
+        },
+        notifications: {
+          __typename: "Notifications",
+          buildBreak: "",
+          patchFinish: "",
+          patchFirstFailure: "",
+          spawnHostExpiration: "",
+          spawnHostOutcome: "",
+        },
+        region: "us-east-1",
+        slackMemberId: "1234",
+        slackUsername: "user",
+        timezone: "America/New_York",
+        useSpruceOptions: {
+          __typename: "UseSpruceOptions",
+          hasUsedMainlineCommitsBefore: true,
+          spruceV1: true,
+          hasUsedSpruceBefore: true,
+        },
+      },
+    },
+  },
+};
diff --git a/src/pages/task/metadata/Metadata.stories.tsx b/src/pages/task/metadata/Metadata.stories.tsx
index 2957ffadd3..455cd36ff1 100644
--- a/src/pages/task/metadata/Metadata.stories.tsx
+++ b/src/pages/task/metadata/Metadata.stories.tsx
@@ -5,7 +5,6 @@ import { CustomStoryObj, CustomMeta } from "test_utils/types";
 import { Metadata } from "./index";
 
 export default {
-  title: "Pages/Task/Metadata",
   component: Metadata,
 } satisfies CustomMeta<typeof Metadata>;
 
diff --git a/src/pages/task/taskTabs/ExecutionTasksTable.stories.tsx b/src/pages/task/taskTabs/ExecutionTasksTable.stories.tsx
index 8af0489035..4746957948 100644
--- a/src/pages/task/taskTabs/ExecutionTasksTable.stories.tsx
+++ b/src/pages/task/taskTabs/ExecutionTasksTable.stories.tsx
@@ -3,7 +3,6 @@ import { CustomStoryObj, CustomMeta } from "test_utils/types";
 import { ExecutionTasksTable } from "./ExecutionTasksTable";
 
 export default {
-  title: "Pages/Task/Table/Execution Tasks Table",
   component: ExecutionTasksTable,
 } satisfies CustomMeta<typeof ExecutionTasksTable>;
 
diff --git a/src/pages/task/taskTabs/FileTable/GroupedFileTable/GroupedFileTable.stories.tsx b/src/pages/task/taskTabs/FileTable/GroupedFileTable/GroupedFileTable.stories.tsx
index 2f692b8237..b8a6627cca 100644
--- a/src/pages/task/taskTabs/FileTable/GroupedFileTable/GroupedFileTable.stories.tsx
+++ b/src/pages/task/taskTabs/FileTable/GroupedFileTable/GroupedFileTable.stories.tsx
@@ -13,7 +13,6 @@ const files = [
 ];
 
 export default {
-  title: "Pages/Task/table/GroupedFileTable",
   component: GroupedFileTable,
 } satisfies CustomMeta<typeof GroupedFileTable>;
 
diff --git a/src/pages/task/taskTabs/buildBaronAndAnnotations/AnnotationNote.tsx b/src/pages/task/taskTabs/buildBaronAndAnnotations/AnnotationNote.tsx
index 7fb2481394..3469be072b 100644
--- a/src/pages/task/taskTabs/buildBaronAndAnnotations/AnnotationNote.tsx
+++ b/src/pages/task/taskTabs/buildBaronAndAnnotations/AnnotationNote.tsx
@@ -12,7 +12,7 @@ import {
 } from "gql/generated/types";
 import { EDIT_ANNOTATION_NOTE } from "gql/mutations";
 import { useDateFormat } from "hooks";
-import { ButtonWrapper, NonTableWrapper } from "./BBComponents";
+import { ButtonWrapper } from "./BBComponents";
 
 interface Props {
   note: Note;
@@ -63,7 +63,7 @@ const AnnotationNote: React.FC<Props> = ({
   };
 
   return (
-    <NonTableWrapper>
+    <>
       <TextArea
         aria-labelledby="annotation-note-input"
         rows={4}
@@ -97,7 +97,7 @@ const AnnotationNote: React.FC<Props> = ({
       >
         You are not authorized to edit failure details
       </Tooltip>
-    </NonTableWrapper>
+    </>
   );
 };
 
diff --git a/src/pages/task/taskTabs/buildBaronAndAnnotations/AnnotationTicketsTable/AnnotationTicketRow.stories.tsx b/src/pages/task/taskTabs/buildBaronAndAnnotations/AnnotationTicketsTable/AnnotationTicketRow.stories.tsx
index 9fcaf7b1fd..644a5e856e 100644
--- a/src/pages/task/taskTabs/buildBaronAndAnnotations/AnnotationTicketsTable/AnnotationTicketRow.stories.tsx
+++ b/src/pages/task/taskTabs/buildBaronAndAnnotations/AnnotationTicketsTable/AnnotationTicketRow.stories.tsx
@@ -2,7 +2,6 @@ import { CustomStoryObj, CustomMeta } from "test_utils/types";
 import { AnnotationTicketRow } from "./AnnotationTicketRow";
 
 export default {
-  title: "Pages/Task/BuildBaron/AnnotationTicketRow",
   component: AnnotationTicketRow,
 } satisfies CustomMeta<typeof AnnotationTicketRow>;
 
diff --git a/src/pages/task/taskTabs/buildBaronAndAnnotations/BBComponents.tsx b/src/pages/task/taskTabs/buildBaronAndAnnotations/BBComponents.tsx
index e1af3dbbca..ee7cc1491d 100644
--- a/src/pages/task/taskTabs/buildBaronAndAnnotations/BBComponents.tsx
+++ b/src/pages/task/taskTabs/buildBaronAndAnnotations/BBComponents.tsx
@@ -1,60 +1,6 @@
 import styled from "@emotion/styled";
-import Badge from "@leafygreen-ui/badge";
-import { Disclaimer, Subtitle, SubtitleProps } from "@leafygreen-ui/typography";
-import { useAnnotationAnalytics } from "analytics";
-import { StyledLink } from "components/styles";
-import { getJiraTicketUrl } from "constants/externalResources";
+import { Subtitle, SubtitleProps } from "@leafygreen-ui/typography";
 import { size } from "constants/tokens";
-import { TicketFields } from "gql/generated/types";
-import { useSpruceConfig, useDateFormat } from "hooks";
-
-interface JiraTicketRowProps {
-  jiraKey: string;
-  fields: TicketFields;
-}
-export const JiraTicketRow: React.FC<JiraTicketRowProps> = ({
-  fields,
-  jiraKey,
-}) => {
-  const annotationAnalytics = useAnnotationAnalytics();
-  const getDateCopy = useDateFormat();
-  const spruceConfig = useSpruceConfig();
-  const jiraHost = spruceConfig?.jira?.host;
-  const url = getJiraTicketUrl(jiraHost, jiraKey);
-  const { assigneeDisplayName, created, status, summary, updated } =
-    fields ?? {};
-  return (
-    <div>
-      <JiraSummaryLink
-        href={url}
-        data-cy={jiraKey}
-        onClick={() =>
-          annotationAnalytics.sendEvent({ name: "Click Jira Summary Link" })
-        }
-      >
-        {jiraKey}: {summary} {"   "}
-      </JiraSummaryLink>
-
-      <Badge data-cy={`${jiraKey}-badge`} variant="lightgray">
-        {status.name}
-      </Badge>
-
-      <BottomMetaDataWrapper data-cy={`${jiraKey}-metadata`}>
-        <Disclaimer>
-          Created: {getDateCopy(created, { dateOnly: true })}{" "}
-        </Disclaimer>
-        <Disclaimer>
-          Updated: {getDateCopy(updated, { dateOnly: true })}{" "}
-        </Disclaimer>
-        <Disclaimer>
-          {assigneeDisplayName
-            ? `Assignee: ${assigneeDisplayName}`
-            : "Unassigned"}{" "}
-        </Disclaimer>
-      </BottomMetaDataWrapper>
-    </div>
-  );
-};
 
 export const TicketsTitle = styled(Subtitle)<
   SubtitleProps & { margin?: boolean }
@@ -65,35 +11,6 @@ export const TicketsTitle = styled(Subtitle)<
   font-weight: bold;
 `;
 
-const JiraSummaryLink = styled(StyledLink)`
-  font-weight: bold;
-  margin-right: ${size.s};
-`;
-
-export const BottomMetaDataWrapper = styled.div`
-  margin-top: ${size.xs};
-  display: grid;
-  grid-template-columns: 1fr 1fr 2fr;
-  gap: ${size.xs};
-  grid-template-rows: 1fr;
-  grid-row-gap: 0px;
-  width: 80%;
-`;
-
-export const TopMetaDataWrapper = styled.div`
-  margin-bottom: ${size.xs};
-  display: grid;
-  grid-template-columns: 1fr 4fr;
-  gap: ${size.xs};
-  grid-template-rows: 1fr;
-  grid-row-gap: 0px;
-  width: 80%;
-`;
-
-export const NonTableWrapper = styled.div`
-  margin-left: ${size.s};
-`;
-
 export const ButtonWrapper = styled.div`
   margin-right: ${size.xs};
   padding-top: ${size.s};
diff --git a/src/pages/task/taskTabs/buildBaronAndAnnotations/BuildBaron.test.tsx b/src/pages/task/taskTabs/buildBaronAndAnnotations/BuildBaron.test.tsx
index 4f7c2e9b6d..78a0543e0b 100644
--- a/src/pages/task/taskTabs/buildBaronAndAnnotations/BuildBaron.test.tsx
+++ b/src/pages/task/taskTabs/buildBaronAndAnnotations/BuildBaron.test.tsx
@@ -1,25 +1,41 @@
-import { MockedProvider } from "@apollo/client/testing";
 import MatchMediaMock from "jest-matchmedia-mock";
 import { RenderFakeToastContext } from "context/toast/__mocks__";
 import {
+  AnnotationEventDataQuery,
+  AnnotationEventDataQueryVariables,
   BuildBaronCreateTicketMutation,
   BuildBaronCreateTicketMutationVariables,
   BuildBaronQuery,
   BuildBaronQueryVariables,
   CreatedTicketsQuery,
   CreatedTicketsQueryVariables,
+  CustomCreatedIssuesQuery,
+  CustomCreatedIssuesQueryVariables,
+  SuspectedIssuesQuery,
+  SuspectedIssuesQueryVariables,
 } from "gql/generated/types";
-import { getSpruceConfigMock } from "gql/mocks/getSpruceConfig";
+import {
+  getSpruceConfigMock,
+  getUserSettingsMock,
+} from "gql/mocks/getSpruceConfig";
 import { getUserMock } from "gql/mocks/getUser";
 import { FILE_JIRA_TICKET } from "gql/mutations";
-import { BUILD_BARON, CREATED_TICKETS } from "gql/queries";
+import {
+  ANNOTATION_EVENT_DATA,
+  BUILD_BARON,
+  CREATED_TICKETS,
+  JIRA_CUSTOM_CREATED_ISSUES,
+  JIRA_ISSUES,
+  JIRA_SUSPECTED_ISSUES,
+} from "gql/queries";
 import { renderWithRouterMatch as render, screen, userEvent } from "test_utils";
+import { MockedProvider } from "test_utils/graphql";
 import { ApolloMock } from "types/gql";
 import BuildBaronContent from "./BuildBaronContent";
 
 const taskId =
   "spruce_ubuntu1604_e2e_test_e0ece5ad52ad01630bdf29f55b9382a26d6256b3_20_08_26_19_20_41";
-const execution = 1;
+const execution = 0;
 
 let matchMedia;
 describe("buildBaronContent", () => {
@@ -34,7 +50,7 @@ describe("buildBaronContent", () => {
 
   it("the BuildBaron component renders without crashing.", () => {
     const { Component } = RenderFakeToastContext(
-      <MockedProvider mocks={buildBaronMocks}>
+      <MockedProvider mocks={buildBaronMocks} addTypename={false}>
         <BuildBaronContent
           annotation={null}
           taskId={taskId}
@@ -57,7 +73,7 @@ describe("buildBaronContent", () => {
   it("clicking on file a new ticket dispatches a toast", async () => {
     const user = userEvent.setup();
     const { Component, dispatchToast } = RenderFakeToastContext(
-      <MockedProvider mocks={buildBaronMocks}>
+      <MockedProvider mocks={buildBaronMocks} addTypename={false}>
         <BuildBaronContent
           annotation={null}
           taskId={taskId}
@@ -82,7 +98,7 @@ describe("buildBaronContent", () => {
 
   it("the correct JiraTicket rows are rendered in the component", () => {
     const { Component } = RenderFakeToastContext(
-      <MockedProvider mocks={buildBaronMocks}>
+      <MockedProvider mocks={buildBaronMocks} addTypename={false}>
         <BuildBaronContent
           annotation={null}
           taskId={taskId}
@@ -108,17 +124,17 @@ describe("buildBaronContent", () => {
       "Resolved"
     );
     expect(screen.queryByDataCy("EVG-12345-metadata")).toHaveTextContent(
-      "Created: Sep 23, 2020 Updated: Sep 23, 2020 Unassigned"
+      "Created: Sep 23, 2020Updated: Sep 23, 2020Unassigned"
     );
 
     expect(screen.queryByDataCy("EVG-12346-badge")).toHaveTextContent("Closed");
     expect(screen.queryByDataCy("EVG-12346-metadata")).toHaveTextContent(
-      "Created: Sep 18, 2020 Updated: Sep 18, 2020 Assignee: Some Name"
+      "Created: Sep 18, 2020Updated: Sep 18, 2020Assignee: Some Name"
     );
 
     expect(screen.queryByDataCy("EVG-12347-badge")).toHaveTextContent("Open");
     expect(screen.queryByDataCy("EVG-12347-metadata")).toHaveTextContent(
-      "Created: Sep 18, 2020 Updated: Sep 18, 2020 Assignee: Backlog - Evergreen Team"
+      "Created: Sep 18, 2020Updated: Sep 18, 2020Assignee: Backlog - Evergreen Team"
     );
   });
 });
@@ -239,10 +255,103 @@ const getJiraTicketsMock: ApolloMock<
   },
 };
 
+const customCreatedIssuesMock: ApolloMock<
+  CustomCreatedIssuesQuery,
+  CustomCreatedIssuesQueryVariables
+> = {
+  request: {
+    query: JIRA_CUSTOM_CREATED_ISSUES,
+    variables: {
+      taskId,
+      execution,
+    },
+  },
+  result: {
+    data: {
+      task: {
+        id: taskId,
+        execution,
+        annotation: null,
+      },
+    },
+  },
+};
+
+const suspectedIssueMock: ApolloMock<
+  SuspectedIssuesQuery,
+  SuspectedIssuesQueryVariables
+> = {
+  request: {
+    query: JIRA_SUSPECTED_ISSUES,
+    variables: {
+      taskId,
+      execution,
+    },
+  },
+  result: {
+    data: {
+      task: {
+        id: taskId,
+        execution,
+        annotation: null,
+      },
+    },
+  },
+};
+
+const jiraIssuesMock: ApolloMock<
+  SuspectedIssuesQuery,
+  SuspectedIssuesQueryVariables
+> = {
+  request: {
+    query: JIRA_ISSUES,
+    variables: {
+      taskId,
+      execution,
+    },
+  },
+  result: {
+    data: {
+      task: {
+        id: taskId,
+        execution,
+        annotation: null,
+      },
+    },
+  },
+};
+
+const annotationEventDataMock: ApolloMock<
+  AnnotationEventDataQuery,
+  AnnotationEventDataQueryVariables
+> = {
+  request: {
+    query: ANNOTATION_EVENT_DATA,
+    variables: {
+      taskId,
+      execution,
+    },
+  },
+  result: {
+    data: {
+      task: {
+        id: taskId,
+        execution,
+        annotation: null,
+      },
+    },
+  },
+};
+
 const buildBaronMocks = [
-  getBuildBaronMock,
+  customCreatedIssuesMock,
   fileJiraTicketMock,
+  getBuildBaronMock,
   getJiraTicketsMock,
-  getUserMock,
   getSpruceConfigMock,
+  annotationEventDataMock,
+  getUserSettingsMock,
+  getUserMock,
+  jiraIssuesMock,
+  suspectedIssueMock,
 ];
diff --git a/src/pages/task/taskTabs/buildBaronAndAnnotations/CreatedTicketsTable/BBCreatedTickets.tsx b/src/pages/task/taskTabs/buildBaronAndAnnotations/CreatedTicketsTable/BBCreatedTickets.tsx
index 6089884e1c..7121f812cf 100644
--- a/src/pages/task/taskTabs/buildBaronAndAnnotations/CreatedTicketsTable/BBCreatedTickets.tsx
+++ b/src/pages/task/taskTabs/buildBaronAndAnnotations/CreatedTicketsTable/BBCreatedTickets.tsx
@@ -1,7 +1,7 @@
 import { JiraTicket } from "gql/generated/types";
-import { TicketsTitle, NonTableWrapper } from "../BBComponents";
+import { TicketsTitle } from "../BBComponents";
 import FileTicketButton from "../FileTicketButton";
-import BuildBaronTable from "./BuildBaronTable";
+import JiraTicketList from "../JiraTicketList";
 
 interface CreatedTicketsProps {
   taskId: string;
@@ -18,17 +18,15 @@ const BBCreatedTickets: React.FC<CreatedTicketsProps> = ({
 }) => (
   <>
     {buildBaronConfigured && (
-      <NonTableWrapper>
+      <>
         <TicketsTitle>Create a New Ticket</TicketsTitle>
         <FileTicketButton taskId={taskId} execution={execution} />
-      </NonTableWrapper>
+      </>
     )}
     {tickets?.length > 0 && (
       <>
-        <NonTableWrapper>
-          <TicketsTitle>Tickets Created From This Task </TicketsTitle>
-        </NonTableWrapper>{" "}
-        <BuildBaronTable jiraIssues={tickets} />
+        <TicketsTitle>Tickets Created From This Task </TicketsTitle>
+        <JiraTicketList jiraIssues={tickets} />
       </>
     )}
   </>
diff --git a/src/pages/task/taskTabs/buildBaronAndAnnotations/CreatedTicketsTable/BuildBaronTable.tsx b/src/pages/task/taskTabs/buildBaronAndAnnotations/CreatedTicketsTable/BuildBaronTable.tsx
deleted file mode 100644
index 9e0dab5106..0000000000
--- a/src/pages/task/taskTabs/buildBaronAndAnnotations/CreatedTicketsTable/BuildBaronTable.tsx
+++ /dev/null
@@ -1,30 +0,0 @@
-import { Table } from "antd";
-import { CreatedTicketsQuery } from "gql/generated/types";
-import { JiraTicketRow } from "../BBComponents";
-
-type CreatedTickets = CreatedTicketsQuery["bbGetCreatedTickets"];
-
-const columns = [
-  {
-    render: (text: string, { fields, key }: CreatedTickets[0]): JSX.Element => (
-      <div data-cy="jira-ticket-row">
-        <JiraTicketRow jiraKey={key} fields={fields} />
-      </div>
-    ),
-  },
-];
-
-const BuildBaronTable: React.FC<{
-  jiraIssues: CreatedTickets;
-}> = ({ jiraIssues }) => (
-  <Table
-    data-test-id="build-baron-table"
-    dataSource={jiraIssues}
-    rowKey={({ key }) => key}
-    columns={columns}
-    pagination={false}
-    showHeader={false}
-  />
-);
-
-export default BuildBaronTable;
diff --git a/src/pages/task/taskTabs/buildBaronAndAnnotations/CreatedTicketsTable/CustomCreatedTickets.tsx b/src/pages/task/taskTabs/buildBaronAndAnnotations/CreatedTicketsTable/CustomCreatedTickets.tsx
index 3603ae8f99..3eea73e4b9 100644
--- a/src/pages/task/taskTabs/buildBaronAndAnnotations/CreatedTicketsTable/CustomCreatedTickets.tsx
+++ b/src/pages/task/taskTabs/buildBaronAndAnnotations/CreatedTicketsTable/CustomCreatedTickets.tsx
@@ -1,5 +1,5 @@
 import { IssueLink } from "gql/generated/types";
-import { TicketsTitle, NonTableWrapper } from "../BBComponents";
+import { TicketsTitle } from "../BBComponents";
 import FileTicketButton from "../FileTicketButton";
 import CustomCreatedTicketsTable from "./CustomCreatedTicketsTable";
 
@@ -15,15 +15,11 @@ const CustomCreatedTickets: React.FC<CustomCreatedTicketProps> = ({
   tickets,
 }) => (
   <>
-    <NonTableWrapper>
-      <TicketsTitle>Create a New Ticket</TicketsTitle>
-      <FileTicketButton taskId={taskId} execution={execution} />
-    </NonTableWrapper>
-    {tickets?.length > 0 && (
+    <TicketsTitle>Create a New Ticket</TicketsTitle>
+    <FileTicketButton taskId={taskId} execution={execution} />
+    {!!tickets?.length && (
       <>
-        <NonTableWrapper>
-          <TicketsTitle>Tickets Created From This Task</TicketsTitle>
-        </NonTableWrapper>
+        <TicketsTitle>Tickets Created From This Task</TicketsTitle>
         <CustomCreatedTicketsTable tickets={tickets} />
       </>
     )}
diff --git a/src/pages/task/taskTabs/buildBaronAndAnnotations/CreatedTicketsTable/index.ts b/src/pages/task/taskTabs/buildBaronAndAnnotations/CreatedTicketsTable/index.ts
index 9f3aaa0e5a..9f8a8b79fd 100644
--- a/src/pages/task/taskTabs/buildBaronAndAnnotations/CreatedTicketsTable/index.ts
+++ b/src/pages/task/taskTabs/buildBaronAndAnnotations/CreatedTicketsTable/index.ts
@@ -1,5 +1,4 @@
 import BBCreatedTickets from "./BBCreatedTickets";
-import BuildBaronTable from "./BuildBaronTable";
 import CustomCreatedTickets from "./CustomCreatedTickets";
 
-export { BBCreatedTickets, BuildBaronTable, CustomCreatedTickets };
+export { BBCreatedTickets, CustomCreatedTickets };
diff --git a/src/pages/task/taskTabs/buildBaronAndAnnotations/Issues/AnnotationTickets.tsx b/src/pages/task/taskTabs/buildBaronAndAnnotations/Issues/AnnotationTickets.tsx
index aa6864a28b..54fda20810 100644
--- a/src/pages/task/taskTabs/buildBaronAndAnnotations/Issues/AnnotationTickets.tsx
+++ b/src/pages/task/taskTabs/buildBaronAndAnnotations/Issues/AnnotationTickets.tsx
@@ -7,7 +7,7 @@ import { size } from "constants/tokens";
 import { IssueLink } from "gql/generated/types";
 import { AddIssueModal } from "../AddIssueModal";
 import { AnnotationTicketsTable } from "../AnnotationTicketsTable";
-import { TicketsTitle, NonTableWrapper } from "../BBComponents";
+import { TicketsTitle } from "../BBComponents";
 
 interface AnnotationTicketsProps {
   tickets: IssueLink[];
@@ -45,25 +45,23 @@ const AnnotationTickets: React.FC<AnnotationTicketsProps> = ({
   };
   return (
     <>
-      <NonTableWrapper>
-        <TicketsTitle>{title}</TicketsTitle>
-        <Tooltip
-          trigger={
-            <StyledButton
-              onClick={handleAdd}
-              data-cy={
-                isIssue ? "add-issue-button" : "add-suspected-issue-button"
-              }
-              disabled={!userCanModify}
-            >
-              {buttonText}
-            </StyledButton>
-          }
-          enabled={!userCanModify}
-        >
-          You are not authorized to edit failure details
-        </Tooltip>
-      </NonTableWrapper>
+      <TicketsTitle>{title}</TicketsTitle>
+      <Tooltip
+        trigger={
+          <StyledButton
+            onClick={handleAdd}
+            data-cy={
+              isIssue ? "add-issue-button" : "add-suspected-issue-button"
+            }
+            disabled={!userCanModify}
+          >
+            {buttonText}
+          </StyledButton>
+        }
+        enabled={!userCanModify}
+      >
+        You are not authorized to edit failure details
+      </Tooltip>
       {tickets.length > 0 && (
         <AnnotationTicketsTable
           jiraIssues={tickets}
diff --git a/src/pages/task/taskTabs/buildBaronAndAnnotations/JiraIssueTable/index.tsx b/src/pages/task/taskTabs/buildBaronAndAnnotations/JiraIssueTable/index.tsx
index 32fff887a4..98a882c09c 100644
--- a/src/pages/task/taskTabs/buildBaronAndAnnotations/JiraIssueTable/index.tsx
+++ b/src/pages/task/taskTabs/buildBaronAndAnnotations/JiraIssueTable/index.tsx
@@ -2,8 +2,8 @@ import { StyledLink } from "components/styles";
 import { getJiraSearchUrl } from "constants/externalResources";
 import { BuildBaron } from "gql/generated/types";
 import { useSpruceConfig } from "hooks";
-import { TicketsTitle, NonTableWrapper } from "../BBComponents";
-import { BuildBaronTable } from "../CreatedTicketsTable";
+import { TicketsTitle } from "../BBComponents";
+import JiraTicketList from "../JiraTicketList";
 
 interface JiraIssueTableProps {
   bbData: BuildBaron;
@@ -17,16 +17,15 @@ const JiraIssueTable: React.FC<JiraIssueTableProps> = ({ bbData }) => {
 
   return (
     <>
-      <NonTableWrapper>
-        <TicketsTitle>
-          Related tickets from Jira
-          <StyledLink data-cy="jira-search-link" href={jiraSearchLink}>
-            {"  "}(Jira Search)
-          </StyledLink>
-        </TicketsTitle>
-      </NonTableWrapper>
+      <TicketsTitle>
+        Related tickets from JIRA
+        <StyledLink data-cy="jira-search-link" href={jiraSearchLink}>
+          {" "}
+          (JIRA Search)
+        </StyledLink>
+      </TicketsTitle>
       {/* build baron related jira tickets */}
-      <BuildBaronTable jiraIssues={bbData?.searchReturnInfo?.issues} />
+      <JiraTicketList jiraIssues={bbData?.searchReturnInfo?.issues} />
     </>
   );
 };
diff --git a/src/pages/task/taskTabs/buildBaronAndAnnotations/JiraTicketList/JiraTicketRow/JiraTicketRow.stories.tsx b/src/pages/task/taskTabs/buildBaronAndAnnotations/JiraTicketList/JiraTicketRow/JiraTicketRow.stories.tsx
new file mode 100644
index 0000000000..894de531ed
--- /dev/null
+++ b/src/pages/task/taskTabs/buildBaronAndAnnotations/JiraTicketList/JiraTicketRow/JiraTicketRow.stories.tsx
@@ -0,0 +1,24 @@
+import { CustomMeta, CustomStoryObj } from "test_utils/types";
+import JiraTicketRow from ".";
+
+export default {
+  component: JiraTicketRow,
+} satisfies CustomMeta<typeof JiraTicketRow>;
+
+export const Default: CustomStoryObj<typeof JiraTicketRow> = {
+  render: (args) => <JiraTicketRow {...args} />,
+  argTypes: {},
+  args: {
+    jiraKey: "DEVPROD-123",
+    fields: {
+      summary: "Create the JiraTicketRow component",
+      status: {
+        name: "Closed",
+        id: "id",
+      },
+      created: "2020-01-02",
+      updated: "2023-11-21",
+      assigneeDisplayName: "mohamed.khelif",
+    },
+  },
+};
diff --git a/src/pages/task/taskTabs/buildBaronAndAnnotations/JiraTicketList/JiraTicketRow/index.tsx b/src/pages/task/taskTabs/buildBaronAndAnnotations/JiraTicketList/JiraTicketRow/index.tsx
new file mode 100644
index 0000000000..3e484292dd
--- /dev/null
+++ b/src/pages/task/taskTabs/buildBaronAndAnnotations/JiraTicketList/JiraTicketRow/index.tsx
@@ -0,0 +1,72 @@
+import styled from "@emotion/styled";
+import Badge from "@leafygreen-ui/badge";
+import { Disclaimer } from "@leafygreen-ui/typography";
+import { useAnnotationAnalytics } from "analytics";
+import { StyledLink } from "components/styles";
+import { getJiraTicketUrl } from "constants/externalResources";
+import { size } from "constants/tokens";
+import { TicketFields } from "gql/generated/types";
+import { useSpruceConfig, useDateFormat } from "hooks";
+import { trimStringFromMiddle } from "utils/string";
+
+interface JiraTicketRowProps {
+  jiraKey: string;
+  fields: TicketFields;
+}
+const JiraTicketRow: React.FC<JiraTicketRowProps> = ({ fields, jiraKey }) => {
+  const annotationAnalytics = useAnnotationAnalytics();
+  const getDateCopy = useDateFormat();
+  const spruceConfig = useSpruceConfig();
+  const jiraHost = spruceConfig?.jira?.host;
+  const url = getJiraTicketUrl(jiraHost, jiraKey);
+  const { assigneeDisplayName, created, status, summary, updated } =
+    fields ?? {};
+  return (
+    <Container data-cy="jira-ticket-row">
+      <JiraSummaryLink
+        href={url}
+        data-cy={jiraKey}
+        onClick={() =>
+          annotationAnalytics.sendEvent({ name: "Click Jira Summary Link" })
+        }
+        title={summary}
+      >
+        {jiraKey}: {trimStringFromMiddle(summary, 80)}
+      </JiraSummaryLink>
+
+      <Badge data-cy={`${jiraKey}-badge`} variant="lightgray">
+        {status.name}
+      </Badge>
+
+      <BottomMetaDataWrapper data-cy={`${jiraKey}-metadata`}>
+        <Disclaimer>
+          Created: {getDateCopy(created, { dateOnly: true })}
+        </Disclaimer>
+        <Disclaimer>
+          Updated: {getDateCopy(updated, { dateOnly: true })}
+        </Disclaimer>
+        <Disclaimer>
+          {assigneeDisplayName
+            ? `Assignee: ${assigneeDisplayName}`
+            : "Unassigned"}
+        </Disclaimer>
+      </BottomMetaDataWrapper>
+    </Container>
+  );
+};
+
+const Container = styled.div`
+  padding: ${size.xs};
+`;
+const BottomMetaDataWrapper = styled.div`
+  margin-top: ${size.xs};
+  display: flex;
+  gap: ${size.s};
+`;
+
+const JiraSummaryLink = styled(StyledLink)`
+  font-weight: bold;
+  margin-right: ${size.s};
+`;
+
+export default JiraTicketRow;
diff --git a/src/pages/task/taskTabs/buildBaronAndAnnotations/JiraTicketList/index.tsx b/src/pages/task/taskTabs/buildBaronAndAnnotations/JiraTicketList/index.tsx
new file mode 100644
index 0000000000..77a3347b48
--- /dev/null
+++ b/src/pages/task/taskTabs/buildBaronAndAnnotations/JiraTicketList/index.tsx
@@ -0,0 +1,16 @@
+import { CreatedTicketsQuery } from "gql/generated/types";
+import JiraTicketRow from "./JiraTicketRow";
+
+type CreatedTickets = CreatedTicketsQuery["bbGetCreatedTickets"];
+
+const JiraTicketList: React.FC<{
+  jiraIssues: CreatedTickets;
+}> = ({ jiraIssues }) => (
+  <>
+    {jiraIssues.map(({ fields, key }) => (
+      <JiraTicketRow jiraKey={key} fields={fields} key={key} />
+    ))}
+  </>
+);
+
+export default JiraTicketList;
diff --git a/src/pages/version/taskDuration/TaskDurationTable.stories.tsx b/src/pages/version/taskDuration/TaskDurationTable.stories.tsx
index e11ce53e3f..5b1e885eee 100644
--- a/src/pages/version/taskDuration/TaskDurationTable.stories.tsx
+++ b/src/pages/version/taskDuration/TaskDurationTable.stories.tsx
@@ -2,7 +2,6 @@ import { CustomStoryObj, CustomMeta } from "test_utils/types";
 import { TaskDurationTable } from "./TaskDurationTable";
 
 export default {
-  title: "Pages/Task/Table/Task Duration Table",
   component: TaskDurationTable,
 } satisfies CustomMeta<typeof TaskDurationTable>;
 
diff --git a/src/test_utils/graphql.tsx b/src/test_utils/graphql.tsx
new file mode 100644
index 0000000000..09458408d5
--- /dev/null
+++ b/src/test_utils/graphql.tsx
@@ -0,0 +1,14 @@
+import React from "react";
+import { MockedProvider, MockedProviderProps } from "@apollo/client/testing";
+import { cache } from "gql/GQLWrapper";
+
+const CustomMockedProvider: React.FC<MockedProviderProps> = ({
+  children,
+  ...props
+}) => (
+  <MockedProvider cache={cache} {...props}>
+    {children}
+  </MockedProvider>
+);
+
+export { CustomMockedProvider as MockedProvider };