diff --git a/Client/src/Components/Toast/AnnouncementUpdateSubscription/AnnouncementUpdateSubscription.jsx b/Client/src/Components/Toast/AnnouncementUpdateSubscription/AnnouncementUpdateSubscription.jsx
deleted file mode 100644
index f3363e866..000000000
--- a/Client/src/Components/Toast/AnnouncementUpdateSubscription/AnnouncementUpdateSubscription.jsx
+++ /dev/null
@@ -1,71 +0,0 @@
-import "./announcementUpdateSubscription.css";
-import React from "react";
-import PropTypes from "prop-types";
-import { useTheme } from "@mui/material";
-
-/**
- * @component
- * @param {Object} props
- * @param {string} props.title - Title text for the update subscription dialog (required)
- * @param {string} props.text - Body text for the update subscription dialog (required)
- * @param {string} props.cancel - Text for the negative (cancel) button (required)
- * @param {string} props.positive - Text for the positive button (required)
- * @param {string} props.header - Title text for the email subscription section (required)
- * @param {string} props.button - Text for the subscribe button (required)
- * @returns {JSX.Element} - Renders the announcement update subscription component
- */
-
-const AnnouncementUpdateSubscription = ({
-  title,
-  text,
-  cancel,
-  positive,
-  header,
-  button,
-}) => {
-  const theme = useTheme();
-
-  const fontLookup = {
-    default: theme.font.default.font,
-  };
-
-  const fontFamily = fontLookup["default"];
-
-  return (
-    <div className="update-subscription" style={{ fontFamily: fontFamily }}>
-      <div className="update-subscription-dialog">
-        <div className="subscription-dialog-title">{title}</div>
-        <div className="v-spacing-small"></div>
-        <div className="subscription-dialog-text">{text}</div>
-        <div className="v-spacing-medium"></div>
-        <div className="subscription-dialog-controls">
-          <button className="controls-negative">{cancel}</button>
-          <button className="controls-positive">{positive}</button>
-        </div>
-        <div className="v-spacing-medium"></div>
-      </div>
-      <div className="v-spacing-medium"></div>
-      <div className="update-subscription-title">{header}</div>
-      <div className="subscription-email">
-        <input
-          className="subscription-email-field"
-          type="text"
-          placeholder="olivia@untitledui.com"
-        />
-        <button className="subscribe-button">{button}</button>
-      </div>
-      <div className="v-spacing-medium"></div>
-    </div>
-  );
-};
-
-AnnouncementUpdateSubscription.propTypes = {
-  title: PropTypes.string.isRequired,
-  text: PropTypes.string.isRequired,
-  cancel: PropTypes.string.isRequired,
-  positive: PropTypes.string.isRequired,
-  header: PropTypes.string.isRequired,
-  button: PropTypes.string.isRequired,
-};
-
-export default AnnouncementUpdateSubscription;
diff --git a/Client/src/Components/Toast/AnnouncementUpdateSubscription/announcementUpdateSubscription.css b/Client/src/Components/Toast/AnnouncementUpdateSubscription/announcementUpdateSubscription.css
deleted file mode 100644
index 6064a86cd..000000000
--- a/Client/src/Components/Toast/AnnouncementUpdateSubscription/announcementUpdateSubscription.css
+++ /dev/null
@@ -1,86 +0,0 @@
-.update-subscription {
-  margin: 20px;
-}
-
-.update-subscription,
-.update-subscription-dialog {
-  max-width: 770px;
-  border-radius: 4px;
-  border: 1px solid #eaecf0;
-}
-
-.update-subscription-dialog {
-  padding: 15px 30px;
-}
-
-.subscription-dialog-title {
-  font-size: 1rem;
-  font-weight: 700;
-  color: var(--env-var-color-1);
-}
-
-.v-spacing-small {
-  height: 10px;
-}
-
-.v-spacing-medium {
-  height: 15px;
-}
-
-.subscription-dialog-text {
-  font-size: 13px;
-  color: var(--env-var-color-2);
-}
-
-.subscription-dialog-controls {
-  display: flex;
-}
-
-.controls-negative {
-  padding: 12px 16px;
-  margin-right: 12px;
-  border-radius: var(--env-var-radius-1);
-  border: 1px solid var(--env-var-color-6);
-  background-color: var(--env-var-color-8);
-  font-size: var(--env-var-font-size-medium);
-}
-
-.controls-positive,
-.subscribe-button {
-  padding: 12px 16px;
-  margin-right: 12px;
-  border-radius: var(--env-var-radius-1);
-  border: 1px solid var(--env-var-color-7);
-  background-color: var(--env-var-color-3);
-  color: var(--env-var-color-8);
-  font-size: var(--env-var-font-size-medium);
-}
-
-.update-subscription-title {
-  color: var(--env-var-color-5);
-  padding: 0 20px;
-  font-weight: 700;
-  font-size: 13px;
-  margin-bottom: 10px;
-}
-
-.subscription-email {
-  display: flex;
-  padding: 0 20px;
-}
-
-.subscription-email-field {
-  width: 290px;
-  height: 24px;
-  border-radius: var(--env-var-radius-1);
-  border: 1px solid var(--env-var-color-4);
-  box-shadow: 0px 1px 2px 0px rgba(101, 182, 28, 0.05);
-  padding: 5px 15px;
-  margin-right: 20px;
-}
-
-.subscribe-button {
-  width: 100px;
-  height: 34px;
-  padding: 2px 15px;
-}
diff --git a/Client/src/Components/Toast/AnnouncementsDualButton/AnnouncementsDualButton.jsx b/Client/src/Components/Toast/AnnouncementsDualButton/AnnouncementsDualButton.jsx
deleted file mode 100644
index 2abbadb1e..000000000
--- a/Client/src/Components/Toast/AnnouncementsDualButton/AnnouncementsDualButton.jsx
+++ /dev/null
@@ -1,55 +0,0 @@
-import "./announcementsDualButton.css";
-import React from "react";
-import CloseIcon from "@mui/icons-material/Close";
-import PropTypes from "prop-types";
-import { useTheme } from "@mui/material";
-
-/**
- * @component
- * @param {Object} props
- * @param {string} props.subject - The announcement subject text
- * @param {string} props.body - The announcement body text content
- * @param {string} props.esc - The text for the escape button
- * @param {string} props.primary - The text for the primary button
- * @returns {JSX.Element} - Renders the announcement dual button component
- */
-
-const AnnouncementsDualButton = ({ subject, body, esc, primary }) => {
-  const theme = useTheme();
-
-  const fontLookup = {
-    default: theme.font.default.font,
-  };
-
-  const fontFamily = fontLookup["default"];
-
-  return (
-    <div
-      className="announcement-without-tile"
-      style={{ fontFamily: fontFamily }}
-    >
-      <div className="announcement-without-content">
-        <div className="announcement-without-content-subject">{subject}</div>
-        <div className="v-spacing"></div>
-        <div className="announcement-without-content-body">{body}</div>
-        <div className="announcement-content-controllers">
-          <div className="controllers-button-esc">{esc}</div>
-          <div className="controllers-button-primary">{primary}</div>
-        </div>
-      </div>
-      <div className="h-spacing"></div>
-      <div className="announcement-close">
-        <CloseIcon style={{ fill: "#98A2B3" }} />
-      </div>
-    </div>
-  );
-};
-
-AnnouncementsDualButton.propTypes = {
-  subject: PropTypes.string.isRequired,
-  body: PropTypes.string.isRequired,
-  esc: PropTypes.string.isRequired,
-  primary: PropTypes.string.isRequired,
-};
-
-export default AnnouncementsDualButton;
diff --git a/Client/src/Components/Toast/AnnouncementsDualButton/announcementsDualButton.css b/Client/src/Components/Toast/AnnouncementsDualButton/announcementsDualButton.css
deleted file mode 100644
index aff02ab46..000000000
--- a/Client/src/Components/Toast/AnnouncementsDualButton/announcementsDualButton.css
+++ /dev/null
@@ -1,25 +0,0 @@
-.announcement-without-tile {
-  margin: 20px;
-  max-width: 343px;
-  width: fit-content;
-  display: flex;
-  border: 1px solid var(--env-var-color-4);
-  padding: 16px;
-  border-radius: var(--env-var-radius-1);
-}
-
-.h-spacing {
-  width: 20px;
-}
-
-.announcement-without-content-subject {
-  font-size: var(--env-var-font-size-medium);
-  color: var(--env-var-color-5);
-  font-weight: 700;
-  margin-bottom: 10px;
-}
-
-.announcement-without-content-body {
-  font-size: var(--env-var-font-size-medium);
-  color: var(--env-var-color-2);
-}
diff --git a/Client/src/Components/Toast/AnnouncementsDualButtonWithIcon/AnnouncementsDualButtonWithIcon.jsx b/Client/src/Components/Toast/AnnouncementsDualButtonWithIcon/AnnouncementsDualButtonWithIcon.jsx
deleted file mode 100644
index bd2675f4c..000000000
--- a/Client/src/Components/Toast/AnnouncementsDualButtonWithIcon/AnnouncementsDualButtonWithIcon.jsx
+++ /dev/null
@@ -1,71 +0,0 @@
-import "./announcementsDualButtonWithIcon.css";
-import CloseIcon from "@mui/icons-material/Close";
-import PropTypes from "prop-types";
-import { useTheme } from "@mui/material";
-
-/**
- * @component
- * @param {Object} props
- * @param {React.ReactNode} props.icon - Optional React node for an announcement icon
- * @param {string} props.subject - The announcement subject text
- * @param {string} props.body - The announcement body text content
- * @param {string} props.esc - The text for the escape button (usually "Close")
- * @param {string} props.primary - The text for the primary button
- * @param {function} props.closeToast - Function to close the toast notification
- * @returns {JSX.Element} - Renders the announcement dual button with icon component
- */
-
-const AnnouncementsDualButtonWithIcon = ({
-  icon,
-  subject,
-  body,
-  esc,
-  primary,
-  closeToast,
-}) => {
-  const theme = useTheme();
-
-  const fontLookup = {
-    default: theme.font.default.font,
-  };
-
-  const fontFamily = fontLookup["default"];
-
-  return (
-    <div className="announcement-tile" style={{ fontFamily: fontFamily }}>
-      {icon && <div className="announcement-icon">{icon}</div>}
-      <div className="announcement-content">
-        {subject && (
-          <div className="announcement-content-subject">{subject}</div>
-        )}
-        {body && <div className="announcement-content-body">{body}</div>}
-        {(esc || primary) && (
-          <div className="announcement-content-controllers">
-            {esc && (
-              <div className="controllers-button-esc" onClick={closeToast}>
-                {esc}
-              </div>
-            )}
-            {primary && (
-              <div className="controllers-button-primary">{primary}</div>
-            )}
-          </div>
-        )}
-      </div>
-      <div className="announcement-close" onClick={closeToast}>
-        <CloseIcon style={{ fill: "#98A2B3" }} />
-      </div>
-    </div>
-  );
-};
-
-AnnouncementsDualButtonWithIcon.propTypes = {
-  icon: PropTypes.object,
-  subject: PropTypes.string,
-  body: PropTypes.string,
-  esc: PropTypes.string,
-  primary: PropTypes.string,
-  closeToast: PropTypes.func.isRequired,
-};
-
-export default AnnouncementsDualButtonWithIcon;
diff --git a/Client/src/Components/Toast/AnnouncementsDualButtonWithIcon/announcementsDualButtonWithIcon.css b/Client/src/Components/Toast/AnnouncementsDualButtonWithIcon/announcementsDualButtonWithIcon.css
deleted file mode 100644
index 02f132374..000000000
--- a/Client/src/Components/Toast/AnnouncementsDualButtonWithIcon/announcementsDualButtonWithIcon.css
+++ /dev/null
@@ -1,58 +0,0 @@
-.announcement-tile {
-  margin: 20px;
-  width: fit-content;
-  display: flex;
-  border: 1px solid var(--env-var-color-4);
-  padding: 16px;
-  border-radius: var(--env-var-radius-1);
-}
-
-.info-icon-frame {
-  display: flex;
-  width: var(--env-var-default-2);
-  height: var(--env-var-default-2);
-  border: 1px solid var(--env-var-color-6);
-  border-radius: var(--env-var-radius-2);
-  justify-content: center;
-  align-items: center;
-}
-
-.announcement-content {
-  padding: 0 16px;
-}
-
-.announcement-content-subject {
-  font-size: var(--env-var-font-size-medium);
-  color: var(--env-var-color-5);
-  font-weight: 700;
-  margin-bottom: 10px;
-}
-
-.announcement-content-body {
-  font-size: var(--env-var-font-size-medium);
-  color: var(--env-var-color-2);
-  font-weight: 300;
-}
-
-.announcement-content-controllers {
-  display: flex;
-  font-size: var(--env-var-font-size-medium);
-  margin-top: 15px;
-}
-
-.controllers-button-esc {
-  font-size: var(--env-var-font-size-medium);
-  font-weight: 600;
-  margin-right: 12px;
-}
-
-.controllers-button-primary {
-  font-size: var(--env-var-font-size-medium);
-  font-weight: 600;
-  color: var(--env-var-color-3);
-}
-
-.announcement-close {
-  width: var(--env-var-default-1);
-  height: var(--env-var-default-1);
-}
diff --git a/Client/src/Components/Toast/AnnouncementsMessageBar/AnnouncementsMessageBar.jsx b/Client/src/Components/Toast/AnnouncementsMessageBar/AnnouncementsMessageBar.jsx
deleted file mode 100644
index 20a179052..000000000
--- a/Client/src/Components/Toast/AnnouncementsMessageBar/AnnouncementsMessageBar.jsx
+++ /dev/null
@@ -1,36 +0,0 @@
-import "./announcementsMessageBar.css";
-import React from "react";
-import CloseIcon from "@mui/icons-material/Close";
-import PropTypes from "prop-types";
-import { useTheme } from "@mui/material";
-
-/**
- * @component
- * @param {Object} props
- * @param {string} props.message - The announcement message text content (required)
- * @returns {JSX.Element} - Renders the announcement message bar component
- */
-const AnnouncementsMessageBar = ({ message }) => {
-  const theme = useTheme();
-
-  const fontLookup = {
-    default: theme.font.default.font,
-  };
-
-  const fontFamily = fontLookup["default"];
-
-  return (
-    <div className="announcement-tile" style={{ fontFamily: fontFamily }}>
-      <div className="announcement-messagebar-body">{message}</div>
-      <div className="announcement-close">
-        <CloseIcon style={{ fill: "#98A2B3" }} />
-      </div>
-    </div>
-  );
-};
-
-AnnouncementsMessageBar.propTypes = {
-  message: PropTypes.string.isRequired,
-};
-
-export default AnnouncementsMessageBar;
diff --git a/Client/src/Components/Toast/AnnouncementsMessageBar/announcementsMessageBar.css b/Client/src/Components/Toast/AnnouncementsMessageBar/announcementsMessageBar.css
deleted file mode 100644
index 7a6e30b0a..000000000
--- a/Client/src/Components/Toast/AnnouncementsMessageBar/announcementsMessageBar.css
+++ /dev/null
@@ -1,8 +0,0 @@
-.announcement-messagebar-body {
-  margin: 20px;
-  font-size: var(--env-var-font-size-medium);
-  padding: 0 16px 0 0;
-  justify-content: center;
-  align-items: center;
-  margin: auto;
-}
diff --git a/Client/src/Components/Toast/index.css b/Client/src/Components/Toast/index.css
deleted file mode 100644
index c778d22f5..000000000
--- a/Client/src/Components/Toast/index.css
+++ /dev/null
@@ -1,3 +0,0 @@
-.Toastify__toast-container {
-  width: auto;
-}
\ No newline at end of file
diff --git a/Client/src/Components/Toast/index.jsx b/Client/src/Components/Toast/index.jsx
deleted file mode 100644
index 41367ec11..000000000
--- a/Client/src/Components/Toast/index.jsx
+++ /dev/null
@@ -1,52 +0,0 @@
-import PropTypes from "prop-types";
-import ComplexAlert from "../../Components/Icons/ComplexAlert/ComplexAlert";
-import AnnouncementsDualButtonWithIcon from "./AnnouncementsDualButtonWithIcon/AnnouncementsDualButtonWithIcon";
-import "react-toastify/dist/ReactToastify.css";
-import { toast, ToastContainer } from "react-toastify";
-import "./index.css";
-
-/**
- * ToastComponent displays a notification that is triggered by error messages.
- *
- * @component
- * @param {Object} props - The component props
- * @param {string} props.subject - The subject or title of the toast message
- * @param {string} props.body - The body content of the toast message
- * @param {string} props.esc - The text for the dismiss action button
- * @param {string} props.primary - The text for the primary action button
- * @returns {JSX.Element} JSX element representing the ToastComponent
- */
-
-const ToastComponent = ({ subject, body, esc, primary }) => {
-  const displayMsg = () => {
-    toast(
-      ({ closeToast, toastProps }) => (
-        <AnnouncementsDualButtonWithIcon
-          icon={<ComplexAlert theme="red" />}
-          subject={subject}
-          body={body}
-          esc={esc}
-          primary={primary}
-          closeToast={closeToast}
-        />
-      ),
-      { closeButton: false }
-    );
-  };
-
-  return (
-    <div>
-      <button onClick={displayMsg}>Click me</button>
-      <ToastContainer className="Toastify__toast-container" />
-    </div>
-  );
-};
-
-ToastComponent.propTypes = {
-  subject: PropTypes.string.isRequired,
-  body: PropTypes.string.isRequired,
-  esc: PropTypes.string.isRequired,
-  primary: PropTypes.string.isRequired,
-};
-
-export default ToastComponent;
diff --git a/Client/src/Pages/PlayGround/PlayGround.jsx b/Client/src/Pages/PlayGround/PlayGround.jsx
index bde0b6761..247146362 100644
--- a/Client/src/Pages/PlayGround/PlayGround.jsx
+++ b/Client/src/Pages/PlayGround/PlayGround.jsx
@@ -4,16 +4,9 @@ import ErrorOutlineIcon from "@mui/icons-material/ErrorOutline";
 import HelpOutlineIcon from "@mui/icons-material/HelpOutline";
 import WebsiteTextField from "../../Components/TextFields/Website/WebsiteTextField";
 import DescriptionTextField from "../../Components/TextFields/Description/DescriptionTextField";
