diff --git a/src/pages/task/taskTabs/buildBaronAndAnnotations/CreatedTicketsTable/CustomCreatedTickets.stories.tsx b/src/pages/task/taskTabs/buildBaronAndAnnotations/CreatedTicketsTable/CustomCreatedTickets.stories.tsx
new file mode 100644
index 0000000000..98f1224086
--- /dev/null
+++ b/src/pages/task/taskTabs/buildBaronAndAnnotations/CreatedTicketsTable/CustomCreatedTickets.stories.tsx
@@ -0,0 +1,57 @@
+import WithToastContext from "test_utils/toast-decorator";
+import { CustomMeta, CustomStoryObj } from "test_utils/types";
+import CustomCreatedTickets from "./CustomCreatedTickets";
+
+export default {
+  component: CustomCreatedTickets,
+  decorators: [(Story: () => JSX.Element) => WithToastContext(Story)],
+} satisfies CustomMeta<typeof CustomCreatedTickets>;
+
+export const Default: CustomStoryObj<typeof CustomCreatedTickets> = {
+  render: (args) => <CustomCreatedTickets {...args} />,
+  argTypes: {},
+  args: {
+    execution: 0,
+    taskId: "123",
+    tickets: [
+      {
+        confidenceScore: 0.25,
+        issueKey: "DEVPROD-1",
+        jiraTicket: {
+          key: "key",
+          fields: {
+            summary: "Issue Summary",
+            status: {
+              id: "id",
+              name: "Done",
+            },
+            created: "2020-01-27",
+            updated: "2023-11-28",
+            assigneeDisplayName: "sophie.stadler",
+            assignedTeam: "evg-ui",
+          },
+        },
+        url: "https://spruce.mongodb.com",
+      },
+      {
+        confidenceScore: 0.5,
+        issueKey: "DEVPROD-2",
+        jiraTicket: {
+          key: "key",
+          fields: {
+            summary: "Issue Summary",
+            status: {
+              id: "id",
+              name: "In Progress",
+            },
+            created: "2020-01-28",
+            updated: "2023-11-29",
+            assigneeDisplayName: "mohamed.khelif",
+            assignedTeam: "evg-ui",
+          },
+        },
+        url: "https://spruce.mongodb.com",
+      },
+    ],
+  },
+};
diff --git a/src/pages/task/taskTabs/buildBaronAndAnnotations/CreatedTicketsTable/CustomCreatedTickets.tsx b/src/pages/task/taskTabs/buildBaronAndAnnotations/CreatedTicketsTable/CustomCreatedTickets.tsx
index 3eea73e4b9..fe5be98a04 100644
--- a/src/pages/task/taskTabs/buildBaronAndAnnotations/CreatedTicketsTable/CustomCreatedTickets.tsx
+++ b/src/pages/task/taskTabs/buildBaronAndAnnotations/CreatedTicketsTable/CustomCreatedTickets.tsx
@@ -1,7 +1,9 @@
+import styled from "@emotion/styled";
+import { size } from "constants/tokens";
 import { IssueLink } from "gql/generated/types";
+import { AnnotationTicketRow } from "../AnnotationTicketsTable/AnnotationTicketRow";
 import { TicketsTitle } from "../BBComponents";
 import FileTicketButton from "../FileTicketButton";
-import CustomCreatedTicketsTable from "./CustomCreatedTicketsTable";
 
 interface CustomCreatedTicketProps {
   taskId: string;
@@ -19,11 +21,27 @@ const CustomCreatedTickets: React.FC<CustomCreatedTicketProps> = ({
     <FileTicketButton taskId={taskId} execution={execution} />
     {!!tickets?.length && (
       <>
-        <TicketsTitle>Tickets Created From This Task</TicketsTitle>
-        <CustomCreatedTicketsTable tickets={tickets} />
+        <TicketsTitle margin>Tickets Created From This Task</TicketsTitle>
+        <TicketContainer>
+          {tickets.map(({ confidenceScore, issueKey, jiraTicket, url }) => (
+            <AnnotationTicketRow
+              confidenceScore={confidenceScore}
+              issueKey={issueKey}
+              jiraTicket={jiraTicket}
+              key={issueKey}
+              url={url}
+            />
+          ))}
+        </TicketContainer>
       </>
     )}
   </>
 );
 
+const TicketContainer = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: ${size.s};
+`;
+
 export default CustomCreatedTickets;
diff --git a/src/pages/task/taskTabs/buildBaronAndAnnotations/CreatedTicketsTable/CustomCreatedTicketsTable.tsx b/src/pages/task/taskTabs/buildBaronAndAnnotations/CreatedTicketsTable/CustomCreatedTicketsTable.tsx
deleted file mode 100644
index a5c599f050..0000000000
--- a/src/pages/task/taskTabs/buildBaronAndAnnotations/CreatedTicketsTable/CustomCreatedTicketsTable.tsx
+++ /dev/null
@@ -1,48 +0,0 @@
-import { Table } from "antd";
-import { AnnotationTicketRow } from "../AnnotationTicketsTable/AnnotationTicketRow";
-import {
-  AnnotationTickets,
-  AnnotationTicket,
-} from "../AnnotationTicketsTable/types";
-
-// CREATED TICKETS
-interface CreatedTicketsProps {
-  tickets: AnnotationTickets;
-}
-
-const CustomCreatedTicketsTable: React.FC<CreatedTicketsProps> = ({
-  tickets,
-}) => {
-  const columns = [
-    {
-      title: "Ticket",
-      render: ({
-        confidenceScore,
-        issueKey,
-        jiraTicket,
-        url,
-      }: AnnotationTicket): JSX.Element => (
-        <AnnotationTicketRow
-          issueKey={issueKey}
-          url={url}
-          confidenceScore={confidenceScore}
-          jiraTicket={jiraTicket}
-        />
-      ),
-    },
-  ];
-
-  return (
-    <Table
-      tableLayout="fixed"
-      data-test-id="created-issues-table"
-      dataSource={tickets}
-      rowKey={({ issueKey }) => issueKey}
-      columns={columns}
-      pagination={false}
-      showHeader={false}
-    />
-  );
-};
-
-export default CustomCreatedTicketsTable;