diff --git a/src/screens/EventVolunteers/Volunteers/VolunteerViewModal.tsx b/src/screens/EventVolunteers/Volunteers/VolunteerViewModal.tsx
index 830bacf8cc..96d58ca614 100644
--- a/src/screens/EventVolunteers/Volunteers/VolunteerViewModal.tsx
+++ b/src/screens/EventVolunteers/Volunteers/VolunteerViewModal.tsx
@@ -52,22 +52,22 @@ const VolunteerViewModal: React.FC<InterfaceVolunteerViewModal> = ({
   const { user, hasAccepted, hoursVolunteered, groups } = volunteer;
 
   return (
-    <Modal className={styles.volunteerCreateModal} onHide={hide} show={isOpen}>
+    <Modal className={styles.volunteerViewModal} onHide={hide} show={isOpen}>
       <Modal.Header>
-        <p className={styles.titlemodal}>{t('volunteerDetails')}</p>
+        <p className={styles.modalTitle}>{t('volunteerDetails')}</p>
         <Button
           variant="danger"
           onClick={hide}
-          className={styles.modalCloseBtn}
+          className={styles.modalCloseButton}
           data-testid="modalCloseBtn"
         >
           <i className="fa fa-times"></i>
         </Button>
       </Modal.Header>
       <Modal.Body>
-        <Form className="p-3">
+        <Form className={styles.modalForm}>
           {/* Volunteer Name & Avatar */}
-          <Form.Group className="mb-3">
+          <Form.Group className={styles.formGroup}>
             <FormControl fullWidth>
               <TextField
                 label={t('volunteer')}
@@ -83,14 +83,14 @@ const VolunteerViewModal: React.FC<InterfaceVolunteerViewModal> = ({
                           src={user.image}
                           alt="Volunteer"
                           data-testid="volunteer_image"
-                          className={styles.TableImages}
+                          className={styles.tableImage}
                         />
                       ) : (
                         <div className={styles.avatarContainer}>
                           <Avatar
                             key={user._id + '1'}
                             containerStyle={styles.imageContainer}
-                            avatarStyle={styles.TableImages}
+                            avatarStyle={styles.tableImage}
                             dataTestId="volunteer_avatar"
                             name={user.firstName + ' ' + user.lastName}
                             alt={user.firstName + ' ' + user.lastName}
@@ -104,7 +104,7 @@ const VolunteerViewModal: React.FC<InterfaceVolunteerViewModal> = ({
             </FormControl>
           </Form.Group>
           {/* Status and hours volunteered */}
-          <Form.Group className="d-flex gap-3 mx-auto mb-2">
+          <Form.Group className={styles.statusGroup}>
             <TextField
               label={t('status')}
               fullWidth
@@ -113,20 +113,18 @@ const VolunteerViewModal: React.FC<InterfaceVolunteerViewModal> = ({
                 startAdornment: (
                   <>
                     {hasAccepted ? (
-                      <TaskAlt color="success" className="me-2" />
+                      <TaskAlt color="success" className={styles.statusIcon} />
                     ) : (
-                      <HistoryToggleOff color="warning" className="me-2" />
+                      <HistoryToggleOff
+                        color="warning"
+                        className={styles.statusIcon}
+                      />
                     )}
                   </>
                 ),
-                style: {
-                  color: hasAccepted ? 'green' : '#ed6c02',
-                },
-              }}
-              inputProps={{
-                style: {
-                  WebkitTextFillColor: hasAccepted ? 'green' : '#ed6c02',
-                },
+                className: hasAccepted
+                  ? styles.acceptedStatus
+                  : styles.pendingStatus,
               }}
               disabled
             />
@@ -134,7 +132,7 @@ const VolunteerViewModal: React.FC<InterfaceVolunteerViewModal> = ({
             <TextField
               label={t('hoursVolunteered')}
               variant="outlined"
-              className={`${styles.noOutline} w-100`}
+              className={`${styles.noOutline} ${styles.hoursField}`}
               value={hoursVolunteered ?? '-'}
               disabled
             />
@@ -142,13 +140,7 @@ const VolunteerViewModal: React.FC<InterfaceVolunteerViewModal> = ({
           {/* Table for Associated Volunteer Groups */}
           {groups && groups.length > 0 && (
             <Form.Group>
-              <Form.Label
-                className="fw-lighter ms-2 mb-0"
-                style={{
-                  fontSize: '0.8rem',
-                  color: 'grey',
-                }}
-              >
+              <Form.Label className={styles.groupsLabel}>
                 Volunteer Groups Joined
               </Form.Label>
 
@@ -160,9 +152,13 @@ const VolunteerViewModal: React.FC<InterfaceVolunteerViewModal> = ({
                 <Table aria-label="group table">
                   <TableHead>
                     <TableRow>
-                      <TableCell className="fw-bold">Sr. No.</TableCell>
-                      <TableCell className="fw-bold">Group Name</TableCell>
-                      <TableCell className="fw-bold" align="center">
+                      <TableCell className={styles.tableHeader}>
+                        Sr. No.
+                      </TableCell>
+                      <TableCell className={styles.tableHeader}>
+                        Group Name
+                      </TableCell>
+                      <TableCell className={styles.tableHeader} align="center">
                         No. of Members
                       </TableCell>
                     </TableRow>
@@ -171,12 +167,7 @@ const VolunteerViewModal: React.FC<InterfaceVolunteerViewModal> = ({
                     {groups.map((group, index) => {
                       const { _id, name, volunteers } = group;
                       return (
-                        <TableRow
-                          key={_id}
-                          sx={{
-                            '&:last-child td, &:last-child th': { border: 0 },
-                          }}
-                        >
+                        <TableRow key={_id} className={styles.tableRow}>
                           <TableCell component="th" scope="row">
                             {index + 1}
                           </TableCell>
@@ -199,4 +190,5 @@ const VolunteerViewModal: React.FC<InterfaceVolunteerViewModal> = ({
     </Modal>
   );
 };
+
 export default VolunteerViewModal;
diff --git a/src/style/app.module.css b/src/style/app.module.css
index 65e80a2ddd..25e5c4b678 100644
--- a/src/style/app.module.css
+++ b/src/style/app.module.css
@@ -83,6 +83,7 @@
   --search-button-bg: #a8c7fa;
   --search-button-border: var(--brown-color);
   --bs-primary: #0056b3;
+  --bs-warning: #ffc107;
   --bs-white: #fff;
   --bs-gray-600: #4b5563;
   --bs-gray-400: #9ca3af;
@@ -4117,3 +4118,73 @@ button[data-testid='createPostBtn'] {
   overflow-y: scroll;
   overflow-x: hidden;
 }
+
+/* VolunteerViewModal.tsx */
+
+.modalTitle {
+  margin: 0;
+}
+
+.modalForm {
+  padding: 1rem;
+}
+
+.formGroup {
+  margin-bottom: 1rem;
+}
+
+.tableImage {
+  width: 40px;
+  height: 40px;
+  border-radius: 50%;
+  margin-right: 8px;
+}
+
+.statusGroup {
+  display: flex;
+  gap: 1rem;
+  margin: 0 auto;
+  margin-bottom: 0.5rem;
+  role: 'status';
+}
+
+.statusIcon {
+  margin-right: 0.5rem;
+}
+
+.acceptedStatus {
+  color: var(--bs-primary);
+  -webkit-text-fill-color: var(--bs-primary);
+  outline: 1px solid currentColor;
+  border-radius: 4px;
+  padding: 2px 4px;
+}
+
+.pendingStatus {
+  color: var(--bs-warning);
+  -webkit-text-fill-color: var(--bs-warning);
+  outline: 1px solid currentColor;
+  border-radius: 4px;
+  padding: 2px 4px;
+}
+
+.hoursField {
+  width: 100%;
+}
+
+.groupsLabel {
+  font-weight: lighter;
+  margin-left: 0.5rem;
+  margin-bottom: 0;
+  font-size: 0.8rem;
+  color: var(--bs-secondary);
+}
+
+.tableHeader {
+  font-weight: bold;
+}
+
+.tableRow:last-child td,
+.tableRow:last-child th {
+  border: 0;
+}