diff --git a/app/Domains/Transaction/Services/ReportService.php b/app/Domains/Transaction/Services/ReportService.php
index 2ee1738c..f8e75bd6 100644
--- a/app/Domains/Transaction/Services/ReportService.php
+++ b/app/Domains/Transaction/Services/ReportService.php
@@ -58,6 +58,23 @@ public static function generateExpensesByPeriod($teamId, $startDate, $timeUnitDi
         }, $resultGroup)->sortBy('date');
     }
 
+    public static function generateExpensesByPeriodInDate($teamId, $startDate, $endDate, $categories = null)
+    {
+        $rangeStartAt = Carbon::createFromFormat('Y-m-d', $startDate)->startOfMonth()->format('Y-m-d');
+        $rangeEndAt = Carbon::createFromFormat('Y-m-d', $endDate)->endOfMonth()->format('Y-m-d');
+
+        $results = self::getExpensesByCategoriesInPeriod($teamId, $rangeStartAt, $rangeEndAt, $categories);
+        $resultGroup = $results->groupBy('date');
+
+        return $resultGroup->map(function ($monthItems) {
+            return [
+                'date' => $monthItems->first()->date,
+                'data' => $monthItems->sortByDesc('total_amount')->values(),
+                'total' => $monthItems->sum('total_amount'),
+            ];
+        }, $resultGroup)->sortBy('date');
+    }
+
     public static function getAssignedByPeriod($teamId, $startDate, $timeUnitDiff = 2,  $timeUnit = 'month', $categories = null)
     {
         $rangeEndAt = Carbon::createFromFormat('Y-m-d', $startDate)->endOfMonth()->format('Y-m-d');
diff --git a/app/Http/Controllers/Finance/FinanceTrendController.php b/app/Http/Controllers/Finance/FinanceTrendController.php
index c5572f04..7e80194a 100644
--- a/app/Http/Controllers/Finance/FinanceTrendController.php
+++ b/app/Http/Controllers/Finance/FinanceTrendController.php
@@ -210,13 +210,19 @@ public function spendingYear()
             $excludedAccounts = collect(explode(',', $filters['category']))->map(fn ($id) => "-$id")->all();
         }
 
+        $endDate = Carbon::createFromFormat('Y-m-d', $startDate)->endOfYear()->format('Y-m-d');
+        $startDate = Carbon::createFromFormat('Y-m-d', $startDate)->startOfYear()->format('Y-m-d');
+
+        $monthlyExpensesInYear = ReportService::generateExpensesByPeriodInDate($teamId, $startDate, $endDate, $excludedAccounts);
+
         return [
-            'data' => ReportService::generateExpensesByPeriod($teamId, $startDate, 12, 'month', $excludedAccounts),
+            'data' => $monthlyExpensesInYear,
             'metaData' => [
                 'name' => 'spendingYear',
-                'title' => 'Expenses',
+                'title' => 'Expenses this year',
                 'props' => [
                     'headerTemplate' => 'grid',
+                    'total' => $monthlyExpensesInYear->sum('total'),
                 ],
             ],
         ];
