diff --git a/frontend/src/pages/Admin/Components/Faq/Q&A/ManageQ&A/ManageQ&A.jsx b/frontend/src/pages/Admin/Components/Faq/Q&A/ManageQ&A/ManageQ&A.jsx
index 66a55b16..3a125f80 100644
--- a/frontend/src/pages/Admin/Components/Faq/Q&A/ManageQ&A/ManageQ&A.jsx
+++ b/frontend/src/pages/Admin/Components/Faq/Q&A/ManageQ&A/ManageQ&A.jsx
@@ -1,10 +1,34 @@
 import { useEffect, useState } from "react";
 import { END_POINT } from "../../../../../../config/api";
 import style from "./manage.module.scss";
+import { makeStyles } from "@material-ui/core/styles";
+import Modal from "@material-ui/core/Modal";
+import Button from "@material-ui/core/Button";
+import Typography from "@material-ui/core/Typography";
 import { AiOutlineArrowLeft } from "react-icons/ai";
 import { SimpleToast } from "../../../../../../components/util/Toast/Toast";
 import Loader from "../../../../../../components/util/Loader";
 
+const useStyles = makeStyles((theme) => ({
+  modal: {
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+  },
+  paper: {
+    backgroundColor: theme.palette.background.paper,
+    border: "2px solid #000",
+    boxShadow: theme.shadows[5],
+    padding: theme.spacing(2, 4, 3),
+  },
+  buttons: {
+    display: "flex",
+    marginTop: "10px",
+    justifyContent: "center",
+    gap: "10px",
+  },
+}));
+
 export function Manageqa({ setTab, qId }) {
   const [ans, setAns] = useState([]);
   const [qns, setQns] = useState();
@@ -15,6 +39,9 @@ export function Manageqa({ setTab, qId }) {
     toastType: "",
     toastMessage: "",
   });
+  const [confirmDelete, setConfirmDelete] = useState(false);
+  const [questionToDelete, setQuestionToDelete] = useState(null);
+  const classes = useStyles();
   const getQuestion = async (id) => {
     setIsLoaded(true);
     try {
@@ -39,6 +66,79 @@ export function Manageqa({ setTab, qId }) {
       });
     }
   };
+
+  const handleOpenConfirmModal = (id) => {
+    setConfirmDelete(true);
+    setQuestionToDelete(id);
+  };
+
+  const handleCloseConfirmModal = () => {
+    setConfirmDelete(false);
+  };
+
+  const handleDeleteAnswer = async (answerId) => {
+    try {
+      const url = `${END_POINT}/answers/deleteanswer`;
+      const response = await fetch(url, {
+        method: "DELETE",
+        headers: {
+          "Content-Type": "application/json",
+          Authorization: `Bearer ${localStorage.getItem("token")}`,
+        },
+        body: JSON.stringify({ answerId }),
+      });
+
+      const data = await response.json();
+      setToast({
+        ...toast,
+        toastMessage: "Successfully deleted answer",
+        toastStatus: true,
+        toastType: "success",
+      });
+      setToogle(!toogle);
+    } catch (error) {
+      console.log(error);
+      setToast({
+        ...toast,
+        toastMessage: "Unable to delete answer",
+        toastStatus: true,
+        toastType: "error",
+      });
+    }
+  };
+
+  const handleDeleteQuestion = async () => {
+    try {
+      const url = `${END_POINT}/question/deletequestion`;
+      const response = await fetch(url, {
+        method: "DELETE",
+        headers: {
+          "Content-Type": "application/json",
+          Authorization: `Bearer ${localStorage.getItem("token")}`,
+        },
+        body: JSON.stringify({ questionId: questionToDelete }),
+      });
+
+      const data = await response.json();
+      setToast({
+        ...toast,
+        toastMessage: "Successfully deleted question",
+        toastStatus: true,
+        toastType: "success",
+      });
+      setTab(18);
+      setToogle(!toogle);
+    } catch (error) {
+      console.log(error);
+      setToast({
+        ...toast,
+        toastMessage: "Unable to delete question",
+        toastStatus: true,
+        toastType: "error",
+      });
+    }
+  };
+
   const updateQuestion = async (id, status) => {
     try {
       const qUrl = `${END_POINT}/question/updateStatus`;
@@ -68,6 +168,7 @@ export function Manageqa({ setTab, qId }) {
       });
     }
   };
+
   const getAnswer = async (questionId) => {
     try {
       const aUrl = `${END_POINT}/answers/${questionId}`;
@@ -92,6 +193,7 @@ export function Manageqa({ setTab, qId }) {
       });
     }
   };
