diff --git a/app/components/evse.tsx b/app/components/evse.tsx
index 0e2c8b5..36ce413 100644
--- a/app/components/evse.tsx
+++ b/app/components/evse.tsx
@@ -3,7 +3,7 @@
 import { SyntheticEvent, useRef, useState } from 'react';
 import Input from './input';
 import { ConState, IWriter } from '../service/websocket/websocket.model';
-import WebSocket from './WebSocket';
+import WebSocket from './web.socket';
 import { ChargingSocket, IChargingSocket } from '../service/ocpp/connector';
 import { HandleOcpp } from '../service/ocpp/ocpp.handler';
 import { SendBootNotification } from '../service/ocpp/command/boot-notification/boot.notification';
@@ -14,6 +14,7 @@ import {
 } from '../service/ocpp/command/status-notification/status.notification';
 import { SendStatusNotification } from '../service/ocpp/command/status-notification/statusnotification';
 import Transaction from './transaction';
+import MeterValue from './meter.value';
 
 const defaultValue = 'ws://localhost:8080/ocpp/JwNpTpPxPm/CHR202305102';
 const connectorId = 1;
@@ -74,10 +75,12 @@ export default function Evse() {
           onMessage={onMessage}
           online={online}
         />
-        <StatusNotificationUI
-          state={socket[0].State}
-          changeState={changeState}
-        />
+        {online ? (
+          <StatusNotificationUI
+            state={socket[0].State}
+            changeState={changeState}
+          />
+        ) : null}
       </div>
 
       <div className={online ? '' : 'hidden'}>
@@ -88,6 +91,15 @@ export default function Evse() {
           changeState={changeState}
         />
       </div>
+      {socket[0].State == StatusNotification.CHARGING ? (
+        <div>
+          <MeterValue
+            state={socket[0].State}
+            w={writer.current[0]}
+            connectorId={connectorId}
+          />
+        </div>
+      ) : null}
     </div>
   );
 }
diff --git a/app/components/meter.value.tsx b/app/components/meter.value.tsx
new file mode 100644
index 0000000..3aa8c30
--- /dev/null
+++ b/app/components/meter.value.tsx
@@ -0,0 +1,59 @@
+import React, { useEffect, useState } from 'react';
+import Select, { ReturnValue } from './select';
+import { meterValueList } from './transaction';
+import { StatusNotification } from '../service/ocpp/command/status-notification/status.notification';
+import Button from './button';
+import { SendMeterValue } from '../service/ocpp/command/meter-value/meter.value';
+import { IWriter } from '../service/websocket/websocket.model';
+
+const DEFAULT_INTERVAL = 20000;
+
+type meterValue = {
+  w: IWriter;
+  connectorId: number;
+  state: StatusNotification;
+};
+
+export default function MeterValue({
+  w,
+  connectorId,
+  state,
+}: meterValue): React.JSX.Element {
+  const [meter, setMeter] = useState<Array<number>>([250]);
+  const meterValue = { name: meter.toString(), value: meter[0] };
+
+  const onSelectChange = (item: ReturnValue) => {
+    meter[0] = item as number;
+    setMeter([...meter]);
+  };
+
+  const onClick = () => {
+    SendMeterValue(w, connectorId, meter[0]);
+  };
+
+  useEffect(() => {
+    console.info('start interval');
+    const id = setInterval(onClick, DEFAULT_INTERVAL - 19000);
+    return () => {
+      console.info('clean up interval');
+      clearInterval(id);
+    };
+  }, []);
+
+  return (
+    <div className='border border-black p-2 my-2 rounded-md'>
+      <p className='my-2'>Meter value</p>
+      <p className='text-xs'>Notes: Meter Values are sent every 20 seconds</p>
+      <Select
+        items={meterValueList}
+        onChange={onSelectChange}
+        defaultItem={meterValue}
+      />
+      <Button
+        onClick={onClick}
+        text='Send Meter Values'
+        disabled={state != StatusNotification.CHARGING}
+      />
+    </div>
+  );
+}
diff --git a/app/components/transaction.tsx b/app/components/transaction.tsx
index 182eb1b..edb131e 100644
--- a/app/components/transaction.tsx
+++ b/app/components/transaction.tsx
@@ -96,13 +96,13 @@ export default function Transaction({
         onChange={onChange}
         disabled={false}
       />
-      <p className='my-2'>Meter value</p>
+      <p className='my-2'>Stop Transaction Meter value</p>
       <Select
         items={meterValueList}
         onChange={onSelectChange}
         defaultItem={meterValue}
       />
-      <div className='grid gap-2 grid-cols-2'>
+      <div className='grid gap-2 grid-cols-1 md:grid-cols-2'>
         <Button
           onClick={onStart}
           text='Start Transaction'
@@ -117,3 +117,5 @@ export default function Transaction({
     </div>
   );
 }
+
+export { meterValueList };
diff --git a/app/components/WebSocket.tsx b/app/components/web.socket.tsx
similarity index 100%
rename from app/components/WebSocket.tsx
rename to app/components/web.socket.tsx
diff --git a/app/service/ocpp/command/meter-value/meter.value.model.ts b/app/service/ocpp/command/meter-value/meter.value.model.ts
new file mode 100644
index 0000000..e69de29
diff --git a/app/service/ocpp/command/meter-value/meter.value.ts b/app/service/ocpp/command/meter-value/meter.value.ts
new file mode 100644
index 0000000..edff022
--- /dev/null
+++ b/app/service/ocpp/command/meter-value/meter.value.ts
@@ -0,0 +1,32 @@
+import { IWriter } from '../../../websocket/websocket.model';
+import { Action, CreateRequestFrame, GetRequestFrame } from '../../ocpp.action';
+import { CreateTransaction } from '../../transaction/transaction.handler';
+import { GetSession } from '../charging/start.transaction';
+
+function SendMeterValue(w: IWriter, connectorId: number, value: number): void {
+  const session = GetSession();
+  const payload: any = {
+    connectorId,
+    meterValue: [
+      {
+        context: 'Sample.Periodic',
+        value: value,
+        unit: 'W',
+        measurand: 'Power.Active.Import',
+      },
+    ],
+  };
+
+  if (session != null && session.transactionId != 0)
+    payload['transactionId'] = session.transactionId;
+
+  const frame = CreateRequestFrame(Action.METER_VALUES, payload);
+  CreateTransaction(GetRequestFrame(frame), MeterValue);
+  w.Write(frame);
+}
+
+function MeterValue(): void {
+  console.log('meter value accepted by CSMS');
+}
+
+export { SendMeterValue, MeterValue };