RANGER-4643 : Upgrade react-bootstrap library for GDS UI.
diff --git a/security-admin/src/main/webapp/react-webapp/src/styles/style.css b/security-admin/src/main/webapp/react-webapp/src/styles/style.css
index f47d851..e6b767f 100644
--- a/security-admin/src/main/webapp/react-webapp/src/styles/style.css
+++ b/security-admin/src/main/webapp/react-webapp/src/styles/style.css
@@ -2669,13 +2669,15 @@
 }
 
 .gds-request-content {
-  width: 920px;
-  margin: 0 auto;
+  width: 1020px;
+  margin-left: 120px;
+  margin-top: 40px;
 }
 
 .gds-access-content {
   max-width: 1140px;
-  margin: 0 auto;
+  margin-left: 120px;
+  margin-top: 40px;
 }
 
 .gds-content-margin {
@@ -2923,25 +2925,6 @@
   display: none; /* Hide the down arrow */
 }
 
-.gds-requested-status {
-  background: #ffc107;
-}
-
-.gds-granted-status {
-  background: #28a745;
-  color: #ffffff;
-}
-
-.gds-active-status {
-  background: #007bff;
-  color: #ffffff;
-}
-
-.gds-denied-status {
-  background: #dc3545;
-  color: #ffffff;
-}
-
 .w-50 {
   width: 50% !important;
 }
diff --git a/security-admin/src/main/webapp/react-webapp/src/utils/XAEnums.js b/security-admin/src/main/webapp/react-webapp/src/utils/XAEnums.js
index 0c57eaf..64fef3e 100755
--- a/security-admin/src/main/webapp/react-webapp/src/utils/XAEnums.js
+++ b/security-admin/src/main/webapp/react-webapp/src/utils/XAEnums.js
@@ -899,7 +899,8 @@
     title: "Policy (Time details)",
     lastUpdated: "Last update time of policies",
     downloadTime: "Last policies download time (sync-up with Ranger).",
-    activeTime: "Last time the downloaded policies became active for enforcement.",
+    activeTime:
+      "Last time the downloaded policies became active for enforcement.",
     downloadTimeDelayMsg:
       "Latest update in policies are not yet downloaded (sync-up with Ranger).",
     activationTimeDelayMsg:
@@ -918,9 +919,9 @@
   GDS: {
     title: "GDS (Time details)",
     lastUpdated: "Last update time of GDS info.",
-    downloadTime:
-      "Last GDS info download time (sync-up with Ranger).",
-    activeTime: "Last time the downloaded GDS info became active for enforcement.",
+    downloadTime: "Last GDS info download time (sync-up with Ranger).",
+    activeTime:
+      "Last time the downloaded GDS info became active for enforcement.",
     downloadTimeDelayMsg:
       "Latest update in GDS info is not yet downloaded (sync-up with Ranger).",
     activationTimeDelayMsg:
@@ -929,8 +930,7 @@
   Role: {
     title: "Role (Time details)",
     lastUpdated: "Last updated time of roles.",
-    downloadTime:
-      "Last roles download time (sync-up with Ranger).",
+    downloadTime: "Last roles download time (sync-up with Ranger).",
     activeTime: "Last time the downloaded roles became active for enforcement.",
     downloadTimeDelayMsg:
       "Latest update in roles are not yet downloaded (sync-up with Ranger).",
@@ -938,3 +938,10 @@
       "Latest update in roles are not yet active for enforcement."
   }
 };
