diff --git a/app/Console/Commands/TestMessaging.php b/app/Console/Commands/TestMessaging.php
index 3a86ee4b..81fd9558 100644
--- a/app/Console/Commands/TestMessaging.php
+++ b/app/Console/Commands/TestMessaging.php
@@ -3,10 +3,8 @@
 namespace App\Console\Commands;
 
 use Exception;
-use App\Models\UserDevice;
 use Illuminate\Console\Command;
 use App\Events\BudgetCalculated;
-use App\Services\MessagingService;
 
 class TestMessaging extends Command
 {
diff --git a/app/Domains/Automation/Services/LogerAutomationService.php b/app/Domains/Automation/Services/LogerAutomationService.php
index 5b776e6c..84113e27 100644
--- a/app/Domains/Automation/Services/LogerAutomationService.php
+++ b/app/Domains/Automation/Services/LogerAutomationService.php
@@ -2,9 +2,11 @@
 
 namespace App\Domains\Automation\Services;
 
+use Google\Service\Gmail;
 use App\Domains\Integration\Actions\BHD;
 use App\Domains\Automation\Models\Automation;
 use App\Domains\Integration\Actions\BHDAlert;
+use App\Domains\Transaction\Services\BHDService;
 use App\Domains\Automation\Models\AutomationTask;
 use App\Domains\Integration\Actions\OccurrenceAutomation;
 use App\Domains\Integration\Actions\TransactionCreateEntry;
@@ -40,8 +42,8 @@ public static function run(Automation $automation, $eventData = null)
     public static function setupService($serviceId, $service)
     {
         $taskTypes = [
-            'triggers' => 'trigger', 
-            'components' => 'component', 
+            'triggers' => 'trigger',
+            'components' => 'component',
             'actions' => 'action'
         ];
         foreach ($taskTypes as $taskTypeName => $taskType) {
diff --git a/app/Domains/Budget/Models/Budget.php b/app/Domains/Budget/Models/Budget.php
index a4acee42..13077708 100644
--- a/app/Domains/Budget/Models/Budget.php
+++ b/app/Domains/Budget/Models/Budget.php
@@ -2,8 +2,10 @@
 
 namespace App\Domains\Budget\Models;
 
-use Illuminate\Database\Eloquent\Factories\HasFactory;
 use Illuminate\Database\Eloquent\Model;
+use Insane\Journal\Models\Core\Account;
+use App\Domains\AppCore\Models\Category;
+use Illuminate\Database\Eloquent\Factories\HasFactory;
 
 class Budget extends Model
 {
diff --git a/app/Domains/Budget/Models/BudgetMonth.php b/app/Domains/Budget/Models/BudgetMonth.php
index ca5ec6d9..53797432 100644
--- a/app/Domains/Budget/Models/BudgetMonth.php
+++ b/app/Domains/Budget/Models/BudgetMonth.php
@@ -9,11 +9,12 @@
 use Insane\Journal\Models\Core\Account;
 use App\Domains\AppCore\Models\Category;
 use App\Domains\Budget\Data\BudgetReservedNames;
+use App\Domains\Budget\Models\Traits\BudgetMonthTrait;
 use Illuminate\Database\Eloquent\Factories\HasFactory;
 
 class BudgetMonth extends Model
 {
-    use HasFactory;
+    use HasFactory, BudgetMonthTrait;
 
     protected $fillable = [
         'team_id',
diff --git a/app/Domains/Budget/Models/Traits/BudgetMonthTrait.php b/app/Domains/Budget/Models/Traits/BudgetMonthTrait.php
new file mode 100644
index 00000000..b4c6bbc3
--- /dev/null
+++ b/app/Domains/Budget/Models/Traits/BudgetMonthTrait.php
@@ -0,0 +1,101 @@
+<?php
+
+namespace App\Domains\Budget\Models\Traits;
+
+use Illuminate\Support\Facades\DB;
+use Insane\Journal\Models\Core\Transaction;
+use App\Domains\Budget\Data\BudgetReservedNames;
+
+trait BudgetMonthTrait
+{
+    public function scopeByTeam($query, $teamId)
+    {
+        return $query->where('budget_months.team_id', $teamId);
+    }
+
+
+    public function scopeInDateFrame($query, $startDate = null, $endDate = null, $orderByDate = true)
+    {
+        return $query
+            ->when($startDate && ! $endDate, function ($query) use ($startDate) {
+                $query->where('budget_months.month', '=', $startDate);
+            })
+            ->when($startDate && $endDate, function ($query) use ($startDate, $endDate) {
+                $query->where('budget_months.month', '>=', $startDate);
+                $query->where('budget_months.month', '<=', $endDate);
+            })
+            ->when($orderByDate, function ($query) {
+                $query->orderBy('budget_months.month', 'desc');
+            });
+    }
+
+    public function scopeExpenses($query)
+    {
+        return $query->where([
+            'transactions.direction' => Transaction::DIRECTION_CREDIT,
+            'transactions.status' => 'verified',
+        ])
+            ->whereNotNull('budget_months.category_id');
+    }
+
+    public function scopeBalance($query)
+    {
+        $transactionsTotalSum = 'sum(budget_months.budgeted) as total_amount, group_concat(distinct(categories.name)) as cat_name';
+
+        return $query
+            ->whereNotNull('budget_months.category_id')
+            ->where('budget_months.budgeted', '<>', 0)
+            ->selectRaw($transactionsTotalSum);
+    }
+
+    public function scopeForAccount($query, $accountId)
+    {
+        return $query->where(DB::raw("(account_id = $accountId)"));
+    }
+
+    public function scopeCategories($query, array $categories)
+    {
+        return $query->whereIn('budget_months.category_id', $categories)
+            ->join('categories', 'budget_months.category_id', '=', 'categories.id')
+            ->when($categories, fn ($query) => $query->whereIn('budget_months.category_id', $categories));
+    }
+
+    public function scopeExpenseCategories($query, array $categories = null)
+    {
+        $query->whereNot('categories.name', BudgetReservedNames::READY_TO_ASSIGN->value)
+            ->join('categories', 'budget_months.category_id', '=', 'categories.id');
+
+        $categories = collect($categories);
+        $excluded = $categories->filter( fn ($id) => $id < 0)->all();
+        $included = $categories->filter( fn ($id) => $id > 0)->all();
+
+        if (count($excluded)) {
+            $query->whereNotIn('budget_months.category_id', $excluded);
+        }
+        if (count($included)) {
+            $query->whereIn('budget_months.category_id', $included);
+        }
+
+        return $query;
+    }
+
+    public function scopeAllCategories($query, array $categories = null)
+    {
+        $query
+            ->whereNot('categories.name', BudgetReservedNames::READY_TO_ASSIGN->value)
+            ->join('categories', 'budget_months.category_id', '=', 'categories.id');
+
+        $categories = collect($categories);
+        $excluded = $categories->filter( fn ($id) => $id < 0)->all();
+        $included = $categories->filter( fn ($id) => $id > 0)->all();
+
+        if (count($excluded)) {
+            $query->whereNotIn('budget_months.category_id', $excluded);
+        }
+        if (count($included)) {
+            $query->whereIn('budget_months.category_id', $included);
+        }
+
+        return $query;
+    }
+}
diff --git a/app/Domains/Integration/Actions/GmailReceived.php b/app/Domains/Integration/Actions/GmailReceived.php
index bcd1f0b9..c07f8650 100644
--- a/app/Domains/Integration/Actions/GmailReceived.php
+++ b/app/Domains/Integration/Actions/GmailReceived.php
@@ -25,7 +25,6 @@ public static function handle(Automation $automation, $lastData = null, $task =
         $config = json_decode($trigger->values);
         $client = GoogleService::getClient($automation->integration_id);
         $service = new ServiceGmail($client);
-        $notification = BHDService::EMAIL_NOTIFICATION;
         $condition = isset($config->conditionType) && $config->value ? "$config->conditionType:$config->value" : '';
         if (! $condition) {
             $condition = $config->value ?? '';
@@ -35,6 +34,7 @@ public static function handle(Automation $automation, $lastData = null, $task =
         foreach ($results->getThreads() as $index => $thread) {
             $theadResponse = $service->users_threads->get('me', $thread->id, ['format' => 'MINIMAL']);
             foreach ($theadResponse->getMessages() as $message) {
+
                 if ($message && $message->getHistoryId() > $trackId) {
                     $raw = $service->users_messages->get('me', $message->id, ['format' => 'raw']);
                     $parser = self::parseEmail($raw);
diff --git a/app/Domains/Integration/Actions/TransactionCreateEntry.php b/app/Domains/Integration/Actions/TransactionCreateEntry.php
index d28f5ce6..6e111bdf 100644
--- a/app/Domains/Integration/Actions/TransactionCreateEntry.php
+++ b/app/Domains/Integration/Actions/TransactionCreateEntry.php
@@ -38,23 +38,28 @@ public static function handle(
             $counterAccountId = $payee->account_id;
         }
 
+        $description = FormulaHelper::parseFormula($taskData->description, $payload);
+
         $transactionData = [
             'team_id' => $automation->team_id,
             'user_id' => $automation->user_id,
             'account_id' => $accountId,
             'payee_id' => $payeeId,
+            'payee_name' => $payee?->name,
             'counter_account_id' => $counterAccountId ?? null,
             'date' => FormulaHelper::parseFormula($taskData->date, $payload),
             'currency_code' => FormulaHelper::parseFormula($taskData->currency_code, $payload),
             'category_id' => $transactionCategoryId ?? null,
-            'description' => FormulaHelper::parseFormula($taskData->description, $payload),
+            'description' => $description,
+            'reference' => $description,
             'direction' => FormulaHelper::parseFormula($taskData->direction, $payload),
             'total' => FormulaHelper::parseFormula($taskData->total, $payload),
             'items' => [],
-            'metaData' => [
+            'meta_data' => [
                 'resource_id' => $payload['id'],
                 'resource_origin' => $previousTask->name,
                 'resource_type' => $trigger->name,
+                'resource_description' => $description
             ],
         ];
 
@@ -72,6 +77,8 @@ public static function handle(
            return $transaction;
         }
 
+        print_r($transactionData);
+
         $transaction = Transaction::createTransaction($transactionData);
         User::find($automation->user_id)->notify(new EntryGenerated($transaction));
 
diff --git a/app/Domains/Meal/Services/MealService.php b/app/Domains/Meal/Services/MealService.php
index c406660d..68223942 100644
--- a/app/Domains/Meal/Services/MealService.php
+++ b/app/Domains/Meal/Services/MealService.php
@@ -6,7 +6,9 @@
 use Illuminate\Support\Carbon;
 use App\Domains\Meal\Models\Meal;
 use App\Domains\Meal\Models\Product;
+use Modules\Plan\Entities\PlanTypes;
 use App\Domains\Meal\Models\MealPlan;
+use Modules\Plan\Services\PlanService;
 use App\Domains\AppCore\Models\Planner;
 
 class MealService
@@ -125,4 +127,27 @@ public function addIngredientLabel(Product $product, mixed $postData, User $user
 
         return $label;
     }
+
+    // shopping list
+    public function addToShoppingList($ingredients = [])
+    {
+        $planService = new PlanService();
+        $user = request()->user();
+        $team = request()->user()->currentTeam;
+        $shoppingList =  $planService->getPlanTypeModel($team->id, PlanTypes::SHOPPING_LIST, request());
+        if (!$shoppingList) {
+            $shoppingList = $planService->createPlanBoard($team, PlanTypes::SHOPPING_LIST, PlanTypes::SHOPPING_LIST->name);
+        }
+
+        foreach ($ingredients as $ingredient) {
+            $shoppingList->addItem($user, [
+                "title" => $ingredient["name"],
+                "board_id" => null,
+                "stage_id" => $shoppingList->stages->first()->id,
+                "fields" => [],
+                "order" => 1
+            ]);
+        }
+
+    }
 }
diff --git a/app/Domains/Transaction/Services/ReportService.php b/app/Domains/Transaction/Services/ReportService.php
index 3772a76c..044d7253 100644
--- a/app/Domains/Transaction/Services/ReportService.php
+++ b/app/Domains/Transaction/Services/ReportService.php
@@ -4,6 +4,7 @@
 
 use Carbon\Carbon;
 use Illuminate\Support\Facades\DB;
+use App\Domains\Budget\Models\BudgetMonth;
 use App\Domains\Transaction\Models\Transaction;
 use App\Domains\Transaction\Models\TransactionLine;
 
@@ -57,6 +58,23 @@ public static function generateExpensesByPeriod($teamId, $startDate, $timeUnitDi
         }, $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');
+        $rangeStartAt = Carbon::now()->subMonth($timeUnitDiff)->startOfMonth()->format('Y-m-d');
+
+        $results = self::getAssignedByCategoriesInPeriod($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 getIncomeVsExpenses($teamId, $timeUnitDiff = 2, $startDate = null, $timeUnit = 'month')
     {
         $endDate = Carbon::now()->endOfMonth()->format('Y-m-d');
@@ -175,6 +193,30 @@ public static function getExpensesByCategoriesInPeriod($teamId, $startDate, $end
             return $cats;
     }
 
+    public static function getAssignedByCategoriesInPeriod($teamId, $startDate, $endDate, $categories = null)
+    {
+        $cats = BudgetMonth::byTeam($teamId)
+            ->balance()
+            ->inDateFrame($startDate, $endDate)
+            ->expenseCategories($categories)
+            ->selectRaw("
+                date_format(budget_months.month,
+                '%Y-%m-01') as date,
+                date_format(budget_months.month, '%Y-%m-01') as month,
+                year(budget_months.month) as year,
+                categories.name,
+                categories.id,
+                budget_targets.target_type
+                "
+            )
+            ->groupByRaw('date_format(budget_months.month, "%Y-%m"), categories.id')
+            ->orderBy('date')
+            ->leftJoin('budget_targets', 'budget_targets.category_id', 'categories.id')
+            ->get();
+
+            return $cats;
+    }
+
     public static function getExpensesInPeriod($teamId, $startDate, $endDate)
     {
         return TransactionLine::byTeam($teamId)
diff --git a/app/Http/Controllers/Finance/FinanceTrendController.php b/app/Http/Controllers/Finance/FinanceTrendController.php
index 25936ab7..518b6e58 100644
--- a/app/Http/Controllers/Finance/FinanceTrendController.php
+++ b/app/Http/Controllers/Finance/FinanceTrendController.php
@@ -35,6 +35,9 @@ class FinanceTrendController extends Controller
         'spending-year' => [
             "handler" => 'spendingYear'
         ],
+        'assigned-year' => [
+            "handler" => 'assignedInYear'
+        ],
         'income-expenses-graph' => [
             "handler" => 'IncomeExpensesGraph'
         ],
@@ -204,6 +207,31 @@ public function spendingYear()
         ];
     }
 
+    public function assignedInYear()
+    {
+        $queryParams = request()->query();
+        $filters = isset($queryParams['filter']) ? $queryParams['filter'] : [];
+        [$startDate] = $this->getFilterDates($filters);
+        $teamId = request()->user()->current_team_id;
+        $excludedAccounts = null;
+        if (isset($filters['category'])) {
+            $excludedAccounts = collect(explode(',', $filters['category']))->map(fn ($id) => "-$id")->all();
+        }
+
+        // dd(ReportService::generateExpensesByPeriod($teamId, $startDate, 12, 'month', $excludedAccounts), ReportService::getAssignedByPeriod($teamId, $startDate, 12, 'month', $excludedAccounts));
+
+        return [
+            'data' => ReportService::getAssignedByPeriod($teamId, $startDate, 12, 'month', $excludedAccounts),
+            'metaData' => [
+                'name' => 'assignedYear',
+                'title' => 'Assigned in year',
+                'props' => [
+                    'headerTemplate' => 'grid',
+                ],
+            ],
+        ];
+    }
+
 
 
     public function yearSummary()
diff --git a/app/Http/Controllers/Meal/MealController.php b/app/Http/Controllers/Meal/MealController.php
index 1ef639db..c814da43 100644
--- a/app/Http/Controllers/Meal/MealController.php
+++ b/app/Http/Controllers/Meal/MealController.php
@@ -2,15 +2,17 @@
 
 namespace App\Http\Controllers\Meal;
 
+use Illuminate\Http\Request;
+use Illuminate\Support\Carbon;
 use App\Domains\Meal\Models\Meal;
+use App\Http\Resources\MealResource;
+use Modules\Plan\Entities\PlanTypes;
 use App\Domains\Meal\Models\MealType;
+use Modules\Plan\Services\PlanService;
+use Illuminate\Support\Facades\Redirect;
 use App\Domains\Meal\Services\MealService;
-use App\Http\Resources\MealResource;
 use App\Http\Resources\PlannedMealResource;
 use Freesgen\Atmosphere\Http\InertiaController;
-use Illuminate\Http\Request;
-use Illuminate\Support\Carbon;
-use Illuminate\Support\Facades\Redirect;
 
 class MealController extends InertiaController
 {
@@ -21,6 +23,7 @@ public function __construct(Meal $meal, private MealService $mealService)
             'index' => 'Meals/Index',
             'create' => 'Meals/Create',
             'edit' => 'Meals/Create',
+            'view' => 'Meals/View',
         ];
         $this->searchable = ['name'];
         $this->validationRules = [
@@ -32,7 +35,7 @@ public function __construct(Meal $meal, private MealService $mealService)
         ];
     }
 
-    public function __invoke()
+    public function __invoke(PlanService $service)
     {
         $request = request();
         $startDate = $request->query('startDate', Carbon::now()->startOfMonth()->format('Y-m-d'));
@@ -51,10 +54,11 @@ public function __invoke()
                 return MealService::getIngredients($weekPlan);
             },
             'mealTypes' => MealType::where([
-                'team_id' => $request->user()->current_team_id,
-                'user_id' => $request->user()->current_team_id,
+                'team_id' => $teamId,
+                'user_id' => $request->user()->id,
             ])->get(),
             'meals' => PlannedMealResource::collection($plannedMeals),
+            'shoppingList' => $service->getPlanType($teamId, PlanTypes::SHOPPING_LIST, request())
         ]);
     }
 
@@ -96,4 +100,8 @@ public function random(Request $request)
 
         return count($meals) ? $meals->random() : 'Noting to show';
     }
+
+    public function show(Request $request, int $id) {
+        return inertia($this->templates['view'], $this->getEditProps($request, $id));
+    }
 }
diff --git a/app/Http/Controllers/Meal/MealShoppingListController.php b/app/Http/Controllers/Meal/MealShoppingListController.php
new file mode 100644
index 00000000..b77b0b8e
--- /dev/null
+++ b/app/Http/Controllers/Meal/MealShoppingListController.php
@@ -0,0 +1,34 @@
+<?php
+
+namespace App\Http\Controllers\Meal;
+
+use App\Domains\Meal\Models\Meal;
+use Modules\Plan\Entities\PlanTypes;
+use Modules\Plan\Services\PlanService;
+use Illuminate\Support\Facades\Redirect;
+use App\Domains\Meal\Services\MealService;
+
+
+class MealShoppingListController
+{
+    public function __construct(Meal $meal, private MealService $mealService) {}
+
+    public function index(PlanService $service) {
+        $user = request()->user();
+
+        return inertia('Meals/ShoppingList', [
+            'chores' =>  [$service->getPlanType($user->current_team_id, PlanTypes::SHOPPING_LIST, request())]
+        ]);
+    }
+
+    public function store(Meal $meal)
+    {
+        $this->mealService->addToShoppingList($meal->ingredients->toArray());
+        return Redirect::back();
+    }
+
+    public function update() {
+        $items = request()->post('items');
+        $this->mealService->addToShoppingList($items);
+    }
+}
diff --git a/app/Http/Controllers/System/NotificationController.php b/app/Http/Controllers/System/NotificationController.php
index b78b9f09..2b0ca555 100644
--- a/app/Http/Controllers/System/NotificationController.php
+++ b/app/Http/Controllers/System/NotificationController.php
@@ -1,9 +1,6 @@
 <?php
 
 namespace App\Http\Controllers\System;
-
-use Laravel\Jetstream\Jetstream;
-
 class NotificationController
 {
     public function index()
@@ -19,7 +16,7 @@ public function update($notificationId)
         $user->unreadNotifications()->where('id', $notificationId)->update(['read_at' => now()]);
     }
 
-    public function bulkUpdate($notificationId)
+    public function bulkUpdate()
     {
         $user = request()->user();
         $user->unreadNotifications()->update(['read_at' => now()]);
diff --git a/app/Http/Middleware/HandleInertiaRequests.php b/app/Http/Middleware/HandleInertiaRequests.php
index 26911fe6..8b60f311 100644
--- a/app/Http/Middleware/HandleInertiaRequests.php
+++ b/app/Http/Middleware/HandleInertiaRequests.php
@@ -6,6 +6,7 @@
 use Tightenco\Ziggy\Ziggy;
 use Illuminate\Http\Request;
 use App\Concerns\Facades\Menu;
+use Nwidart\Modules\Facades\Module;
 use Insane\Journal\Models\Core\Account;
 use App\Domains\AppCore\Models\Category;
 use Insane\Journal\Models\Core\AccountDetailType;
diff --git a/app/Listeners/CreateBudgetTransactionMovement.php b/app/Listeners/CreateBudgetTransactionMovement.php
index 4cebd03c..e37fef5f 100644
--- a/app/Listeners/CreateBudgetTransactionMovement.php
+++ b/app/Listeners/CreateBudgetTransactionMovement.php
@@ -3,7 +3,9 @@
 namespace App\Listeners;
 
 use Illuminate\Contracts\Queue\ShouldQueue;
+use Insane\Journal\Events\TransactionEvent;
 use Insane\Journal\Events\TransactionCreated;
+use Insane\Journal\Events\TransactionUpdated;
 use App\Domains\Budget\Services\BudgetCategoryService;
 
 class CreateBudgetTransactionMovement implements ShouldQueue
@@ -12,7 +14,7 @@ public function __construct(private BudgetCategoryService $budgetCategoryService
     {
     }
 
-    public function handle(TransactionCreated $event)
+    public function handle(TransactionCreated|TransactionUpdated $event)
     {
         $transaction = $event->transaction;
         $account = $transaction->account;
diff --git a/app/Listeners/HandleTransactionCreated.php b/app/Listeners/HandleTransactionCreated.php
index 154f8d88..0d349f6c 100644
--- a/app/Listeners/HandleTransactionCreated.php
+++ b/app/Listeners/HandleTransactionCreated.php
@@ -2,16 +2,17 @@
 
 namespace App\Listeners;
 
-use App\Domains\Automation\Services\LogerAutomationService;
 use App\Events\AutomationEvent;
 use Illuminate\Contracts\Queue\ShouldQueue;
-use Insane\Journal\Events\TransactionCreated;
+use Insane\Journal\Events\TransactionEvent;
+use App\Domains\Automation\Services\LogerAutomationService;
 
 class HandleTransactionCreated implements ShouldQueue
 {
-    public function handle(TransactionCreated $event)
+    public function handle(TransactionEvent $event)
     {
         $transaction = $event->transaction;
+
         AutomationEvent::dispatch(
             $transaction->team_id,
             LogerAutomationService::TRANSACTION_CREATED,
diff --git a/app/Listeners/HandleTransactionUpdated.php b/app/Listeners/HandleTransactionUpdated.php
new file mode 100644
index 00000000..be3720e6
--- /dev/null
+++ b/app/Listeners/HandleTransactionUpdated.php
@@ -0,0 +1,45 @@
+<?php
+
+namespace App\Listeners;
+
+use Illuminate\Support\Str;
+use Freesgen\Atmosphere\Models\Label;
+use Illuminate\Contracts\Queue\ShouldQueue;
+use Insane\Journal\Events\TransactionUpdated;
+use App\Domains\Transaction\Models\TransactionLine;
+
+class HandleTransactionUpdated implements ShouldQueue
+{
+    public function handle(TransactionUpdated  $event)
+    {
+        $transaction = $event->transaction;
+        $transactionData = $event->transactionData;
+
+        $labelId = $transactionData["label_id"] ?? null;
+        $isNewLabel = Str::contains($labelId, "new::");
+        $newLabelData = [
+            "user_id" => $transaction->user_id,
+            "team_id" => $transaction->team_id,
+        ];
+
+        if (!isset($transactionData["label_id"]) && $transactionData["counter_account_id"]) {
+            $label = Label::firstOrCreate([
+                ...$newLabelData,
+                "name" => $transactionData["label_name"],
+                "labelable_type" => TransactionLine::class
+            ]);
+            $labelId = $label->id;
+        } else if ($labelId == 'new' || $isNewLabel) {
+            $labelName = $transactionData['label_name'] ?? trim(Str::replace('new::', '', $transactionData["label_id"])) ?? null;
+            if ($labelName) {
+                $label = Label::firstOrCreate([
+                    ...$newLabelData,
+                    "name" => $labelName,
+                    "labelable_type" => TransactionLine::class
+                ]);
+                $labelId = $label->id;
+                $transactionData["label_id"] = $labelId;
+            }
+        }
+    }
+}
diff --git a/app/Providers/EventServiceProvider.php b/app/Providers/EventServiceProvider.php
index 95db0d81..f8f65c5d 100644
--- a/app/Providers/EventServiceProvider.php
+++ b/app/Providers/EventServiceProvider.php
@@ -22,6 +22,7 @@
 use Laravel\Jetstream\Events\TeamCreated;
 use Laravel\Jetstream\Events\TeamDeleted;
 use App\Listeners\HandleTransactionCreated;
+use App\Listeners\HandleTransactionUpdated;
 use App\Listeners\CreateOccurrenceAutomation;
 use Insane\Journal\Events\TransactionCreated;
 use Insane\Journal\Events\TransactionDeleted;
diff --git a/database/migrations/2022_07_23_223710_create_labeelable_table.php b/database/migrations/2022_07_23_223710_create_labeelable_table.php
index 9a4ba0d3..8d3ebc36 100644
--- a/database/migrations/2022_07_23_223710_create_labeelable_table.php
+++ b/database/migrations/2022_07_23_223710_create_labeelable_table.php
@@ -1,8 +1,8 @@
 <?php
 
-use Illuminate\Database\Migrations\Migration;
-use Illuminate\Database\Schema\Blueprint;
 use Illuminate\Support\Facades\Schema;
+use Illuminate\Database\Schema\Blueprint;
+use Illuminate\Database\Migrations\Migration;
 
 return new class extends Migration
 {
diff --git a/database/migrations/2024_05_29_142720_add_meal_flow.php b/database/migrations/2024_05_29_142720_add_meal_flow.php
new file mode 100644
index 00000000..238c9ac2
--- /dev/null
+++ b/database/migrations/2024_05_29_142720_add_meal_flow.php
@@ -0,0 +1,30 @@
+<?php
+
+use Illuminate\Support\Facades\Schema;
+use Illuminate\Database\Schema\Blueprint;
+use Illuminate\Database\Migrations\Migration;
+
+return new class extends Migration
+{
+    /**
+     * Run the migrations.
+     */
+    public function up(): void
+    {
+        Schema::table('meals', function (Blueprint $table) {
+            $table->foreignId('category_id')->nullable()->after('meal_type_id');
+            $table->integer('prep_minutes')->default(0);
+            $table->integer('cook_minutes')->default(0);
+            $table->integer('servings')->default(0);
+            $table->integer('rating')->default(0);
+        });
+    }
+
+    /**
+     * Reverse the migrations.
+     */
+    public function down(): void
+    {
+        //
+    }
+};
diff --git a/modules_statuses.json b/modules_statuses.json
index 9787c459..6328ee55 100644
--- a/modules_statuses.json
+++ b/modules_statuses.json
@@ -1,4 +1,4 @@
 {
     "Watchlist": true,
     "Plan": true
-}
\ No newline at end of file
+}
diff --git a/resources/js/Components/WidgetContainer.vue b/resources/js/Components/WidgetContainer.vue
index d03920f4..637cbb23 100644
--- a/resources/js/Components/WidgetContainer.vue
+++ b/resources/js/Components/WidgetContainer.vue
@@ -123,6 +123,9 @@ const { isTab: isCurrentTab, selectedTab, tabs: widgetTabs } = useTabs(
           />
         </section>
       </slot>
+      <template v-for="tab in tabs">
+        <slot :name="tab.name" v-if="selectedTab == tab.name" />
+      </template>
     </section>
     <slot name="append" />
   </article>
diff --git a/resources/js/Components/atoms/CustomTable.vue b/resources/js/Components/atoms/CustomTable.vue
index 1e04dac5..944a175b 100644
--- a/resources/js/Components/atoms/CustomTable.vue
+++ b/resources/js/Components/atoms/CustomTable.vue
@@ -43,9 +43,16 @@ const range = computed(() => {
     >
         <thead>
             <tr class="px-2 py-4 font-bold text-left border-b border-gray-200 text-body">
-                 <th v-for="col in cols" :key="col.name" class="px-2 py-4" :class="[col.headerClass]"  :style="{width: col.width, maxWidth: col.maxWidth}">
-                    {{ col.label }}
-                 </th>
+                <th v-for="col in cols"
+                 :key="col.name"
+                 class="px-2 py-4"
+                 :class="[col.headerClass]"
+                 :style="{width: col.width, maxWidth: col.maxWidth}"
+                >
+                    <slot :name="`header-${col.name}`">
+                        {{ col.label }}
+                    </slot>
+                </th>
             </tr>
         </thead>
 
diff --git a/resources/js/Components/atoms/Modal.vue b/resources/js/Components/atoms/Modal.vue
index 5ccad36e..1b14cada 100644
--- a/resources/js/Components/atoms/Modal.vue
+++ b/resources/js/Components/atoms/Modal.vue
@@ -56,6 +56,7 @@ const maxWidthClass = computed(() => {
         'lg': 'sm:max-w-lg',
         'xl': 'sm:max-w-xl',
         '2xl': 'sm:max-w-2xl',
+        '4xl': 'sm:max-w-4xl',
         'mobile': 'w-full',
     }[props.maxWidth || '2xl']
 })
@@ -67,6 +68,7 @@ const containerClass = computed(() => {
         'lg': 'px-4 py-6',
         'xl': 'px-4 py-6',
         '2xl': 'px-4 py-6',
+        '4xl': 'px-4 py-6',
         'mobile': 'w-full',
     }[props.maxWidth || '2xl']
 })
diff --git a/resources/js/Components/board/BoardSection.vue b/resources/js/Components/board/BoardSection.vue
index 240e1e2e..ce1f02d7 100644
--- a/resources/js/Components/board/BoardSection.vue
+++ b/resources/js/Components/board/BoardSection.vue
@@ -10,32 +10,24 @@ import { router } from "@inertiajs/vue3";
 import { onMounted, provide, computed, watch, reactive, ref, toRefs } from "vue";
 import BoardTitle from "./BoardTitle.vue";
 
-const props = defineProps({
-    board: {
-        type: Object,
-        required: true
-    },
-    automations: {
-        type: Array,
-        required: true
-    },
-    users: {
-        type: Array,
-        required: true
-    },
-    filters: {
-        type: Object,
-        default() {
-            return {
-                search: '',
-                done: '',
-                sort: ''
-            }
-        }
-    }
+const emit = defineEmits(['search'])
+const props = withDefaults(defineProps<{
+    board: Object;
+    automations: boolean;
+    users: any[];
+    filters: Record<string, any>
+    multiStage: boolean;
+    resourceName: string;
+}>(), {
+    filters: () => ({
+        search: '',
+        done: '',
+        sort: ''
+    })
 });
 
 provide('users', props.users);
+
 const views = {
     list:{
         name: "list",
@@ -76,10 +68,9 @@ const state = reactive({
 watch(state.searchOptions, throttle(() => {
     let query = pickBy(state.searchOptions);
     query = Object.keys(query).length ?  '?' + new URLSearchParams(pickBy(state.searchOptions)) : '';
-    // router.replace(`/boards/${props.board.id}${query}`)
+    emit('search', query)
 }, 200),{
     deep: true,
-    immediate: true
 });
 
 const containerComponent = computed(() => {
@@ -167,7 +158,7 @@ function addItem(item: Record<string, string>, stage: Record<string, string>, re
     isLoading.value = true;
 
     item.order = stage.items.length;
-    
+
     axios({
         url: `/housing/plans/${props.board.id}/items${param}`,
         method,
@@ -323,7 +314,7 @@ const {
     isItemModalOpen
 } = toRefs(state)
 </script>
- 
+
  <template>
     <div class="px-8 pb-24">
         <header class="flex justify-between board__toolbar">
@@ -412,6 +403,7 @@ const {
                         :items="stage.items"
                         :create-mode="createMode"
                         :filters="filters"
+                        :resource-name="resourceName"
                         @sort="sort"
                         @clear-sort="clearSort"
                         @saved="addItem($event, stage)"
@@ -430,10 +422,11 @@ const {
                 :fields="board.fields"
                 :kanban-data="kanbanData"
                 @saved="addItem"
+                :resource-name="resourceName"
                 class="flex pt-5"
             />
 
-            <div class="flex justify-center w-full py-5" v-if="modeSelected == 'list'">
+            <div class="flex justify-center w-full py-5" v-if="modeSelected == 'list' && multiStage">
                 <button
                     class="flex items-center justify-center w-8 h-8 px-2 text-purple-400 border-2 border-purple-400 rounded-full hover:bg-purple-400 hover:text-white"
                     @click="addStage()"
diff --git a/resources/js/Components/board/ItemGroupCell.vue b/resources/js/Components/board/ItemGroupCell.vue
index 77ac5461..b7d0cfa0 100644
--- a/resources/js/Components/board/ItemGroupCell.vue
+++ b/resources/js/Components/board/ItemGroupCell.vue
@@ -1,104 +1,4 @@
-<template>
-    <div
-        class="item-group-cell"
-        ref="ItemGroupCell"
-        :class="{ 'editable-mode': isEditMode, 'new-item': isTitle }"
-    >
-        <div
-            v-if="isTitle && !isEditMode"
-            class="new-item-button"
-            @click="toggleEditMode()"
-        >
-            <i class="mr-3 fa fa-plus"></i>
-            <span>
-                {{ placeholder }}
-            </span>
-        </div>
-
-        <template v-else-if="!isEditMode">
-            <LinkPreview
-                v-if="field.type == 'url' && displayValue"
-                :value="displayValue"
-                @edit="toggleEditMode()"
-            />
-            <span
-                v-else
-                @click="toggleEditMode()"
-                :title="displayValue"
-                class="inline-block w-full px-2 overflow-hidden text-sm border-2 border-transparent border-dashed cursor-pointer h-7 hover:border-gray-300"
-            >
-                {{ displayValue }}
-            </span>
-        </template>
-
-        <template v-else>
-                <div class="w-full h-8 px-2" v-if="isCustomField">
-                    <component
-                        v-model="value"
-                        ref="input"
-                        :is="componentName"
-                        :users="users"
-                        :options="field.options"
-                        @saved="saveChanges()"
-                        @closed="isEditMode = false"
-                    />
-                </div>
-
-                <div v-else class="flex items-center w-full h-full">
-                    <div class="controls" v-if="showControls && item.board">
-                        <BoardSelector
-                            :options="item.board.stages"
-                            icon-class="fas fa-layer-group"
-                            v-model="item.stage"
-                        />
-                    </div>
-                    <input
-                        ref="input"
-                        type="text"
-                        class="w-full h-8 px-2 mx-0 border-none rounded-none form-input"
-                        :class="{ 'new-item': isTitle }"
-                        :name="`${index}-${fieldName}`"
-                        id=""
-                        :placeholder="placeholder"
-                        v-model="value"
-                        @blur="saveChanges()"
-                        @keydown.enter="saveItem"
-                    />
-                    {{  value }}
-                    <div class="flex h-full controls" v-if="showControls">
-                        <BoardSelector
-                            v-if="boards"
-                            :options="boards"
-                            tooltip="Board"
-                            icon-class="fas fa-list"
-                            :show-label="false"
-                            v-model="item.board"
-                        />
-                        <el-Tooltip
-                            effect="dark"
-                            content="reminder date"
-                            placement="top"
-                        >
-                            <i class="mx-2 fas fa-clock"></i>
-                        </el-Tooltip>
-                        <ElTooltip
-                            effect="dark"
-                            content="Delegate"
-                            placement="top"
-                        >
-                            <i class="mx-2 fas fa-user"></i>
-                        </ElTooltip>
-
-                        <ElTooltip effect="dark" content="Status" placement="top">
-                            <i class="mx-2 fas fa-tag"></i>
-                        </ElTooltip>
-                    </div>
-                </div>
-        </template>
-    </div>
-</template>
-
-<script setup>
+<script setup lang="ts">
 import LinkPreview from "./cellTypes/LinkPreview.vue";
 import InputLabel from "./cellTypes/Label.vue";
 import InputDate from "./cellTypes/Date.vue";
@@ -238,6 +138,106 @@ const {
 } = toRefs(state)
 </script>
 
+<template>
+    <div
+        class="item-group-cell"
+        ref="ItemGroupCell"
+        :class="{ 'editable-mode': isEditMode, 'new-item': isTitle }"
+    >
+        <div
+            v-if="isTitle && !isEditMode"
+            class="new-item-button"
+            @click="toggleEditMode()"
+        >
+            <i class="mr-3 fa fa-plus"></i>
+            <span>
+                {{ placeholder }}
+            </span>
+        </div>
+
+        <template v-else-if="!isEditMode">
+            <LinkPreview
+                v-if="field.type == 'url' && displayValue"
+                :value="displayValue"
+                @edit="toggleEditMode()"
+            />
+            <span
+                v-else
+                @click="toggleEditMode()"
+                :title="displayValue"
+                class="inline-block w-full px-2 overflow-hidden text-sm border-2 border-transparent border-dashed cursor-pointer h-7 hover:border-gray-300"
+            >
+                {{ displayValue }}
+            </span>
+        </template>
+
+        <template v-else>
+                <div class="w-full h-8 px-2" v-if="isCustomField">
+                    <component
+                        v-model="value"
+                        ref="input"
+                        :is="componentName"
+                        :users="users"
+                        :options="field.options"
+                        @saved="saveChanges()"
+                        @closed="isEditMode = false"
+                    />
+                </div>
+
+                <div v-else class="flex items-center w-full h-full">
+                    <div class="controls" v-if="showControls && item.board">
+                        <BoardSelector
+                            :options="item.board.stages"
+                            icon-class="fas fa-layer-group"
+                            v-model="item.stage"
+                        />
+                    </div>
+                    <input
+                        ref="input"
+                        type="text"
+                        class="w-full h-8 px-2 mx-0 border-none rounded-none form-input"
+                        :class="{ 'new-item': isTitle }"
+                        :name="`${index}-${fieldName}`"
+                        id=""
+                        :placeholder="placeholder"
+                        v-model="value"
+                        @blur="saveChanges()"
+                        @keydown.enter="saveItem"
+                    />
+                    {{  value }}
+                    <div class="flex h-full controls" v-if="showControls">
+                        <BoardSelector
+                            v-if="boards"
+                            :options="boards"
+                            tooltip="Board"
+                            icon-class="fas fa-list"
+                            :show-label="false"
+                            v-model="item.board"
+                        />
+                        <el-Tooltip
+                            effect="dark"
+                            content="reminder date"
+                            placement="top"
+                        >
+                            <i class="mx-2 fas fa-clock"></i>
+                        </el-Tooltip>
+                        <ElTooltip
+                            effect="dark"
+                            content="Delegate"
+                            placement="top"
+                        >
+                            <i class="mx-2 fas fa-user"></i>
+                        </ElTooltip>
+
+                        <ElTooltip effect="dark" content="Status" placement="top">
+                            <i class="mx-2 fas fa-tag"></i>
+                        </ElTooltip>
+                    </div>
+                </div>
+        </template>
+    </div>
+</template>
+
 <style lang="scss">
 .el-input__icon {
     line-height: 30px;
diff --git a/resources/js/Components/board/views/List/ListCellHeader.vue b/resources/js/Components/board/views/List/ListCellHeader.vue
index d9895b90..992e1d70 100644
--- a/resources/js/Components/board/views/List/ListCellHeader.vue
+++ b/resources/js/Components/board/views/List/ListCellHeader.vue
@@ -1,56 +1,19 @@
-<template>
-  <div class="sticky_header" v-bind="$attrs">
-    <template v-if="visibleFields.length">
-      <div
-        v-for="field in visibleFields"
-        :key="field.name"
-        class="item-group-row__header"
-      >
-        <span class="font-bold">
-         <slot :filterIcons="filterIcons[field.name]">
-            <FieldPopover
-                :field-data="field"
-                :board="board"
-                @saved="$emit('field-added', $event)"
-                @sort="$emit('sort', $event)"
-                @clear-sort="$emit('clear-sort')"
-            >
-                {{ field.title }}
-                <i :class="filterIcons[field.name].sort" />
-            </FieldPopover>
-         </slot>
-        </span>
-      </div>
-    </template>
-    <div v-else class="item-group-row__header">
-      <span class="font-bold">
-        <slot :filterIcons="filterIcons" />
-      </span>
-    </div>
-  </div>
-  <div class="false-header"></div>
-</template>
 
-<script setup>
+<script setup lang="ts">
 import { computed } from "vue";
 import FieldPopover from "../../FieldPopover.vue";
 
-const props = defineProps({
-  visibleFields: {
-    type: Array,
-    default: () => ([]),
-  },
-  filters: {
-    type: Object,
-    default: () => ({}),
-  },
-  fieldName: {
-    type: String,
-  }
-});
-
 defineEmits(["field-added"]);
 
+const props = withDefaults(defineProps<{
+    visibleFields: any[];
+    filters:Object;
+    fieldName: string;
+    isExpanded: boolean;
+}>(), {
+  visibleFields:  () => ([]),
+  filters: () => ({}),
+});
 const filterIcons = computed(() => {
     return props.visibleFields.reduce((options, field ) => {
         let sortIcon = ''
@@ -65,3 +28,37 @@ const filterIcons = computed(() => {
     }, {})
 })
 </script>
+
+<template>
+    <div class="sticky_header" v-bind="$attrs">
+      <template v-if="visibleFields.length">
+        <div
+          v-for="field in visibleFields"
+          :key="field.name"
+          class="item-group-row__header"
+          :class="{'items-center flex ': !isExpanded}"
+        >
+          <span class="font-bold">
+           <slot :filterIcons="filterIcons[field.name]">
+              <FieldPopover
+                  :field-data="field"
+                  :board="board"
+                  @saved="$emit('field-added', $event)"
+                  @sort="$emit('sort', $event)"
+                  @clear-sort="$emit('clear-sort')"
+              >
+                  {{ field.title }}
+                  <i :class="filterIcons[field.name].sort" />
+              </FieldPopover>
+           </slot>
+          </span>
+        </div>
+      </template>
+      <div v-else class="item-group-row__header">
+        <span class="font-bold">
+          <slot :filterIcons="filterIcons" />
+        </span>
+      </div>
+    </div>
+    <div class="false-header"></div>
+  </template>
diff --git a/resources/js/Components/board/views/List/ListCellTitle.vue b/resources/js/Components/board/views/List/ListCellTitle.vue
index 63415c5a..fe74bd60 100644
--- a/resources/js/Components/board/views/List/ListCellTitle.vue
+++ b/resources/js/Components/board/views/List/ListCellTitle.vue
@@ -1,5 +1,38 @@
+<script setup>
+import ItemGroupCell from "../../ItemGroupCell.vue";
+import { NPopover as JetDropdown } from "naive-ui"
+import JetDropdownLink from "@/Components/atoms/DropdownLink.vue"
+
+defineProps({
+        item: {
+            type: Object,
+            required: true
+        },
+        index: {
+            type: Number,
+            required: true
+        },
+        isSelectMode: {
+            type: Boolean,
+            default: false
+        },
+        selectedItems: {
+            type: Array,
+            default() {
+                return []
+            }
+        }
+});
+function getFieldValue(item, name) {
+    const fieldValue = item.fields.find(
+        field => field.field_name == name
+    );
+    return fieldValue && fieldValue.value;
+}
+</script>
+
 <template>
-    <div
+    <section
         :class="`item-false bg-gray-200 border border-white flex`"
         :key="`item-false__title-${item.id}`"
     >
@@ -104,41 +137,10 @@
             </div>
         </JetDropdown>
         <!-- /Title options -->
-    </div>
+    </section>
 </template>
 
-<script setup>
-import ItemGroupCell from "../../ItemGroupCell.vue";
-import { NPopover as JetDropdown } from "naive-ui"
-import JetDropdownLink from "@/Components/atoms/DropdownLink.vue"
 
-defineProps({
-        item: {
-            type: Object,
-            required: true
-        },
-        index: {
-            type: Number,
-            required: true
-        },
-        isSelectMode: {
-            type: Boolean,
-            default: false
-        },
-        selectedItems: {
-            type: Array,
-            default() {
-                return []
-            }
-        }
-});
-function getFieldValue(item, name) {
-    const fieldValue = item.fields.find(
-        field => field.field_name == name
-    );
-    return fieldValue && fieldValue.value;
-}
-</script>
 
 <style lang="scss" scoped>
 .points {
diff --git a/resources/js/Components/board/views/List/ListView.vue b/resources/js/Components/board/views/List/ListView.vue
index e661fd87..c44207da 100644
--- a/resources/js/Components/board/views/List/ListView.vue
+++ b/resources/js/Components/board/views/List/ListView.vue
@@ -1,8 +1,8 @@
 <script setup lang="ts">
-import { VueDraggableNext as Draggable } from "vue-draggable-next";
-import { NDropdown } from "naive-ui";
 import { computed, nextTick, reactive, ref, watch, toRefs } from "vue";
+import { NDropdown } from "naive-ui";
 import { router } from "@inertiajs/vue3";
+import { VueDraggableNext as Draggable } from "vue-draggable-next";
 
 import ItemGroupCell from "../../ItemGroupCell.vue";
 import FieldPopover from "../../FieldPopover.vue";
@@ -13,31 +13,18 @@ import ListSummaryRow from "./ListSummaryRow.vue";
 
 import { useSyncScroll } from "@/utils/useSyncScroll";
 
-const props = defineProps({
-  createMode: {
-    type: Boolean,
-  },
-  stage: {
-    type: Object,
-  },
-  board: {
-    type: Object,
-  },
-  selectedItems: {
-    type: Array,
-    default() {
-      return [];
-    },
-  },
-  items: {
-    type: Array,
-    default() {
-      return [];
-    },
-  },
-  filters: {
-    type: Object,
-  },
+const props = withDefaults(defineProps<{
+  createMode: boolean,
+  stage: Object,
+  board:  Object,
+  selectedItems:  any[],
+  items: any[],
+  filters: Object,
+  resourceName: string
+}>(), {
+    selectedItems: () => ([]),
+    items: () => ([]),
+    resourceName: 'tasks'
 });
 
 const emit = defineEmits([
@@ -226,6 +213,7 @@ const { syncScroll } = useSyncScroll("left", "ic-scroller-slim");
           class="item-false__header"
           :visibleFields="[{ name: 'title' }]"
           :filters="filters"
+          :is-expanded="isExpanded"
           v-slot:default="{ filterIcons }"
         >
           <div class="flex items-center space-x-2 header-cell">
@@ -307,8 +295,9 @@ const { syncScroll } = useSyncScroll("left", "ic-scroller-slim");
                 },
               ]"
             >
-              <div class="px-2 py-1 transition cursor-pointer hover:bg-slate-200">
-                <span> {{ items.length }} Tasks <i :class="filterIcons.sort" /></span>
+              <div class="px-2 space-x-1 py-1 transition cursor-pointer hover:bg-slate-200">
+                <span > {{ items.length }} </span>
+                <span class="first-letter:capitalize">{{ resourceName }} <i :class="filterIcons.sort" /></span>
               </div>
             </NDropdown>
           </div>
@@ -463,10 +452,10 @@ const { syncScroll } = useSyncScroll("left", "ic-scroller-slim");
 }
 
 .item-checkbox {
-  @apply bg-gray-300 mr-2 flex items-center px-2;
+  @apply bg-gray-300  flex items-center px-2;
 
   &.selection {
-    @apply bg-blue-400;
+    @apply bg-primary;
   }
 }
 
diff --git a/resources/js/Components/molecules/WidgetTitleCard.vue b/resources/js/Components/molecules/WidgetTitleCard.vue
index 9c0dd95d..d27f5ad2 100644
--- a/resources/js/Components/molecules/WidgetTitleCard.vue
+++ b/resources/js/Components/molecules/WidgetTitleCard.vue
@@ -2,24 +2,18 @@
 <script setup lang="ts">
 import { AtButton } from "atmosphere-ui";
 
-defineProps({
-    title: {
-        type: String,
-    },
+withDefaults(defineProps<{
+    title: string;
     action: {
-        type: Object,
-    },
-    hideDivider: {
-        type: Boolean
-    },
-    withPadding: {
-        type: Boolean,
-        default: true,
+        label: string,
+        iconClass?: string,
     },
-    border: {
-        type: Boolean,
-        default: true,
-    }
+    hideDivider: boolean;
+    withPadding: boolean;
+    border: boolean
+}>(), {
+    withPadding: true,
+    border: true,
 })
 </script>
 
diff --git a/resources/js/Pages/Dashboard/Partials/BudgetWidget.vue b/resources/js/Pages/Dashboard/Partials/BudgetWidget.vue
index 0c890335..6a6a45ed 100644
--- a/resources/js/Pages/Dashboard/Partials/BudgetWidget.vue
+++ b/resources/js/Pages/Dashboard/Partials/BudgetWidget.vue
@@ -1,13 +1,13 @@
 <script setup lang="ts">
-import { ref, computed, onMounted } from 'vue';
-import { ITransaction } from '@/domains/transactions/models';
-import axios from 'axios';
-import WidgetTitleCard from '@/Components/molecules/WidgetTitleCard.vue';
-import LogerButton from '@/Components/atoms/LogerButton.vue';
+import { ref } from 'vue';
 import { useI18n } from "vue-i18n";
 import VueApexCharts from "vue3-apexcharts";
-import { formatMoney } from '@/utils';
+import { router } from "@inertiajs/vue3"
+
+import WidgetTitleCard from '@/Components/molecules/WidgetTitleCard.vue';
 import BudgetProgress from '@/domains/budget/components/BudgetProgress.vue';
+
+import { formatMoney } from '@/utils';
 import { IBudgetStat } from '@/domains/budget/models/budget';
 
 interface Stat {
@@ -19,7 +19,6 @@ const props = defineProps<{
     budget: IBudgetStat
 }>();
 
-
 const stats = ref<{
     budgeted: Stat;
     spending: Stat;
@@ -86,19 +85,19 @@ const chartConfig = {
   },
   series: Object.values(stats.value).map(item => item.value),
 };
-const legend = computed(() => {
-    return chartConfig.options.labels.map((label, index) => {
-        return {
-        label: label,
-        value: chartConfig.series[index],
-        color: "",
-        };
-    });
-});
 </script>
 
 <template>
-    <WidgetTitleCard title="Budget balance" class="hidden md:block bg-primary text-white" :hide-divider="true">
+    <WidgetTitleCard
+        title="Budget balance"
+        class="hidden md:block bg-primary text-white"
+        :hide-divider="true"
+        :action="{
+            label: 'Budget',
+            iconClass: 'fa fa-chevron-right text-white'
+        }"
+        @action="router.visit('/budgets')"
+    >
         <section class="w-full">
             <section class="w-full  py-3 relative h-[155px]">
                 <article style="width: 100%; height: 300px" class="relative py-1 mb-10">
@@ -129,9 +128,6 @@ const legend = computed(() => {
                                 {{ formatMoney(stats.budgeted.value) }}
                             </span>
                         </h2>
-                        <p class="text-xs">
-                            compared to {{  formatMoney(25000) }} last month
-                        </p>
                     </section>
               </header>
               <article class="space-y-2 mt-4">
@@ -179,12 +175,6 @@ const legend = computed(() => {
         <template #icon>
             <IMdiCheck />
         </template>
-
-        <template #action>
-            <LogerButton class="primary border-primaryDark/60 bg-primaryDark/60 rounded-full text-sm" @click="updateTransactions()" :disabled="isLoading">
-                This month
-            </LogerButton>
-        </template>
     </WidgetTitleCard>
 </template>
 
diff --git a/resources/js/Pages/Finance/WatchlistShow.vue b/resources/js/Pages/Finance/WatchlistShow.vue
index d8763beb..27023b70 100644
--- a/resources/js/Pages/Finance/WatchlistShow.vue
+++ b/resources/js/Pages/Finance/WatchlistShow.vue
@@ -72,9 +72,17 @@ const statCards = computed(() => [
 ]);
 
 const parser = (transactions: Record<string, string>[]) => {
-    return transactions.map((transaction) => ({
+    const data = Object.values(transactions).reduce((allData, val) => {
+        console.log(val);
+        allData.push(...val?.data);
+        return allData;
+    }, []);
+
+    debugger
+
+    return data.map((transaction) => ({
         title: transaction.description,
-        subtitle: `${transaction?.account_from?.name} -> ${transaction.category.name}`,
+        subtitle: `${transaction?.account_from?.name} -> ${transaction.cat_name}`,
         date: transaction.date,
         value: transaction.amount,
         currencyCode: transaction.currency_code,
@@ -129,13 +137,13 @@ const categories = computed(() => {
                  </template>
                 </WidgetWatchlistStats>
             </section>
-            <ChartComparison
+            <!-- <ChartComparison
                 class="w-full mb-10 mt-4 overflow-hidden bg-white rounded-lg"
                 :title="`${resource.name} Report`"
                 ref="ComparisonRevenue"
                 :data="categories"
                 data-item-total="total_amount"
-            />
+            /> -->
         </section>
 
         <TransactionsList
diff --git a/resources/js/Pages/Housing/Chores.vue b/resources/js/Pages/Housing/Chores.vue
index 57d00ebf..fa749e24 100644
--- a/resources/js/Pages/Housing/Chores.vue
+++ b/resources/js/Pages/Housing/Chores.vue
@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import { ref, computed } from 'vue';
+import { useForm } from "@inertiajs/vue3"
 
 import AppLayout from '@/Components/templates/AppLayout.vue';
 import HouseSectionNav from '@/Components/templates/HouseSectionNav.vue';
@@ -23,6 +24,11 @@ const chorePlan = computed(() => {
     return props.chores?.at(0)
 })
 
+const createListForm = useForm({})
+const createList = () => {
+    return createListForm.post(location.pathname)
+}
+
 </script>
 
 <template>
@@ -32,12 +38,26 @@ const chorePlan = computed(() => {
       </template>
       <main class="mt-4">
         <BoardSection
+            v-if="chorePlan"
             class="w-full pt-12 mx-2 overflow-hidden"
             :board="chorePlan"
             :users="users"
             :automations="automations"
             :filters="filters"
         />
+        <WelcomeCard v-else message="Loger profiles">
+            <section class="flex flex-col items-center pb-12 mx-auto">
+                <img src="../LogerProfile/empty-box.svg" class="opacity-50" />
+                <h4 class="text-lg font-bold text-body-1"> There are not chores created</h4>
+                <p class="max-w-lg my-3">
+                    Lorem ipsum dolor sit amet consectetur adipiscing elit maecenas, ligula rutrum scelerisque vulputate netus urna dui facilisi, habitant auctor sapien a porta nisi arcu. Imperdiet curabitur accumsan torquent fusce mauris blandit fames mollis primis lacinia felis, interdum p.
+                </p>
+
+                <LogerButton variant="inverse" @click="createList" :processing="createListForm.processing">
+                    Create new chore list
+                </LogerButton>
+            </section>
+        </WelcomeCard>
   </main>
 
     </AppLayout>
diff --git a/resources/js/Pages/Meals/Index.vue b/resources/js/Pages/Meals/Index.vue
index 1afd5f05..8bedc973 100644
--- a/resources/js/Pages/Meals/Index.vue
+++ b/resources/js/Pages/Meals/Index.vue
@@ -10,15 +10,12 @@ import MealTemplate from "@/domains/meal/components/MealTemplate.vue";
 import MealSectionNav from "@/domains/meal/components/MealSectionNav.vue";
 import LogerButton from "@/Components/atoms/LogerButton.vue";
 
-const props = defineProps({
-  meals: {
-    type: Array,
-    required: true,
-  },
-  serverSearchOptions: {
-    type: Object,
-    default: () => ({}),
-  },
+const props = withDefaults(defineProps<{
+    meals: any[]
+    shoppingList: Object,
+    serverSearchOptions: Object
+}>(), {
+  serverSearchOptions:() => ({})
 });
 
 const recipes = computed(() => {
diff --git a/resources/js/Pages/Meals/Overview.vue b/resources/js/Pages/Meals/Overview.vue
index 87e97fae..bc75a586 100644
--- a/resources/js/Pages/Meals/Overview.vue
+++ b/resources/js/Pages/Meals/Overview.vue
@@ -5,7 +5,7 @@ import WelcomeCard from "@/Components/organisms/WelcomeCard.vue";
 import AppLayout from "@/Components/templates/AppLayout.vue";
 import SectionTitle from "@/Components/atoms/SectionTitle.vue";
 import LogerButton from "@/Components/atoms/LogerButton.vue";
-import ChoppingListForm from "./Partials/ChoppingListForm.vue";
+import ShoppingListForm from "./Partials/ShoppingListForm.vue";
 
 import CategoryItem from "@/domains/transactions/components/CategoryItem.vue";
 import MealWidget from "@/domains/meal/components/MealWidget.vue";
@@ -14,35 +14,12 @@ import MealSectionNav from "@/domains/meal/components/MealSectionNav.vue";
 
 import { addPlan } from "./utils";
 
-const props = defineProps({
-  meals: {
-    type: Object,
-    required: true,
-  },
-  mostLikedMeals: {
-    type: Array,
-  },
-  ingredients: {
-    type: Array,
-  },
-  user: {
-    type: Object,
-    required: true,
-  },
-
-  categories: {
-    type: Array,
-    default() {
-      return [];
-    },
-  },
-  accounts: {
-    type: Array,
-    default() {
-      return [];
-    },
-  },
-});
+const props = defineProps<{
+    meals:  Object,
+    mostLikedMeals: any[]
+    ingredients: any[]
+    shoppingList:  Object,
+}>();
 
 const pageProps = usePage().props;
 
@@ -92,13 +69,10 @@ const getMealByType = (mealTypeId) => {
         </WelcomeCard>
 
         <div class="mt-4 space-y-4">
-          <ChoppingListForm :ingredients="ingredients">
-            <template #prepend>
-              <div class="px-4 py-2 font-bold rounded-md bg-primary/10 text-primary">
-                This are the things you'll need this week according to your planning
-              </div>
-            </template>
-          </ChoppingListForm>
+            <ShoppingListForm
+                :ingredients="ingredients"
+                :shopping-list="shoppingList"
+            />
         </div>
       </div>
       <div class="py-6 space-y-4 md:w-3/12">
diff --git a/resources/js/Pages/Meals/Partials/ChoppingListForm.vue b/resources/js/Pages/Meals/Partials/ChoppingListForm.vue
deleted file mode 100644
index 7532a0fc..00000000
--- a/resources/js/Pages/Meals/Partials/ChoppingListForm.vue
+++ /dev/null
@@ -1,72 +0,0 @@
-<template>
-    <section class="rounded-md bg-base-lvl-3 pb-10">
-        <header class="px-4 py-4">
-            <slot name="prepend" />
-        </header>
-        <div class="py-5 overflow-hidden divide-base-lvl-2  divide-y-2">
-            <section v-for="(ingredient) in form.items" :key="ingredient.id" class="px-5 py-2 justify-between flex capitalize cursor-pointer text-body-1/80 font-bold">
-                <section class="flex items-center space-x-2">
-                    <IFluentFoodApple20Filled />
-                    <span>
-                        {{ ingredient.name }}
-                    </span>
-                </section>
-
-                <section class="flex items-center space-x-2">
-                    <span>
-                        ({{ ingredient.quantity }}) {{ ingredient.unit }}
-                    </span>
-                    <div class="flex h-8 overflow-hidden border rounded-lg border-primary">
-                        <Button
-                            class="flex items-center p-4 text-white bg-primary"
-                            @click="ingredient.quantity+=1">
-                            <IMdiPlus />
-                        </Button>
-                        <Button class="flex items-center p-4 text-primary "
-                        @click="ingredient.quantity-=1"
-                        >
-                            <IMdiMinus />
-                        </Button>
-                    </div>
-                </section>
-            </section>
-        </div>
-        <footer class="w-full flex px-4">
-            <LogerButton class="ml-auto" variant="secondary">
-                Create chopping list
-            </LogerButton>
-        </footer>
-    </section>
-</template>
-
-
-<script setup>
-import LogerButton from '@/Components/atoms/LogerButton.vue';
-import { useForm } from '@inertiajs/vue3';
-
-const props = defineProps({
-    ingredients: {
-        type: Array
-    }
-})
-
-
-const form = useForm({
-    name: '',
-    start_at:'',
-    end_ad: '',
-    items: [
-
-    ]
-});
-
-if (props.ingredients) {
-    console.log(typeof props.ingredients)
-    form.items = Object.entries(props.ingredients).map(([itemName, item]) => ({
-        ...item,
-        id: null,
-        name: itemName,
-        ingredient_id: item.id
-    }))
-}
-</script>
diff --git a/resources/js/Pages/Meals/Partials/ShoppingListForm.vue b/resources/js/Pages/Meals/Partials/ShoppingListForm.vue
new file mode 100644
index 00000000..b0f0fc2b
--- /dev/null
+++ b/resources/js/Pages/Meals/Partials/ShoppingListForm.vue
@@ -0,0 +1,95 @@
+
+<script setup lang="ts">
+import LogerButton from '@/Components/atoms/LogerButton.vue';
+import { useForm } from '@inertiajs/vue3';
+
+const props = defineProps<{
+    ingredients: any[];
+    shoppingList: Object
+}>()
+
+
+const form = useForm({
+    name: '',
+    start_at:'',
+    end_ad: '',
+    items: [
+
+    ]
+});
+
+if (props.ingredients) {
+    form.items = Object.entries(props.ingredients).map(([itemName, item]) => ({
+        ...item,
+        id: null,
+        name: itemName,
+        ingredient_id: item.id
+    }))
+}
+
+
+const addToShoppingList = () => {
+    form.put('/shopping-list')
+}
+</script>
+
+
+<template>
+    <section class="rounded-md bg-base-lvl-3 pb-10">
+        <header class="px-4 py-4">
+            <slot name="prepend">
+                    <div class="px-4 py-2 font-bold rounded-md bg-primary/10 text-primary">
+                        This are the things you'll need this week according to your planning
+                    </div>
+            </slot>
+        </header>
+        <div class="py-5 overflow-hidden divide-base-lvl-2  divide-y-2">
+            <section v-for="(ingredient) in form.items" :key="ingredient.id" class="px-5 py-2 justify-between flex capitalize cursor-pointer text-body-1/80">
+                <section class="flex items-center space-x-2 w-full">
+                    <IFluentFoodApple20Filled />
+                    <span class="font-bold">
+                        {{ ingredient.name }}
+                    </span>
+                </section>
+
+                <section class="text-left w-2/12">
+                    <span class="font-bold">
+                        Qty:
+                    </span>
+                    <span class="font-bold text-primary">
+                        {{ ingredient.quantity }} {{ ingredient.unit }}
+                    </span>
+                </section>
+                <section class="flex items-center space-x-2 w-2/12  justify-end">
+                    <div class="">
+                        <button
+                            class=" px-3 py-3 rounded-l-md dark:bg-base-lvl-1 bg-gray-200 transition-colors"
+                            :class="{'hover:bg-green-400 dark:hover:bg-green-400 hover:text-white': !disabled }"
+                            @click.stop="ingredient.quantity+=1">
+                                <IMdiChevronUp />
+                        </button>
+                        <button
+                            class="px-3 py-3 rounded-r-md dark:bg-base-lvl-1 bg-gray-200 transition-colors"
+                            :class="{'hover:bg-red-400 dark:hover:bg-red-400 hover:text-white': !disabled}"
+                            @click.stop="ingredient.quantity-=1">
+                                <IMdiChevronDown />
+                        </button>
+                    </div>
+                </section>
+            </section>
+        </div>
+        <footer class="w-full flex px-4">
+            <LogerButton
+                v-if="shoppingList" @click="addToShoppingList"
+                class="ml-auto"
+                variant="secondary"
+                :processing="form.processing"
+            >
+                Add to shopping list
+            </LogerButton>
+            <LogerButton class="ml-auto" variant="secondary" v-else>
+                Create shopping list
+            </LogerButton>
+        </footer>
+    </section>
+</template>
diff --git a/resources/js/Pages/Meals/ShoppingList.vue b/resources/js/Pages/Meals/ShoppingList.vue
new file mode 100644
index 00000000..3b469b56
--- /dev/null
+++ b/resources/js/Pages/Meals/ShoppingList.vue
@@ -0,0 +1,63 @@
+<script setup lang="ts">
+import { computed } from 'vue';
+import { router } from "@inertiajs/vue3"
+
+import AppLayout from '@/Components/templates/AppLayout.vue';
+import BoardSection from '@/Components/board/BoardSection.vue';
+import MealSectionNav from '@/domains/meal/components/MealSectionNav.vue';
+
+interface Plan {
+    id: number;
+}
+
+const props = defineProps<{
+    chores: Plan[];
+    users: Record<string, string>[];
+    filters: string[];
+    automations: string[];
+}>()
+
+
+const chorePlan = computed(() => {
+    return props.chores?.at(0)
+})
+
+const onSearch = (query: string) => {
+    router.replace(`${location.pathname}/${query}`)
+}
+
+</script>
+
+<template>
+    <AppLayout title="Shopping List">
+        <template #header>
+            <MealSectionNav class="h-12" />
+      </template>
+      <main class="mt-4">
+        <BoardSection
+            v-if="chorePlan"
+            class="w-full pt-12 mx-2 overflow-hidden"
+            :board="chorePlan"
+            :users="users"
+            :automations="automations"
+            :filters="filters"
+            :multi-stage="false"
+            @search="onSearch"
+            resource-name="items"
+        />
+        <WelcomeCard  v-else message="Loger profiles">
+            <section class="flex flex-col items-center pb-12 mx-auto">
+                <img src="../LogerProfile/empty-box.svg" class="opacity-50" />
+                <h4 class="text-lg font-bold text-body-1"> There are not profiles created</h4>
+                <p class="max-w-lg my-3">
+                    Lorem ipsum dolor sit amet consectetur adipiscing elit maecenas, ligula rutrum scelerisque vulputate netus urna dui facilisi, habitant auctor sapien a porta nisi arcu. Imperdiet curabitur accumsan torquent fusce mauris blandit fames mollis primis lacinia felis, interdum p.
+                </p>
+                <LogerButton variant="inverse" @click="isModalOpen = !isModalOpen">
+                    Add Loger profile
+                </LogerButton>
+            </section>
+        </WelcomeCard>
+  </main>
+
+    </AppLayout>
+</template>
diff --git a/resources/js/Pages/Meals/View.vue b/resources/js/Pages/Meals/View.vue
new file mode 100644
index 00000000..82a9db3b
--- /dev/null
+++ b/resources/js/Pages/Meals/View.vue
@@ -0,0 +1,48 @@
+<script setup lang="ts">
+import { computed } from "vue";
+import { router } from "@inertiajs/vue3";
+
+import AppLayout from "@/Components/templates/AppLayout.vue";
+import LogerButton from '@/Components/atoms/LogerButton.vue';
+
+import MealView from "@/domains/meal/components/MealView.vue";
+import MealSectionNav from "@/domains/meal/components/MealSectionNav.vue";
+import MealTemplate from "@/domains/meal/components/MealTemplate.vue";
+
+withDefaults(defineProps<{
+    meals: null|{
+        name: string;
+        id: number;
+    }
+}>(), {
+    meals: null
+});
+</script>
+
+<template>
+  <AppLayout
+    :title="meals.name"
+    :show-back-button="true"
+    @back="router.visit('/meal-planner')"
+  >
+    <template #header>
+      <MealSectionNav>
+        <template #actions>
+          <div class="flex space-x-2">
+            <LogerButton class="h-10 text-white bg-primary" rounded @click="router.visit(`/meals/${meals.id}/edit`)">
+              {{ $t('Edit') }}
+            </LogerButton>
+          </div>
+        </template>
+      </MealSectionNav>
+    </template>
+
+    <MealTemplate class="mx-auto" :show-meal-types="false">
+      <MealView
+        ref="mealForm"
+        :meal="meals"
+        class="rounded-md bg-base-lvl-3"
+      />
+    </MealTemplate>
+  </AppLayout>
+</template>
diff --git a/resources/js/Pages/System/Notifications/Index.vue b/resources/js/Pages/System/Notifications/Index.vue
index 244f5732..3ec683c5 100644
--- a/resources/js/Pages/System/Notifications/Index.vue
+++ b/resources/js/Pages/System/Notifications/Index.vue
@@ -10,7 +10,7 @@
     import { router } from '@inertiajs/vue3';
     import { formatDate } from '@/utils';
 
-    const props = defineProps({
+    defineProps({
             notifications: {
                 type: Array,
                 default() {
@@ -19,33 +19,18 @@
             }
     });
 
-    const state = reactive({
-        tableSearchOptions: {
-            resourceUrl: "/projects?sort=surename"
-        },
-        tableConfig: {
-            resourceUrl: "/projects",
-            selectable: true,
-            pagination: true,
-            searchBar: ["search", "filter", "dates", "add", "actions"],
-            dataTemplate: {
-                name: "week-pager",
-                filter: "date"
-            }
-        }
-    });
     interface INotification {
         id: number;
     }
 
-    const markAllAsRead = (notification: INotification ) => {
-        router.patch(`/notifications/${notification.id}`, {
+    const markAllAsRead = () => {
+        router.patch(`/notifications`, {
             read_at: new Date()
         })
     }
 
     const markAsRead = (notification: INotification ) => {
-        router.patch(`/notifications/${notification.id}`, {
+        router.put(`/notifications/${notification.id}`, {
             read_at: new Date()
         })
     }
@@ -63,6 +48,13 @@
                     :table-data="notifications"
                     :section="section"
                 >
+                <template #header-actions v-if="notifications.length">
+                    <div class="flex items-center ml-auto space-x-2">
+                    <AtButton class="ml-auto text-white transition-colors rounded-md bg-primary" @click="markAllAsRead">
+                        Mark all as read
+                    </AtButton>
+                    </div>
+                </template>
                  <template #data="{ scope }">
                     <article class="w-full py-2 pl-4 space-between">
                         <header>
diff --git a/resources/js/Pages/Trends/Overview.vue b/resources/js/Pages/Trends/Overview.vue
index 92fbd6a3..5d7cdab2 100644
--- a/resources/js/Pages/Trends/Overview.vue
+++ b/resources/js/Pages/Trends/Overview.vue
@@ -77,6 +77,10 @@ const trends = [
     {
         label: 'Year spending',
         url: '/trends/spending-year'
+    },
+    {
+        label: 'Year assigned',
+        url: '/trends/assigned-year'
     }
 ]
 
@@ -86,7 +90,8 @@ const components = {
     netWorth: ChartNetWorth,
     incomeExpenses: IncomeExpenses,
     incomeExpensesGraph:  ChartNetWorth,
-    spendingYear: ChartComparison
+    spendingYear: ChartComparison,
+    assignedYear: ChartComparison,
 }
 
 const trendComponent = computed(() => {
diff --git a/resources/js/domains/app/menus.ts b/resources/js/domains/app/menus.ts
index 51f3792a..66c6aff7 100644
--- a/resources/js/domains/app/menus.ts
+++ b/resources/js/domains/app/menus.ts
@@ -11,22 +11,22 @@ const menus = {
         label: 'Overview',
         url: '/housing'
     },
-    // {
-    //     label: 'Chores',
-    //     url: '/housing/chores'
-    // },
+    {
+        label: 'Chores',
+        url: '/housing/chores'
+    },
     {
         label: 'Occurrence Checks',
         url: '/housing/occurrence'
     },
-    // {
-    //     label: 'Plans',
-    //     url: '/housing/plans'
-    // },
-    // {
-    //     label: 'Equipment',
-    //     url: '/housing/equipments'
-    // }
+    {
+        label: 'Plans',
+        url: '/housing/plans'
+    },
+    {
+        label: 'Equipment',
+        url: '/housing/equipments'
+    }
     ],
     [MODULES.MEAL]: [
         {
@@ -43,6 +43,10 @@ const menus = {
         {
             label: 'Ingredients',
             url: '/ingredients'
+        },
+        {
+            label: 'Shopping List',
+            url: '/shopping-list'
         }, {
             label: 'Menus',
             url: '/meals/menus',
diff --git a/resources/js/domains/budget/models/budget.ts b/resources/js/domains/budget/models/budget.ts
index e6b4fb98..9ce697c2 100644
--- a/resources/js/domains/budget/models/budget.ts
+++ b/resources/js/domains/budget/models/budget.ts
@@ -3,7 +3,7 @@ import { ICategory } from "@/domains/transactions/models";
 export interface IBudgetStat {
     spending: number;
     total: number;
-    saving: number;
+    savings: number;
 }
 export interface BudgetTarget {
     amount: number
diff --git a/resources/js/domains/meal/components/MealFormLine.vue b/resources/js/domains/meal/components/MealFormLine.vue
index d1dffc46..95aa4bd2 100644
--- a/resources/js/domains/meal/components/MealFormLine.vue
+++ b/resources/js/domains/meal/components/MealFormLine.vue
@@ -3,27 +3,31 @@
 
     import LogerInput from "@/Components/atoms/LogerInput.vue";
     import LogerApiSimpleSelect from "@/Components/organisms/LogerApiSimpleSelect.vue";
+    import { IMealIngredient } from "../models";
 
     defineEmits(['close']);
-    defineProps({
-        meal: {
-            type: Object,
-            default: () => ({
-                name: '',
-            }),
-        },
-        ingredient: {
-            type: Object,
-            required: true,
-        },
-        index: {
-            type: Number
-        }
+
+    withDefaults(defineProps<{
+        meal: Object;
+        ingredient: IMealIngredient;
+        index: number;
+        viewOnly: boolean
+    }>(), {
+        meal: () => ({
+            name: '',
+        })
     });
 </script>
 
 <template>
-    <div class="flex px-2 py-2 overflow-hidden rounded-md bg-base-lvl-3">
+    <article class="flex px-2 py-2 overflow-hidden rounded-md bg-base-lvl-3" v-if="viewOnly">
+        <section>
+            <h4 class="text-lg first-letter:capitalize font-bold">{{ ingredient.name }}</h4>
+            <p><span>{{ ingredient.quantity }} {{ ingredient.unit}}</span></p>
+        </section>
+    </article>
+
+    <div class="flex px-2 py-2 overflow-hidden rounded-md bg-base-lvl-3" v-else>
         <AtField class="px-4" label="Qty">
             <LogerInput bordered rounded type="number" v-model="ingredient.quantity" />
         </AtField>
diff --git a/resources/js/domains/meal/components/MealSection.vue b/resources/js/domains/meal/components/MealSection.vue
index 000d42cb..dbf0e60a 100644
--- a/resources/js/domains/meal/components/MealSection.vue
+++ b/resources/js/domains/meal/components/MealSection.vue
@@ -17,7 +17,7 @@
     }
 
     interface Meal {
-[x: string]: any;
+        [x: string]: any;
         id: number;
         name: string;
         is_liked: boolean;
@@ -66,7 +66,6 @@
                 </AtButton>
 
                 <span @click="$emit('click', meal)" class="capitalize transition hover:text-primary">
-
                     {{ meal.name }}
                 </span>
             </div>
@@ -77,15 +76,31 @@
                         {{ ingredient.name  }}
                     </div>
                 </div>
-                <LogerButton 
+                <div class="flex items-center space-x-1 font-bold">
+                    <div v-for="tag in meal.labels" :style="{color: tag.color}" :key="tag.id">
+                        #{{ tag.name  }}
+                    </div>
+                    <LogerApiSimpleSelect
+                        v-model="label.label_id"
+                        v-model:label="label.name"
+                        class="w-24"
+                        tag
+                        custom-label="name"
+                        track-id="id"
+                        placeholder="Add label"
+                        endpoint="/api/labels"
+                        @update:label="$emit('tag-selected', label, meal)"
+                    />
+                </div>
+                <LogerButton
                     variant="error"
                     @click="deleteResource(meal)"
                     :disabled="deleteForm.processing"
                     :processing="deleteForm.processing && deleteForm.id==meal.id"
                 >
-                <template #icon>
-                    <i class="fa fa-trash"></i>
-                </template>
+                    <template #icon>
+                        <i class="fa fa-trash"></i>
+                    </template>
                 </LogerButton>
             </div>
         </article>
diff --git a/resources/js/domains/meal/components/MealView.vue b/resources/js/domains/meal/components/MealView.vue
new file mode 100644
index 00000000..5cd0f32b
--- /dev/null
+++ b/resources/js/domains/meal/components/MealView.vue
@@ -0,0 +1,99 @@
+<script setup lang="ts">
+    import { useForm, router } from "@inertiajs/vue3"
+    import { computed } from 'vue'
+
+    import MealFormLine from "./MealFormLine.vue";
+    import WidgetContainer from "@/Components/WidgetContainer.vue";
+    import LogerButton from "@/Components/atoms/LogerButton.vue";
+
+    defineEmits(['close']);
+    const props = defineProps({
+        meal: {
+            type: Object,
+            default: () => ({
+                name: '',
+            }),
+        }
+    });
+
+    const form = useForm({
+        ...{
+            name: props.meal?.name,
+        },
+        ingredients: props.meal ? [...props.meal.ingredients, {}]: [{}]
+    })
+
+    const checkIngredients = (index: number, value: string) => {
+        if (form.ingredients.length == index + 1 && value) {
+            form.ingredients.push({
+                unit: 'unit',
+                quantity: 1,
+                product_id: "",
+                name: ''
+            })
+        }
+    }
+
+    const mealSections = computed(() => [
+    {
+        name: "ingredients",
+        label: "Ingredients",
+    },
+    {
+        name: "recipe",
+        label: "Recipe",
+    },
+    {
+        name: "instructions",
+        label: "Instructions",
+    }]);
+
+    const addToShoppingList = () => {
+        router.post(`/meals/${props.meal.id}/shopping-list`)
+    }
+</script>
+
+<template>
+    <article class="text-body">
+        <section class="rounded-t-md h-64 w-full bg-gray-300 relative">
+            <span class="absolute bg-primary/10 font-bold text-sm text-primary top-2.5 right-5 rounded-md px-2"> Hola</span>
+        </section>
+
+        <WidgetContainer
+          :message="meal.name"
+          :tabs="mealSections"
+          :default-tab="mealSections[0].name"
+          class="order-2 mt-4 lg:mt-0 lg:order-1"
+        >
+
+        <template #ingredients>
+            <section class="pb-4">
+                <MealFormLine v-for="(ingredient, index) in form.ingredients"
+                    view-only
+                    :key="`${ingredient.id}-${index}`"
+                    :meal="meal"
+                    :index="index"
+                    :ingredient="ingredient"
+                    @check="checkIngredients(index, $event)"
+                />
+                <LogerButton class="mt-4 w-full text-center justify-center" variant="secondary" @click="addToShoppingList">
+                    Add to shopping list
+                </LogerButton>
+            </section>
+        </template>
+
+        <template #recipe>
+            <section v-if="meal.notes"> {{ meal.notes }}</section>
+            <section v-else class="text-center pb-6 text-2xl font-bold text-body-1/20 first-letter:capitalize"> no description</section>
+        </template>
+
+        <template #instructions>
+            <section v-if="meal.instructions"> {{ meal.instructions }}</section>
+            <section v-else class="text-center pb-6 text-2xl font-bold text-body-1/20 first-letter:capitalize">
+                no instructions
+            </section>
+        </template>
+
+        </WidgetContainer>
+    </article>
+</template>
diff --git a/resources/js/domains/meal/models/index.ts b/resources/js/domains/meal/models/index.ts
new file mode 100644
index 00000000..0a862ba3
--- /dev/null
+++ b/resources/js/domains/meal/models/index.ts
@@ -0,0 +1,6 @@
+export interface IMealIngredient {
+    product_id: number;
+    name: string;
+    quantity: number;
+    unit: string;
+}
diff --git a/resources/js/domains/transactions/components/TransactionItems.vue b/resources/js/domains/transactions/components/TransactionItems.vue
index ceb5b053..ef8382c5 100644
--- a/resources/js/domains/transactions/components/TransactionItems.vue
+++ b/resources/js/domains/transactions/components/TransactionItems.vue
@@ -15,6 +15,8 @@ import { TRANSACTION_DIRECTIONS } from "..";
 interface SplitItem {
     payee_id: null|number,
     payee_label: string,
+    label_id: null|number,
+    label_name: string,
     date: null|Date,
     description: string,
     category_id: null|number,
@@ -54,7 +56,7 @@ const categoryAccounts = computed(() => {
     } else {
         return categoryOptions.filter((category) => {
             const isInflow = props.mode == TRANSACTION_DIRECTIONS.DEPOSIT;
-            return (isInflow && category.display_id == "inflow") || !isInflow; 
+            return (isInflow && category.display_id == "inflow") || !isInflow;
         });
     }
 });
@@ -65,6 +67,8 @@ const hasSplits = computed(() => splits.length > 1);
 const defaultRow = {
     payee_id: null,
     payee_label: "",
+    label_id: null,
+    label_name: "",
     date: null,
     description: "",
     category_id: null,
@@ -92,6 +96,11 @@ if (!props.items?.length) {
   addSplit();
 }
 
+const label = reactive({
+    label_id: "",
+    name: ""
+})
+
 defineExpose({
   getSplits() {
     return splits;
@@ -173,6 +182,19 @@ const isPickerOpen = ref(false);
                 :options="categoryAccounts"
               />
             </AtField>
+            <AtField label="Tags" class="hidden md:block md:w-full">
+                <LogerApiSimpleSelect
+                    v-model="split.label_id"
+                    v-model:label="split.label_name"
+                    :allow-create="true"
+                    class="w-full"
+                    tag
+                    custom-label="name"
+                    track-id="id"
+                    placeholder="Add label"
+                    endpoint="/api/labels"
+                />
+            </AtField>
         </section>
         <AtField label="Amount" class="hidden md:block md:w-5/12">
           <InputMoney :number-format="true" v-model="split.amount" v-model:history="split.history">
@@ -215,10 +237,10 @@ const isPickerOpen = ref(false);
       </footer>
     </section>
 
-    <LogerButton 
+    <LogerButton
         v-if="!isTransfer"
-        variant="neutral" 
-        @click="addSplit()" 
+        variant="neutral"
+        @click="addSplit()"
     >
       <IMdiCallSplit />
       Add split
diff --git a/resources/js/domains/transactions/components/TransactionModal.vue b/resources/js/domains/transactions/components/TransactionModal.vue
index d8930ddc..4e3fff6c 100644
--- a/resources/js/domains/transactions/components/TransactionModal.vue
+++ b/resources/js/domains/transactions/components/TransactionModal.vue
@@ -24,7 +24,7 @@ const props = defineProps({
     default: false,
   },
   maxWidth: {
-    default: "2xl",
+    default: "4xl",
   },
   closeable: {
     default: true,
@@ -74,6 +74,8 @@ const state = reactive({
     name: "",
     payee_id: "",
     payee_label: "",
+    label_id: "",
+    label_name: "",
     date: new Date(),
     is_transfer: false,
     description: "",
@@ -134,9 +136,12 @@ watch(
     if (newValue.has_splits) {
         splits.value = props.transactionData?.splits ?? props.transactionData.lines?.filter((line: ITransactionLine) => line.is_split)
     } else {
+        const anchorLine = newValue.lines.find(item => item.anchor)
         splits.value = [{
             payee_id: newValue.payee_id ?? newValue.payee?.id,
             payee_label: newValue.payee?.name,
+            label_id: newValue.label_id ?? anchorLine?.labels?.at?.(0)?.id,
+            label_name: anchorLine?.labels?.at?.(0)?.name,
             category_id: newValue.category_id ?? newValue.category?.id,
             category: newValue.category,
             counter_account_id:  newValue.counter_account_id ?? newValue.counter_account?.id,
@@ -164,6 +169,8 @@ const resetSplits = (lastSaved: Record<string, any>) => {
     splits.value = [{
         payee_id: '',
         payee_label: '',
+        label_id: '',
+        label_name: '',
         category_id: '',
         category: '',
         counter_account_id:  '',
@@ -229,6 +236,7 @@ const onSubmit = (addAnother = false) => {
 
           const splitItem = splitItems[0]
           data.category_id = splitItem.category_id;
+          data.label_id = splitItem.label_id;
           data.payee_id = splitItem.payee_id;
           data.counter_account_id = form.is_transfer ? splitItem.counter_account_id : null;
           data.account_id = splitItem.account_id;
@@ -273,6 +281,15 @@ const { form, schedule_settings } = toRefs(state);
 const saveText = computed(() => {
     return !props.transactionData?.id ? 'save' : 'update'
 })
+
+const assignTransactionLabel = (label: Record<string, string>, transaction: Record<string, string>) => {
+  axios.post(`/api/transactions/${transaction.id}/labels`, {
+    ...label,
+    color: generateRandomColor(),
+  }).then(() => {
+    router.reload()
+  });
+};
 </script>
 
 <template>
diff --git a/routes/web.php b/routes/web.php
index 8fa39acb..76344031 100644
--- a/routes/web.php
+++ b/routes/web.php
@@ -22,6 +22,7 @@
 use App\Http\Controllers\System\NotificationController;
 use App\Http\Controllers\Finance\FinanceLinesController;
 use App\Http\Controllers\Finance\FinanceTrendController;
+use App\Http\Controllers\Meal\MealShoppingListController;
 use App\Http\Controllers\System\TeamInvitationController;
 use App\Http\Controllers\Finance\FinanceAccountController;
 use Freesgen\Atmosphere\Http\Controllers\SettingsController;
@@ -74,7 +75,8 @@
 
     Route::controller(NotificationController::class)->group(function () {
         Route::get('/notifications', 'index')->name('notifications');
-        Route::patch('/notifications/{notificationId}', 'update')->name('notifications.update');
+        Route::put('/notifications/{notificationId}', 'update')->name('notifications.update');
+        Route::patch('/notifications', 'bulkUpdate')->name('notifications.bulk-update');
     });
 
     /**************************************************************************************
@@ -97,6 +99,12 @@
         Route::get('/meals-random', 'random')->name('meals.random');
     });
 
+    Route::controller(MealShoppingListController::class)->group(function () {
+        Route::get('/shopping-list', 'index')->name('meals.shoppingList');
+        Route::put('/shopping-list', 'update')->name('meals.shoppingList.update');
+        Route::post('/meals/{meal}/shopping-list', 'store')->name('meals.shoppingList.add');
+    });
+
     Route::controller(IngredientController::class)->group(function () {
         Route::resource('/ingredients', IngredientController::class);
     });
diff --git a/tailwind.config.cjs b/tailwind.config.cjs
index 0af5a7b8..5be316d6 100644
--- a/tailwind.config.cjs
+++ b/tailwind.config.cjs
@@ -39,7 +39,6 @@ module.exports = {
             }
         },
     },
-
     plugins: [
         require('@tailwindcss/typography'),
         require('@mertasan/tailwindcss-variables')