diff --git a/internal/server/income_statement.go b/internal/server/income_statement.go
index cd511d4e..00860a1f 100644
--- a/internal/server/income_statement.go
+++ b/internal/server/income_statement.go
@@ -36,7 +36,8 @@ type RunningBalance struct {
 func GetIncomeStatement(db *gorm.DB) gin.H {
 	postings := query.Init(db).All()
 	statements := computeStatement(db, postings)
-	return gin.H{"yearly": statements}
+	monthlyStatements := computeMonthlyStatement(db, postings)
+	return gin.H{"yearly": statements, "monthly": monthlyStatements}
 }
 
 func computeStatement(db *gorm.DB, postings []posting.Posting) map[string]IncomeStatement {
@@ -132,6 +133,123 @@ func computeStatement(db *gorm.DB, postings []posting.Posting) map[string]Income
 	return statements
 }
 
+func computeMonthlyStatement(db *gorm.DB, postings []posting.Posting) map[string]map[string]IncomeStatement {
+	monthlyStatements := make(map[string]map[string]IncomeStatement)
+
+	grouped := utils.GroupByFY(postings)
+	fys := lo.Keys(grouped)
+	sort.Strings(fys)
+
+	for _, fy := range fys {
+		fyPostings := grouped[fy]
+		monthlyStatements[fy] = make(map[string]IncomeStatement)
+
+		// Group postings by month within the financial year
+		monthlyGrouped := utils.GroupByMonth(fyPostings)
+
+		// Get all months in the financial year
+		start, end := utils.ParseFY(fy)
+		current := start
+
+		runnings := make(map[string]RunningBalance)
+		startingBalance := decimal.Zero
+
+		for current.Before(end) || current.Equal(end) {
+			monthKey := current.Format("2006-01")
+			incomeStatement := IncomeStatement{}
+			incomeStatement.Date = current
+			incomeStatement.StartingBalance = startingBalance
+			incomeStatement.Income = make(map[string]decimal.Decimal)
+			incomeStatement.Interest = make(map[string]decimal.Decimal)
+			incomeStatement.Equity = make(map[string]decimal.Decimal)
+			incomeStatement.Pnl = make(map[string]decimal.Decimal)
+			incomeStatement.Liabilities = make(map[string]decimal.Decimal)
+			incomeStatement.Tax = make(map[string]decimal.Decimal)
+			incomeStatement.Expenses = make(map[string]decimal.Decimal)
+
+			monthPostings := monthlyGrouped[monthKey]
+
+			for _, p := range monthPostings {
+				category := utils.FirstName(p.Account)
+
+				switch category {
+				case "Income":
+					if service.IsCapitalGains(p) {
+						sourceAccount := service.CapitalGainsSourceAccount(p.Account)
+						r := runnings[sourceAccount]
+						if r.quantity == nil {
+							r.quantity = make(map[string]decimal.Decimal)
+						}
+						r.amount = r.amount.Add(p.Amount)
+						runnings[sourceAccount] = r
+					} else if strings.HasPrefix(p.Account, "Income:Interest") {
+						incomeStatement.Interest[p.Account] = incomeStatement.Interest[p.Account].Add(p.Amount)
+					} else {
+						incomeStatement.Income[p.Account] = incomeStatement.Income[p.Account].Add(p.Amount)
+					}
+				case "Equity":
+					incomeStatement.Equity[p.Account] = incomeStatement.Equity[p.Account].Add(p.Amount)
+				case "Expenses":
+					if strings.HasPrefix(p.Account, "Expenses:Tax") {
+						incomeStatement.Tax[p.Account] = incomeStatement.Tax[p.Account].Add(p.Amount)
+					} else {
+						incomeStatement.Expenses[p.Account] = incomeStatement.Expenses[p.Account].Add(p.Amount)
+					}
+				case "Liabilities":
+					incomeStatement.Liabilities[p.Account] = incomeStatement.Liabilities[p.Account].Add(p.Amount)
+				case "Assets":
+					r := runnings[p.Account]
+					if r.quantity == nil {
+						r.quantity = make(map[string]decimal.Decimal)
+					}
+					r.amount = r.amount.Add(p.Amount)
+					r.quantity[p.Commodity] = r.quantity[p.Commodity].Add(p.Quantity)
+					runnings[p.Account] = r
+				default:
+					// ignore
+				}
+			}
+
+			// Calculate PnL for this month
+			monthEndDate := current.AddDate(0, 1, -1) // Last day of current month
+			if monthEndDate.After(end) {
+				monthEndDate = end
+			}
+
+			for account, r := range runnings {
+				diff := r.amount.Neg()
+				for commodity, quantity := range r.quantity {
+					diff = diff.Add(service.GetPrice(db, commodity, quantity, monthEndDate))
+				}
+				if !diff.IsZero() {
+					incomeStatement.Pnl[account] = diff
+				}
+
+				r.amount = r.amount.Add(diff)
+				runnings[account] = r
+			}
+
+			startingBalance = startingBalance.
+				Add(sumBalance(incomeStatement.Income).Neg()).
+				Add(sumBalance(incomeStatement.Interest).Neg()).
+				Add(sumBalance(incomeStatement.Equity).Neg()).
+				Add(sumBalance(incomeStatement.Tax).Neg()).
+				Add(sumBalance(incomeStatement.Expenses).Neg()).
+				Add(sumBalance(incomeStatement.Pnl)).
+				Add(sumBalance(incomeStatement.Liabilities).Neg())
+
+			incomeStatement.EndingBalance = startingBalance
+
+			monthlyStatements[fy][monthKey] = incomeStatement
+
+			// Move to next month
+			current = current.AddDate(0, 1, 0)
+		}
+	}
+
+	return monthlyStatements
+}
+
 func sumBalance(breakdown map[string]decimal.Decimal) decimal.Decimal {
 	total := decimal.Zero
 	for k, v := range breakdown {
diff --git a/src/lib/components/MultiSelectMonthPicker.svelte b/src/lib/components/MultiSelectMonthPicker.svelte
new file mode 100644
index 00000000..b22566c4
--- /dev/null
+++ b/src/lib/components/MultiSelectMonthPicker.svelte
@@ -0,0 +1,272 @@
+<script lang="ts">
+  import { createEventDispatcher } from "svelte";
+
+  export let selectedMonths: string[] = [];
+
+  const dispatch = createEventDispatcher();
+
+  const months = [
+    { value: "01", label: "January" },
+    { value: "02", label: "February" },
+    { value: "03", label: "March" },
+    { value: "04", label: "April" },
+    { value: "05", label: "May" },
+    { value: "06", label: "June" },
+    { value: "07", label: "July" },
+    { value: "08", label: "August" },
+    { value: "09", label: "September" },
+    { value: "10", label: "October" },
+    { value: "11", label: "November" },
+    { value: "12", label: "December" }
+  ];
+
+  let isOpen = false;
+  let dropdownElement: HTMLDivElement;
+
+  function toggleDropdown(event: MouseEvent) {
+    event.stopPropagation();
+    isOpen = !isOpen;
+  }
+
+  function toggleMonth(monthValue: string) {
+    if (selectedMonths.includes(monthValue)) {
+      selectedMonths = selectedMonths.filter((m) => m !== monthValue);
+    } else {
+      selectedMonths = [...selectedMonths, monthValue];
+    }
+    dispatch("change", selectedMonths);
+  }
+
+  function selectAllMonths(event: MouseEvent) {
+    event.stopPropagation();
+    selectedMonths = months.map((m) => m.value);
+    dispatch("change", selectedMonths);
+  }
+
+  function clearAllMonths(event: MouseEvent) {
+    event.stopPropagation();
+    // Select just January to keep it predictable and avoid auto-selection
+    selectedMonths = ["01"];
+    dispatch("change", selectedMonths);
+  }
+
+  function handleClickOutside(event: MouseEvent) {
+    if (dropdownElement && !dropdownElement.contains(event.target as Node)) {
+      isOpen = false;
+    }
+  }
+
+  $: selectedMonthsText = (() => {
+    if (selectedMonths.length === 0) return "Select months";
+    if (selectedMonths.length === 1) {
+      const month = months.find((m) => m.value === selectedMonths[0]);
+      return month ? month.label : selectedMonths[0];
+    }
+    if (selectedMonths.length === 12) return "All months";
+    return `${selectedMonths.length} months selected`;
+  })();
+</script>
+
+<svelte:window on:click={handleClickOutside} />
+
+<div class="dropdown is-left is-small" class:is-active={isOpen} bind:this={dropdownElement}>
+  <div class="dropdown-trigger">
+    <button
+      class="button is-small"
+      on:click={toggleDropdown}
+      type="button"
+      aria-haspopup="true"
+      aria-controls="dropdown-menu"
+    >
+      <span>{selectedMonthsText}</span>
+      <span class="icon is-small">
+        <i class="fas fa-chevron-down" class:rotated={isOpen}></i>
+      </span>
+    </button>
+  </div>
+
+  <div class="dropdown-menu" id="dropdown-menu" role="menu">
+    <div class="dropdown-content">
+      <!-- Select All / Clear All buttons -->
+      <div class="dropdown-actions">
+        <button class="action-button select-all" on:click={selectAllMonths} type="button">
+          Select All
+        </button>
+        <button class="action-button clear-all" on:click={clearAllMonths} type="button">
+          Clear All
+        </button>
+      </div>
+
+      <div class="dropdown-divider"></div>
+
+      <!-- Month checkboxes -->
+      {#each months as month}
+        <label class="dropdown-item checkbox-item">
+          <input
+            type="checkbox"
+            checked={selectedMonths.includes(month.value)}
+            on:change={() => toggleMonth(month.value)}
+          />
+          <span class="checkbox-label">{month.label}</span>
+          <span class="month-code">({month.value})</span>
+        </label>
+      {/each}
+    </div>
+  </div>
+</div>
+
+<style>
+  /* Icon rotation animation */
+  .dropdown-trigger .icon i.rotated {
+    transform: rotate(180deg);
+  }
+
+  /* Custom dropdown content styling */
+  .dropdown-content {
+    max-height: 320px;
+    overflow-y: auto;
+  }
+
+  .dropdown-actions {
+    display: flex;
+    padding: 0.75rem;
+    gap: 0.5rem;
+    background: #f8f9fa;
+    border-bottom: 0px solid #e9ecef;
+  }
+
+  .action-button {
+    flex: 1;
+    padding: 0.375rem 0.75rem;
+    border: 1px solid #dee2e6;
+    border-radius: 4px;
+    background: white;
+    color: #495057;
+    font-size: 0.75rem;
+    cursor: pointer;
+    transition: all 0.2s ease;
+  }
+
+  .action-button:hover {
+    background: #e9ecef;
+    border-color: #adb5bd;
+  }
+
+  .action-button.select-all:hover {
+    background: #d4edda;
+    border-color: #c3e6cb;
+    color: #155724;
+  }
+
+  .action-button.clear-all:hover {
+    background: #f8d7da;
+    border-color: #f5c6cb;
+    color: #721c24;
+  }
+
+  .dropdown-divider {
+    height: 1px;
+    background: #e9ecef;
+    margin: 0;
+  }
+
+  .checkbox-item {
+    display: flex;
+    align-items: center;
+    padding: 0.75rem 1rem;
+    cursor: pointer;
+    transition: background-color 0.2s ease;
+    margin: 0;
+    border-bottom: 0px solid #f8f9fa;
+  }
+
+  .checkbox-item:last-child {
+    border-bottom: none;
+  }
+
+  .checkbox-item:hover {
+    background-color: #f8f9fa;
+  }
+
+  .checkbox-item input[type="checkbox"] {
+    margin-right: 0.75rem;
+    cursor: pointer;
+    width: 16px;
+    height: 16px;
+    accent-color: #3273dc;
+  }
+
+  .checkbox-label {
+    cursor: pointer;
+    user-select: none;
+    flex: 1;
+    font-weight: 500;
+  }
+
+  .month-code {
+    color: #6c757d;
+    font-size: 0.75rem;
+    font-weight: normal;
+  }
+
+  /* Dark mode support */
+  :global(html[data-theme="dark"]) .dropdown-trigger {
+    background: #363636 !important;
+    border-color: #4a4a4a !important;
+    color: #f5f5f5 !important;
+  }
+
+  :global(html[data-theme="dark"]) .dropdown-trigger:hover {
+    border-color: #5a5a5a !important;
+  }
+
+  :global(html[data-theme="dark"]) .dropdown-menu {
+    background: #363636 !important;
+    border-color: #4a4a4a !important;
+  }
+
+  :global(html[data-theme="dark"]) .dropdown-actions {
+    background: #2a2a2a !important;
+    border-bottom: 0px solid #4a4a4a !important;
+  }
+
+  :global(html[data-theme="dark"]) .action-button {
+    background: #363636 !important;
+    border-color: #4a4a4a !important;
+    color: #f5f5f5 !important;
+  }
+
+  :global(html[data-theme="dark"]) .action-button:hover {
+    background: #4a4a4a !important;
+    border-color: #5a5a5a !important;
+  }
+
+  :global(html[data-theme="dark"]) .action-button.select-all:hover {
+    background: #1e4d2b !important;
+    border-color: #28a745 !important;
+    color: #d4edda !important;
+  }
+
+  :global(html[data-theme="dark"]) .action-button.clear-all:hover {
+    background: #4d1e1e !important;
+    border-color: #dc3545 !important;
+    color: #f8d7da !important;
+  }
+
+  :global(html[data-theme="dark"]) .dropdown-divider {
+    background: #4a4a4a !important;
+  }
+
+  :global(html[data-theme="dark"]) .checkbox-item {
+    border-bottom: 0px solid #4a4a4a !important;
+    color: #f5f5f5 !important;
+  }
+
+  :global(html[data-theme="dark"]) .checkbox-item:hover {
+    background-color: #2a2a2a !important;
+  }
+
+  :global(html[data-theme="dark"]) .month-code {
+    color: #adb5bd !important;
+  }
+</style>
diff --git a/src/lib/components/Navbar.svelte b/src/lib/components/Navbar.svelte
index 96477bab..b3e4d09c 100644
--- a/src/lib/components/Navbar.svelte
+++ b/src/lib/components/Navbar.svelte
@@ -1,7 +1,15 @@
 <script lang="ts">
   import { page } from "$app/stores";
   import Actions from "$lib/components/Actions.svelte";
-  import { month, year, dateMax, dateMin, dateRangeOption } from "../../store";
+  import {
+    month,
+    year,
+    viewMode,
+    selectedMonths,
+    dateMax,
+    dateMin,
+    dateRangeOption
+  } from "../../store";
   import {
     cashflowExpenseDepth,
     cashflowExpenseDepthAllowed,
@@ -16,6 +24,7 @@
   import DateRange from "./DateRange.svelte";
   import ThemeSwitcher from "./ThemeSwitcher.svelte";
   import MonthPicker from "./MonthPicker.svelte";
+  import MultiSelectMonthPicker from "./MultiSelectMonthPicker.svelte";
   import Logo from "./Logo.svelte";
   import InputRange from "./InputRange.svelte";
   export let isBurger: boolean = null;
@@ -27,6 +36,11 @@
     }
   });
 
+  // Auto-select all months when switching to monthly view
+  $: if ($viewMode === "monthly" && $selectedMonths.length === 0) {
+    selectedMonths.set(["01", "02", "03", "04", "05", "06", "07", "08", "09", "10", "11", "12"]);
+  }
+
   const RecurringIcons = [
     { icon: "fa-circle-check", color: "success", label: "Cleared" },
     { icon: "fa-circle-check", color: "warning-dark", label: "Cleared late" },
@@ -43,6 +57,7 @@
     dateRangeSelector?: boolean;
     monthPicker?: boolean;
     financialYearPicker?: boolean;
+    customYearMonthPicker?: boolean;
     maxDepthSelector?: boolean;
     recurringIcons?: boolean;
     children?: Link[];
@@ -54,7 +69,7 @@
       label: "Cash Flow",
       href: "/cash_flow",
       children: [
-        { label: "Income Statement", href: "/income_statement", financialYearPicker: true },
+        { label: "Income Statement", href: "/income_statement", customYearMonthPicker: true },
         { label: "Monthly", href: "/monthly", dateRangeSelector: true },
         {
           label: "Yearly",
@@ -430,6 +445,43 @@
         </div>
       </div>
     {/if}
+
+    {#if selectedSubSubLink?.customYearMonthPicker || selectedSubLink?.customYearMonthPicker || selectedLink?.customYearMonthPicker}
+      <div class="has-text-centered">
+        <div class="field has-addons">
+          <!-- Multi-select Month Dropdown (positioned on the left, only shown when monthly is selected) -->
+          {#if $viewMode === "monthly"}
+            <div class="control">
+              <MultiSelectMonthPicker
+                bind:selectedMonths={$selectedMonths}
+                on:change={(e) => selectedMonths.set(e.detail)}
+              />
+            </div>
+          {/if}
+
+          <!-- View Mode Dropdown (Yearly/Monthly) -->
+          <div class="control">
+            <div class="select is-small">
+              <select bind:value={$viewMode}>
+                <option value="yearly">Yearly</option>
+                <option value="monthly">Monthly</option>
+              </select>
+            </div>
+          </div>
+
+          <!-- Year Dropdown -->
+          <div class="control">
+            <div class="select is-small">
+              <select bind:value={$year}>
+                {#each forEachFinancialYear($dateMin, $dateMax).reverse() as fy}
+                  <option>{financialYear(fy)}</option>
+                {/each}
+              </select>
+            </div>
+          </div>
+        </div>
+      </div>
+    {/if}
   </div>
 </div>
 
diff --git a/src/lib/utils.ts b/src/lib/utils.ts
index 39243f30..8e47c7de 100644
--- a/src/lib/utils.ts
+++ b/src/lib/utils.ts
@@ -636,9 +636,10 @@ export function ajax(route: "/api/budget"): Promise<{
 }>;
 
 export function ajax(route: "/api/cash_flow"): Promise<{ cash_flows: CashFlow[] }>;
-export function ajax(
-  route: "/api/income_statement"
-): Promise<{ yearly: Record<string, IncomeStatement> }>;
+export function ajax(route: "/api/income_statement"): Promise<{
+  yearly: Record<string, IncomeStatement>;
+  monthly: Record<string, Record<string, IncomeStatement>>;
+}>;
 
 export function ajax(
   route: "/api/recurring"
diff --git a/src/routes/(app)/cash_flow/income_statement/+page.svelte b/src/routes/(app)/cash_flow/income_statement/+page.svelte
index 281d0399..c9b766de 100644
--- a/src/routes/(app)/cash_flow/income_statement/+page.svelte
+++ b/src/routes/(app)/cash_flow/income_statement/+page.svelte
@@ -1,6 +1,7 @@
 <script lang="ts">
   import { onMount } from "svelte";
   import _ from "lodash";
+  import dayjs from "dayjs";
   import { renderIncomeStatement } from "$lib/income_statement";
   import {
     ajax,
@@ -10,7 +11,7 @@
     type IncomeStatement,
     firstName
   } from "$lib/utils";
-  import { dateMin, year } from "../../../../store";
+  import { dateMin, year, viewMode, selectedMonths } from "../../../../store";
   import ZeroState from "$lib/components/ZeroState.svelte";
   import { iconify } from "$lib/icon";
 
@@ -20,6 +21,7 @@
   let incomeStatement: IncomeStatement;
   let renderer: (data: IncomeStatement) => void;
   let yearly: Record<string, IncomeStatement> = {};
+  let monthly: Record<string, Record<string, IncomeStatement>> = {};
   let diff: number;
   let diffPercent: number;
   let years: string[] = [];
@@ -60,21 +62,108 @@
 
   const accountGroups: AccountGroup[] = [];
 
-  $: if (yearly && renderer) {
-    if (yearly[$year] == null) {
-      incomeStatement = null;
-      isEmpty = true;
+  $: if (yearly && monthly && renderer) {
+    let currentIncomeStatement: IncomeStatement = null;
+
+    if (isMonthlyView && $selectedMonths.length > 0) {
+      // Aggregate data from selected months
+      if (monthly[$year]) {
+        const aggregatedStatement: IncomeStatement = {
+          startingBalance: 0,
+          endingBalance: 0,
+          date: dayjs(),
+          income: {},
+          interest: {},
+          equity: {},
+          pnl: {},
+          liabilities: {},
+          tax: {},
+          expenses: {}
+        };
+
+        let hasData = false;
+        let firstMonthData: IncomeStatement | null = null;
+        let lastMonthData: IncomeStatement | null = null;
+
+        // Sort selected months to get first and last
+        const sortedMonths = $selectedMonths.sort();
+
+        for (const month of sortedMonths) {
+          const monthKey = `${$year}-${month}`;
+          if (monthly[$year][monthKey]) {
+            hasData = true;
+            const monthData = monthly[$year][monthKey];
+
+            // Set first and last month data for balance calculations
+            if (!firstMonthData) {
+              firstMonthData = monthData;
+            }
+            lastMonthData = monthData;
+
+            // Helper function to merge records
+            const mergeRecords = (
+              target: Record<string, number>,
+              source: Record<string, number>
+            ) => {
+              for (const [account, amount] of Object.entries(source)) {
+                target[account] = (target[account] || 0) + amount;
+              }
+            };
+
+            // Aggregate all account records
+            mergeRecords(aggregatedStatement.income, monthData.income);
+            mergeRecords(aggregatedStatement.interest, monthData.interest);
+            mergeRecords(aggregatedStatement.equity, monthData.equity);
+            mergeRecords(aggregatedStatement.pnl, monthData.pnl);
+            mergeRecords(aggregatedStatement.liabilities, monthData.liabilities);
+            mergeRecords(aggregatedStatement.tax, monthData.tax);
+            mergeRecords(aggregatedStatement.expenses, monthData.expenses);
+          }
+        }
+
+        if (hasData && firstMonthData && lastMonthData) {
+          // Use yearly starting balance and calculate ending balance using the same formula as backend
+          aggregatedStatement.startingBalance = yearly[$year]?.startingBalance || 0;
+
+          // Calculate ending balance: startingBalance + sum(income)*-1 + sum(interest)*-1 + sum(equity)*-1 + sum(tax)*-1 + sum(expenses)*-1 + sum(pnl) + sum(liabilities)*-1
+          aggregatedStatement.endingBalance =
+            aggregatedStatement.startingBalance +
+            sum(aggregatedStatement.income) * -1 +
+            sum(aggregatedStatement.interest) * -1 +
+            sum(aggregatedStatement.equity) * -1 +
+            sum(aggregatedStatement.tax) * -1 +
+            sum(aggregatedStatement.expenses) * -1 +
+            sum(aggregatedStatement.pnl) +
+            sum(aggregatedStatement.liabilities) * -1;
+
+          currentIncomeStatement = aggregatedStatement;
+        }
+      }
     } else {
-      incomeStatement = yearly[$year];
+      // Show yearly data
+      currentIncomeStatement = yearly[$year];
+    }
+
+    if (currentIncomeStatement) {
+      incomeStatement = currentIncomeStatement;
       years = _.sortBy(_.keys(yearly)).reverse();
       diff = incomeStatement.endingBalance - incomeStatement.startingBalance;
       diffPercent = diff / incomeStatement.startingBalance;
 
       renderer(incomeStatement);
       isEmpty = false;
+    } else {
+      incomeStatement = null;
+      isEmpty = true;
     }
   }
 
+  // Reactive statement to determine if we're in monthly view
+  $: isMonthlyView = $viewMode === "monthly";
+
+  // Get available months for the selected year
+  $: availableMonths = monthly && monthly[$year] ? Object.keys(monthly[$year]).sort() : [];
+
   function uniqueAccounts(statements: IncomeStatement[], key: AccountGroupName) {
     const accounts = new Set<string>();
     for (const statement of statements) {
@@ -86,7 +175,9 @@
   }
 
   onMount(async () => {
-    ({ yearly } = await ajax("/api/income_statement"));
+    const response = await ajax("/api/income_statement");
+    yearly = response.yearly;
+    monthly = response.monthly;
     const y = _.minBy(_.values(yearly), (y) => y.date);
     renderer = renderIncomeStatement(svg);
     if (y) {
@@ -202,22 +293,46 @@
             <thead>
               <tr>
                 <th class="py-2">Account</th>
-                {#each years as y}
-                  <th class="py-2 has-text-right">{y}</th>
-                {/each}
+                {#if !isMonthlyView}
+                  {#each years as y}
+                    <th class="py-2 has-text-right">{y}</th>
+                  {/each}
+                {:else}
+                  <th class="py-2 has-text-right">Total</th>
+                  {#each $selectedMonths.sort() as month}
+                    <th class="py-2 has-text-right">{$year}-{month}</th>
+                  {/each}
+                {/if}
               </tr>
             </thead>
             <tbody class="has-text-grey-dark">
               {#each accountGroups as group}
                 <tr class="has-text-weight-bold is-sub-header">
                   <th>{group.label}</th>
-                  {#each years as y}
+                  {#if !isMonthlyView}
+                    {#each years as y}
+                      <td class="has-text-right">
+                        {#if yearly[y]?.[group.key]}
+                          {formatUnlessZero(sum(yearly[y][group.key]) * group.multiplier)}
+                        {/if}
+                      </td>
+                    {/each}
+                  {:else}
                     <td class="has-text-right">
-                      {#if yearly[y]?.[group.key]}
-                        {formatUnlessZero(sum(yearly[y][group.key]) * group.multiplier)}
+                      {#if incomeStatement?.[group.key]}
+                        {formatUnlessZero(sum(incomeStatement[group.key]) * group.multiplier)}
                       {/if}
                     </td>
-                  {/each}
+                    {#each $selectedMonths.sort() as month}
+                      <td class="has-text-right">
+                        {#if monthly[$year]?.[`${$year}-${month}`]?.[group.key]}
+                          {formatUnlessZero(
+                            sum(monthly[$year][`${$year}-${month}`][group.key]) * group.multiplier
+                          )}
+                        {/if}
+                      </td>
+                    {/each}
+                  {/if}
                 </tr>
                 {#each group.accounts as account}
                   <tr>
@@ -226,51 +341,128 @@
                         >{iconify(restName(account), { group: firstName(account) })}</span
                       ></th
                     >
-                    {#each years as y}
+                    {#if !isMonthlyView}
+                      {#each years as y}
+                        <td class="has-text-right">
+                          {#if yearly[y]?.[group.key]?.[account]}
+                            {formatUnlessZero(yearly[y][group.key][account] * group.multiplier)}
+                          {/if}
+                        </td>
+                      {/each}
+                    {:else}
                       <td class="has-text-right">
-                        {#if yearly[y]?.[group.key]?.[account]}
-                          {formatUnlessZero(yearly[y][group.key][account] * group.multiplier)}
+                        {#if incomeStatement?.[group.key]?.[account]}
+                          {formatUnlessZero(incomeStatement[group.key][account] * group.multiplier)}
                         {/if}
                       </td>
-                    {/each}
+                      {#each $selectedMonths.sort() as month}
+                        <td class="has-text-right">
+                          {#if monthly[$year]?.[`${$year}-${month}`]?.[group.key]?.[account]}
+                            {formatUnlessZero(
+                              monthly[$year][`${$year}-${month}`][group.key][account] *
+                                group.multiplier
+                            )}
+                          {/if}
+                        </td>
+                      {/each}
+                    {/if}
                   </tr>
                 {/each}
-                <tr><td colspan={years.length + 1}>&nbsp;</td></tr>
+                <tr
+                  ><td colspan={!isMonthlyView ? years.length + 1 : $selectedMonths.length + 2}
+                    >&nbsp;</td
+                  ></tr
+                >
               {/each}
 
               <tr class="has-text-weight-bold">
                 <th>Change</th>
-                {#each years as y}
-                  {#if yearly[y]}
-                    {@const diff = yearly[y].endingBalance - yearly[y].startingBalance}
-                    <td class="has-text-right {changeClass(diff)}">
-                      <div>{formatCurrency(diff)}</div>
-                      <div>{formatPercentage(diff / yearly[y].startingBalance)}</div>
+                {#if !isMonthlyView}
+                  {#each years as y}
+                    {#if yearly[y]}
+                      {@const diff = yearly[y].endingBalance - yearly[y].startingBalance}
+                      <td class="has-text-right {changeClass(diff)}">
+                        <div>{formatCurrency(diff)}</div>
+                        <div>{formatPercentage(diff / yearly[y].startingBalance)}</div>
+                      </td>
+                    {:else}
+                      <td></td>
+                    {/if}
+                  {/each}
+                {:else}
+                  {#if incomeStatement}
+                    {@const monthlyDiff =
+                      incomeStatement.endingBalance - incomeStatement.startingBalance}
+                    <td class="has-text-right {changeClass(monthlyDiff)}">
+                      <div>{formatCurrency(monthlyDiff)}</div>
+                      <div>{formatPercentage(monthlyDiff / incomeStatement.startingBalance)}</div>
                     </td>
                   {:else}
                     <td></td>
                   {/if}
-                {/each}
+                  {#each $selectedMonths.sort() as month}
+                    {#if monthly[$year]?.[`${$year}-${month}`]}
+                      {@const monthData = monthly[$year][`${$year}-${month}`]}
+                      {@const diff = monthData.endingBalance - monthData.startingBalance}
+                      <td class="has-text-right {changeClass(diff)}">
+                        <div>{formatCurrency(diff)}</div>
+                        <div>{formatPercentage(diff / monthData.startingBalance)}</div>
+                      </td>
+                    {:else}
+                      <td></td>
+                    {/if}
+                  {/each}
+                {/if}
               </tr>
               <tr class="has-text-weight-bold">
                 <th>End Balance</th>
-                {#each years as y}
+                {#if !isMonthlyView}
+                  {#each years as y}
+                    <td class="has-text-right">
+                      {#if yearly[y]}
+                        {formatCurrency(yearly[y].endingBalance)}
+                      {/if}
+                    </td>
+                  {/each}
+                {:else}
                   <td class="has-text-right">
-                    {#if yearly[y]}
-                      {formatCurrency(yearly[y].endingBalance)}
+                    {#if incomeStatement}
+                      {formatCurrency(incomeStatement.endingBalance)}
                     {/if}
                   </td>
-                {/each}
+                  {#each $selectedMonths.sort() as month}
+                    <td class="has-text-right">
+                      {#if monthly[$year]?.[`${$year}-${month}`]}
+                        {formatCurrency(monthly[$year][`${$year}-${month}`].endingBalance)}
+                      {/if}
+                    </td>
+                  {/each}
+                {/if}
               </tr>
               <tr class="has-text-weight-bold">
                 <th>Start Balance</th>
-                {#each years as y}
+                {#if !isMonthlyView}
+                  {#each years as y}
+                    <td class="has-text-right">
+                      {#if yearly[y]}
+                        {formatCurrency(yearly[y].startingBalance)}
+                      {/if}
+                    </td>
+                  {/each}
+                {:else}
                   <td class="has-text-right">
-                    {#if yearly[y]}
-                      {formatCurrency(yearly[y].startingBalance)}
+                    {#if incomeStatement}
+                      {formatCurrency(incomeStatement.startingBalance)}
                     {/if}
                   </td>
-                {/each}
+                  {#each $selectedMonths.sort() as month}
+                    <td class="has-text-right">
+                      {#if monthly[$year]?.[`${$year}-${month}`]}
+                        {formatCurrency(monthly[$year][`${$year}-${month}`].startingBalance)}
+                      {/if}
+                    </td>
+                  {/each}
+                {/if}
               </tr>
             </tbody>
           </table>
diff --git a/src/store.ts b/src/store.ts
index ba81e083..520f737c 100644
--- a/src/store.ts
+++ b/src/store.ts
@@ -57,6 +57,8 @@ export const sheetEditorState = writable(initialSheetEditorState);
 
 export const month = writable(now().format("YYYY-MM"));
 export const year = writable<string>("");
+export const viewMode = writable("yearly"); // "yearly" or "monthly"
+export const selectedMonths = writable<string[]>([]);
 export const dateRangeOption = writable<number>(3);
 
 export const dateMin = writable(dayjs("1980", "YYYY"));