diff --git a/frontend/src/components/Header/Chat.tsx b/frontend/src/components/Header/Chat.tsx
index c30de217..b959219b 100644
--- a/frontend/src/components/Header/Chat.tsx
+++ b/frontend/src/components/Header/Chat.tsx
@@ -7,7 +7,7 @@ import ErrorMessage from "../ErrorMessage";
 import ConversationList from "./ConversationList";
 import { extractContentFromDOM } from "../../services/domExtraction";
 import axios from "axios";
-import { FaPlus, FaMinus, FaTimes, FaComment, FaComments, FaPills, FaLightbulb, FaArrowCircleDown } from "react-icons/fa";
+import { FaPlus, FaMinus, FaTimes, FaComment, FaComments, FaPills, FaLightbulb, FaArrowCircleDown, FaExpandAlt, FaExpandArrowsAlt } from "react-icons/fa";
 import {
   fetchConversations,
   continueConversation,
@@ -72,13 +72,6 @@ const Chat: React.FC<ChatDropDownProps> = ({ showChat, setShowChat }) => {
     setPageContent(extractedContent);
   }, []);
 
-  // useEffect(() => {
-  //   if (chatContainerRef.current) {
-  //     const chatContainer = chatContainerRef.current;
-  //     chatContainer.scrollTop = chatContainer.scrollHeight;
-  //   }
-  // }, [chatLog]);
-
   const [bottom, setBottom] = useState(false);
 
   const handleScroll = (event: React.UIEvent<HTMLElement>) => {
@@ -87,6 +80,8 @@ const Chat: React.FC<ChatDropDownProps> = ({ showChat, setShowChat }) => {
     setBottom(bottom)
   };
 
+  const [expandChat, setExpandChat] = useState(false);
+
   useEffect(() => {
     if (chatContainerRef.current && activeConversation) {
       const chatContainer = chatContainerRef.current;
@@ -204,52 +199,6 @@ const Chat: React.FC<ChatDropDownProps> = ({ showChat, setShowChat }) => {
     }
   };
 
-  // const systemMessage = {
-  //   role: "system",
-  //   content: "You are a bot please keep conversation going.",
-  // };
-  // const sendMessage = (message: ChatLogItem[]) => {
-  //   const baseUrl = import.meta.env.VITE_API_BASE_URL;
-  //   const url = `${baseUrl}/chatgpt/chat`;
-
-  //   const apiMessages = message.map((messageObject) => {
-  //     let role = "";
-  //     if (messageObject.is_user) {
-  //       role = "user";
-  //     } else {
-  //       role = "assistant";
-  //     }
-  //     return { role: role, content: messageObject.content };
-  //   });
-
-  //   systemMessage.content += `If applicable, please use the following content to ask questions. If not applicable,
-  //     please answer to the best of your ability: ${pageContent}`;
-
-  //   const apiRequestBody = {
-  //     prompt: [systemMessage, ...apiMessages],
-  //   };
-
-  //   setIsLoading(true);
-
-  //   axios
-  //     .post(url, apiRequestBody)
-  //     .then((response) => {
-  //       console.log(response);
-  //       setChatLog((prevChatLog) => [
-  //         ...prevChatLog,
-  //         {
-  //           is_user: false,
-  //           content: response.data.message.choices[0].message.content,
-  //         },
-  //       ]);
-  //       setIsLoading(false);
-  //     })
-  //     .catch((error) => {
-  //       setIsLoading(false);
-  //       console.log(error);
-  //     });
-  // };
-
   const handleSelectConversation = (id: Conversation["id"]) => {
     const selectedConversation = conversations.find(
       (conversation: any) => conversation.id === id,
@@ -267,13 +216,25 @@ const Chat: React.FC<ChatDropDownProps> = ({ showChat, setShowChat }) => {
   };
 
   useEffect(() => {
-    if (showChat) loadConversations();
+    if (showChat) {
+      loadConversations();
+
+      const resizeObserver = new ResizeObserver(() => {
+        const target = chatContainerRef.current;
+        if (target) {
+          const bottom = target.scrollHeight - Math.round(target.scrollTop) === target.clientHeight;
+          setBottom(bottom);
+        }
+      });
+      resizeObserver.observe(chatContainerRef.current);
+      return () => resizeObserver.disconnect(); // clean up
+    }
   }, [showChat]);
 
   return (
     <>
       {showChat ? (
-        <div className="show_chat ring-slate-1000/10 shadow">
+        <div className={`show_chat ring-slate-1000/10 shadow ${expandChat ? 'full-screen' : 'windowed'}`}>
           <div
             id="chat_container"
             className=" mx-auto flex h-full  flex-col overflow-auto rounded "
@@ -311,12 +272,28 @@ const Chat: React.FC<ChatDropDownProps> = ({ showChat, setShowChat }) => {
                 <br />
               </div>
 
-              <button
-                className="delete flex items-center justify-center"
-                onClick={() => setShowChat(false)}
-              >
-                <FaTimes className="chat_icon" />
-              </button>
+              <div className="flex space-x-2">
+                <button
+                  onClick={() =>
+                    setExpandChat((prevState) => !prevState)
+                  }
+                  className="flex items-center justify-center"
+                >
+                  {expandChat ? (
+                    // Icon for "Shrink"
+                    <FaExpandAlt className="chat_icon" />
+                  ) : (
+                    // Icon for "expand"
+                    <FaExpandArrowsAlt className="chat_icon" />
+                  )}
+                </button>
+                <button
+                  className="delete flex items-center justify-center"
+                  onClick={() => setShowChat(false)}
+                >
+                  <FaTimes className="chat_icon" />
+                </button>
+              </div>
             </div>
             <div id="inside_chat" onScroll={handleScroll} className="inside_chat" style={{scrollbarWidth: "thin", scrollBehavior: "smooth"}} ref={chatContainerRef}>
               <button id="scroll_down" className="scroll_down animate-bounce" onClick={handleScrollDown} style={{ visibility: bottom ? 'hidden' : 'visible' }}>
diff --git a/frontend/src/components/Header/chat.css b/frontend/src/components/Header/chat.css
index d2703beb..59ab9608 100644
--- a/frontend/src/components/Header/chat.css
+++ b/frontend/src/components/Header/chat.css
@@ -3,7 +3,15 @@
 }
 
 .show_chat {
-  @apply fixed bottom-6 left-4 rounded h-[50%] w-[320px] rounded-lg bg-white border shadow-xl dark:bg-slate-800 dark:text-slate-300;
+  @apply fixed bottom-6 left-4 rounded rounded-lg bg-white border shadow-xl dark:bg-slate-800 dark:text-slate-300;
+}
+
+.show_chat.windowed {
+  @apply h-[50%] w-[320px];
+}
+
+.show_chat.full-screen {
+  @apply w-[95%] h-[95%];
 }
 
 .circle {
diff --git a/frontend/src/components/Modal/Modal.tsx b/frontend/src/components/Modal/Modal.tsx
new file mode 100644
index 00000000..c683a07e
--- /dev/null
+++ b/frontend/src/components/Modal/Modal.tsx
@@ -0,0 +1,25 @@
+import { ReactNode } from "react";
+import { FaTimes } from "react-icons/fa";
+
+interface ModalProps {
+  isOpen: boolean;
+  onClose: React.MouseEventHandler<SVGElement>;
+  children: ReactNode;
+}
+
+function Modal ({ isOpen, onClose, children }: ModalProps) {
+  return (
+    <div className={`${isOpen ? 'fixed' : 'hidden'} inset-0 bg-gray-600 bg-opacity-50 overflow-y-auto h-full w-full z-50`}>
+      <div className="relative top-20 mx-auto p-5 border w-[90%] shadow-lg rounded-md bg-white">
+        <div className="flex justify-end hover:text-blue-500">
+          <FaTimes onClick={onClose} />
+        </div>
+        <div className="mt-3">
+          {children}
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export default Modal;
\ No newline at end of file
diff --git a/frontend/src/pages/Feedback/FeedbackForm.tsx b/frontend/src/pages/Feedback/FeedbackForm.tsx
index 009fac32..8c2e53b5 100644
--- a/frontend/src/pages/Feedback/FeedbackForm.tsx
+++ b/frontend/src/pages/Feedback/FeedbackForm.tsx
@@ -13,6 +13,10 @@ export interface FormValues {
   image: string;
 }
 
+interface FormProps {
+  id?: string;
+}
+
 // Error Message interface and validation
 interface ErrorMessages {
   [key: string]: string[];
@@ -27,7 +31,7 @@ const isValidErrorMessages = (data: unknown): data is ErrorMessages => {
   );
 };
 
-const FeedbackForm = () => {
+function FeedbackForm ({ id }: FormProps) {
   const [feedback, setFeedback] = useState("");
   const [errorMessages, setErrorMessages] = useState<ErrorMessages>({});
   const [isPressed, setIsPressed] = useState(false);
@@ -194,10 +198,11 @@ const FeedbackForm = () => {
 
   return (
     <>
-      <div className="flex w-[100%] justify-between">
+      <div className="flex flex-col w-[100%] justify-between">
         <h2 className="header_logo cursor-pointer font-satoshi text-xl font-bold text-gray-600  hover:text-blue-600 ">
-          Leave Us Feedback!
+          { !id ? 'Leave Us Feedback!' : 'Report an Issue' }
         </h2>
+          { id && <h6 className="text-gray-500">Patient ID: <span className="font-light">{id}</span></h6> }
       </div>
       <section className="mx-auto w-full">
         <form onSubmit={handleSubmit} className="mt-2">
@@ -421,7 +426,7 @@ const FeedbackForm = () => {
                   className="btnGray mr-5"
                   onClick={handleCancel}
                 >
-                  Cancel
+                  Clear
                 </button>
               </div>
               <button
diff --git a/frontend/src/pages/PatientManager/PatientHistory.tsx b/frontend/src/pages/PatientManager/PatientHistory.tsx
index a47c5edd..c5e92389 100644
--- a/frontend/src/pages/PatientManager/PatientHistory.tsx
+++ b/frontend/src/pages/PatientManager/PatientHistory.tsx
@@ -1,5 +1,8 @@
 import { PatientInfo } from "./PatientTypes";
-import accountLogo from "../../assets/account.svg";
+import { FaUser, FaTrash, FaBug } from "react-icons/fa";
+import { useState } from "react";
+import FeedbackForm from "../Feedback/FeedbackForm"
+import Modal from "../../components/Modal/Modal";
 
 export interface PatientHistoryProps {
   allPatientInfo: PatientInfo[];
@@ -8,6 +11,7 @@ export interface PatientHistoryProps {
   copy: any;
   onPatientDeleted: (patientId: string) => void; // New prop
 }
+
 const PatientHistory = ({
   allPatientInfo,
   setPatientInfo,
@@ -15,6 +19,19 @@ const PatientHistory = ({
 
   onPatientDeleted,
 }: PatientHistoryProps) => {
+
+  const [isModalOpen, setIsModalOpen] = useState({status: false, id: ''});
+
+  const handleOpenModal = (id: string, event: React.MouseEvent) => {
+    event.stopPropagation();
+    setIsModalOpen({status: true, id: id});
+  };
+
+  const handleCloseModal = (event: React.MouseEvent) => {
+    event.stopPropagation();
+    setIsModalOpen({status: false, id: ''});
+  };
+
   const handleDeletePatient = (
     patientIDToDelete: string,
     event: React.MouseEvent
@@ -32,73 +49,73 @@ const PatientHistory = ({
   };
 
   return (
-    <section className="lg:flex lg:items-center lg:justify-center">
-      <div className=" md:mx-0 md:p-0 ">
-        <br />
-        {allPatientInfo.length > 0 && (
-          <h2 className="header_logo cursor-pointer font-satoshi text-xl font-bold text-gray-600  hover:text-blue-600 no-print">
-            List of Patients
-            {/* <span className="blue_gradient">Patients</span> */}
-          </h2>
-        )}
-        {allPatientInfo.reverse().map((item, index) => (
-          <div
-            key={`link-${index}`}
-            onClick={() => {
-              setPatientInfo(item);
-              window.scrollTo(0, 0); // This line makes the page scroll to the top
-            }}
-            className="font_body mb-3 flex cursor-pointer rounded-md border bg-white p-3 px-3 py-2.5 pl-5 ring-1 hover:ring-slate-300 md:p-4 md:px-8 lg:w-[860px] no-print"
-          >
-            <div className="copy_btn">
-              <img
-                src={accountLogo}
-                alt="accountLogo_icon"
-                className="h-3 w-3"
-              />
-            </div>
-            <div className=" flex  w-1/3 flex-row justify-start  px-2">
-              <dt className="mr-5 text-sm  font-medium leading-6 text-gray-900">
-                ID:
-              </dt>
-              <dt className="text-sm leading-6 text-gray-700 sm:col-span-2 sm:mt-0">
-                {item.ID}
-              </dt>
-            </div>
-            <div className="flex w-2/3  flex-row px-2  sm:px-0">
-              <dt className="mr-5 hidden text-sm font-medium leading-6 text-gray-900 md:block">
-                Current State:
-              </dt>
-              <dd className="text-sm leading-6 text-gray-700 sm:col-span-2 sm:mt-0">
-                {item.Diagnosis}
-              </dd>
-            </div>
+    <>
+      <section className="lg:flex lg:items-center lg:justify-center">
+        <div className=" md:mx-0 md:p-0 ">
+          <br />
+          {allPatientInfo.length > 0 && (
+            <h2 className="header_logo cursor-pointer font-satoshi text-xl font-bold text-gray-600  hover:text-blue-600 no-print">
+              List of Patients
+              {/* <span className="blue_gradient">Patients</span> */}
+            </h2>
+          )}
+          {allPatientInfo.reverse().map((item, index) => (
             <div
-              className="delete flex h-6 w-8 items-center justify-center rounded-full bg-white text-black hover:bg-red-500"
-              onClick={(event) => {
-                if (item.ID) {
-                  handleDeletePatient(item.ID, event);
-                }
+              key={`link-${index}`}
+              onClick={() => {
+                setPatientInfo(item);
+                window.scrollTo(0, 0); // This line makes the page scroll to the top
               }}
+              className="font_body mb-3 flex cursor-pointer rounded-md border bg-white p-3 px-3 py-2.5 pl-5 ring-1 hover:ring-slate-300 md:p-4 md:px-8 lg:w-[860px] no-print"
             >
-              <svg
-                xmlns="http://www.w3.org/2000/svg"
-                className="h-4 w-4"
-                viewBox="0 0 20 20"
-                fill="currentColor"
-                aria-hidden="true"
-              >
-                <path
-                  fillRule="evenodd"
-                  d="M15.293 4.293a1 1 0 011.414 1.414L11.414 12l5.293 5.293a1 1 0 01-1.414 1.414L10 13.414l-5.293 5.293a1 1 0 01-1.414-1.414L8.586 12 3.293 6.707a1 1 0 111.414-1.414L10 10.586l5.293-5.293z"
-                  clipRule="evenodd"
-                />
-              </svg>
+              <div className="copy_btn">
+                <FaUser />
+              </div>
+              <div className=" flex  w-1/3 flex-row justify-start  px-2">
+                <dt className="mr-5 text-sm  font-medium leading-6 text-gray-900">
+                  ID:
+                </dt>
+                <dt className="text-sm leading-6 text-gray-700 sm:col-span-2 sm:mt-0">
+                  {item.ID}
+                </dt>
+              </div>
+              <div className="flex w-1/3  flex-row px-2  sm:px-0">
+                <dt className="mr-5 hidden text-sm font-medium leading-6 text-gray-900 md:block">
+                  Current State:
+                </dt>
+                <dd className="text-sm leading-6 text-gray-700 sm:col-span-2 sm:mt-0">
+                  {item.Diagnosis}
+                </dd>
+              </div>
+              <div className="flex w-1/3 flex-row justify-end space-x-2">
+                <button
+                    className="delete text-sm border p-2 rounded-lg text-gray-600 hover:text-red-500 hover:bg-gray-100 hover:border-red-500 no-print"
+                    onClick={(event) => {
+                      if (item.ID) {
+                        handleDeletePatient(item.ID, event);
+                      }
+                    }}>
+                  <FaTrash className="inline-block align-text-bottom" /> Remove
+                </button>
+                <button
+                    className="text-sm border p-2 rounded-lg text-red-500 hover:text-red-500 hover:bg-gray-100 hover:border-red-500 no-print"
+                    onClick={(event) => {
+                      if (item.ID) {
+                        handleOpenModal(item.ID, event);
+                      }
+                    }}
+                  >
+                    <FaBug className="inline-block align-text-bottom" /> Report Issue
+                </button>
+              </div>
             </div>
-          </div>
-        ))}
-      </div>
-    </section>
+          ))}
+        </div>
+      </section>
+      <Modal isOpen={isModalOpen.status} onClose={handleCloseModal} >
+        <FeedbackForm id={isModalOpen.id} />
+      </Modal>
+    </>
   );
 };
 
diff --git a/frontend/src/pages/PatientManager/PatientSummary.tsx b/frontend/src/pages/PatientManager/PatientSummary.tsx
index d7ceb878..5a32a3a9 100644
--- a/frontend/src/pages/PatientManager/PatientSummary.tsx
+++ b/frontend/src/pages/PatientManager/PatientSummary.tsx
@@ -3,7 +3,9 @@ import axios from "axios";
 import { PatientInfo } from "./PatientTypes";
 import Tooltip from "../../components/Tooltip";
 import TypingAnimation from "../../components/Header/components/TypingAnimation.tsx";
-import { FaPencilAlt, FaPrint, FaMinus } from "react-icons/fa";
+import { FaPencilAlt, FaPrint, FaMinus, FaBug } from "react-icons/fa";
+import FeedbackForm from "../Feedback/FeedbackForm"
+import Modal from "../../components/Modal/Modal";
 
 interface PatientSummaryProps {
   showSummary: boolean;
@@ -152,6 +154,18 @@ const PatientSummary = ({
     null
   );
 
+  const [isModalOpen, setIsModalOpen] = useState({status: false, id: ''});
+
+  const handleOpenModal = (id: string, event: React.MouseEvent) => {
+    event.stopPropagation();
+    setIsModalOpen({status: true, id: id});
+  };
+
+  const handleCloseModal = (event: React.MouseEvent) => {
+    event.stopPropagation();
+    setIsModalOpen({status: false, id: ''});
+  };
+
   useEffect(() => {
     if (isPatientDeleted) {
       setShowSummary(true);
@@ -257,134 +271,148 @@ const PatientSummary = ({
       <div className="md:mx-0 md:p-0">
         <br />
         {patientInfo.ID && (
-          <div className="justify-between lg:w-[860px]">
-            {!showSummary && (
-              <div className="font_body rounded-md border bg-white p-2 px-3 ring-1 hover:ring-slate-300 md:p-4 md:px-8 lg:w-[860px]">
-                <div
-                  onClick={handleClickSummary}
-                  className="flex items-center justify-between"
-                >
-                  <h2 className="text-xl font-bold text-gray-600 cursor-pointer header_logo font-satoshi hover:text-blue-600">
-                    Patient Summary
-                  </h2>
-                  <div className="items-center cursor-pointer">
-                    <svg
-                      xmlns="http://www.w3.org/2000/svg"
-                      className="w-4 h-4"
-                      fill="none"
-                      viewBox="0 0 24 24"
-                      stroke="currentColor"
-                      strokeWidth="2"
-                    >
-                      <path
-                        strokeLinecap="round"
-                        strokeLinejoin="round"
-                        d="M12 6v6m0 0v6m0-6h6m-6 0H6"
-                      />
-                    </svg>
-                  </div>
-                </div>
-              </div>
-            )}
-            {showSummary && (
-              <div className="p-2 px-3 bg-white border rounded-md font_body ring-1 hover:ring-slate-300 md:p-4 md:px-8">
-                <div>
+          <>
+            <div className="justify-between lg:w-[860px]">
+              {!showSummary && (
+                <div className="font_body rounded-md border bg-white p-2 px-3 ring-1 hover:ring-slate-300 md:p-4 md:px-8 lg:w-[860px]">
                   <div
-                    className="flex items-center justify-between text-xl"
+                    onClick={handleClickSummary}
+                    className="flex items-center justify-between"
                   >
-                    <h2 className="font-bold text-gray-600 cursor-pointer header_logo font-satoshi hover:text-blue-600">
-                      Summary
+                    <h2 className="text-xl font-bold text-gray-600 cursor-pointer header_logo font-satoshi hover:text-blue-600">
+                      Patient Summary
                     </h2>
-                    <aside className="flex items-center gap-4">
-                      <button onClick={handlePatientPrint} className="p-3 text-sm text-gray-900 border rounded-lg hover:text-gray-800 no-print">
-                        <FaPrint className="inline-block" /> Print
-                      </button>
-                      <button onClick={handlePatientEdit} className="p-3 text-sm text-gray-900 border rounded-lg hover:text-gray-800 no-print">
-                        <FaPencilAlt className="inline-block" /> Edit
-                      </button>
-                      <button
-                        onClick={handleClickSummary}
-                        className="p-3 text-sm text-gray-900 border rounded-lg hover:text-gray-800 no-print">
-                        <FaMinus className="inline-block" /> Hide
-                      </button>
-                    </aside>
+                    <div className="items-center cursor-pointer">
+                      <svg
+                        xmlns="http://www.w3.org/2000/svg"
+                        className="w-4 h-4"
+                        fill="none"
+                        viewBox="0 0 24 24"
+                        stroke="currentColor"
+                        strokeWidth="2"
+                      >
+                        <path
+                          strokeLinecap="round"
+                          strokeLinejoin="round"
+                          d="M12 6v6m0 0v6m0-6h6m-6 0H6"
+                        />
+                      </svg>
+                    </div>
                   </div>
                 </div>
-                <div className="mt-2 border-b border-gray-900/10">
-                  <h3 className="text-base leading-7 text-gray-900">
-                    <label className="font-semibold">Patient ID:</label>{" "}
-                    {patientInfo.ID}
-                  </h3>
-                  <p className="max-w-2xl mt-1 text-sm leading-6 text-gray-500">
-                    Patient details and application
-                  </p>
-                </div>
-                <div className="mt-3">
-                  <dl>
-                    <div className="flex-row justify-between py-6 border-b border-gray-900/10 md:flex">
-                      <div className="flex w-full md:p-0">
-                        <dt className="w-1/2 text-sm font-medium leading-6 text-gray-900">
-                          Current State:
+              )}
+              {showSummary && (
+                <div className="p-2 px-3 bg-white border rounded-md font_body ring-1 hover:ring-slate-300 md:p-4 md:px-8">
+                  <div>
+                    <div
+                      className="flex items-center justify-between text-xl"
+                    >
+                      <h2 className="font-bold text-gray-600 cursor-pointer header_logo font-satoshi hover:text-blue-600">
+                        Summary
+                      </h2>
+                      <aside className="flex items-center gap-4">
+                        <button onClick={handlePatientPrint} className="p-3 text-sm text-gray-900 border rounded-lg hover:text-gray-800 no-print">
+                          <FaPrint className="inline-block" /> Print
+                        </button>
+                        <button onClick={handlePatientEdit} className="p-3 text-sm text-gray-900 border rounded-lg hover:text-gray-800 no-print">
+                          <FaPencilAlt className="inline-block" /> Edit
+                        </button>
+                        <button
+                          onClick={handleClickSummary}
+                          className="p-3 text-sm text-gray-900 border rounded-lg hover:text-gray-800 no-print">
+                          <FaMinus className="inline-block" /> Hide
+                        </button>
+                        <button
+                          className="p-3 text-sm text-red-500 border rounded-lg hover:text-gray-800 no-print"
+                          onClick={(event) => {
+                            if (patientInfo.ID) {
+                              handleOpenModal(patientInfo.ID, event);
+                            }
+                          }}>
+                          <FaBug className="inline-block" /> Report Issue
+                        </button>
+                      </aside>
+                    </div>
+                  </div>
+                  <div className="mt-2 border-b border-gray-900/10">
+                    <h3 className="text-base leading-7 text-gray-900">
+                      <label className="font-semibold">Patient ID:</label>{" "}
+                      {patientInfo.ID}
+                    </h3>
+                    <p className="max-w-2xl mt-1 text-sm leading-6 text-gray-500">
+                      Patient details and application
+                    </p>
+                  </div>
+                  <div className="mt-3">
+                    <dl>
+                      <div className="flex-row justify-between py-6 border-b border-gray-900/10 md:flex">
+                        <div className="flex w-full md:p-0">
+                          <dt className="w-1/2 text-sm font-medium leading-6 text-gray-900">
+                            Current State:
+                          </dt>
+                          <dd className="text-sm leading-6 text-gray-700 sm:col-span-2 sm:mt-0">
+                            {patientInfo.Diagnosis}
+                          </dd>
+                        </div>
+                      </div>
+                      <div className="border-b border-gray-900/10 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-0 md:py-6">
+                        <dt className="flex mt-3 text-sm font-medium leading-6 text-gray-900">
+                          Risk Assessment:
                         </dt>
-                        <dd className="text-sm leading-6 text-gray-700 sm:col-span-2 sm:mt-0">
-                          {patientInfo.Diagnosis}
+                        <dd className="mt-2 text-sm text-gray-900 sm:col-span-2 sm:mt-0">
+                          <ul
+                            role="list"
+                            className="border border-gray-200 divide-y divide-gray-100 rounded-md"
+                          >
+                            {/* Risk Assessment Items */}
+                            {patientInfo.Psychotic === "Yes" && (
+                              <li className="flex items-center justify-between py-4 pl-4 pr-5 text-sm leading-4 border-b border-gray-900/10 hover:bg-indigo-100">
+                                Currently psychotic
+                              </li>
+                            )}
+                            {patientInfo.Suicide === "Yes" && (
+                              <li className="flex items-center justify-between py-4 pl-4 pr-5 text-sm leading-4 border-b border-gray-900/10 hover:bg-indigo-100">
+                                <Tooltip text="Lithium is the only medication on the market that has been proven to reduce suicidality in patients with bipolar disorder, so it will be shown at the top of the suggested medications list.">
+                                  Patient has a history of suicide attempts
+                                  <span className="ml-1 material-symbols-outlined">
+                                    info
+                                  </span>
+                                </Tooltip>
+                              </li>
+                            )}
+                            {/* Add other risk assessment items similarly */}
+                          </ul>
                         </dd>
                       </div>
-                    </div>
-                    <div className="border-b border-gray-900/10 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-0 md:py-6">
-                      <dt className="flex mt-3 text-sm font-medium leading-6 text-gray-900">
-                        Risk Assessment:
-                      </dt>
-                      <dd className="mt-2 text-sm text-gray-900 sm:col-span-2 sm:mt-0">
-                        <ul
-                          role="list"
-                          className="border border-gray-200 divide-y divide-gray-100 rounded-md"
-                        >
-                          {/* Risk Assessment Items */}
-                          {patientInfo.Psychotic === "Yes" && (
-                            <li className="flex items-center justify-between py-4 pl-4 pr-5 text-sm leading-4 border-b border-gray-900/10 hover:bg-indigo-100">
-                              Currently psychotic
-                            </li>
-                          )}
-                          {patientInfo.Suicide === "Yes" && (
-                            <li className="flex items-center justify-between py-4 pl-4 pr-5 text-sm leading-4 border-b border-gray-900/10 hover:bg-indigo-100">
-                              <Tooltip text="Lithium is the only medication on the market that has been proven to reduce suicidality in patients with bipolar disorder, so it will be shown at the top of the suggested medications list.">
-                                Patient has a history of suicide attempts
-                                <span className="ml-1 material-symbols-outlined">
-                                  info
-                                </span>
-                              </Tooltip>
-                            </li>
-                          )}
-                          {/* Add other risk assessment items similarly */}
-                        </ul>
-                      </dd>
-                    </div>
-                    <div className="flex flex-col justify-between py-6 border-b border-gray-900/10 sm:px-0 md:flex-row">
-                      <br />
-                      <div className="flex w-full">
-                        <label
-                          htmlFor="current-state"
-                          className="flex block w-1/2 text-sm font-medium leading-6 text-gray-900"
-                        >
-                          Prior medications
-                          <Tooltip text="Any bipolar medications entered here will not appear in the list of suggested medications, as they have already been tried without success.">
-                            <span className="ml-1 material-symbols-outlined">
-                              info
-                            </span>
-                          </Tooltip>
-                        </label>
-                        <dt className="text-sm leading-6 text-gray-700">
-                          {patientInfo.PriorMedications}
-                        </dt>
+                      <div className="flex flex-col justify-between py-6 border-b border-gray-900/10 sm:px-0 md:flex-row">
+                        <br />
+                        <div className="flex w-full">
+                          <label
+                            htmlFor="current-state"
+                            className="flex block w-1/2 text-sm font-medium leading-6 text-gray-900"
+                          >
+                            Prior medications
+                            <Tooltip text="Any bipolar medications entered here will not appear in the list of suggested medications, as they have already been tried without success.">
+                              <span className="ml-1 material-symbols-outlined">
+                                info
+                              </span>
+                            </Tooltip>
+                          </label>
+                          <dt className="text-sm leading-6 text-gray-700">
+                            {patientInfo.PriorMedications}
+                          </dt>
+                        </div>
                       </div>
-                    </div>
-                    {renderMedicationsSection()}
-                  </dl>
+                      {renderMedicationsSection()}
+                    </dl>
+                  </div>
                 </div>
-              </div>
-            )}
-          </div>
+              )}
+            </div>
+            <Modal isOpen={isModalOpen.status} onClose={handleCloseModal} >
+              <FeedbackForm id={isModalOpen.id} />
+            </Modal>
+          </>
         )}
       </div>
     </section>