diff --git a/src/assets/icons/filled_back_icon.svg b/src/assets/icons/filled_back_icon.svg
new file mode 100644
index 000000000..84f69cde7
--- /dev/null
+++ b/src/assets/icons/filled_back_icon.svg
@@ -0,0 +1,13 @@
+<svg width="19" height="20" viewBox="0 0 19 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <g clip-path="url(#clip0_9618_1426)">
+    <circle cx="9.7983" cy="10.4262" r="6.39205" fill="#42C684" />
+    <path fill-rule="evenodd" clip-rule="evenodd"
+      d="M0.214844 9.99982C0.214844 4.93988 4.31683 0.837891 9.37678 0.837891C14.4367 0.837891 18.5387 4.93988 18.5387 9.99982C18.5387 15.0598 14.4367 19.1618 9.37678 19.1618C4.31683 19.1618 0.214844 15.0598 0.214844 9.99982ZM6.69893 9.46715L8.5424 11.2441C8.60284 11.3025 8.6512 11.3721 8.68472 11.4491C8.71824 11.5261 8.73627 11.6089 8.73778 11.6929C8.73928 11.7769 8.72423 11.8603 8.69349 11.9385C8.66274 12.0166 8.61691 12.088 8.55859 12.1484C8.50028 12.2088 8.43064 12.2572 8.35364 12.2907C8.27664 12.3242 8.19379 12.3423 8.10982 12.3438C8.02585 12.3453 7.94241 12.3302 7.86425 12.2995C7.7861 12.2687 7.71477 12.2229 7.65433 12.1646L4.67223 9.28903C4.6115 9.23071 4.56289 9.16097 4.5292 9.08381C4.4955 9.00665 4.47738 8.92359 4.47587 8.83941C4.47437 8.75523 4.48951 8.67158 4.52043 8.59326C4.55135 8.51495 4.59743 8.44351 4.65604 8.38306L7.63899 5.29443C7.75676 5.17248 7.91814 5.10231 8.08764 5.09935C8.25715 5.09639 8.42088 5.16089 8.54283 5.27866C8.66477 5.39642 8.73494 5.55781 8.7379 5.72731C8.74086 5.89681 8.67636 6.06055 8.55859 6.18249L6.62138 8.18874H11.2518H11.2697C11.3141 8.18928 11.3584 8.19156 11.4026 8.19556C11.8727 8.23079 12.3303 8.36312 12.7467 8.5842C13.1242 8.78619 13.5137 9.09727 13.8077 9.56857C14.1026 10.0424 14.2773 10.6424 14.2773 11.3848C14.2773 13.0382 13.5708 13.9697 12.7748 14.4495C12.3182 14.7208 11.8019 14.8757 11.2714 14.9004H11.2518H10.57C10.4004 14.9004 10.2378 14.833 10.118 14.7132C9.9981 14.5933 9.93075 14.4307 9.93075 14.2612C9.93075 14.0917 9.9981 13.9291 10.118 13.8092C10.2378 13.6893 10.4004 13.622 10.57 13.622H11.2526L11.2995 13.6186C11.5875 13.5918 11.8661 13.5015 12.1151 13.3544C12.5123 13.1149 12.9989 12.6078 12.9989 11.3848C12.9989 10.8487 12.8754 10.4899 12.7228 10.2444C12.5806 10.0181 12.3805 9.83394 12.1433 9.7109C11.8688 9.56601 11.566 9.48282 11.256 9.46715H6.69893Z"
+      fill="white" />
+  </g>
+  <defs>
+    <clipPath id="clip0_9618_1426">
+      <rect width="18.75" height="20" fill="white" />
+    </clipPath>
+  </defs>
+</svg>
diff --git a/src/assets/icons/filled_circular_delete.svg b/src/assets/icons/filled_circular_delete.svg
new file mode 100644
index 000000000..2a078cc98
--- /dev/null
+++ b/src/assets/icons/filled_circular_delete.svg
@@ -0,0 +1,15 @@
+<svg width="19" height="20" viewBox="0 0 19 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <g clip-path="url(#clip0_9618_22284)">
+    <path
+      d="M9.14445 19.1756C14.2164 19.1756 18.328 15.064 18.328 9.9921C18.328 4.92019 14.2164 0.808594 9.14445 0.808594C4.07253 0.808594 -0.0390625 4.92019 -0.0390625 9.9921C-0.0390625 15.064 4.07253 19.1756 9.14445 19.1756Z"
+      fill="white" />
+    <path fill-rule="evenodd" clip-rule="evenodd"
+      d="M12.5009 5.1767L14.073 6.74874L10.5645 10.2572L14.0731 13.7657L12.501 15.3378L8.99248 11.8292L5.48363 15.3381L3.91159 13.766L7.42045 10.2572L3.91171 6.74844L5.48375 5.1764L8.99249 8.68514L12.5009 5.1767Z"
+      fill="#B54717" />
+  </g>
+  <defs>
+    <clipPath id="clip0_9618_22284">
+      <rect width="18.75" height="20" fill="white" />
+    </clipPath>
+  </defs>
+</svg>
diff --git a/src/components/CancelApplicationButton/index.test.tsx b/src/components/CancelApplicationButton/index.test.tsx
index 4366d3804..09b636522 100644
--- a/src/components/CancelApplicationButton/index.test.tsx
+++ b/src/components/CancelApplicationButton/index.test.tsx
@@ -19,21 +19,45 @@ const baseAuthCtx: AuthContextState = {
 };
 
 const baseUser: User = {
-  _id: "",
+  _id: "base-user-123",
   firstName: "",
   lastName: "",
   userStatus: "Active",
-  role: "Submitter", // NOTE: This role has access to the delete button by default
+  role: "Submitter",
   IDP: "nih",
   email: "",
   studies: null,
   dataCommons: [],
   createdAt: "",
   updateAt: "",
-  permissions: ["data_submission:view", "data_submission:create"],
+  permissions: [],
   notifications: [],
 };
 
+const baseApp: Omit<Application, "questionnaireData"> = {
+  _id: "",
+  status: "New",
+  createdAt: "",
+  updatedAt: "",
+  submittedDate: "",
+  history: [],
+  ORCID: "",
+  applicant: {
+    applicantID: "applicant-123",
+    applicantName: "",
+    applicantEmail: "",
+  },
+  PI: "",
+  controlledAccess: false,
+  openAccess: false,
+  studyAbbreviation: "",
+  conditional: false,
+  pendingConditions: [],
+  programName: "",
+  programAbbreviation: "",
+  programDescription: "",
+};
+
 type TestParentProps = {
   user?: Partial<User>;
   mocks?: MockedResponse[];
@@ -57,22 +81,103 @@ const TestParent: React.FC<TestParentProps> = ({ mocks = [], user = {}, children
 };
 
 describe("Accessibility", () => {
-  it("should have no violations for the component", async () => {
+  it("should have no violations for the component (cancel)", async () => {
     const { container, getByTestId } = render(
-      <Button nodeType="test" selectedItems={["ID_1", "ID_2", "ID_3"]} />,
-      { wrapper: TestParent }
+      <Button
+        application={{
+          ...baseApp,
+          status: "New",
+          applicant: { ...baseApp.applicant, applicantID: "owner" },
+        }}
+      />,
+      {
+        wrapper: ({ children }) => (
+          <TestParent
+            user={{ ...baseUser, _id: "owner", permissions: ["submission_request:cancel"] }}
+          >
+            {children}
+          </TestParent>
+        ),
+      }
     );
 
-    expect(getByTestId("cancel-restore-application-button")).not.toBeDisabled(); // Sanity check to ensure the button is active
+    expect(getByTestId("application-cancel-icon")).toBeInTheDocument(); // Sanity check for Cancel
     expect(await axe(container)).toHaveNoViolations();
   });
 
-  it("should have no violations for the component when disabled", async () => {
-    const { container, getByTestId } = render(<Button nodeType="test" selectedItems={[]} />, {
-      wrapper: TestParent,
-    });
+  it("should have no violations for the component (restore)", async () => {
+    const { container, getByTestId } = render(
+      <Button
+        application={{
+          ...baseApp,
+          status: "Canceled",
+          applicant: { ...baseApp.applicant, applicantID: "owner" },
+        }}
+      />,
+      {
+        wrapper: ({ children }) => (
+          <TestParent
+            user={{ ...baseUser, _id: "owner", permissions: ["submission_request:cancel"] }}
+          >
+            {children}
+          </TestParent>
+        ),
+      }
+    );
+
+    expect(getByTestId("application-restore-icon")).toBeInTheDocument(); // Sanity check for Restore
+    expect(await axe(container)).toHaveNoViolations();
+  });
+
+  it("should have no violations for the component (cancel disabled)", async () => {
+    const { container, getByTestId } = render(
+      <Button
+        application={{
+          ...baseApp,
+          status: "New",
+          applicant: { ...baseApp.applicant, applicantID: "owner" },
+        }}
+        disabled
+      />,
+      {
+        wrapper: ({ children }) => (
+          <TestParent
+            user={{ ...baseUser, _id: "owner", permissions: ["submission_request:cancel"] }}
+          >
+            {children}
+          </TestParent>
+        ),
+      }
+    );
 
-    expect(getByTestId("cancel-restore-application-button")).toBeDisabled(); // Sanity check to ensure the button is disabled
+    expect(getByTestId("application-cancel-icon")).toBeInTheDocument(); // Sanity check for Cancel
+    expect(getByTestId("cancel-restore-application-button")).toBeDisabled(); // Sanity check for disabled
+    expect(await axe(container)).toHaveNoViolations();
+  });
+
+  it("should have no violations for the component (restore disabled)", async () => {
+    const { container, getByTestId } = render(
+      <Button
+        application={{
+          ...baseApp,
+          status: "Canceled",
+          applicant: { ...baseApp.applicant, applicantID: "owner" },
+        }}
+        disabled
+      />,
+      {
+        wrapper: ({ children }) => (
+          <TestParent
+            user={{ ...baseUser, _id: "owner", permissions: ["submission_request:cancel"] }}
+          >
+            {children}
+          </TestParent>
+        ),
+      }
+    );
+
+    expect(getByTestId("application-restore-icon")).toBeInTheDocument(); // Sanity check for Restore
+    expect(getByTestId("cancel-restore-application-button")).toBeDisabled(); // Sanity check for disabled
     expect(await axe(container)).toHaveNoViolations();
   });
 });
@@ -83,12 +188,10 @@ describe("Basic Functionality", () => {
   });
 
   it("should render without crashing", () => {
-    expect(() =>
-      render(<Button nodeType="" selectedItems={[]} />, { wrapper: TestParent })
-    ).not.toThrow();
+    expect(() => render(<Button application={null} />, { wrapper: TestParent })).not.toThrow();
   });
 
-  it("should show a snackbar when the delete operation fails (GraphQL Error)", async () => {
+  it("should show a snackbar when the cancel operation fails (GraphQL Error)", async () => {
     const mocks: MockedResponse<CancelAppResp, CancelAppInput>[] = [
       {
         request: {
@@ -101,9 +204,24 @@ describe("Basic Functionality", () => {
       },
     ];
 
-    const { getByTestId, getByRole } = render(
-      <Button nodeType="test" selectedItems={["1 item ID"]} />,
-      { wrapper: (props) => <TestParent {...props} mocks={mocks} /> }
+    const { getByRole, getByTestId } = render(
+      <Button
+        application={{
+          ...baseApp,
+          status: "In Progress",
+          applicant: { ...baseApp.applicant, applicantID: "owner" },
+        }}
+      />,
+      {
+        wrapper: ({ children }) => (
+          <TestParent
+            mocks={mocks}
+            user={{ ...baseUser, _id: "owner", permissions: ["submission_request:cancel"] }}
+          >
+            {children}
+          </TestParent>
+        ),
+      }
     );
 
     // Open confirmation dialog
@@ -115,7 +233,7 @@ describe("Basic Functionality", () => {
 
     await waitFor(() => {
       expect(global.mockEnqueue).toHaveBeenCalledWith(
-        "An error occurred while deleting the selected rows.",
+        "Oops! Unable to cancel that Submission Request",
         {
           variant: "error",
         }
@@ -134,9 +252,24 @@ describe("Basic Functionality", () => {
       },
     ];
 
-    const { getByTestId, getByRole } = render(
-      <Button nodeType="test" selectedItems={["1 item ID"]} />,
-      { wrapper: (props) => <TestParent {...props} mocks={mocks} /> }
+    const { getByRole, getByTestId } = render(
+      <Button
+        application={{
+          ...baseApp,
+          status: "In Progress",
+          applicant: { ...baseApp.applicant, applicantID: "owner" },
+        }}
+      />,
+      {
+        wrapper: ({ children }) => (
+          <TestParent
+            mocks={mocks}
+            user={{ ...baseUser, _id: "owner", permissions: ["submission_request:cancel"] }}
+          >
+            {children}
+          </TestParent>
+        ),
+      }
     );
 
     // Open confirmation dialog
@@ -148,7 +281,7 @@ describe("Basic Functionality", () => {
 
     await waitFor(() => {
       expect(global.mockEnqueue).toHaveBeenCalledWith(
-        "An error occurred while deleting the selected rows.",
+        "Oops! Unable to cancel that Submission Request",
         {
           variant: "error",
         }
@@ -165,18 +298,32 @@ describe("Basic Functionality", () => {
         variableMatcher: () => true,
         result: {
           data: {
-            deleteDataRecords: {
-              success: false,
-              message: "Simulated API rejection message",
+            cancelApplication: {
+              _id: undefined,
             },
           },
         },
       },
     ];
 
-    const { getByTestId, getByRole } = render(
-      <Button nodeType="test" selectedItems={["1 item ID"]} />,
-      { wrapper: (props) => <TestParent {...props} mocks={mocks} /> }
+    const { getByRole, getByTestId } = render(
+      <Button
+        application={{
+          ...baseApp,
+          status: "In Progress",
+          applicant: { ...baseApp.applicant, applicantID: "owner" },
+        }}
+      />,
+      {
+        wrapper: ({ children }) => (
+          <TestParent
+            mocks={mocks}
+            user={{ ...baseUser, _id: "owner", permissions: ["submission_request:cancel"] }}
+          >
+            {children}
+          </TestParent>
+        ),
+      }
     );
 
     // Open confirmation dialog
@@ -188,7 +335,7 @@ describe("Basic Functionality", () => {
 
     await waitFor(() => {
       expect(global.mockEnqueue).toHaveBeenCalledWith(
-        "An error occurred while deleting the selected rows.",
+        "Oops! Unable to cancel that Submission Request",
         {
           variant: "error",
         }
@@ -196,8 +343,8 @@ describe("Basic Functionality", () => {
     });
   });
 
-  it("should call the onCancel callback when the cancel/restore operation is successful", async () => {
-    const onDelete = jest.fn();
+  it("should call the onCancel callback when the cancel operation is successful", async () => {
+    const onCancel = jest.fn();
     const mocks: MockedResponse<CancelAppResp, CancelAppInput>[] = [
       {
         request: {
@@ -206,18 +353,33 @@ describe("Basic Functionality", () => {
         variableMatcher: () => true,
         result: {
           data: {
-            deleteDataRecords: {
-              success: true,
-              message: "",
+            cancelApplication: {
+              _id: "some id",
             },
           },
         },
       },
     ];
 
-    const { getByTestId, getByRole } = render(
-      <Button nodeType="test" selectedItems={["1 item ID"]} onDelete={onDelete} />,
-      { wrapper: (props) => <TestParent {...props} mocks={mocks} /> }
+    const { getByRole, getByTestId } = render(
+      <Button
+        application={{
+          ...baseApp,
+          status: "In Progress",
+          applicant: { ...baseApp.applicant, applicantID: "owner" },
+        }}
+        onCancel={onCancel}
+      />,
+      {
+        wrapper: ({ children }) => (
+          <TestParent
+            mocks={mocks}
+            user={{ ...baseUser, _id: "owner", permissions: ["submission_request:cancel"] }}
+          >
+            {children}
+          </TestParent>
+        ),
+      }
     );
 
     // Open confirmation dialog
@@ -228,7 +390,7 @@ describe("Basic Functionality", () => {
     userEvent.click(button);
 
     await waitFor(() => {
-      expect(onDelete).toHaveBeenCalled();
+      expect(onCancel).toHaveBeenCalled();
     });
   });
 });
@@ -238,111 +400,165 @@ describe("Implementation Requirements", () => {
     jest.resetAllMocks();
   });
 
-  it("should be disabled when a cancel/restore operation is in progress", () => {
-    const { getByTestId } = render(<Button nodeType="test" selectedItems={[]} />, {
-      wrapper: (props) => <TestParent {...props} submission={{ deletingData: true }} />,
-    });
-
-    expect(getByTestId("cancel-restore-application-button")).toBeDisabled();
-  });
-
-  it("should restore the Submission Request only when the 'Confirm' button is clicked in the dialog", async () => {
-    const mockMatcher = jest.fn().mockImplementation(() => true);
-    const mocks: MockedResponse<CancelAppResp, CancelAppInput>[] = [
-      {
-        request: {
-          query: CANCEL_APP,
-        },
-        variableMatcher: mockMatcher,
-        result: {
-          data: {
-            deleteDataRecords: {
-              success: false,
-              message: "Simulated API rejection message",
-            },
-          },
-        },
-      },
-    ];
-
-    const { getByTestId, getByRole } = render(
-      <Button nodeType="test-node-type" selectedItems={["ID_1", "ID_2", "ID_3"]} />,
+  it("should dismiss the dialog when the 'Cancel' dialog button is clicked", async () => {
+    const { getByRole, getByTestId } = render(
+      <Button
+        application={{
+          ...baseApp,
+          status: "In Progress",
+          applicant: { ...baseApp.applicant, applicantID: "owner" },
+        }}
+      />,
       {
-        wrapper: (props) => (
-          <TestParent {...props} mocks={mocks} submission={{ _id: "mock-submission-id" }} />
+        wrapper: ({ children }) => (
+          <TestParent
+            user={{ ...baseUser, _id: "owner", permissions: ["submission_request:cancel"] }}
+          >
+            {children}
+          </TestParent>
         ),
       }
     );
 
-    expect(mockMatcher).not.toHaveBeenCalled();
-
     userEvent.click(getByTestId("cancel-restore-application-button"));
 
-    const button = await within(getByRole("dialog")).findByRole("button", { name: /confirm/i });
+    const dialog = getByRole("dialog");
+    expect(dialog).toBeInTheDocument();
+
+    const button = await within(dialog).findByRole("button", { name: /cancel/i });
     userEvent.click(button);
 
     await waitFor(() => {
-      expect(mockMatcher).toHaveBeenCalledWith(
-        expect.objectContaining({
-          _id: "mock-submission-id",
-          nodeType: "test-node-type",
-          nodeIds: ["ID_1", "ID_2", "ID_3"],
-        })
-      );
+      expect(() => getByRole("dialog")).toThrow();
     });
   });
 
-  it("should cancel the Submission Request only when the 'Confirm' button is clicked in the dialog", async () => {
-    const mockMatcher = jest.fn().mockImplementation(() => true);
-    const mocks: MockedResponse<CancelAppResp, CancelAppInput>[] = [
+  // NOTE: They own the application, but the permission is missing
+  it("should not be rendered when the user is missing the required permissions", async () => {
+    const { queryByTestId } = render(
+      <Button
+        application={{
+          ...baseApp,
+          status: "In Progress",
+          applicant: { ...baseApp.applicant, applicantID: "owner" },
+        }}
+      />,
       {
-        request: {
-          query: CANCEL_APP,
-        },
-        variableMatcher: mockMatcher,
-        result: {
-          data: {
-            deleteDataRecords: {
-              success: false,
-              message: "Simulated API rejection message",
-            },
-          },
-        },
-      },
-    ];
+        wrapper: ({ children }) => (
+          <TestParent user={{ ...baseUser, _id: "owner", permissions: [] }}>{children}</TestParent>
+        ),
+      }
+    );
+
+    expect(queryByTestId("cancel-restore-application-button")).not.toBeInTheDocument();
+  });
+
+  // NOTE: This is just a sanity check against component logic, and does not
+  // cover all of the requirements. See the hasPermission checks for that.
+  it.each<ApplicationStatus>(["Canceled", "Deleted"])(
+    "should render as the 'Restore' variant for the Submission Request status '%s'",
+    (status) => {
+      const { getByTestId } = render(
+        <Button
+          application={{
+            ...baseApp,
+            status,
+            applicant: { ...baseApp.applicant, applicantID: "owner" },
+          }}
+        />,
+        {
+          wrapper: ({ children }) => (
+            <TestParent
+              user={{ ...baseUser, _id: "owner", permissions: ["submission_request:cancel"] }}
+            >
+              {children}
+            </TestParent>
+          ),
+        }
+      );
+
+      expect(getByTestId("cancel-restore-application-button")).toBeVisible();
+      expect(getByTestId("application-restore-icon")).toBeInTheDocument();
+    }
+  );
+
+  // NOTE: This is just a sanity check against component logic, and does not
+  // cover all of the requirements. See the hasPermission checks for that.
+  it.each<ApplicationStatus>(["New", "In Progress"])(
+    "should render as the 'Cancel' variant for the Submission Request status '%s'",
+    (status) => {
+      const { getByTestId } = render(
+        <Button
+          application={{
+            ...baseApp,
+            status,
+            applicant: { ...baseApp.applicant, applicantID: "owner" },
+          }}
+        />,
+        {
+          wrapper: ({ children }) => (
+            <TestParent
+              user={{ ...baseUser, _id: "owner", permissions: ["submission_request:cancel"] }}
+            >
+              {children}
+            </TestParent>
+          ),
+        }
+      );
 
-    const { getByTestId, getByRole } = render(
-      <Button nodeType="test-node-type" selectedItems={["ID_1", "ID_2", "ID_3"]} />,
+      expect(getByTestId("cancel-restore-application-button")).toBeVisible();
+      expect(getByTestId("application-cancel-icon")).toBeInTheDocument();
+    }
+  );
+
+  it("should render tailored dialog content for the 'Restore' variant", async () => {
+    const { getByRole, getByTestId } = render(
+      <Button
+        application={{
+          ...baseApp,
+          status: "Canceled",
+          applicant: { ...baseApp.applicant, applicantID: "owner" },
+        }}
+      />,
       {
-        wrapper: (props) => (
-          <TestParent {...props} mocks={mocks} submission={{ _id: "mock-submission-id" }} />
+        wrapper: ({ children }) => (
+          <TestParent
+            user={{ ...baseUser, _id: "owner", permissions: ["submission_request:cancel"] }}
+          >
+            {children}
+          </TestParent>
         ),
       }
     );
 
-    expect(mockMatcher).not.toHaveBeenCalled();
-
     userEvent.click(getByTestId("cancel-restore-application-button"));
 
-    const button = await within(getByRole("dialog")).findByRole("button", { name: /confirm/i });
-    userEvent.click(button);
+    const dialog = getByRole("dialog");
+    expect(dialog).toBeInTheDocument();
 
-    await waitFor(() => {
-      expect(mockMatcher).toHaveBeenCalledWith(
-        expect.objectContaining({
-          _id: "mock-submission-id",
-          nodeType: "test-node-type",
-          nodeIds: ["ID_1", "ID_2", "ID_3"],
-        })
-      );
-    });
+    expect(getByTestId("delete-dialog-header")).toHaveTextContent("Restore Submission Request");
+    expect(getByTestId("delete-dialog-description")).toHaveTextContent(
+      "Are you sure you want to restore the previously canceled submission request for the study listed below?"
+    ); // Ignore study info, that is checked elsewhere
   });
 
-  it("should dismiss the dialog when the 'Cancel' button is clicked", async () => {
-    const { getByTestId, getByRole } = render(
-      <Button nodeType="test" selectedItems={["1 item ID"]} />,
+  it("should render tailored dialog content for the 'Cancel' variant", async () => {
+    const { getByRole, getByTestId } = render(
+      <Button
+        application={{
+          ...baseApp,
+          status: "New",
+          applicant: { ...baseApp.applicant, applicantID: "owner" },
+        }}
+      />,
       {
-        wrapper: TestParent,
+        wrapper: ({ children }) => (
+          <TestParent
+            user={{ ...baseUser, _id: "owner", permissions: ["submission_request:cancel"] }}
+          >
+            {children}
+          </TestParent>
+        ),
       }
     );
 
@@ -351,57 +567,67 @@ describe("Implementation Requirements", () => {
     const dialog = getByRole("dialog");
     expect(dialog).toBeInTheDocument();
 
-    const button = await within(dialog).findByRole("button", { name: /cancel/i });
-    userEvent.click(button);
-
-    await waitFor(() => {
-      expect(() => getByRole("dialog")).toThrow();
-    });
+    expect(getByTestId("delete-dialog-header")).toHaveTextContent("Cancel Submission Request");
+    expect(getByTestId("delete-dialog-description")).toHaveTextContent(
+      "Are you sure you want to cancel the submission request for the study listed below?"
+    ); // Ignore study info, that is checked elsewhere
   });
 
-  it("should be visible and interactive when the user has the required permissions", async () => {
-    const { getByTestId } = render(<Button nodeType="test" selectedItems={[]} />, {
-      wrapper: (props) => (
-        <TestParent
-          {...props}
-          user={{
-            role: "Submitter",
-            permissions: ["data_submission:view", "data_submission:create"],
-          }}
-        />
-      ),
-    });
+  it("should render the Study Abbreviation in the dialog description", async () => {
+    const { getByRole, getByTestId } = render(
+      <Button
+        application={{
+          ...baseApp,
+          status: "New",
+          studyAbbreviation: "TEST",
+          applicant: { ...baseApp.applicant, applicantID: "owner" },
+        }}
+      />,
+      {
+        wrapper: ({ children }) => (
+          <TestParent
+            user={{ ...baseUser, _id: "owner", permissions: ["submission_request:cancel"] }}
+          >
+            {children}
+          </TestParent>
+        ),
+      }
+    );
 
-    expect(getByTestId("cancel-restore-application-button")).toBeVisible();
-  });
+    userEvent.click(getByTestId("cancel-restore-application-button"));
 
-  it("should not be rendered when the user is missing the required permissions", async () => {
-    const { queryByTestId } = render(<Button nodeType="test" selectedItems={[]} />, {
-      wrapper: (props) => <TestParent {...props} user={{ role: "Submitter", permissions: [] }} />,
-    });
+    const dialog = getByRole("dialog");
+    expect(dialog).toBeInTheDocument();
 
-    expect(queryByTestId("cancel-restore-application-button")).not.toBeInTheDocument();
+    expect(getByTestId("delete-dialog-description")).toHaveTextContent("Study: TEST");
   });
 
-  it.each<SubmissionStatus>(["New", "In Progress", "Rejected", "Withdrawn"])(
-    "should render as the 'Cancel' variant for the Submission Request status '%s'",
-    (status) => {
-      const { getByTestId } = render(<Button nodeType="test" selectedItems={["item-1"]} />, {
-        wrapper: (props) => <TestParent {...props} submission={{ status }} />,
-      });
+  it("should fallback to 'NA' for the Study Abbreviation in the dialog description", async () => {
+    const { getByRole, getByTestId } = render(
+      <Button
+        application={{
+          ...baseApp,
+          status: "New",
+          studyAbbreviation: "",
+          applicant: { ...baseApp.applicant, applicantID: "owner" },
+        }}
+      />,
+      {
+        wrapper: ({ children }) => (
+          <TestParent
+            user={{ ...baseUser, _id: "owner", permissions: ["submission_request:cancel"] }}
+          >
+            {children}
+          </TestParent>
+        ),
+      }
+    );
 
-      expect(getByTestId("cancel-restore-application-button")).toBeEnabled();
-    }
-  );
+    userEvent.click(getByTestId("cancel-restore-application-button"));
 
-  it.each<SubmissionStatus>(["Submitted", "Released", "Completed", "Canceled", "Deleted"])(
-    "should render as the 'Restore' variant for the Submission Request status '%s'",
-    (status) => {
-      const { getByTestId } = render(<Button nodeType="test" selectedItems={["item-1"]} />, {
-        wrapper: (props) => <TestParent {...props} submission={{ status }} />,
-      });
+    const dialog = getByRole("dialog");
+    expect(dialog).toBeInTheDocument();
 
-      expect(getByTestId("cancel-restore-application-button")).toBeDisabled();
-    }
-  );
+    expect(getByTestId("delete-dialog-description")).toHaveTextContent("Study: NA");
+  });
 });
diff --git a/src/components/CancelApplicationButton/index.tsx b/src/components/CancelApplicationButton/index.tsx
index 80473716d..0358ed780 100644
--- a/src/components/CancelApplicationButton/index.tsx
+++ b/src/components/CancelApplicationButton/index.tsx
@@ -1,17 +1,26 @@
 import { memo, useMemo, useState } from "react";
 import { isEqual } from "lodash";
-import { IconButton, IconButtonProps, styled } from "@mui/material";
+import { Button, ButtonProps, styled } from "@mui/material";
 import { useSnackbar } from "notistack";
 import { useMutation } from "@apollo/client";
-import { ReactComponent as DeleteAllFilesIcon } from "../../assets/icons/delete_all_files_icon.svg";
+import { ReactComponent as RestoreIcon } from "../../assets/icons/filled_back_icon.svg";
+import { ReactComponent as DeleteIcon } from "../../assets/icons/filled_circular_delete.svg";
 import DeleteDialog from "../DeleteDialog";
 import { useAuthContext } from "../Contexts/AuthContext";
 import { CANCEL_APP, CancelAppInput, CancelAppResp } from "../../graphql";
 import { Logger } from "../../utils";
 import { hasPermission } from "../../config/AuthPermissions";
 
-const StyledIconButton = styled(IconButton)(({ disabled }) => ({
-  opacity: disabled ? 0.26 : 1,
+const StyledIconButton = styled(Button, { shouldForwardProp: (p) => p !== "restore" })<{
+  restore: boolean;
+}>(({ restore, disabled }) => ({
+  cursor: disabled ? "not-allowed" : "pointer",
+  borderRadius: "8px",
+  padding: "4px 7.5px",
+  border: "2px solid",
+  borderColor: restore ? "#54856C" : "#D15858",
+  backgroundColor: `${restore ? "#42C684" : "#B21313"} !important`,
+  minWidth: "unset",
 }));
 
 /**
@@ -28,12 +37,12 @@ type Props = {
    * Optional callback function for when successful cancellation/restoration occurs
    */
   onCancel?: () => void;
-} & Omit<IconButtonProps, "onClick">;
+} & Omit<ButtonProps, "onClick">;
 
 const CancelApplicationButton = ({ application, onCancel, disabled, ...rest }: Props) => {
   const { enqueueSnackbar } = useSnackbar();
   const { user } = useAuthContext();
-  const { _id, status } = application;
+  const { _id, status } = application || {};
 
   const [cancelApp] = useMutation<CancelAppResp, CancelAppInput>(CANCEL_APP, {
     context: { clientName: "backend" },
@@ -47,14 +56,17 @@ const CancelApplicationButton = ({ application, onCancel, disabled, ...rest }: P
 
   const textValues = useMemo(
     () => ({
-      // TODO: Icon from the design
-      icon: isRestoreAction ? <DeleteAllFilesIcon /> : <DeleteAllFilesIcon />,
+      icon: isRestoreAction ? (
+        <RestoreIcon data-testid="application-restore-icon" />
+      ) : (
+        <DeleteIcon data-testid="application-cancel-icon" />
+      ),
       dialogTitle: `${isRestoreAction ? "Restore" : "Cancel"} Submission Request`,
       dialogDescription: isRestoreAction
         ? `Are you sure you want to restore the previously canceled submission request for the study listed below?`
         : `Are you sure you want to cancel the submission request for the study listed below?`,
     }),
-    [status, isRestoreAction]
+    [isRestoreAction]
   );
 
   const onClickIcon = async () => {
@@ -66,20 +78,21 @@ const CancelApplicationButton = ({ application, onCancel, disabled, ...rest }: P
   };
 
   const onConfirmDialog = async () => {
+    setLoading(true);
     try {
       const { data: d, errors } = await cancelApp({
         variables: { _id },
       });
 
       if (errors || !d?.cancelApplication?._id) {
-        Logger.error("Failed to cancel the application", errors);
-        throw new Error("Oops! Unable to cancel that Submission Request.");
+        throw new Error(errors?.[0]?.message || "Unknown API error");
       }
 
       setConfirmOpen(false);
       onCancel();
     } catch (err) {
-      enqueueSnackbar(err, { variant: "error" });
+      Logger.error("Failed to cancel the application", err);
+      enqueueSnackbar("Oops! Unable to cancel that Submission Request", { variant: "error" });
     } finally {
       setLoading(false);
     }
@@ -96,6 +109,8 @@ const CancelApplicationButton = ({ application, onCancel, disabled, ...rest }: P
         disabled={loading || disabled}
         aria-label="Cancel/Restore icon"
         data-testid="cancel-restore-application-button"
+        restore={isRestoreAction}
+        disableRipple
         {...rest}
       >
         {textValues.icon}
@@ -104,13 +119,12 @@ const CancelApplicationButton = ({ application, onCancel, disabled, ...rest }: P
         open={confirmOpen}
         header={textValues.dialogTitle}
         description={
-          <p>
+          <span>
             {textValues.dialogDescription}
             <br />
             <br />
-            {/* TODO: technically this needs to be study name */}
-            Study: {application.studyAbbreviation || "N/A"}
-          </p>
+            Study: {application.studyAbbreviation || "NA"}
+          </span>
         }
         confirmText="Confirm"
         closeText="Cancel"