diff --git a/frontend/src/pages/manage-data/DataDetail.jsx b/frontend/src/pages/manage-data/DataDetail.jsx
index 9db85dda1..8219136a9 100644
--- a/frontend/src/pages/manage-data/DataDetail.jsx
+++ b/frontend/src/pages/manage-data/DataDetail.jsx
@@ -253,7 +253,7 @@ const DataDetail = ({
         ))}
       </div>
       {!isPublic && (
-        <div>
+        <div className="button-save">
           <Space>
             <Button
               type="primary"
diff --git a/frontend/src/pages/manage-data/ManageData.jsx b/frontend/src/pages/manage-data/ManageData.jsx
index 01faf427f..000754958 100644
--- a/frontend/src/pages/manage-data/ManageData.jsx
+++ b/frontend/src/pages/manage-data/ManageData.jsx
@@ -17,7 +17,7 @@ import {
   ExclamationCircleOutlined,
   DeleteOutlined,
 } from "@ant-design/icons";
-import { api, store, uiText } from "../../lib";
+import { api, config, store, uiText } from "../../lib";
 import DataDetail from "./DataDetail";
 import { DataFilters, Breadcrumbs, DescriptionPanel } from "../../components";
 import { useNotification } from "../../util/hooks";
@@ -33,6 +33,7 @@ const ManageData = () => {
   const [updateRecord, setUpdateRecord] = useState(false);
   const [deleteData, setDeleteData] = useState(null);
   const [deleting, setDeleting] = useState(false);
+  const [editable, setEditable] = useState(false);
   const { language, advancedFilters } = store.useState((s) => s);
   const { active: activeLang } = language;
   const text = useMemo(() => {
@@ -49,9 +50,19 @@ const ManageData = () => {
     },
   ];
 
-  const { administration, selectedForm, questionGroups } = store.useState(
-    (state) => state
-  );
+  const {
+    administration,
+    selectedForm,
+    questionGroups,
+    user: authUser,
+  } = store.useState((state) => state);
+
+  useEffect(() => {
+    const currentUser = config.roles.find(
+      (role) => role.name === authUser?.role_detail?.name
+    );
+    setEditable(!currentUser?.delete_data);
+  }, [authUser]);
 
   const isAdministrationLoaded = administration.length;
   const selectedAdministration =
@@ -211,6 +222,7 @@ const ManageData = () => {
                       updateRecord={updateRecord}
                       updater={setUpdateRecord}
                       setDeleteData={setDeleteData}
+                      isPublic={editable}
                     />
                   ),
                   expandIcon: ({ expanded, onExpand, record }) =>
diff --git a/frontend/src/pages/manage-data/style.scss b/frontend/src/pages/manage-data/style.scss
index de9d3ca46..59270e93a 100644
--- a/frontend/src/pages/manage-data/style.scss
+++ b/frontend/src/pages/manage-data/style.scss
@@ -2,6 +2,10 @@
 
 #root {
   #manageData {
+    tr.ant-table-expanded-row:hover > td,
+    tr.ant-table-expanded-row > td {
+      padding: 48px 16px 16px;
+    }
     .data-detail {
       height: 450px;
       overflow-y: scroll;
@@ -59,5 +63,10 @@
         }
       }
     }
+    .button-save {
+      position: absolute;
+      top: 0px;
+      right: 22px;
+    }
   }
 }