diff --git a/web-app/src/api/account.ts b/web-app/src/api/account.ts
index 2dc22c6..aa83918 100644
--- a/web-app/src/api/account.ts
+++ b/web-app/src/api/account.ts
@@ -3,6 +3,7 @@ import { ApiClient } from './base'
 import type { Currency } from './data'
 import type { Page, PageRequest } from './pagination'
 import { getSelectedProfile } from './profile'
+import type { Attachment } from './attachment'
 
 export interface AccountType {
   id: string
@@ -87,6 +88,7 @@ export interface AccountValueRecord {
   type: AccountValueRecordType
   value: number
   currency: Currency
+  attachments: Attachment[]
 }
 
 export interface AccountValueRecordCreationPayload {
@@ -103,6 +105,14 @@ export enum AccountHistoryItemType {
   JOURNAL_ENTRY = 'JOURNAL_ENTRY',
 }
 
+export function accountHistoryItemTypeToDisplayName(type: AccountHistoryItemType) {
+  if (type === AccountHistoryItemType.TEXT) return 'Text'
+  if (type === AccountHistoryItemType.PROPERTY_CHANGE) return 'Property Change'
+  if (type === AccountHistoryItemType.VALUE_RECORD) return 'Value Record'
+  if (type === AccountHistoryItemType.JOURNAL_ENTRY) return 'Journal Entry'
+  return 'Unknown'
+}
+
 export interface AccountHistoryItem {
   timestamp: string
   type: AccountHistoryItemType
diff --git a/web-app/src/api/attachment.ts b/web-app/src/api/attachment.ts
index 4e3e4f1..3fd6927 100644
--- a/web-app/src/api/attachment.ts
+++ b/web-app/src/api/attachment.ts
@@ -2,6 +2,14 @@ import type { RouteLocation } from 'vue-router'
 import { ApiClient } from './base'
 import { getSelectedProfile } from './profile'
 
+export interface Attachment {
+  id: number
+  uploadedAt: string
+  filename: string
+  contentType: string
+  size: number
+}
+
 export class AttachmentApiClient extends ApiClient {
   readonly profileName: string
 
diff --git a/web-app/src/api/transaction.ts b/web-app/src/api/transaction.ts
index 363826b..748d4ff 100644
--- a/web-app/src/api/transaction.ts
+++ b/web-app/src/api/transaction.ts
@@ -1,3 +1,4 @@
+import type { Attachment } from './attachment'
 import { ApiClient } from './base'
 import type { Currency } from './data'
 import { type Page, type PageRequest } from './pagination'
@@ -86,7 +87,7 @@ export interface TransactionDetail {
   debitedAccount: TransactionDetailAccount | null
   tags: string[]
   lineItems: TransactionDetailLineItem[]
-  attachments: TransactionDetailAttachment[]
+  attachments: Attachment[]
 }
 
 export interface TransactionDetailAccount {
@@ -104,14 +105,6 @@ export interface TransactionDetailLineItem {
   category: TransactionCategory | null
 }
 
-export interface TransactionDetailAttachment {
-  id: number
-  uploadedAt: string
-  filename: string
-  contentType: string
-  size: number
-}
-
 export interface AddTransactionPayload {
   timestamp: string
   amount: number
diff --git a/web-app/src/assets/main.css b/web-app/src/assets/main.css
index 55e615e..8317281 100644
--- a/web-app/src/assets/main.css
+++ b/web-app/src/assets/main.css
@@ -1,5 +1,6 @@
 @import url('@/assets/styles/fonts.css');
 @import url('@/assets/styles/text.css');
+@import url('@/assets/styles/spacing.css');
 
 :root {
   --theme-primary: #113188;
@@ -12,6 +13,7 @@
 
   --text: rgb(247, 247, 247);
   --text-muted: gray;
+  --text-link: #6c8eff;
   --positive: rgb(59, 219, 44);
   --negative: rgb(253, 52, 52);
   --warning: rgb(255, 187, 0);
@@ -26,11 +28,11 @@ body {
 }
 
 a {
-  color: var(--theme-primary);
+  color: var(--text-link);
   text-decoration: none;
 }
 a:hover {
-  color: var(--theme-tertiary);
+  color: var(--text-tertiary);
   text-decoration: underline;
 }
 
diff --git a/web-app/src/assets/styles/spacing.css b/web-app/src/assets/styles/spacing.css
new file mode 100644
index 0000000..d99b1c9
--- /dev/null
+++ b/web-app/src/assets/styles/spacing.css
@@ -0,0 +1,11 @@
+.p0 {
+  padding: 0;
+}
+
+.m0 {
+  margin: 0;
+}
+
+.mt-1 {
+  margin-top: 0.5rem;
+}
diff --git a/web-app/src/assets/styles/text.css b/web-app/src/assets/styles/text.css
index 48695f4..64daa09 100644
--- a/web-app/src/assets/styles/text.css
+++ b/web-app/src/assets/styles/text.css
@@ -41,3 +41,7 @@
 .align-left {
   text-align: left;
 }
+
+.align-center {
+  text-align: center;
+}
diff --git a/web-app/src/components/AddValueRecordModal.vue b/web-app/src/components/AddValueRecordModal.vue
index 9a94abd..6347cca 100644
--- a/web-app/src/components/AddValueRecordModal.vue
+++ b/web-app/src/components/AddValueRecordModal.vue
@@ -9,6 +9,7 @@ import { AccountApiClient, AccountValueRecordType, type Account, type AccountVal
 import { datetimeLocalToISO, getDatetimeLocalValueForNow } from '@/util/time';
 import FileSelector from '@/components/common/FileSelector.vue';
 import { useRoute } from 'vue-router';
+import { showConfirm } from '@/util/alert';
 
 const route = useRoute()
 const props = defineProps<{ account: Account }>()
@@ -23,7 +24,11 @@ const attachments: Ref<File[]> = ref([])
 async function show(): Promise<AccountValueRecord | undefined> {
   if (!modal.value) return Promise.resolve(undefined)
   timestamp.value = getDatetimeLocalValueForNow()
-  amount.value = props.account.currentBalance ?? 0
+  if (props.account.currentBalance !== null) {
+    amount.value = props.account.currentBalance / Math.pow(10, props.account.currency.fractionalDigits)
+  } else {
+    amount.value = 0
+  }
   savedValueRecord.value = undefined
   const result = await modal.value.show()
   if (result === 'saved') {
@@ -38,6 +43,11 @@ async function addValueRecord() {
     type: AccountValueRecordType.BALANCE,
     value: Math.round(amount.value * Math.pow(10, props.account.currency.fractionalDigits))
   }
+  // Check and confirm with the user if the value they entered doesn't match the expected balance of the account.
+  if (props.account.currentBalance !== null && payload.value !== props.account.currentBalance) {
+    const result = await showConfirm("The balance you entered doesn't match the expected current balance for this account. Proceeding to add this value record will result in an incomplete account history and possible reconciliation errors. Are you sure you want to proceed?")
+    if (!result) return
+  }
   const api = new AccountApiClient(route)
   try {
     savedValueRecord.value = await api.createValueRecord(props.account.id, payload, attachments.value)
diff --git a/web-app/src/components/common/AttachmentRow.vue b/web-app/src/components/common/AttachmentRow.vue
new file mode 100644
index 0000000..b716b85
--- /dev/null
+++ b/web-app/src/components/common/AttachmentRow.vue
@@ -0,0 +1,49 @@
+<script setup lang="ts">
+import { AttachmentApiClient } from '@/api/attachment';
+import { useAuthStore } from '@/stores/auth-store';
+import { useRoute } from 'vue-router';
+import AppButton from './AppButton.vue';
+
+
+interface AttachmentInfo {
+  filename: string
+  contentType: string
+  size: number
+  id?: number
+}
+
+const route = useRoute()
+const authStore = useAuthStore()
+const props = defineProps<{ attachment: AttachmentInfo, disabled?: boolean }>()
+defineEmits<{ "deleted": void }>()
+
+function downloadFile() {
+  const api = new AttachmentApiClient(route)
+  if (!authStore.state) return
+  api.downloadAttachment(props.attachment?.id ?? 0, authStore.state.token)
+}
+</script>
+<template>
+  <div class="attachment-row">
+    <div style="display: flex; align-items: center; margin-left: 1rem;">
+      <div>
+        <div>{{ attachment.filename }}</div>
+        <div style="font-size: 0.75rem;">{{ attachment.contentType }}</div>
+      </div>
+    </div>
+    <div>
+      <AppButton icon="download" type="button" @click="downloadFile()" v-if="attachment.id !== undefined" />
+      <AppButton v-if="!disabled" type="button" icon="trash" @click="$emit('deleted')" />
+    </div>
+  </div>
+</template>
+<style lang="css">
+.attachment-row {
+  background-color: var(--bg);
+  display: flex;
+  justify-content: space-between;
+  padding: 0.25rem;
+  border-radius: 0.5rem;
+  margin: 0.5rem 0;
+}
+</style>
diff --git a/web-app/src/components/common/FileSelector.vue b/web-app/src/components/common/FileSelector.vue
index d555886..8ac36fd 100644
--- a/web-app/src/components/common/FileSelector.vue
+++ b/web-app/src/components/common/FileSelector.vue
@@ -1,9 +1,7 @@
 <script setup lang="ts">
 import { onMounted, ref, useTemplateRef, watch, type Ref } from 'vue';
 import AppButton from '@/components/common/AppButton.vue';
-import { AttachmentApiClient } from '@/api/attachment';
-import { useRoute } from 'vue-router';
-import { useAuthStore } from '@/stores/auth-store';
+import AttachmentRow from './AttachmentRow.vue';
 
 interface ExistingFile {
   id: number
@@ -41,8 +39,6 @@ interface Props {
   initialFiles?: ExistingFile[]
 }
 
-const route = useRoute()
-const authStore = useAuthStore()
 const props = withDefaults(defineProps<Props>(), {
   disabled: false,
   initialFiles: () => []
@@ -105,28 +101,11 @@ function onFileDeleteClicked(idx: number) {
   }
   files.value.splice(idx, 1)
 }
-
-function downloadFile(attachmentId: number) {
-  const api = new AttachmentApiClient(route)
-  if (!authStore.state) return
-  api.downloadAttachment(attachmentId, authStore.state.token)
-}
 </script>
 <template>
   <div class="file-selector">
     <div @click.prevent="">
-      <div v-for="file, idx in files" :key="idx" class="file-selector-item">
-        <div style="display: flex; align-items: center; margin-left: 1rem;">
-          <div>
-            <div>{{ file.filename }}</div>
-            <div style="font-size: 0.75rem;">{{ file.contentType }}</div>
-          </div>
-        </div>
-        <div>
-          <AppButton icon="download" @click="downloadFile(file.id)" v-if="(file instanceof ExistingFileListItem)" />
-          <AppButton v-if="!disabled" icon="trash" @click="onFileDeleteClicked(idx)" />
-        </div>
-      </div>
+      <AttachmentRow v-for="file, idx in files" :key="idx" :attachment="file" @deleted="onFileDeleteClicked(idx)" />
     </div>
 
     <div>
@@ -143,13 +122,4 @@ function downloadFile(attachmentId: number) {
 .file-selector {
   width: 100%;
 }
-
-.file-selector-item {
-  background-color: var(--bg-secondary);
-  display: flex;
-  justify-content: space-between;
-  padding: 0.25rem;
-  border-radius: 0.5rem;
-  margin: 0.5rem 0;
-}
 </style>
diff --git a/web-app/src/components/history/AccountHistory.vue b/web-app/src/components/history/AccountHistory.vue
index d10e007..0c2efae 100644
--- a/web-app/src/components/history/AccountHistory.vue
+++ b/web-app/src/components/history/AccountHistory.vue
@@ -5,28 +5,49 @@ import { onMounted, ref, type Ref } from 'vue';
 import ValueRecordHistoryItem from './ValueRecordHistoryItem.vue';
 import JournalEntryHistoryItem from './JournalEntryHistoryItem.vue';
 import { useRoute } from 'vue-router';
+import AppButton from '../common/AppButton.vue';
+import AppBadge from '../common/AppBadge.vue';
 
 const route = useRoute()
 const props = defineProps<{ accountId: number }>()
 const historyItems: Ref<AccountHistoryItem[]> = ref([])
+const canLoadMore = ref(true)
+const nextPage: Ref<PageRequest> = ref({ page: 1, size: 10, sorts: [{ attribute: 'timestamp', dir: 'DESC' }] })
 
 onMounted(async () => {
-  const pageRequest: PageRequest = { page: 1, size: 10, sorts: [{ attribute: 'timestamp', dir: 'DESC' }] }
-  const api = new AccountApiClient(route)
-  while (true) {
-    try {
-      const page = await api.getHistory(props.accountId, pageRequest)
-      historyItems.value.push(...page.items)
-      if (page.isLast) return
-      pageRequest.page++
-    } catch (err) {
-      console.error(err)
-      historyItems.value = []
-      return
-    }
-  }
+  await loadNextPage()
 })
 
+async function loadNextPage() {
+  const api = new AccountApiClient(route)
+  try {
+    const page = await api.getHistory(props.accountId, nextPage.value)
+    historyItems.value.push(...page.items)
+    canLoadMore.value = !page.isLast
+    if (canLoadMore.value) {
+      nextPage.value.page++
+    }
+  } catch (err) {
+    console.error(err)
+    historyItems.value = []
+    canLoadMore.value = false
+    nextPage.value.page = 1
+  }
+}
+
+async function loadAll() {
+  while (canLoadMore.value) {
+    await loadNextPage()
+  }
+}
+
+function reload() {
+  nextPage.value.page = 1
+  canLoadMore.value = true
+  historyItems.value = []
+  loadNextPage()
+}
+
 function asVR(i: AccountHistoryItem): AccountHistoryValueRecordItem {
   return i as AccountHistoryValueRecordItem
 }
@@ -34,19 +55,27 @@ function asVR(i: AccountHistoryItem): AccountHistoryValueRecordItem {
 function asJE(i: AccountHistoryItem): AccountHistoryJournalEntryItem {
   return i as AccountHistoryJournalEntryItem
 }
+
+defineExpose({ reload })
 </script>
 <template>
   <div>
     <div v-for="item in historyItems" :key="item.timestamp" class="history-item">
       <div class="history-item-header">
-        <div class="font-mono font-size-xsmall">{{ new Date(item.timestamp).toLocaleString() }}</div>
-        <div>{{ item.type }}</div>
+        <div class="font-mono font-size-xsmall text-muted">{{ new Date(item.timestamp).toLocaleString() }}</div>
       </div>
 
       <ValueRecordHistoryItem v-if="item.type === AccountHistoryItemType.VALUE_RECORD" :item="asVR(item)"
         :account-id="accountId" />
 
       <JournalEntryHistoryItem v-if="item.type === AccountHistoryItemType.JOURNAL_ENTRY" :item="asJE(item)" />
+
+      <hr class="m0" />
+    </div>
+    <div class="align-center">
+      <AppButton size="md" @click="loadNextPage()" v-if="canLoadMore">Load more history...</AppButton>
+      <AppButton size="sm" @click="loadAll()" theme="secondary" v-if="canLoadMore">Load all</AppButton>
+      <AppBadge v-if="!canLoadMore">This is the start of this account's history.</AppBadge>
     </div>
   </div>
 </template>
diff --git a/web-app/src/components/history/JournalEntryHistoryItem.vue b/web-app/src/components/history/JournalEntryHistoryItem.vue
index 93c57d8..4792363 100644
--- a/web-app/src/components/history/JournalEntryHistoryItem.vue
+++ b/web-app/src/components/history/JournalEntryHistoryItem.vue
@@ -3,6 +3,7 @@ import type { AccountHistoryJournalEntryItem } from '@/api/account'
 import { formatMoney } from '@/api/data';
 import { getSelectedProfile } from '@/api/profile';
 import { useRoute } from 'vue-router';
+import AppBadge from '../common/AppBadge.vue';
 
 const route = useRoute()
 
@@ -17,9 +18,11 @@ defineProps<{ item: AccountHistoryJournalEntryItem }>()
       entered as a
       <strong>{{ item.journalEntryType.toLowerCase() }}</strong>
       for this account with a value of
-      {{ formatMoney(item.amount, item.currency) }}.
+      <AppBadge class="font-mono">{{ formatMoney(item.amount, item.currency) }}</AppBadge>
       <br />
-      {{ item.transactionDescription }}
+      <p class="font-size-small m0 mt-1">
+        {{ item.transactionDescription }}
+      </p>
     </div>
   </div>
 </template>
diff --git a/web-app/src/components/history/ValueRecordHistoryItem.vue b/web-app/src/components/history/ValueRecordHistoryItem.vue
index da15387..663a563 100644
--- a/web-app/src/components/history/ValueRecordHistoryItem.vue
+++ b/web-app/src/components/history/ValueRecordHistoryItem.vue
@@ -1,35 +1,26 @@
 <script setup lang="ts">
-import { AccountApiClient, type AccountHistoryValueRecordItem } from '@/api/account';
+import { type AccountHistoryValueRecordItem } from '@/api/account';
 import { formatMoney } from '@/api/data';
-import AppButton from '../common/AppButton.vue';
-import { showConfirm } from '@/util/alert';
 import { useRoute } from 'vue-router';
-import ButtonBar from '../common/ButtonBar.vue';
+import AppBadge from '../common/AppBadge.vue';
+import { computed } from 'vue';
+import { getSelectedProfile } from '@/api/profile';
 
 const route = useRoute()
 
 const props = defineProps<{ item: AccountHistoryValueRecordItem, accountId: number }>()
 
-async function deleteValueRecord(id: number) {
-  const confirm = await showConfirm("Are you sure you want to delete this value record? This may affect how your account's balance is calculated.")
-  if (!confirm) return
-  const api = new AccountApiClient(route)
-  try {
-    await api.deleteValueRecord(props.accountId, id)
-  } catch (err) {
-    console.error(err)
-  }
-}
+const valueRecordRoute = computed(() => `/profiles/${getSelectedProfile(route)}/accounts/${props.accountId}/value-records/${props.item.valueRecordId}`)
+
+
 </script>
 <template>
   <div class="history-item-content">
     <div>
-      Value recorded for this account at {{ formatMoney(item.value, item.currency) }}
+      <RouterLink :to="valueRecordRoute">Value recorded</RouterLink> as <AppBadge class="font-mono">{{
+        formatMoney(item.value,
+          item.currency) }}
+      </AppBadge>
     </div>
-    <ButtonBar>
-      <AppButton type="button" icon="trash" size="sm" @click="deleteValueRecord(item.valueRecordId)">
-        Delete this record
-      </AppButton>
-    </ButtonBar>
   </div>
 </template>
diff --git a/web-app/src/pages/AccountPage.vue b/web-app/src/pages/AccountPage.vue
index 84033d6..a467d15 100644
--- a/web-app/src/pages/AccountPage.vue
+++ b/web-app/src/pages/AccountPage.vue
@@ -16,6 +16,7 @@ const route = useRoute()
 const router = useRouter()
 
 const addValueRecordModal = useTemplateRef("addValueRecordModal")
+const history = useTemplateRef('history')
 const account: Ref<Account | null> = ref(null)
 
 onMounted(async () => {
@@ -45,7 +46,7 @@ async function deleteAccount() {
 async function addValueRecord() {
   const result = await addValueRecordModal.value?.show()
   if (result) {
-    console.info('Value record added', result)
+    history.value?.reload()
   }
 }
 </script>
@@ -97,7 +98,7 @@ async function addValueRecord() {
       <AppButton icon="trash" @click="deleteAccount()">Delete</AppButton>
     </ButtonBar>
 
-    <AccountHistory :account-id="account.id" v-if="account" />
+    <AccountHistory :account-id="account.id" v-if="account" ref="history" />
 
     <AddValueRecordModal v-if="account" :account="account" ref="addValueRecordModal" />
   </AppPage>
diff --git a/web-app/src/pages/TransactionPage.vue b/web-app/src/pages/TransactionPage.vue
index 33e24b0..686527c 100644
--- a/web-app/src/pages/TransactionPage.vue
+++ b/web-app/src/pages/TransactionPage.vue
@@ -11,6 +11,7 @@ import TagLabel from '@/components/TagLabel.vue';
 import { showAlert, showConfirm } from '@/util/alert';
 import { onMounted, ref, type Ref } from 'vue';
 import { useRoute, useRouter } from 'vue-router';
+import AttachmentRow from '@/components/common/AttachmentRow.vue';
 
 const route = useRoute()
 const router = useRouter()
@@ -117,6 +118,11 @@ async function deleteTransaction() {
         </tbody>
       </table>
     </div>
+
+    <div v-if="transaction.attachments.length > 0">
+      <h3>Attachments</h3>
+      <AttachmentRow v-for="a in transaction.attachments" :attachment="a" :key="a.id" disabled />
+    </div>
     <div>
       <AppButton icon="wrench"
         @click="router.push(`/profiles/${getSelectedProfile(route)}/transactions/${transaction.id}/edit`)">
diff --git a/web-app/src/pages/ValueRecordPage.vue b/web-app/src/pages/ValueRecordPage.vue
new file mode 100644
index 0000000..181ddfe
--- /dev/null
+++ b/web-app/src/pages/ValueRecordPage.vue
@@ -0,0 +1,69 @@
+<script setup lang="ts">
+import { AccountApiClient, type AccountValueRecord } from '@/api/account';
+import { formatMoney } from '@/api/data';
+import { getSelectedProfile } from '@/api/profile';
+import AppBadge from '@/components/common/AppBadge.vue';
+import AppButton from '@/components/common/AppButton.vue';
+import AppPage from '@/components/common/AppPage.vue';
+import AttachmentRow from '@/components/common/AttachmentRow.vue';
+import ButtonBar from '@/components/common/ButtonBar.vue';
+import PropertiesTable from '@/components/PropertiesTable.vue';
+import { showConfirm } from '@/util/alert';
+import { onMounted, ref, type Ref } from 'vue';
+import { useRoute, useRouter } from 'vue-router';
+
+const route = useRoute()
+const router = useRouter()
+const valueRecord: Ref<AccountValueRecord | null> = ref(null)
+
+onMounted(async () => {
+  const accountId = parseInt(route.params.accountId as string)
+  const id = parseInt(route.params.valueRecordId as string)
+  try {
+    const api = new AccountApiClient(route)
+    valueRecord.value = await api.getValueRecord(accountId, id)
+  } catch (err) {
+    console.error(err)
+    await router.replace('/')
+  }
+})
+
+async function deleteValueRecord() {
+  if (!valueRecord.value) return
+  const confirm = await showConfirm("Are you sure you want to delete this value record? This may affect how your account's balance is calculated.")
+  if (!confirm) return
+  const api = new AccountApiClient(route)
+  try {
+    await api.deleteValueRecord(valueRecord.value.accountId, valueRecord.value.id)
+    await router.replace(`/profiles/${getSelectedProfile(route)}/accounts/${valueRecord.value.accountId}`)
+  } catch (err) {
+    console.error(err)
+  }
+}
+</script>
+<template>
+  <AppPage title="Value Record" v-if="valueRecord">
+    <PropertiesTable>
+      <tr>
+        <th>ID</th>
+        <td>{{ valueRecord.id }}</td>
+      </tr>
+      <tr>
+        <th>Value</th>
+        <td>
+          <AppBadge>{{ formatMoney(valueRecord.value, valueRecord.currency) }}</AppBadge>
+        </td>
+      </tr>
+    </PropertiesTable>
+    <div v-if="valueRecord.attachments.length > 0">
+      <h3>Attachments</h3>
+      <AttachmentRow v-for="a in valueRecord.attachments" :attachment="a" :key="a.id" disabled />
+    </div>
+    <ButtonBar>
+      <AppButton type="button" icon="trash" size="sm" @click="deleteValueRecord()">
+        Delete this record
+      </AppButton>
+    </ButtonBar>
+
+  </AppPage>
+</template>
diff --git a/web-app/src/pages/home/AccountsModule.vue b/web-app/src/pages/home/AccountsModule.vue
index 190c4f2..de68294 100644
--- a/web-app/src/pages/home/AccountsModule.vue
+++ b/web-app/src/pages/home/AccountsModule.vue
@@ -3,6 +3,7 @@ import { AccountApiClient, type Account, type CurrencyBalance } from '@/api/acco
 import { formatMoney } from '@/api/data'
 import { getSelectedProfile } from '@/api/profile'
 import AccountCard from '@/components/AccountCard.vue'
+import AppBadge from '@/components/common/AppBadge.vue'
 import AppButton from '@/components/common/AppButton.vue'
 import HomeModule from '@/components/HomeModule.vue'
 import { onMounted, ref, type Ref } from 'vue'
@@ -33,13 +34,9 @@ onMounted(async () => {
       </p>
 
       <div>
-        <ul>
-          <li v-for="bal in totalBalances" :key="bal.currency.code">
-            <span>Total in {{ bal.currency.code }}</span>
-            =
-            <span>{{ formatMoney(bal.balance, bal.currency) }}</span>
-          </li>
-        </ul>
+        <AppBadge v-for="bal in totalBalances" :key="bal.currency.code">
+          Total {{ bal.currency.code }}: {{ formatMoney(bal.balance, bal.currency) }}
+        </AppBadge>
       </div>
     </template>
     <template v-slot:actions>
diff --git a/web-app/src/router/index.ts b/web-app/src/router/index.ts
index 2a45989..c56cb3d 100644
--- a/web-app/src/router/index.ts
+++ b/web-app/src/router/index.ts
@@ -47,6 +47,11 @@ const router = createRouter({
               component: () => import('@/pages/forms/EditAccountPage.vue'),
               meta: { title: 'Edit Account' },
             },
+            {
+              path: 'accounts/:accountId/value-records/:valueRecordId',
+              component: () => import('@/pages/ValueRecordPage.vue'),
+              meta: { title: 'Value Record' },
+            },
             {
               path: 'add-account',
               component: () => import('@/pages/forms/EditAccountPage.vue'),