diff --git a/sigap-website/app/(pages)/(admin)/dashboard/user-management/_components/sheets/user-information-sheet.tsx b/sigap-website/app/(pages)/(admin)/dashboard/user-management/_components/sheets/user-information-sheet.tsx
index 545555c..a5c8d8d 100644
--- a/sigap-website/app/(pages)/(admin)/dashboard/user-management/_components/sheets/user-information-sheet.tsx
+++ b/sigap-website/app/(pages)/(admin)/dashboard/user-management/_components/sheets/user-information-sheet.tsx
@@ -1,4 +1,4 @@
-// components/user-management/sheet/user-information-sheet.tsx
+// components/selectedUser-management/sheet/selectedUser-information-sheet.tsx
 import { useState } from "react";
 import {
   Sheet,
@@ -19,26 +19,26 @@ import { UserOverviewTab } from "../tabs/user-overview-tab";
 
 interface UserInformationSheetProps {
   open: boolean;
-  user: IUserSchema;
+  selectedUser: IUserSchema;
   onOpenChange: (open: boolean) => void;
 }
 
 export function UserInformationSheet({
   open,
   onOpenChange,
-  user,
+  selectedUser,
 }: UserInformationSheetProps) {
   const [activeTab, setActiveTab] = useState("overview");
 
   const {
     handleCopyItem,
-  } = useUserDetailSheetHandlers({ open, user, onOpenChange });
+  } = useUserDetailSheetHandlers({ open, selectedUser, onOpenChange });
 
   const getUserStatusBadge = () => {
-    if (user.banned_until) {
+    if (selectedUser.banned_until) {
       return <Badge variant="destructive">Banned</Badge>;
     }
-    if (!user.email_confirmed_at) {
+    if (!selectedUser.email_confirmed_at) {
       return <Badge variant="outline">Unconfirmed</Badge>;
     }
     return <Badge variant="default">Active</Badge>;
@@ -49,12 +49,12 @@ export function UserInformationSheet({
       <SheetContent className="sm:max-w-md md:max-w-xl overflow-y-auto">
         <SheetHeader className="space-y-1">
           <SheetTitle className="text-xl flex items-center gap-2">
-            {user.email}
+            {selectedUser.email}
             <Button
               variant="ghost"
               size="icon"
               className="h-4 w-4"
-              onClick={() => handleCopyItem(user.email ?? "", "Email")}
+              onClick={() => handleCopyItem(selectedUser.email ?? "", "Email")}
             >
               <Copy className="h-4 w-4" />
             </Button>
@@ -76,17 +76,17 @@ export function UserInformationSheet({
 
           <TabsContent value="overview">
             <UserOverviewTab
-              user={user}
+              selectedUser={selectedUser}
               handleCopyItem={handleCopyItem}
             />
           </TabsContent>
 
           <TabsContent value="logs">
-            <UserLogsTab user={user} />
+            <UserLogsTab selectedUser={selectedUser} />
           </TabsContent>
 
           <TabsContent value="details">
-            <UserDetailsTab user={user} />
+            <UserDetailsTab selectedUser={selectedUser} />
           </TabsContent>
         </Tabs>
       </SheetContent>
diff --git a/sigap-website/app/(pages)/(admin)/dashboard/user-management/_components/table/columns/actions-column.tsx b/sigap-website/app/(pages)/(admin)/dashboard/user-management/_components/table/columns/actions-column.tsx
index 2e1e373..7a0e433 100644
--- a/sigap-website/app/(pages)/(admin)/dashboard/user-management/_components/table/columns/actions-column.tsx
+++ b/sigap-website/app/(pages)/(admin)/dashboard/user-management/_components/table/columns/actions-column.tsx
@@ -8,6 +8,7 @@ import { ActionsCell } from "../cells/actions-cell"
 export const createActionsColumn = (
     handleUserUpdate: (user: IUserSchema) => void
 ) => {
+
     return {
         id: "actions",
         header: () => {
diff --git a/sigap-website/app/(pages)/(admin)/dashboard/user-management/_components/table/columns/index.ts b/sigap-website/app/(pages)/(admin)/dashboard/user-management/_components/table/columns/index.ts
index 3216fc7..ab11ad2 100644
--- a/sigap-website/app/(pages)/(admin)/dashboard/user-management/_components/table/columns/index.ts
+++ b/sigap-website/app/(pages)/(admin)/dashboard/user-management/_components/table/columns/index.ts
@@ -1,6 +1,5 @@
 // columns/index.ts
 
-
 import type { ColumnDef } from "@tanstack/react-table"
 import { IUserSchema, IUserFilterOptionsSchema } from "@/src/entities/models/users/users.model"
 import { createEmailColumn } from "./email-column"
@@ -9,6 +8,9 @@ import { createCreatedAtColumn } from "./created-at-column"
 import { createStatusColumn } from "./status-column"
 import { createActionsColumn } from "./actions-column"
 import { createLastSignInColumn } from "./last-sign-in-column"
+import { useGetCurrentUserQuery } from "../../../_queries/queries"
+import { USER_ROLES } from "@/app/_utils/const/roles"
+import { AuthenticationError } from "@/src/entities/errors/auth"
 
 export type UserTableColumn = ColumnDef<IUserSchema, IUserSchema>
 
@@ -16,13 +18,36 @@ export const createUserColumns = (
     filters: IUserFilterOptionsSchema,
     setFilters: (filters: IUserFilterOptionsSchema) => void,
     handleUserUpdate: (user: IUserSchema) => void,
+    currentUser?: IUserSchema,
 ): UserTableColumn[] => {
+
+    // Check if the user is an admin
+    // const { data: user, isLoading, isError, error } = useGetCurrentUserQuery();
+
+    // console.log("Query Status:", { isLoading, isError, error, user });
+
+    if (!currentUser || !currentUser.role) {
+        return [
+            createEmailColumn(filters, setFilters),
+            createPhoneColumn(filters, setFilters),
+            createLastSignInColumn(filters, setFilters),
+            createCreatedAtColumn(filters, setFilters),
+            createStatusColumn(filters, setFilters),
+            // Kolom actions tidak disertakan karena memerlukan role
+        ]
+    }
+
+    const allowedRoles = USER_ROLES.ALLOWED_ROLES_TO_ACTIONS
+    let isAllowed = allowedRoles.includes(currentUser.role.name)
+
+    console.log("User Role:", currentUser.role.name, "Allowed Roles:", allowedRoles, "Is Allowed:", isAllowed)
+
     return [
         createEmailColumn(filters, setFilters),
         createPhoneColumn(filters, setFilters),
         createLastSignInColumn(filters, setFilters),
         createCreatedAtColumn(filters, setFilters),
         createStatusColumn(filters, setFilters),
-        createActionsColumn(handleUserUpdate),
+        ...(isAllowed ? [createActionsColumn(handleUserUpdate)] : []),
     ]
 }
\ No newline at end of file
diff --git a/sigap-website/app/(pages)/(admin)/dashboard/user-management/_components/tabs/user-detail-tab.tsx b/sigap-website/app/(pages)/(admin)/dashboard/user-management/_components/tabs/user-detail-tab.tsx
index ef27021..9a2a880 100644
--- a/sigap-website/app/(pages)/(admin)/dashboard/user-management/_components/tabs/user-detail-tab.tsx
+++ b/sigap-website/app/(pages)/(admin)/dashboard/user-management/_components/tabs/user-detail-tab.tsx
@@ -1,4 +1,4 @@
-// components/user-management/sheet/tabs/user-details-tab.tsx
+// components/selectedUser-management/sheet/tabs/selectedUser-details-tab.tsx
 import { IUserSchema } from "@/src/entities/models/users/users.model";
 import { formatDate } from "@/app/_utils/common";
 import { Separator } from "@/app/_components/ui/separator";
@@ -8,10 +8,10 @@ import { Edit2, Eye, EyeOff } from "lucide-react";
 import { useState } from "react";
 
 interface UserDetailsTabProps {
-    user: IUserSchema;
+    selectedUser: IUserSchema;
 }
 
-export function UserDetailsTab({ user }: UserDetailsTabProps) {
+export function UserDetailsTab({ selectedUser }: UserDetailsTabProps) {
     const [showSensitiveInfo, setShowSensitiveInfo] = useState(false);
 
     const toggleSensitiveInfo = () => {
@@ -23,7 +23,7 @@ export function UserDetailsTab({ user }: UserDetailsTabProps) {
             {/* Basic Information */}
             <div className="space-y-4">
                 <div className="flex justify-between items-center">
-                    <h3 className="text-lg font-semibold">User Details</h3>
+                    <h3 className="text-lg font-semibold">SelectedUser Details</h3>
                     <Button variant="outline" size="sm" onClick={() => { /* Implement edit functionality */ }}>
                         <Edit2 className="h-4 w-4 mr-2" />
                         Edit
@@ -36,24 +36,24 @@ export function UserDetailsTab({ user }: UserDetailsTabProps) {
                         <div className="border rounded-md p-4 space-y-3">
                             <div className="space-y-1">
                                 <p className="text-xs text-muted-foreground">Email</p>
-                                <p className="text-sm font-medium">{user.email || "—"}</p>
+                                <p className="text-sm font-medium">{selectedUser.email || "—"}</p>
                             </div>
 
                             <div className="space-y-1">
                                 <p className="text-xs text-muted-foreground">Phone</p>
-                                <p className="text-sm font-medium">{user.phone || "—"}</p>
+                                <p className="text-sm font-medium">{selectedUser.phone || "—"}</p>
                             </div>
 
                             <div className="space-y-1">
                                 <p className="text-xs text-muted-foreground">Role</p>
-                                <p className="text-sm font-medium">{user.role || "—"}</p>
+                                <p className="text-sm font-medium">{selectedUser.role?.name || "—"}</p>
                             </div>
 
-                            {user.is_anonymous !== undefined && (
+                            {selectedUser.is_anonymous !== undefined && (
                                 <div className="space-y-1">
                                     <p className="text-xs text-muted-foreground">Anonymous</p>
-                                    <Badge variant={user.is_anonymous ? "default" : "outline"}>
-                                        {user.is_anonymous ? "Yes" : "No"}
+                                    <Badge variant={selectedUser.is_anonymous ? "default" : "outline"}>
+                                        {selectedUser.is_anonymous ? "Yes" : "No"}
                                     </Badge>
                                 </div>
                             )}
@@ -65,23 +65,23 @@ export function UserDetailsTab({ user }: UserDetailsTabProps) {
                         <div className="border rounded-md p-4 space-y-3">
                             <div className="space-y-1">
                                 <p className="text-xs text-muted-foreground">Username</p>
-                                <p className="text-sm font-medium">{user.profile?.username || "—"}</p>
+                                <p className="text-sm font-medium">{selectedUser.profile?.username || "—"}</p>
                             </div>
 
                             <div className="space-y-1">
                                 <p className="text-xs text-muted-foreground">First Name</p>
-                                <p className="text-sm font-medium">{user.profile?.first_name || "—"}</p>
+                                <p className="text-sm font-medium">{selectedUser.profile?.first_name || "—"}</p>
                             </div>
 
                             <div className="space-y-1">
                                 <p className="text-xs text-muted-foreground">Last Name</p>
-                                <p className="text-sm font-medium">{user.profile?.last_name || "—"}</p>
+                                <p className="text-sm font-medium">{selectedUser.profile?.last_name || "—"}</p>
                             </div>
 
                             <div className="space-y-1">
                                 <p className="text-xs text-muted-foreground">Birth Date</p>
                                 <p className="text-sm font-medium">
-                                    {user.profile?.birth_date ? formatDate(user.profile.birth_date) : "—"}
+                                    {selectedUser.profile?.birth_date ? formatDate(selectedUser.profile.birth_date) : "—"}
                                 </p>
                             </div>
                         </div>
@@ -98,27 +98,27 @@ export function UserDetailsTab({ user }: UserDetailsTabProps) {
                     <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                         <div className="space-y-1">
                             <p className="text-xs text-muted-foreground">Street</p>
-                            <p className="text-sm font-medium">{user.profile?.address?.street || "—"}</p>
+                            <p className="text-sm font-medium">{selectedUser.profile?.address?.street || "—"}</p>
                         </div>
 
                         <div className="space-y-1">
                             <p className="text-xs text-muted-foreground">City</p>
-                            <p className="text-sm font-medium">{user.profile?.address?.city || "—"}</p>
+                            <p className="text-sm font-medium">{selectedUser.profile?.address?.city || "—"}</p>
                         </div>
 
                         <div className="space-y-1">
                             <p className="text-xs text-muted-foreground">State</p>
-                            <p className="text-sm font-medium">{user.profile?.address?.state || "—"}</p>
+                            <p className="text-sm font-medium">{selectedUser.profile?.address?.state || "—"}</p>
                         </div>
 
                         <div className="space-y-1">
                             <p className="text-xs text-muted-foreground">Country</p>
-                            <p className="text-sm font-medium">{user.profile?.address?.country || "—"}</p>
+                            <p className="text-sm font-medium">{selectedUser.profile?.address?.country || "—"}</p>
                         </div>
 
                         <div className="space-y-1">
                             <p className="text-xs text-muted-foreground">Postal Code</p>
-                            <p className="text-sm font-medium">{user.profile?.address?.postal_code || "—"}</p>
+                            <p className="text-sm font-medium">{selectedUser.profile?.address?.postal_code || "—"}</p>
                         </div>
                     </div>
                 </div>
@@ -152,15 +152,15 @@ export function UserDetailsTab({ user }: UserDetailsTabProps) {
                 <div className="border rounded-md p-4 space-y-3">
                     <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                         <div className="space-y-1">
-                            <p className="text-xs text-muted-foreground">User ID</p>
-                            <p className="text-sm font-medium font-mono">{user.id}</p>
+                            <p className="text-xs text-muted-foreground">SelectedUser ID</p>
+                            <p className="text-sm font-medium font-mono">{selectedUser.id}</p>
                         </div>
 
-                        {showSensitiveInfo && user.encrypted_password && (
+                        {showSensitiveInfo && selectedUser.encrypted_password && (
                             <div className="space-y-1">
                                 <p className="text-xs text-muted-foreground">Password Status</p>
                                 <Badge variant="outline">
-                                    {user.encrypted_password ? "Set" : "Not Set"}
+                                    {selectedUser.encrypted_password ? "Set" : "Not Set"}
                                 </Badge>
                             </div>
                         )}
@@ -172,52 +172,52 @@ export function UserDetailsTab({ user }: UserDetailsTabProps) {
                     <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                         <div className="space-y-1">
                             <p className="text-xs text-muted-foreground">Created At</p>
-                            <p className="text-sm">{formatDate(user.created_at)}</p>
+                            <p className="text-sm">{formatDate(selectedUser.created_at)}</p>
                         </div>
 
                         <div className="space-y-1">
                             <p className="text-xs text-muted-foreground">Updated At</p>
-                            <p className="text-sm">{formatDate(user.updated_at)}</p>
+                            <p className="text-sm">{formatDate(selectedUser.updated_at)}</p>
                         </div>
 
                         <div className="space-y-1">
                             <p className="text-xs text-muted-foreground">Last Sign In</p>
-                            <p className="text-sm">{formatDate(user.last_sign_in_at)}</p>
+                            <p className="text-sm">{formatDate(selectedUser.last_sign_in_at)}</p>
                         </div>
 
                         <div className="space-y-1">
                             <p className="text-xs text-muted-foreground">Email Confirmed At</p>
-                            <p className="text-sm">{formatDate(user.email_confirmed_at)}</p>
+                            <p className="text-sm">{formatDate(selectedUser.email_confirmed_at)}</p>
                         </div>
 
                         <div className="space-y-1">
                             <p className="text-xs text-muted-foreground">Invited At</p>
-                            <p className="text-sm">{formatDate(user.invited_at)}</p>
+                            <p className="text-sm">{formatDate(selectedUser.invited_at)}</p>
                         </div>
 
                         <div className="space-y-1">
                             <p className="text-xs text-muted-foreground">Recovery Sent At</p>
-                            <p className="text-sm">{formatDate(user.recovery_sent_at)}</p>
+                            <p className="text-sm">{formatDate(selectedUser.recovery_sent_at)}</p>
                         </div>
 
                         <div className="space-y-1">
                             <p className="text-xs text-muted-foreground">Confirmed At</p>
-                            <p className="text-sm">{formatDate(user.confirmed_at)}</p>
+                            <p className="text-sm">{formatDate(selectedUser.confirmed_at)}</p>
                         </div>
 
-                        {user.banned_until && (
+                        {selectedUser.banned_until && (
                             <div className="space-y-1">
                                 <p className="text-xs text-muted-foreground">Banned Until</p>
-                                <p className="text-sm text-destructive">{formatDate(user.banned_until)}</p>
+                                <p className="text-sm text-destructive">{formatDate(selectedUser.banned_until)}</p>
                             </div>
                         )}
                     </div>
                 </div>
 
-                {user.profile?.bio && (
+                {selectedUser.profile?.bio && (
                     <div className="border rounded-md p-4">
                         <h4 className="text-sm font-medium mb-2">Bio</h4>
-                        <p className="text-sm whitespace-pre-wrap">{user.profile.bio}</p>
+                        <p className="text-sm whitespace-pre-wrap">{selectedUser.profile.bio}</p>
                     </div>
                 )}
             </div>
diff --git a/sigap-website/app/(pages)/(admin)/dashboard/user-management/_components/tabs/user-log-tab.tsx b/sigap-website/app/(pages)/(admin)/dashboard/user-management/_components/tabs/user-log-tab.tsx
index f326937..e65c1e6 100644
--- a/sigap-website/app/(pages)/(admin)/dashboard/user-management/_components/tabs/user-log-tab.tsx
+++ b/sigap-website/app/(pages)/(admin)/dashboard/user-management/_components/tabs/user-log-tab.tsx
@@ -8,7 +8,7 @@ import { ScrollArea } from "@/app/_components/ui/scroll-area";
 import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/app/_components/ui/tabs";
 import { Skeleton } from "@/app/_components/ui/skeleton";
 
-// Extended interface for user logs with more types
+// Extended interface for selectedUser logs with more types
 interface UserLog {
     id: string;
     type: 'login' | 'logout' | 'password_reset' | 'email_change' | 'profile_update' | 'account_creation' |
@@ -23,16 +23,16 @@ interface UserLog {
 }
 
 interface UserLogsTabProps {
-    user: IUserSchema;
+    selectedUser: IUserSchema;
 }
 
-export function UserLogsTab({ user }: UserLogsTabProps) {
+export function UserLogsTab({ selectedUser }: UserLogsTabProps) {
     const [logs, setLogs] = useState<UserLog[]>([]);
     const [isLoading, setIsLoading] = useState(true);
     const [activeTab, setActiveTab] = useState<string>("all");
     const [showErrorOnly, setShowErrorOnly] = useState(false);
 
-    // Mock function to fetch user logs - replace with actual implementation
+    // Mock function to fetch selectedUser logs - replace with actual implementation
     const fetchUserLogs = async () => {
         setIsLoading(true);
 
@@ -63,7 +63,7 @@ export function UserLogsTab({ user }: UserLogsTabProps) {
                     type: 'logout',
                     timestamp: new Date(2025, 3, 2, 13, 30, 0),
                     status_code: '200',
-                    details: 'User logged out',
+                    details: 'SelectedUser logged out',
                     ip_address: '192.168.1.5'
                 },
                 {
@@ -169,7 +169,7 @@ export function UserLogsTab({ user }: UserLogsTabProps) {
 
             setLogs(allLogs);
         } catch (error) {
-            console.error("Failed to fetch user logs:", error);
+            console.error("Failed to fetch selectedUser logs:", error);
         } finally {
             setIsLoading(false);
         }
@@ -177,7 +177,7 @@ export function UserLogsTab({ user }: UserLogsTabProps) {
 
     useEffect(() => {
         fetchUserLogs();
-    }, [user.id]);
+    }, [selectedUser.id]);
 
     const getLogIcon = (type: UserLog['type']) => {
         switch (type) {
@@ -280,8 +280,8 @@ export function UserLogsTab({ user }: UserLogsTabProps) {
         <div className="space-y-4">
             <div className="flex justify-between items-center">
                 <div className="flex flex-col">
-                    <h3 className="text-lg font-semibold">User Activity Logs</h3>
-                    <p className="text-sm text-muted-foreground">Latest logs from activity for this user in the past hour</p>
+                    <h3 className="text-lg font-semibold">SelectedUser Activity Logs</h3>
+                    <p className="text-sm text-muted-foreground">Latest logs from activity for this selectedUser in the past hour</p>
                 </div>
             </div>
 
diff --git a/sigap-website/app/(pages)/(admin)/dashboard/user-management/_components/tabs/user-overview-tab.tsx b/sigap-website/app/(pages)/(admin)/dashboard/user-management/_components/tabs/user-overview-tab.tsx
index 7997bf9..e97e60a 100644
--- a/sigap-website/app/(pages)/(admin)/dashboard/user-management/_components/tabs/user-overview-tab.tsx
+++ b/sigap-website/app/(pages)/(admin)/dashboard/user-management/_components/tabs/user-overview-tab.tsx
@@ -1,5 +1,4 @@
-// components/user-management/sheet/tabs/user-overview-tab.tsx
-import { Button } from "@/app/_components/ui/button";
+
 import { Badge } from "@/app/_components/ui/badge";
 import { Separator } from "@/app/_components/ui/separator";
 import {
@@ -16,13 +15,30 @@ import { IUserSchema } from "@/src/entities/models/users/users.model";
 import { formatDate } from "@/app/_utils/common";
 import { CAlertDialog } from "@/app/_components/alert-dialog";
 import { useUserDetailSheetHandlers } from "../../_handlers/use-detail-sheet";
+import { useGetCurrentUserQuery } from "../../_queries/queries";
+import { AuthenticationError } from "@/src/entities/errors/auth";
+import { useCheckPermissionsHandler } from "@/app/(pages)/(auth)/_handlers/use-check-permissions";
+import { useCallback } from "react";
+import { cn } from "@/app/_lib/utils";
+import { Section } from "@/app/_components/Section";
+import { InfoRow } from "@/app/_components/info-row";
+import { ProviderInfo } from "@/app/_components/provider-info";
+import { ActionRow } from "@/app/_components/action-row";
+import { DangerAction } from "@/app/_components/danger-action";
+
 
 interface UserOverviewTabProps {
-    user: IUserSchema;
+    selectedUser: IUserSchema;
     handleCopyItem: (text: string, label: string) => void;
 }
 
-export function UserOverviewTab({ user, handleCopyItem }: UserOverviewTabProps) {
+export function UserOverviewTab({ selectedUser, handleCopyItem }: UserOverviewTabProps) {
+    const { data: currentUser } = useGetCurrentUserQuery();
+
+    if (!currentUser) {
+        throw new AuthenticationError("Authentication error. Please log in again.");
+    }
+
     const {
         handleDeleteUser,
         handleSendPasswordRecovery,
@@ -33,196 +49,160 @@ export function UserOverviewTab({ user, handleCopyItem }: UserOverviewTabProps)
         isDeletePending,
         isSendPasswordRecoveryPending,
         isSendMagicLinkPending,
-    } = useUserDetailSheetHandlers({ open: true, user, onOpenChange: () => { } });
+    } = useUserDetailSheetHandlers({ open: true, selectedUser, onOpenChange: () => { } });
+
+    const {
+        isAllowedToDelete,
+        isAllowedToBan,
+        isAllowedToSendPasswordRecovery,
+        isAllowedToSendMagicLink,
+        isAllowedToSendEmail,
+    } = useCheckPermissionsHandler(currentUser.email);
+
+    const memoizedHandleCopyItem = useCallback(
+        (text: string, label: string) => handleCopyItem(text, label),
+        [handleCopyItem]
+    );
 
     return (
         <div className="space-y-8">
             {/* User Information Section */}
-            <div className="space-y-4">
-                <h3 className="text-lg font-semibold">User Information</h3>
-
-                <div className="space-y-2 text-sm">
-                    <div className="flex justify-between items-center py-1">
-                        <span className="text-muted-foreground">User UID</span>
-                        <div className="flex items-center">
-                            <span className="font-mono">{user.id}</span>
-                            <Button
-                                variant="ghost"
-                                size="icon"
-                                className="h-4 w-4 ml-2"
-                                onClick={() => handleCopyItem(user.id, "UID")}
-                            >
-                                <Copy className="h-4 w-4" />
-                            </Button>
-                        </div>
-                    </div>
-
-                    <div className="flex justify-between items-center py-1">
-                        <span className="text-muted-foreground">Created at</span>
-                        <span>{formatDate(user.created_at)}</span>
-                    </div>
-
-                    <div className="flex justify-between items-center py-1">
-                        <span className="text-muted-foreground">Last signed in</span>
-                        <span>{formatDate(user.last_sign_in_at)}</span>
-                    </div>
-
-                    <div className="flex justify-between items-center py-1">
-                        <span className="text-muted-foreground">SSO</span>
-                        <XCircle className="h-4 w-4 text-muted-foreground" />
-                    </div>
-                </div>
-            </div>
+            <Section title="User Information">
+                <InfoRow
+                    label="User UID"
+                    value={selectedUser.id}
+                    onCopy={() => memoizedHandleCopyItem(selectedUser.id, "UID")}
+                />
+                <InfoRow label="Created at" value={formatDate(selectedUser.created_at)} />
+                <InfoRow label="Last signed in" value={formatDate(selectedUser.last_sign_in_at)} />
+                <InfoRow
+                    label="SSO"
+                    value={<XCircle className="h-4 w-4 text-muted-foreground" />}
+                />
+            </Section>
 
             <Separator />
 
             {/* Provider Information Section */}
-            <div className="space-y-4">
-                <h3 className="text-lg font-semibold">Provider Information</h3>
-                <p className="text-sm text-muted-foreground">
-                    The user has the following providers
-                </p>
-
-                <div className="border rounded-md p-4 space-y-3">
-                    <div className="flex items-center justify-between">
-                        <div className="flex items-center gap-2">
-                            <Mail className="h-5 w-5" />
-                            <div>
-                                <div className="font-medium">Email</div>
-                                <div className="text-xs text-muted-foreground">
-                                    Signed in with a email account
-                                </div>
-                            </div>
-                        </div>
+            <Section title="Provider Information" description="The user has the following providers">
+                <ProviderInfo
+                    icon={<Mail className="h-5 w-5" />}
+                    title="Email"
+                    description="Signed in with an email account"
+                    badge={
                         <Badge
                             variant="outline"
                             className="bg-green-500/10 text-green-500 border-green-500/20"
                         >
                             <CheckCircle className="h-3 w-3 mr-1" /> Enabled
                         </Badge>
-                    </div>
-                </div>
+                    }
+                />
 
-                <div className="border rounded-md p-4 space-y-4">
-                    <div className="flex justify-between items-center">
-                        <div>
-                            <h4 className="font-medium">Reset password</h4>
-                            <p className="text-xs text-muted-foreground">
-                                Send a password recovery email to the user
-                            </p>
-                        </div>
-                        <Button
-                            variant="outline"
-                            size="sm"
-                            onClick={handleSendPasswordRecovery}
-                            disabled={isSendPasswordRecoveryPending}
-                        >
-                            {isSendPasswordRecoveryPending ? (
-                                <>
-                                    <Loader2 className="h-4 w-4 mr-2 animate-spin" />
-                                    Sending...
-                                </>
-                            ) : (
-                                <>
-                                    <Mail className="h-4 w-4 mr-2" />
-                                    Send password recovery
-                                </>
-                            )}
-                        </Button>
-                    </div>
+                {isAllowedToSendEmail && (
+                    <Separator className="my-4" />
+                )}
 
-                    <Separator />
+                {isAllowedToSendEmail && (
+                    <div className="border rounded-md p-4 space-y-4 bg-secondary/80">
+                        {isAllowedToSendPasswordRecovery && (
+                            <ActionRow
+                                title="Reset password"
+                                description="Send a password recovery email to the user"
+                                onClick={handleSendPasswordRecovery}
+                                isPending={isSendPasswordRecoveryPending}
+                                pendingText="Sending..."
+                                icon={<Mail className="h-4 w-4 mr-2" />}
+                                actionText="Send password recovery"
+                                buttonVariant="outline"
+                                buttonClassName="bg-secondary/80 border-secondary-foreground/20 hover:border-secondary-foreground/30"
+                            />
+                        )}
 
-                    <div className="flex justify-between items-center">
-                        <div>
-                            <h4 className="font-medium">Send magic link</h4>
-                            <p className="text-xs text-muted-foreground">
-                                Passwordless login via email for the user
-                            </p>
-                        </div>
-                        <Button
-                            variant="outline"
-                            size="sm"
-                            onClick={handleSendMagicLink}
-                            disabled={isSendMagicLinkPending}
-                        >
-                            {isSendMagicLinkPending ? (
-                                <>
-                                    <Loader2 className="h-4 w-4 mr-2 animate-spin" />
-                                    Sending...
-                                </>
-                            ) : (
-                                <>
-                                    <SendHorizonal className="h-4 w-4 mr-2" />
-                                    Send magic link
-                                </>
-                            )}
-                        </Button>
+                        {!isAllowedToSendMagicLink && <Separator />}
+
+                        {!isAllowedToSendMagicLink && (
+                            <ActionRow
+                                title="Send magic link"
+                                description="Passwordless login via email for the user"
+                                onClick={handleSendMagicLink}
+                                isPending={isSendMagicLinkPending}
+                                pendingText="Sending..."
+                                icon={<SendHorizonal className="h-4 w-4 mr-2" />}
+                                actionText="Send magic link"
+                                buttonVariant="outline"
+                                buttonClassName="bg-secondary/80 border-secondary-foreground/20 hover:border-secondary-foreground/30"
+                            />
+                        )}
                     </div>
-                </div>
-            </div>
+                )}
+            </Section>
 
             <Separator />
 
             {/* Danger Zone Section */}
-            <div className="space-y-4">
-                <h3 className="text-lg font-semibold text-destructive">
-                    Danger zone
-                </h3>
-                <p className="text-sm text-muted-foreground">
-                    Be wary of the following features as they cannot be undone.
-                </p>
-
-                <div className="space-y-4">
-                    <div className="border border-destructive/20 rounded-md p-4 flex justify-between items-center">
-                        <div>
-                            <h4 className="font-medium">Ban user</h4>
-                            <p className="text-xs text-muted-foreground">
-                                Revoke access to the project for a set duration
-                            </p>
-                        </div>
-                        <Button
-                            variant={user.banned_until ? "outline" : "outline"}
-                            size="sm"
-                            onClick={() => handleToggleBan()}
-                            disabled={isBanPending || isUnbanPending}
-                        >
-                            {isBanPending || isUnbanPending ? (
-                                <>
-                                    <Loader2 className="h-4 w-4 mr-2 animate-spin" />
-                                    {user.banned_until ? "Unbanning..." : "Banning..."}
-                                </>
-                            ) : (
-                                <>
-                                    <Ban className="h-4 w-4 mr-2" />
-                                    {user.banned_until ? "Unban user" : "Ban user"}
-                                </>
-                            )}
-                        </Button>
-                    </div>
-
-                    <div className="border border-destructive/20 rounded-md p-4 flex justify-between items-center">
-                        <div>
-                            <h4 className="font-medium">Delete user</h4>
-                            <p className="text-xs text-muted-foreground">
-                                User will no longer have access to the project
-                            </p>
-                        </div>
-                        <CAlertDialog
-                            triggerText="Delete user"
-                            triggerIcon={<Trash2 className="h-4 w-4" />}
-                            title="Are you absolutely sure?"
-                            description="This action cannot be undone. This will permanently delete the user account and remove their data from our servers."
-                            confirmText="Delete"
-                            onConfirm={handleDeleteUser}
-                            isPending={isDeletePending}
-                            pendingText="Deleting..."
-                            variant="destructive"
-                            size="sm"
+            {isAllowedToDelete && (
+                <Section
+                    title="Danger zone"
+                    titleClassName="text-destructive"
+                    description="Be wary of the following features as they cannot be undone."
+                    contentClassName="space-y-0"
+                >
+                    {selectedUser.banned_until ? (
+                        <DangerAction
+                            title="Unban user"
+                            description="Revoke access to the project for a set duration"
+                            onClick={handleToggleBan}
+                            isPending={isUnbanPending}
+                            pendingText="Unbanning..."
+                            icon={<Ban className="h-4 w-4" />}
+                            actionText="Unban user"
+                            className="rounded-b-none"
+                            buttonVariant="outline"
                         />
-                    </div>
-                </div>
-            </div>
+                    ) : (
+                        <DangerAction
+                            title="Ban user"
+                            description="Revoke access to the project for a set duration"
+                            isDialog
+                            dialogProps={{
+                                triggerText: "Ban user",
+                                triggerIcon: <Ban className="h-4 w-4" />,
+                                title: "Select ban duration",
+                                description:
+                                    "The user will not be able to access the project for the selected duration.",
+                                confirmText: "Ban",
+                                onConfirm: handleToggleBan,
+                                isPending: isBanPending,
+                                pendingText: "Banning...",
+                                variant: "outline",
+                                size: "sm",
+                            }}
+                        />
+                    )}
+
+                    <DangerAction
+                        className="rounded-t-none"
+                        title="Delete user"
+                        description="User will no longer have access to the project"
+                        isDialog
+                        dialogProps={{
+                            triggerText: "Delete user",
+                            triggerIcon: <Trash2 className="h-4 w-4" />,
+                            title: "Are you absolutely sure?",
+                            description:
+                                "This action cannot be undone. This will permanently delete the user account and remove their data from our servers.",
+                            confirmText: "Delete",
+                            onConfirm: handleDeleteUser,
+                            isPending: isDeletePending,
+                            pendingText: "Deleting...",
+                            variant: "destructive",
+                            size: "sm",
+                        }}
+                    />
+                </Section>
+            )}
         </div>
     );
-}
\ No newline at end of file
+}
+
diff --git a/sigap-website/app/(pages)/(admin)/dashboard/user-management/_components/user-management.tsx b/sigap-website/app/(pages)/(admin)/dashboard/user-management/_components/user-management.tsx
index 4856947..fdf33bf 100644
--- a/sigap-website/app/(pages)/(admin)/dashboard/user-management/_components/user-management.tsx
+++ b/sigap-website/app/(pages)/(admin)/dashboard/user-management/_components/user-management.tsx
@@ -4,7 +4,7 @@ import { useState, useMemo, useEffect } from "react";
 
 import { DataTable } from "../../../../../_components/data-table";
 import { UserInformationSheet } from "./sheets/user-information-sheet";
-import { useGetUsersQuery } from "../_queries/queries";
+import { useGetCurrentUserQuery, useGetUsersQuery } from "../_queries/queries";
 import { filterUsers, useUserManagementHandlers } from "../_handlers/use-user-management";
 
 import { useAddUserDialogHandler } from "../_handlers/use-add-user-dialog";
@@ -26,6 +26,8 @@ export default function UserManagement() {
     refetch,
   } = useGetUsersQuery();
 
+  const { data: currentUser } = useGetCurrentUserQuery()
+
   // User management handler
   const {
     searchQuery,
@@ -72,6 +74,7 @@ export default function UserManagement() {
     filters,
     setFilters,
     handleUserUpdate,
+    currentUser
   )
 
   // State untuk jumlah data di halaman saat ini
@@ -99,7 +102,7 @@ export default function UserManagement() {
 
       {isDetailUser && (
         <UserInformationSheet
-          user={isDetailUser}
+          selectedUser={isDetailUser}
           open={isSheetOpen}
           onOpenChange={setIsSheetOpen}
         />
diff --git a/sigap-website/app/(pages)/(admin)/dashboard/user-management/_handlers/use-detail-sheet.ts b/sigap-website/app/(pages)/(admin)/dashboard/user-management/_handlers/use-detail-sheet.ts
index bd3aa65..dddd7a2 100644
--- a/sigap-website/app/(pages)/(admin)/dashboard/user-management/_handlers/use-detail-sheet.ts
+++ b/sigap-website/app/(pages)/(admin)/dashboard/user-management/_handlers/use-detail-sheet.ts
@@ -7,9 +7,9 @@ import { copyItem } from "@/app/_utils/common";
 import { useQueryClient } from "@tanstack/react-query";
 import { useUserActionsHandler } from "./actions/use-user-actions";
 
-export const useUserDetailSheetHandlers = ({ open, user, onOpenChange }: {
+export const useUserDetailSheetHandlers = ({ open, selectedUser, onOpenChange }: {
     open: boolean;
-    user: IUserSchema;
+    selectedUser: IUserSchema;
     onOpenChange: (open: boolean) => void;
 }) => {
 
@@ -22,10 +22,10 @@ export const useUserDetailSheetHandlers = ({ open, user, onOpenChange }: {
     const { mutateAsync: unbanUser, isPending: isUnbanPending } = useUnbanUserMutation();
 
     const handleDeleteUser = async () => {
-        await deleteUser(user.id, {
+        await deleteUser(selectedUser.id, {
             onSuccess: () => {
                 invalidateUsers();
-                toast.success(`${user.email} has been deleted`);
+                toast.success(`${selectedUser.email} has been deleted`);
 
                 onOpenChange(false);
             }
@@ -33,10 +33,10 @@ export const useUserDetailSheetHandlers = ({ open, user, onOpenChange }: {
     };
 
     const handleSendPasswordRecovery = async () => {
-        if (user.email) {
-            await sendPasswordRecovery(user.email, {
+        if (selectedUser.email) {
+            await sendPasswordRecovery(selectedUser.email, {
                 onSuccess: () => {
-                    toast.success(`Password recovery email sent to ${user.email}`);
+                    toast.success(`Password recovery email sent to ${selectedUser.email}`);
 
                     onOpenChange(false);
                 },
@@ -50,10 +50,10 @@ export const useUserDetailSheetHandlers = ({ open, user, onOpenChange }: {
     }
 
     const handleSendMagicLink = async () => {
-        if (user.email) {
-            await sendMagicLink(user.email, {
+        if (selectedUser.email) {
+            await sendMagicLink(selectedUser.email, {
                 onSuccess: () => {
-                    toast.success(`Magic link sent to ${user.email}`);
+                    toast.success(`Magic link sent to ${selectedUser.email}`);
 
                     onOpenChange(false);
                 },
@@ -67,10 +67,10 @@ export const useUserDetailSheetHandlers = ({ open, user, onOpenChange }: {
     };
 
     const handleBanUser = async (ban_duration: ValidBanDuration = "24h") => {
-        await banUser({ id: user.id, ban_duration: ban_duration }, {
+        await banUser({ id: selectedUser.id, ban_duration: ban_duration }, {
             onSuccess: () => {
                 invalidateUsers();
-                toast(`${user.email} has been banned`);
+                toast(`${selectedUser.email} has been banned`);
 
 
             }
@@ -78,10 +78,10 @@ export const useUserDetailSheetHandlers = ({ open, user, onOpenChange }: {
     };
 
     const handleUnbanUser = async () => {
-        await unbanUser({ id: user.id }, {
+        await unbanUser({ id: selectedUser.id }, {
             onSuccess: () => {
                 invalidateUsers();
-                toast(`${user.email} has been unbanned`);
+                toast(`${selectedUser.email} has been unbanned`);
 
 
             }
@@ -89,21 +89,21 @@ export const useUserDetailSheetHandlers = ({ open, user, onOpenChange }: {
     };
 
     const handleToggleBan = async (ban_duration: ValidBanDuration = "24h") => {
-        if (user.banned_until) {
-            await unbanUser({ id: user.id }, {
+        if (selectedUser.banned_until) {
+            await unbanUser({ id: selectedUser.id }, {
                 onSuccess: () => {
                     invalidateUsers();
 
-                    toast(`${user.email} has been unbanned`);
+                    toast(`${selectedUser.email} has been unbanned`);
 
                 }
             });
         } else {
-            await banUser({ id: user.id, ban_duration: ban_duration }, {
+            await banUser({ id: selectedUser.id, ban_duration: ban_duration }, {
                 onSuccess: () => {
                     invalidateUsers();
 
-                    toast(`${user.email} has been banned`);
+                    toast(`${selectedUser.email} has been banned`);
 
                 }
             });
diff --git a/sigap-website/app/(pages)/(auth)/_handlers/use-check-permissions.ts b/sigap-website/app/(pages)/(auth)/_handlers/use-check-permissions.ts
index e69de29..5694d6e 100644
--- a/sigap-website/app/(pages)/(auth)/_handlers/use-check-permissions.ts
+++ b/sigap-website/app/(pages)/(auth)/_handlers/use-check-permissions.ts
@@ -0,0 +1,22 @@
+import { useCheckPermissionsQuery } from "../_queries/queries"
+
+export const useCheckPermissionsHandler = (email: string) => {
+
+    const { data: isAllowedToCreate } = useCheckPermissionsQuery(email, "users", "create")
+    const { data: isAllowedToUpdate } = useCheckPermissionsQuery(email, "users", "update")
+    const { data: isAllowedToDelete } = useCheckPermissionsQuery(email, "users", "delete")
+
+    const { data: isAllowedToBan } = useCheckPermissionsQuery(email, "users", "ban")
+    const { data: isAllowedToSendPasswordRecovery } = useCheckPermissionsQuery(email, "users", "send_password_recovery",)
+    const { data: isAllowedToSendMagicLink } = useCheckPermissionsQuery(email, "users", "send_magic_link")
+
+    return {
+        isAllowedToCreate,
+        isAllowedToUpdate,
+        isAllowedToDelete,
+        isAllowedToBan,
+        isAllowedToSendPasswordRecovery,
+        isAllowedToSendMagicLink,
+        isAllowedToSendEmail: isAllowedToSendPasswordRecovery || isAllowedToSendMagicLink,
+    }
+}
\ No newline at end of file
diff --git a/sigap-website/app/_components/action-row.tsx b/sigap-website/app/_components/action-row.tsx
new file mode 100644
index 0000000..4b559de
--- /dev/null
+++ b/sigap-website/app/_components/action-row.tsx
@@ -0,0 +1,66 @@
+import { ReactNode } from "react";
+import { Button } from "@/app/_components/ui/button";
+import { Loader2 } from "lucide-react";
+import { cn } from "@/app/_lib/utils";
+
+interface ActionRowProps {
+    title: string;
+    description: string;
+    onClick: () => void;
+    isPending?: boolean;
+    pendingText?: string;
+    icon?: ReactNode;
+    actionText: string;
+    className?: string;
+    contentClassName?: string;
+    titleClassName?: string;
+    descriptionClassName?: string;
+    buttonClassName?: string;
+    buttonVariant?: "default" | "destructive" | "outline" | "secondary" | "ghost" | "link";
+    buttonSize?: "default" | "sm" | "lg" | "icon";
+}
+
+export function ActionRow({
+    title,
+    description,
+    onClick,
+    isPending = false,
+    pendingText = "Loading...",
+    icon,
+    actionText,
+    className,
+    contentClassName,
+    titleClassName,
+    descriptionClassName,
+    buttonClassName,
+    buttonVariant = "outline",
+    buttonSize = "sm"
+}: ActionRowProps) {
+    return (
+        <div className={cn("flex justify-between items-center", className)}>
+            <div className={cn(contentClassName)}>
+                <h4 className={cn("font-medium", titleClassName)}>{title}</h4>
+                <p className={cn("text-xs text-muted-foreground", descriptionClassName)}>{description}</p>
+            </div>
+            <Button
+                variant={buttonVariant}
+                size={buttonSize}
+                onClick={onClick}
+                disabled={isPending}
+                className={cn(buttonClassName)}
+            >
+                {isPending ? (
+                    <>
+                        <Loader2 className="h-4 w-4 mr-2 animate-spin" />
+                        {pendingText}
+                    </>
+                ) : (
+                    <>
+                        {icon}
+                        {actionText}
+                    </>
+                )}
+            </Button>
+        </div>
+    );
+}
diff --git a/sigap-website/app/_components/danger-action.tsx b/sigap-website/app/_components/danger-action.tsx
new file mode 100644
index 0000000..7a27d9f
--- /dev/null
+++ b/sigap-website/app/_components/danger-action.tsx
@@ -0,0 +1,79 @@
+import { ReactNode } from "react";
+import { Button } from "@/app/_components/ui/button";
+import { Loader2 } from "lucide-react";
+import { CAlertDialog } from "@/app/_components/alert-dialog";
+import { cn } from "@/app/_lib/utils";
+
+interface DangerActionProps {
+    title: string;
+    description: string;
+    onClick?: () => void;
+    isPending?: boolean;
+    pendingText?: string;
+    icon?: ReactNode;
+    actionText?: string;
+    isDialog?: boolean;
+    dialogProps?: any;
+    className?: string;
+    contentClassName?: string;
+    titleClassName?: string;
+    descriptionClassName?: string;
+    buttonClassName?: string;
+    containerClassName?: string;
+    buttonVariant?: "default" | "destructive" | "outline" | "secondary" | "ghost" | "link";
+    buttonSize?: "default" | "sm" | "lg" | "icon";
+}
+
+export function DangerAction({
+    title,
+    description,
+    onClick,
+    isPending = false,
+    pendingText = "Loading...",
+    icon,
+    actionText,
+    isDialog,
+    dialogProps,
+    className,
+    contentClassName,
+    titleClassName,
+    descriptionClassName,
+    buttonClassName,
+    containerClassName,
+    buttonVariant = "outline",
+    buttonSize = "sm"
+}: DangerActionProps) {
+    return (
+        <div className={cn("border border-destructive rounded-md p-4 flex justify-between items-center", containerClassName, className)}>
+            <div className={cn(contentClassName)}>
+                <h4 className={cn("font-medium", titleClassName)}>{title}</h4>
+                <p className={cn("text-xs text-muted-foreground", descriptionClassName)}>{description}</p>
+            </div>
+            {isDialog ? (
+                <div className={cn(buttonClassName)}>
+                    <CAlertDialog {...dialogProps} />
+                </div>
+            ) : (
+                <Button
+                    variant={buttonVariant}
+                    size={buttonSize}
+                    onClick={onClick}
+                    disabled={isPending}
+                    className={cn(buttonClassName)}
+                >
+                    {isPending ? (
+                        <>
+                            <Loader2 className="h-4 w-4 mr-2 animate-spin" />
+                            {pendingText}
+                        </>
+                    ) : (
+                        <>
+                            {icon}
+                            {actionText}
+                        </>
+                    )}
+                </Button>
+            )}
+        </div>
+    );
+}
diff --git a/sigap-website/app/_components/info-row.tsx b/sigap-website/app/_components/info-row.tsx
new file mode 100644
index 0000000..10e4e29
--- /dev/null
+++ b/sigap-website/app/_components/info-row.tsx
@@ -0,0 +1,45 @@
+import { ReactNode } from "react";
+import { Button } from "@/app/_components/ui/button";
+import { Copy } from "lucide-react";
+import { cn } from "@/app/_lib/utils";
+
+interface InfoRowProps {
+    label: string;
+    value: ReactNode;
+    onCopy?: () => void;
+    className?: string;
+    labelClassName?: string;
+    valueClassName?: string;
+    copyButtonClassName?: string;
+}
+
+export function InfoRow({
+    label,
+    value,
+    onCopy,
+    className,
+    labelClassName,
+    valueClassName,
+    copyButtonClassName
+}: InfoRowProps) {
+    return (
+        <div className={cn("flex justify-between items-center py-1", className)}>
+            <span className={cn("text-muted-foreground", labelClassName)}>{label}</span>
+            <div className="flex items-center">
+                {typeof value === "string" ? (
+                    <span className={cn("font-mono", valueClassName)}>{value}</span>
+                ) : value}
+                {onCopy && (
+                    <Button
+                        variant="ghost"
+                        size="icon"
+                        className={cn("h-4 w-4 ml-2", copyButtonClassName)}
+                        onClick={onCopy}
+                    >
+                        <Copy className="h-4 w-4" />
+                    </Button>
+                )}
+            </div>
+        </div>
+    );
+}
diff --git a/sigap-website/app/_components/provider-info.tsx b/sigap-website/app/_components/provider-info.tsx
new file mode 100644
index 0000000..7d08ff0
--- /dev/null
+++ b/sigap-website/app/_components/provider-info.tsx
@@ -0,0 +1,47 @@
+import { ReactNode } from "react";
+import { cn } from "@/app/_lib/utils";
+
+interface ProviderInfoProps {
+    icon: ReactNode;
+    title: string;
+    description: string;
+    badge: ReactNode;
+    className?: string;
+    containerClassName?: string;
+    headerClassName?: string;
+    titleContainerClassName?: string;
+    titleClassName?: string;
+    descriptionClassName?: string;
+    badgeClassName?: string;
+}
+
+export function ProviderInfo({
+    icon,
+    title,
+    description,
+    badge,
+    className,
+    containerClassName,
+    headerClassName,
+    titleContainerClassName,
+    titleClassName,
+    descriptionClassName,
+    badgeClassName
+}: ProviderInfoProps) {
+    return (
+        <div className={cn("border rounded-md p-4 space-y-3 bg-secondary/80", containerClassName, className)}>
+            <div className={cn("flex items-center justify-between", headerClassName)}>
+                <div className={cn("flex items-center gap-2", titleContainerClassName)}>
+                    {icon}
+                    <div>
+                        <div className={cn("font-medium", titleClassName)}>{title}</div>
+                        <div className={cn("text-xs text-muted-foreground", descriptionClassName)}>{description}</div>
+                    </div>
+                </div>
+                <div className={cn(badgeClassName)}>
+                    {badge}
+                </div>
+            </div>
+        </div>
+    );
+}
diff --git a/sigap-website/app/_components/section.tsx b/sigap-website/app/_components/section.tsx
new file mode 100644
index 0000000..bd8c47a
--- /dev/null
+++ b/sigap-website/app/_components/section.tsx
@@ -0,0 +1,34 @@
+import { ReactNode } from "react";
+import { cn } from "@/app/_lib/utils";
+
+interface SectionProps {
+    title: string;
+    description?: string;
+    children: ReactNode;
+    className?: string;
+    titleClassName?: string;
+    descriptionClassName?: string;
+    contentClassName?: string;
+}
+
+export function Section({
+    title,
+    description,
+    children,
+    className,
+    titleClassName,
+    descriptionClassName,
+    contentClassName
+}: SectionProps) {
+    return (
+        <div className={cn("space-y-4", className)}>
+            <div className={cn("flex flex-col gap-1")}>
+                <h3 className={cn("text-lg font-semibold", titleClassName)}>{title}</h3>
+                {description && <p className={cn("text-sm text-muted-foreground", descriptionClassName)}>{description}</p>}
+            </div>
+            <div className={cn(contentClassName)}>
+                {children}
+            </div>
+        </div>
+    );
+}
diff --git a/sigap-website/app/_styles/globals.css b/sigap-website/app/_styles/globals.css
index f3d43b9..ff7bfeb 100644
--- a/sigap-website/app/_styles/globals.css
+++ b/sigap-website/app/_styles/globals.css
@@ -84,6 +84,13 @@
     /* Sekunder: abu-abu gelap untuk elemen pendukung */
     --secondary: 0 0% 15%; /* #262626 */
     --secondary-foreground: 0 0% 85%; /* #d9d9d9 */
+    --secondary-tertiary: #242424; /* #242424 */
+
+    /* Third */
+    --tertiary: 0 0% 12%; /* #1F1F1F1 */
+    --tertiary-foreground: 0 0% 85%; /* #d9d9d9 */
+    --tertiary-border: 0 0% 20%; /* #333333 */
+    
 
     /* Muted: abu-abu gelap untuk teks pendukung */
     --muted: 0 0% 20%; /* #333333 */
diff --git a/sigap-website/app/_utils/common.ts b/sigap-website/app/_utils/common.ts
index 7456ff1..0e32710 100644
--- a/sigap-website/app/_utils/common.ts
+++ b/sigap-website/app/_utils/common.ts
@@ -278,8 +278,8 @@ export const formatDateWithLocaleAndFallback = (
  * @param lastName - The last name.
  * @returns The full name or "User" if both names are empty.
  */
-export const getFullName = (firstName: string, lastName: string): string => {
-  return `${firstName} ${lastName}`.trim() || "User";
+export const getFullName = (firstName: string | null | undefined, lastName: string | null | undefined): string => {
+  return `${firstName || ""} ${lastName || ""}`.trim() || "User";
 }
 
 /**
diff --git a/sigap-website/app/_utils/const/roles.ts b/sigap-website/app/_utils/const/roles.ts
new file mode 100644
index 0000000..b04e98b
--- /dev/null
+++ b/sigap-website/app/_utils/const/roles.ts
@@ -0,0 +1,16 @@
+import { IUserRoles } from "@/src/entities/models/roles/roles.model";
+
+export const USER_ROLES = {
+
+    TYPES: {
+        ADMIN: 'admin',
+        STAFF: 'staff',
+        VIEWER: 'viewer',
+    },
+
+    ALLOWED_ROLES_TO_ACTIONS: [
+        "admin",
+        "staff"
+    ]
+
+};
diff --git a/sigap-website/src/entities/models/roles/roles.model.ts b/sigap-website/src/entities/models/roles/roles.model.ts
index 90d81d2..94dd10b 100644
--- a/sigap-website/src/entities/models/roles/roles.model.ts
+++ b/sigap-website/src/entities/models/roles/roles.model.ts
@@ -1,5 +1,18 @@
 import { z } from "zod";
 
+export type IUserRoles = {
+    TYPES: {
+        ADMIN: 'admin';
+        STAFF: 'staff';
+        VIEWER: 'viewer';
+    };
+
+    ALLOWED_ROLES_TO_ACTIONS: [
+        'admin',
+        'staff'
+    ];
+};
+
 export const RoleSchema = z.object({
     id: z.string(),
     name: z.string(),