diff --git a/app/Domains/Journal/Actions/TransactionBulkApprove.php b/app/Domains/Journal/Actions/TransactionBulkApprove.php
index eedc64cc..23b25709 100644
--- a/app/Domains/Journal/Actions/TransactionBulkApprove.php
+++ b/app/Domains/Journal/Actions/TransactionBulkApprove.php
@@ -4,14 +4,14 @@
 
 use Illuminate\Foundation\Auth\User;
 use Illuminate\Support\Facades\Gate;
-use Insane\Journal\Contracts\TransactionBulkApproves;
 use Insane\Journal\Models\Core\Transaction;
+use Insane\Journal\Contracts\TransactionBulkApproves;
 
 class TransactionBulkApprove implements TransactionBulkApproves
 {
     public function validate(User $user)
     {
-        Gate::forUser($user)->authorize('update', Transaction::class);
+        Gate::forUser($user)->authorize('updateBulk', Transaction::class);
     }
 
     public function approveAllDrafts(User $user)
diff --git a/app/Domains/Journal/Policies/TransactionPolicy.php b/app/Domains/Journal/Policies/TransactionPolicy.php
index de24a3fb..91f14372 100644
--- a/app/Domains/Journal/Policies/TransactionPolicy.php
+++ b/app/Domains/Journal/Policies/TransactionPolicy.php
@@ -3,8 +3,8 @@
 namespace App\Domains\Journal\Policies;
 
 use App\Models\User;
-use Illuminate\Auth\Access\HandlesAuthorization;
 use Insane\Journal\Models\Core\Transaction;
+use Illuminate\Auth\Access\HandlesAuthorization;
 
 class TransactionPolicy
 {
@@ -25,6 +25,11 @@ public function update(User $user, Transaction $transaction)
         return $user->current_team_id == $transaction->team_id;
     }
 
+    public function updateBulk(User $user)
+    {
+        return $user->current_team_id;
+    }
+
     public function delete(User $user, Transaction $transaction)
     {
         return $user->current_team_id == $transaction->team_id;
diff --git a/app/Domains/LogerProfile/Http/Controllers/LogerProfileController.php b/app/Domains/LogerProfile/Http/Controllers/LogerProfileController.php
index 85483e46..7968faae 100644
--- a/app/Domains/LogerProfile/Http/Controllers/LogerProfileController.php
+++ b/app/Domains/LogerProfile/Http/Controllers/LogerProfileController.php
@@ -2,10 +2,11 @@
 
 namespace App\Domains\LogerProfile\Http\Controllers;
 
-use App\Domains\LogerProfile\Data\LogerProfileData;
-use App\Domains\LogerProfile\Services\LogerProfileService;
+use App\Models\Setting;
 use App\Http\Controllers\Controller;
+use App\Domains\LogerProfile\Data\LogerProfileData;
 use App\Http\Controllers\Traits\HasEnrichedRequest;
+use App\Domains\LogerProfile\Services\LogerProfileService;
 
 class LogerProfileController extends Controller
 {
@@ -28,7 +29,6 @@ public function store(LogerProfileService $profileService)
 
     public function show(LogerProfileService $profileService, int $profileId)
     {
-
         return inertia('LogerProfile/ProfileView', [
             'profiles' => $profileService->list(auth()->user()->current_team_id),
             'profile' => $profileService->getById($profileId),
@@ -37,4 +37,14 @@ public function show(LogerProfileService $profileService, int $profileId)
             },
         ]);
     }
+
+    public function transactions(int $profileId, LogerProfileService $profileService)
+    {
+        $queryParams = request()->query();
+
+        $filters = isset($queryParams['filter']) ? $queryParams['filter'] : [];
+        [$startDate, $endDate] = $this->getFilterDates($filters);
+
+        return $profileService->getTransactionsByProfileId($profileId, $startDate, $endDate);
+    }
 }
diff --git a/app/Domains/LogerProfile/Http/Controllers/LogerProfileEntityController.php b/app/Domains/LogerProfile/Http/Controllers/LogerProfileEntityController.php
index 89aef381..3be1692c 100644
--- a/app/Domains/LogerProfile/Http/Controllers/LogerProfileEntityController.php
+++ b/app/Domains/LogerProfile/Http/Controllers/LogerProfileEntityController.php
@@ -2,10 +2,10 @@
 
 namespace App\Domains\LogerProfile\Http\Controllers;
 
-use App\Domains\LogerProfile\Data\ProfileEntityData;
-use App\Domains\LogerProfile\Services\LogerProfileService;
 use App\Http\Controllers\Controller;
 use App\Http\Controllers\Traits\HasEnrichedRequest;
+use App\Domains\LogerProfile\Data\ProfileEntityData;
+use App\Domains\LogerProfile\Services\LogerProfileService;
 
 class LogerProfileEntityController extends Controller
 {
diff --git a/app/Domains/LogerProfile/Services/LogerProfileService.php b/app/Domains/LogerProfile/Services/LogerProfileService.php
index 5d6032bc..edb0bf5c 100644
--- a/app/Domains/LogerProfile/Services/LogerProfileService.php
+++ b/app/Domains/LogerProfile/Services/LogerProfileService.php
@@ -2,10 +2,13 @@
 
 namespace App\Domains\LogerProfile\Services;
 
+use App\Domains\AppCore\Models\Category;
+use App\Domains\LogerProfile\Models\LogerProfile;
 use App\Domains\LogerProfile\Data\LogerProfileData;
+use App\Domains\Transaction\Models\TransactionLine;
 use App\Domains\LogerProfile\Data\ProfileEntityData;
-use App\Domains\LogerProfile\Models\LogerProfile;
 use App\Domains\LogerProfile\Models\LogerProfileEntity;
+use App\Domains\Transaction\Services\TransactionService;
 
 class LogerProfileService
 {
@@ -40,4 +43,28 @@ public function getEntitiesByProfileId(int $profileId)
             'profile_id' => $profileId,
         ])->get());
     }
+
+    public function getTransactionsByProfileId(int $profileId, $startDate, $endDate)
+    {
+        $entities =  LogerProfileEntity::where([
+            'profile_id' => $profileId,
+            'entity_type' => Category::class
+        ])->get();
+
+        $categories = $entities->map(fn ($entity) => $entity->entity->id)->all();
+
+        $teamId = $entities[0]->team_id;
+
+        $transactions = TransactionLine::byTeam($teamId)
+            ->inDateFrame($startDate, $endDate)
+            ->expenseCategories($categories)
+            ->verified()
+            ->orderByDesc('transactions.date')
+            ->get();
+
+        return [
+            "data" => $transactions,
+            "total" => $transactions->sum('total'),
+        ];
+    }
 }
diff --git a/app/Domains/LogerProfile/routes.php b/app/Domains/LogerProfile/routes.php
index 2309cc30..f266f3f3 100644
--- a/app/Domains/LogerProfile/routes.php
+++ b/app/Domains/LogerProfile/routes.php
@@ -1,11 +1,12 @@
 <?php
 
+use Illuminate\Support\Facades\Route;
 use App\Domains\LogerProfile\Http\Controllers\LogerProfileController;
 use App\Domains\LogerProfile\Http\Controllers\LogerProfileEntityController;
-use Illuminate\Support\Facades\Route;
 
 Route::middleware(['auth:sanctum', 'atmosphere.teamed', 'verified'])->group(function () {
     // Route::resource('/loger-profiles', [LogerProfileController::class, 'index'])->name('profiles.index');
     Route::resource('/loger-profiles', LogerProfileController::class);
     Route::resource('/loger-profiles/{profileId}/entities', LogerProfileEntityController::class);
+    Route::get('/loger-profiles/{profileId}/transactions', [LogerProfileController::class, 'transactions']);
 });
diff --git a/app/Domains/Transaction/Services/ReportService.php b/app/Domains/Transaction/Services/ReportService.php
index ef7e09c0..56d3af0d 100644
--- a/app/Domains/Transaction/Services/ReportService.php
+++ b/app/Domains/Transaction/Services/ReportService.php
@@ -2,10 +2,10 @@
 
 namespace App\Domains\Transaction\Services;
 
