diff --git a/frontend/src/pages/Charging/ChargingList.tsx b/frontend/src/pages/Charging/ChargingList.tsx
index 32f83a56a2f43c88c340068600585367cddf7519..fecb0d032a1d8a1f3ea3d32a50446039ca2d78ce 100644
--- a/frontend/src/pages/Charging/ChargingList.tsx
+++ b/frontend/src/pages/Charging/ChargingList.tsx
@@ -35,7 +35,13 @@ const ChargingList: React.FC<{
 
     return (
       <>
-        <TableCell>{chargingRecordMatch ? chargingRecordMatch.Usage : "-"}</TableCell>
+        <TableCell>
+          {chargingRecordMatch
+            ? props.chargingMethod === "Online"
+              ? chargingRecordMatch.QuotaLeft
+              : chargingRecordMatch.Usage
+            : "-"}
+        </TableCell>
         <TableCell>{chargingRecordMatch ? chargingRecordMatch.TotalVol : "-"}</TableCell>
         <TableCell>{chargingRecordMatch ? chargingRecordMatch.UlVol : "-"}</TableCell>
         <TableCell>{chargingRecordMatch ? chargingRecordMatch.DlVol : "-"}</TableCell>
@@ -73,7 +79,7 @@ const ChargingList: React.FC<{
   return (
     <Table>
       <TableHead>
-        <h3>Offline Charging</h3>
+        <h3>{props.chargingMethod} Charging</h3>
         <TableRow>
           {tableColumnNames.map((colName, idx) => {
             return <TableCell key={idx}>{colName}</TableCell>;
diff --git a/frontend/src/pages/SubscriberCreate.tsx b/frontend/src/pages/SubscriberCreate.tsx
index 1a3b99ab785f4864d3c7793dcf9b0b0ccfdbd6ec..9ab7f2c17fc1dcaa8db6142a92d5a51dbb736e5d 100644
--- a/frontend/src/pages/SubscriberCreate.tsx
+++ b/frontend/src/pages/SubscriberCreate.tsx
@@ -472,11 +472,21 @@ export default function SubscriberCreate() {
     }
   };
 
-  const onDnnDelete = (index: number, dnn: string) => {
+  const onDnnDelete = (index: number, dnn: string, slice: string) => {
     if (data.SessionManagementSubscriptionData !== undefined) {
       delete data.SessionManagementSubscriptionData![index].dnnConfigurations![dnn];
       setData({ ...data });
     }
+    // Remove all flow-based charging rule in this DNN
+    if (data.ChargingDatas !== undefined) {
+      for (let i = 0; i < data.ChargingDatas!.length; i++) {
+        if (data.ChargingDatas![i].dnn === dnn && data.ChargingDatas![i].snssai === slice) {
+          data.ChargingDatas!.splice(i, 1);
+          i--;
+        }
+      }
+    }
+    setData({ ...data });
   };
 
   const onFlowRulesDelete = (dnn: string, flowKey: string, qosRef: number | undefined) => {
@@ -504,6 +514,14 @@ export default function SubscriberCreate() {
         }
       }
     }
+    if (data.ChargingDatas !== undefined) {
+      for (let i = 0; i < data.ChargingDatas!.length; i++) {
+        if (data.ChargingDatas![i].qosRef === qosRef) {
+          data.ChargingDatas!.splice(i, 1);
+          i--;
+        }
+      }
+    }
     setData({ ...data });
   };
 
@@ -1722,7 +1740,13 @@ export default function SubscriberCreate() {
                           <Button
                             color="secondary"
                             variant="contained"
-                            onClick={() => onDnnDelete(index, dnn)}
+                            onClick={() =>
+                              onDnnDelete(
+                                index,
+                                dnn,
+                                toHex(row.singleNssai!.sst!) + row.singleNssai!.sd!,
+                              )
+                            }
                             sx={{
                               m: 2,
                               backgroundColor: "red",