diff --git a/package-lock.json b/package-lock.json
index 45a5ce30..63d1a2eb 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -4967,6 +4967,95 @@
         "url": "https://github.com/sponsors/gregberge"
       }
     },
+    "node_modules/@testing-library/dom": {
+      "version": "10.1.0",
+      "resolved": "https://registry.npmjs.org/@testing-library/dom/-/dom-10.1.0.tgz",
+      "integrity": "sha512-wdsYKy5zupPyLCW2Je5DLHSxSfbIp6h80WoHOQc+RPtmPGA52O9x5MJEkv92Sjonpq+poOAtUKhh1kBGAXBrNA==",
+      "peer": true,
+      "dependencies": {
+        "@babel/code-frame": "^7.10.4",
+        "@babel/runtime": "^7.12.5",
+        "@types/aria-query": "^5.0.1",
+        "aria-query": "5.3.0",
+        "chalk": "^4.1.0",
+        "dom-accessibility-api": "^0.5.9",
+        "lz-string": "^1.5.0",
+        "pretty-format": "^27.0.2"
+      },
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@testing-library/dom/node_modules/ansi-styles": {
+      "version": "4.3.0",
+      "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
+      "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
+      "peer": true,
+      "dependencies": {
+        "color-convert": "^2.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/ansi-styles?sponsor=1"
+      }
+    },
+    "node_modules/@testing-library/dom/node_modules/chalk": {
+      "version": "4.1.2",
+      "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
+      "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==",
+      "peer": true,
+      "dependencies": {
+        "ansi-styles": "^4.1.0",
+        "supports-color": "^7.1.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/chalk?sponsor=1"
+      }
+    },
+    "node_modules/@testing-library/dom/node_modules/color-convert": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
+      "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
+      "peer": true,
+      "dependencies": {
+        "color-name": "~1.1.4"
+      },
+      "engines": {
+        "node": ">=7.0.0"
+      }
+    },
+    "node_modules/@testing-library/dom/node_modules/color-name": {
+      "version": "1.1.4",
+      "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
+      "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
+      "peer": true
+    },
+    "node_modules/@testing-library/dom/node_modules/has-flag": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
+      "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
+      "peer": true,
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/@testing-library/dom/node_modules/supports-color": {
+      "version": "7.2.0",
+      "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
+      "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
+      "peer": true,
+      "dependencies": {
+        "has-flag": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
     "node_modules/@testing-library/jest-dom": {
       "version": "5.17.0",
       "resolved": "https://registry.npmjs.org/@testing-library/jest-dom/-/jest-dom-5.17.0.tgz",
diff --git a/src/Components/user/FaqComponenet.jsx b/src/Components/user/FaqComponenet.jsx
index f3de7006..1761ea7c 100644
--- a/src/Components/user/FaqComponenet.jsx
+++ b/src/Components/user/FaqComponenet.jsx
@@ -21,14 +21,12 @@ const Accordion = styled((props) => (
     backgroundColor: 'rgba(255, 255, 255, 0.6)', // Adjust the opacity as needed
 }));
 
-
 const AccordionSummary = styled((props) => (
     <MuiAccordionSummary
         expandIcon={<ArrowForwardIosSharpIcon sx={{ fontSize: '0.6rem' }} />}
         {...props}
     />
 ))(({ theme }) => ({
-
     flexDirection: 'row-reverse',
     '& .MuiAccordionSummary-expandIconWrapper.Mui-expanded': {
         transform: 'rotate(90deg)',
@@ -42,6 +40,18 @@ const AccordionDetails = styled(MuiAccordionDetails)(({ theme }) => ({
     padding: theme.spacing(2),
     borderTop: '1px solid rgba(0, 0, 0, .125)',
     textAlign: 'left',
+    '@media (max-width: 600px)': {
+        padding: theme.spacing(1),
+    },
+}));
+
+const Image = styled('img')(({ theme }) => ({
+    borderRadius: '10px',
+    width: '100%',
+    height: 'auto',
+    '@media (max-width: 600px)': {
+        width: '100%',
+    },
 }));
 
 export default function CustomizedAccordions() {
@@ -55,37 +65,43 @@ export default function CustomizedAccordions() {
         <div>
             <Accordion expanded={expanded === 'panel1'} onChange={handleChange('panel1')}>
                 <AccordionSummary aria-controls="panel2d-content" id="panel1d-header">
-                    <Typography>Determine how badly the animal is injured</Typography>
+                    <Typography variant="body1" sx={{ fontSize: { xs: '1rem', sm: '1.25rem' } }}>
+                        Determine how badly the animal is injured
+                    </Typography>
                 </AccordionSummary>
                 <AccordionDetails>
-                    <Typography>
+                    <Typography variant="body2" sx={{ fontSize: { xs: '0.875rem', sm: '1rem' } }}>
                         Some injuries need urgent care, like severe bleeding or serious distress. Minor injuries, like a mobile animal without distress, can be treated at home. Assess the situation and decide if the animal needs immediate medical attention based on its behavior.
-                            <img src="./images/determining.jpeg" alt="" style={{ borderRadius: '10px' }} />
+                        <Image src="./images/determining.jpeg" alt="Determining injury" />
                     </Typography>
                 </AccordionDetails>
             </Accordion>
             <Accordion expanded={expanded === 'panel2'} onChange={handleChange('panel2')}>
                 <AccordionSummary aria-controls="panel1d-content" id="panel2d-header">
-                    <Typography>Provide first aid, if possible </Typography>
+                    <Typography variant="body1" sx={{ fontSize: { xs: '1rem', sm: '1.25rem' } }}>
+                        Provide first aid, if possible
+                    </Typography>
                 </AccordionSummary>
                 <AccordionDetails>
-                    <Typography>
+                    <Typography variant="body2" sx={{ fontSize: { xs: '0.875rem', sm: '1rem' } }}>
                         For minor injuries, clean cuts with soap and water, cover with a bandage. Treat minor burns with cool water and a dry cloth. If unconscious, check for injuries and provide aid as needed.
-                        <img src="./images/petdoc.webp" alt="" style={{ borderRadius: '10px' }} />
+                        <Image src="./images/petdoc.webp" alt="First aid" />
                     </Typography>
                 </AccordionDetails>
             </Accordion>
             <Accordion expanded={expanded === 'panel3'} onChange={handleChange('panel3')}>
                 <AccordionSummary aria-controls="panel3d-content" id="panel3d-header">
-                    <Typography>Approach the streetie slowly and calmly</Typography>
+                    <Typography variant="body1" sx={{ fontSize: { xs: '1rem', sm: '1.25rem' } }}>
+                        Approach the streetie slowly and calmly
+                    </Typography>
                 </AccordionSummary>
                 <AccordionDetails>
-                    <Typography>
+                    <Typography variant="body2" sx={{ fontSize: { xs: '0.875rem', sm: '1rem' } }}>
                         If a stray dog shows aggression like growling, keep your distance and seek professional help. Approach calmly if the dog seems friendly, speaking softly to reassure it.
-                        <img src="./images/caution.jpeg" alt="" style={{ borderRadius: '10px' }} />
+                        <Image src="./images/caution.jpeg" alt="Approach calmly" />
                     </Typography>
                 </AccordionDetails>
             </Accordion>
         </div>
     );
-}
\ No newline at end of file
+}
diff --git a/src/pages/user/ReportIncidentPages/SuccessPage.jsx b/src/pages/user/ReportIncidentPages/SuccessPage.jsx
index d2881277..6b1671ac 100644
--- a/src/pages/user/ReportIncidentPages/SuccessPage.jsx
+++ b/src/pages/user/ReportIncidentPages/SuccessPage.jsx
@@ -2,74 +2,80 @@ import React from "react";
 import { Link } from "react-router-dom";
 import CustomizedAccordions from "../../../Components/user/FaqComponenet";
 import Button from "../../../Components/shared/Button";
-const csrftoken = localStorage.getItem('csrftoken');
 
+const csrftoken = localStorage.getItem('csrftoken');
 
 function SuccessPage() {
-
-  // console.log(csrftoken)
-
-  //backend endpoint required to fetch 3 closest NGO info
+  // backend endpoint required to fetch 3 closest NGO info
   const nearNGO = [
     ["name1:  ", "number1"],
     ["name2:  ", "number2"],
     ["name3:  ", "number3"]
-  ]
+  ];
 
   return (
-    <div className="z-[-2] mb-10 min-h-screen max-h-fit bg-custom-gradient top-0 w-full flex items-center">
-      <div className="pt-7 w-full text-center mb-10 flex flex-col items-center gap-5 justify-center">
-        {/* <h2 className="text-[#40025D] w-screen text-5xl font-normal font-['Bayon'] tracking-widest drop-shadow-2xl">Success</h2> */}
-        <div className=" px-10 rounded-[50%] bg-gradient-to-br from-blue-400 to-blue-800 shadow-dashBoardCardImageShadow flex text-white items-end justify-center text-[7rem] ">✓</div>
-        <p className="text-center text-opacity-90 text-2xl font-breeSerif drop-shadow-2xl tracking-widest font-bold">Your report has been submitted successfully. </p>
-        <div className="flex flex-row items-center w-full justify-center gap-4">
+    <div className="z-[-2] mb-10 min-h-screen bg-custom-gradient flex items-center justify-center p-4 md:p-10">
+      <div className="pt-7 w-full max-w-4xl text-center mb-10 flex flex-col items-center gap-5">
+        <div className="px-10 rounded-full bg-gradient-to-br from-blue-400 to-blue-800 shadow-dashBoardCardImageShadow flex text-white items-end justify-center text-[4rem] md:text-[7rem]">
+          ✓
+        </div>
+        <p className="text-center text-opacity-90 text-xl md:text-2xl font-breeSerif drop-shadow-2xl tracking-widest font-bold">
+          Your report has been submitted successfully.
+        </p>
+        <div className="flex flex-wrap items-center w-full justify-center gap-4">
           <Button
             text={
               <Link to="/">
                 Home
               </Link>
             }
-            clas="bg-gradient-to-b from-blue-600 to-blue-800 px-7 py-3 font-semibold"
+            clas="bg-gradient-to-b from-blue-600 to-blue-800 px-4 py-2 md:px-7 md:py-3 text-sm md:text-base font-semibold"
           />
-          {
-            csrftoken ? (
-              <Button
-                text={
-                  <Link to="/view-reports">
-                    View Reports
-                  </Link>
-                }
-                clas="px-7 py-3 font-semibold"
-              />
-            ) : (
-              <Button
-                text={
-                  <Link to="/login">
-                    Login
-                  </Link>
-                }
-                clas="px-7 py-3 font-semibold"
-              />
-            )
-          }
+          {csrftoken ? (
+            <Button
+              text={
+                <Link to="/view-reports">
+                  View Reports
+                </Link>
+              }
+              clas="px-4 py-2 md:px-7 md:py-3 text-sm md:text-base font-semibold"
+            />
+          ) : (
+            <Button
+              text={
+                <Link to="/login">
+                  Login
+                </Link>
+              }
+              clas="px-4 py-2 md:px-7 md:py-3 text-sm md:text-base font-semibold"
+            />
+          )}
         </div>
-        <div className="w-[92%] mt-12 bg-red-50 rounded-xl bg-opacity-75 ">
-          <div className=" flex flex-row items-center w-full justify-start">
-            <h1 className="pl-5 mt-1 mb-1 text-2xl text-bold tracking-wider text-red-900 font-breeSerif ">Contact the nearest NGO if you can!</h1>
+        <div className="w-full md:w-[92%] bg-red-50 rounded-xl bg-opacity-75 p-5 md:p-8">
+          <div className="flex flex-row items-center w-full justify-start">
+            <h1 className="mt-1 mb-1 text-xl md:text-2xl font-bold tracking-wider text-red-900 font-breeSerif">
+              Contact the nearest NGO if you can!
+            </h1>
           </div>
           <div>
-            <h3 className="pl-5 mb-2 text-left">These are the closest NGOs. Let them know a streetie needs help!</h3>
-            <ol className="pl-20 mb-5 font-bold text-lg font-sans text-left list-decimal">
+            <h3 className="mb-2 text-left">
+              These are the closest NGOs. Let them know a streetie needs help!
+            </h3>
+            <ol className="pl-5 md:pl-10 mb-5 font-bold text-lg font-sans text-left list-decimal">
               <li>{nearNGO[0]}</li>
               <li>{nearNGO[1]}</li>
               <li>{nearNGO[2]}</li>
             </ol>
-            <p className="pl-5 mb-2 text-left">Doing this can let the animal receive help quicker.</p>
+            <p className="mb-2 text-left">
+              Doing this can let the animal receive help quicker.
+            </p>
           </div>
         </div>
-        <div className="w-[92%] mt-12 ">
-          <div className=" flex flex-row items-center w-full justify-start">
-            <h1 className="pl-2 mb-1 text-2xl text-bold tracking-wider  font-breeSerif ">Here's what you can do in the meantime</h1>
+        <div className="w-full md:w-[92%] mt-12">
+          <div className="flex flex-row items-center w-full justify-start">
+            <h1 className="mb-3 text-xl md:text-2xl font-bold tracking-wider font-breeSerif">
+              Here's what you can do in the meantime
+            </h1>
           </div>
           <CustomizedAccordions />
         </div>