-use App\Domains\Transaction\Models\Transaction;
-use App\Domains\Transaction\Models\TransactionLine;
 use Carbon\Carbon;
 use Illuminate\Support\Facades\DB;
+use App\Domains\Transaction\Models\Transaction;
+use App\Domains\Transaction\Models\TransactionLine;
 
 class ReportService
 {
@@ -40,12 +40,12 @@ public function revenueReport($teamId, $methodName = 'payments')
         return $results;
     }
 
-    public static function generateExpensesByPeriod($teamId, $timeUnit = 'month', $timeUnitDiff = 2, $type = 'expenses')
+    public static function generateExpensesByPeriod($teamId, $startDate, $timeUnitDiff = 2,  $timeUnit = 'month')
     {
-        $endDate = Carbon::now()->endOfMonth()->format('Y-m-d');
-        $startDate = Carbon::now()->subMonth($timeUnitDiff)->startOfMonth()->format('Y-m-d');
+        $rangeEndAt = Carbon::createFromFormat('Y-m-d', $startDate)->endOfMonth()->format('Y-m-d');
+        $rangeStartAt = Carbon::now()->subMonth($timeUnitDiff)->startOfMonth()->format('Y-m-d');
 
-        $results = self::getExpensesByCategoriesInPeriod($teamId, $startDate, $endDate);
+        $results = self::getExpensesByCategoriesInPeriod($teamId, $rangeStartAt, $rangeEndAt);
         $resultGroup = $results->groupBy('date');
 
         return $resultGroup->map(function ($monthItems) {
@@ -57,6 +57,36 @@ public static function generateExpensesByPeriod($teamId, $timeUnit = 'month', $t
         }, $resultGroup)->sortBy('date');
     }
 
+    public static function getIncomeVsExpenses($teamId, $timeUnitDiff = 2, $startDate = null, $timeUnit = 'month')
+    {
+        $endDate = Carbon::now()->endOfMonth()->format('Y-m-d');
+        $startDate = Carbon::now()->subMonth($timeUnitDiff)->startOfMonth()->format('Y-m-d');
+
+        $expenses = self::getExpensesByCategoriesInPeriod($teamId, $startDate, $endDate);
+        $expensesGroup = $expenses->groupBy('date');
+
+
+
+        $income = self::getIncomeByPayeeInPeriod($teamId, $startDate, $endDate);
+        $incomeCategories =  $income->groupBy('date');
+
+        $dates = $expensesGroup->keys();
+
+
+        return $dates->map(function ($month) use ($incomeCategories, $expensesGroup) {
+            $incomeData = $incomeCategories->get($month);
+            $expenseData = $expensesGroup->get($month);
+            return [
+                'date' => $month,
+                'month_date' => $month,
+                'income' => $incomeData?->values()->all() ?? [],
+                "expense" => $expenseData?->values()->all() ?? [],
+                'assets' => $incomeData?->sum('total_amount') ?? 0,
+                'debts' => $expenseData?->sum('total') ?? 0,
+            ];
+        })->sortBy('date')->values()->toArray();
+    }
+
     public static function generateCurrentPreviousReport($teamId, $timeUnit = 'month', $timeUnitDiff = 2, $type = 'expenses')
     {
         $endDate = Carbon::now()->endOfMonth()->format('Y-m-d');
@@ -101,6 +131,19 @@ public static function getExpensesByYear($year, $teamId)
             ->get();
     }
 
+    public static function getIncomeByPayeeInPeriod($teamId, $startDate, $endDate)
+    {
+        return TransactionLine::byTeam($teamId)
+            ->balance()
+            ->inDateFrame($startDate, $endDate)
+            ->incomePayees()
+            ->selectRaw('date_format(transaction_lines.date, "%Y-%m-%01") as date, payees.name, payees.id')
+            ->groupByRaw('date_format(transaction_lines.date, "%Y-%m"), payees.id')
+            ->orderByDesc('date')
+            ->join('transactions', 'transactions.id', 'transaction_lines.transaction_id')
+            ->get();
+    }
+
     public static function getExpensesByCategoriesInPeriod($teamId, $startDate, $endDate, $categories = null)
     {
         return Transaction::byTeam($teamId)
diff --git a/app/Domains/Transaction/Traits/TransactionLineTrait.php b/app/Domains/Transaction/Traits/TransactionLineTrait.php
index c3c2c84d..4285410b 100644
--- a/app/Domains/Transaction/Traits/TransactionLineTrait.php
+++ b/app/Domains/Transaction/Traits/TransactionLineTrait.php
@@ -2,9 +2,9 @@
 
 namespace App\Domains\Transaction\Traits;
 
-use App\Domains\Budget\Data\BudgetReservedNames;
 use Illuminate\Support\Facades\DB;
 use Insane\Journal\Models\Core\Transaction;
+use App\Domains\Budget\Data\BudgetReservedNames;
 
 trait TransactionLineTrait
 {
@@ -91,6 +91,19 @@ public function scopeExpenseCategories($query, array $categories = null)
         return $query;
     }
 
+    public function scopeIncomePayees($query, array $payees = null)
+    {
+        $query->where('categories.name', BudgetReservedNames::READY_TO_ASSIGN->value)
+            ->join('categories', 'transaction_lines.category_id', '=', 'categories.id')
+            ->join('payees', 'transaction_lines.payee_id', '=', 'payees.id');
+
+        if ($payees) {
+            $query->whereIn('transaction_lines.payee_id', $payees);
+        }
+
+        return $query;
+    }
+
     public function scopePayees($query, array $payees)
     {
         return $query->whereIn('transaction_lines.payee_id', $payees)
diff --git a/app/Http/Controllers/Finance/FinanceTrendController.php b/app/Http/Controllers/Finance/FinanceTrendController.php
index 4b336b5c..faf016d1 100644
--- a/app/Http/Controllers/Finance/FinanceTrendController.php
+++ b/app/Http/Controllers/Finance/FinanceTrendController.php
@@ -21,6 +21,7 @@ class FinanceTrendController extends Controller
         'payees' => 'payee',
         'net-worth' => 'NetWorth',
         'income-expenses' => 'IncomeExpenses',
+        'spending-year' => 'spendingYear',
         'income-expenses-graph' => 'IncomeExpensesGraph',
         'year-summary' => 'yearSummary',
     ];
@@ -143,17 +144,40 @@ public function incomeExpensesGraph()
         $teamId = request()->user()->current_team_id;
 
         return [
-            'data' => ReportService::generateExpensesByPeriod($teamId, 'month', 12),
+            'data' => ReportService::getIncomeVsExpenses($teamId, 12),
             'metaData' => [
                 'name' => 'incomeExpensesGraph',
                 'title' => 'Income vs Expenses',
                 'props' => [
                     'headerTemplate' => 'grid',
+                    "assetsLabel" => "income",
+                    "debtsLabel" => "expense"
                 ],
             ],
         ];
     }
 
+    public function spendingYear()
+    {
+        $queryParams = request()->query();
+        $filters = isset($queryParams['filter']) ? $queryParams['filter'] : [];
+        [$startDate, $endDate] = $this->getFilterDates($filters);
+        $teamId = request()->user()->current_team_id;
+
+        return [
+            'data' => ReportService::generateExpensesByPeriod($teamId, $startDate, 12),
+            'metaData' => [
+                'name' => 'spendingYear',
+                'title' => 'Expenses',
+                'props' => [
+                    'headerTemplate' => 'grid',
+                ],
+            ],
+        ];
+    }
+
+
+
     public function yearSummary()
     {
         // $queryParams = request()->query();
diff --git a/app/Http/Controllers/System/DashboardController.php b/app/Http/Controllers/System/DashboardController.php
index 2577dcda..3e7cfb37 100644
--- a/app/Http/Controllers/System/DashboardController.php
+++ b/app/Http/Controllers/System/DashboardController.php
@@ -39,7 +39,7 @@ public function __invoke()
             'budgetTotal' => $budget,
             'transactionTotal' => $transactionsTotal,
             'expenses' => ReportService::generateCurrentPreviousReport($teamId, 'month', 1),
-            'revenue' => ReportService::generateExpensesByPeriod($teamId),
+            'revenue' => ReportService::generateExpensesByPeriod($teamId, $startDate),
             'onboarding' => function () use ($team) {
                 $onboarding = $team->onboarding();
 
diff --git a/components.d.ts b/components.d.ts
index 0c1c4cd3..c48e99ae 100644
--- a/components.d.ts
+++ b/components.d.ts
@@ -7,12 +7,10 @@ export {}
 
 declare module 'vue' {
   export interface GlobalComponents {
-    IClarityContractLine: typeof import('~icons/clarity/contract-line')['default']
     IFluentFoodApple20Filled: typeof import('~icons/fluent/food-apple20-filled')['default']
     IIcRoundQueryStats: typeof import('~icons/ic/round-query-stats')['default']
     IIonEllipsisVertical: typeof import('~icons/ion/ellipsis-vertical')['default']
     IMaterialSymbolsBrightnessAlertOutlineRounded: typeof import('~icons/material-symbols/brightness-alert-outline-rounded')['default']
-    IMaterialSymbolsHomeWorkOutline: typeof import('~icons/material-symbols/home-work-outline')['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']
@@ -22,10 +20,7 @@ declare module 'vue' {
     IMdiChevronRight: typeof import('~icons/mdi/chevron-right')['default']
     IMdiClose: typeof import('~icons/mdi/close')['default']
     IMdiEdit: typeof import('~icons/mdi/edit')['default']
-    IMdiEllipsis: typeof import('~icons/mdi/ellipsis')['default']
-    IMdiEllipsisV: typeof import('~icons/mdi/ellipsis-v')['default']
     IMdiEllipsisVertical: typeof import('~icons/mdi/ellipsis-vertical')['default']
-    IMdiEllipsys: typeof import('~icons/mdi/ellipsys')['default']
     IMdiExport: typeof import('~icons/mdi/export')['default']
     IMdiFile: typeof import('~icons/mdi/file')['default']
     IMdiFilter: typeof import('~icons/mdi/filter')['default']
@@ -41,5 +36,6 @@ declare module 'vue' {
     IMdiStarOutline: typeof import('~icons/mdi/star-outline')['default']
     IMdiSync: typeof import('~icons/mdi/sync')['default']
     IMdiTrash: typeof import('~icons/mdi/trash')['default']
+    IMdiWallet: typeof import('~icons/mdi/wallet')['default']
   }
 }
diff --git a/package-lock.json b/package-lock.json
index 064e77e1..c5f4ef72 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -31,6 +31,7 @@
                 "@iconify-json/material-symbols": "^1.1.57",
                 "@iconify-json/mdi": "^1.1.54",
                 "@inertiajs/vue3": "^1.0.11",
+                "@mertasan/tailwindcss-variables": "^2.7.0",
                 "@tailwindcss/typography": "^0.5.9",
                 "@vitejs/plugin-vue": "^4.3.1",
                 "@vue/server-renderer": "^3.3.4",
@@ -3793,6 +3794,22 @@
             "resolved": "https://registry.npmjs.org/@kurkle/color/-/color-0.3.1.tgz",
             "integrity": "sha512-hW0GwZj06z/ZFUW2Espl7toVDjghJN+EKqyXzPSV8NV89d5BYp5rRMBJoc+aUN0x5OXDMeRQHazejr2Xmqj2tw=="
         },
+        "node_modules/@mertasan/tailwindcss-variables": {
+            "version": "2.7.0",
+            "resolved": "https://registry.npmjs.org/@mertasan/tailwindcss-variables/-/tailwindcss-variables-2.7.0.tgz",
+            "integrity": "sha512-rKPhxi/0r6XWP0+OjPmsfrloX/TtQmvONj2Pr3Nl8BNBznQVP3M9sphguDBUDC0AiKYx2xgup3XzAhlIDLPLIA==",
+            "dev": true,
+            "dependencies": {
+                "lodash": "^4.17.21"
+            },
+            "engines": {
+                "node": ">=12.13.0"
+            },
+            "peerDependencies": {
+                "autoprefixer": "^10.0.2",
+                "postcss": "^8.0.9"
+            }
+        },
         "node_modules/@nicolo-ribaudo/semver-v6": {
             "version": "6.3.3",
             "resolved": "https://registry.npmjs.org/@nicolo-ribaudo/semver-v6/-/semver-v6-6.3.3.tgz",
@@ -18310,6 +18327,15 @@
             "resolved": "https://registry.npmjs.org/@kurkle/color/-/color-0.3.1.tgz",
             "integrity": "sha512-hW0GwZj06z/ZFUW2Espl7toVDjghJN+EKqyXzPSV8NV89d5BYp5rRMBJoc+aUN0x5OXDMeRQHazejr2Xmqj2tw=="
         },
+        "@mertasan/tailwindcss-variables": {
+            "version": "2.7.0",
+            "resolved": "https://registry.npmjs.org/@mertasan/tailwindcss-variables/-/tailwindcss-variables-2.7.0.tgz",
+            "integrity": "sha512-rKPhxi/0r6XWP0+OjPmsfrloX/TtQmvONj2Pr3Nl8BNBznQVP3M9sphguDBUDC0AiKYx2xgup3XzAhlIDLPLIA==",
+            "dev": true,
+            "requires": {
+                "lodash": "^4.17.21"
+            }
+        },
         "@nicolo-ribaudo/semver-v6": {
             "version": "6.3.3",
             "resolved": "https://registry.npmjs.org/@nicolo-ribaudo/semver-v6/-/semver-v6-6.3.3.tgz",
diff --git a/package.json b/package.json
index e74f145e..6c01b147 100644
--- a/package.json
+++ b/package.json
@@ -35,6 +35,7 @@
         "@iconify-json/material-symbols": "^1.1.57",
         "@iconify-json/mdi": "^1.1.54",
         "@inertiajs/vue3": "^1.0.11",
+        "@mertasan/tailwindcss-variables": "^2.7.0",
         "@tailwindcss/typography": "^0.5.9",
         "@vitejs/plugin-vue": "^4.3.1",
         "@vue/server-renderer": "^3.3.4",
diff --git a/resources/js/Components/atoms/LogerButtonCircle.vue b/resources/js/Components/atoms/LogerButtonCircle.vue
index 25795dba..d3fcb6a0 100644
--- a/resources/js/Components/atoms/LogerButtonCircle.vue
+++ b/resources/js/Components/atoms/LogerButtonCircle.vue
@@ -1,13 +1,15 @@
+<script setup lang="ts">
+    import LogerButtonTab from './LogerButtonTab.vue';
+</script>
+
+
 <template>
 <LogerButtonTab
     rounded
     type="button"
-    class="relative text-body-1/80 bg-base-lvl-1 hover:bg-primary/10 transition border-base-lvl-1 hover:border-primary rounded-full"
+    class="relative transition bg-transparent rounded-full text-body-1/80 hover:bg-primary/10 border-base-lvl-1 hover:border-primary"
 >
     <slot />
 </LogerButtonTab>
 </template>
 
-<script setup>
-import LogerButtonTab from './LogerButtonTab.vue';
-</script>
diff --git a/resources/js/Components/molecules/SectionNav.vue b/resources/js/Components/molecules/SectionNav.vue
index 056d5c4a..9366aad1 100644
--- a/resources/js/Components/molecules/SectionNav.vue
+++ b/resources/js/Components/molecules/SectionNav.vue
@@ -8,6 +8,7 @@ import { NDropdown } from 'naive-ui';
 
 interface NavSection {
     url?: string;
+    action?: string;
     value: string;
     label: string;
 }
@@ -17,7 +18,7 @@ const props = defineProps<{
     modelValue?: string;
 }>();
 
-const emit = defineEmits(['update:modelValue']);
+const emit = defineEmits(['update:modelValue', 'action']);
 
 const currentPath = computed(() => {
     return document?.location?.pathname
@@ -32,6 +33,8 @@ const isSelected = (section: NavSection) => {
 const handleClick = (section: NavSection) => {
     if (section?.url) {
         router.visit(section.url)
+    } else if (section?.action) {
+        emit('action', section.action)
     } else {
         emit('update:modelValue', section?.value)
     }
diff --git a/resources/js/Components/organisms/LogerApiSimpleSelect.vue b/resources/js/Components/organisms/LogerApiSimpleSelect.vue
index e727aaed..274d948d 100644
--- a/resources/js/Components/organisms/LogerApiSimpleSelect.vue
+++ b/resources/js/Components/organisms/LogerApiSimpleSelect.vue
@@ -1,31 +1,54 @@
 
 <script setup lang="ts">
-import { NSelect } from "naive-ui";
-import { ref, onMounted } from "vue";
-import { debounce } from "lodash";
+import { NIcon, NSelect, NTooltip, SelectGroupOption } from "naive-ui";
+import { ref, onMounted, watch, computed } from "vue";
+import { debounce, uniqBy } from "lodash";
 import { RenderLabel } from "naive-ui/es/_internal/select-menu/src/interface";
-import { watch } from "vue";
-import { computed } from "vue";
+import axios from "axios";
+import { h } from "vue";
+import { VNode } from "vue";
+import { VNodeChild } from "vue";
 
 const props = withDefaults(defineProps<{
-    modelValue: string | null;
+    modelValue: string | number | null;
     endpoint: string;
     placeholder?: string;
     allowCreate?: boolean;
     customLabel: string;
     renderLabel?: RenderLabel;
+    renderOption: (info: { node: VNode, option: SelectOption | SelectGroupOption, selected: boolean }) => VNodeChild;
     trackId: string;
     label: string;
 }>(), {
     customLabel: "label",
+    renderLabel: (option: SelectOption, isSelected) => {
+        if (option.value?.includes?.('new::') && !isSelected) {
+            return [h(
+                'strong',
+                {
+                class: 'font-bold text-secondary'
+                },
+                'Create: '
+            ),
+            option.label as string
+            ]
+        }
+        return option.label
+    },
+    renderOption: ({ node, option, selected }: any) =>
+        h(NTooltip, null, {
+          trigger: () => node,
+          default: () => option.label
+    }),
 })
 
 const emit = defineEmits(['update:modelValue', 'update:label', 'update:value'])
-
-const options = ref<{
+interface SelectOption {
     label: string;
     value: string;
-}[]>([]);
+}
+
+const options = ref<SelectOption[]>([]);
 const isLoading = ref(false);
 
 
@@ -43,11 +66,19 @@ const selectedText = computed(() => {
     return optionParser(selected .value ?? props.modelValue)
 })
 
+const getOptionFromLabel = (option: string): SelectOption  => {
+    return {
+        label: option,
+        value: `new::${option}`
+    }
+}
+
 const resultParser = (apiOptions: Record<string, string>[], query: string = "") => {
     let includeCustom = true;
+    const queryTag = query.toLowerCase();
     const originalMap = apiOptions.map(option => {
         const optionLabel = props.customLabel ? option[props.customLabel] : option.label;
-        if (includeCustom && query && optionLabel.toLowerCase().includes(query)) includeCustom = false;
+        if (includeCustom && query && optionLabel.toLowerCase().includes(queryTag)) includeCustom = false;
 
         return {
             label: optionLabel,
@@ -55,40 +86,61 @@ const resultParser = (apiOptions: Record<string, string>[], query: string = "")
         }
     })
 
-    const custom = includeCustom ? [
-        {
-            label: query,
-            value: `new::${query}`
-        }
-    ]: [];
+    const custom = includeCustom ? [getOptionFromLabel(query)]: [];
 
     return [...custom, ...originalMap]
 }
 
 const handleSearch = debounce((query) => {
     if (!query.length) {
-        options.value = []
+        setOptions([])
         return;
     }
+
     isLoading.value = true
-    window.axios.get(`${props.endpoint}?search=${query}`).then(({ data }) => {
-        options.value = resultParser(data?.data || data, query.toLowerCase());
-        isLoading.value = false
-    })
+
+    axios.get(`${props.endpoint}?search=${query}`)
+        .then(({ data }) => {
+            setOptions(resultParser(data?.data || data, query));
+            isLoading.value = false
+        })
 }, 200)
 
-const emitInput = (optionId: string, option?: Record<string, string>) => {
-    const optionData = option ?? options.value.find(option => option.value == optionId)
+
+const emitInput = (optionId: string | number, option?: Record<string, string>) => {
+    let optionData = option ?? options.value.find(option => option.value == optionId)
+    if (optionData && optionId && typeof optionId == 'string') {
+        optionData = getOptionFromLabel(optionId);
+    }
     selected.value = optionData;
+
+
     emit('update:modelValue', optionId)
     emit('update:value', optionData)
     emit('update:label', optionData?.label)
 }
 
-const fetchInitialValue = (id: string) => {
-    window.axios.get(`${props.endpoint}/${id}`).then(({ data }) => {
-        options.value = resultParser([data?.data || data])
-        .filter( value => value.label);
+const hasNew = (option: SelectOption) => option.value?.includes?.("new::")
+const setOptions = (newOptions: SelectOption[]) => {
+    let currentOptions = options.value.filter(hasNew)
+    if (newOptions.some(hasNew) && options.value.some(hasNew)) {
+        currentOptions = currentOptions.filter((option) => !hasNew(option))
+    }
+    options.value = uniqBy([
+        ...currentOptions,
+        ...newOptions,
+    ], 'value');
+
+}
+
+const fetchInitialValue = (id: string | number) => {
+    if (options.value.find(option => option.value == id)) {
+        return
+    }
+    axios.get(`${props.endpoint}/${id}`).then(({ data }) => {
+        setOptions(resultParser([data?.data || data])
+        .filter( value => value.label));
+
 
         emitInput(id, Array.isArray(data) ? null : data)
         isLoading.value = false
@@ -114,12 +166,14 @@ onMounted(() => {
     filterable
     clearable
     remote
+    :tag="allowCreate"
     size="large"
     :placeholder="placeholder"
     :options="options"
     :loading="isLoading"
     v-bind="$attrs"
     :render-label="renderLabel"
+    :render-option="renderOption"
     :clear-filter-after-select="false"
     @update:value="emitInput"
     @search="handleSearch"
@@ -127,5 +181,11 @@ onMounted(() => {
     <template #action>
       <slot name="action" />
     </template>
+    <template #arrow>
+      <slot name="arrow" />
+    </template>
+    <template #empty>
+      <slot name="empty" />
+    </template>
 </NSelect>
 </template>
diff --git a/resources/js/Components/organisms/WelcomeCard.vue b/resources/js/Components/organisms/WelcomeCard.vue
index 6f053258..7210bd27 100644
--- a/resources/js/Components/organisms/WelcomeCard.vue
+++ b/resources/js/Components/organisms/WelcomeCard.vue
@@ -12,18 +12,22 @@ const cardShadow = inject("cardShadow", '')
 </script>
 
 <template>
-  <div
+  <section
     class="px-5 py-3 transition border divide-y rounded-lg divide-base border-base bg-base-lvl-3"
     :class="[cardShadow]"
   >
-    <div class="items-center pb-2 md:justify-between md:flex">
-      <h1 class="font-bold text-body">
-        {{ message }} <span class="text-primary">{{ username }}</span>
-      </h1>
+    <header class="items-center pb-2 md:justify-between md:flex">
+        <section class="flex items-center">
+            <slot name="before" />
+
+            <h1 class="font-bold text-body">
+              {{ message }} <span class="text-primary">{{ username }}</span>
+            </h1>
+        </section>
       <div class="space-x-2">
         <slot name="action" />
       </div>
-    </div>
+    </header>
     <slot></slot>
-  </div>
+  </section>
 </template>
diff --git a/resources/js/Components/organisms/logerAssistant.vue b/resources/js/Components/organisms/logerAssistant.vue
new file mode 100644
index 00000000..029ef141
--- /dev/null
+++ b/resources/js/Components/organisms/logerAssistant.vue
@@ -0,0 +1,62 @@
+<script setup lang="ts">
+    import { watch, ref } from 'vue'
+    import { useSpeechRecognition } from '@vueuse/core'
+    import { useSpeechSynthesis } from '@vueuse/core'
+import LogerButtonTab from '../atoms/LogerButtonTab.vue';
+
+    const {
+    isListening,
+    result,
+    start,
+    stop,
+    } = useSpeechRecognition()
+
+const theMessage = ref("")
+const {
+  isSupported,
+  isPlaying,
+  status,
+  voiceInfo: speakerVoiceInfo,
+  utterance,
+  error,
+  stop: stopSpeaker,
+  toggle,
+  speak,
+} = useSpeechSynthesis(theMessage)
+
+const toggleListen = () => {
+    if (isListening.value) {
+        stop()
+        return
+    }
+    start();
+}
+
+function play() {
+  if (status.value === 'pause') {
+    console.log('resume')
+    window.speechSynthesis.resume()
+  }
+  else {
+    speak()
+    stop()
+  }
+}
+
+watch(result,  () => {
+    if(result.value.includes('balance')) {
+        theMessage.value = `This is your balance ${pageProps.balance}`;
+        play()
+    }
+})
+
+</script>
+
+<template>
+    <LogerButtonTab @click="toggleListen()">
+        {{ isListening ? 'stop' : 'Press and talk' }}
+     </LogerButtonTab>
+</template>
+
+
+
diff --git a/resources/js/Components/templates/AppLayout.vue b/resources/js/Components/templates/AppLayout.vue
index 503bcd04..8c41447f 100644
--- a/resources/js/Components/templates/AppLayout.vue
+++ b/resources/js/Components/templates/AppLayout.vue
@@ -1,6 +1,5 @@
 <script setup lang="ts">
     import { provide, ref, computed, onMounted } from 'vue'
-    import { NConfigProvider } from 'naive-ui'
     import { router } from '@inertiajs/vue3'
     import { AtSide, AtTeamSelect } from "atmosphere-ui"
     import { useLocalStorage } from "@vueuse/core"
@@ -24,6 +23,11 @@
     import { useSelect } from '@/utils/useSelects'
     import { useTransactionModal } from '@/domains/transactions'
     import { useOnMessage } from '@/composables/useFirebase'
+    import AppProvider from './AppProvider.vue'
+    import { useSpeechRecognition } from '@vueuse/core'
+    import { useSpeechSynthesis } from '@vueuse/core'
+    import { watch } from 'vue'
+    // import LogerAssistant from '../organisms/logerAssistant.vue'
 
     const props = defineProps({
         title: {
@@ -113,11 +117,10 @@
             console.log(payload, "Mi mensaje favorito")
         })
     })
-
 </script>
 
 <template>
-    <NConfigProvider>
+    <AppProvider>
         <AppShell :is-expanded="isExpanded" :nav-class="[!$slots.header && `${panelShadow} border-b`]">
             <template #navigation>
                 <!-- Primary Navigation Menu -->
@@ -143,7 +146,7 @@
                                 :notifications="$page.props.unreadNotifications"
                                 @click="router.visit('/notifications')"
                              />
-
+                             <!-- <LogerAssistant /> -->
                              <AtTeamSelect
                                 v-if="$page.props.user.all_teams.length"
                                 :has-team-features="$page.props.jetstream.hasTeamFeatures"
@@ -237,7 +240,7 @@
             </template>
         </AppShell>
         <AppGlobals />
-    </NConfigProvider>
+    </AppProvider>
 </template>
 
 
diff --git a/resources/js/Components/templates/AppProvider.vue b/resources/js/Components/templates/AppProvider.vue
new file mode 100644
index 00000000..e7f778e3
--- /dev/null
+++ b/resources/js/Components/templates/AppProvider.vue
@@ -0,0 +1,43 @@
+<script setup lang="ts">
+    import { ref, computed } from "vue";
+    import { useCssVar } from '@vueuse/core';
+    import { GlobalThemeOverrides, NConfigProvider } from 'naive-ui'
+    import { theme } from "../../../../tailwindTheme/index.js";
+
+    const provider = ref()
+    console.log(theme);
+    const bgColor = useCssVar('--colors-primary', provider, { initialValue: "#f20"} )
+
+    const { primary } = theme.defaultLight;
+
+    const themeOverrides = computed<GlobalThemeOverrides>(() => {
+        return {
+            Select: {
+                common: {
+                    primaryColor: primary,
+                    actionColor: primary,
+
+                },
+                peers: {
+                    InternalSelection: {
+
+                    },
+                    InternalSelectMenu: {
+                    }
+                }
+            }
+            // ...
+        }
+    })
+
+
+</script>
+
+<template>
+    <NConfigProvider tag="div" ref="provider" :theme-overrides="themeOverrides">
+        <slot />
+    </NConfigProvider>
+</template>
+
+
+
diff --git a/resources/js/Components/templates/ProfileSectionNav.vue b/resources/js/Components/templates/ProfileSectionNav.vue
index 8d2fc73d..2ba40f53 100644
--- a/resources/js/Components/templates/ProfileSectionNav.vue
+++ b/resources/js/Components/templates/ProfileSectionNav.vue
@@ -9,6 +9,7 @@ const props = defineProps<{
 }>();
 
 
+
 const sections = computed(() => {
     return [
         ...(props.logerProfile?.map((profile: Record<string, string>) => ({
@@ -21,7 +22,7 @@ const sections = computed(() => {
             icon: 'plus',
             name: 'add',
             label: 'Add',
-            url: '/trends'
+            action: 'add'
         }
     ]
 })
@@ -29,7 +30,7 @@ const sections = computed(() => {
 
 
 <template>
-<SectionNav :sections="sections">
+<SectionNav :sections="sections" @action="$emit('action', $event)">
     <template #actions>
         <slot name="actions" />
     </template>
diff --git a/resources/js/Components/widgets/ChartComparison.vue b/resources/js/Components/widgets/ChartComparison.vue
index 83748c0a..998748ea 100644
--- a/resources/js/Components/widgets/ChartComparison.vue
+++ b/resources/js/Components/widgets/ChartComparison.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { computed, reactive, ref, inject } from "vue";
+import { computed, ref, inject } from "vue";
 
 
 import LogerChart from "@/Components/organisms/LogerChart.vue";
@@ -8,6 +8,7 @@ import LogerButtonTab from "@/Components/atoms/LogerButtonTab.vue";
 
 import { formatMonth } from "@/utils";
 import formatMoney from "@/utils/formatMoney";
+import WidgetTitleCard from "../molecules/WidgetTitleCard.vue";
 
 const props = defineProps({
     title: {
@@ -69,45 +70,45 @@ const state = computed(() => {
 </script>
 
 <template>
-  <div class="w-full comparison-card">
-    <div class="px-5 pb-10 rounded-lg">
-      <h5 class="p-4 font-bold text-left card-title">
-        <LogerButtonTab v-if="selectedDate" @click="selectedDate=null">
-            <i class="fa fa-arrow-left"></i>
-        </LogerButtonTab>
-        {{ title }}
-        <span v-if="selectedDate" class="capitalize text-primary">{{ formatMonth(selectedDate) }}</span>
-      </h5>
-      <div class="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">
-          <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"
-        />
-      </div>
-    </div>
-  </div>
+    <WidgetTitleCard  :title="title" :action="action" @action="$emit('action', $event)">
+        <template #before v-if="selectedDate">
+            <LogerButtonTab  @click="selectedDate=null">
+                <i class="fa fa-arrow-left"></i>
+            </LogerButtonTab>
+        </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']"
+                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">
+            <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"
+            />
+        </section>
+    </WidgetTitleCard>
 </template>
 
 
diff --git a/resources/js/Pages/Dashboard.vue b/resources/js/Pages/Dashboard.vue
index 55a5fee5..43596a4a 100644
--- a/resources/js/Pages/Dashboard.vue
+++ b/resources/js/Pages/Dashboard.vue
@@ -15,10 +15,7 @@
     import OccurrenceCard from '@/Components/Modules/occurrence/OccurrenceCard.vue';
 
     import { useAppContextStore } from '@/store';
-    import { ITransaction } from '@/domains/transactions/models';
     import { router } from '@inertiajs/vue3';
-import BudgetWidget from './BudgetWidget.vue';
-import NetWorthWidget from './NetWorthWidget.vue';
 
     defineProps({
         revenue: {
@@ -147,9 +144,14 @@ import NetWorthWidget from './NetWorthWidget.vue';
                     <ChartComparison
                         class="w-full mt-4 mb-10 overflow-hidden bg-white rounded-lg"
                         :class="[cardShadow]"
-                        :title="t('Spending summary')"
+                        :title="$t('Spending summary')"
                         ref="ComparisonRevenue"
                         :data="revenue"
+                        :action="{
+                            label: 'Go to Trends',
+                            iconClass: 'fa fa-chevron-right',
+                        }"
+                        @action="router.visit('/trends/income-expenses-graph')"
                     />
                 </section>
 
diff --git a/resources/js/Pages/Finance/Transactions.vue b/resources/js/Pages/Finance/Transactions.vue
index 0759a4e2..d2984dbc 100644
--- a/resources/js/Pages/Finance/Transactions.vue
+++ b/resources/js/Pages/Finance/Transactions.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { computed, toRefs, reactive, provide, ref } from "vue";
+import { computed, toRefs, reactive, provide, ref, watch } from "vue";
 import { router } from "@inertiajs/vue3";
 import { format } from "date-fns";
 import axios from "axios";
@@ -91,13 +91,13 @@ const fetchTransactions = (params = location.toString()) => {
 }
 
 const selectedAccountId = computed(() => {
-  return serverSearchOptions.value?.filters?.account_id;
+  return pageState?.filters?.account_id;
 });
 
 provide("selectedAccountId", selectedAccountId.value);
 
 const isDraft = computed(() => {
-  return serverSearchOptions.value?.filters?.status == "draft";
+  return pageState?.filters?.status == "draft";
 });
 
 const removeTransaction = (transaction: ITransaction) => {
@@ -140,7 +140,13 @@ const transactionStatus = {
     value: "/finance/transactions?filter[status]=draft&relationships=linked",
   },
 };
-const currentStatus = ref(serverSearchOptions.value?.filters?.status || "verified");
+const currentStatus = ref(pageState?.filters?.status || "verified");
+
+watch(() => pageState?.filters, (filters) => {
+    if (filters.status) {
+        currentStatus.value = filters.status;
+    }
+}, { immediate: true })
 
 const monthName = computed(() => format(pageState.dates.startDate, "MMMM"))
 
diff --git a/resources/js/Pages/LogerProfile/Index.vue b/resources/js/Pages/LogerProfile/Index.vue
index 42483616..c78ee90d 100644
--- a/resources/js/Pages/LogerProfile/Index.vue
+++ b/resources/js/Pages/LogerProfile/Index.vue
@@ -29,11 +29,11 @@ const onSaved = () => {
 <template>
     <AppLayout title="Home Projects">
         <template #header>
-            <ProfileSectionNav :loger-profile="profiles" />
+            <ProfileSectionNav :loger-profile="profiles" @action="isModalOpen = true" />
         </template>
 
         <LogerProfileTemplate title="Loger Profiles"  ref="profileTemplateRef">
-            <WelcomeCard class="mt-5" message="Loger profiles">
+            <WelcomeCard  message="Loger profiles">
                 <section class="flex flex-col items-center pb-12 mx-auto">
                     <img src="./empty-box.svg" class="opacity-50" />
                     <h4 class="text-lg font-bold text-body-1"> There are not profiles created</h4>
diff --git a/resources/js/Pages/LogerProfile/ProfileView.vue b/resources/js/Pages/LogerProfile/ProfileView.vue
index 42e04c5f..e3ded257 100644
--- a/resources/js/Pages/LogerProfile/ProfileView.vue
+++ b/resources/js/Pages/LogerProfile/ProfileView.vue
@@ -19,6 +19,7 @@ import BudgetDetailForm from '@/domains/budget/components/BudgetDetailForm.vue';
 import { IOccurrenceCheck } from '@/Components/Modules/occurrence/models';
 import { ITransaction } from '@/domains/transactions/models';
 import { transactionDBToTransaction } from '@/domains/transactions';
+import axios from 'axios';
 
 
 const { entities } = defineProps<{
@@ -38,10 +39,6 @@ const onSaved = () => {
 const isProfileEntityModalOpen = ref(false);
 const profileEntity = ref({});
 
-const onProfileSaved = () => {
-    router.reload()
-}
-
 const areEntitiesLoading = ref(true)
 function fetchProfileEntities() {
     router.reload({
@@ -52,7 +49,19 @@ function fetchProfileEntities() {
     })
 }
 
-onMounted(() => {
+const transactions = ref<ITransaction[]>([]);
+const isLoading = ref(false);
+const fetchTransactions = (params = location.toString()) => {
+    return axios.get(`${location.pathname}/transactions`).then(({ data }: { data : {
+        data: ITransaction[]
+    }}) => {
+        transactions.value = data.data;
+        isLoading.value = false
+    })
+}
+
+onMounted(async () => {
+    fetchTransactions()
     fetchProfileEntities()
 })
 
@@ -64,14 +73,7 @@ const occurrenceChecks = computed(() => {
         return checks;
     }, []);
 })
-const transactions = computed(() => {
-    return entities.reduce((checks: ITransaction[], entity: any) => {
-        if (entity.entity?.transactions && entity.entity) {
-            checks.push(...entity.entity.transactions);
-        }
-        return checks;
-    }, []);
-})
+
 const budgets = computed(() => {
     return entities.reduce((checks: any, entity: any) => {
         if (entity.entity?.budget) {
@@ -83,6 +85,7 @@ const budgets = computed(() => {
         return checks;
     }, []);
 })
+
 </script>
 
 
@@ -143,7 +146,7 @@ const budgets = computed(() => {
                 <section v-else class="w-full">
                     <OccurrenceCard :checks="occurrenceChecks" class="mx-auto mt-4" />
                     <BudgetDetailForm
-                     v-for="budget in budgets"
+                        v-for="budget in budgets"
                         class="mt-5"
                         full
                         :category="budget.category"
@@ -169,4 +172,3 @@ const budgets = computed(() => {
         </LogerProfileTemplate>
     </AppLayout>
 </template>
-@/domains/transactions/models/transactions
diff --git a/resources/js/Pages/Trends/Overview.vue b/resources/js/Pages/Trends/Overview.vue
index 6cb9173d..f3520569 100644
--- a/resources/js/Pages/Trends/Overview.vue
+++ b/resources/js/Pages/Trends/Overview.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { computed, toRefs } from "vue";
+import { computed, toRefs, ref, onMounted } from "vue";
 import { Link, router } from "@inertiajs/vue3";
 // @ts-ignore
 import { AtDatePager } from "atmosphere-ui";
@@ -14,10 +14,11 @@ import ChartComparison from "@/Components/widgets/ChartComparison.vue";
 import WidgetTitleCard from "@/Components/molecules/WidgetTitleCard.vue";
 import Collapse from "@/Components/molecules/Collapse.vue";
 
-import YearSummary from "@/domains/transactions/components/YearSummary.vue";
 import ExpenseChartWidget from "@/domains/transactions/components/ExpenseChartWidget.vue";
 
 import { useServerSearch } from "@/composables/useServerSearch";
+import { ITransaction } from "@/domains/transactions/models";
+import axios from "axios";
 
 const props = defineProps({
   user: {
@@ -56,41 +57,49 @@ const handleSelection = (index: number) => {
 
 const trends = [
     {
-        name: 'Spending',
-        link: '/trends'
+        label: 'Spending',
+        url: '/trends'
     },
     {
-        name: 'Net Worth',
-        link: '/trends/net-worth'
+        label: 'Net Worth',
+        url: '/trends/net-worth'
     },
     {
-        name: 'Income v Expenses',
-        link: '/trends/income-expenses'
+        label: 'Income v Expenses',
+        url: '/trends/income-expenses'
     },
     {
-        name: 'Income vs Expenses Graph',
-        link: '/trends/income-expenses-graph'
+        label: 'Income vs Expenses Graph',
+        url: '/trends/income-expenses-graph'
     },
     {
-        name: 'Year summary',
-        link: '/trends/year-summary'
+        label: 'Year spending',
+        url: '/trends/spending-year'
     }
 ]
 
-
 const components = {
     groups: ExpenseChartWidget,
     categories: ExpenseChartWidget,
     netWorth: ChartNetWorth,
     incomeExpenses: IncomeExpenses,
-    incomeExpensesGraph:  ChartComparison,
-    yearSummary: YearSummary
+    incomeExpensesGraph:  ChartNetWorth,
+    spendingYear: ChartComparison
 }
 
 const trendComponent = computed(() => {
     return components[props.metaData.name] || ExpenseChartWidget
 })
 
+const isCategoryTrend = computed(() => {
+    return ['group', 'categories', 'payees'].includes(props.metaData.name)
+})
+
+
+const isYearSpending = computed(() => {
+    return ['spendingYear'].includes(props.metaData.name)
+})
+
 const cashflowEntities = {
     groups: {
         label: 'Groups',
@@ -105,7 +114,7 @@ const cashflowEntities = {
         value: '/trends/payees'
     }
 }
-const isFilterSelected = (filterValue) => {
+const isFilterSelected = (filterValue: string) => {
     const currentStatus = location.pathname;
     return currentStatus.includes(filterValue);
 }
@@ -114,7 +123,7 @@ const isFilterSelected = (filterValue) => {
 <template>
   <AppLayout :title="metaData.title">
     <template #header>
-      <TrendSectionNav>
+      <TrendSectionNav :sections="trends">
         <template #actions>
             <AtDatePager
                 class="w-full h-12 border-none bg-base-lvl-1 text-body"
@@ -129,7 +138,24 @@ const isFilterSelected = (filterValue) => {
     </template>
 
     <TrendTemplate title="Finance" ref="financeTemplateRef">
+
+        <component
+            class="mt-5"
+            v-if="isYearSpending"
+            :is="trendComponent"
+            style="background: white; width: 100%"
+            :type="section"
+            :series="data"
+            :data="data"
+            @selected="handleSelection"
+            v-bind="metaData.props"
+            :title="metaData.title"
+            label="name"
+            value="total"
+            :legend="false"
+        />
         <WidgetTitleCard
+            v-else
             :title="metaData.title"
             class="mt-5"
         >
@@ -148,7 +174,7 @@ const isFilterSelected = (filterValue) => {
                 :legend="false"
             />
         </section>
-        <template #afterActions>
+        <template #afterActions v-if="isCategoryTrend">
             <div class="flex overflow-hidden text-white border rounded-md bg-primary border-primary min-w-max">
                 <button
                     v-for="(item, statusName) in cashflowEntities"
@@ -170,8 +196,13 @@ const isFilterSelected = (filterValue) => {
             >
                 <template #content>
                     <div class="divide-y divide-base-lvl-2 bg-base-lvl-3">
-                        <Link :href="trend.link" v-for="trend in trends" :key="trend.name" class="block px-2 py-4 cursor-pointer hover:bg-base-lvl-2">
-                            {{ trend.name }}
+                        <Link
+                            :href="trend.url"
+                            v-for="trend in trends"
+                            :key="trend.label"
+                            class="block px-2 py-4 cursor-pointer hover:bg-base-lvl-2"
+                        >
+                            {{ trend.label }}
                         </Link>
                     </div>
                 </template>
diff --git a/resources/js/Pages/Trends/Partials/TrendSectionNav.vue b/resources/js/Pages/Trends/Partials/TrendSectionNav.vue
index fed8c62b..930ed800 100644
--- a/resources/js/Pages/Trends/Partials/TrendSectionNav.vue
+++ b/resources/js/Pages/Trends/Partials/TrendSectionNav.vue
@@ -1,15 +1,13 @@
 <script setup lang="ts">
 import SectionNav from "@/Components/molecules/SectionNav.vue";
-import { getSectionMenu, MODULES } from "@/domains/app";
-import { computed } from "vue";
 
-const menu = computed(() => {
-    return getSectionMenu(MODULES.TRENDS)
-})
+defineProps<{
+    sections?: any[]
+}>();
 </script>
 
 <template>
-<SectionNav :sections="menu">
+<SectionNav :sections="sections">
     <template #actions>
         <slot name="actions" />
     </template>
diff --git a/resources/js/composables/useServerSearch.ts b/resources/js/composables/useServerSearch.ts
index d43729e7..38f24917 100644
--- a/resources/js/composables/useServerSearch.ts
+++ b/resources/js/composables/useServerSearch.ts
@@ -163,18 +163,18 @@ export const searchFromSearchString = (searchString: string) => {
 const setSearchState = (serverSearchData: Record<string, any>, dates: any) => {
     return {
         filters: {
-            ...(serverSearchData.value ? serverSearchData.value?.filters : {}),
+            ...(serverSearchData ? serverSearchData?.filters : {}),
             date: null
         },
         dates:{
             startDate: dates.startDate,
             endDate: dates.endDate,
         },
-        sorts:serverSearchData.value?.sorts ?? "",
-        limit: serverSearchData.value?.limit ?? 0,
-        relationships: serverSearchData.value?.relationships ?? "",
-        search: serverSearchData.value?.search,
-        page: serverSearchData.value?.page
+        sorts:serverSearchData?.sorts ?? "",
+        limit: serverSearchData?.limit ?? 0,
+        relationships: serverSearchData?.relationships ?? "",
+        search: serverSearchData?.search,
+        page: serverSearchData?.page
     }
 }
 export const useServerSearch = (
@@ -187,6 +187,7 @@ export const useServerSearch = (
     const dates = parseDateFilters(serverSearchData, options.defaultDates)
     const isLoaded = ref(false)
     const state = reactive<ISearchState>(setSearchState(serverSearchData.value, dates));
+    console.log({ state, serverSearchData })
     const localRouter = inject(
         "router",
         // eslint-disable-next-line no-empty-pattern
@@ -239,16 +240,8 @@ export const useServerSearch = (
   };
 
 
-  const setUrl = (urlParams: string) => {
-    window.history.pushState(
-        {},
-        null,
-        `${location.pathname}?${urlParams}`
-      );
-  }
-
   watch(() => state,
-    debounce((paramsConfig) => {
+    debounce(() => {
        executeSearch();
     }, 200),
     { deep: true }
diff --git a/resources/js/domains/app/index.ts b/resources/js/domains/app/index.ts
index ee8dee07..f5a652a5 100644
--- a/resources/js/domains/app/index.ts
+++ b/resources/js/domains/app/index.ts
@@ -29,7 +29,7 @@ export const useAppMenu = t => {
             to: '/finance',
             as: Link,
             isActiveFunction(url, currentPath) {
-               return /finance|budgets|trends/.test(currentPath)
+               return /finance|budgets/.test(currentPath)
             }
         },
         {
diff --git a/resources/js/domains/budget/components/BudgetTracker.vue b/resources/js/domains/budget/components/BudgetTracker.vue
index 59abd1e5..63097430 100644
--- a/resources/js/domains/budget/components/BudgetTracker.vue
+++ b/resources/js/domains/budget/components/BudgetTracker.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { AtButton } from "atmosphere-ui";
-import { computed, ref } from "vue";
+import { computed } from "vue";
 import { useI18n } from "vue-i18n";
 import { router } from "@inertiajs/vue3";
 
@@ -8,7 +8,6 @@ import SectionTitle from "@/Components/atoms/SectionTitle.vue";
 import NumberHider from "@/Components/molecules/NumberHider.vue";
 
 import formatMoney from "@/utils/formatMoney";
-import { useTransactionModal } from "@/domains/transactions";
 
 const props = defineProps({
   username: {
@@ -27,9 +26,6 @@ const props = defineProps({
 });
 
 const { t } = useI18n();
-const { isOpen: isTransferModalOpen } = useTransactionModal();
-
-const openedTransaction = ref(null);
 
 const sections = computed(() => ({
   expenses: {
@@ -42,7 +38,7 @@ const sections = computed(() => ({
   },
 }));
 
-const isMultiple = (value) => {
+const isMultiple = (value: any) => {
   return Array.isArray(value);
 };
 </script>
diff --git a/resources/js/domains/meal/components/MealWidget.vue b/resources/js/domains/meal/components/MealWidget.vue
index f2792aa6..6228c0f2 100644
--- a/resources/js/domains/meal/components/MealWidget.vue
+++ b/resources/js/domains/meal/components/MealWidget.vue
@@ -6,10 +6,13 @@ import LogerButton from '@/Components/atoms/LogerButton.vue';
 defineProps<{
     meals: Record<string, any>[]
 }>()
+
+// @ts-ignore: expected in global
+const defaultShadow = window?.cardShadow ?? "";
 </script>
 
 <template>
-    <div  :class="cardShadow">
+    <div  :class="defaultShadow">
         <RandomMealCard class="mt-4 border-b rounded-b-none" />
         <div class="px-4 py-2 space-y-4 cursor-pointer rounded-b-md min-h-min bg-base-lvl-3">
             <div class="text-center">
diff --git a/resources/js/domains/transactions/components/TransactionItems.vue b/resources/js/domains/transactions/components/TransactionItems.vue
index 68ae7faa..2151e820 100644
--- a/resources/js/domains/transactions/components/TransactionItems.vue
+++ b/resources/js/domains/transactions/components/TransactionItems.vue
@@ -143,7 +143,7 @@ const isPickerOpen = ref(false);
           <LogerApiSimpleSelect
             v-model="split.payee_id"
             v-model:label="split.payee_label"
-            tag
+            :allow-create="true"
             custom-label="name"
             track-id="id"
             placeholder="Add a payee"
@@ -198,7 +198,7 @@ const isPickerOpen = ref(false);
             <LogerInput v-model="split.concept" class="w-48 md:w-full" />
         </AtField>
         <div class="flex items-center justify-center">
-            <span class=" flex items-center  mt-10 h-10 min-w-fit px-4">
+            <span class="flex items-center h-10 px-4 mt-10  min-w-fit">
                 {{  split.history }}
             </span>
         </div>
diff --git a/resources/js/utils/constants.ts b/resources/js/utils/constants.ts
index d7ef1971..ce8f9ded 100644
--- a/resources/js/utils/constants.ts
+++ b/resources/js/utils/constants.ts
@@ -1,5 +1,5 @@
 export const PANEL_SIZES = {
-    small: 'md:w-3/12',
+    small: "md:w-5/12 lg:w-3/12",
     large: 'md:w-5/12'
 }
 
diff --git a/tailwind.config.js b/tailwind.config.js
index 4c104998..9114c89c 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -1,6 +1,6 @@
 /** @type {import('tailwindcss').Config} */
 const defaultTheme = require('tailwindcss/defaultTheme');
-const themes = require('./tailwindTheme/index');
+const themes = require('./tailwindTheme/index.cjs');
 
 module.exports = {
     content: [
@@ -34,5 +34,8 @@ module.exports = {
         },
     },
 
-    plugins: [require('@tailwindcss/typography')],
+    plugins: [
+        require('@tailwindcss/typography'),
+        require('@mertasan/tailwindcss-variables')
+    ],
 };
diff --git a/tailwindTheme/colors.js b/tailwindTheme/colors.js
index 5c99b3e4..de4800b0 100644
--- a/tailwindTheme/colors.js
+++ b/tailwindTheme/colors.js
@@ -11,9 +11,6 @@ module.exports = {
         '700': '#212b44',
         '800': '#1a2237',
         '900': '#161c2d'
-    },
-    dodgerblue: {
-
     },
     mauvelous: {
         DEFAULT: '#F37EA1',
diff --git a/tailwindTheme/index.cjs b/tailwindTheme/index.cjs
new file mode 100644
index 00000000..47cb0d23
--- /dev/null
+++ b/tailwindTheme/index.cjs
@@ -0,0 +1,74 @@
+const colors = require("tailwindcss/colors");
+const customColors = require('./colors');
+
+module.exports = {
+    defaultDark: {
+        primary: colors.pink[500],
+        "secondary": "#95b3f9",
+        "accent": "#7c5bbf",
+        "neutral": "#232130",
+        "base-deep-1": customColors.rhino[800],
+        base: customColors.rhino[900],
+        "base-lvl-1": customColors.rhino[800],
+        "base-lvl-2": customColors.rhino[700],
+        "base-lvl-3": customColors.rhino[600],
+        info: "#3D68F5",
+        success: "#79E7AE",
+        warning: "#D39E17",
+        error: "#F61909",
+        "body": "white",
+        "body-1": colors.slate[200]
+    },
+    defaultLight: {
+        primary: "#F37EA1",
+        primaryDark: customColors.mauvelous[800],
+        secondary: "#7B77D1",
+        "accent": "#f782c2",
+        "neutral": "#F3F4F6",
+        "base-deep-1": colors.slate[400],
+        base: "#F3F4F6",
+        "base-lvl-1": colors.slate[100],
+        "base-lvl-2": colors.slate[50],
+        "base-lvl-3": colors.white,
+        info: "#3D68F5",
+        success: "#00C875",
+        warning: "#D39E17",
+        error: "#F61909",
+        "body": colors.gray[900],
+        "body-1": colors.gray[700]
+    },
+    pinkLight: {
+        primary: "#d527b7", // "#3a4a73"
+        secondary: "#8a00d4",
+        "accent": "#f782c2",
+        "neutral": "#F3F4F6",
+        "base-deep-1": colors.slate[400],
+        base: "#F3F4F6",
+        "base-lvl-1": colors.slate[100],
+        "base-lvl-2": colors.slate[50],
+        "base-lvl-3": colors.white,
+        info: "#3D68F5",
+        success: "#00C875",
+        warning: "#D39E17",
+        error: "#F61909",
+        "body": colors.gray[900],
+        "body-1": colors.gray[700]
+    },
+    blueLight: {
+        primary: "#1f436e",
+        "secondary": "#162f4d",
+        "accent": "#a3cdff",
+        "neutral": "#d1e6ff",
+        "base-deep-1": colors.slate[400],
+        base: "#e3e3e3",
+        "base-lvl-1": colors.slate[100],
+        "base-lvl-2": colors.slate[50],
+        "base-lvl-3": colors.white,
+        info: "#3D68F5",
+        success: "#79E7AE",
+        warning: "#D39E17",
+        error: "#F61909",
+        "body": "#2E384D",
+        "body-1": "#9298AD"
+    }
+}
diff --git a/tailwindTheme/index.js b/tailwindTheme/index.js
index 47cb0d23..b2c81a3d 100644
--- a/tailwindTheme/index.js
+++ b/tailwindTheme/index.js
@@ -1,7 +1,35 @@
-const colors = require("tailwindcss/colors");
-const customColors = require('./colors');
+import colors from "tailwindcss/colors";
 
-module.exports = {
+const customColors   = {  'rhino': {
+    DEFAULT: '#2c395b',
+    '50': '#f4f5f7',
+    '100': '#eaebef',
+    '200': '#caced6',
+    '300': '#abb0bd',
+    '400': '#6b748c',
+    '500': '#2c395b',
+    '600': '#283352',
+    '700': '#212b44',
+    '800': '#1a2237',
+    '900': '#161c2d'
+},
+mauvelous: {
+    DEFAULT: '#F37EA1',
+    50: '#FFFFFF',
+    100: '#FFFFFF',
+    200: '#FDEEF3',
+    300: '#FAC9D7',
+    400: '#F6A3BC',
+    500: '#F37EA1',
+    600: '#EE4B7C',
+    700: '#E91756',
+    800: '#B81143',
+    900: '#840C30',
+    950: '#6B0A27'
+  },
+}
+
+export const theme = {
     defaultDark: {
         primary: colors.pink[500],
         "secondary": "#95b3f9",