diff --git a/starter-artifacts/src/CorePayments.Infrastructure/Repository/CustomerRepository.cs b/starter-artifacts/src/CorePayments.Infrastructure/Repository/CustomerRepository.cs
index bc4f63c..87f0aa2 100644
--- a/starter-artifacts/src/CorePayments.Infrastructure/Repository/CustomerRepository.cs
+++ b/starter-artifacts/src/CorePayments.Infrastructure/Repository/CustomerRepository.cs
@@ -28,8 +28,6 @@ namespace CorePayments.Infrastructure.Repository
             QueryDefinition query = new QueryDefinition("select * from c where c.type = @docType order by c.accountId")
                 .WithParameter("@docType", Constants.DocumentTypes.AccountSummary);
 
-            await TriggerTrackingEvent($"Retrieving paged account summary with page size {pageSize}.");
-
             return await PagedQuery<AccountSummary>(query, pageSize, null, continuationToken);
         }
 
diff --git a/starter-artifacts/src/account-generator/Program.cs b/starter-artifacts/src/account-generator/Program.cs
index 8149991..11bc603 100644
--- a/starter-artifacts/src/account-generator/Program.cs
+++ b/starter-artifacts/src/account-generator/Program.cs
@@ -1,4 +1,5 @@
 using Bogus;
+using Bogus.Distributions.Gaussian;
 using CorePayments.Infrastructure;
 using CorePayments.Infrastructure.Domain.Entities;
 using Microsoft.Azure.Cosmos;
@@ -166,10 +167,37 @@ namespace account_generator
                             .RuleFor(u => u.overdraftLimit, (f, u) => 5000)
                             .RuleFor(u => u.memberSince, (f, u) => f.Date.Past(20));
 
