diff --git a/public/index.html b/public/index.html
index 2f85270..d0ab5a0 100644
--- a/public/index.html
+++ b/public/index.html
@@ -26,7 +26,7 @@
       work correctly both with client-side routing and a non-root public URL.
       Learn how to configure a non-root public URL by running `npm run build`.
     -->
-    <title>React App</title>
+    <title>PPOB</title>
 </head>
 <body>
 <noscript>You need to enable JavaScript to run this app.</noscript>
diff --git a/public/manifest.json b/public/manifest.json
index 080d6c7..fe12121 100644
--- a/public/manifest.json
+++ b/public/manifest.json
@@ -1,6 +1,6 @@
 {
-  "short_name": "React App",
-  "name": "Create React App Sample",
+  "short_name": "PPOB",
+  "name": "PPOB",
   "icons": [
     {
       "src": "favicon.ico",
diff --git a/src/pages/Membership/Membership.js b/src/pages/Membership/Membership.js
index 3db8042..c38a993 100644
--- a/src/pages/Membership/Membership.js
+++ b/src/pages/Membership/Membership.js
@@ -106,8 +106,9 @@ export const Membership = observer(() => {
   const columns = [
     {
       title: "Name",
-      dataIndex: "username",
-      key: "username",
+      dataIndex: "name",
+      key: "name",
+      render: (text, record) => record?.name ?? record?.username,
     },
     {
       title: "Username",
@@ -138,7 +139,7 @@ export const Membership = observer(() => {
       render: (text, record) => (
         <Space size="middle">
           <Button
-            type={record?.status === true ? "danger" : "primary"}
+            type={record?.isActive === true ? "danger" : "primary"}
             onClick={() => changeStatus(record?.id, record?.isActive)}
           >
             {record?.isActive === true ? "Inactive" : "Active"}
diff --git a/src/pages/Membership/MembershipModal.js b/src/pages/Membership/MembershipModal.js
index bfc0a59..bf8225d 100644
--- a/src/pages/Membership/MembershipModal.js
+++ b/src/pages/Membership/MembershipModal.js
@@ -52,6 +52,15 @@ export const MembershipModal = ({
         initialValues={initialData}
       >
         {((initialData.id && !initialData.isChangePassword) || !initialData.id) && (
+          <Form.Item
+            name="name"
+            label="Name"
+            rules={[{ required: true, message: "Please input Name!" }]}
+          >
+            <Input />
+          </Form.Item>
+        )}
+        {!initialData.id && (
           <Form.Item
             name="username"
             label="Username"
diff --git a/src/pages/Profile/Profile.js b/src/pages/Profile/Profile.js
index 27ec245..a0aa58e 100644
--- a/src/pages/Profile/Profile.js
+++ b/src/pages/Profile/Profile.js
@@ -5,6 +5,7 @@ import {LINKS} from "../../routes/app";
 import {useStore} from "../../utils/useStore";
 import {observer} from "mobx-react-lite";
 import {FilterOutlined} from "@ant-design/icons";
+import {format, parseISO} from "date-fns";
 
 const {Title, Text} = Typography;
 
@@ -47,6 +48,11 @@ export const Profile = observer(() => {
             title: 'Transaction Date',
             dataIndex: 'created_at',
             key: 'created_at',
+            render: (text, record) => {
+                return (
+                    <Text>{format(parseISO(record.created_at), 'dd MMMM yyyy HH:mm')}</Text>
+                )
+            },
         },
     ]
 
diff --git a/src/store/membership.js b/src/store/membership.js
index e6398fe..989bbf2 100644
--- a/src/store/membership.js
+++ b/src/store/membership.js
@@ -17,9 +17,13 @@ export class Membership {
          
         this.data = response.body.data.map((item, idx) => {
             item.key = idx;
-            item.roleName = item.roles.name;
+            item.name = item?.user_detail?.name;
+            item.roleId = item?.roles.id;
+            item.roleName = item?.roles.name;
             return item
         }) ?? []
+
+        console.log(JSON.stringify(this.data), "DATA");
         
         this.total_data = response.body.total_data ?? 0
     }
@@ -28,7 +32,9 @@ export class Membership {
         const response = await http.get(`/users/find-by-supperior?page=${this.page}&pageSize=${this.pageSize}`);
         this.data = response.body.data.map((item, idx) => {
             item.key = idx;
-            item.roleName = item.roles.name;
+            item.name = item?.user_detail?.name;
+            item.roleId = item?.roles.id;
+            item.roleName = item?.roles?.name;
             return item
         }) ?? []
         
