diff --git a/client/src/boot/notify.ts b/client/src/boot/notify.ts
index 9ef5cc51..2f084826 100644
--- a/client/src/boot/notify.ts
+++ b/client/src/boot/notify.ts
@@ -7,7 +7,7 @@ interface MyNotify {
   warning(msg: string): void
 }
 
-const qnotify: MyNotify = {
+export const qnotify: MyNotify = {
     success(msg) {
         Notify.create({
             type: 'positive',
diff --git a/client/src/components/TreeTableNode.vue b/client/src/components/TreeTableNode.vue
index db718df6..3b2c3fb7 100644
--- a/client/src/components/TreeTableNode.vue
+++ b/client/src/components/TreeTableNode.vue
@@ -29,7 +29,7 @@
         name: 'TreeTableNode',
         props: {
           node: Object as () => TreeTableDTO,
-          depth: Number
+          depth: { type: Number, required: true },
         },
         data(): {toggled: Record<string, boolean>} {
           const ret: {toggled: Record<string, boolean>} = {
diff --git a/client/src/lib/PLExplain.ts b/client/src/lib/PLExplain.ts
index 326c5bb1..a0a7b234 100644
--- a/client/src/lib/PLExplain.ts
+++ b/client/src/lib/PLExplain.ts
@@ -2,12 +2,13 @@ import {LocalDate} from '@js-joda/core';
 
 import {AccountCommandDTO, PostingEx} from 'src/lib/assetdb/models';
 import {
-  isSubAccountOf,
+  getAccountLevel,
+  isSubAccountOf, parentAccountIdOf,
   positionSetFx,
   positionUnderAccount,
   postingsToPositionSet
 } from 'src/lib/utils';
-import { keys, groupBy, sum, range } from 'lodash';
+import {keys, groupBy, sum, range, uniq} from 'lodash';
 import {SingleFXConverter} from 'src/lib/fx';
 
 export interface PLExplainDTO {
@@ -17,13 +18,19 @@ export interface PLExplainDTO {
   newActivityPnl: number, newActivityByAccount: {accountId: string, explain: number}[]
   totalEquity: number
   totalIncome: number, totalYieldIncome: number
-  totalExpense: number, totalDeltaExplain: number
+  totalExpense: number, expenseByAccount: {accountId: string, value: number}[]
+  totalDeltaExplain: number
   delta: any[]
   tenor?: string
 }
 
 export function pnlExplain(startDate: LocalDate, toDate: LocalDate, allPostings: PostingEx[],
                            allCmds: AccountCommandDTO[], baseCcy: string, fxConverter: SingleFXConverter): PLExplainDTO {
+  // for leveled breakdown
+  const levels = 2
+  const allAccountIds = uniq(allCmds.map(p => p.accountId))
+  const allAccountLevels = uniq( allAccountIds.map(id => getAccountLevel(id, levels)) )
+
   const postings = allPostings.filter(p => isSubAccountOf(p.account, 'Assets')); // FIXME: +Liabilities
   const fromDate = startDate.minusDays(1) // So we do inclusivity of the startDate
   const toStartPostings = postings.filter(p => LocalDate.parse(p.date).isBefore(fromDate.plusDays(1)));
@@ -67,7 +74,6 @@ export function pnlExplain(startDate: LocalDate, toDate: LocalDate, allPostings:
   }).filter(x => x.explain !== 0.0)
   // mapValues(activityPostingsByAccount, (ps: PostingEx[]) => positionSetFx(postingsToPositionSet(ps), baseCcy, LocalDate.parse(ps[0].date), fxConverter))
   const newActivityPnl = sum(newActivityByAccount.map(x => x.explain))
-  const equityPositionChange = positionUnderAccount(duringPostings, 'Equity')
 
 
   const yieldPostings = duringPostings.filter( p => {
@@ -79,11 +85,20 @@ export function pnlExplain(startDate: LocalDate, toDate: LocalDate, allPostings:
   });
   const totalYieldIncome = sum(yieldIncomes)
 
-
+  const equityPositionChange = positionUnderAccount(duringPostings, 'Equity')
   const totalEquity = -positionSetFx(equityPositionChange, baseCcy, toDate, fxConverter)
   const totalIncome =
     -positionSetFx(positionUnderAccount(duringPostings, 'Income'), baseCcy, toDate, fxConverter) - totalYieldIncome
-  const totalExpense = positionSetFx(positionUnderAccount(duringPostings, 'Expenses'), baseCcy, toDate, fxConverter)
+  const expensePositionChange = positionUnderAccount(duringPostings, 'Expenses')
+  const totalExpense = positionSetFx(expensePositionChange, baseCcy, toDate, fxConverter)
+
+  // Do an l2 breakdown detail of expenses
+  const expenseAccountIdBreakdown = allAccountLevels.filter(a => parentAccountIdOf(a) === 'Expenses')
+  const expenseByAccount = expenseAccountIdBreakdown.map(accountId => {
+    const ps = positionUnderAccount(duringPostings, accountId)
+    const value = positionSetFx(ps, baseCcy, toDate, fxConverter)
+    return {accountId, value}
+  })
 
   const explained = totalDeltaExplain + newActivityPnl + totalEquity + totalIncome + totalYieldIncome - totalExpense
   const unexplained = actual - explained;
@@ -103,7 +118,8 @@ export function pnlExplain(startDate: LocalDate, toDate: LocalDate, allPostings:
     newActivityPnl, newActivityByAccount,
     totalEquity,
     totalIncome, totalYieldIncome,
-    totalExpense, totalDeltaExplain,
+    totalExpense, expenseByAccount,
+    totalDeltaExplain,
     delta};
 }
 
@@ -143,6 +159,8 @@ function totalPnlExplain(exps: PLExplainDTO[]):PLExplainDTO {
     totalYieldIncome: sum(exps.map(e => e.totalYieldIncome)),
     totalExpense: sum(exps.map(e => e.totalExpense)),
     totalDeltaExplain: sum(exps.map(e => e.totalDeltaExplain)),
+    expenseByAccount: exps[0].expenseByAccount.map(e => e.accountId)
+        .map((accountId,idx) => ({accountId, value: sum(exps.map(e => e.expenseByAccount[idx].value))})),
     delta: [],
     tenor: 'total'
   }
@@ -162,6 +180,7 @@ function dividePnlExplain(p: PLExplainDTO, n: number):PLExplainDTO {
     totalExpense: p.totalExpense/n,
     totalDeltaExplain: p.totalDeltaExplain/n,
     delta: [], // not supported,
+    expenseByAccount: p.expenseByAccount.map(x => ({accountId: x.accountId, value: x.value/n})),
     tenor: 'avg', // that's why we do a division
   }
 }
diff --git a/client/src/lib/utils.ts b/client/src/lib/utils.ts
index fb6a5c3a..3ee1181a 100644
--- a/client/src/lib/utils.ts
+++ b/client/src/lib/utils.ts
@@ -23,6 +23,15 @@ export function parentAccountIdOf(accountId: string):string {
   }
 }
 
+export function getAccountLevel(accountName: string, n: number): string {
+  const accountParts = accountName.split(':');
+  if (accountParts.length <= n) {
+    return accountName;
+  } else {
+    return accountParts.slice(0, n).join(':');
+  }
+}
+
 export function isSubAccountOf(accountId: string, parentId: string): boolean {
   return (accountId === parentId) || (accountId.startsWith(parentId + ':'))
 }
diff --git a/client/src/pages/PnlExplain.vue b/client/src/pages/PnlExplain.vue
index 3e720545..50e5afe2 100644
--- a/client/src/pages/PnlExplain.vue
+++ b/client/src/pages/PnlExplain.vue
@@ -7,7 +7,7 @@
 <!--            "totalEquity" -> totalEquity, "totalIncome" -> totalIncome, "totalExpense" -> totalExpense, "totalDeltaExplain" -> totalDeltaExplain-->
 <!--            // , "delta" -> deltaExplain-->
 <!--            )-->
-            <table class="sortable">
+          <table class="sortable">
                 <tbody>
                 <tr>
                     <td></td>
@@ -69,9 +69,16 @@
                     <td class="num" v-for="explainData in explains">{{ explainData.totalIncome.toFixed(2) }}</td>
                 </tr>
                 <tr>
-                    <td>Expenses</td>
+                    <td><q-btn round flat size="xs" :icon="expansions['expenses'] ? matRemoveCircleOutline : matAddCircleOutline" @click="expansions['expenses'] = !expansions['expenses']"></q-btn>
+                      Expenses</td>
                     <td class="num" v-for="explainData in explains">{{ explainData.totalExpense.toFixed(2) }}</td>
                 </tr>
+                <template v-if="expansions['expenses']">
+                  <tr v-for="(rec, recIdx) in explains[explains.length-1].expenseByAccount">
+                    <td> - {{ rec.accountId}}</td>
+                    <td class="num" v-for="explainData in explains">{{ explainData.expenseByAccount[recIdx]?.value?.toFixed(2) }}</td>
+                  </tr>
+                </template>
                 <tr>
                     <td>Equity</td>
                     <td class="num" v-for="explainData in explains">{{ explainData.totalEquity.toFixed(2) }}</td>
@@ -99,62 +106,53 @@
     </my-page>
 </template>
 
-<script>
-    import HelpTip from '../components/HelpTip';
-    import { mapGetters } from 'vuex';
-    import { apiPnlExplainMonthly } from '../lib/apiFacade';
-    import { matAnalytics } from '@quasar/extras/material-icons'
-
-
-    export default {
-        name: 'PnlExplain',
-        components: {
-            HelpTip,
-        },
-        computed: {
-          ...mapGetters([
-            'baseCcy',
-            'allPostingsEx',
-            'fxConverter',
-          ]),
-        },
-        mounted() {
-            this.refresh()
-        },
-        methods: {
-          async refresh() {
-            const notify = this.$notify;
-            try {
-              this.explains = await apiPnlExplainMonthly(this.$store);
-            } catch (error) {
-              console.error(error);
-              notify.error(error);
-            }
-          },
-            onColumnClick(explain) {
-                if (explain.fromDate && explain.toDate) {
-                    this.$router.push({name: 'pnldetail', params: {fromDate: explain.fromDate, toDate: explain.toDate}});
-                }
-            },
-            percChange(explainData) {
-                const denom = explainData.toNetworth ? explainData.toNetworth - explainData.actual : 0.0;
-                return (denom === 0.0) ? 0.0 : explainData.actual / denom;
-            },
-          amount: (value) => value.toFixed(2),
-          perc: (value) => (100*value).toFixed(1) + '%',
-        },
-        data() {
-          // eslint-disable-next-line
-            const self = this;
-            return {
-                explains: [],
-              matAnalytics,
-            };
-
-        }
-    }
+<script setup lang="ts">
+import {computed, onMounted, reactive, ref} from 'vue';
+import HelpTip from '../components/HelpTip.vue';
+import {apiPnlExplainMonthly} from '../lib/apiFacade';
+import {matAddCircleOutline, matAnalytics, matRemoveCircleOutline} from '@quasar/extras/material-icons';
+import {PLExplainDTO} from 'src/lib/PLExplain';
+import {qnotify} from 'boot/notify';
+import {useStore} from 'src/store';
+import {router} from 'src/router';
+
+const store = useStore();
+const explains = ref<PLExplainDTO[]>([]);
+const baseCcy = computed(() => store.getters.baseCcy);
+const allPostingsEx = computed(() => store.getters.allPostingsEx);
+const fxConverter = computed(() => store.getters.fxConverter);
+const expansions = reactive<Record<string, boolean>>({})
+
+const refresh = async () => {
+  const notify = qnotify;
+  try {
+    explains.value = await apiPnlExplainMonthly(store);
+  } catch (error: any) {
+    console.error(error);
+    notify.error(error);
+  }
+};
+
+const onColumnClick = (explain: PLExplainDTO) => {
+  if (explain.fromDate && explain.toDate) {
+    router.push({ name: 'pnldetail', params: { fromDate: explain.fromDate, toDate: explain.toDate } });
+  }
+};
+
+const percChange = (explainData: PLExplainDTO) => {
+  const denom = explainData.toNetworth ? explainData.toNetworth - explainData.actual : 0.0;
+  return denom === 0.0 ? 0.0 : explainData.actual / denom;
+};
+
+const amount = (value: number) => value.toFixed(2);
+const perc = (value: number) => (100 * value).toFixed(1) + '%';
+
+onMounted(refresh);
 </script>
 
+
+
+
 <style scoped>
     .subtotal {
         border-top-color: black;
diff --git a/client/src/pages/PnlExplainDetail.vue b/client/src/pages/PnlExplainDetail.vue
index 6d45894e..c222fc91 100644
--- a/client/src/pages/PnlExplainDetail.vue
+++ b/client/src/pages/PnlExplainDetail.vue
@@ -116,6 +116,22 @@
       <!--                <td class="subtitle">Equity</td>-->
       <!--                <td class="num">{{ explainData.totalEquity.toFixed(2) }}</td>-->
       <!--            </tr>-->
+      <template v-if="explainData.expenseByAccount.length">
+      <tr v-if="explainData.expenseByAccount.length">
+          <td colspan="4" class="subtitle">Expenses</td>
+          <td>P&L</td>
+      </tr>
+      <tr v-for="exp in explainData.expenseByAccount">
+          <td colspan="4">{{ exp.accountId }}</td>
+          <td class="num">{{ exp.value.toFixed(2) }}</td>
+      </tr>
+        <tr>
+          <td class="subtotal" colspan="4">Total</td>
+          <td class="subtotal num">{{ explainData.totalExpense.toFixed(2) }}</td>
+        </tr>
+        <tr><td></td><td></td></tr>
+      </template>
+
       <tr v-if="explainData.newActivityByAccount.length">
         <td colspan="4" class="subtitle">New Activity</td>
         <td>P&L</td>
@@ -219,7 +235,9 @@ export default defineComponent({
   },
   data() {
     const explains: PLExplainDTO[] = [];
+    const expansions: Record<string, boolean> = {};
     return {
+      expansions,
       explains,
     };
   },
diff --git a/client/src/store/index.ts b/client/src/store/index.ts
index 372f8f8c..01283212 100644
--- a/client/src/store/index.ts
+++ b/client/src/store/index.ts
@@ -447,7 +447,7 @@ export default store(function (/* { ssrContext } */) {
   return Store
 })
 
-export function useStore() {
+export function useStore(): VuexStore<MyState> {
   return vuexUseStore(storeKey)
 }
 
diff --git a/client/test/jest/__tests__/__snapshots__/First.spec.ts.snap b/client/test/jest/__tests__/__snapshots__/First.spec.ts.snap
index 2aae3625..898ed402 100644
--- a/client/test/jest/__tests__/__snapshots__/First.spec.ts.snap
+++ b/client/test/jest/__tests__/__snapshots__/First.spec.ts.snap
@@ -367,6 +367,12 @@ exports[`First State pnlExplain monthly 1`] = `
   {
     "actual": 13149.88062177109,
     "delta": [],
+    "expenseByAccount": [
+      {
+        "accountId": "Expenses:Education",
+        "value": 0,
+      },
+    ],
     "explained": 13149.880621771095,
     "fromDate": "2019-01-01",
     "networthChange": 0,
@@ -385,6 +391,12 @@ exports[`First State pnlExplain monthly 1`] = `
   {
     "actual": 157798.5674612531,
     "delta": [],
+    "expenseByAccount": [
+      {
+        "accountId": "Expenses:Education",
+        "value": 0,
+      },
+    ],
     "explained": 157798.56746125314,
     "fromDate": "2019-01-01",
     "networthChange": 0.33694631920989737,
@@ -403,6 +415,12 @@ exports[`First State pnlExplain monthly 1`] = `
   {
     "actual": 0,
     "delta": [],
+    "expenseByAccount": [
+      {
+        "accountId": "Expenses:Education",
+        "value": 0,
+      },
+    ],
     "explained": 0,
     "fromDate": "2019-12-01",
     "networthChange": 0,
@@ -421,6 +439,12 @@ exports[`First State pnlExplain monthly 1`] = `
   {
     "actual": 0,
     "delta": [],
+    "expenseByAccount": [
+      {
+        "accountId": "Expenses:Education",
+        "value": 0,
+      },
+    ],
     "explained": 0,
     "fromDate": "2019-11-01",
     "networthChange": 0,
@@ -439,6 +463,12 @@ exports[`First State pnlExplain monthly 1`] = `
   {
     "actual": 0,
     "delta": [],
+    "expenseByAccount": [
+      {
+        "accountId": "Expenses:Education",
+        "value": 0,
+      },
+    ],
     "explained": 0,
     "fromDate": "2019-10-01",
     "networthChange": 0,
@@ -457,6 +487,12 @@ exports[`First State pnlExplain monthly 1`] = `
   {
     "actual": 0,
     "delta": [],
+    "expenseByAccount": [
+      {
+        "accountId": "Expenses:Education",
+        "value": 0,
+      },
+    ],
     "explained": 0,
     "fromDate": "2019-09-01",
     "networthChange": 0,
@@ -475,6 +511,12 @@ exports[`First State pnlExplain monthly 1`] = `
   {
     "actual": 0,
     "delta": [],
+    "expenseByAccount": [
+      {
+        "accountId": "Expenses:Education",
+        "value": 0,
+      },
+    ],
     "explained": 0,
     "fromDate": "2019-08-01",
     "networthChange": 0,
@@ -493,6 +535,12 @@ exports[`First State pnlExplain monthly 1`] = `
   {
     "actual": 0,
     "delta": [],
+    "expenseByAccount": [
+      {
+        "accountId": "Expenses:Education",
+        "value": 0,
+      },
+    ],
     "explained": 0,
     "fromDate": "2019-07-01",
     "networthChange": 0,
@@ -511,6 +559,12 @@ exports[`First State pnlExplain monthly 1`] = `
   {
     "actual": 0,
     "delta": [],
+    "expenseByAccount": [
+      {
+        "accountId": "Expenses:Education",
+        "value": 0,
+      },
+    ],
     "explained": 0,
     "fromDate": "2019-06-01",
     "networthChange": 0,
@@ -529,6 +583,12 @@ exports[`First State pnlExplain monthly 1`] = `
   {
     "actual": 0,
     "delta": [],
+    "expenseByAccount": [
+      {
+        "accountId": "Expenses:Education",
+        "value": 0,
+      },
+    ],
     "explained": 0,
     "fromDate": "2019-05-01",
     "networthChange": 0,
@@ -559,6 +619,12 @@ exports[`First State pnlExplain monthly 1`] = `
         "toDate": "2019-04-30",
       },
     ],
+    "expenseByAccount": [
+      {
+        "accountId": "Expenses:Education",
+        "value": 0,
+      },
+    ],
     "explained": 39.66436637389633,
     "fromDate": "2019-04-01",
     "networthChange": 0.00006340801174028729,
@@ -606,6 +672,12 @@ exports[`First State pnlExplain monthly 1`] = `
         "toDate": "2019-03-31",
       },
     ],
+    "expenseByAccount": [
+      {
+        "accountId": "Expenses:Education",
+        "value": 0,
+      },
+    ],
     "explained": 163247.49036177332,
     "fromDate": "2019-03-01",
     "networthChange": 0.3531245388008474,
@@ -653,6 +725,12 @@ exports[`First State pnlExplain monthly 1`] = `
         "toDate": "2019-02-28",
       },
     ],
+    "expenseByAccount": [
+      {
+        "accountId": "Expenses:Education",
+        "value": 0,
+      },
+    ],
     "explained": -6025.224221445872,
     "fromDate": "2019-02-01",
     "networthChange": -0.012865624552193628,
@@ -671,6 +749,12 @@ exports[`First State pnlExplain monthly 1`] = `
   {
     "actual": 536.6369545517373,
     "delta": [],
+    "expenseByAccount": [
+      {
+        "accountId": "Expenses:Education",
+        "value": 0,
+      },
+    ],
     "explained": 536.63695455179,
     "fromDate": "2019-01-01",
     "networthChange": 0.0011471921597045404,