+
   const updateAnswer = async (id, status) => {
     try {
       const aUrl = `${END_POINT}/answers/updateStatus`;
@@ -121,16 +223,19 @@ export function Manageqa({ setTab, qId }) {
       });
     }
   };
+
   const handleCloseToast = (event, reason) => {
     if (reason === "clickaway") {
       return;
     }
     setToast({ ...toast, toastStatus: false });
   };
+
   useEffect(() => {
     getQuestion(qId);
     getAnswer(qId);
   }, [toogle]);
+
   return (
     <div>
       <h1 className={style["head"]}>Manage Q&A</h1>
@@ -139,36 +244,57 @@ export function Manageqa({ setTab, qId }) {
       </div>
       <div className={style["data-loader"]}>{isLoaded ? <Loader /> : null}</div>
       {isLoaded || (
-        <div className={style["card-item"]}>
-          <div className={style["card-info"]}>
-            <h1>{qns?.title}</h1>
-            <h2>Question</h2>
-            <div className={style["questionBox"]}>
-              <h3 className={style["card-question"]}>{qns?.description}</h3>
-              <div className={style["button-group"]}>
-                <button
-                  className={
-                    qns?.isApproved
-                      ? style["button-delete"]
-                      : style["button-approve"]
-                  }
-                  id={`${qns?._id}`}
-                  onClick={(e) => {
-                    updateQuestion(e.currentTarget.id, !qns?.isApproved);
-                  }}
-                >
-                  {qns?.isApproved ? "DisApprove" : "Approve"}
-                </button>
-                <button className={style["button-delete"]}>Delete</button>
+        <>
+        <h1 className={style["head"]}>Question</h1>
+          <div className={style["question"]}>
+          <div className={style["card-item"]}>
+            <div className={style["card-info"]}>
+              <h1>{qns?.title}</h1>
+              <div className={style["questionBox"]}>
+                <h3 className={style["card-question"]}>{qns?.description}</h3>
+                <div className={style["button-group"]}>
+                  <button
+                    className={
+                      qns?.isApproved
+                        ? style["button-delete"]
+                        : style["button-approve"]
+                    }
+                    id={`${qns?._id}`}
+                    onClick={(e) => {
+                      updateQuestion(e.currentTarget.id, !qns?.isApproved);
+                    }}
+                  >
+                    {qns?.isApproved ? "Reject" : "Approve"}
+                  </button>
+                  <button
+                    name={`${qns?._id}`}
+                    onClick={(e) =>
+                      handleOpenConfirmModal(e.currentTarget.name)
+                    }
+                    className={style["button-delete"]}
+                  >
+                    Delete
+                  </button>
+                </div>
+                <div style={{ display: "flex", padding: "10px 30px 10px 30px" }}>
+                {qns?.tags?.map((tag) => (
+                  <p className={style["tags"]}>{tag}</p>
+                ))}
               </div>
+              </div>
+              
             </div>
+          </div>
+          </div>
+          <h1 className={style["head"]}>Answers</h1>
 
-            {ans?.length === 0 ? (
-              <span>No answers Found</span>
-            ) : (
-              ans?.map((a) => (
-                <>
-                  <h2>Answers</h2>
+          {ans?.length === 0 ? (
+            <span>No answers Found</span>
+          ) : (
+            <div className={ans?.length==1?style["question"]:style["answer"]}>
+              {ans?.map((a) => (
+              <div className={style["card-item"]}>
+                <div className={style["card-info"]}>
                   <div className={style["answerBox"]}>
                     <h3 className={style["card-answer"]}>{a.answer}</h3>
                     <div className={style["button-group"]}>
@@ -178,28 +304,63 @@ export function Manageqa({ setTab, qId }) {
                             ? style["button-delete"]
                             : style["button-approve"]
                         }
-                        id={`${a._id}`}
+                        id={`${a?._id}`}
                         onClick={(e) => {
                           updateAnswer(e.currentTarget.id, !a?.isApproved);
                         }}
                       >
-                        {a?.isApproved ? "DisApprove" : "Approve"}
+                        {a?.isApproved ? "Reject" : "Approve"}
+                      </button>
+                      <button
+                        name={`${a?._id}`}
+                        onClick={(e) =>
+                          handleDeleteAnswer(e.currentTarget.name)
+                        }
+                        className={style["button-delete"]}
+                      >
+                        Delete
                       </button>
-                      <button className={style["button-delete"]}>Delete</button>
                     </div>
                   </div>
-                </>
-              ))
-            )}
-
-            <div style={{ display: "flex", padding: "10px 30px 10px 30px" }}>
-              {qns?.tags?.map((tag) => (
-                <p className={style["tags"]}>{tag}</p>
+                </div>
+              </div>
               ))}
             </div>
-          </div>
-        </div>
+          )}
+        </>
       )}
+      {
+        <Modal
+          open={confirmDelete}
+          onClose={handleCloseConfirmModal}
+          className={classes.modal}
+        >
+          <div className={classes.paper}>
+            <Typography variant="h6" component="h2">
+              Confirm Delete
+            </Typography>
+            <Typography sx={{ mt: 2 }}>
+              Are you sure you want to delete this question and all its answers?
+            </Typography>
+            <div className={classes.buttons}>
+              <Button
+                onClick={handleDeleteQuestion}
+                variant="contained"
+                color="secondary"
+              >
+                Confirm
+              </Button>
+              <Button
+                onClick={handleCloseConfirmModal}
+                variant="contained"
+                color="primary"
+              >
+                Cancel
+              </Button>
+            </div>
+          </div>
+        </Modal>
+      }
       {toast.toastStatus && (
         <SimpleToast
           open={toast.toastStatus}
diff --git a/frontend/src/pages/Admin/Components/Faq/Q&A/ManageQ&A/manage.module.scss b/frontend/src/pages/Admin/Components/Faq/Q&A/ManageQ&A/manage.module.scss
index ee02bb11..11c431d3 100644
--- a/frontend/src/pages/Admin/Components/Faq/Q&A/ManageQ&A/manage.module.scss
+++ b/frontend/src/pages/Admin/Components/Faq/Q&A/ManageQ&A/manage.module.scss
@@ -4,12 +4,13 @@
   border-radius: 1em;
   height: auto;
   width: 90%;
-  margin: 10px auto 30px  4%;
+  margin: 10px auto 30px  auto;
   display: inline-block;
   background-position: left center;
   transition: all 0.5s ease-in;
   background-color: #016795;
   box-shadow: 0.5em 0.5em 0.5em rgb(54, 53, 53);
+  max-width: 400px;
 }
 
 .card-title {
@@ -19,7 +20,10 @@
   font-weight: bold;
   color: white;
 }
-
+.question{
+  display: flex;
+  justify-content: center;
+}
 .card-question {
   font-weight: bold;
   text-align: left;
@@ -37,13 +41,17 @@
 }
 
 .questionBox{
-  display: flex;
+  display: grid;
+  justify-content: center;
   margin: 5px;
+  gap: 10px;
 }
 
 .answerBox{
-  display: flex;
+  display: grid;
+  justify-content: center;
   margin: 5px;
+  gap: 10px;
 }
 
 .card-info {
@@ -65,7 +73,7 @@
   align-items: center;
   justify-content: center;
   gap: 10px;
-  margin: 2px;
+  margin: 5px 2px 2px 2px;
 }
 
 .button-approve {
@@ -82,6 +90,11 @@
   transition: background-color 200ms;
 }
 
+.answer{
+  display: grid;
+  grid-template-columns: auto auto;
+}
+
 .button-edit:hover {
   background-color: rgb(10, 205, 53);
 }
@@ -125,4 +138,9 @@
   .questionBox{
     display: block;
   }
+  .answer{
+    display: flex;
+    justify-content: center;
+    flex-direction: column;
+  }
 }
\ No newline at end of file
diff --git a/frontend/src/pages/Admin/Components/Faq/Q&A/qanda.module.scss b/frontend/src/pages/Admin/Components/Faq/Q&A/qanda.module.scss
index 3310ea36..64fad9cd 100644
--- a/frontend/src/pages/Admin/Components/Faq/Q&A/qanda.module.scss
+++ b/frontend/src/pages/Admin/Components/Faq/Q&A/qanda.module.scss
@@ -19,11 +19,14 @@
 }
 
 .crd {
-  min-width: 100px;
+  min-width: 220px;
   max-width: 470px;
+  width: 100%;
   min-height: 12em;
   display: flex;
+  margin: auto;
   flex-direction: column;
+  padding: 15px 8px 8px 8px;
   align-items: center;
   justify-content: center;
   background-color: #016795;
@@ -55,7 +58,7 @@
 @media (max-width: 983px) {
   .manage-teams {
     grid-template-columns: auto;
-    margin: 1em 0;
+    margin: auto;
     justify-content: center;
   }
 
@@ -69,6 +72,10 @@
     overflow-wrap: break-word;
     padding: 1rem 1.2rem;
   }
+  .manage-qas{
+    display: grid;
+    grid-template-columns: auto;
+  }
 }
 
 @media screen and (min-width: 600px) and (max-width: 1050px) {