diff --git a/frontend/src/pages/Admin/Admin.jsx b/frontend/src/pages/Admin/Admin.jsx
index 312af9f5..545841ac 100644
--- a/frontend/src/pages/Admin/Admin.jsx
+++ b/frontend/src/pages/Admin/Admin.jsx
@@ -258,7 +258,7 @@ export const Admin = (props) => {
           ) : tab === 15 ? (
             <ResetPassword />
           ) : tab === 16 ? (
-            <ManageBroadcasts />
+            <ManageBroadcasts theme={props.theme}/>
           ) : tab === 18 ? (
             <QandA setQId={setQId} setTab={setTab} tab={tab} />
           ) : tab === 19 ? (
diff --git a/frontend/src/pages/Admin/Components/Broadcast/ManageBroadcasts/ManageBroadcasts.jsx b/frontend/src/pages/Admin/Components/Broadcast/ManageBroadcasts/ManageBroadcasts.jsx
index cc597290..aa607a13 100644
--- a/frontend/src/pages/Admin/Components/Broadcast/ManageBroadcasts/ManageBroadcasts.jsx
+++ b/frontend/src/pages/Admin/Components/Broadcast/ManageBroadcasts/ManageBroadcasts.jsx
@@ -10,7 +10,7 @@ import Loader from "../../../../../components/util/Loader";
 import { Button4 } from "../../../../../components/util/Button";
 import { customBoardcast } from "../../../../../service/Broadcast.jsx";
 
-export function ManageBroadcasts() {
+export function ManageBroadcasts(props) {
   const [array, setArray] = useState([]);
   const [index, setIndex] = useState(0);
   const [visible, setVisible] = useState(false);
@@ -86,6 +86,7 @@ export function ManageBroadcasts() {
     setArray(result);
     setLoaded(true);
   }
+  const { theme } = props;
   return (
     <div>
       <Edit
@@ -93,6 +94,7 @@ export function ManageBroadcasts() {
         setVisible={setVisible}
         handleChange={handleChange}
         data={array[index]}
+        theme={theme}
       />
       <div id={style["hero"]}>
         <div className={style["motive"]}>
diff --git a/frontend/src/pages/Broadcast/Component/AllBroadcasts/Edit/Edit.jsx b/frontend/src/pages/Broadcast/Component/AllBroadcasts/Edit/Edit.jsx
index 2083b5c2..c63c006a 100644
--- a/frontend/src/pages/Broadcast/Component/AllBroadcasts/Edit/Edit.jsx
+++ b/frontend/src/pages/Broadcast/Component/AllBroadcasts/Edit/Edit.jsx
@@ -1,83 +1,166 @@
-import React, { useEffect, useState } from "react";
+import React, { useState } from "react";
 import style from "./edit.module.scss";
-import { TextField } from "@material-ui/core";
-import CloseIcon from "@material-ui/icons/Close";
+import { Button2 } from "../../../../../components/util/Button/index";
+import SunEditor from "suneditor-react";
+import "suneditor/dist/css/suneditor.min.css";
+import { SimpleToast } from "../../../../../components/util/Toast";
+import { UpdateBoardCast } from "../../../../../service/Broadcast.jsx";
 
 export function Edit(props) {
-  const [a, seta] = useState();
-  function scrolls() {
-    let b = window.scrollY;
-    seta(b);
-  }
-  useEffect(() => {
-    window.addEventListener("scroll", scrolls);
-  }, []);
+  const [toast, setToast] = useState({
+    toastStatus: false,
+    toastType: "",
+    toastMessage: "",
+  });
 
+  const handleCloseToast = (event, reason) => {
+    if (reason === "clickaway") {
+      return;
+    }
+    setToast({ ...toast, toastStatus: false });
+    props.setVisible(false);
+  };
+
+  const handleInputChange = (e) => {
+    const { name, value } = e.target;
+    props.handleChange({ target: { name, value } });
+  };
+
+  const handleContentChange = (content) => {
+    props.handleChange({ target: { name: 'content', value: content } });
+  };
+
+  const handleSubmit = async (e) => {
+    e.preventDefault();
+    const { data } = props;
+    const newData = {
+      id: data._id,
+      content:data.content,
+      link: data.link,
+      expiresOn: data.expiresOn,
+      imageUrl: data.imageUrl,
+      tags: data.tags,
+      isApproved: data.isApproved,
+      title: data.title,
+    };
+
+   try {
+      await UpdateBoardCast(newData,setToast, toast);
+      setToast({
+        toastStatus: true,
+        toastType: "success",
+        toastMessage: "Broadcast updated successfully!",
+      });
+    } catch (error) {
+      console.error("Error updating broadcast:", error);
+      setToast({
+        toastStatus: true,
+        toastType: "error",
+        toastMessage: "Failed to update broadcast. Please try again.",
+      });
+    }
+  };
+
+  const { visible, data} = props;
   let dark = props.theme;
-  return props.visible ? (
-    <div className={style["popup"]} style={{ top: a }}>
-      <div className={dark ? style["div-dark"] : style["div"]}>
-        <h1 className={style["heading"]}>
-          Edit modal
-          <CloseIcon
-            style={{ float: "right", cursor: "pointer" }}
-            onClick={() => props.setVisible(false)}
-          />
-        </h1>
-        <form>
-          <div className={style["form"]}>
-            <h5>Title:</h5>
-            <TextField
-              type="text"
-              name="title"
-              placeholder="Title"
-              multiline
-              value={props.data.title}
-              className={style["input"]}
-              InputProps={{
-                className: `${dark ? style["input-dark"] : ""}`,
-              }}
-              onChange={props.handleChange}
-            />
+
+  return visible ? (
+    <div className={style["popup"]}>
+      <div  className={
+            dark
+              ? `${style["card"]} ${style["card-dark"]} `
+              : `${style["card"]} ${style["card-light"]}`
+          }>
+        <form className={style["editor"]} onSubmit={handleSubmit}>
+          <div className={style["motive"]}>
+            <h1 className={
+              dark
+                ? `${style["header-text"]} ${style["header-text-dark"]} `
+                : `${style["header-text"]} ${style["header-text-light"]}`
+            }>Edit Broadcast</h1>
+            <div className={
+                  dark 
+                    ? `${style.dash} ${style["dash-dark"]}` 
+                    : `${style.dash} ${style["dash-light"]}`
+            } />
           </div>
-          <div className={style.form}>
-            <h5>Description:</h5>
-            <TextField
-              type="text"
-              name="desc"
-              multiline
-              placeholder="Description"
-              value={props.data.desc}
-              className={style["input"]}
-              InputProps={{
-                className: `${dark ? style["input-dark"] : ""}`,
-              }}
-              onChange={props.handleChange}
-            />
+          <div>
+            <div className={
+                  dark
+                    ? `${style["input"]} ${style["input-dark"]} `
+                    : `${style["input"]} ${style["input-light"]}`
+                }>
+              <input
+                type="text"
+                name="title"
+                // className={style["form-control-input"]}
+                placeholder="Title"
+                value={data.title}
+                onChange={handleInputChange}
+              />
+              <i className="fas fa-pencil-alt" />
+            </div>
+          </div>
+          <div>
+            <div className={
+                  dark
+                    ? `${style["input"]} ${style["input-dark"]} `
+                    : `${style["input"]} ${style["input-light"]}`
+                }>
+              <SunEditor
+                name="content"
+                placeholder="Description"
+                setContents={data.content}
+                onChange={handleContentChange} 
+                height="100px"
+                className={style["edit"]}
+                onSetContents={(content) =>
+                  handleInputChange({ target: { name: "content", value: content } })
+                }
+              />
+            </div>
           </div>
-          <div className={style.form}>
-            <h5>Link:</h5>
-            <TextField
-              type="text"
-              name="link"
-              placeholder="Link"
-              className={style["input"]}
-              InputProps={{
-                className: `${dark ? style["input-dark"] : ""}`,
-              }}
-              onChange={props.handleChange}
-              value={props.data.link}
-              multiline
+          <div>
+            <div className={
+                  dark
+                    ? `${style["input"]} ${style["input-dark"]} `
+                    : `${style["input"]} ${style["input-light"]}`
+                }>
+              <input
+                type="text"
+                name="link"
+                placeholder="Resource Link"
+                value={data.link}
+                onChange={handleInputChange}
+              />
+              <i className="fas fa-link" />
+            </div>
+          </div>
+          <div className={style["submit-btn"]}>
+            <Button2
+              className={style["submit-btn-text"]}
+              label="Update"
+              type="submit"
+            />
+            <Button2
+              className={style["submit-btn-text"]}
+              label="Cancel"
+              type="button"
+              onClick={() => props.setVisible(false)}
             />
           </div>
-          <button
-            className={style["btns1"]}
-            onClick={() => props.setVisible(false)}
-          >
-            Edit
-          </button>
         </form>
       </div>
+      {toast.toastStatus && (
+        <div className={style["toast-overlay"]}>
+          <SimpleToast
+            open={toast.toastStatus}
+            message={toast.toastMessage}
+            handleCloseToast={handleCloseToast}
+            severity={toast.toastType}
+          />
+        </div>
+      )}
     </div>
   ) : null;
-}
+}
\ No newline at end of file
diff --git a/frontend/src/pages/Broadcast/Component/AllBroadcasts/Edit/edit.module.scss b/frontend/src/pages/Broadcast/Component/AllBroadcasts/Edit/edit.module.scss
index a1a39a74..ca7eaeff 100644
--- a/frontend/src/pages/Broadcast/Component/AllBroadcasts/Edit/edit.module.scss
+++ b/frontend/src/pages/Broadcast/Component/AllBroadcasts/Edit/edit.module.scss
@@ -1,90 +1,388 @@
 .popup {
-  position: absolute;
-  background: rgba(0, 0, 0, 0.2);
-  width: 100%;
+  position: fixed;
+  top: 0;
   left: 0;
+  width: 100%;
   height: 100%;
+  background-color: rgba(0, 0, 0, 0.5);
+  backdrop-filter: blur(5px);
   display: flex;
   justify-content: center;
   align-items: center;
   z-index: 1000;
 }
 
-.input-dark {
-  color: whitesmoke !important;
+.editor {
+  padding: 20px;
+  overflow-x: hidden;
 }
 
-.div {
-  width: 40%;
-  border-radius: 8px;
-  background: white;
-  padding: 1em;
-  @media (max-width: 600px) {
-    width: 95%;
-  }
-  h1 {
-    width: 100%;
-    font-size: 17px;
-    margin: 0;
-    text-align: center;
-  }
+.error {
+  color: red;
+  font-size: 12px;
+  margin-top: 5px;
 }
 
-// for dark theme
-.div-dark {
-  width: 40%;
-  border-radius: 8px;
-  background: #282c35;
-  color: white !important;
-  padding: 1em;
-  @media (max-width: 600px) {
-    width: 95%;
-  }
-  h1 {
-    width: 100%;
-    font-size: 17px;
-    margin: 0;
-    text-align: center;
+.motive {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  margin-bottom: 20px;
+}
+
+.edit {
+  padding: 20px;
+  border: 1px solid #bbbaba;
+  border-radius: 10px;
+  background-color: #f1f1f1;
+  box-shadow: inset 2px 2px 5px #888888, inset -2px -2px 5px #ffffff;
+  position: fixed;
+}
+
+.dash {
+  width: 200px;
+  height: 5px;
+  border-radius: 20px;
+  margin-bottom: 10px;
+  background: rgb(255, 0, 90);
+  background: linear-gradient(
+    45deg,
+    rgba(255, 0, 90, 1) 0%,
+    rgba(10, 24, 61, 1) 90%
+  );
+}
+
+.dash-light {
+  background: rgb(255, 0, 90);
+  background: linear-gradient(
+    45deg,
+    rgba(255, 0, 90, 1) 0%,
+    rgba(10, 24, 61, 1) 90%
+  );
+}
+
+.dash-dark {
+  background: #2b5876;
+  background: linear-gradient(45deg, #2b5876 0%, #4e4376 90%);
+}
+
+.submit-btn {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  margin: 20px auto 0 auto;
+  width: 30%;
+}
+
+.submit-btn-text {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+@media screen and (max-width: 750px) {
+  .card {
+    width: 80%; 
+    max-width: 600px;
   }
 }
 
-.form {
+.toast-overlay {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: transparent;
+  z-index: 1000;
   display: flex;
-  width: 100%;
   align-items: center;
-  justify-content: space-between;
-  div {
-    margin: 0.5em 0;
+  justify-content: center;
+}
+
+.card {
+  width: 60%; 
+  height: auto;
+  background-color: #e7e7e7;
+  margin: 0 auto;
+  padding-bottom: 20px;
+  border-radius: 30px;
+}
+
+.card-light {
+  background-color: #e7e7e7;
+  // box-shadow: 5px 5px 15px #888888, -5px -5px 15px #ffffff;
+}
+
+// for dark theme
+.card-dark {
+  color: whitesmoke;
+  background-color: #282c35;
+  -webkit-box-shadow: 0px 8px 16px 0px rgba(72, 127, 255, 0.1),
+    0px -8px 16px 0px rgba(72, 127, 255, 0.1);
+  -moz-box-shadow: 0px 8px 16px 0px rgba(72, 127, 255, 0.1),
+    0px -8px 16px 0px rgba(72, 127, 255, 0.1);
+  box-shadow: 0px 8px 16px 0px rgba(72, 127, 255, 0.1),
+    0px -8px 16px 0px rgba(72, 127, 255, 0.1);
+}
+
+
+.header-text {
+  font-size: 30px;
+  text-align: center;
+  text-transform: capitalize;
+}
+
+// for dark theme
+.header-text-dark {
+  color: #69a9dd;
+}
+
+.header-text-light {
+  color: var(--secondary-color);
+}
+
+.input {
+  position: relative;
+  margin-bottom: 8px;
+}
+
+.input input,
+.input textarea,
+.input1 select {
+  width: 100%;
+  height: 50px;
+  border-radius: 5px;
+  padding: 0 25px;
+  margin-left: auto;
+  margin-right: auto;
+}
+
+.input-light input,
+.input-light textarea,
+.input1-light select {
+  border: 1px solid #bbbaba;
+  color: #777777;
+  background-color: #f1f1f1;
+  box-shadow: inset 2px 2px 5px #888888, inset -2px -2px 5px #ffffff;
+}
+
+// for dark theme
+.input-dark input,
+.input-dark textarea,
+.input1-dark select {
+  border: 1px solid #414a4c;
+  color: whitesmoke;
+  background-color: #333333;
+  box-shadow: inset 2px 2px 5px rgba(72, 127, 255, 0.1),
+    inset -2px -2px 5px rgba(72, 127, 255, 0.4);
+}
+
+.input input::placeholder,
+.input textarea::placeholder {
+  opacity: 1;
+  color: #777777;
+}
+
+// for dark theme
+.input-dark input::placeholder,
+.input-dark textarea::placeholder {
+  opacity: 1;
+  color: whitesmoke;
+}
+
+.input input::-moz-placeholder,
+.input textarea::-moz-placeholder {
+  opacity: 1;
+  color: #777777;
+}
+
+// for dark theme
+.input-dark input::-moz-placeholder,
+.input-dark textarea::-moz-placeholder {
+  opacity: 1;
+  color: whitesmoke;
+}
+
+.input input::-moz-placeholder,
+.input textarea::-moz-placeholder {
+  opacity: 1;
+  color: #777777;
+}
+
+.input input::-webkit-input-placeholder,
+.input textarea::-webkit-input-placeholder {
+  opacity: 1;
+  color: #777777;
+}
+
+// for dark theme
+.input-dark input::-moz-placeholder,
+.input-dark textarea::-moz-placeholder {
+  opacity: 1;
+  color: whitesmoke;
+}
+
+.input-dark input::-webkit-input-placeholder,
+.input-dark textarea::-webkit-input-placeholder {
+  opacity: 1;
+  color: whitesmoke;
+}
+
+.input-light input:focus,
+.input-light textarea:focus,
+.input1-light select:focus {
+  outline: none;
+  border: double 2px transparent;
+  border-radius: 10px;
+  background-image: linear-gradient(white, white),
+    linear-gradient(to right, rgba(255, 0, 90, 1), rgba(10, 24, 61, 1));
+  background-origin: border-box;
+  background-clip: padding-box, border-box;
+  background-color: #ffffff;
+}
+
+// for dark theme
+.input-dark input:focus,
+.input-dark textarea:focus,
+.input1-dark select:focus {
+  outline: none;
+  border: double 2px transparent;
+  border-radius: 10px;
+  background-image: linear-gradient(to right, #2b5876, #4e4376);
+  background-origin: border-box;
+  background-clip: padding-box, border-box;
+  background-color: black;
+}
+
+.input textarea {
+  padding-top: 15px;
+  resize: none;
+  height: 100px;
+}
+
+
+.input > textarea#txt-desc {
+  height: 150px !important;
+}
+
+.input i {
+  position: absolute;
+  right: 25px;
+  top: 15px;
+  font-size: 16px;
+  color: rgb(134, 131, 131);
+}
+
+.input-light i {
+  position: absolute;
+  right: 25px;
+  top: 15px;
+  font-size: 16px;
+  color: rgb(134, 131, 131);
+}
+
+.input-dark i {
+  position: absolute;
+  right: 25px;
+  top: 15px;
+  font-size: 16px;
+  color: rgb(255, 255, 255);
+}
+
+input[type="date"]:not(:valid):before {
+  content: attr(placeholder);
+  /* style it like it is a real placeholder */
+}
+@media screen and (max-width: 750px) {
+  .card {
+    width: 80%;
+    max-width: 600px;
+  }
+
+  .submit-btn {
+    width: 50%;
   }
-  h5 {
-    margin: 0;
-    width: 20%;
+}
+
+/* For screen sizes between 750px and 1024px */
+@media screen and (min-width: 751px) and (max-width: 1024px) {
+  .card {
+    width: 60%;
+    max-width: 800px;
   }
-  .input {
-    width: 75% !important;
+
+  .submit-btn {
+    width: 40%;
   }
 }
 
-.heading {
-  color: #69a9dd !important;
-  font-size: 25px !important;
+/* For screen sizes greater than 1024px */
+@media screen and (min-width: 1025px) {
+  .card {
+    width: 50%;
+    max-width: 900px;
+  }
+
+  .submit-btn {
+    width: 30%;
+  }
 }
 
-.btns1 {
-  background: linear-gradient(to right, #121f3a 0%, #2a4886 50%, #162f66 100%);
-  background-size: 200% auto;
-  outline: none;
-  background-position: left center;
-  -webkit-box-shadow: 0px 8px 16px 0px rgba(72, 127, 255, 0.23);
-  -moz-box-shadow: 0px 8px 16px 0px rgba(72, 127, 255, 0.23);
-  box-shadow: 0px 8px 16px 0px rgba(72, 127, 255, 0.23);
-  border-radius: 50px;
-  color: #fff;
-  width: 15%;
-  margin: 0 auto;
-  display: flex;
-  justify-content: center;
-  padding-top: 5px;
-  padding-bottom: 5px;
-  font-size: 15px;
+/* For dark theme */
+@media (prefers-color-scheme: dark) {
+  body {
+    background-color: #121212;
+    color: #e0e0e0;
+  }
+
+  .card-light, .input-light, .header-text-light {
+    background-color: #2c2c2c;
+    color: #e0e0e0;
+  }
+
+  .dash-light {
+    background: linear-gradient(
+      45deg,
+      rgba(255, 0, 90, 1) 0%,
+      rgba(10, 24, 61, 1) 90%
+    );
+  }
+
+  .input-light input,
+  .input-light textarea,
+  .input1-light select {
+    border: 1px solid #555555;
+    background-color: #333333;
+    color: #e0e0e0;
+    box-shadow: inset 2px 2px 5px #555555, inset -2px -2px 5px #1a1a1a;
+  }
+
+  .input-light input:focus,
+  .input-light textarea:focus,
+  .input1-light select:focus {
+    outline: none;
+    border: double 2px transparent;
+    border-radius: 10px;
+    background-image: linear-gradient(#333333, #333333),
+      linear-gradient(to right, rgba(255, 0, 90, 1), rgba(10, 24, 61, 1));
+    background-origin: border-box;
+    background-clip: padding-box, border-box;
+    background-color: #333333;
+  }
 }
+
+@media screen and (max-width: 480px) {
+  .header-text {
+    font-size: 24px;
+  }
+
+  .editor {
+    padding: 10px;
+  }
+
+  .submit-btn {
+    width: 80%;
+  }
+}
\ No newline at end of file