diff --git a/src/backend/app/Console/Commands/DemoDataCreator.php b/src/backend/app/Console/Commands/DemoDataCreator.php
index d90c74bd2..d29744e64 100644
--- a/src/backend/app/Console/Commands/DemoDataCreator.php
+++ b/src/backend/app/Console/Commands/DemoDataCreator.php
@@ -2,9 +2,11 @@
 
 namespace App\Console\Commands;
 
+use App\Helpers\TokenGenerator;
 use App\Models\MainSettings;
 use App\Models\MaintenanceUsers;
 use App\Models\Meter\Meter;
+use App\Models\Meter\MeterToken;
 use App\Models\Person\Person;
 use App\Models\Token;
 use App\Models\Transaction\AgentTransaction;
@@ -47,6 +49,7 @@ public function __construct(
         private AirtelTransaction $airtelTransaction,
         private Meter $meter,
         private Token $token,
+        private MeterToken $meterToken,
         private CalinTransaction $calinTransaction,
         private MainSettings $mainSettings,
         private TicketCategory $ticketCategory,
@@ -254,7 +257,7 @@ private function generateTransaction(): void {
         // generate random token
         if ($transactionData->transaction->amount > 0) {
             $tokenData = [
-                'token' => Str::random(30),
+                'token' => TokenGenerator::generate(),
                 'load' => round(
                     $transactionData->transaction->amount /
                         $randomMeter['tariff']['price'],
@@ -266,6 +269,22 @@ private function generateTransaction(): void {
             $token->save();
             $transactionData->token = $token;
 
+            // generate meter_token
+            $meterTokenData = [
+                'meter_id' => $randomMeter->id,
+                'token' => TokenGenerator::generate(),
+                'energy' => round(
+                    $transactionData->transaction->amount /
+                    $randomMeter['tariff']['price'],
+                    2
+                ),
+                'transaction_id' => $transaction->id,
+            ];
+            $meterToken = $this->meterToken->newQuery()->make(['meter_id' => $meterTokenData['meter_id'],
+                'token' => $meterTokenData['token'], '' => $meterTokenData['energy'],
+                'transaction_id' => $meterTokenData['transaction_id']]);
+            $meterToken->save();
+
             // payment event
             event(
                 'payment.successful',
diff --git a/src/backend/app/Helpers/TokenGenerator.php b/src/backend/app/Helpers/TokenGenerator.php
new file mode 100644
index 000000000..73037d18f
--- /dev/null
+++ b/src/backend/app/Helpers/TokenGenerator.php
@@ -0,0 +1,19 @@
+<?php
+
+namespace App\Helpers;
+
+class TokenGenerator {
+    /**
+     * Generate a random 12-digit token.
+     *
+     * @return string
+     */
+    public static function generate() {
+        $token = '';
+        for ($i = 0; $i < 12; ++$i) {
+            $token .= random_int(0, 9);
+        }
+
+        return $token;
+    }
+}
diff --git a/src/frontend/src/mixins/token.js b/src/frontend/src/mixins/token.js
new file mode 100644
index 000000000..070baf960
--- /dev/null
+++ b/src/frontend/src/mixins/token.js
@@ -0,0 +1,11 @@
+export const token = {
+  methods: {
+    formatToken(token) {
+      // Ensure token is a string
+      const tokenStr = String(token)
+      // Format in the desired pattern
+      // return tokenStr.match(/.{1,4}/g).join('-'); // For "1234-1234-1234"
+      return tokenStr.match(/.{1,3}/g).join(" ") // For "123 412 341 234"
+    },
+  },
+}
diff --git a/src/frontend/src/modules/Meter/Transactions.vue b/src/frontend/src/modules/Meter/Transactions.vue
index 54d687c44..1d426a256 100644
--- a/src/frontend/src/modules/Meter/Transactions.vue
+++ b/src/frontend/src/modules/Meter/Transactions.vue
@@ -23,15 +23,15 @@
             <md-table-cell
               v-text="moneyFormat(token.transaction.amount)"
             ></md-table-cell>
-            <md-table-cell v-if="token.paid_for_type === 'token'">
-              Token {{ token.paid_for.token }}
+            <md-table-cell v-if="token.paid_for_type === 'App\\Models\\Token'">
+              Token ({{ formatToken(token.paid_for.token) }})
             </md-table-cell>
             <md-table-cell v-else>
               {{ token.paid_for_type }}
             </md-table-cell>
             <md-table-cell
-              v-if="token.paid_for_type === 'token'"
-              v-text="readable(token.paid_for.energy) + 'kWh'"
+              v-if="token.paid_for_type === 'App\\Models\\Token'"
+              v-text="readable(token.paid_for.energy) + ' kWh'"
             ></md-table-cell>
             <md-table-cell v-else>-</md-table-cell>
             <md-table-cell
@@ -49,10 +49,11 @@ import Widget from "../../shared/widget"
 import { EventBus } from "@/shared/eventbus"
 import { currency } from "@/mixins/currency"
 import { timing } from "@/mixins/timing"
+import { token } from "@/mixins/token"
 
 export default {
   name: "Transactions.vue",
-  mixins: [currency, timing],
+  mixins: [currency, timing, token],
   components: { Widget },
   props: {
     transactions: {