diff --git a/frontend/src/pages/ChargingRecordList.tsx b/frontend/src/pages/ChargingRecordList.tsx
index e8f9290b..60d928bd 100644
--- a/frontend/src/pages/ChargingRecordList.tsx
+++ b/frontend/src/pages/ChargingRecordList.tsx
@@ -1,6 +1,6 @@
 import React, { Component, useState, useEffect } from "react";
 import axios from "../axios";
-import { ChargingRecord } from "../api/api";
+import { ChargingRecord, flowChargingRecord } from "../api/api";
 import Dashboard from "../Dashboard";
 
 import {
@@ -49,7 +49,27 @@ export default function ChargingRecordList() {
       setExpand(true)
     }
   }
-
+  
+  interface Props {
+    FlowCharingRecords: flowChargingRecord[] | undefined
+  }
+  /* eslint-disable react/prop-types */
+  const PerFlowTableView = ({ FlowCharingRecords }: Props): React.ReactElement => (
+    <>
+      {expand === true ? FlowCharingRecords!.map((FlowChargingRecord, i) => (
+            <TableRow key={i}>
+              <TableCell>{}</TableCell>
+              <TableCell>{FlowChargingRecord.Filter}</TableCell>
+              <TableCell>{FlowChargingRecord.QuotaLeft}</TableCell>
+              <TableCell>{FlowChargingRecord.DataTotalVolume}</TableCell>
+              <TableCell>{FlowChargingRecord.DataVolumeUplink}</TableCell>
+              <TableCell>{FlowChargingRecord.DataVolumeDownlink}</TableCell>
+            </TableRow>
+         )) : <></>
+      }
+    </>
+  )
+  
   const tableView = (
     <Table>
       <TableHead>
@@ -64,39 +84,29 @@ export default function ChargingRecordList() {
         </TableHead>
         <TableBody>
           {cr.map((row, index) => (
-            <TableRow key={index}>
-              <TableCell>
-                {row.Supi}
-                <Button
-                  onClick={() => onExpand()}
-                >
-                {expand === true ? <ExpandMoreIcon viewBox="0 0 24 24"/> : <ExpandLessIcon viewBox="0 0 24 24"/>}
-                </Button>
-              </TableCell>
-              <TableCell>{row.CmState}</TableCell>
-              <TableCell>{row.Quota}</TableCell>
-              <TableCell>{row.DataTotalVolume}</TableCell>
-              <TableCell>{row.DataVolumeUplink}</TableCell>
-              <TableCell>{row.DataVolumeDownlink}</TableCell>
-            </TableRow>
-          ))}
-          {expand === true ? cr.map((row, index) => (
-            row.flowInfos?.map((flowChargingRecord, i) => (
-              <TableRow key={i}>
-                <TableCell>{}</TableCell>
-                <TableCell>{flowChargingRecord.Filter}</TableCell>
-                <TableCell>{flowChargingRecord.QuotaLeft}</TableCell>
-                <TableCell>{flowChargingRecord.DataTotalVolume}</TableCell>
-                <TableCell>{flowChargingRecord.DataVolumeUplink}</TableCell>
-                <TableCell>{flowChargingRecord.DataVolumeDownlink}</TableCell>
+            <>
+              <TableRow key={index}>
+                <TableCell>
+                  {row.Supi}
+                  <Button
+                    onClick={() => onExpand()}
+                  >
+                  {expand === true ? <ExpandMoreIcon viewBox="0 0 24 24"/> : <ExpandLessIcon viewBox="0 0 24 24"/>}
+                  </Button>
+                </TableCell>
+                <TableCell>{row.CmState}</TableCell>
+                <TableCell>{row.Quota}</TableCell>
+                <TableCell>{row.DataTotalVolume}</TableCell>
+                <TableCell>{row.DataVolumeUplink}</TableCell>
+                <TableCell>{row.DataVolumeDownlink}</TableCell>
               </TableRow>
-            ))
-          )): 
-              <></>
-          }
+              <PerFlowTableView FlowCharingRecords={row.flowInfos} />
+            </>
+          ))}
         </TableBody>
     </Table>
   )
+  
   return (
     <Dashboard title="UE CHARGING RECORD">
       <Grid container spacing={2}>