+                        var accountSummary = orderFaker.Generate();
+                        var memberSinceDate = accountSummary.memberSince.Date;
+                        var currentDate = DateTime.UtcNow;
+                        var isNegative = false;
+
+                        var transactionFaker = new Faker<Transaction>()
+                            .RuleFor(u => u.id, (f, u) => f.Random.Guid().ToString())
+                            .RuleFor(u => u.accountId, (f, u) => accountId)
+                            .RuleFor(u => u.amount, (f, u) =>
+                            {
+                                isNegative = f.Random.Bool(0.8f); // 80% chance of being negative
+                                var minAmount = isNegative ? -5000 : 5; // adjust the minimum value based on negativity
+                                var maxAmount = isNegative ? -5 : 5000; // adjust the maximum value based on negativity
+                                return Convert.ToDouble(f.Finance.Amount(minAmount, maxAmount, 2));
+                            })
+                            .RuleFor(u => u.type, (f, u) => isNegative ? "Debit" : "Credit")
+                            .RuleFor(u => u.description, (f, u) => f.Lorem.Sentence())
+                            .RuleFor(u => u.merchant, (f, u) => f.Company.CompanyName())
+                            .RuleFor(u => u.timestamp, (f, u) => f.Date.Between(memberSinceDate, currentDate));
+
+                        var transactions = transactionFaker.GenerateBetween(4, 8);
+
                         tasks.Add(
                             _pollyRetryPolicy.ExecuteAsync(async () =>
                                 {
-                                    await transactionsContainer.UpsertItemAsync(orderFaker.Generate(), new PartitionKey(accountId));
+                                    await transactionsContainer.UpsertItemAsync(accountSummary, new PartitionKey(accountId));
+
+                                    foreach (var transaction in transactions)
+                                    {
+                                        await transactionsContainer.UpsertItemAsync(transaction, new PartitionKey(accountId));
+                                    }
                                 }
                             ).ContinueWith(t =>
                             {
diff --git a/starter-artifacts/ui/package-lock.json b/starter-artifacts/ui/package-lock.json
index 8a977da..0b52409 100644
--- a/starter-artifacts/ui/package-lock.json
+++ b/starter-artifacts/ui/package-lock.json
@@ -15,6 +15,7 @@
         "eslint-config-next": "13.4.5",
         "flowbite-react": "^0.4.7",
         "lodash": "^4.17.21",
+        "moment": "^2.29.4",
         "next": "13.4.5",
         "postcss": "^8.4.24",
         "react": "18.2.0",
@@ -2933,6 +2934,14 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/moment": {
+      "version": "2.29.4",
+      "resolved": "https://registry.npmjs.org/moment/-/moment-2.29.4.tgz",
+      "integrity": "sha512-5LC9SOxjSc2HF6vO2CyuTDNivEdoz2IvyJJGj6X8DJ0eFyfszE0QiEd+iXmBvUP3WHxSjFH/vIsA0EN00cgr8w==",
+      "engines": {
+        "node": "*"
+      }
+    },
     "node_modules/ms": {
       "version": "2.1.2",
       "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz",
diff --git a/starter-artifacts/ui/package.json b/starter-artifacts/ui/package.json
index 9ad4627..0dedeeb 100644
--- a/starter-artifacts/ui/package.json
+++ b/starter-artifacts/ui/package.json
@@ -16,6 +16,7 @@
     "eslint-config-next": "13.4.5",
     "flowbite-react": "^0.4.7",
     "lodash": "^4.17.21",
+    "moment": "^2.29.4",
     "next": "13.4.5",
     "postcss": "^8.4.24",
     "react": "18.2.0",
diff --git a/starter-artifacts/ui/src/components/forms/new-account.js b/starter-artifacts/ui/src/components/forms/new-account.js
index 3253c08..4e7e830 100644
--- a/starter-artifacts/ui/src/components/forms/new-account.js
+++ b/starter-artifacts/ui/src/components/forms/new-account.js
@@ -8,7 +8,7 @@ const NewAccountForm = ({ setOpenModal }) => {
 
   const [error, setError] = useState('');
   const [form, setForm] = useState({
-    id: '0909090908',
+    id: '',
     accountType: 'Checking',
     balance: '',
     customerGreetingName: '',
@@ -18,7 +18,7 @@ const NewAccountForm = ({ setOpenModal }) => {
   const [isLoading, setIsLoading] = useState(false);
   const onClickCancel = () => {
     setForm({
-      id: '0909090908',
+      id: '',
       accountType: '',
       balance: '',
       customerGreetingName: '',
@@ -37,7 +37,7 @@ const NewAccountForm = ({ setOpenModal }) => {
         setOpenModal(false);
         setIsLoading(false);
         setForm({
-          id: '0909090908',
+          id: '',
           accountType: 'Checking',
           balance: '',
           customerGreetingName: '',
@@ -52,6 +52,7 @@ const NewAccountForm = ({ setOpenModal }) => {
     });
   };
 
+  const onChangeAccountId = (e) => setForm({ ...form, id: e.target.value });
   const onChangeAccountType = (accountType) => setForm({ ...form, accountType });
   const onChangeCustomerGreetingName = (e) =>
     setForm({ ...form, customerGreetingName: e.target.value });
@@ -60,6 +61,18 @@ const NewAccountForm = ({ setOpenModal }) => {
 
   return (
     <div className="space-y-6">
+      <div className="mb-4">
+        <div className="mb-2 block">
+          <Label htmlFor="accountId" value="Account Id:" />
+        </div>
+        <TextInput
+          id="accountId"
+          placeholder="Account Id"
+          onChange={onChangeAccountId}
+          value={form.accountId}
+          required
+        />
+      </div>
       <div className="mb-4">
         <div className="mb-2 block">
           <Label htmlFor="customerGreetingName" value="Customer Greeting Name:" />
diff --git a/starter-artifacts/ui/src/components/tables/transactions-statement.js b/starter-artifacts/ui/src/components/tables/transactions-statement.js
index a6ef071..826d506 100644
--- a/starter-artifacts/ui/src/components/tables/transactions-statement.js
+++ b/starter-artifacts/ui/src/components/tables/transactions-statement.js
@@ -4,7 +4,7 @@ import { Card, Spinner } from 'flowbite-react';
 import { useCallback, useEffect, useState } from 'react';
 
 import Datatable from '~/components/tables/datatable';
-import { Capitalize, USDollar } from '~/helpers';
+import { Capitalize, USDollar, FormatDate } from '~/helpers';
 import useTransactionsStatement from '~/hooks/transaction-statements';
 
 const headers = [
@@ -58,19 +58,18 @@ const TransactionsStatementTable = ({ accountId }) => {
   }, [data]);
 
   const formattedData = rows.map((row) => {
-    const date = new Date(row.timestamp);
     return {
       ...row,
       type: Capitalize(row.type),
       amount: USDollar.format(row.amount),
-      timestamp: `${date.toLocaleDateString()} ${date.toLocaleTimeString()}`
+      timestamp: FormatDate(row.timestamp)
     };
   });
 
   return (
     <Card className="card w-full justify-center items-center">
       <div className="text-xl p-6 font-bold">Transactions</div>
-      {isLoading || !isRefetching ? (
+      {isLoading ? (
         <div className="text-center p-6">
           <Spinner aria-label="Loading..." />
         </div>
diff --git a/starter-artifacts/ui/src/helpers.js b/starter-artifacts/ui/src/helpers.js
index d3af382..6cd8e83 100644
--- a/starter-artifacts/ui/src/helpers.js
+++ b/starter-artifacts/ui/src/helpers.js
@@ -1,4 +1,5 @@
 import _ from 'lodash';
+import moment from 'moment';
 
 export const USDollar = new Intl.NumberFormat('en-US', {
   style: 'currency',
@@ -9,6 +10,22 @@ export const Capitalize = (word) => {
   return word.charAt(0).toUpperCase() + word.slice(1);
 };
 
+export const FormatDate = (dateString) => {
+  const formats = [
+    "YYYY-MM-DDTHH:mm:ssZ", // First format to try
+    "MM/DD/YYYY h:mm:ss A" // Second format to try
+  ];
+
+  for (const format of formats) {
+    const momentDate = moment.utc(dateString, format);
+    if (momentDate.isValid()) {
+      return momentDate.format('MMMM DD, YYYY hh:mm a');
+    }
+  }
+
+  return 'Invalid date'; // Return default value if parsing fails for all formats
+};
+
 export const DiffObjects = (obj1, obj2) => {
   const diff = _.differenceWith(_.toPairs(obj1), _.toPairs(obj2), _.isEqual);
   return diff
diff --git a/starter-artifacts/ui/src/hooks/transaction-statements.js b/starter-artifacts/ui/src/hooks/transaction-statements.js
index c62be8b..680377a 100644
--- a/starter-artifacts/ui/src/hooks/transaction-statements.js
+++ b/starter-artifacts/ui/src/hooks/transaction-statements.js
@@ -14,9 +14,11 @@ const getTransactions = async ({ queryKey }) => {
 
 const useTransactionsStatement = (accountId, continuationToken = null, pageSize = 10) => {
   const client = useQueryClient();
-  return useQuery(['transactions', { accountId, continuationToken, pageSize }], getTransactions, {
-    onSuccess: () => {
-      client.invalidateQueries();
+  const queryKey = ['transactions', { accountId, continuationToken, pageSize }];
+
+  return useQuery(queryKey, getTransactions, {
+    onSuccess: (data) => {
+      client.setQueryData(queryKey, data); // Update the query data with the fetched result
     }
   });
 };