diff --git a/src/components/ClassDetail.tsx b/src/components/ClassDetail.tsx
index 545a712e74d55c68a5f6f3c6eaf91e0dcfe08a19..e1c00945f705bd883216c5fa8bd8b9174ead96b4 100644
--- a/src/components/ClassDetail.tsx
+++ b/src/components/ClassDetail.tsx
@@ -15,9 +15,10 @@ interface ClassDetailProps {
   jml_sesi: number;
   deskripsi: string;
   status: boolean;
+  role: string;
 }
 
-const ClassDetail: React.FC<ClassDetailProps> = ({ className, price, vehicle, imageUrl, total_jam, jml_sesi, deskripsi, status }) => {
+const ClassDetail: React.FC<ClassDetailProps> = ({ className, price, vehicle, imageUrl, total_jam, jml_sesi, deskripsi, status, role }) => {
   const [isDeleteDataOpen, setIsDeleteDataOpen] = useState(false);
   const { isOpen: isEditDataOpen, onOpen: handleOpenEditData, onClose: handleCloseEditData } = useDisclosure();
   const [selectedData, setSelectedData] = useState<any>(null);
@@ -82,33 +83,38 @@ const ClassDetail: React.FC<ClassDetailProps> = ({ className, price, vehicle, im
             {className}
             </Heading>
             <Spacer></Spacer>
-            <HStack alignItems={'end'}>
-                {(() => {
-                    if (status === true) {
-                        return (
-                            <Switch id='status' boxSize={35} size={'lg'} colorScheme='yellow' isChecked={true} mr={'7%'}/>
-                        );
-                    } 
-                    else {
-                        return (
-                            <Switch id='status' boxSize={35} colorScheme='yellow' isChecked={false}/>
-                        );
-                }})()}
-                <IconButton
-                ml={"5%"}
-                aria-label="Edit"
-                icon={<Image src={Edit} boxSize={35} />}
-                onClick={handleEditDataClick}
-                size="lg"
-                />
-                <IconButton
-                aria-label="Delete"
-                icon={<Image src={Delete} boxSize={35} />}
-                onClick={handleOpenDeleteData}
-                size="lg"
-                />
-                <Spacer></Spacer>
-            </HStack>
+            {(() => {
+                if (role === 'owner') {
+                    return (
+                        <HStack alignItems={'end'}>
+                            {(() => {
+                                if (status === true) {
+                                    return (
+                                        <Switch id='status' boxSize={35} size={'lg'} colorScheme='yellow' isChecked={true} mr={'7%'}/>
+                                    );
+                                } 
+                                else {
+                                    return (
+                                        <Switch id='status' boxSize={35} size={'lg'} colorScheme='yellow' isChecked={true} mr={'7%'}/>
+                                    );
+                            }})()}
+                            <IconButton
+                            ml={"5%"}
+                            aria-label="Edit"
+                            icon={<Image src={Edit} boxSize={35} />}
+                            onClick={handleEditDataClick}
+                            size="lg"
+                            />
+                            <IconButton
+                            aria-label="Delete"
+                            icon={<Image src={Delete} boxSize={35} />}
+                            onClick={handleOpenDeleteData}
+                            size="lg"
+                            />
+                            <Spacer></Spacer>
+                        </HStack>
+                    );
+            }})()}
         </HStack>
         <HStack
             mt={8}
diff --git a/src/pages/ClassOwnerDetail.tsx b/src/pages/ClassOwnerDetail.tsx
index 27e6386a678d0c678a9d193051e7798c9fd0a893..b12b7fb45ac4f5928701795b5eab80132a56f4ce 100644
--- a/src/pages/ClassOwnerDetail.tsx
+++ b/src/pages/ClassOwnerDetail.tsx
@@ -47,6 +47,7 @@ const ClassData: React.FC = () => {
                     jml_sesi={data.jml_sesi}
                     deskripsi={data.deskripsi}
                     status={data.status}
+                    role={'owner'}
                 />
             ))}
         </Flex>