+
+export const statusClassMap = {
+  REQUESTED: "badge bg-warning",
+  GRANTED: "badge bg-success",
+  ACTIVE: "badge bg-primary",
+  DENIED: "badge bg-danger"
+};
diff --git a/security-admin/src/main/webapp/react-webapp/src/views/AuditEvent/AdminLogs/DataShareInDatasetLogs.jsx b/security-admin/src/main/webapp/react-webapp/src/views/AuditEvent/AdminLogs/DataShareInDatasetLogs.jsx
index 61d7bcb..05d505d 100644
--- a/security-admin/src/main/webapp/react-webapp/src/views/AuditEvent/AdminLogs/DataShareInDatasetLogs.jsx
+++ b/security-admin/src/main/webapp/react-webapp/src/views/AuditEvent/AdminLogs/DataShareInDatasetLogs.jsx
@@ -47,7 +47,7 @@
                 {val && val.previousValue && !isEmpty(val.previousValue) ? (
                   isEmpty(val.newValue) ? (
                     <h6>
-                      <Badge className="d-inline mr-1" variant="danger">
+                      <Badge className="d-inline me-1" bg="danger">
                         {getfilteredoldval(val.previousValue)}
                       </Badge>
                     </h6>
@@ -66,7 +66,7 @@
                 {val && val.newValue && !isEmpty(val.newValue) ? (
                   isEmpty(val.previousValue) ? (
                     <h6>
-                      <Badge className="d-inline mr-1" variant="success">
+                      <Badge className="d-inline me-1" bg="success">
                         {getfilterednewval(val.newValue)}
                       </Badge>
                     </h6>
@@ -91,7 +91,8 @@
     <div>
       {/* CREATE  */}
       {action == "create" &&
-        objectClassType == ClassTypes.CLASS_TYPE_RANGER_DATA_SHARE_IN_DATASET.value && (
+        objectClassType ==
+          ClassTypes.CLASS_TYPE_RANGER_DATA_SHARE_IN_DATASET.value && (
           <div>
             <div className="font-weight-bolder">Name : {objectName}</div>
             <div className="font-weight-bolder">
@@ -99,9 +100,11 @@
               India Standard Time
             </div>
             <div className="font-weight-bolder">Created By: {owner}</div>
-            <h5 className="bold wrap-header m-t-sm">DataShareInDataset Detail:</h5>
+            <h5 className="bold wrap-header m-t-sm">
+              DataShareInDataset Detail:
+            </h5>
 
-            <Table className="table table-striped table-bordered w-50">
+            <Table className="table table-bordered w-50">
               <thead className="thead-light">
                 <tr>
                   <th>Fields</th>
@@ -114,10 +117,14 @@
                 return (
                   <tbody>
                     <tr key={dataShareInDataset.id}>
-                      <td className="table-warning">{dataShareInDataset.attributeName}</td>
+                      <td className="table-warning">
+                        {dataShareInDataset.attributeName}
+                      </td>
 
                       <td className="table-warning">
-                        {!isEmpty(dataShareInDataset.newValue) ? dataShareInDataset.newValue : "--"}
+                        {!isEmpty(dataShareInDataset.newValue)
+                          ? dataShareInDataset.newValue
+                          : "--"}
                       </td>
                     </tr>
                   </tbody>
@@ -130,7 +137,8 @@
       {/* UPDATE */}
 
       {action == "update" &&
-        objectClassType == ClassTypes.CLASS_TYPE_RANGER_DATA_SHARE_IN_DATASET.value && (
+        objectClassType ==
+          ClassTypes.CLASS_TYPE_RANGER_DATA_SHARE_IN_DATASET.value && (
           <div>
             <div className="row">
               <div className="col-md-6">
@@ -141,15 +149,17 @@
                 </div>
                 <div className="font-weight-bolder">Updated By: {owner}</div>
               </div>
-              <div className="col-md-6 text-right">
+              <div className="col-md-6 text-end">
                 <div className="bg-success legend"></div> {" Added "}
                 <div className="bg-danger legend"></div> {" Deleted "}
               </div>
             </div>
             <br />
-            <h5 className="bold wrap-header m-t-sm">DataShareInDataset Detail:</h5>
+            <h5 className="bold wrap-header m-t-sm">
+              DataShareInDataset Detail:
+            </h5>
 
-            <Table className="table  table-bordered table-striped w-75 ">
+            <Table className="table  table-bordered w-75 ">
               <thead className="thead-light">
                 <tr>
                   <th>Fields</th>
@@ -164,7 +174,8 @@
         )}
       {/* DELETE  */}
       {action == "delete" &&
-        objectClassType == ClassTypes.CLASS_TYPE_RANGER_DATA_SHARE_IN_DATASET.value && (
+        objectClassType ==
+          ClassTypes.CLASS_TYPE_RANGER_DATA_SHARE_IN_DATASET.value && (
           <div>
             <div className="font-weight-bolder">Name : {objectName}</div>
             <div className="font-weight-bolder">
@@ -174,9 +185,11 @@
             <div className="font-weight-bolder">Created By: {owner} </div>
             <div className="font-weight-bolder">Deleted By: {owner} </div>
             <br />
-            <h5 className="bold wrap-header m-t-sm">DataShareInDataset Details:</h5>
+            <h5 className="bold wrap-header m-t-sm">
+              DataShareInDataset Details:
+            </h5>
 
-            <Table className="table table-striped table-bordered w-50">
+            <Table className="table table-bordered w-50">
               <thead className="thead-light">
                 <tr>
                   <th>Fields</th>
@@ -187,9 +200,13 @@
                 return (
                   <tbody>
                     <tr>
-                      <td className="table-warning">{dataShareInDataset.attributeName}</td>
                       <td className="table-warning">
-                        {!isEmpty(dataShareInDataset.previousValue) ? dataShareInDataset.previousValue : "--"}
+                        {dataShareInDataset.attributeName}
+                      </td>
+                      <td className="table-warning">
+                        {!isEmpty(dataShareInDataset.previousValue)
+                          ? dataShareInDataset.previousValue
+                          : "--"}
                       </td>
                     </tr>
                   </tbody>
diff --git a/security-admin/src/main/webapp/react-webapp/src/views/AuditEvent/AdminLogs/DataShareLogs.jsx b/security-admin/src/main/webapp/react-webapp/src/views/AuditEvent/AdminLogs/DataShareLogs.jsx
index b35c0f4..f4b7ff7 100644
--- a/security-admin/src/main/webapp/react-webapp/src/views/AuditEvent/AdminLogs/DataShareLogs.jsx
+++ b/security-admin/src/main/webapp/react-webapp/src/views/AuditEvent/AdminLogs/DataShareLogs.jsx
@@ -47,7 +47,7 @@
                 {val && val.previousValue && !isEmpty(val.previousValue) ? (
                   isEmpty(val.newValue) ? (
                     <h6>
-                      <Badge className="d-inline mr-1" variant="danger">
+                      <Badge className="d-inline me-1" bg="danger">
                         {getfilteredoldval(val.previousValue)}
                       </Badge>
                     </h6>
@@ -66,7 +66,7 @@
                 {val && val.newValue && !isEmpty(val.newValue) ? (
                   isEmpty(val.previousValue) ? (
                     <h6>
-                      <Badge className="d-inline mr-1" variant="success">
+                      <Badge className="d-inline me-1" bg="success">
                         {getfilterednewval(val.newValue)}
                       </Badge>
                     </h6>
@@ -101,7 +101,7 @@
             <div className="font-weight-bolder">Created By: {owner}</div>
             <h5 className="bold wrap-header m-t-sm">DataShare Detail:</h5>
 
-            <Table className="table table-striped table-bordered w-50">
+            <Table className="table table-bordered w-50">
               <thead className="thead-light">
                 <tr>
                   <th>Fields</th>
@@ -114,10 +114,14 @@
                 return (
                   <tbody>
                     <tr key={dataShare.id}>
-                      <td className="table-warning">{dataShare.attributeName}</td>
+                      <td className="table-warning">
+                        {dataShare.attributeName}
+                      </td>
 
                       <td className="table-warning">
-                        {!isEmpty(dataShare.newValue) ? dataShare.newValue : "--"}
+                        {!isEmpty(dataShare.newValue)
+                          ? dataShare.newValue
+                          : "--"}
                       </td>
                     </tr>
                   </tbody>
@@ -141,7 +145,7 @@
                 </div>
                 <div className="font-weight-bolder">Updated By: {owner}</div>
               </div>
-              <div className="col-md-6 text-right">
+              <div className="col-md-6 text-end">
                 <div className="bg-success legend"></div> {" Added "}
                 <div className="bg-danger legend"></div> {" Deleted "}
               </div>
@@ -149,7 +153,7 @@
             <br />
             <h5 className="bold wrap-header m-t-sm">DataShare Detail:</h5>
 
-            <Table className="table  table-bordered table-striped w-75 ">
+            <Table className="table  table-bordered w-75 ">
               <thead className="thead-light">
                 <tr>
                   <th>Fields</th>
@@ -176,7 +180,7 @@
             <br />
             <h5 className="bold wrap-header m-t-sm">DataShare Details:</h5>
 
-            <Table className="table table-striped table-bordered w-50">
+            <Table className="table table-bordered w-50">
               <thead className="thead-light">
                 <tr>
                   <th>Fields</th>
@@ -187,9 +191,13 @@
                 return (
                   <tbody>
                     <tr>
-                      <td className="table-warning">{dataShare.attributeName}</td>
                       <td className="table-warning">
-                        {!isEmpty(dataShare.previousValue) ? dataShare.previousValue : "--"}
+                        {dataShare.attributeName}
+                      </td>
+                      <td className="table-warning">
+                        {!isEmpty(dataShare.previousValue)
+                          ? dataShare.previousValue
+                          : "--"}
                       </td>
                     </tr>
                   </tbody>
diff --git a/security-admin/src/main/webapp/react-webapp/src/views/AuditEvent/AdminLogs/DatasetInProjectLogs.jsx b/security-admin/src/main/webapp/react-webapp/src/views/AuditEvent/AdminLogs/DatasetInProjectLogs.jsx
index 5714ece..f78cfe4 100644
--- a/security-admin/src/main/webapp/react-webapp/src/views/AuditEvent/AdminLogs/DatasetInProjectLogs.jsx
+++ b/security-admin/src/main/webapp/react-webapp/src/views/AuditEvent/AdminLogs/DatasetInProjectLogs.jsx
@@ -47,7 +47,7 @@
                 {val && val.previousValue && !isEmpty(val.previousValue) ? (
                   isEmpty(val.newValue) ? (
                     <h6>
-                      <Badge className="d-inline mr-1" variant="danger">
+                      <Badge className="d-inline me-1" bg="danger">
                         {getfilteredoldval(val.previousValue)}
                       </Badge>
                     </h6>
@@ -66,7 +66,7 @@
                 {val && val.newValue && !isEmpty(val.newValue) ? (
                   isEmpty(val.previousValue) ? (
                     <h6>
-                      <Badge className="d-inline mr-1" variant="success">
+                      <Badge className="d-inline me-1" bg="success">
                         {getfilterednewval(val.newValue)}
                       </Badge>
                     </h6>
@@ -91,7 +91,8 @@
     <div>
       {/* CREATE  */}
       {action == "create" &&
-        objectClassType == ClassTypes.CLASS_TYPE_RANGER_DATASET_IN_PROJECT.value && (
+        objectClassType ==
+          ClassTypes.CLASS_TYPE_RANGER_DATASET_IN_PROJECT.value && (
           <div>
             <div className="font-weight-bolder">Name : {objectName}</div>
             <div className="font-weight-bolder">
@@ -99,9 +100,11 @@
               India Standard Time
             </div>
             <div className="font-weight-bolder">Created By: {owner}</div>
-            <h5 className="bold wrap-header m-t-sm">DatasetInProject Detail:</h5>
+            <h5 className="bold wrap-header m-t-sm">
+              DatasetInProject Detail:
+            </h5>
 
-            <Table className="table table-striped table-bordered w-50">
+            <Table className="table table-bordered w-50">
               <thead className="thead-light">
                 <tr>
                   <th>Fields</th>
@@ -114,10 +117,14 @@
                 return (
                   <tbody>
                     <tr key={datasetInProject.id}>
-                      <td className="table-warning">{datasetInProject.attributeName}</td>
+                      <td className="table-warning">
+                        {datasetInProject.attributeName}
+                      </td>
 
                       <td className="table-warning">
-                        {!isEmpty(datasetInProject.newValue) ? datasetInProject.newValue : "--"}
+                        {!isEmpty(datasetInProject.newValue)
+                          ? datasetInProject.newValue
+                          : "--"}
                       </td>
                     </tr>
                   </tbody>
@@ -130,7 +137,8 @@
       {/* UPDATE */}
 
       {action == "update" &&
-        objectClassType == ClassTypes.CLASS_TYPE_RANGER_DATASET_IN_PROJECT.value && (
+        objectClassType ==
+          ClassTypes.CLASS_TYPE_RANGER_DATASET_IN_PROJECT.value && (
           <div>
             <div className="row">
               <div className="col-md-6">
@@ -141,15 +149,17 @@
                 </div>
                 <div className="font-weight-bolder">Updated By: {owner}</div>
               </div>
-              <div className="col-md-6 text-right">
+              <div className="col-md-6 text-end">
                 <div className="bg-success legend"></div> {" Added "}
                 <div className="bg-danger legend"></div> {" Deleted "}
               </div>
             </div>
             <br />
-            <h5 className="bold wrap-header m-t-sm">DatasetInProject Detail:</h5>
+            <h5 className="bold wrap-header m-t-sm">
+              DatasetInProject Detail:
+            </h5>
 
-            <Table className="table  table-bordered table-striped w-75 ">
+            <Table className="table  table-bordered w-75 ">
               <thead className="thead-light">
                 <tr>
                   <th>Fields</th>
@@ -164,7 +174,8 @@
         )}
       {/* DELETE  */}
       {action == "delete" &&
-        objectClassType == ClassTypes.CLASS_TYPE_RANGER_DATASET_IN_PROJECT.value && (
+        objectClassType ==
+          ClassTypes.CLASS_TYPE_RANGER_DATASET_IN_PROJECT.value && (
           <div>
             <div className="font-weight-bolder">Name : {objectName}</div>
             <div className="font-weight-bolder">
@@ -174,9 +185,11 @@
             <div className="font-weight-bolder">Created By: {owner} </div>
             <div className="font-weight-bolder">Deleted By: {owner} </div>
             <br />
-            <h5 className="bold wrap-header m-t-sm">DatasetInProject Details:</h5>
+            <h5 className="bold wrap-header m-t-sm">
+              DatasetInProject Details:
+            </h5>
 
-            <Table className="table table-striped table-bordered w-50">
+            <Table className="table table-bordered w-50">
               <thead className="thead-light">
                 <tr>
                   <th>Fields</th>
@@ -187,9 +200,13 @@
                 return (
                   <tbody>
                     <tr>
-                      <td className="table-warning">{datasetInProject.attributeName}</td>
                       <td className="table-warning">
-                        {!isEmpty(datasetInProject.previousValue) ? datasetInProject.previousValue : "--"}
+                        {datasetInProject.attributeName}
+                      </td>
+                      <td className="table-warning">
+                        {!isEmpty(datasetInProject.previousValue)
+                          ? datasetInProject.previousValue
+                          : "--"}
                       </td>
                     </tr>
                   </tbody>
diff --git a/security-admin/src/main/webapp/react-webapp/src/views/AuditEvent/AdminLogs/DatasetLogs.jsx b/security-admin/src/main/webapp/react-webapp/src/views/AuditEvent/AdminLogs/DatasetLogs.jsx
index 3194f72..d7c8e00 100644
--- a/security-admin/src/main/webapp/react-webapp/src/views/AuditEvent/AdminLogs/DatasetLogs.jsx
+++ b/security-admin/src/main/webapp/react-webapp/src/views/AuditEvent/AdminLogs/DatasetLogs.jsx
@@ -47,7 +47,7 @@
                 {val && val.previousValue && !isEmpty(val.previousValue) ? (
                   isEmpty(val.newValue) ? (
                     <h6>
-                      <Badge className="d-inline mr-1" variant="danger">
+                      <Badge className="d-inline me-1" bg="danger">
                         {getfilteredoldval(val.previousValue)}
                       </Badge>
                     </h6>
@@ -66,7 +66,7 @@
                 {val && val.newValue && !isEmpty(val.newValue) ? (
                   isEmpty(val.previousValue) ? (
                     <h6>
-                      <Badge className="d-inline mr-1" variant="success">
+                      <Badge className="d-inline me-1" bg="success">
                         {getfilterednewval(val.newValue)}
                       </Badge>
                     </h6>
@@ -101,7 +101,7 @@
             <div className="font-weight-bolder">Created By: {owner}</div>
             <h5 className="bold wrap-header m-t-sm">Dataset Detail:</h5>
 
-            <Table className="table table-striped table-bordered w-50">
+            <Table className="table table-bordered w-50">
               <thead className="thead-light">
                 <tr>
                   <th>Fields</th>
@@ -141,7 +141,7 @@
                 </div>
                 <div className="font-weight-bolder">Updated By: {owner}</div>
               </div>
-              <div className="col-md-6 text-right">
+              <div className="col-md-6 text-end">
                 <div className="bg-success legend"></div> {" Added "}
                 <div className="bg-danger legend"></div> {" Deleted "}
               </div>
@@ -149,7 +149,7 @@
             <br />
             <h5 className="bold wrap-header m-t-sm">Dataset Detail:</h5>
 
-            <Table className="table  table-bordered table-striped w-75 ">
+            <Table className="table  table-bordered w-75 ">
               <thead className="thead-light">
                 <tr>
                   <th>Fields</th>
@@ -176,7 +176,7 @@
             <br />
             <h5 className="bold wrap-header m-t-sm">Dataset Details:</h5>
 
-            <Table className="table table-striped table-bordered w-50">
+            <Table className="table table-bordered w-50">
               <thead className="thead-light">
                 <tr>
                   <th>Fields</th>
@@ -189,7 +189,9 @@
                     <tr>
                       <td className="table-warning">{dataset.attributeName}</td>
                       <td className="table-warning">
-                        {!isEmpty(dataset.previousValue) ? dataset.previousValue : "--"}
+                        {!isEmpty(dataset.previousValue)
+                          ? dataset.previousValue
+                          : "--"}
                       </td>
                     </tr>
                   </tbody>
diff --git a/security-admin/src/main/webapp/react-webapp/src/views/AuditEvent/AdminLogs/ProjectLogs.jsx b/security-admin/src/main/webapp/react-webapp/src/views/AuditEvent/AdminLogs/ProjectLogs.jsx
index dd13b4e..1e89484 100644
--- a/security-admin/src/main/webapp/react-webapp/src/views/AuditEvent/AdminLogs/ProjectLogs.jsx
+++ b/security-admin/src/main/webapp/react-webapp/src/views/AuditEvent/AdminLogs/ProjectLogs.jsx
@@ -47,7 +47,7 @@
                 {val && val.previousValue && !isEmpty(val.previousValue) ? (
                   isEmpty(val.newValue) ? (
                     <h6>
-                      <Badge className="d-inline mr-1" variant="danger">
+                      <Badge className="d-inline me-1" bg="danger">
                         {getfilteredoldval(val.previousValue)}
                       </Badge>
                     </h6>
@@ -66,7 +66,7 @@
                 {val && val.newValue && !isEmpty(val.newValue) ? (
                   isEmpty(val.previousValue) ? (
                     <h6>
-                      <Badge className="d-inline mr-1" variant="success">
+                      <Badge className="d-inline me-1" bg="success">
                         {getfilterednewval(val.newValue)}
                       </Badge>
                     </h6>
@@ -141,7 +141,7 @@
                 </div>
                 <div className="font-weight-bolder">Updated By: {owner}</div>
               </div>
-              <div className="col-md-6 text-right">
+              <div className="col-md-6 text-end">
                 <div className="bg-success legend"></div> {" Added "}
                 <div className="bg-danger legend"></div> {" Deleted "}
               </div>
@@ -189,7 +189,9 @@
                     <tr>
                       <td className="table-warning">{project.attributeName}</td>
                       <td className="table-warning">
-                        {!isEmpty(project.previousValue) ? project.previousValue : "--"}
+                        {!isEmpty(project.previousValue)
+                          ? project.previousValue
+                          : "--"}
                       </td>
                     </tr>
                   </tbody>
diff --git a/security-admin/src/main/webapp/react-webapp/src/views/AuditEvent/AdminLogs/SharedResourceLogs.jsx b/security-admin/src/main/webapp/react-webapp/src/views/AuditEvent/AdminLogs/SharedResourceLogs.jsx
index 7243c9f..4323ccc 100644
--- a/security-admin/src/main/webapp/react-webapp/src/views/AuditEvent/AdminLogs/SharedResourceLogs.jsx
+++ b/security-admin/src/main/webapp/react-webapp/src/views/AuditEvent/AdminLogs/SharedResourceLogs.jsx
@@ -47,7 +47,7 @@
                 {val && val.previousValue && !isEmpty(val.previousValue) ? (
                   isEmpty(val.newValue) ? (
                     <h6>
-                      <Badge className="d-inline mr-1" variant="danger">
+                      <Badge className="d-inline me-1" bg="danger">
                         {getfilteredoldval(val.previousValue)}
                       </Badge>
                     </h6>
@@ -66,7 +66,7 @@
                 {val && val.newValue && !isEmpty(val.newValue) ? (
                   isEmpty(val.previousValue) ? (
                     <h6>
-                      <Badge className="d-inline mr-1" variant="success">
+                      <Badge className="d-inline me-1" bg="success">
                         {getfilterednewval(val.newValue)}
                       </Badge>
                     </h6>
@@ -91,7 +91,8 @@
     <div>
       {/* CREATE  */}
       {action == "create" &&
-        objectClassType == ClassTypes.CLASS_TYPE_RANGER_SHARED_RESOURCE.value && (
+        objectClassType ==
+          ClassTypes.CLASS_TYPE_RANGER_SHARED_RESOURCE.value && (
           <div>
             <div className="font-weight-bolder">Name : {objectName}</div>
             <div className="font-weight-bolder">
@@ -114,10 +115,14 @@
                 return (
                   <tbody>
                     <tr key={sharedResource.id}>
-                      <td className="table-warning">{sharedResource.attributeName}</td>
+                      <td className="table-warning">
+                        {sharedResource.attributeName}
+                      </td>
 
                       <td className="table-warning">
-                        {!isEmpty(sharedResource.newValue) ? sharedResource.newValue : "--"}
+                        {!isEmpty(sharedResource.newValue)
+                          ? sharedResource.newValue
+                          : "--"}
                       </td>
                     </tr>
                   </tbody>
@@ -130,7 +135,8 @@
       {/* UPDATE */}
 
       {action == "update" &&
-        objectClassType == ClassTypes.CLASS_TYPE_RANGER_SHARED_RESOURCE.value && (
+        objectClassType ==
+          ClassTypes.CLASS_TYPE_RANGER_SHARED_RESOURCE.value && (
           <div>
             <div className="row">
               <div className="col-md-6">
@@ -141,7 +147,7 @@
                 </div>
                 <div className="font-weight-bolder">Updated By: {owner}</div>
               </div>
-              <div className="col-md-6 text-right">
+              <div className="col-md-6 text-end">
                 <div className="bg-success legend"></div> {" Added "}
                 <div className="bg-danger legend"></div> {" Deleted "}
               </div>
@@ -164,7 +170,8 @@
         )}
       {/* DELETE  */}
       {action == "delete" &&
-        objectClassType == ClassTypes.CLASS_TYPE_RANGER_SHARED_RESOURCE.value && (
+        objectClassType ==
+          ClassTypes.CLASS_TYPE_RANGER_SHARED_RESOURCE.value && (
           <div>
             <div className="font-weight-bolder">Name : {objectName}</div>
             <div className="font-weight-bolder">
@@ -187,9 +194,13 @@
                 return (
                   <tbody>
                     <tr>
-                      <td className="table-warning">{sharedResource.attributeName}</td>
                       <td className="table-warning">
-                        {!isEmpty(sharedResource.previousValue) ? sharedResource.previousValue : "--"}
+                        {sharedResource.attributeName}
+                      </td>
+                      <td className="table-warning">
+                        {!isEmpty(sharedResource.previousValue)
+                          ? sharedResource.previousValue
+                          : "--"}
                       </td>
                     </tr>
                   </tbody>
diff --git a/security-admin/src/main/webapp/react-webapp/src/views/GovernedData/Dataset/AccessGrantForm.jsx b/security-admin/src/main/webapp/react-webapp/src/views/GovernedData/Dataset/AccessGrantForm.jsx
index c8120bb..704add3 100755
--- a/security-admin/src/main/webapp/react-webapp/src/views/GovernedData/Dataset/AccessGrantForm.jsx
+++ b/security-admin/src/main/webapp/react-webapp/src/views/GovernedData/Dataset/AccessGrantForm.jsx
@@ -467,7 +467,7 @@
               initialValues
             }) => {
               return (
-                <div className="gds-access-content">
+                <div className="gds-access-content gds-content-border">
                   <FormChange
                     isDirtyField={
                       dirty == true || !isEqual(initialValues, values)
diff --git a/security-admin/src/main/webapp/react-webapp/src/views/GovernedData/Dataset/DatasetDetailFullView.jsx b/security-admin/src/main/webapp/react-webapp/src/views/GovernedData/Dataset/DatasetDetailFullView.jsx
index af45afe..21cdc7f 100644
--- a/security-admin/src/main/webapp/react-webapp/src/views/GovernedData/Dataset/DatasetDetailFullView.jsx
+++ b/security-admin/src/main/webapp/react-webapp/src/views/GovernedData/Dataset/DatasetDetailFullView.jsx
@@ -32,6 +32,7 @@
 import groupColourIcon from "../../../images/group-colour.svg";
 import roleColourIcon from "../../../images/role-colour.svg";
 import Select from "react-select";
+import { statusClassMap } from "../../../utils/XAEnums";
 
 const DatasetDetailFullView = () => {
   let { datasetId } = useParams();
@@ -57,10 +58,6 @@
     useState();
   const [filteredRoleSharedWithMap, setFilteredRoleSharedWithMap] = useState();
   const [sharedWithAccessFilter, setSharedWithAccessFilter] = useState();
-  const [userSharedWithAccordion, setUserSharedWithAccordion] = useState(false);
-  const [groupSharedWithAccordion, setGroupSharedWithAccordion] =
-    useState(false);
-  const [roleSharedWithAccordion, setRoleSharedWithAccordion] = useState(false);
   const [completeDatashareRequestsList, setCompleteDatashareRequestsList] =
     useState([]);
   const [datashareRequestTotalCount, setDatashareRequestTotalCount] =
@@ -371,18 +368,6 @@
     })
   };
 
-  const onUserSharedWithAccordianChange = () => {
-    setUserSharedWithAccordion(!userSharedWithAccordion);
-  };
-
-  const onGroupSharedWithAccordianChange = () => {
-    setGroupSharedWithAccordion(!groupSharedWithAccordion);
-  };
-
-  const onRoleSharedWithAccordianChange = () => {
-    setRoleSharedWithAccordion(!roleSharedWithAccordion);
-  };
-
   const onSharedWithAccessFilterChange = (e) => {
     setSharedWithAccessFilter(e);
     filterSharedWithPrincipleList(
@@ -536,7 +521,6 @@
                         className="form-control gds-description"
                         id="description"
                         data-cy="description"
-                        //onChange={datasetDescriptionChange}
                         value={datasetInfo.description}
                         rows={5}
                       />
@@ -553,7 +537,6 @@
                     roleList={roleList}
                     isEditable={false}
                     type="dataset"
-                    //onDataChange={handleDataChange}
                   />
                 )}
 
@@ -564,170 +547,120 @@
                   <div>
                     {dataShareRequestsList.length > 0 ? (
                       dataShareRequestsList.map((obj, index) => {
+                        const status = obj["status"] || "DENIED";
                         return (
-                          <div>
-                            <Accordion className="mg-b-10" defaultActiveKey="0">
-                              <div className="border-bottom">
-                                <Accordion.Toggle
-                                  as={Card.Header}
-                                  eventKey="1"
-                                  onClick={() =>
-                                    onRequestAccordionChange(obj.id)
-                                  }
-                                  className="border-bottom-0"
-                                  data-id="panel"
-                                  data-cy="panel"
-                                >
-                                  {/* {obj["status"] == "GRANTED" ? (
-                                    <div>
-                                      <span>Data access granted.</span>
-                                      <Link
-                                        className="mb-3"
-                                        to=""
-                                        onClick={() =>
-                                          showActiveateRequestModal(obj)
-                                        }
-                                      >
-                                        Activate Datashare
-                                      </Link>
-                                    </div>
-                                  ) : (
-                                    <div></div>
-                                  )} */}
-                                  <div className="d-flex justify-content-between align-items-center">
-                                    <div className="d-flex align-items-center gap-1">
-                                      {requestAccordionState[obj.id] ? (
-                                        <i className="fa fa-angle-up fa-lg font-weight-bold"></i>
-                                      ) : (
-                                        <i className="fa fa-angle-down fa-lg font-weight-bold"></i>
-                                      )}
-                                      <h5 className="gds-heading-5 m-0">
-                                        {/* {obj.name} */} Datashare{" "}
-                                        {obj.dataShareId}
-                                      </h5>
-                                    </div>
-                                    <div className="d-flex align-items-center gap-1">
-                                      <span
-                                        //className="badge badge-light gds-requested-status"
-                                        className={
-                                          obj["status"] === "REQUESTED"
-                                            ? "badge badge-light gds-requested-status"
-                                            : obj["status"] === "GRANTED"
-                                            ? "badge badge-light gds-granted-status"
-                                            : obj["status"] === "ACTIVE"
-                                            ? "badge badge-light gds-active-status"
-                                            : "badge badge-light gds-denied-status"
-                                        }
-                                      >
-                                        {obj["status"]}
-                                      </span>
-                                      <Button
-                                        variant="outline-dark"
-                                        size="sm"
-                                        className="mr-2"
-                                        title="View"
-                                        data-name="viewDatashare"
-                                        onClick={() =>
-                                          viewDatashareDetail(obj.dataShareId)
-                                        }
-                                        data-id={obj.id}
-                                      >
-                                        <i className="fa-fw fa fa-eye fa-fw fa fa-large" />
-                                      </Button>
-                                      {/* {(isSystemAdmin() ||
-                                        userAclPerm == "ADMIN") && (
-                                        <Button
-                                          variant="danger"
-                                          size="sm"
-                                          title="Delete"
-                                          onClick={() =>
-                                            toggleConfirmModalForDelete(
-                                              obj.id,
-                                              obj.name,
-                                              obj.status
-                                            )
-                                          }
-                                          data-name="deleteDatashareRequest"
-                                          data-id={obj["id"]}
-                                          data-cy={obj["id"]}
+                          <Accordion className="mg-b-10" defaultActiveKey="0">
+                            <div className="border-bottom">
+                              <Accordion.Header
+                                eventKey="1"
+                                onClick={() => onRequestAccordionChange(obj.id)}
+                                className="border-bottom-0"
+                                data-id="panel"
+                                data-cy="panel"
+                              >
+                                <div className="d-flex justify-content-between align-items-center">
+                                  <div className="d-flex align-items-center gap-1">
+                                    {requestAccordionState[obj.id] ? (
+                                      <i className="fa fa-angle-up fa-lg font-weight-bold"></i>
+                                    ) : (
+                                      <i className="fa fa-angle-down fa-lg font-weight-bold"></i>
+                                    )}
+                                    <h5 className="gds-heading-5 m-0">
+                                      Datashare {obj.dataShareId}
+                                    </h5>
+                                  </div>
+                                  <div className="d-flex align-items-center gap-1">
+                                    <span
+                                      className={`${statusClassMap[status]}`}
+                                    >
+                                      {obj["status"]}
+                                    </span>
+                                    <Button
+                                      variant="outline-dark"
+                                      size="sm"
+                                      className="me-2"
+                                      title="View"
+                                      data-name="viewDatashare"
+                                      onClick={() =>
+                                        viewDatashareDetail(obj.dataShareId)
+                                      }
+                                      data-id={obj.id}
+                                    >
+                                      <i className="fa-fw fa fa-eye fa-fw fa fa-large" />
+                                    </Button>
+                                  </div>
+                                </div>
+                              </Accordion.Header>
+                              <Accordion.Body eventKey="1">
+                                <Card.Body>
+                                  <div className="d-flex justify-content-between">
+                                    <div className="gds-inline-field-grp">
+                                      <div className="wrapper">
+                                        <div
+                                          className="gds-left-inline-field"
+                                          height="30px"
                                         >
-                                          <i className="fa-fw fa fa-trash fa-fw fa fa-large" />
-                                        </Button>
-                                      )} */}
+                                          Service
+                                        </div>
+                                        <div line-height="30px">
+                                          {obj["service"]}
+                                        </div>
+                                      </div>
+                                      <div className="wrapper">
+                                        <div
+                                          className="gds-left-inline-field"
+                                          height="30px"
+                                        >
+                                          Zone
+                                        </div>
+                                        <div line-height="30px">
+                                          {obj["zone"]}
+                                        </div>
+                                      </div>
+                                      <div className="wrapper">
+                                        <div
+                                          className="gds-left-inline-field"
+                                          height="30px"
+                                        >
+                                          Resource Count
+                                        </div>
+                                        <div line-height="30px">
+                                          {obj["resourceCount"]}
+                                        </div>
+                                      </div>
+                                    </div>
+                                    <div className="gds-right-inline-field-grp">
+                                      <div className="wrapper">
+                                        <div>Added</div>
+                                        <div className="gds-right-inline-field">
+                                          {dateFormat(
+                                            obj["createTime"],
+                                            "mm/dd/yyyy hh:MM:ss TT"
+                                          )}
+                                        </div>
+                                      </div>
+                                      <div className="wrapper">
+                                        <div>Updated</div>
+                                        <div className="gds-right-inline-field">
+                                          {dateFormat(
+                                            obj["updateTime"],
+                                            "mm/dd/yyyy hh:MM:ss TT"
+                                          )}
+                                        </div>
+                                      </div>
+                                      <div className="w-100 text-end">
+                                        <Link
+                                          to={`/gds/request/detail/${obj.id}`}
+                                        >
+                                          View Request
+                                        </Link>
+                                      </div>
                                     </div>
                                   </div>
-                                </Accordion.Toggle>
-                                <Accordion.Collapse eventKey="1">
-                                  <Card.Body>
-                                    <div className="d-flex justify-content-between">
-                                      <div className="gds-inline-field-grp">
-                                        <div className="wrapper">
-                                          <div
-                                            className="gds-left-inline-field"
-                                            height="30px"
-                                          >
-                                            Service
-                                          </div>
-                                          <div line-height="30px">
-                                            {obj["service"]}
-                                          </div>
-                                        </div>
-                                        <div className="wrapper">
-                                          <div
-                                            className="gds-left-inline-field"
-                                            height="30px"
-                                          >
-                                            Zone
-                                          </div>
-                                          <div line-height="30px">
-                                            {obj["zone"]}
-                                          </div>
-                                        </div>
-                                        <div className="wrapper">
-                                          <div
-                                            className="gds-left-inline-field"
-                                            height="30px"
-                                          >
-                                            Resource Count
-                                          </div>
-                                          <div line-height="30px">
-                                            {obj["resourceCount"]}
-                                          </div>
-                                        </div>
-                                      </div>
-                                      <div className="gds-right-inline-field-grp">
-                                        <div className="wrapper">
-                                          <div>Added</div>
-                                          <div className="gds-right-inline-field">
-                                            {dateFormat(
-                                              obj["createTime"],
-                                              "mm/dd/yyyy hh:MM:ss TT"
-                                            )}
-                                          </div>
-                                        </div>
-                                        <div className="wrapper">
-                                          <div>Updated</div>
-                                          <div className="gds-right-inline-field">
-                                            {dateFormat(
-                                              obj["updateTime"],
-                                              "mm/dd/yyyy hh:MM:ss TT"
-                                            )}
-                                          </div>
-                                        </div>
-                                        <div className="w-100 text-right">
-                                          <Link
-                                            to={`/gds/request/detail/${obj.id}`}
-                                          >
-                                            View Request
-                                          </Link>
-                                        </div>
-                                      </div>
-                                    </div>
-                                  </Card.Body>
-                                </Accordion.Collapse>
-                              </div>
-                            </Accordion>
-                          </div>
+                                </Card.Body>
+                              </Accordion.Body>
+                            </div>
+                          </Accordion>
                         );
                       })
                     ) : (
@@ -782,192 +715,156 @@
                     </div>
 
                     <Accordion className="mg-b-10" defaultActiveKey="0">
-                      <Card>
-                        <div className="border-bottom">
-                          <Accordion.Toggle
-                            as={Card.Header}
-                            eventKey="1"
-                            onClick={onUserSharedWithAccordianChange}
-                            className="border-bottom-0 d-flex align-items-center justify-content-between gds-acc-card-header"
-                            data-id="panel"
-                            data-cy="panel"
-                          >
-                            <div className="d-flex align-items-center gap-half">
-                              <img
-                                src={userColourIcon}
-                                height="30px"
-                                width="30px"
-                              />
-                              Users (
-                              {filteredUserSharedWithMap == undefined
-                                ? 0
-                                : filteredUserSharedWithMap.size}
-                              )
-                            </div>
-                            {userSharedWithAccordion ? (
-                              <i className="fa fa-angle-up fa-lg font-weight-bold"></i>
-                            ) : (
-                              <i className="fa fa-angle-down fa-lg font-weight-bold"></i>
-                            )}
-                          </Accordion.Toggle>
-                        </div>
-                        <Accordion.Collapse eventKey="1">
-                          <Card.Body>
-                            {filteredUserSharedWithMap != undefined &&
-                            filteredUserSharedWithMap.size > 0 ? (
-                              Array.from(filteredUserSharedWithMap).map(
-                                ([key, value]) => (
-                                  <div
-                                    className="gds-principle-listing"
-                                    key={key}
-                                  >
-                                    <span title={key}>{key}</span>
-                                    <div className="gds-chips gap-one-fourth">
-                                      {value.map((accessObj) => (
-                                        <span
-                                          className="badge badge-light badge-sm"
-                                          title={accessObj.type}
-                                          key={accessObj.type}
-                                        >
-                                          {accessObj.type}
-                                        </span>
-                                      ))}
-                                    </div>
+                      <Accordion.Item>
+                        <Accordion.Header
+                          eventKey="1"
+                          data-id="panel"
+                          data-cy="panel"
+                        >
+                          <div className="d-flex align-items-center gap-half">
+                            <img
+                              src={userColourIcon}
+                              height="30px"
+                              width="30px"
+                            />
+                            Users (
+                            {filteredUserSharedWithMap == undefined
+                              ? 0
+                              : filteredUserSharedWithMap.size}
+                            )
+                          </div>
+                        </Accordion.Header>
+                        <Accordion.Body eventKey="1">
+                          {filteredUserSharedWithMap != undefined &&
+                          filteredUserSharedWithMap.size > 0 ? (
+                            Array.from(filteredUserSharedWithMap).map(
+                              ([key, value]) => (
+                                <div
+                                  className="gds-principle-listing"
+                                  key={key}
+                                >
+                                  <span title={key}>{key}</span>
+                                  <div className="gds-chips gap-one-fourth">
+                                    {value.map((accessObj) => (
+                                      <span
+                                        className="badge text-bg-light badge-sm"
+                                        title={accessObj.type}
+                                        key={accessObj.type}
+                                      >
+                                        {accessObj.type}
+                                      </span>
+                                    ))}
                                   </div>
-                                )
+                                </div>
                               )
-                            ) : (
-                              <p className="mt-1">--</p>
-                            )}
-                          </Card.Body>
-                        </Accordion.Collapse>
-                      </Card>
+                            )
+                          ) : (
+                            <p className="mt-1">--</p>
+                          )}
+                        </Accordion.Body>
+                      </Accordion.Item>
                     </Accordion>
 
                     <Accordion className="mg-b-10" defaultActiveKey="0">
-                      <Card>
-                        <div className="border-bottom">
-                          <Accordion.Toggle
-                            as={Card.Header}
-                            eventKey="1"
-                            onClick={onGroupSharedWithAccordianChange}
-                            className="border-bottom-0 d-flex align-items-center justify-content-between gds-acc-card-header"
-                            data-id="panel"
-                            data-cy="panel"
-                          >
-                            <div className="d-flex align-items-center gap-half">
-                              <img
-                                src={groupColourIcon}
-                                height="30px"
-                                width="30px"
-                              />
-                              Groups (
-                              {filteredGroupSharedWithMap == undefined
-                                ? 0
-                                : filteredGroupSharedWithMap.size}
-                              )
-                            </div>
-                            {groupSharedWithAccordion ? (
-                              <i className="fa fa-angle-up fa-lg font-weight-bold"></i>
-                            ) : (
-                              <i className="fa fa-angle-down fa-lg font-weight-bold"></i>
-                            )}
-                          </Accordion.Toggle>
-                        </div>
-                        <Accordion.Collapse eventKey="1">
-                          <Card.Body>
-                            {filteredGroupSharedWithMap != undefined &&
-                            filteredGroupSharedWithMap.size > 0 ? (
-                              Array.from(filteredGroupSharedWithMap).map(
-                                ([key, value]) => (
-                                  <div
-                                    className="gds-principle-listing"
-                                    key={key}
-                                  >
-                                    <span title={key}>{key}</span>
-                                    <div className="gds-chips gap-one-fourth">
-                                      {value.map((accessObj) => (
-                                        <span
-                                          className="badge badge-light badge-sm"
-                                          title={accessObj.type}
-                                          key={accessObj.type}
-                                        >
-                                          {accessObj.type}
-                                        </span>
-                                      ))}
-                                    </div>
+                      <Accordion.Item>
+                        <Accordion.Header
+                          eventKey="1"
+                          data-id="panel"
+                          data-cy="panel"
+                        >
+                          <div className="d-flex align-items-center gap-half">
+                            <img
+                              src={groupColourIcon}
+                              height="30px"
+                              width="30px"
+                            />
+                            Groups (
+                            {filteredGroupSharedWithMap == undefined
+                              ? 0
+                              : filteredGroupSharedWithMap.size}
+                            )
+                          </div>
+                        </Accordion.Header>
+                        <Accordion.Body eventKey="1">
+                          {filteredGroupSharedWithMap != undefined &&
+                          filteredGroupSharedWithMap.size > 0 ? (
+                            Array.from(filteredGroupSharedWithMap).map(
+                              ([key, value]) => (
+                                <div
+                                  className="gds-principle-listing"
+                                  key={key}
+                                >
+                                  <span title={key}>{key}</span>
+                                  <div className="gds-chips gap-one-fourth">
+                                    {value.map((accessObj) => (
+                                      <span
+                                        className="badge text-bg-light badge-sm"
+                                        title={accessObj.type}
+                                        key={accessObj.type}
+                                      >
+                                        {accessObj.type}
+                                      </span>
+                                    ))}
                                   </div>
-                                )
+                                </div>
                               )
-                            ) : (
-                              <p className="mt-1">--</p>
-                            )}
-                          </Card.Body>
-                        </Accordion.Collapse>
-                      </Card>
+                            )
+                          ) : (
+                            <p className="mt-1">--</p>
+                          )}
+                        </Accordion.Body>
+                      </Accordion.Item>
                     </Accordion>
 
                     <Accordion className="mg-b-10" defaultActiveKey="0">
-                      <Card>
-                        <div className="border-bottom">
-                          <Accordion.Toggle
-                            as={Card.Header}
-                            eventKey="1"
-                            onClick={onRoleSharedWithAccordianChange}
-                            className="border-bottom-0 d-flex align-items-center justify-content-between gds-acc-card-header"
-                            data-id="panel"
-                            data-cy="panel"
-                          >
-                            <div className="d-flex align-items-center gap-half">
-                              <img
-                                src={roleColourIcon}
-                                height="30px"
-                                width="30px"
-                              />
-                              Roles (
-                              {filteredRoleSharedWithMap == undefined
-                                ? 0
-                                : filteredRoleSharedWithMap.size}
-                              )
-                            </div>
-                            {roleSharedWithAccordion ? (
-                              <i className="fa fa-angle-up fa-lg font-weight-bold"></i>
-                            ) : (
-                              <i className="fa fa-angle-down fa-lg font-weight-bold"></i>
-                            )}
-                          </Accordion.Toggle>
-                        </div>
-                        <Accordion.Collapse eventKey="1">
-                          <Card.Body>
-                            {filteredRoleSharedWithMap != undefined &&
-                            filteredRoleSharedWithMap.size > 0 ? (
-                              Array.from(filteredRoleSharedWithMap).map(
-                                ([key, value]) => (
-                                  <div
-                                    className="gds-principle-listing"
-                                    key={key}
-                                  >
-                                    <span title={key}>{key}</span>
-                                    <div className="gds-chips gap-one-fourth">
-                                      {value.map((accessObj) => (
-                                        <span
-                                          className="badge badge-light badge-sm"
-                                          title={accessObj.type}
-                                          key={accessObj.type}
-                                        >
-                                          {accessObj.type}
-                                        </span>
-                                      ))}
-                                    </div>
+                      <Accordion.Item>
+                        <Accordion.Header
+                          eventKey="1"
+                          data-id="panel"
+                          data-cy="panel"
+                        >
+                          <div className="d-flex align-items-center gap-half">
+                            <img
+                              src={roleColourIcon}
+                              height="30px"
+                              width="30px"
+                            />
+                            Roles (
+                            {filteredRoleSharedWithMap == undefined
+                              ? 0
+                              : filteredRoleSharedWithMap.size}
+                            )
+                          </div>
+                        </Accordion.Header>
+                        <Accordion.Body eventKey="1">
+                          {filteredRoleSharedWithMap != undefined &&
+                          filteredRoleSharedWithMap.size > 0 ? (
+                            Array.from(filteredRoleSharedWithMap).map(
+                              ([key, value]) => (
+                                <div
+                                  className="gds-principle-listing"
+                                  key={key}
+                                >
+                                  <span title={key}>{key}</span>
+                                  <div className="gds-chips gap-one-fourth">
+                                    {value.map((accessObj) => (
+                                      <span
+                                        className="badge text-bg-light badge-sm"
+                                        title={accessObj.type}
+                                        key={accessObj.type}
+                                      >
+                                        {accessObj.type}
+                                      </span>
+                                    ))}
                                   </div>
-                                )
+                                </div>
                               )
-                            ) : (
-                              <p className="mt-1">--</p>
-                            )}
-                          </Card.Body>
-                        </Accordion.Collapse>
-                      </Card>
+                            )
+                          ) : (
+                            <p className="mt-1">--</p>
+                          )}
+                        </Accordion.Body>
+                      </Accordion.Item>
                     </Accordion>
                   </div>
                 </div>
@@ -984,7 +881,6 @@
                         className="form-control"
                         id="termsAndConditions"
                         data-cy="termsAndConditions"
-                        //onChange={datasetTermsAndConditionsChange}
                         value={datasetInfo.termsOfUse}
                         rows={16}
                       />
diff --git a/security-admin/src/main/webapp/react-webapp/src/views/GovernedData/Dataset/DatasetDetailLayout.jsx b/security-admin/src/main/webapp/react-webapp/src/views/GovernedData/Dataset/DatasetDetailLayout.jsx
index a0ac8cf..bbbd639 100755
--- a/security-admin/src/main/webapp/react-webapp/src/views/GovernedData/Dataset/DatasetDetailLayout.jsx
+++ b/security-admin/src/main/webapp/react-webapp/src/views/GovernedData/Dataset/DatasetDetailLayout.jsx
@@ -121,10 +121,6 @@
   );
   const [acceptTerms, setAcceptTerms] = useState(false);
   const [dataShareRequestsList, setDatashareRequestsList] = useState([]);
-  const [userSharedWithAccordion, setUserSharedWithAccordion] = useState(false);
-  const [groupSharedWithAccordion, setGroupSharedWithAccordion] =
-    useState(false);
-  const [roleSharedWithAccordion, setRoleSharedWithAccordion] = useState(false);
   const [userList, setUserList] = useState([]);
   const [groupList, setGroupList] = useState([]);
   const [roleList, setRoleList] = useState([]);
@@ -799,18 +795,6 @@
 
   const handleSubmit = async (formData) => {};
 
-  const onUserSharedWithAccordianChange = () => {
-    setUserSharedWithAccordion(!userSharedWithAccordion);
-  };
-
-  const onGroupSharedWithAccordianChange = () => {
-    setGroupSharedWithAccordion(!groupSharedWithAccordion);
-  };
-
-  const onRoleSharedWithAccordianChange = () => {
-    setRoleSharedWithAccordion(!roleSharedWithAccordion);
-  };
-
   const serviceSelectTheme = (theme) => {
     return {
       ...theme,
@@ -1454,7 +1438,7 @@
           </Button>
           <h3 className="gds-header bold">
             <div className="d-flex align-items-center">
-              <span className="mr-1">Dataset: </span>
+              <span className="me-1">Dataset: </span>
               {!datasetNameEditable ? (
                 <span
                   title={datasetName}
@@ -1502,19 +1486,18 @@
               <Button
                 variant="primary"
                 onClick={() => {
-                  if(datasetName.length > 512) {
-                    toast.error('Dataset name must be 512 characters or less');
-                  }
-                  else {
+                  if (datasetName.length > 512) {
+                    toast.error("Dataset name must be 512 characters or less");
+                  } else {
                     if (
-                      activeKey === 'accessGrants' &&
+                      activeKey === "accessGrants" &&
                       accessGrantFormValues !== undefined &&
                       datasetNameEditable
                     ) {
                       updateDatasetAndAccessGrant();
                     } else if (
-                      activeKey !== 'accessGrants' ||
-                      (activeKey === 'accessGrants' && datasetNameEditable)
+                      activeKey !== "accessGrants" ||
+                      (activeKey === "accessGrants" && datasetNameEditable)
                     ) {
                       updateDatasetDetails();
                     } else {
@@ -1702,7 +1685,7 @@
                 </Tab>
                 <Tab eventKey="datashares" title="DATASHARES">
                   {activeKey == "datashares" ? (
-                    <div className="gds-request-content">
+                    <div className="gds-content-border gds-request-content">
                       <div className="mb-3">
                         <div className="usr-grp-role-search-width mb-3">
                           <StructuredFilter
@@ -1885,192 +1868,154 @@
                           </div>
 
                           <Accordion className="mg-b-10" defaultActiveKey="0">
-                            <Card>
-                              <div className="border-bottom">
-                                <Accordion.Toggle
-                                  as={Card.Header}
-                                  eventKey="1"
-                                  onClick={onUserSharedWithAccordianChange}
-                                  className="border-bottom-0 d-flex align-items-center justify-content-between gds-acc-card-header"
-                                  data-id="panel"
-                                  data-cy="panel"
-                                >
-                                  <div className="d-flex align-items-center gap-half">
-                                    <img
-                                      src={userColourIcon}
-                                      height="30px"
-                                      width="30px"
-                                    />
-                                    Users (
-                                    {filteredUserSharedWithMap == undefined
-                                      ? 0
-                                      : filteredUserSharedWithMap.size}
-                                    )
-                                  </div>
-                                  {userSharedWithAccordion ? (
-                                    <i className="fa fa-angle-up fa-lg font-weight-bold"></i>
-                                  ) : (
-                                    <i className="fa fa-angle-down fa-lg font-weight-bold"></i>
-                                  )}
-                                </Accordion.Toggle>
-                              </div>
-                              <Accordion.Collapse eventKey="1">
-                                <Card.Body>
-                                  {filteredUserSharedWithMap != undefined &&
-                                  filteredUserSharedWithMap.size > 0 ? (
-                                    Array.from(filteredUserSharedWithMap).map(
-                                      ([key, value]) => (
-                                        <div
-                                          className="gds-principle-listing"
-                                          key={key}
-                                        >
-                                          <span title={key}>{key}</span>
-                                          <div className="gds-chips gap-one-fourth">
-                                            {value.map((accessObj) => (
-                                              <span
-                                                className="badge badge-light badge-sm"
-                                                title={accessObj.type}
-                                                key={accessObj.type}
-                                              >
-                                                {accessObj.type}
-                                              </span>
-                                            ))}
-                                          </div>
+                            <Accordion.Item>
+                              <Accordion.Header
+                                eventKey="1"
+                                data-id="panel"
+                                data-cy="panel"
+                              >
+                                <div className="d-flex align-items-center gap-half">
+                                  <img
+                                    src={userColourIcon}
+                                    height="30px"
+                                    width="30px"
+                                  />
+                                  Users (
+                                  {filteredUserSharedWithMap == undefined
+                                    ? 0
+                                    : filteredUserSharedWithMap.size}
+                                  )
+                                </div>
+                              </Accordion.Header>
+                              <Accordion.Body eventKey="1">
+                                {filteredUserSharedWithMap != undefined &&
+                                filteredUserSharedWithMap.size > 0 ? (
+                                  Array.from(filteredUserSharedWithMap).map(
+                                    ([key, value]) => (
+                                      <div
+                                        className="gds-principle-listing"
+                                        key={key}
+                                      >
+                                        <span title={key}>{key}</span>
+                                        <div className="gds-chips gap-one-fourth">
+                                          {value.map((accessObj) => (
+                                            <span
+                                              className="badge text-bg-light badge-sm"
+                                              title={accessObj.type}
+                                              key={accessObj.type}
+                                            >
+                                              {accessObj.type}
+                                            </span>
+                                          ))}
                                         </div>
-                                      )
+                                      </div>
                                     )
-                                  ) : (
-                                    <p className="mt-1">--</p>
-                                  )}
-                                </Card.Body>
-                              </Accordion.Collapse>
-                            </Card>
+                                  )
+                                ) : (
+                                  <p className="mt-1">--</p>
+                                )}
+                              </Accordion.Body>
+                            </Accordion.Item>
                           </Accordion>
-
                           <Accordion className="mg-b-10" defaultActiveKey="0">
-                            <Card>
-                              <div className="border-bottom">
-                                <Accordion.Toggle
-                                  as={Card.Header}
-                                  eventKey="1"
-                                  onClick={onGroupSharedWithAccordianChange}
-                                  className="border-bottom-0 d-flex align-items-center justify-content-between gds-acc-card-header"
-                                  data-id="panel"
-                                  data-cy="panel"
-                                >
-                                  <div className="d-flex align-items-center gap-half">
-                                    <img
-                                      src={groupColourIcon}
-                                      height="30px"
-                                      width="30px"
-                                    />
-                                    Groups (
-                                    {filteredGroupSharedWithMap == undefined
-                                      ? 0
-                                      : filteredGroupSharedWithMap.size}
-                                    )
-                                  </div>
-                                  {groupSharedWithAccordion ? (
-                                    <i className="fa fa-angle-up fa-lg font-weight-bold"></i>
-                                  ) : (
-                                    <i className="fa fa-angle-down fa-lg font-weight-bold"></i>
-                                  )}
-                                </Accordion.Toggle>
-                              </div>
-                              <Accordion.Collapse eventKey="1">
-                                <Card.Body>
-                                  {filteredGroupSharedWithMap != undefined &&
-                                  filteredGroupSharedWithMap.size > 0 ? (
-                                    Array.from(filteredGroupSharedWithMap).map(
-                                      ([key, value]) => (
-                                        <div
-                                          className="gds-principle-listing"
-                                          key={key}
-                                        >
-                                          <span title={key}>{key}</span>
-                                          <div className="gds-chips gap-one-fourth">
-                                            {value.map((accessObj) => (
-                                              <span
-                                                className="badge badge-light badge-sm"
-                                                title={accessObj.type}
-                                                key={accessObj.type}
-                                              >
-                                                {accessObj.type}
-                                              </span>
-                                            ))}
-                                          </div>
+                            <Accordion.Item>
+                              <Accordion.Header
+                                eventKey="1"
+                                data-id="panel"
+                                data-cy="panel"
+                              >
+                                <div className="d-flex align-items-center gap-half">
+                                  <img
+                                    src={groupColourIcon}
+                                    height="30px"
+                                    width="30px"
+                                  />
+                                  Groups (
+                                  {filteredGroupSharedWithMap == undefined
+                                    ? 0
+                                    : filteredGroupSharedWithMap.size}
+                                  )
+                                </div>
+                              </Accordion.Header>
+                              <Accordion.Body eventKey="1">
+                                {filteredGroupSharedWithMap != undefined &&
+                                filteredGroupSharedWithMap.size > 0 ? (
+                                  Array.from(filteredGroupSharedWithMap).map(
+                                    ([key, value]) => (
+                                      <div
+                                        className="gds-principle-listing"
+                                        key={key}
+                                      >
+                                        <span title={key}>{key}</span>
+                                        <div className="gds-chips gap-one-fourth">
+                                          {value.map((accessObj) => (
+                                            <span
+                                              className="badge text-bg-light badge-sm"
+                                              title={accessObj.type}
+                                              key={accessObj.type}
+                                            >
+                                              {accessObj.type}
+                                            </span>
+                                          ))}
                                         </div>
-                                      )
+                                      </div>
                                     )
-                                  ) : (
-                                    <p className="mt-1">--</p>
-                                  )}
-                                </Card.Body>
-                              </Accordion.Collapse>
-                            </Card>
+                                  )
+                                ) : (
+                                  <p className="mt-1">--</p>
+                                )}
+                              </Accordion.Body>
+                            </Accordion.Item>
                           </Accordion>
-
                           <Accordion className="mg-b-10" defaultActiveKey="0">
-                            <Card>
-                              <div className="border-bottom">
-                                <Accordion.Toggle
-                                  as={Card.Header}
-                                  eventKey="1"
-                                  onClick={onRoleSharedWithAccordianChange}
-                                  className="border-bottom-0 d-flex align-items-center justify-content-between gds-acc-card-header"
-                                  data-id="panel"
-                                  data-cy="panel"
-                                >
-                                  <div className="d-flex align-items-center gap-half">
-                                    <img
-                                      src={roleColourIcon}
-                                      height="30px"
-                                      width="30px"
-                                    />
-                                    Roles (
-                                    {filteredRoleSharedWithMap == undefined
-                                      ? 0
-                                      : filteredRoleSharedWithMap.size}
-                                    )
-                                  </div>
-                                  {roleSharedWithAccordion ? (
-                                    <i className="fa fa-angle-up fa-lg font-weight-bold"></i>
-                                  ) : (
-                                    <i className="fa fa-angle-down fa-lg font-weight-bold"></i>
-                                  )}
-                                </Accordion.Toggle>
-                              </div>
-                              <Accordion.Collapse eventKey="1">
-                                <Card.Body>
-                                  {filteredRoleSharedWithMap != undefined &&
-                                  filteredRoleSharedWithMap.size > 0 ? (
-                                    Array.from(filteredRoleSharedWithMap).map(
-                                      ([key, value]) => (
-                                        <div
-                                          className="gds-principle-listing"
-                                          key={key}
-                                        >
-                                          <span title={key}>{key}</span>
-                                          <div className="gds-chips gap-one-fourth">
-                                            {value.map((accessObj) => (
-                                              <span
-                                                className="badge badge-light badge-sm"
-                                                title={accessObj.type}
-                                                key={accessObj.type}
-                                              >
-                                                {accessObj.type}
-                                              </span>
-                                            ))}
-                                          </div>
+                            <Accordion.Item>
+                              <Accordion.Header
+                                eventKey="1"
+                                data-id="panel"
+                                data-cy="panel"
+                              >
+                                <div className="d-flex align-items-center gap-half">
+                                  <img
+                                    src={roleColourIcon}
+                                    height="30px"
+                                    width="30px"
+                                  />
+                                  Roles (
+                                  {filteredRoleSharedWithMap == undefined
+                                    ? 0
+                                    : filteredRoleSharedWithMap.size}
+                                  )
+                                </div>
+                              </Accordion.Header>
+                              <Accordion.Body eventKey="1">
+                                {filteredRoleSharedWithMap != undefined &&
+                                filteredRoleSharedWithMap.size > 0 ? (
+                                  Array.from(filteredRoleSharedWithMap).map(
+                                    ([key, value]) => (
+                                      <div
+                                        className="gds-principle-listing"
+                                        key={key}
+                                      >
+                                        <span title={key}>{key}</span>
+                                        <div className="gds-chips gap-one-fourth">
+                                          {value.map((accessObj) => (
+                                            <span
+                                              className="badge text-bg-light badge-sm"
+                                              title={accessObj.type}
+                                              key={accessObj.type}
+                                            >
+                                              {accessObj.type}
+                                            </span>
+                                          ))}
                                         </div>
-                                      )
+                                      </div>
                                     )
-                                  ) : (
-                                    <p className="mt-1">--</p>
-                                  )}
-                                </Card.Body>
-                              </Accordion.Collapse>
-                            </Card>
+                                  )
+                                ) : (
+                                  <p className="mt-1">--</p>
+                                )}
+                              </Accordion.Body>
+                            </Accordion.Item>
                           </Accordion>
                         </div>
                       </div>
@@ -2108,7 +2053,7 @@
                   userAclPerm === "AUDIT") && (
                   <Tab eventKey="history" title="HISTORY">
                     {activeKey == "history" && (
-                      <div className="gds-request-content">
+                      <div className="gds-content-border gds-request-content">
                         <div className="mb-3">
                           <div className="usr-grp-role-search-width mb-3 mg-t-20">
                             <StructuredFilter
@@ -2130,7 +2075,6 @@
                           getRowProps={(row) => ({
                             onClick: (e) => {
                               e.stopPropagation();
-                              // rowModal(row);
                             }
                           })}
                           columnHide={false}
diff --git a/security-admin/src/main/webapp/react-webapp/src/views/GovernedData/Dataset/DatashareInDatasetListComp.jsx b/security-admin/src/main/webapp/react-webapp/src/views/GovernedData/Dataset/DatashareInDatasetListComp.jsx
index 60c1f65..35370db 100644
--- a/security-admin/src/main/webapp/react-webapp/src/views/GovernedData/Dataset/DatashareInDatasetListComp.jsx
+++ b/security-admin/src/main/webapp/react-webapp/src/views/GovernedData/Dataset/DatashareInDatasetListComp.jsx
@@ -34,6 +34,7 @@
   isSystemAdmin
 } from "../../../utils/XAUtils";
 import { Button, Modal } from "react-bootstrap";
+import { statusClassMap } from "../../../utils/XAEnums";
 
 const DatashareInDatasetListComp = ({
   id,
@@ -273,20 +274,9 @@
         width: 108,
         disableSortBy: true,
         Cell: (val) => {
+          let statusVal = val.value || "DENIED";
           return (
-            <span
-              className={
-                val.value === "REQUESTED"
-                  ? "badge badge-light gds-requested-status"
-                  : val.value === "GRANTED"
-                  ? "badge badge-light gds-granted-status"
-                  : val.value === "ACTIVE"
-                  ? "badge badge-light gds-active-status"
-                  : "badge badge-light gds-denied-status"
-              }
-            >
-              {val.value}
-            </span>
+            <span className={`${statusClassMap[statusVal]}`}>{val.value}</span>
           );
         }
       },
@@ -323,7 +313,7 @@
               <Button
                 variant="outline-dark"
                 size="sm"
-                className="mr-2"
+                className="me-2"
                 style={{ height: "31px" }}
                 title="View Request"
                 onClick={() =>
@@ -337,7 +327,7 @@
               <Button
                 variant="outline-dark"
                 size="sm"
-                className="mr-2"
+                className="me-2"
                 title="View Dataset"
                 onClick={() => navigate(`/gds/dataset/${original.id}/detail`)}
                 data-name="viewDataset"
@@ -449,20 +439,9 @@
         width: 108,
         disableSortBy: true,
         Cell: (val) => {
+          let statusVal = val.value || "DENIED";
           return (
-            <span
-              className={
-                val.value === "REQUESTED"
-                  ? "badge badge-light gds-requested-status"
-                  : val.value === "GRANTED"
-                  ? "badge badge-light gds-granted-status"
-                  : val.value === "ACTIVE"
-                  ? "badge badge-light gds-active-status"
-                  : "badge badge-light gds-denied-status"
-              }
-            >
-              {val.value}
-            </span>
+            <span className={`${statusClassMap[statusVal]}`}>{val.value}</span>
           );
         }
       },
@@ -485,7 +464,7 @@
               <Button
                 variant="outline-dark"
                 size="sm"
-                className="mr-2"
+                className="me-2"
                 style={{ height: "31px" }}
                 title="View Request"
                 onClick={() =>
@@ -499,7 +478,7 @@
               <Button
                 variant="outline-dark"
                 size="sm"
-                className="mr-2"
+                className="me-2"
                 title="View Datashare"
                 onClick={() => navigate(`/gds/datashare/${original.id}/detail`)}
                 data-name="viewDatashare"
@@ -576,14 +555,6 @@
       toast.success(successMsg);
       setUpdateTable(moment.now());
       fetchShareStatusMetrics();
-
-      //   fetchDatashareRequestList(
-      //     undefined,
-      //     dataShareRequestsList.length == 1
-      //       ? requestCurrentPage - 1
-      //       : requestCurrentPage,
-      //     false
-      //   );
       setLoader(false);
     } catch (error) {
       let errorMsg = "";
diff --git a/security-admin/src/main/webapp/react-webapp/src/views/GovernedData/Dataset/PrinciplePermissionComp.jsx b/security-admin/src/main/webapp/react-webapp/src/views/GovernedData/Dataset/PrinciplePermissionComp.jsx
index e3418ae..42a7fad 100755
--- a/security-admin/src/main/webapp/react-webapp/src/views/GovernedData/Dataset/PrinciplePermissionComp.jsx
+++ b/security-admin/src/main/webapp/react-webapp/src/views/GovernedData/Dataset/PrinciplePermissionComp.jsx
@@ -66,9 +66,6 @@
   const [filteredRoleList, setFilteredRoleList] = useState(roleList);
   const [selectedACLFilter, setSelectedACLFilter] = useState({});
   const [searchPrinciple, setSearchPrinciple] = useState();
-  const [userAccordion, setUserAccordion] = useState(false);
-  const [groupAccordion, setGroupAccordion] = useState(false);
-  const [roleAccordion, setRoleAccordion] = useState(false);
   const [principleDetails, dispatch] = useReducer(
     principleFormReducer,
     initialState
@@ -195,7 +192,6 @@
     }
 
     onDataChange(tempUserList, tempGroupList, tempRoleList);
-    //setSelectedAccess({ value: "LIST", label: "LIST" });
 
     dispatch({
       type: "SET_SELECTED_PRINCIPLE",
@@ -206,18 +202,6 @@
     }
   };
 
-  const changeUserAccordion = () => {
-    setUserAccordion(!userAccordion);
-  };
-
-  const changeGroupAccordion = () => {
-    setGroupAccordion(!groupAccordion);
-  };
-
-  const changeRoleAccordion = () => {
-    setRoleAccordion(!roleAccordion);
-  };
-
   const serviceSelectTheme = (theme) => {
     return {
       ...theme,
@@ -515,212 +499,156 @@
           </div>
 
           <Accordion className="mg-b-10" defaultActiveKey="0">
-            <Card>
-              <div className="border-bottom">
-                <Accordion.Toggle
-                  as={Card.Header}
-                  eventKey="1"
-                  onClick={changeUserAccordion}
-                  className="border-bottom-0 d-flex align-items-center justify-content-between gds-acc-card-header"
-                  data-id="panel"
-                  data-cy="panel"
-                >
-                  <div className="d-flex align-items-center gap-half">
-                    <img src={userColourIcon} height="30px" width="30px" />
-                    Users (
-                    {filteredUserList == undefined
-                      ? 0
-                      : filteredUserList.length}
-                    )
-                  </div>
+            <Accordion.Item>
+              <Accordion.Header eventKey="1" data-id="panel" data-cy="panel">
+                <div className="d-flex align-items-center gap-half m-t-10 m-b-10">
+                  <img src={userColourIcon} height="30px" width="30px" />
+                  Users (
+                  {filteredUserList == undefined ? 0 : filteredUserList.length})
+                </div>
+              </Accordion.Header>
+              <Accordion.Body eventKey="1">
+                {filteredUserList != undefined &&
+                filteredUserList.length > 0 ? (
+                  filteredUserList.map((obj, index) => {
+                    return (
+                      <div className="gds-principle-listing" key={obj.name}>
+                        <span title={obj.name}>{obj.name}</span>
 
-                  {userAccordion ? (
-                    <i className="fa fa-angle-up  fa-lg font-weight-bold"></i>
-                  ) : (
-                    <i className="fa fa-angle-down  fa-lg font-weight-bold"></i>
-                  )}
-                </Accordion.Toggle>
-              </div>
-              <Accordion.Collapse eventKey="1">
-                <Card.Body>
-                  {filteredUserList != undefined &&
-                  filteredUserList.length > 0 ? (
-                    filteredUserList.map((obj, index) => {
-                      return (
-                        <div className="gds-principle-listing" key={obj.name}>
-                          <span title={obj.name}>{obj.name}</span>
-
-                          <Field
-                            name="aclPerms"
-                            render={({ input, meta }) => (
-                              <Select
-                                // {...input.value}
-                                theme={serviceSelectTheme}
-                                options={accessOptionsWithRemove}
-                                menuPortalTarget={document.body}
-                                onChange={(e) =>
-                                  handleTableSelectedValue(
-                                    e,
-                                    input,
-                                    index,
-                                    obj.name,
-                                    "USER"
-                                  )
-                                }
-                                menuPlacement="auto"
-                                defaultValue={[
-                                  { label: obj.perm, value: obj.perm }
-                                ]}
-                                isDisabled={isDetailView && !isAdmin}
-                              />
-                            )}
-                          />
-                        </div>
-                      );
-                    })
-                  ) : (
-                    <p className="mt-1">--</p>
-                  )}
-                </Card.Body>
-              </Accordion.Collapse>
-            </Card>
+                        <Field
+                          name="aclPerms"
+                          render={({ input, meta }) => (
+                            <Select
+                              theme={serviceSelectTheme}
+                              options={accessOptionsWithRemove}
+                              menuPortalTarget={document.body}
+                              onChange={(e) =>
+                                handleTableSelectedValue(
+                                  e,
+                                  input,
+                                  index,
+                                  obj.name,
+                                  "USER"
+                                )
+                              }
+                              menuPlacement="auto"
+                              defaultValue={[
+                                { label: obj.perm, value: obj.perm }
+                              ]}
+                              isDisabled={isDetailView && !isAdmin}
+                            />
+                          )}
+                        />
+                      </div>
+                    );
+                  })
+                ) : (
+                  <p className="mt-1">--</p>
+                )}
+              </Accordion.Body>
+            </Accordion.Item>
           </Accordion>
 
           <Accordion className="mg-b-10" defaultActiveKey="0">
-            <Card>
-              <div className="border-bottom">
-                <Accordion.Toggle
-                  as={Card.Header}
-                  eventKey="1"
-                  onClick={changeGroupAccordion}
-                  className="border-bottom-0 d-flex align-items-center justify-content-between gds-acc-card-header"
-                  data-id="panel"
-                  data-cy="panel"
-                >
-                  <div className="d-flex align-items-center gap-half">
-                    <img src={groupColourIcon} height="30px" width="30px" />
-                    Groups (
-                    {filteredGroupList == undefined
-                      ? 0
-                      : filteredGroupList.length}
-                    )
-                  </div>
-                  {groupAccordion ? (
-                    <i className="fa fa-angle-up fa-lg font-weight-bold"></i>
-                  ) : (
-                    <i className="fa fa-angle-down fa-lg font-weight-bold"></i>
-                  )}
-                </Accordion.Toggle>
-              </div>
-              <Accordion.Collapse eventKey="1">
-                <Card.Body>
-                  {filteredGroupList != undefined &&
-                  filteredGroupList.length > 0 ? (
-                    filteredGroupList.map((obj, index) => {
-                      return (
-                        <div className="gds-principle-listing" key={obj.name}>
-                          <span title={obj.name}>{obj.name}</span>
-                          <Field
-                            name="aclPerms"
-                            render={({ input, meta }) => (
-                              <Select
-                                theme={serviceSelectTheme}
-                                options={accessOptionsWithRemove}
-                                menuPortalTarget={document.body}
-                                onChange={(e) =>
-                                  handleTableSelectedValue(
-                                    e,
-                                    input,
-                                    index,
-                                    obj.name,
-                                    "GROUP"
-                                  )
-                                }
-                                menuPlacement="auto"
-                                defaultValue={[
-                                  { label: obj.perm, value: obj.perm }
-                                ]}
-                                isDisabled={isDetailView && !isAdmin}
-                              />
-                            )}
-                          />
-                        </div>
-                      );
-                    })
-                  ) : (
-                    <p className="mt-1">--</p>
-                  )}
-                </Card.Body>
-              </Accordion.Collapse>
-            </Card>
+            <Accordion.Item>
+              <Accordion.Header eventKey="1" data-id="panel" data-cy="panel">
+                <div className="d-flex align-items-center gap-half">
+                  <img src={groupColourIcon} height="30px" width="30px" />
+                  Groups (
+                  {filteredGroupList == undefined
+                    ? 0
+                    : filteredGroupList.length}
+                  )
+                </div>
+              </Accordion.Header>
+              <Accordion.Body eventKey="1">
+                {filteredGroupList != undefined &&
+                filteredGroupList.length > 0 ? (
+                  filteredGroupList.map((obj, index) => {
+                    return (
+                      <div className="gds-principle-listing" key={obj.name}>
+                        <span title={obj.name}>{obj.name}</span>
+                        <Field
+                          name="aclPerms"
+                          render={({ input, meta }) => (
+                            <Select
+                              theme={serviceSelectTheme}
+                              options={accessOptionsWithRemove}
+                              menuPortalTarget={document.body}
+                              onChange={(e) =>
+                                handleTableSelectedValue(
+                                  e,
+                                  input,
+                                  index,
+                                  obj.name,
+                                  "GROUP"
+                                )
+                              }
+                              menuPlacement="auto"
+                              defaultValue={[
+                                { label: obj.perm, value: obj.perm }
+                              ]}
+                              isDisabled={isDetailView && !isAdmin}
+                            />
+                          )}
+                        />
+                      </div>
+                    );
+                  })
+                ) : (
+                  <p className="mt-1">--</p>
+                )}
+              </Accordion.Body>
+            </Accordion.Item>
           </Accordion>
 
           <Accordion className="mg-b-10" defaultActiveKey="0">
-            <Card>
-              <div className="border-bottom">
-                <Accordion.Toggle
-                  as={Card.Header}
-                  eventKey="1"
-                  onClick={changeRoleAccordion}
-                  className="border-bottom-0 d-flex align-items-center justify-content-between gds-acc-card-header"
-                  data-id="panel"
-                  data-cy="panel"
-                >
-                  <div className="d-flex align-items-center gap-half">
-                    <img src={roleColourIcon} height="30px" width="30px" />
-                    Roles (
-                    {filteredRoleList == undefined
-                      ? 0
-                      : filteredRoleList.length}
-                    )
-                  </div>
-                  {roleAccordion ? (
-                    <i className="fa fa-angle-up fa-lg font-weight-bold"></i>
-                  ) : (
-                    <i className="fa fa-angle-down fa-lg font-weight-bold"></i>
-                  )}
-                </Accordion.Toggle>
-              </div>
-              <Accordion.Collapse eventKey="1">
-                <Card.Body>
-                  {filteredRoleList?.length > 0 ? (
-                    filteredRoleList.map((obj, index) => {
-                      return (
-                        <div className="gds-principle-listing" key={obj.name}>
-                          <span title={obj.name}>{obj.name}</span>
-                          <Field
-                            name="aclPerms"
-                            render={({ input, meta }) => (
-                              <Select
-                                theme={serviceSelectTheme}
-                                options={accessOptionsWithRemove}
-                                menuPortalTarget={document.body}
-                                onChange={(e) =>
-                                  handleTableSelectedValue(
-                                    e,
-                                    input,
-                                    index,
-                                    obj.name,
-                                    "ROLE"
-                                  )
-                                }
-                                isDisabled={isDetailView && !isAdmin}
-                                menuPlacement="auto"
-                                defaultValue={[
-                                  { label: obj.perm, value: obj.perm }
-                                ]}
-                              />
-                            )}
-                          />
-                        </div>
-                      );
-                    })
-                  ) : (
-                    <p className="mt-1">--</p>
-                  )}
-                </Card.Body>
-              </Accordion.Collapse>
-            </Card>
+            <Accordion.Item>
+              <Accordion.Header eventKey="1" data-id="panel" data-cy="panel">
+                <div className="d-flex align-items-center gap-half">
+                  <img src={roleColourIcon} height="30px" width="30px" />
+                  Roles (
+                  {filteredRoleList == undefined ? 0 : filteredRoleList.length})
+                </div>
+              </Accordion.Header>
+              <Accordion.Body eventKey="1">
+                {filteredRoleList?.length > 0 ? (
+                  filteredRoleList.map((obj, index) => {
+                    return (
+                      <div className="gds-principle-listing" key={obj.name}>
+                        <span title={obj.name}>{obj.name}</span>
+                        <Field
+                          name="aclPerms"
+                          render={({ input, meta }) => (
+                            <Select
+                              theme={serviceSelectTheme}
+                              options={accessOptionsWithRemove}
+                              menuPortalTarget={document.body}
+                              onChange={(e) =>
+                                handleTableSelectedValue(
+                                  e,
+                                  input,
+                                  index,
+                                  obj.name,
+                                  "ROLE"
+                                )
+                              }
+                              isDisabled={isDetailView && !isAdmin}
+                              menuPlacement="auto"
+                              defaultValue={[
+                                { label: obj.perm, value: obj.perm }
+                              ]}
+                            />
+                          )}
+                        />
+                      </div>
+                    );
+                  })
+                ) : (
+                  <p className="mt-1">--</p>
+                )}
+              </Accordion.Body>
+            </Accordion.Item>
           </Accordion>
         </Card>
       </div>
diff --git a/security-admin/src/main/webapp/react-webapp/src/views/GovernedData/Datashare/AddSharedResourceComp.jsx b/security-admin/src/main/webapp/react-webapp/src/views/GovernedData/Datashare/AddSharedResourceComp.jsx
index 911e257..4009b83 100755
--- a/security-admin/src/main/webapp/react-webapp/src/views/GovernedData/Datashare/AddSharedResourceComp.jsx
+++ b/security-admin/src/main/webapp/react-webapp/src/views/GovernedData/Datashare/AddSharedResourceComp.jsx
@@ -58,7 +58,6 @@
     showModal ? true : false
   );
   let closeModalFag = false;
-  const [openConfigAccordion, setOpenConfigAccordion] = useState(false);
   const [formData, setFormData] = useState();
   const [selectedResShareMask, setSelectedResShareMask] = useState({});
   const { allServiceDefs } = getServiceDef();
@@ -130,10 +129,6 @@
     return data;
   };
 
-  const onAccessConfigAccordianChange = () => {
-    setOpenConfigAccordion(!openConfigAccordion);
-  };
-
   const noneOptions = {
     label: "None",
     value: "none"
@@ -304,14 +299,14 @@
               <div className="mb-2 gds-chips flex-wrap">
                 <span
                   title={datashareInfo?.name}
-                  className="badge badge-light text-truncate"
+                  className="badge text-bg-light text-truncate"
                   style={{ maxWidth: "250px", display: "inline-block" }}
                 >
                   Datashare: {datashareInfo?.name}
                 </span>
                 <span
                   title={datashareInfo?.service}
-                  className="badge badge-light text-truncate"
+                  className="badge text-bg-light text-truncate"
                   style={{ maxWidth: "250px", display: "inline-block" }}
                 >
                   Service: {datashareInfo?.service}
@@ -319,7 +314,7 @@
                 {datashareInfo?.zone != undefined ? (
                   <span
                     title={datashareInfo.zone}
-                    className="badge badge-light text-truncate"
+                    className="badge text-bg-light text-truncate"
                     style={{ maxWidth: "250px", display: "inline-block" }}
                   >
                     Security Zone: {datashareInfo.zone}
@@ -374,10 +369,9 @@
                         </div>
                         <div className="mb-3 form-group row">
                           <Col sm={3}>
-                            <label className="form-label pull-right fnt-14">
-                              Shared Resource Name
+                            <label className="form-label float-end fnt-14">
+                              Shared Resource Name *
                             </label>
-                            <span className="compulsory-resource top-0">*</span>
                           </Col>
                           <Col sm={9}>
                             <Field
@@ -409,177 +403,164 @@
                         </div>
 
                         <Accordion className="mb-3" defaultActiveKey="0">
-                          <Card className="border-0 gds-resource-options">
-                            <div>
-                              <Accordion.Toggle
-                                as={Card.Header}
-                                eventKey="1"
-                                onClick={onAccessConfigAccordianChange}
-                                className="d-flex align-items-center gds-res-acc-header gap-half"
-                                data-id="panel"
-                                data-cy="panel"
-                              >
-                                {openConfigAccordion ? (
-                                  <i className="fa fa-angle-up pull-up fa-lg font-weight-bold"></i>
-                                ) : (
-                                  <i className="fa fa-angle-down pull-down fa-lg font-weight-bold"></i>
-                                )}
-                                <Link to="">
-                                  Add permission and conditions (Optional)
-                                </Link>
-                              </Accordion.Toggle>
-                            </div>
-                            <Accordion.Collapse eventKey="1">
-                              <Card.Body className="gds-res-card-body">
+                          <Accordion.Item>
+                            <Accordion.Header
+                              className="border-0"
+                              eventKey="1"
+                              data-id="panel"
+                              data-cy="panel"
+                            >
+                              Add permission and conditions (Optional)
+                            </Accordion.Header>
+                            <Accordion.Body eventKey="1">
+                              <div className="mb-3 form-group row">
+                                <Col sm={3}>
+                                  <label className="form-label float-end fnt-14">
+                                    Permission
+                                  </label>
+                                </Col>
+                                <Field
+                                  name="permission"
+                                  render={({ input, meta }) => (
+                                    <Col sm={9}>
+                                      <Select
+                                        {...input}
+                                        options={getAccessTypeOptions(values)}
+                                        onChange={(e) =>
+                                          onAccessTypeChange(e, input)
+                                        }
+                                        menuPlacement="auto"
+                                        isClearable
+                                        isMulti
+                                      />
+                                    </Col>
+                                  )}
+                                />
+                              </div>
+                              {false && showRowFilterInput ? (
                                 <div className="mb-3 form-group row">
                                   <Col sm={3}>
-                                    <label className="form-label pull-right fnt-14">
-                                      Permission
+                                    <label className="form-label float-end fnt-14">
+                                      Row Filter
                                     </label>
                                   </Col>
+
                                   <Field
-                                    name="permission"
+                                    name={`rowFilter`}
                                     render={({ input, meta }) => (
                                       <Col sm={9}>
-                                        <Select
+                                        <input
                                           {...input}
-                                          options={getAccessTypeOptions(values)}
-                                          onChange={(e) =>
-                                            onAccessTypeChange(e, input)
-                                          }
-                                          menuPlacement="auto"
-                                          isClearable
-                                          isMulti
+                                          type="text"
+                                          name="rowFilter"
+                                          className="form-control gds-placeholder"
+                                          data-cy="rowFilter"
                                         />
                                       </Col>
                                     )}
                                   />
                                 </div>
-                                {false && showRowFilterInput ? (
-                                  <div className="mb-3 form-group row">
-                                    <Col sm={3}>
-                                      <label className="form-label pull-right fnt-14">
-                                        Row Filter
-                                      </label>
-                                    </Col>
+                              ) : (
+                                <div></div>
+                              )}
 
-                                    <Field
-                                      name={`rowFilter`}
-                                      render={({ input, meta }) => (
-                                        <Col sm={9}>
-                                          <input
-                                            {...input}
-                                            type="text"
-                                            name="rowFilter"
-                                            className="form-control gds-placeholder"
-                                            data-cy="rowFilter"
-                                          />
-                                        </Col>
-                                      )}
-                                    />
-                                  </div>
-                                ) : (
-                                  <div></div>
-                                )}
+                              {false && showMaskInput ? (
+                                <div className="mb-3 form-group row">
+                                  <Col sm={3}>
+                                    <label className="form-label float-end fnt-14">
+                                      Mask
+                                    </label>
+                                  </Col>
 
-                                {false && showMaskInput ? (
-                                  <div className="mb-3 form-group row">
-                                    <Col sm={3}>
-                                      <label className="form-label pull-right fnt-14">
-                                        Mask
-                                      </label>
-                                    </Col>
-
-                                    <Field
-                                      name={`maskType`}
-                                      render={({ input, meta }) => (
-                                        <Col sm={9}>
-                                          <Field
-                                            name="masking"
-                                            render={({ input, meta }) => (
-                                              <div className="d-flex ">
-                                                <div className="w-50">
-                                                  <Select
-                                                    {...input}
-                                                    options={
-                                                      serviceDef.dataMaskDef
-                                                        .maskTypes
-                                                    }
-                                                    onChange={(e) =>
-                                                      onResShareMaskChange(
-                                                        e,
-                                                        input
-                                                      )
-                                                    }
-                                                    menuPlacement="auto"
-                                                    isClearable
+                                  <Field
+                                    name={`maskType`}
+                                    render={({ input, meta }) => (
+                                      <Col sm={9}>
+                                        <Field
+                                          name="masking"
+                                          render={({ input, meta }) => (
+                                            <div className="d-flex ">
+                                              <div className="w-50">
+                                                <Select
+                                                  {...input}
+                                                  options={
+                                                    serviceDef.dataMaskDef
+                                                      .maskTypes
+                                                  }
+                                                  onChange={(e) =>
+                                                    onResShareMaskChange(
+                                                      e,
+                                                      input
+                                                    )
+                                                  }
+                                                  menuPlacement="auto"
+                                                  isClearable
+                                                />
+                                              </div>
+                                              {selectedResShareMask?.label ==
+                                                "Custom" && (
+                                                <div className="pl-2 w-50">
+                                                  <Field
+                                                    className="form-control"
+                                                    name={`resShareDataMaskInfo.valueExpr`}
+                                                    validate={required}
+                                                    render={({
+                                                      input,
+                                                      meta
+                                                    }) => (
+                                                      <>
+                                                        <FormB.Control
+                                                          type="text"
+                                                          className="gds-input"
+                                                          {...input}
+                                                          placeholder="Enter masked value or expression..."
+                                                        />
+                                                        {meta.error &&
+                                                          meta.touched && (
+                                                            <span className="invalid-field">
+                                                              {meta.error}
+                                                            </span>
+                                                          )}
+                                                      </>
+                                                    )}
                                                   />
                                                 </div>
-                                                {selectedResShareMask?.label ==
-                                                  "Custom" && (
-                                                  <div className="pl-2 w-50">
-                                                    <Field
-                                                      className="form-control"
-                                                      name={`resShareDataMaskInfo.valueExpr`}
-                                                      validate={required}
-                                                      render={({
-                                                        input,
-                                                        meta
-                                                      }) => (
-                                                        <>
-                                                          <FormB.Control
-                                                            type="text"
-                                                            className="gds-input"
-                                                            {...input}
-                                                            placeholder="Enter masked value or expression..."
-                                                          />
-                                                          {meta.error &&
-                                                            meta.touched && (
-                                                              <span className="invalid-field">
-                                                                {meta.error}
-                                                              </span>
-                                                            )}
-                                                        </>
-                                                      )}
-                                                    />
-                                                  </div>
-                                                )}
-                                              </div>
-                                            )}
-                                          />
-                                        </Col>
-                                      )}
-                                    />
-                                  </div>
-                                ) : (
-                                  <div></div>
-                                )}
-
-                                <div className="mb-0 form-group row">
-                                  <Col sm={3}>
-                                    <label className="form-label pull-right fnt-14">
-                                      Condition
-                                    </label>
-                                  </Col>
-                                  <Field
-                                    name={`booleanExpression`}
-                                    render={({ input, meta }) => (
-                                      <Col sm={9}>
-                                        <textarea
-                                          {...input}
-                                          placeholder="Enter Boolean Expression"
-                                          className="form-control gds-placeholder"
-                                          id="booleanExpression"
-                                          data-cy="booleanExpression"
-                                          rows={4}
+                                              )}
+                                            </div>
+                                          )}
                                         />
                                       </Col>
                                     )}
                                   />
                                 </div>
-                              </Card.Body>
-                            </Accordion.Collapse>
-                          </Card>
+                              ) : (
+                                <div></div>
+                              )}
+
+                              <div className="mb-0 form-group row">
+                                <Col sm={3}>
+                                  <label className="form-label float-end fnt-14">
+                                    Condition
+                                  </label>
+                                </Col>
+                                <Field
+                                  name={`booleanExpression`}
+                                  render={({ input, meta }) => (
+                                    <Col sm={9}>
+                                      <textarea
+                                        {...input}
+                                        placeholder="Enter Boolean Expression"
+                                        className="form-control gds-placeholder"
+                                        id="booleanExpression"
+                                        data-cy="booleanExpression"
+                                        rows={4}
+                                      />
+                                    </Col>
+                                  )}
+                                />
+                              </div>
+                            </Accordion.Body>
+                          </Accordion.Item>
                         </Accordion>
                       </Modal.Body>
                       <Modal.Footer>
diff --git a/security-admin/src/main/webapp/react-webapp/src/views/GovernedData/Datashare/DatashareDetailFullView.jsx b/security-admin/src/main/webapp/react-webapp/src/views/GovernedData/Datashare/DatashareDetailFullView.jsx
index 6edb259..7bccf35 100644
--- a/security-admin/src/main/webapp/react-webapp/src/views/GovernedData/Datashare/DatashareDetailFullView.jsx
+++ b/security-admin/src/main/webapp/react-webapp/src/views/GovernedData/Datashare/DatashareDetailFullView.jsx
@@ -28,6 +28,7 @@
 import PrinciplePermissionComp from "../Dataset/PrinciplePermissionComp";
 import ReactPaginate from "react-paginate";
 import { isSystemAdmin } from "../../../utils/XAUtils";
+import { statusClassMap } from "../../../utils/XAEnums";
 
 const DatashareDetailFullView = () => {
   let { datashareId } = useParams();
@@ -357,9 +358,8 @@
                         // <ResourceAccordian item={obj} />
                         <div>
                           <Accordion className="mg-b-10" defaultActiveKey="0">
-                            <div className="border-bottom">
-                              <Accordion.Toggle
-                                as={Card.Header}
+                            <Accordion.Item className="border-bottom">
+                              <Accordion.Header
                                 eventKey={obj.id}
                                 onClick={() =>
                                   onSharedResourceAccordionChange(obj.id)
@@ -380,8 +380,8 @@
                                     </div>
                                   </div>
                                 </div>
-                              </Accordion.Toggle>
-                              <Accordion.Collapse eventKey={obj.id}>
+                              </Accordion.Header>
+                              <Accordion.Body eventKey={obj.id}>
                                 <Card.Body>
                                   <div className="gds-added-res-listing">
                                     {Object.entries(obj.resource).map(
@@ -422,8 +422,8 @@
                                     </div>
                                   </div>
                                 </Card.Body>
-                              </Accordion.Collapse>
-                            </div>
+                              </Accordion.Body>
+                            </Accordion.Item>
                           </Accordion>
                         </div>
                       );
@@ -460,12 +460,12 @@
                     {dataShareRequestsList != undefined &&
                     dataShareRequestsList.length > 0 ? (
                       dataShareRequestsList.map((obj, index) => {
+                        let statusVal = obj["status"] || "DENIED";
                         return (
                           <div>
                             <Accordion className="mg-b-10" defaultActiveKey="0">
-                              <div className="border-bottom">
-                                <Accordion.Toggle
-                                  as={Card.Header}
+                              <Accordion.Item className="border-bottom">
+                                <Accordion.Header
                                   eventKey="1"
                                   onClick={() =>
                                     onRequestAccordionChange(obj.id)
@@ -487,15 +487,7 @@
                                     </div>
                                     <div className="d-flex align-items-center gap-half">
                                       <span
-                                        className={
-                                          obj["status"] === "REQUESTED"
-                                            ? "badge badge-light gds-requested-status"
-                                            : obj["status"] === "GRANTED"
-                                            ? "badge badge-light gds-granted-status"
-                                            : obj["status"] === "ACTIVE"
-                                            ? "badge badge-light gds-active-status"
-                                            : "badge badge-light gds-denied-status"
-                                        }
+                                        className={`${statusClassMap[statusVal]}`}
                                       >
                                         {obj["status"]}
                                       </span>
@@ -515,8 +507,8 @@
                                       </Button>
                                     </div>
                                   </div>
-                                </Accordion.Toggle>
-                                <Accordion.Collapse eventKey="1">
+                                </Accordion.Header>
+                                <Accordion.Body eventKey="1">
                                   <Card.Body>
                                     <div className="d-flex justify-content-between">
                                       {false && (
@@ -594,7 +586,7 @@
                                             )}
                                           </div>
                                         </div>
-                                        <div className="w-100 text-right">
+                                        <div className="w-100 text-end">
                                           <div>
                                             <Link
                                               to={`/gds/request/detail/${obj.id}`}
@@ -606,8 +598,8 @@
                                       </div>
                                     </div>
                                   </Card.Body>
-                                </Accordion.Collapse>
-                              </div>
+                                </Accordion.Body>
+                              </Accordion.Item>
                             </Accordion>
                           </div>
                         );
diff --git a/security-admin/src/main/webapp/react-webapp/src/views/GovernedData/Datashare/DatashareDetailLayout.jsx b/security-admin/src/main/webapp/react-webapp/src/views/GovernedData/Datashare/DatashareDetailLayout.jsx
index 928f2a8..2b38a52 100755
--- a/security-admin/src/main/webapp/react-webapp/src/views/GovernedData/Datashare/DatashareDetailLayout.jsx
+++ b/security-admin/src/main/webapp/react-webapp/src/views/GovernedData/Datashare/DatashareDetailLayout.jsx
@@ -553,8 +553,7 @@
     datashareInfo.conditionExpr = datashareConditionExpr;
     datashareInfo.defaultAccessTypes = [];
 
-    if(datashareName.length>512)
-    {
+    if (datashareName.length > 512) {
       toast.error("Datashare name must be 512 characters or less!");
       return;
     }
@@ -918,7 +917,7 @@
               <div className="gds-chips gap-one-fourth">
                 {original.accessTypes?.map((accessObj) => (
                   <span
-                    className="badge badge-light badge-sm"
+                    className="badge text-bg-light badge-sm"
                     title={accessObj}
                     key={accessObj}
                   >
@@ -1095,7 +1094,7 @@
               </Button>
               <h3 className="gds-header bold">
                 <div className="d-flex align-items-center">
-                  <span className="mr-1">Datashare: </span>
+                  <span className="me-1">Datashare: </span>
                   {!datashareNameEditable ? (
                     <div>
                       <span
@@ -1473,7 +1472,7 @@
                     </Tab>
                     <Tab eventKey="resources" title="RESOURCES">
                       {activeKey == "resources" ? (
-                        <div className="gds-request-content">
+                        <div className="gds-content-border gds-request-content">
                           <div className="mb-3">
                             <div className="w-100 d-flex gap-1 mb-3 mg-t-20">
                               <StructuredFilter
@@ -1662,7 +1661,7 @@
                       userAclPerm == "AUDIT") && (
                       <Tab eventKey="history" title="HISTORY">
                         {activeKey == "history" && (
-                          <div className="gds-request-content">
+                          <div className="gds-content-border gds-request-content">
                             <div className="mb-3">
                               <div className="usr-grp-role-search-width mb-3 mg-t-20">
                                 <StructuredFilter
diff --git a/security-admin/src/main/webapp/react-webapp/src/views/GovernedData/Request/RequestDetailView.jsx b/security-admin/src/main/webapp/react-webapp/src/views/GovernedData/Request/RequestDetailView.jsx
index f2b5a46..b1c1d4b 100755
--- a/security-admin/src/main/webapp/react-webapp/src/views/GovernedData/Request/RequestDetailView.jsx
+++ b/security-admin/src/main/webapp/react-webapp/src/views/GovernedData/Request/RequestDetailView.jsx
@@ -31,6 +31,7 @@
 import { isEmpty } from "lodash";
 import { toast } from "react-toastify";
 import { getAllTimeZoneList } from "../../../utils/XAUtils";
+import { statusClassMap } from "../../../utils/XAEnums";
 
 const RequestDetailView = () => {
   let { requestId } = useParams();
@@ -155,6 +156,8 @@
     }
   };
 
+  const statusVal = requestInfo.status || "DENIED";
+
   return (
     <>
       <Form
@@ -222,24 +225,14 @@
             {loader ? (
               <Loader />
             ) : (
-              <div className="gds-request-content pt-5">
+              <div className="gds-content-border gds-request-content pt-5">
                 <div className="d-flex justify-content-between">
                   <div className="gds-inline-field-grp">
                     <div className="wrapper">
                       <div className="gds-left-inline-field" height="30px">
                         <span className="gds-label-color">Status</span>
                       </div>
-                      <span
-                        className={
-                          requestInfo.status === "REQUESTED"
-                            ? "badge badge-light gds-requested-status"
-                            : requestInfo.status === "GRANTED"
-                            ? "badge badge-light gds-granted-status"
-                            : requestInfo.status === "ACTIVE"
-                            ? "badge badge-light gds-active-status"
-                            : "badge badge-light gds-denied-status"
-                        }
-                      >
+                      <span className={`${statusClassMap[statusVal]}`}>
                         {requestInfo.status}
                       </span>
                     </div>