diff --git a/src/pages/PremiumSong.tsx b/src/pages/PremiumSong.tsx
index 3361c8953f05d77c556499103324f1a783b48680..69f6bf33ec48698a2c6a733691f4f6ba90f20dc2 100644
--- a/src/pages/PremiumSong.tsx
+++ b/src/pages/PremiumSong.tsx
@@ -16,8 +16,8 @@ import {
   Td,
   TableCaption,
   TableContainer,
-  Link
-} from '@chakra-ui/react'
+  Link,
+} from "@chakra-ui/react";
 
 import {
   Modal,
@@ -26,11 +26,10 @@ import {
   ModalHeader,
   ModalFooter,
   ModalBody,
-  ModalCloseButton
-} from '@chakra-ui/react'
+  ModalCloseButton,
+} from "@chakra-ui/react";
 
 export const PremiumSong = () => {
-
   const auth = useAuth();
   const [data, setData] = useState<any>([]);
   const [fetchStatus, setFetchStatus] = useState(true);
@@ -41,32 +40,31 @@ export const PremiumSong = () => {
   useEffect(() => {
     let fetchData = async () => {
       try {
-        let result = await http.get(`/singers/${auth.user?.user_id}/songs`)
-        let resultdata = result.data.data
+        let result = await http.get(`/singers/${auth.user?.user_id}/songs`);
+        let resultdata = result.data.data;
 
-        setData([...resultdata])
+        setData([...resultdata]);
       } catch (error) {
         console.log(error);
       }
-    }
+    };
 
     if (fetchStatus) {
-      fetchData()
-      setFetchStatus(false)
+      fetchData();
+      setFetchStatus(false);
     }
-  }, [fetchStatus, setFetchStatus])
+  }, [fetchStatus, setFetchStatus]);
 
   const handleDelete = async () => {
     let idData = songId.current;
 
-    await http.delete(`/songs/${idData}/delete`)
-      .then((res) => {
-        console.log(res)
-        setFetchStatus(true)
-      })
+    await http.delete(`/songs/${idData}/delete`).then((res) => {
+      console.log(res);
+      setFetchStatus(true);
+    });
 
-    onClose()
-  }
+    onClose();
+  };
 
   return (
     <Box>
@@ -75,41 +73,54 @@ export const PremiumSong = () => {
         <WrapItem my={4} position={"relative"}>
           <Heading fontSize={24}>Songs Management</Heading>
           <Link as={RouterLink} to="/songs/add" marginLeft={"auto"}>
-            <Button colorScheme='teal'>Add Songs</Button>
+            <Button colorScheme="teal">Add Songs</Button>
           </Link>
         </WrapItem>
         <TableContainer>
-          <Table variant='striped'>
+          <Table variant="striped">
             <TableCaption>List of premium songs</TableCaption>
             <Thead>
               <Tr>
                 <Th>No</Th>
                 <Th>Title</Th>
                 <Th>Singer</Th>
-                <Th>Action</Th>
+                <Th isNumeric>Action</Th>
               </Tr>
             </Thead>
             <Tbody>
-              {data !== null && data.map((res: any, index: any) => {
-                return (
-                  <Tr key={res.song_id}>
-                    <Td>{index + 1}</Td>
-                    <Td>{res.title}</Td>
-                    <Td>{auth.user?.name}</Td>
-                    <Td>
-                      <WrapItem position={"relative"}>
-                        <Link as={RouterLink} to={`/songs/${6}/edit`} marginLeft={"auto"}>
-                          <Button colorScheme='blue' margin={1}>Edit</Button>
-                        </Link>
-                        <Button colorScheme='pink' margin={1} onClick={() => {
-                          songId.current = res.song_id
-                          onOpen()
-                        }}>Delete</Button>
-                      </WrapItem>
-                    </Td>
-                  </Tr>
-                )
-              })}
+              {data !== null &&
+                data.map((res: any, index: any) => {
+                  return (
+                    <Tr key={res.song_id}>
+                      <Td>{index + 1}</Td>
+                      <Td>{res.title}</Td>
+                      <Td>{auth.user?.name}</Td>
+                      <Td>
+                        <WrapItem position={"relative"}>
+                          <Link
+                            as={RouterLink}
+                            to={`/songs/${6}/edit`}
+                            marginLeft={"auto"}
+                          >
+                            <Button colorScheme="blue" margin={1}>
+                              Edit
+                            </Button>
+                          </Link>
+                          <Button
+                            colorScheme="pink"
+                            margin={1}
+                            onClick={() => {
+                              songId.current = res.song_id;
+                              onOpen();
+                            }}
+                          >
+                            Delete
+                          </Button>
+                        </WrapItem>
+                      </Td>
+                    </Tr>
+                  );
+                })}
             </Tbody>
           </Table>
         </TableContainer>
@@ -119,14 +130,12 @@ export const PremiumSong = () => {
         <ModalContent>
           <ModalHeader>Delete Song</ModalHeader>
           <ModalCloseButton />
-          <ModalBody>
-            Are you sure to delete this song?
-          </ModalBody>
+          <ModalBody>Are you sure to delete this song?</ModalBody>
           <ModalFooter>
-            <Button colorScheme='blue' mr={2} onClick={handleDelete}>
+            <Button colorScheme="blue" mr={2} onClick={handleDelete}>
               Yes
             </Button>
-            <Button colorScheme='pink' mr={2} onClick={onClose}>
+            <Button colorScheme="pink" mr={2} onClick={onClose}>
               No
             </Button>
           </ModalFooter>