diff --git a/Client/src/Pages/PlayGround/PlayGround-Charts.jsx b/Client/src/Pages/PlayGround/PlayGround-Charts.jsx
deleted file mode 100644
index 906f2a84a..000000000
--- a/Client/src/Pages/PlayGround/PlayGround-Charts.jsx
+++ /dev/null
@@ -1,25 +0,0 @@
-import React from "react";
-import "./playGround.css";
-import Statistic from "../../Components/Charts/Statistics/Statistic";
-import ServerStatus from "../../Components/Charts/Servers/ServerStatus";
-
-function PlayGroundCharts() {
-  return (
-    <>
-      <div className="play-ground-charts">
-        <Statistic title="Currently up for" value="4h 30m 2s" />
-        <Statistic title="Last checked" value="15 seconds ago" />
-        <Statistic title="Incidents" value="2" />
-        <Statistic title="Certificate expiry" value="284 days" />
-      </div>
-      <div className="play-ground-charts-spacing" />
-      <div className="play-ground-charts">
-        <ServerStatus title="Up" value="4" state="up" />
-        <ServerStatus title="Down" value="0" state="down" />
-        <ServerStatus title="Paused" value="0" state="pause" />
-      </div>
-    </>
-  );
-}
-
-export default PlayGroundCharts;
diff --git a/Client/src/Pages/PlayGround/PlayGround-Tooltips.jsx b/Client/src/Pages/PlayGround/PlayGround-Tooltips.jsx
deleted file mode 100644
index 3713f889c..000000000
--- a/Client/src/Pages/PlayGround/PlayGround-Tooltips.jsx
+++ /dev/null
@@ -1,34 +0,0 @@
-import React from "react";
-import TooltipWithTail from "../../Components/Tooltips/TooltipWithTail/TooltipWithTail";
-import "./playGround.css";
-
-function PlayGroundTooltips() {
-  return (
-    <div className="tooltip-playground">
-      <br />
-      <TooltipWithTail
-        placement="left"
-        arrow={true}
-        title="This is a tooltip"
-        text="This is a tooltip"
-      />
-      <br />
-      <TooltipWithTail placement="top" arrow={true} text="This is a tooltip" />
-      <br />
-      <TooltipWithTail
-        placement="bottom"
-        arrow={false}
-        text="This is a tooltip"
-      />
-      <br />
-      <TooltipWithTail
-        placement="right"
-        arrow={true}
-        title="This is a tooltip"
-        text="Tooltips are used to describe or identify an element. In most scenarios, tooltips help the user understand meaning, function or alt-text."
-      />
-    </div>
-  );
-}
-
-export default PlayGroundTooltips;
diff --git a/Client/src/Pages/PlayGround/PlayGround-announcements.jsx b/Client/src/Pages/PlayGround/PlayGround-announcements.jsx
deleted file mode 100644
index aa4bd1913..000000000
--- a/Client/src/Pages/PlayGround/PlayGround-announcements.jsx
+++ /dev/null
@@ -1,73 +0,0 @@
-import "./playGround.css";
-import React from "react";
-import AnnouncementsDualButtonWithIcon from "../../Components/Announcements/AnnouncementsDualButtonWithIcon/AnnouncementsDualButtonWithIcon";
-import InfoOutlinedIcon from "@mui/icons-material/InfoOutlined";
-import ComplexAlert from "../../Components/Icons/ComplexAlert/ComplexAlert";
-import AnnouncementsMessageBar from "../../Components/Announcements/AnnouncementsMessageBar/AnnouncementsMessageBar";
-import AnnouncementsDualButton from "../../Components/Announcements/AnnouncementsDualButton/AnnouncementsDualButton";
-import AnnouncementUpdateSubscription from "../../Components/Announcements/AnnouncementUpdateSubscription/AnnouncementUpdateSubscription";
-
-function PlayGroundAnnouncements() {
-  return (
-    <div className="playground">
-      <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"
-      />
-      <br />
-      <br />
-      <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"
-      />
-      <br />
-      <br />
-      <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"
-      />
-      <br />
-      <br />
-      <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"
-      />
-      <br />
-      <br />
-      <AnnouncementsMessageBar message="New employee created successfully" />
-      <br />
-      <br />
-      <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"
-      />
-      <br />
-      <br />
-    </div>
-  );
-}
-
-export default PlayGroundAnnouncements;
diff --git a/Client/src/Pages/PlayGround/PlayGround.jsx b/Client/src/Pages/PlayGround/PlayGround.jsx
deleted file mode 100644
index 42f58148e..000000000
--- a/Client/src/Pages/PlayGround/PlayGround.jsx
+++ /dev/null
@@ -1,86 +0,0 @@
-import React from "react";
-import PlayGroundCharts from "./PlayGround-Charts";
-import PlayGroundTooltips from "./PlayGround-Tooltips";
-import Field from "../../Components/Inputs/Field";
-
-// This Component is just for the development and test
-// purposes and just to see what my components look like while development
-// and will be removed in the end
-function PlayGround() {
-  return (
-    <div>
-      {/* Default state of Email Text Fields */}
-      <div
-        style={{
-          display: "flex",
-          flexDirection: "column",
-          gap: "10px",
-          maxWidth: "400px",
-          padding: "10px",
-        }}
-      >
-        <Field
-          type="email"
-          id="outlined-basic"
-          label="Email"
-          placeholder="olivia@untitledui.com"
-        />
-        {/* Email Text Field when validation error occures */}
-        <Field
-          type="email"
-          id="outlined-basic"
-          label="Email"
-          placeholder="olivia@untitledui.com"
-          error="This is an error message"
-        />
-      </div>
-
-      <hr />
-
-      {/* Now, illustration of the Website text fields */}
-      <div
-        style={{
-          display: "flex",
-          flexDirection: "column",
-          gap: "10px",
-          maxWidth: "400px",
-          padding: "10px",
-        }}
-      >
-        <Field type="url" label="Website" />
-        <Field type="url" label="Website" hasCopy={true} />
-      </div>
-
-      <hr />
-      {/* Now, illustration of the Description text fields */}
-
-      <div
-        style={{
-          display: "flex",
-          flexDirection: "column",
-          gap: "10px",
-          maxWidth: "400px",
-          padding: "10px",
-        }}
-      >
-        <Field
-          type="description"
-          label="Description"
-          placeholder="Enter a description... "
-        />
-        <Field
-          type="description"
-          label="Description"
-          placeholder="Enter a description... "
-          error="This is an error message"
-        />
-      </div>
-      <hr />
-      <PlayGroundCharts />
-      <hr />
-      <PlayGroundTooltips />
-    </div>
-  );
-}
-
-export default PlayGround;
diff --git a/Client/src/Pages/PlayGround/playGround.css b/Client/src/Pages/PlayGround/playGround.css
deleted file mode 100644
index cd6d5e87b..000000000
--- a/Client/src/Pages/PlayGround/playGround.css
+++ /dev/null
@@ -1,19 +0,0 @@
-.play-ground-charts {
-  display: flex;
-}
-
-.play-ground-charts-spacing {
-  height: 110px;
-}
-
-.tooltip-playground {
-  margin: auto;
-  padding: 5%;
-  width: 5%;
-  justify-content: center;
-  text-align: center;
-}
-
-.playground {
-  padding: 40px;
-}