diff --git a/components.d.ts b/components.d.ts
index aaee9aa8..fe2a977d 100644
--- a/components.d.ts
+++ b/components.d.ts
@@ -7,12 +7,31 @@ export {}
 /* prettier-ignore */
 declare module 'vue' {
   export interface GlobalComponents {
+    IIonEllipsisVertical: typeof import('~icons/ion/ellipsis-vertical')['default']
+    IMaterialSymbolsBrightnessAlertOutlineRounded: typeof import('~icons/material-symbols/brightness-alert-outline-rounded')['default']
     IMdiBankTransfer: typeof import('~icons/mdi/bank-transfer')['default']
     IMdiBankTransferIn: typeof import('~icons/mdi/bank-transfer-in')['default']
     IMdiBankTransferOut: typeof import('~icons/mdi/bank-transfer-out')['default']
+    IMdiBell: typeof import('~icons/mdi/bell')['default']
     IMdiCallSplit: typeof import('~icons/mdi/call-split')['default']
+    IMdiCheck: typeof import('~icons/mdi/check')['default']
+    IMdiChevronLeft: typeof import('~icons/mdi/chevron-left')['default']
+    IMdiChevronRight: typeof import('~icons/mdi/chevron-right')['default']
     IMdiClose: typeof import('~icons/mdi/close')['default']
+    IMdiEdit: typeof import('~icons/mdi/edit')['default']
+    IMdiEllipsisVertical: typeof import('~icons/mdi/ellipsis-vertical')['default']
+    IMdiEmailCheck: typeof import('~icons/mdi/email-check')['default']
+    IMdiExport: typeof import('~icons/mdi/export')['default']
     IMdiFile: typeof import('~icons/mdi/file')['default']
+    IMdiFilter: typeof import('~icons/mdi/filter')['default']
+    IMdiHistory: typeof import('~icons/mdi/history')['default']
+    IMdiLink: typeof import('~icons/mdi/link')['default']
+    IMdiLock: typeof import('~icons/mdi/lock')['default']
+    IMdiMinus: typeof import('~icons/mdi/minus')['default']
+    IMdiMoney: typeof import('~icons/mdi/money')['default']
+    IMdiPlus: typeof import('~icons/mdi/plus')['default']
+    IMdiSearch: typeof import('~icons/mdi/search')['default']
+    IMdiSort: typeof import('~icons/mdi/sort')['default']
     IMdiStar: typeof import('~icons/mdi/star')['default']
     IMdiStarOutline: typeof import('~icons/mdi/star-outline')['default']
     IMdiSync: typeof import('~icons/mdi/sync')['default']
diff --git a/resources/js/Components/molecules/WidgetTitleCard.vue b/resources/js/Components/molecules/WidgetTitleCard.vue
index 1f07634a..80cf9c34 100644
--- a/resources/js/Components/molecules/WidgetTitleCard.vue
+++ b/resources/js/Components/molecules/WidgetTitleCard.vue
@@ -3,7 +3,7 @@
 import { AtButton } from "atmosphere-ui";
 
 withDefaults(defineProps<{
-    title: string;
+    title?: string;
     action?: {
         label: string,
         iconClass?: string,
diff --git a/resources/js/Components/widgets/ChartComparison.vue b/resources/js/Components/widgets/ChartComparison.vue
index 2c9866cd..2efa68f1 100644
--- a/resources/js/Components/widgets/ChartComparison.vue
+++ b/resources/js/Components/widgets/ChartComparison.vue
@@ -10,48 +10,29 @@ import { formatMonth } from "@/utils";
 import formatMoney from "@/utils/formatMoney";
 import WidgetTitleCard from "../molecules/WidgetTitleCard.vue";
 
-const props = defineProps({
-    title: {
-        type: String
-    },
-    hideHeader: {
-        type: Boolean
-    },
-    headerTemplate: {
-        type: String,
-        default: 'row'
-    },
-    type: {
-      type: String,
-      default: "bar"
-    },
-    data: {
-      type: Object,
-      required: true
-    },
-    groupTotal: {
-        type: String,
-        default: "total"
-    },
-    dataItemTotal: {
-        type: String,
-        default: "total"
-    },
-    dataItemLabel: {
-        type: Function
-    },
-    hideDivider: {
-        type: Boolean
-    },
-    headerLabel: {
-        type: String,
-    },
-    headerTitleDate: {
-        default: true,
-    }
+const props = withDefaults(defineProps<{
+    title: string,
+    hideHeader: boolean
+    headerTemplate: "row" | "grid",
+    type: string,
+    data: Record<string, any>,
+    groupTotal: string,
+    dataItemTotal: string,
+    dataItemLabel: Function
+    hideDivider: boolean
+    headerLabel: string
+    headerTitleDate: boolean
+    withPadding: boolean
+}>(), {
+    headerTemplate: 'row',
+    type: "bar",
+    groupTotal: "total",
+    dataItemTotal: "total",
+    headerTitleDate: true,
+    withPadding: true
 });
 
-const emit = defineEmits(['click']);
+const emit = defineEmits(['click', 'subitem-clicked', 'action']);
 
 const selectedDate = ref(null)
 const currentSeries = computed(() => {
@@ -110,7 +91,7 @@ const handleSelection = (index: number) => {
         :hide-divider="hideDivider"
         @action="$emit('action', $event)"
         :border="false"
-        :with-padding="false"
+        :with-padding="withPadding"
     >
         <template #icon v-if="selectedDate">
             <LogerButtonTab  @click="selectedDate=null">
@@ -123,13 +104,13 @@ const handleSelection = (index: number) => {
 
         <section class="w-full card-text" >
             <div
-                :class="[headerTemplate == 'grid' ? 'md:grid md:grid-cols-4' : 'md:flex']"
-                class="w-full mb-2 divide-y comparison-header md:px-10 text-body-1/50 md:space-x-2 md:divide-x md:divide-y-0 divide-dashed divide-opacity-20 divide-body-1 bg-base-lvl-2">
+                :class="[headerTemplate == 'grid' ? 'md:grid md:grid-cols-4' : 'md:flex md:divide-x']"
+                class="w-full mb-2 divide-y comparison-header md:px-10 text-body-1/50 md:space-x-2  md:divide-y-0 divide-dashed divide-opacity-20 divide-body-1 bg-base-lvl-2">
             <div
                 v-for="header in state.headers"
                 :key="header.id"
                 @click="selectedDate = header.id"
-                class="flex items-center justify-between w-full px-4 py-2 cursor-pointer comparison-header__item md:py-6 md:justify-center md:flex-col previous-period hover:text-body/80"
+                class="flex items-center  justify-between w-full px-4 py-2 cursor-pointer comparison-header__item md:py-6 md:justify-center md:flex-col previous-period hover:text-body/80"
             >
                 <h6 class="period-title">{{ header.label }}</h6>
                 <span class="mt-2 text-xs period-value">
diff --git a/resources/js/Components/widgets/WidgetYearSpending.vue b/resources/js/Components/widgets/WidgetYearSpending.vue
new file mode 100644
index 00000000..dc63f213
--- /dev/null
+++ b/resources/js/Components/widgets/WidgetYearSpending.vue
@@ -0,0 +1,170 @@
+<script setup lang="ts">
+import { computed, ref, inject, watch } from "vue";
+
+
+import LogerChart from "@/Components/organisms/LogerChart.vue";
+import NumberHider from "@/Components/molecules/NumberHider.vue";
+import LogerButtonTab from "@/Components/atoms/LogerButtonTab.vue";
+
+import { formatMonth } from "@/utils";
+import formatMoney from "@/utils/formatMoney";
+import WidgetTitleCard from "../molecules/WidgetTitleCard.vue";
+
+const props = withDefaults(defineProps<{
+    title: string;
+    hideHeader: boolean;
+    headerTemplate: "row" | "grid";
+    type: string;
+    data: Record<string, any>;
+    total: number;
+    groupTotal: string;
+    dataItemTotal: string;
+    dataItemLabel: Function;
+    hideDivider: boolean;
+    headerLabel: string;
+    headerTitleDate: boolean;
+    withPadding: boolean;
+}>(), {
+    headerTemplate: 'row',
+    type: "bar",
+    groupTotal: "total",
+    dataItemTotal: "total",
+    headerTitleDate: true,
+    withPadding: true
+});
+
+const emit = defineEmits(['click', 'subitem-clicked', 'action']);
+
+const selectedDate = ref(null)
+const currentSeries = computed(() => {
+    const generalSeries = [{
+        name: 'Expenses',
+        data: Object.values(props.data).map(item => item[props.groupTotal]),
+        labels: Object.keys(props.data).map(month => formatMonth(month))
+    }]
+
+    const dateSeries = selectedDate.value ? [{
+        name: formatMonth(selectedDate.value),
+        data: props.data[selectedDate.value].data.map(item => {
+            return item[props.dataItemTotal]
+        }),
+        labels: props.data[selectedDate.value].data.map(item => {
+            return props.dataItemLabel ? props.dataItemLabel(item) : item.name
+        })
+    }] : []
+
+    return selectedDate.value ? dateSeries : generalSeries;
+})
+
+const hasHiddenValues = inject('hasHiddenValues', ref(false))
+const state = computed(() => {
+    return {
+        headers: Object.entries(props.data).map(([dateString, item]) => ({
+            label: props.headerTitleDate ? formatMonth(dateString) : item[props.headerLabel ?? 'name'],
+            value: item[props.groupTotal],
+            id: dateString
+        })),
+        options: {
+            colors: ["#7B77D1", "#80CDFE"],
+            hasHiddenValues: hasHiddenValues.value,
+        },
+        series: currentSeries.value
+    }
+});
+
+watch(() => props.data, () => {
+    selectedDate.value = null
+})
+
+const handleSelection = (index: number) => {
+    if (selectedDate.value) {
+       const item = props.data[selectedDate.value].data[index];
+       emit('subitem-clicked', item, selectedDate.value)
+    }
+}
+
+</script>
+
+<template>
+    <WidgetTitleCard
+        :title="title"
+        :action="action"
+        :hide-divider="hideDivider"
+        @action="$emit('action', $event)"
+        :border="false"
+        :with-padding="withPadding"
+    >
+        <template #icon v-if="selectedDate">
+            <LogerButtonTab  @click="selectedDate=null">
+                <IMdiChevronLeft />
+            </LogerButtonTab>
+        </template>
+        <template #title>
+            <span>{{ title }}</span>
+            <span class="text-green-500 font-bold ml-4"> {{ formatMoney(total)}}</span>
+        </template>
+        <template #action v-if="selectedDate">
+            <span v-if="selectedDate" class="capitalize text-primary">{{ formatMonth(selectedDate) }}</span>
+        </template>
+
+        <section class="w-full card-text" >
+            <div
+                :class="[headerTemplate == 'grid' ? 'md:grid md:grid-cols-4' : 'md:flex md:divide-x']"
+                class="w-full mb-2 divide-y comparison-header md:px-10 text-body-1/50 md:space-x-2  md:divide-y-0 divide-dashed divide-opacity-20 divide-body-1 bg-base-lvl-2">
+            <div
+                v-for="header in state.headers"
+                :key="header.id"
+                @click="selectedDate = header.id"
+                class="flex items-center  justify-between w-full px-4 py-2 cursor-pointer comparison-header__item md:py-6 md:justify-center md:flex-col previous-period hover:text-body/80"
+            >
+                <h6 class="period-title">{{ header.label }}</h6>
+                <span class="mt-2 text-xs period-value">
+                    <NumberHider />
+                    {{ formatMoney(header.value) }}
+                </span>
+            </div>
+            </div>
+            <LogerChart
+                class="bg-white"
+                style="height:300px; width: 100%"
+                label="name"
+                type="bar"
+                :labels="currentSeries[0].labels"
+                :options="state.options"
+                :series="state.series"
+                :has-hidden-values="hasHiddenValues"
+                @clicked="handleSelection"
+            />
+        </section>
+    </WidgetTitleCard>
+</template>
+
+
+<style lang="scss" scoped>
+.comparison-card {
+  border-radius: 0;
+}
+
+.comparison-header {
+  width: 100%;
+
+  &__item {
+    .period-value {
+      position: relative;
+      font-size: 18px;
+      font-weight: bolder;
+
+      &::before {
+        position: absolute;
+        left: -20px;
+        top: 25%;
+        content: "";
+        height: 10px;
+        width: 10px;
+        border-radius: 50%;
+        background: #8a00d4;
+      }
+    }
+  }
+}
+</style>
diff --git a/resources/js/Pages/Trends/Overview.vue b/resources/js/Pages/Trends/Overview.vue
index 9b765c47..f7240dbf 100644
--- a/resources/js/Pages/Trends/Overview.vue
+++ b/resources/js/Pages/Trends/Overview.vue
@@ -18,6 +18,7 @@ import ExpenseChartWidget from "@/domains/transactions/components/ExpenseChartWi
 
 import { useServerSearch } from "@/composables/useServerSearch";
 import AccountFilters from "@/domains/transactions/components/AccountFilters.vue";
+import WidgetYearSpending from "@/Components/widgets/WidgetYearSpending.vue";
 
 const props = defineProps({
   user: {
@@ -62,7 +63,7 @@ const components = {
     netWorth: ChartNetWorth,
     incomeExpenses: IncomeExpenses,
     incomeExpensesGraph:  ChartNetWorth,
-    spendingYear: ChartComparison,
+    spendingYear: WidgetYearSpending,
     assignedYear: ChartComparison,
 }
 
diff --git a/resources/js/domains/budget/components/BudgetBalanceAssign.vue b/resources/js/domains/budget/components/BudgetBalanceAssign.vue
index 8d494d2b..6d19c4f2 100644
--- a/resources/js/domains/budget/components/BudgetBalanceAssign.vue
+++ b/resources/js/domains/budget/components/BudgetBalanceAssign.vue
@@ -115,9 +115,9 @@
         }
     }
 
-    const categories = inject('categories', ref({ data: []}))
+    const categories = inject('categories', ref([]))
     const categoryOptions = computed(() => {
-        return categories.value.data?.map(item => ({
+        return categories.value?.map(item => ({
             value: item.id,
             key: item.id,
             label: item.name,
@@ -125,7 +125,7 @@
             children: item.subCategories.map(category => ({
                 value: category.id,
                 label: category.name,
-                available: category.available,
+                available: category.available || 0,
             }))
         }))
     })
@@ -135,9 +135,6 @@
         form.reset();
         showPopover.value = false;
     }
-    const toggle = () => {
-        showPopover.value = !showPopover.value
-    }
 </script>
 
 <template>
@@ -172,7 +169,7 @@
                         {{ description }}
                     </small>
 
-                    <NPopover v-if="isOverspent"  placement="bottom" >
+                    <NPopover v-if="isOverspent"  placement="bottom" trigger="click">
                         <template #trigger>
                             <AtButton class="text-white rounded-md bg-black/30">
                                 Fix this