diff --git a/app/client/packages/design-system/ads-old/src/AppIcon/index.tsx b/app/client/packages/design-system/ads-old/src/AppIcon/index.tsx
index 3d741747d43e..664db42a9e57 100644
--- a/app/client/packages/design-system/ads-old/src/AppIcon/index.tsx
+++ b/app/client/packages/design-system/ads-old/src/AppIcon/index.tsx
@@ -426,13 +426,12 @@ const IconWrapper = styled.a<AppIconProps & { styledProps: cssAttributes }>`
 export type AppIconProps = CommonComponentProps & {
   size?: Size;
   name: AppIconName;
-  onClick?: (e: unknown) => void;
+  onClick?: (e: any) => void;
 };
 
 function AppIcon(props: AppIconProps) {
   const styledProps = useMemo(
-    // @ts-expect-error Fix this the next time the file is edited
-    () => appSizeHandler(props.size != null || Size.medium),
+    () => appSizeHandler(props.size || Size.medium),
     [props],
   );
 
diff --git a/app/client/packages/design-system/ads-old/src/FilePickerV2/index.tsx b/app/client/packages/design-system/ads-old/src/FilePickerV2/index.tsx
index f8da99e705f4..d834f3df5c84 100644
--- a/app/client/packages/design-system/ads-old/src/FilePickerV2/index.tsx
+++ b/app/client/packages/design-system/ads-old/src/FilePickerV2/index.tsx
@@ -7,7 +7,7 @@ import Button, { Category, IconPositions, Size } from "../Button";
 import type { IconName } from "../Icon";
 import Icon, { IconSize } from "../Icon";
 import Text, { TextType } from "../Text";
-import { Toaster } from "../Toast";
+import { toast } from "design-system";
 import TooltipComponent from "../Tooltip";
 import {
   createMessage,
@@ -16,7 +16,6 @@ import {
 } from "../constants/messages";
 import { Classes } from "../constants/classes";
 import { importSvg } from "../utils/icon-loadables";
-import { Variant } from "../constants/variants";
 
 const UploadSuccessIcon = importSvg(
   async () => import("../assets/icons/ads/upload_success.svg"),
@@ -351,9 +350,8 @@ function FilePickerComponent(props: FilePickerProps) {
       /* set form data and send api request */
       fileUploader && fileUploader(file, setProgress, onUpload);
     } else {
-      Toaster.show({
-        text: createMessage(ERROR_FILE_TOO_LARGE, "250 KB"),
-        variant: Variant.warning,
+      toast.show(createMessage(ERROR_FILE_TOO_LARGE, "250 KB"), {
+        kind: "warning",
       });
     }
   }
diff --git a/app/client/packages/design-system/ads-old/src/Toast/index.tsx b/app/client/packages/design-system/ads-old/src/Toast/index.tsx
deleted file mode 100644
index f829f91a14db..000000000000
--- a/app/client/packages/design-system/ads-old/src/Toast/index.tsx
+++ /dev/null
@@ -1,269 +0,0 @@
-import type { Dispatch } from "react";
-import React from "react";
-import type { CommonComponentProps } from "../types/common";
-import { ToastTypeOptions } from "../types/common";
-import { Classes } from "../constants/classes";
-import { Variant } from "../constants/variants";
-import styled from "styled-components";
-import Icon, { IconSize } from "../Icon";
-import Text, { TextType } from "../Text";
-import type { ToastOptions } from "react-toastify";
-import { toast, ToastContainer } from "react-toastify";
-import "react-toastify/dist/ReactToastify.css";
-import * as log from "loglevel";
-import { TextFonts } from "../constants/typography";
-
-export type ToastProps = ToastOptions &
-  CommonComponentProps & {
-    contentClassName?: string;
-    text: string;
-    actionElement?: JSX.Element;
-    variant?: Variant;
-    duration?: number;
-    onUndo?: () => void;
-    dispatchableAction?: {
-      dispatch: Dispatch<any>;
-      type: string;
-      payload: any;
-    };
-    // TODO: rename this to accept any generic child component to show within toast
-    showDebugButton?: any;
-    hideProgressBar?: boolean;
-    hideActionElementSpace?: boolean;
-    width?: string;
-    maxWidth?: string;
-  };
-
-const WrappedToastContainer = styled.div`
-  .Toastify__toast-container {
-    width: auto;
-    padding: 0px;
-  }
-  .Toastify__toast--default {
-    background-color: white;
-  }
-  .Toastify__toast {
-    cursor: auto;
-    min-height: auto;
-    border-radius: 4px !important;
-    font-family: ${TextFonts};
-    margin-bottom: var(--ads-spaces-4);
-  }
-  .Toastify__toast-container--top-right {
-    top: 8em;
-  }
-`;
-export function StyledToastContainer(props: ToastOptions) {
-  return (
-    <WrappedToastContainer>
-      <ToastContainer {...props} />
-    </WrappedToastContainer>
-  );
-}
-
-const ToastBody = styled.div<{
-  variant?: Variant;
-  isUndo?: boolean;
-  dispatchableAction?: {
-    dispatch: Dispatch<any>;
-    type: string;
-    payload: any;
-  };
-  width?: string;
-  maxWidth?: string;
-}>`
-  width: ${(props) => props.width || "fit-content"};
-  max-width: ${(props) => props.maxWidth || "264px"};
-  background: white;
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  // Using word-break here, as overflow-wrap: anywhere
-  // has no effect in safari
-  word-break: break-word;
-  overflow-wrap: anywhere;
-
-  div > .${Classes.ICON} {
-    cursor: auto;
-    margin-right: var(--ads-spaces-3);
-    margin-top: calc(var(--ads-spaces-1) / 2);
-
-    .warning-triangle_svg__symbol {
-      fill: #fff;
-    }
-    svg {
-      path {
-        fill: ${(props) =>
-          props.variant === Variant.warning
-            ? "var(--ads-toast-icon-fill-color)"
-            : props.variant === Variant.danger
-              ? "var(--ads-color-black-0)"
-              : "var(--ads-dropdown-disabled-header-text-color)"};
-      }
-      rect {
-        ${(props) =>
-          props.variant === Variant.danger
-            ? `fill: var(--ads-toast-icon-outline-color)`
-            : null};
-      }
-    }
-  }
-
-  .${Classes.TEXT} {
-    color: #4c5664;
-  }
-
-  ${(props) =>
-    props.isUndo || props.dispatchableAction
-      ? `
-    .undo-section .${Classes.TEXT} {
-      cursor: pointer;
-      margin-left: var(--ads-spaces-3);
-      color: var(--ads-toast-undo-text-color);
-      line-height: 18px;
-      font-weight: 600;
-      white-space: nowrap
-    }
-    `
-      : null}
-`;
-
-const FlexContainer = styled.div`
-  display: flex;
-  align-items: flex-start;
-  flex: 1;
-`;
-
-const ToastTextWrapper = styled.div`
-  flex: 1;
-  min-width: 0;
-`;
-
-const StyledActionText = styled(Text)`
-  color: var(--ads-toast-redo-text-color) !important;
-  cursor: pointer;
-  margin-left: var(--ads-spaces-3);
-`;
-
-const StyledDebugComponent = styled.div`
-  display: flex;
-  justify-content: flex-end;
-`;
-
-export function ToastComponent(
-  props: ToastProps & { undoAction?: () => void },
-) {
-  const dispatch = props.dispatchableAction?.dispatch;
-  const dispatchableAction = {
-    type: props.dispatchableAction?.type,
-    payload: props.dispatchableAction?.payload,
-  };
-  const undoAction = props.undoAction;
-
-  return (
-    <ToastBody
-      className="t--toast-action"
-      dispatchableAction={props.dispatchableAction}
-      isUndo={!!props.onUndo}
-      maxWidth={props.maxWidth}
-      variant={props.variant ?? Variant.info}
-      width={props.width}
-    >
-      <FlexContainer style={{ minWidth: 0 }}>
-        {props.variant === Variant.success ? (
-          <Icon
-            fillColor={"var(--ads-old-color-jade)"}
-            name="success"
-            size={IconSize.XXL}
-          />
-        ) : props.variant === Variant.warning ? (
-          <Icon name="warning-triangle" size={IconSize.XXL} />
-        ) : null}
-        {props.variant === Variant.danger ? (
-          <Icon name="error" size={IconSize.XXL} />
-        ) : null}
-        <ToastTextWrapper>
-          <Text className={props.contentClassName} type={TextType.P1}>
-            {props.text}
-          </Text>
-          {props.actionElement && (
-            <StyledActionText type={TextType.P1}>
-              {!props.hideActionElementSpace ? <>&nbsp;</> : ""}
-              {props.actionElement}
-            </StyledActionText>
-          )}
-          {props.variant === Variant.danger && props.showDebugButton ? (
-            <StyledDebugComponent>
-              <props.showDebugButton.component
-                {...props.showDebugButton.componentProps}
-              />
-            </StyledDebugComponent>
-          ) : null}
-        </ToastTextWrapper>
-      </FlexContainer>
-      <div className="undo-section">
-        {props.onUndo || props.dispatchableAction ? (
-          <Text
-            onClick={() => {
-              if (dispatch && props.dispatchableAction) {
-                dispatch(dispatchableAction);
-                undoAction && undoAction();
-              } else {
-                undoAction && undoAction();
-              }
-            }}
-            type={TextType.H6}
-          >
-            UNDO
-          </Text>
-        ) : null}
-      </div>
-    </ToastBody>
-  );
-}
-
-export const Toaster = {
-  show: (config: ToastProps) => {
-    if (typeof config.text !== "string") {
-      log.error("Toast message needs to be a string");
-      return;
-    }
-    if (
-      config.variant != null &&
-      !Object.values(Variant).includes(config.variant)
-    ) {
-      log.error(
-        "Toast type needs to be a one of " +
-          Object.values(ToastTypeOptions).join(", "),
-      );
-      return;
-    }
-    // Stringified JSON is a long, but valid key :shrug:
-    const toastId = JSON.stringify(config);
-    toast(
-      <ToastComponent
-        undoAction={() => {
-          toast.dismiss(toastId);
-          config.onUndo && config.onUndo();
-        }}
-        {...config}
-      />,
-      {
-        toastId: toastId,
-        pauseOnHover: !config.dispatchableAction && !config.hideProgressBar,
-        pauseOnFocusLoss: !config.dispatchableAction && !config.hideProgressBar,
-        autoClose: false,
-        closeOnClick: true,
-        position: "top-center",
-        hideProgressBar: config.hideProgressBar,
-      },
-    );
-    if (config.autoClose !== false) {
-      // Update autoclose everytime to keep resetting the timer.
-      toast.update(toastId, {
-        autoClose: config.duration || 5000,
-      });
-    }
-  },
-  clear: () => toast.dismiss(),
-};
diff --git a/app/client/packages/design-system/ads-old/src/index.ts b/app/client/packages/design-system/ads-old/src/index.ts
index 0c15ddf4da02..7359c6e804f0 100644
--- a/app/client/packages/design-system/ads-old/src/index.ts
+++ b/app/client/packages/design-system/ads-old/src/index.ts
@@ -98,8 +98,6 @@ export * from "./TextInput";
 export { default as TooltipComponent } from "./Tooltip";
 export * from "./Tooltip";
 
-export * from "./Toast";
-
 export { default as TreeDropdown } from "./TreeDropdown";
 export * from "./TreeDropdown";
 
diff --git a/app/client/packages/design-system/widgets-old/src/Toast/index.tsx b/app/client/packages/design-system/widgets-old/src/Toast/index.tsx
deleted file mode 100644
index 6d238e4be7f5..000000000000
--- a/app/client/packages/design-system/widgets-old/src/Toast/index.tsx
+++ /dev/null
@@ -1,264 +0,0 @@
-import type { Dispatch } from "react";
-import React from "react";
-import type { CommonComponentProps } from "../types/common";
-import { ToastTypeOptions } from "../types/common";
-import { Classes } from "../constants/classes";
-import { Variant } from "../constants/variants";
-import styled from "styled-components";
-import Icon, { IconSize } from "../Icon";
-import Text, { TextType } from "../Text";
-import type { ToastOptions } from "react-toastify";
-import { toast, ToastContainer } from "react-toastify";
-import "react-toastify/dist/ReactToastify.css";
-import * as log from "loglevel";
-import { TextFonts } from "../constants/typography";
-
-export type ToastProps = ToastOptions &
-  CommonComponentProps & {
-    contentClassName?: string;
-    text: string;
-    actionElement?: JSX.Element;
-    variant?: Variant;
-    duration?: number;
-    onUndo?: () => void;
-    dispatchableAction?: {
-      dispatch: Dispatch<any>;
-      type: string;
-      payload: any;
-    };
-    // TODO: rename this to accept any generic child component to show within toast
-    showDebugButton?: any;
-    hideProgressBar?: boolean;
-    hideActionElementSpace?: boolean;
-    width?: string;
-    maxWidth?: string;
-  };
-
-const WrappedToastContainer = styled.div`
-  .Toastify__toast-container {
-    width: auto;
-    padding: 0px;
-  }
-  .Toastify__toast--default {
-    background: transparent;
-  }
-  .Toastify__toast {
-    cursor: auto;
-    min-height: auto;
-    border-radius: 0px !important;
-    font-family: ${TextFonts};
-    margin-bottom: var(--ads-spaces-4);
-  }
-  .Toastify__toast-container--top-right {
-    top: 8em;
-  }
-`;
-export function StyledToastContainer(props: ToastOptions) {
-  return (
-    <WrappedToastContainer>
-      <ToastContainer {...props} />
-    </WrappedToastContainer>
-  );
-}
-
-const ToastBody = styled.div<{
-  variant?: Variant;
-  isUndo?: boolean;
-  dispatchableAction?: {
-    dispatch: Dispatch<any>;
-    type: string;
-    payload: any;
-  };
-  width?: string;
-  maxWidth?: string;
-}>`
-  width: ${(props) => props.width || "fit-content"};
-  max-width: ${(props) => props.maxWidth || "264px"};
-  margin-left: auto;
-  background: var(--ads-toast-background-color);
-  padding: var(--ads-spaces-4) var(--ads-spaces-5);
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  // Using word-break here, as overflow-wrap: anywhere
-  // has no effect in safari
-  word-break: break-word;
-  overflow-wrap: anywhere;
-
-  div > .${Classes.ICON} {
-    cursor: auto;
-    margin-right: var(--ads-spaces-3);
-    margin-top: calc(var(--ads-spaces-1) / 2);
-    svg {
-      path {
-        fill: ${(props) =>
-          props.variant === Variant.warning
-            ? "var(--ads-toast-icon-fill-color)"
-            : props.variant === Variant.danger
-              ? "var(--ads-color-black-0)"
-              : "var(--ads-dropdown-disabled-header-text-color)"};
-      }
-      rect {
-        ${(props) =>
-          props.variant === Variant.danger
-            ? `fill: var(--ads-toast-icon-outline-color)`
-            : null};
-      }
-    }
-  }
-
-  .${Classes.TEXT} {
-    color: var(--ads-toast-text-color);
-  }
-
-  ${(props) =>
-    props.isUndo || props.dispatchableAction
-      ? `
-    .undo-section .${Classes.TEXT} {
-      cursor: pointer;
-      margin-left: var(--ads-spaces-3);
-      color: var(--ads-toast-undo-text-color);
-      line-height: 18px;
-      font-weight: 600;
-      white-space: nowrap
-    }
-    `
-      : null}
-`;
-
-const FlexContainer = styled.div`
-  display: flex;
-  align-items: flex-start;
-  flex: 1;
-`;
-
-const ToastTextWrapper = styled.div`
-  flex: 1;
-  min-width: 0;
-`;
-
-const StyledActionText = styled(Text)`
-  color: var(--ads-toast-redo-text-color) !important;
-  cursor: pointer;
-  margin-left: var(--ads-spaces-3);
-`;
-
-const StyledDebugComponent = styled.div`
-  display: flex;
-  justify-content: flex-end;
-`;
-
-export function ToastComponent(
-  props: ToastProps & { undoAction?: () => void },
-) {
-  const dispatch = props.dispatchableAction?.dispatch;
-  const dispatchableAction = {
-    type: props.dispatchableAction?.type,
-    payload: props.dispatchableAction?.payload,
-  };
-  const undoAction = props.undoAction;
-
-  return (
-    <ToastBody
-      className="t--toast-action"
-      dispatchableAction={props.dispatchableAction}
-      isUndo={!!props.onUndo}
-      maxWidth={props.maxWidth}
-      variant={props.variant || Variant.info}
-      width={props.width}
-    >
-      <FlexContainer style={{ minWidth: 0 }}>
-        {props.variant === Variant.success ? (
-          <Icon
-            fillColor={"var(--ads-old-color-jade)"}
-            name="success"
-            size={IconSize.XXL}
-          />
-        ) : props.variant === Variant.warning ? (
-          <Icon name="warning" size={IconSize.XXL} />
-        ) : null}
-        {props.variant === Variant.danger ? (
-          <Icon name="error" size={IconSize.XXL} />
-        ) : null}
-        <ToastTextWrapper>
-          <Text className={props.contentClassName} type={TextType.P1}>
-            {props.text}
-          </Text>
-          {props.actionElement && (
-            <StyledActionText type={TextType.P1}>
-              {!props.hideActionElementSpace ? <>&nbsp;</> : ""}
-              {props.actionElement}
-            </StyledActionText>
-          )}
-          {props.variant === Variant.danger && props.showDebugButton ? (
-            <StyledDebugComponent>
-              <props.showDebugButton.component
-                {...props.showDebugButton.componentProps}
-              />
-            </StyledDebugComponent>
-          ) : null}
-        </ToastTextWrapper>
-      </FlexContainer>
-      <div className="undo-section">
-        {props.onUndo || props.dispatchableAction ? (
-          <Text
-            onClick={() => {
-              if (dispatch && props.dispatchableAction) {
-                dispatch(dispatchableAction);
-                undoAction && undoAction();
-              } else {
-                undoAction && undoAction();
-              }
-            }}
-            type={TextType.H6}
-          >
-            UNDO
-          </Text>
-        ) : null}
-      </div>
-    </ToastBody>
-  );
-}
-
-export const Toaster = {
-  show: (config: ToastProps) => {
-    if (typeof config.text !== "string") {
-      log.error("Toast message needs to be a string");
-      return;
-    }
-    if (config.variant && !Object.values(Variant).includes(config.variant)) {
-      log.error(
-        "Toast type needs to be a one of " +
-          Object.values(ToastTypeOptions).join(", "),
-      );
-      return;
-    }
-    // Stringified JSON is a long, but valid key :shrug:
-    const toastId = JSON.stringify(config);
-    toast(
-      <ToastComponent
-        undoAction={() => {
-          toast.dismiss(toastId);
-          config.onUndo && config.onUndo();
-        }}
-        {...config}
-      />,
-      {
-        toastId: toastId,
-        pauseOnHover: !config.dispatchableAction && !config.hideProgressBar,
-        pauseOnFocusLoss: !config.dispatchableAction && !config.hideProgressBar,
-        autoClose: false,
-        closeOnClick: true,
-        position: "top-center",
-        hideProgressBar: config.hideProgressBar,
-      },
-    );
-    if (config.autoClose !== false) {
-      // Update autoclose everytime to keep resetting the timer.
-      toast.update(toastId, {
-        autoClose: config.duration || 5000,
-      });
-    }
-  },
-  clear: () => toast.dismiss(),
-};
diff --git a/app/client/packages/design-system/widgets-old/src/index.ts b/app/client/packages/design-system/widgets-old/src/index.ts
index 018a74f9c6e2..963c3471c475 100644
--- a/app/client/packages/design-system/widgets-old/src/index.ts
+++ b/app/client/packages/design-system/widgets-old/src/index.ts
@@ -36,8 +36,6 @@ export * from "./Text";
 export { default as TooltipComponent } from "./Tooltip";
 export * from "./Tooltip";
 
-export * from "./Toast";
-
 export * from "./constants/classes";
 export * from "./constants/typography";
 export * from "./constants/variants";
diff --git a/app/client/src/index.tsx b/app/client/src/index.tsx
index 0e27c9536f17..3472aeeb5342 100755
--- a/app/client/src/index.tsx
+++ b/app/client/src/index.tsx
@@ -6,8 +6,8 @@ import "./wdyr";
 import ReactDOM from "react-dom";
 import { Provider } from "react-redux";
 import "./index.css";
-import "design-system/src/__theme__/default/index.css";
 import "design-system-old/src/themes/default/index.css";
+import "design-system/src/__theme__/default/index.css";
 import { ThemeProvider } from "styled-components";
 import { appInitializer } from "utils/AppUtils";
 import store, { runSagaMiddleware } from "./store";
diff --git a/app/client/src/sagas/OneClickBindingSaga.ts b/app/client/src/sagas/OneClickBindingSaga.ts
index 78a996514d2f..360280d8e91d 100644
--- a/app/client/src/sagas/OneClickBindingSaga.ts
+++ b/app/client/src/sagas/OneClickBindingSaga.ts
@@ -48,7 +48,7 @@ import AnalyticsUtil from "@appsmith/utils/AnalyticsUtil";
 import AppsmithConsole from "utils/AppsmithConsole";
 import { ENTITY_TYPE } from "@appsmith/entities/AppsmithConsole/utils";
 import { fetchActions, runAction } from "actions/pluginActionActions";
-import { Toaster, Variant } from "design-system-old";
+import { toast } from "design-system";
 import WidgetFactory from "WidgetProvider/factory";
 
 export function* createActionsForOneClickBindingSaga(
@@ -375,10 +375,9 @@ function* BindWidgetToDatasource(
       formType: otherFields?.formType,
     });
   } catch (e: any) {
-    Toaster.show({
-      text: e.message,
+    toast.show(e.message, {
       hideProgressBar: false,
-      variant: Variant.danger,
+      kind: "error",
     });
 
     yield put({
@@ -386,14 +385,16 @@ function* BindWidgetToDatasource(
     });
   }
 
-  Toaster.show({
-    text: `Successfully created action${
+  toast.show(
+    `Successfully created action${
       newActions.length > 1 ? "s" : ""
     }: ${newActions.join(", ")}`,
-    hideProgressBar: true,
-    variant: Variant.success,
-    duration: 3000,
-  });
+    {
+      hideProgressBar: true,
+      kind: "success",
+      autoClose: 3000,
+    },
+  );
 }
 
 export default function* oneClickBindingSaga() {