diff --git a/app/client/cypress/e2e/Regression/ClientSide/Widgets/Button/Button_showAlert_multiline_message_spec.ts b/app/client/cypress/e2e/Regression/ClientSide/Widgets/Button/Button_showAlert_multiline_message_spec.ts
new file mode 100644
index 000000000000..25f872bd31ad
--- /dev/null
+++ b/app/client/cypress/e2e/Regression/ClientSide/Widgets/Button/Button_showAlert_multiline_message_spec.ts
@@ -0,0 +1,25 @@
+import {
+  draggableWidgets,
+  entityExplorer,
+  propPane,
+  agHelper,
+} from "../../../../../support/Objects/ObjectsCore";
+
+describe(
+  "Tests for showAlert message with newline characters in the alert message",
+  { tags: ["@tag.Widget", "@tag.Button"] },
+  () => {
+    before("Login to the app and navigate to the workspace", function () {
+      entityExplorer.DragDropWidgetNVerify(draggableWidgets.BUTTON);
+    });
+
+    it("Verify showAlert message renders correctly with newline characters", () => {
+      propPane.EnterJSContext("onClick", "showAlert(`sai\n\nprabhu`)");
+      agHelper.ClickButton("Submit");
+      cy.get(".Toastify", { timeout: 1000 }).should(
+        "have.text",
+        "sai\n\nprabhu",
+      );
+    });
+  },
+);
diff --git a/app/client/packages/design-system/ads/src/Toast/Toast.styles.tsx b/app/client/packages/design-system/ads/src/Toast/Toast.styles.tsx
index f27906c4b89e..9ae7c80464d0 100644
--- a/app/client/packages/design-system/ads/src/Toast/Toast.styles.tsx
+++ b/app/client/packages/design-system/ads/src/Toast/Toast.styles.tsx
@@ -63,3 +63,7 @@ export const ToastBody = styled(Text)`
 export const StyledButton = styled(Button)`
   align-self: center;
 `;
+
+export const StyledPre = styled.pre`
+  font: inherit;
+`;
diff --git a/app/client/packages/design-system/ads/src/Toast/Toast.tsx b/app/client/packages/design-system/ads/src/Toast/Toast.tsx
index 26326aa9a4b6..b83da02d70af 100644
--- a/app/client/packages/design-system/ads/src/Toast/Toast.tsx
+++ b/app/client/packages/design-system/ads/src/Toast/Toast.tsx
@@ -4,7 +4,12 @@ import { Slide, toast as toastifyToast } from "react-toastify";
 import "react-toastify/dist/ReactToastify.min.css";
 
 import type { ToastProps } from "./Toast.types";
-import { StyledButton, StyledToast, ToastBody } from "./Toast.styles";
+import {
+  StyledButton,
+  StyledPre,
+  StyledToast,
+  ToastBody,
+} from "./Toast.styles";
 import { getIconByKind } from "../Icon/getIconByKind";
 
 /**
@@ -40,7 +45,7 @@ const toast = {
 
     return toastifyToast(
       <ToastBody kind="body-m">
-        {content}
+        <StyledPre> {content}</StyledPre>
         {actionText && (
           <StyledButton
             kind="tertiary"