-import AnnouncementsDualButton from "../../Components/Toast/AnnouncementsDualButton/AnnouncementsDualButton";
-import AnnouncementsDualButtonWithIcon from "../../Components/Toast/AnnouncementsDualButtonWithIcon/AnnouncementsDualButtonWithIcon";
-import InfoOutlinedIcon from "@mui/icons-material/InfoOutlined";
-import ComplexAlert from "../../Components/Icons/ComplexAlert/ComplexAlert";
-import AnnouncementsMessageBar from "../../Components/Toast/AnnouncementsMessageBar/AnnouncementsMessageBar";
-import AnnouncementUpdateSubscription from "../../Components/Toast/AnnouncementUpdateSubscription/AnnouncementUpdateSubscription";
 import PlayGroundCharts from "./PlayGround-Charts";
 import PlayGroundPopupModals from "./PlayGround-Popup-Modals";
 import PlayGroundTooltips from "./PlayGround-Tooltips";
-import Toast from "../../Components/Toast";
 
 // This Component is just for the development and test
 // purposes and just to see what my components look like while development
@@ -53,7 +46,6 @@ function PlayGround() {
         hasCopyButton={true}
         hintText="This is a hint text to help user."
       />
-      <Toast />
 
       <hr />
       {/* Now, illustration of the Description text fields */}
@@ -66,55 +58,6 @@ function PlayGround() {
         hasError={true}
         hintText="This is a hint text to help user."
       />
-      <AnnouncementsDualButtonWithIcon
-        icon={
-          <div className="info-icon-frame">
-            <InfoOutlinedIcon style={{ fill: "#344054" }} />
-          </div>
-        }
-        subject="We’ve just released a new feature"
-        body="Lorem ipsum dolor sit amet consectetur adipisicing elit. Aliquid
-        pariatur, ipsum dolor."
-        esc="Dismiss"
-        primary="View changes"
-      />
-
-      <AnnouncementsDualButtonWithIcon
-        icon={<ComplexAlert theme="red" />}
-        subject="There was a problem with that action"
-        body="Lorem ipsum dolor sit amet consectetur adipisicing elit. Aliquid
-        pariatur, ipsum dolor."
-        esc="Dismiss"
-        primary="Learn more"
-      />
-
-      <AnnouncementsDualButtonWithIcon
-        icon={<ComplexAlert theme="green" />}
-        subject="Successfully updated profile"
-        body="Lorem ipsum dolor sit amet consectetur adipisicing elit. Aliquid
-        pariatur, ipsum dolor."
-        esc="Dismiss"
-        primary="Learn more"
-      />
-
-      <AnnouncementsDualButton
-        subject="We’ve just released a new feature"
-        body="Lorem ipsum dolor sit amet consectetur adipisicing elit. Aliquid
-          pariatur, ipsum dolor."
-        esc="Dismiss"
-        primary="View changes"
-      />
-
-      <AnnouncementsMessageBar message="New employee created successfully" />
-
-      <AnnouncementUpdateSubscription
-        title="We’ve just released a new update!"
-        text="Check out the all new dashboard view. Pages and now load faster."
-        cancel="Dismiss"
-        positive="Changelog"
-        header="Subscribe to updates"
-        button="Subscribe"
-      />
       <hr />
       <PlayGroundCharts />
       <hr />