From 3bc15f2b3056ce96365186f92d49cade9281f761 Mon Sep 17 00:00:00 2001
From: User <oleksandr.palamarchuk1310@gmail.com>
Date: Sat, 16 May 2026 17:38:07 +0300
Subject: [PATCH 01/12] Fix align for navabars

---
 src/ExpensesCalculator.UI/public/i18n/en.json |   4 +
 src/ExpensesCalculator.UI/public/i18n/ua.json |   4 +
 .../src/app/app.component.html                |   2 +-
 .../day-expenses-details.component.css        |  24 +++
 .../day-expenses-details.component.html       |   4 +-
 .../day-expenses-list.component.css           | 109 ++++++++++++-
 .../day-expenses-list.component.html          | 150 ++++++++++++++++--
 .../day-expenses-list.component.ts            |  83 +++++++---
 .../filter-bar/filter-bar.component.css       |  23 +++
 .../filter-bar/filter-bar.component.html      |   2 +-
 .../horizontal-navbar.component.css           |  31 ++++
 .../horizontal-navbar.component.html          |   6 +-
 .../vertical-navbar.component.css             |  59 +++++++
 .../vertical-navbar.component.html            |  10 +-
 src/ExpensesCalculator.UI/src/styles.css      | 130 +++++++++++++++
 15 files changed, 588 insertions(+), 53 deletions(-)

diff --git a/src/ExpensesCalculator.UI/public/i18n/en.json b/src/ExpensesCalculator.UI/public/i18n/en.json
index f6edd69..5d1dcc0 100644
--- a/src/ExpensesCalculator.UI/public/i18n/en.json
+++ b/src/ExpensesCalculator.UI/public/i18n/en.json
@@ -287,6 +287,10 @@
     "EXPENSES_TABLE_CONTENT": "This table shows the expenses. Click on any column header to sort your expenses by that field. The table below displays all expense rows, which you can double-click to view details.",
     "ACTIONS_MENU_TITLE": "Actions Menu",
     "ACTIONS_MENU_CONTENT": "Click the three dots button to access actions for each expense. You can open details, calculate expenses, edit, share with other users, or delete the expense entry.",
+    "SORT_CONTROLS_TITLE": "Sort Controls",
+    "SORT_CONTROLS_CONTENT": "Use these buttons to sort your expenses. Click any button to sort by that field (Date, Location, Participants, or Total Sum). Click again to toggle between ascending and descending order.",
+    "EXPENSES_ACCORDION_TITLE": "Expenses List",
+    "EXPENSES_ACCORDION_CONTENT": "This accordion shows all your expenses. Each row displays the date and location. Click the arrow to expand and view participants, total sum, and action buttons to manage the expense.",
     "PAGINATION_TITLE": "Pagination Controls",
     "PAGINATION_CONTENT": "Navigate through your expenses with these controls. Change the number of items displayed per page using the dropdown on the right."
   },
diff --git a/src/ExpensesCalculator.UI/public/i18n/ua.json b/src/ExpensesCalculator.UI/public/i18n/ua.json
index 9fd4254..e7c1859 100644
--- a/src/ExpensesCalculator.UI/public/i18n/ua.json
+++ b/src/ExpensesCalculator.UI/public/i18n/ua.json
@@ -287,6 +287,10 @@
     "EXPENSES_TABLE_CONTENT": "Ця таблиця показує витрати. Натисніть на будь-який заголовок стовпця, щоб відсортувати витрати за цим полем. Таблиця нижче відображає всі рядки витрат, які можна двічі клацнути для перегляду деталей.",
     "ACTIONS_MENU_TITLE": "Меню дій",
     "ACTIONS_MENU_CONTENT": "Натисніть кнопку з трьома крапками, щоб отримати доступ до дій для кожної витрати. Ви можете відкрити деталі, розрахувати витрати, редагувати, поділитися з іншими користувачами або видалити запис витрат.",
+    "SORT_CONTROLS_TITLE": "Елементи керування сортуванням",
+    "SORT_CONTROLS_CONTENT": "Використовуйте ці кнопки для сортування ваших витрат. Натисніть будь-яку кнопку, щоб відсортувати за цим полем (Дата, Місце, Учасники або Загальна сума). Натисніть ще раз, щоб перемикатися між зростанням та спаданням.",
+    "EXPENSES_ACCORDION_TITLE": "Список витрат",
+    "EXPENSES_ACCORDION_CONTENT": "Цей розкривний список показує всі ваші витрати. Кожен рядок відображає дату та місце. Натисніть стрілку, щоб розгорнути та переглянути учасників, загальну суму та кнопки дій для керування витратами.",
     "PAGINATION_TITLE": "Сторінки",
     "PAGINATION_CONTENT": "Перемикайтеся між витратами за допомогою цих елементів керування. Змініть кількість елементів на сторінці, використовуючи випадаюче меню справа."
   },
diff --git a/src/ExpensesCalculator.UI/src/app/app.component.html b/src/ExpensesCalculator.UI/src/app/app.component.html
index f2548d7..927aedb 100644
--- a/src/ExpensesCalculator.UI/src/app/app.component.html
+++ b/src/ExpensesCalculator.UI/src/app/app.component.html
@@ -5,7 +5,7 @@
         </div>
         <div class="col-10 dark-blue-0 d-flex flex-column" style="padding: 0; min-height: 100vh;">
             <div class="sticky-top dark-blue-0" style="z-index: 1000;">
-                <nav class="navbar navbar-expand px-4 justify-content-end">
+                <nav class="navbar navbar-expand pe-3 justify-content-end">
                     <app-horizontal-navbar></app-horizontal-navbar>
                 </nav>
                 <hr class="my-0" style="border-color: rgba(255,255,255,0.1); opacity: 1;" />
diff --git a/src/ExpensesCalculator.UI/src/app/dayExpenses/day-expenses-details/day-expenses-details.component.css b/src/ExpensesCalculator.UI/src/app/dayExpenses/day-expenses-details/day-expenses-details.component.css
index 51fccb7..ae68b57 100644
--- a/src/ExpensesCalculator.UI/src/app/dayExpenses/day-expenses-details/day-expenses-details.component.css
+++ b/src/ExpensesCalculator.UI/src/app/dayExpenses/day-expenses-details/day-expenses-details.component.css
@@ -101,3 +101,27 @@
     align-items: center;
     justify-content: center;
 }
+
+/* Responsive card sizing for small screens */
+@media (max-width: 576px) {
+    /* Back button sizing */
+    #backButton {
+        padding: 0.25rem 0.5rem !important;
+    }
+
+    .info-card {
+        padding: 0.75rem !important;
+    }
+
+    .info-card .text-white {
+        font-size: 0.75rem !important;
+    }
+
+    .info-card .h6 {
+        font-size: 0.85rem !important;
+    }
+
+    .info-card .fs-5 {
+        font-size: 0.9rem !important;
+    }
+}
diff --git a/src/ExpensesCalculator.UI/src/app/dayExpenses/day-expenses-details/day-expenses-details.component.html b/src/ExpensesCalculator.UI/src/app/dayExpenses/day-expenses-details/day-expenses-details.component.html
index 1ecd3e4..b6f0095 100644
--- a/src/ExpensesCalculator.UI/src/app/dayExpenses/day-expenses-details/day-expenses-details.component.html
+++ b/src/ExpensesCalculator.UI/src/app/dayExpenses/day-expenses-details/day-expenses-details.component.html
@@ -1,10 +1,10 @@
 <tour-step-template></tour-step-template>
 
-<div class="rounded mt-4 mb-5 ms-sm-4 me-sm-4 dark-blue-1">
+<div class="rounded mt-4 mb-5 mx-3 ms-sm-4 me-sm-4 dark-blue-1">
     <div *ngIf="!isLoading && dayExpenses" class="container-fluid p-3 text-white">
 
         <div class="d-flex align-items-center justify-content-between mb-3">
-            <button class="btn btn-outline-primary text-white px-4" (click)="navigateToList()" tourAnchor="back-btn">
+            <button id="backButton" class="btn btn-outline-primary text-white px-4" (click)="navigateToList()" tourAnchor="back-btn">
                 <i class="bi bi-arrow-left" style="transform: scaleX(2); display: inline-block;"></i>
             </button>
 
diff --git a/src/ExpensesCalculator.UI/src/app/dayExpenses/day-expenses-list/day-expenses-list.component.css b/src/ExpensesCalculator.UI/src/app/dayExpenses/day-expenses-list/day-expenses-list.component.css
index e7b7c34..9ce585c 100644
--- a/src/ExpensesCalculator.UI/src/app/dayExpenses/day-expenses-list/day-expenses-list.component.css
+++ b/src/ExpensesCalculator.UI/src/app/dayExpenses/day-expenses-list/day-expenses-list.component.css
@@ -13,6 +13,7 @@ th {
 
 td {
     vertical-align: middle !important;
+    white-space: nowrap;
 }
 
 .table tr:nth-child(odd) td {
@@ -117,14 +118,22 @@ td {
   border-color: black;
 }
 
-/* Override table-responsive overflow to prevent scrollbar issues with dropdowns */
+/* Enable horizontal scrolling while keeping dropdowns visible */
 .fix-table-height {
-  overflow: visible !important;
+  overflow-x: auto !important;
+  overflow-y: visible !important;
 }
 
-/* Ensure dropdowns are positioned above other content */
+/* Ensure dropdowns are positioned above other content and can overlay */
 .dropdown-menu {
   z-index: 1050;
+  position: absolute !important;
+  will-change: transform;
+}
+
+/* Allow dropdown to escape overflow container */
+tr .dropdown {
+  position: static;
 }
 
 /* Truncate location column to approximately 15 characters */
@@ -133,4 +142,98 @@ td {
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
+}
+
+/* Component-specific responsive styles */
+@media (max-width: 576px) {
+  /* Reduce spacing around Add Expenses button */
+  hr.my-3 {
+    margin-top: 0.5rem !important;
+    margin-bottom: 0.5rem !important;
+  }
+
+  .table {
+    font-size: 0.85rem !important;
+  }
+
+  /* Pagination elements */
+  .pagination-container {
+    font-size: 0.9rem !important;
+    flex-direction: column !important;
+    align-items: center !important;
+    gap: 15px !important;
+  }
+
+  .pagination-container > div:first-child {
+    width: 100% !important;
+    text-align: left !important;
+  }
+
+  .page-size-selector {
+    font-size: 0.9rem !important;
+    width: 100% !important;
+    justify-content: flex-end !important;
+    margin-top: 0 !important;
+    padding-right: 0.5rem !important;
+  }
+
+  .pagination-container .btn {
+    font-size: 0.8rem !important;
+    padding: 0.25rem 0.5rem !important;
+  }
+
+  /* Filter controls */
+  .input-group {
+    font-size: 0.8rem !important;
+  }
+
+  /* Date range control sizing */
+  #dateRangeInput {
+    font-size: 0.75rem !important;
+    padding: 0.25rem 0.5rem !important;
+  }
+
+  #calendarButton {
+    font-size: 0.75rem !important;
+    padding: 0.25rem 0.5rem !important;
+  }
+
+  /* Make date range input full width on small screens */
+  .input-group.text-center {
+    min-width: 100% !important;
+    width: 100% !important;
+  }
+}
+
+/* Accordion styles for small screens */
+.accordion-button {
+  background-color: transparent !important;
+  box-shadow: none !important;
+  border-radius: 0 !important;
+}
+
+.accordion-button:not(.collapsed) {
+  background-color: transparent !important;
+  color: white !important;
+}
+
+.accordion-button::after {
+  filter: invert(1);
+}
+
+.accordion-button:focus {
+  box-shadow: none !important;
+  border-color: transparent !important;
+}
+
+.accordion-item {
+  border-bottom: 1px solid rgba(13, 110, 253, 0.3) !important;
+}
+
+.accordion-item:last-child {
+  border-bottom: none !important;
+}
+
+.accordion-body {
+  border-top: 1px solid rgba(13, 110, 253, 0.2);
 }
\ No newline at end of file
diff --git a/src/ExpensesCalculator.UI/src/app/dayExpenses/day-expenses-list/day-expenses-list.component.html b/src/ExpensesCalculator.UI/src/app/dayExpenses/day-expenses-list/day-expenses-list.component.html
index 0805874..66cd1d4 100644
--- a/src/ExpensesCalculator.UI/src/app/dayExpenses/day-expenses-list/day-expenses-list.component.html
+++ b/src/ExpensesCalculator.UI/src/app/dayExpenses/day-expenses-list/day-expenses-list.component.html
@@ -1,17 +1,17 @@
 <tour-step-template></tour-step-template>
 
-<div class="rounded mt-4 mb-5 ms-sm-4 me-sm-4 dark-blue-1">
-    <div class="container-fluid px-3 pt-2 text-white">
+<div class="rounded mt-4 mb-5 mx-3 ms-sm-4 me-sm-4 dark-blue-1">
+    <div class="container-fluid px-2 px-sm-3 pt-2 text-white">
         <div class="d-flex align-items-center justify-content-between">
             <div class="d-flex align-items-center gap-2">
-                <h4 class="mt-1 mb-4">
+                <h4 class="mt-1 mb-3 mb-sm-4">
                     <i class="bi bi-list-nested me-1"></i>{{ 'EXPENSES.TITLE' | translate }}
                 </h4>
-                <button class="btn btn-sm btn-outline-primary text-white mb-3" (click)="startTour()" title="Start tour">
+                <button class="btn btn-sm btn-outline-primary text-white mb-3 mb-sm-3" (click)="startTour()" title="Start tour">
                     <i class="bi bi-question-circle"></i>
                 </button>
             </div>
-            <div class="spinner-border" [class.invisible]="!isLoading" role="status"></div>
+            <div class="spinner-border mt-1 mb-3 mb-sm-4" [class.invisible]="!isLoading" role="status"></div>
         </div>
 
         <button *ngIf="showAddExpenseButton()" class="btn btn-outline-primary text-white" tourAnchor="add-expense-btn" (click)="openModal('add', '')">
@@ -28,11 +28,11 @@ <h5 class="pt-3">{{ 'EXPENSES.NO_DATA_HINT' | translate }}</h5>
             <i class="bi bi-plus-circle me-1"></i>{{ 'EXPENSES.ADD' | translate }}
         </button>
     </div>
-    <div *ngIf="showFilterControls()" class="d-flex justify-content-end pb-lg-2 px-2 mt-3 mb-2">
+    <div *ngIf="showFilterControls()" class="d-flex justify-content-start justify-content-lg-end pb-lg-2 mt-3 mb-2">
         <div class="col-12">
-            <div class="d-flex flex-column flex-lg-row gap-2 align-items-stretch align-items-lg-center justify-content-lg-between">
+            <div class="d-flex flex-column flex-lg-row gap-2 align-items-stretch align-items-lg-center justify-content-lg-between px-2 px-sm-3">
                 <!-- LEFT SIDE: Date range -->
-                <div class="d-flex flex-column ms-2" tourAnchor="date-range-filter">
+                <div class="d-flex flex-column" tourAnchor="date-range-filter">
                     <small class="text-white-50 mb-1" style="font-size: 0.7rem;">
                         <i class="bi bi-calendar-range me-1"></i>{{ 'EXPENSES.DATE_FILTER' | translate }}
                     </small>
@@ -80,7 +80,8 @@ <h5 class="pt-3">{{ 'EXPENSES.NO_DATA_HINT' | translate }}</h5>
     <div *ngIf="showNoSearchResults()" class="text-white text-center py-4">
         <h3>{{ 'EXPENSES.NO_SEARCH_RESULTS' | translate }}</h3>
     </div>
-    <div *ngIf="expensesList.length > 0" class="table-responsive fix-table-height">
+    <!-- Table view for larger screens -->
+    <div *ngIf="expensesList.length > 0" class="table-responsive fix-table-height d-none d-sm-block">
         <table class="table table-borderless text-white mb-0" id="daysTable">
             <thead tourAnchor="expenses-table">
                 <tr>
@@ -94,12 +95,12 @@ <h3>{{ 'EXPENSES.NO_SEARCH_RESULTS' | translate }}</h3>
                         {{ 'EXPENSES.LOCATION' | translate }}
                         <i [ngClass]="getIconOrderClass('location')"></i>
                     </th>
-                    <th class="text-nowrap bg-transparent text-white" width="25%" (click)="sortExpenses('participants')">
+                    <th class="text-nowrap bg-transparent text-white d-none d-sm-table-cell" width="25%" (click)="sortExpenses('participants')">
                         <i class="bi bi-people-fill pe-1"></i>
                         {{ 'EXPENSES.PARTICIPANTS' | translate }}
                         <i [ngClass]="getIconOrderClass('participants')"></i>
                     </th>
-                    <th class="text-nowrap bg-transparent text-white" width="20%" (click)="sortExpenses('totalSum')">
+                    <th class="text-nowrap bg-transparent text-white d-none d-sm-table-cell" width="20%" (click)="sortExpenses('totalSum')">
                         <i class="bi bi-cash-stack pe-1"></i>
                         {{ 'EXPENSES.TOTAL_SUM' | translate }}
                         <i [ngClass]="getIconOrderClass('totalSum')"></i>
@@ -115,7 +116,7 @@ <h3>{{ 'EXPENSES.NO_SEARCH_RESULTS' | translate }}</h3>
                     <td class="text-white location-cell">
                         {{ day.location || '-' }}
                     </td>
-                    <td>
+                    <td class="d-none d-sm-table-cell">
                         <label
                             class="text-nowrap text-white"
                             style="cursor: pointer;"
@@ -126,7 +127,7 @@ <h3>{{ 'EXPENSES.NO_SEARCH_RESULTS' | translate }}</h3>
                             {{ day.participants.length }} {{ 'EXPENSES.PEOPLE' | translate }}
                         </label>
                     </td>
-                    <td class="text-nowrap" class="text-white">
+                    <td class="text-nowrap text-white d-none d-sm-table-cell">
                         {{ day.totalSum | currency:'UAH':'₴' }}
                     </td>
                     <td>
@@ -170,6 +171,129 @@ <h3>{{ 'EXPENSES.NO_SEARCH_RESULTS' | translate }}</h3>
             </tbody>
         </table>
     </div>
+
+    <!-- Sort controls for small screens -->
+    <div *ngIf="expensesList.length > 0" class="d-block d-sm-none mb-2 px-2" tourAnchor="sort-controls">
+        <div class="d-flex flex-column">
+            <small class="text-white-50 mb-1" style="font-size: 0.7rem;">
+                <i class="bi bi-sort-down me-1"></i>{{ 'ITEMS.SORT.CAPTION' | translate }}
+            </small>
+            <div class="d-flex flex-wrap gap-2">
+                <button class="btn btn-sm btn-outline-primary text-white flex-fill" (click)="sortExpenses('date')">
+                    <i class="bi bi-calendar-event me-1"></i>{{ 'EXPENSES.DATE' | translate }}
+                    <i [ngClass]="getIconOrderClass('date')"></i>
+                </button>
+                <button class="btn btn-sm btn-outline-primary text-white flex-fill" (click)="sortExpenses('location')">
+                    <i class="bi bi-geo-alt-fill me-1"></i>{{ 'EXPENSES.LOCATION' | translate }}
+                    <i [ngClass]="getIconOrderClass('location')"></i>
+                </button>
+                <button class="btn btn-sm btn-outline-primary text-white flex-fill" (click)="sortExpenses('participants')">
+                    <i class="bi bi-people-fill me-1"></i>{{ 'EXPENSES.PARTICIPANTS' | translate }}
+                    <i [ngClass]="getIconOrderClass('participants')"></i>
+                </button>
+                <button class="btn btn-sm btn-outline-primary text-white flex-fill" (click)="sortExpenses('totalSum')">
+                    <i class="bi bi-cash-stack me-1"></i>{{ 'EXPENSES.TOTAL_SUM' | translate }}
+                    <i [ngClass]="getIconOrderClass('totalSum')"></i>
+                </button>
+            </div>
+        </div>
+    </div>
+
+    <!-- Data label for small screens -->
+    <div *ngIf="expensesList.length > 0" class="d-block d-sm-none px-2">
+        <small class="text-white-50 mb-1" style="font-size: 0.7rem;">
+            <i class="bi bi-table me-1"></i>{{ 'ITEMS.DATA' | translate }}
+        </small>
+    </div>
+
+    <!-- Accordion view for small screens -->
+    <div *ngIf="expensesList.length > 0" class="accordion d-block d-sm-none" id="expensesAccordion" tourAnchor="expenses-accordion">
+        <div *ngFor="let day of expensesList; let i = index" class="accordion-item bg-transparent border-0">
+            <h2 class="accordion-header" [id]="'heading' + day.id">
+                <button class="accordion-button collapsed bg-transparent text-white border-bottom border-primary"
+                        type="button"
+                        data-bs-toggle="collapse"
+                        [attr.data-bs-target]="'#collapse' + day.id"
+                        aria-expanded="false"
+                        [attr.aria-controls]="'collapse' + day.id"
+                        style="padding: 0.75rem 0.5rem;">
+                    <div class="d-flex justify-content-between align-items-center w-100 me-2">
+                        <div class="d-flex flex-column">
+                            <span class="fw-bold mb-2" style="font-size: 0.8rem;">
+                                <i class="bi bi-calendar-event me-1"></i>
+                                {{ day.date | date:'EEE, MMM dd, yyyy':'':currentLocale | titlecase }}
+                            </span>
+                            <span class="text-white-50" style="font-size: 0.9rem;">
+                                <i class="bi bi-geo-alt-fill me-1"></i>
+                                {{ day.location || '-' }}
+                            </span>
+                        </div>
+                    </div>
+                </button>
+            </h2>
+            <div [id]="'collapse' + day.id"
+                 class="accordion-collapse collapse"
+                 [attr.aria-labelledby]="'heading' + day.id"
+                 data-bs-parent="#expensesAccordion">
+                <div class="accordion-body bg-transparent text-white" style="padding: 0.75rem 0.5rem;">
+                    <div class="d-flex flex-column gap-2">
+                        <!-- Participants -->
+                        <div class="d-flex justify-content-between align-items-center">
+                            <span style="font-size: 0.85rem;">
+                                <i class="bi bi-people-fill me-1"></i>
+                                {{ 'EXPENSES.PARTICIPANTS' | translate }}:
+                            </span>
+                            <label class="text-white"
+                                   style="cursor: pointer; font-size: 0.85rem;"
+                                   data-bs-toggle="tooltip"
+                                   data-bs-html="true"
+                                   [attr.data-bs-title]="getTooltipContent(day.id)">
+                                {{ day.participants.length }} {{ 'EXPENSES.PEOPLE' | translate }}
+                            </label>
+                        </div>
+
+                        <!-- Total Sum -->
+                        <div class="d-flex justify-content-between align-items-center">
+                            <span style="font-size: 0.85rem;">
+                                <i class="bi bi-cash-stack me-1"></i>
+                                {{ 'EXPENSES.TOTAL_SUM' | translate }}:
+                            </span>
+                            <span class="fw-bold" style="font-size: 0.85rem;">
+                                {{ day.totalSum | currency:'UAH':'₴' }}
+                            </span>
+                        </div>
+
+                        <!-- Action Buttons -->
+                        <div class="d-flex gap-2 mt-2 flex-wrap">
+                            <button class="btn btn-sm btn-outline-primary text-white flex-fill"
+                                    (click)="openDetails(day.id)">
+                                <i class="bi bi-eye me-1"></i>{{ 'EXPENSES.OPEN' | translate }}
+                            </button>
+                            <button class="btn btn-sm btn-outline-primary text-white flex-fill"
+                                    (click)="navigateToCalculations(day.id)">
+                                <i class="bi bi-calculator me-1"></i>{{ 'EXPENSES.CALCULATE' | translate }}
+                            </button>
+                        </div>
+                        <div class="d-flex gap-2 flex-wrap">
+                            <button class="btn btn-sm btn-outline-primary text-white flex-fill"
+                                    (click)="openModal('edit', day.id)">
+                                <i class="bi bi-pencil me-1"></i>{{ 'EXPENSES.EDIT' | translate }}
+                            </button>
+                            <button class="btn btn-sm btn-outline-primary text-white flex-fill"
+                                    (click)="openModal('share', day.id)">
+                                <i class="bi bi-share me-1"></i>{{ 'EXPENSES.SHARE' | translate }}
+                            </button>
+                            <button class="btn btn-sm btn-outline-danger text-white flex-fill"
+                                    (click)="openModal('delete', day.id)">
+                                <i class="bi bi-trash me-1"></i>{{ 'EXPENSES.DELETE' | translate }}
+                            </button>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+
     <hr class="w-100 my-0" style="border-color: #080f27; opacity: 1;" />
 
     <!-- Pagination -->
diff --git a/src/ExpensesCalculator.UI/src/app/dayExpenses/day-expenses-list/day-expenses-list.component.ts b/src/ExpensesCalculator.UI/src/app/dayExpenses/day-expenses-list/day-expenses-list.component.ts
index 94d8849..1203dcf 100644
--- a/src/ExpensesCalculator.UI/src/app/dayExpenses/day-expenses-list/day-expenses-list.component.ts
+++ b/src/ExpensesCalculator.UI/src/app/dayExpenses/day-expenses-list/day-expenses-list.component.ts
@@ -664,6 +664,7 @@ export class DayExpensesListComponent implements OnInit, AfterViewInit, OnDestro
 
   initializeTour() {
     const tourSteps: any[] = [];
+    const isSmallScreen = window.innerWidth < 576;
 
     // If there's no data, show only the "Add Expense" step
     if (this.expensesList.length === 0) {
@@ -675,7 +676,7 @@ export class DayExpensesListComponent implements OnInit, AfterViewInit, OnDestro
         enableBackdrop: true
       });
     } else {
-      // If there's data, show the full tour
+      // Common steps for all screen sizes
       tourSteps.push(
         {
           anchorId: 'add-expense-btn',
@@ -695,34 +696,66 @@ export class DayExpensesListComponent implements OnInit, AfterViewInit, OnDestro
           anchorId: 'search-filter',
           content: this.translate.instant('TOUR.SEARCH_FILTER_CONTENT'),
           title: this.translate.instant('TOUR.SEARCH_FILTER_TITLE'),
-          placement: 'left',
-          enableBackdrop: true
-        },
-        {
-          // Highlights the table header only (tourAnchor on <thead>)
-          anchorId: 'expenses-table',
-          content: this.translate.instant('TOUR.EXPENSES_TABLE_CONTENT'),
-          title: this.translate.instant('TOUR.EXPENSES_TABLE_TITLE'),
-          placement: 'bottom',
-          enableBackdrop: true
-        },
-        {
-          // Highlights the actions menu column
-          anchorId: 'actions-menu',
-          content: this.translate.instant('TOUR.ACTIONS_MENU_CONTENT'),
-          title: this.translate.instant('TOUR.ACTIONS_MENU_TITLE'),
-          placement: 'left',
-          enableBackdrop: true
-        },
-        {
-          // Highlights pagination controls
-          anchorId: 'pagination',
-          content: this.translate.instant('TOUR.PAGINATION_CONTENT'),
-          title: this.translate.instant('TOUR.PAGINATION_TITLE'),
           placement: 'top',
           enableBackdrop: true
         }
       );
+
+      // Different steps for small vs large screens
+      if (isSmallScreen) {
+        // Steps for small screens (accordion view)
+        tourSteps.push(
+          {
+            anchorId: 'sort-controls',
+            content: this.translate.instant('TOUR.SORT_CONTROLS_CONTENT'),
+            title: this.translate.instant('TOUR.SORT_CONTROLS_TITLE'),
+            placement: 'bottom',
+            enableBackdrop: true
+          },
+          {
+            anchorId: 'expenses-accordion',
+            content: this.translate.instant('TOUR.EXPENSES_ACCORDION_CONTENT'),
+            title: this.translate.instant('TOUR.EXPENSES_ACCORDION_TITLE'),
+            placement: 'bottom',
+            enableBackdrop: true
+          },
+          {
+            anchorId: 'pagination',
+            content: this.translate.instant('TOUR.PAGINATION_CONTENT'),
+            title: this.translate.instant('TOUR.PAGINATION_TITLE'),
+            placement: 'top',
+            enableBackdrop: true
+          }
+        );
+      } else {
+        // Steps for large screens (table view)
+        tourSteps.push(
+          {
+            // Highlights the table header only (tourAnchor on <thead>)
+            anchorId: 'expenses-table',
+            content: this.translate.instant('TOUR.EXPENSES_TABLE_CONTENT'),
+            title: this.translate.instant('TOUR.EXPENSES_TABLE_TITLE'),
+            placement: 'bottom',
+            enableBackdrop: true
+          },
+          {
+            // Highlights the actions menu column
+            anchorId: 'actions-menu',
+            content: this.translate.instant('TOUR.ACTIONS_MENU_CONTENT'),
+            title: this.translate.instant('TOUR.ACTIONS_MENU_TITLE'),
+            placement: 'left',
+            enableBackdrop: true
+          },
+          {
+            // Highlights pagination controls
+            anchorId: 'pagination',
+            content: this.translate.instant('TOUR.PAGINATION_CONTENT'),
+            title: this.translate.instant('TOUR.PAGINATION_TITLE'),
+            placement: 'top',
+            enableBackdrop: true
+          }
+        );
+      }
     }
 
     this.tourService.initialize(tourSteps);
diff --git a/src/ExpensesCalculator.UI/src/app/shared/filter-bar/filter-bar.component.css b/src/ExpensesCalculator.UI/src/app/shared/filter-bar/filter-bar.component.css
index f950a24..e000877 100644
--- a/src/ExpensesCalculator.UI/src/app/shared/filter-bar/filter-bar.component.css
+++ b/src/ExpensesCalculator.UI/src/app/shared/filter-bar/filter-bar.component.css
@@ -44,3 +44,26 @@
 .input-group-primary .input-group-text {
   border-color: #0d6efd;
 }
+
+/* Component-specific responsive styles */
+@media (max-width: 576px) {
+  .dropdown-toggle {
+    width: 100% !important;
+  }
+
+  .form-control {
+    line-height: 1.3 !important;
+  }
+
+  .input-group-primary .form-control::placeholder {
+    font-size: 0.75rem !important;
+  }
+
+  .input-group-primary {
+    width: 100% !important;
+  }
+
+  .dropdown-menu {
+    width: 100% !important;
+  }
+}
diff --git a/src/ExpensesCalculator.UI/src/app/shared/filter-bar/filter-bar.component.html b/src/ExpensesCalculator.UI/src/app/shared/filter-bar/filter-bar.component.html
index 18d3869..30d9661 100644
--- a/src/ExpensesCalculator.UI/src/app/shared/filter-bar/filter-bar.component.html
+++ b/src/ExpensesCalculator.UI/src/app/shared/filter-bar/filter-bar.component.html
@@ -1,4 +1,4 @@
-<div class="d-flex gap-2 align-items-center">
+<div class="d-flex flex-column flex-sm-row gap-2 align-items-stretch align-items-sm-center">
     <!-- Filter Criteria Dropdown -->
     <div class="search-criteria-dropdown">
         <button class="btn btn-outline-primary text-white dropdown-toggle"
diff --git a/src/ExpensesCalculator.UI/src/app/shared/horizontal-navbar/horizontal-navbar.component.css b/src/ExpensesCalculator.UI/src/app/shared/horizontal-navbar/horizontal-navbar.component.css
index 6770c50..5ac592f 100644
--- a/src/ExpensesCalculator.UI/src/app/shared/horizontal-navbar/horizontal-navbar.component.css
+++ b/src/ExpensesCalculator.UI/src/app/shared/horizontal-navbar/horizontal-navbar.component.css
@@ -1,3 +1,34 @@
+/* Prevent text wrapping in navbar */
+.navbar-nav.no-wrap {
+    flex-wrap: nowrap;
+    white-space: nowrap;
+}
+
+.navbar-nav.no-wrap .nav-item,
+.navbar-nav.no-wrap .nav-link,
+.navbar-nav.no-wrap button {
+    white-space: nowrap;
+}
+
+/* Truncate username on small screens */
+@media (max-width: 576px) {
+    .navbar-nav .nav-link strong {
+        display: inline-block;
+        max-width: 10ch; /* Approximately 8 characters */
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+        vertical-align: bottom;
+    }
+
+    /* Reduce text size for all navbar elements */
+    .navbar-nav .nav-link,
+    .navbar-nav button,
+    .lang-button {
+        font-size: 0.85rem !important;
+    }
+}
+
 .lang-button:active {
     border: 2px solid var(--bs-primary) !important;
 }
diff --git a/src/ExpensesCalculator.UI/src/app/shared/horizontal-navbar/horizontal-navbar.component.html b/src/ExpensesCalculator.UI/src/app/shared/horizontal-navbar/horizontal-navbar.component.html
index d38672c..5552485 100644
--- a/src/ExpensesCalculator.UI/src/app/shared/horizontal-navbar/horizontal-navbar.component.html
+++ b/src/ExpensesCalculator.UI/src/app/shared/horizontal-navbar/horizontal-navbar.component.html
@@ -1,6 +1,6 @@
-<ul class="navbar-nav align-items-center">
-    <li class="nav-item mt-1 me-1">
-        <button class="btn text-white lang-button" (click)="toggleLanguage()" style="height: 40px;">
+<ul class="navbar-nav align-items-center no-wrap w-100 justify-content-between">
+    <li class="nav-item mt-md-1 me-1">
+        <button class="btn text-white lang-button p-0" (click)="toggleLanguage()" style="height: 40px;">
             <img class="me-1" [src]="flagSrc" alt="lang" width="30">
             {{ langLabel }}
         </button>
diff --git a/src/ExpensesCalculator.UI/src/app/shared/vertical-navbar/vertical-navbar.component.css b/src/ExpensesCalculator.UI/src/app/shared/vertical-navbar/vertical-navbar.component.css
index e69de29..ae67736 100644
--- a/src/ExpensesCalculator.UI/src/app/shared/vertical-navbar/vertical-navbar.component.css
+++ b/src/ExpensesCalculator.UI/src/app/shared/vertical-navbar/vertical-navbar.component.css
@@ -0,0 +1,59 @@
+/* Make menu flex container to push GitHub to bottom */
+#menu {
+    display: flex !important;
+    flex-direction: column !important;
+    min-height: 100vh !important;
+}
+
+/* Reduce vertical navbar width on small screens */
+@media (max-width: 576px) {
+    /* Make the container narrower */
+    .d-flex.flex-column {
+        width: 50px;
+        padding-left: 0;
+        padding-right: 0;
+    }
+
+    /* Reduce icon size */
+    .nav-item.fs-5 {
+        font-size: 1rem !important;
+    }
+
+    /* Center icons and reduce spacing */
+    .nav-link {
+        padding: 0.5rem 0 !important;
+        text-align: center;
+        justify-content: center;
+    }
+
+    /* Reduce spacing between items */
+    .nav-pills .nav-item {
+        margin-bottom: 0.15rem;
+    }
+
+    /* Adjust title icon and align with horizontal navbar */
+    .bi-calculator {
+        font-size: 1.2rem;
+    }
+
+    .nav-item.fs-5:first-child {
+        margin-top: 0.5rem;
+    }
+
+    /* Align hr with horizontal navbar */
+    hr {
+        margin-top: 0.5rem;
+        margin-bottom: 0.5rem;
+    }
+
+    /* Center all content */
+    #menu {
+        align-items: center !important;
+        width: 100%;
+    }
+
+    /* Reduce bottom icon spacing */
+    .fixed-bottom {
+        text-align: center;
+    }
+}
diff --git a/src/ExpensesCalculator.UI/src/app/shared/vertical-navbar/vertical-navbar.component.html b/src/ExpensesCalculator.UI/src/app/shared/vertical-navbar/vertical-navbar.component.html
index 671947c..3fd423c 100644
--- a/src/ExpensesCalculator.UI/src/app/shared/vertical-navbar/vertical-navbar.component.html
+++ b/src/ExpensesCalculator.UI/src/app/shared/vertical-navbar/vertical-navbar.component.html
@@ -1,9 +1,9 @@
-<div class="d-flex sticky-top flex-column align-items-center align-items-sm-start pt-2 text-white min-vh-100">
+<div class="d-flex sticky-top flex-column align-items-center align-items-sm-start pt-1 pt-md-2 text-white min-vh-100">
     <ul class="nav nav-pills flex-column mb-sm-auto mb-0 align-items-sm-start mx-0" id="menu">     
         <li class="nav-item fs-5">
-            <a class="d-flex align-items-center mb-md-0 me-auto text-white text-decoration-none"
+            <a class="d-flex align-items-center me-auto text-white text-decoration-none"
                style="user-select: none; font-family: Impact, cursive;" routerLink="/">
-                <i class="bi-calculator"></i> <span class="d-none d-sm-inline">ExpensesCalculator</span>
+                <i class="bi-calculator"></i> <span class="d-none d-sm-inline">ExpensesTracker</span>
             </a>
         </li>
         <hr class="w-100" style="border-color: rgba(255,255,255,0.1); opacity: 1;" />
@@ -22,8 +22,8 @@
                 <i class="bi-lightbulb"></i> <span class="ms-2 d-none d-sm-inline">{{ 'SIDEBAR.RECOMMENDATIONS' | translate }}</span>
             </a>
         </li>
-        <li style="width: fit-content" class="nav-item fixed-bottom ms-3 mb-2">
-            <a class="nav-link text-white align-middle px-0 text-decoration-none fs-4" href="https://github.com/OleksPal/ExpensesCalculator"
+        <li class="nav-item fs-5 mt-auto mb-2">
+            <a class="nav-link text-white align-middle px-0 text-decoration-none" href="https://github.com/OleksPal/ExpenseTracker"
                target="_blank" rel="noopener noreferrer">
                 <i class="bi bi-github"></i> <span class="ms-2 d-none d-sm-inline">{{ 'SIDEBAR.GITHUB' | translate }}</span>
             </a>
diff --git a/src/ExpensesCalculator.UI/src/styles.css b/src/ExpensesCalculator.UI/src/styles.css
index 7f11558..bee3622 100644
--- a/src/ExpensesCalculator.UI/src/styles.css
+++ b/src/ExpensesCalculator.UI/src/styles.css
@@ -13,6 +13,19 @@
 #customProportion > .col-10 {
     width: 84%;
 }
+
+/* Reduce vertical navbar width on small screens */
+@media (max-width: 576px) {
+    #customProportion > .col-2 {
+        width: 50px !important;
+        flex: 0 0 50px;
+    }
+
+    #customProportion > .col-10 {
+        width: calc(100% - 50px) !important;
+        flex: 1 1 calc(100% - 50px);
+    }
+}
 html, body { height: 100%; font-size: large; }
 body { margin: 0; font-family: Roboto, "Helvetica Neue", sans-serif; }
 
@@ -186,3 +199,120 @@ body { margin: 0; font-family: Roboto, "Helvetica Neue", sans-serif; }
   background-color: #b52a3a;
   border-color: #b52a3a;
 }
+
+/* Responsive text sizing for modals and tour on small screens */
+@media (max-width: 576px) {
+  /* Modal sizing */
+  .modal-title {
+    font-size: 1rem !important;
+  }
+
+  .modal-body {
+    font-size: 0.85rem !important;
+  }
+
+  .modal-body label,
+  .modal-body .form-label {
+    font-size: 0.85rem !important;
+  }
+
+  .modal-body input,
+  .modal-body select,
+  .modal-body textarea,
+  .modal-body .form-control {
+    font-size: 0.85rem !important;
+  }
+
+  .modal-footer .btn {
+    font-size: 0.85rem !important;
+    padding: 0.3rem 0.6rem !important;
+  }
+
+  /* Tour popover sizing */
+  .popover {
+    max-width: 300px !important;
+  }
+
+  .popover-header {
+    font-size: 0.85rem !important;
+    padding: 3px 6px !important;
+  }
+
+  .popover-body {
+    font-size: 0.75rem !important;
+    padding: 3px 6px !important;
+  }
+
+  .popover .btn,
+  .popover button {
+    font-size: 0.7rem !important;
+    padding: 2px 8px !important;
+  }
+
+  .popover small,
+  .popover .text-muted {
+    font-size: 0.65rem !important;
+  }
+
+  /* Global button sizing */
+  .btn {
+    font-size: 0.85rem !important;
+    padding: 0.3rem 0.6rem !important;
+  }
+
+  .btn-sm {
+    font-size: 0.75rem !important;
+    padding: 0.2rem 0.4rem !important;
+  }
+
+  /* Dropdown controls */
+  .dropdown-toggle {
+    font-size: 0.85rem !important;
+    padding: 0.2rem 0.5rem !important;
+    line-height: 1.2 !important;
+  }
+
+  .dropdown-item {
+    font-size: 0.8rem !important;
+  }
+
+  .dropdown-menu-custom .dropdown-item {
+    font-size: 0.8rem !important;
+  }
+
+  /* Form controls */
+  .form-control {
+    font-size: 0.85rem !important;
+    padding: 0.25rem 0.5rem !important;
+  }
+
+  .input-group-text {
+    font-size: 0.75rem !important;
+    padding: 0.25rem 0.5rem !important;
+  }
+
+  /* Text elements */
+  small {
+    font-size: 0.65rem !important;
+  }
+
+  .text-white-50 {
+    font-size: 0.6rem !important;
+  }
+
+  /* Headings */
+  h4 {
+    font-size: 1.1rem !important;
+  }
+
+  h5 {
+    font-size: 1rem !important;
+  }
+
+  /* Spinner */
+  .spinner-border {
+    width: 1.5rem !important;
+    height: 1.5rem !important;
+    border-width: 0.15rem !important;
+  }
+}

From eb0e06cacad3bd7f6b09a5a4e4777e8d7fcf3d77 Mon Sep 17 00:00:00 2001
From: User <oleksandr.palamarchuk1310@gmail.com>
Date: Wed, 20 May 2026 13:01:20 +0300
Subject: [PATCH 02/12] Add responsive view for small screens for the day
 expenses list component

---
 .../day-expenses-list.component.html          | 24 +++++--------------
 .../day-expenses-list.component.ts            | 16 ++++++++++++-
 .../shared/sort-bar/sort-bar.component.css    | 20 ++++++++++++++++
 3 files changed, 41 insertions(+), 19 deletions(-)

diff --git a/src/ExpensesCalculator.UI/src/app/dayExpenses/day-expenses-list/day-expenses-list.component.html b/src/ExpensesCalculator.UI/src/app/dayExpenses/day-expenses-list/day-expenses-list.component.html
index 66cd1d4..e79734c 100644
--- a/src/ExpensesCalculator.UI/src/app/dayExpenses/day-expenses-list/day-expenses-list.component.html
+++ b/src/ExpensesCalculator.UI/src/app/dayExpenses/day-expenses-list/day-expenses-list.component.html
@@ -178,24 +178,12 @@ <h3>{{ 'EXPENSES.NO_SEARCH_RESULTS' | translate }}</h3>
             <small class="text-white-50 mb-1" style="font-size: 0.7rem;">
                 <i class="bi bi-sort-down me-1"></i>{{ 'ITEMS.SORT.CAPTION' | translate }}
             </small>
-            <div class="d-flex flex-wrap gap-2">
-                <button class="btn btn-sm btn-outline-primary text-white flex-fill" (click)="sortExpenses('date')">
-                    <i class="bi bi-calendar-event me-1"></i>{{ 'EXPENSES.DATE' | translate }}
-                    <i [ngClass]="getIconOrderClass('date')"></i>
-                </button>
-                <button class="btn btn-sm btn-outline-primary text-white flex-fill" (click)="sortExpenses('location')">
-                    <i class="bi bi-geo-alt-fill me-1"></i>{{ 'EXPENSES.LOCATION' | translate }}
-                    <i [ngClass]="getIconOrderClass('location')"></i>
-                </button>
-                <button class="btn btn-sm btn-outline-primary text-white flex-fill" (click)="sortExpenses('participants')">
-                    <i class="bi bi-people-fill me-1"></i>{{ 'EXPENSES.PARTICIPANTS' | translate }}
-                    <i [ngClass]="getIconOrderClass('participants')"></i>
-                </button>
-                <button class="btn btn-sm btn-outline-primary text-white flex-fill" (click)="sortExpenses('totalSum')">
-                    <i class="bi bi-cash-stack me-1"></i>{{ 'EXPENSES.TOTAL_SUM' | translate }}
-                    <i [ngClass]="getIconOrderClass('totalSum')"></i>
-                </button>
-            </div>
+            <app-sort-bar
+                [sortOptions]="sortOptions"
+                [selectedColumn]="sortColumn"
+                [selectedOrder]="sortOrder"
+                (sortChange)="onSortChange($event)">
+            </app-sort-bar>
         </div>
     </div>
 
diff --git a/src/ExpensesCalculator.UI/src/app/dayExpenses/day-expenses-list/day-expenses-list.component.ts b/src/ExpensesCalculator.UI/src/app/dayExpenses/day-expenses-list/day-expenses-list.component.ts
index 1203dcf..ca8c765 100644
--- a/src/ExpensesCalculator.UI/src/app/dayExpenses/day-expenses-list/day-expenses-list.component.ts
+++ b/src/ExpensesCalculator.UI/src/app/dayExpenses/day-expenses-list/day-expenses-list.component.ts
@@ -7,6 +7,7 @@ import { TooltipService } from '../../services/tooltip.service';
 import { FormValidationService } from '../../services/form-validation.service';
 import { ModalWindowComponent } from "../../shared/modal-window/modal-window.component";
 import { FilterBarComponent, FilterOption } from '../../shared/filter-bar/filter-bar.component';
+import { SortBarComponent, SortOption } from '../../shared/sort-bar/sort-bar.component';
 import { FormsModule } from '@angular/forms';
 import { Router } from '@angular/router';
 import { RouterLink } from "@angular/router";
@@ -22,7 +23,7 @@ declare var bootstrap: any;
 @Component({
   selector: 'app-day-expenses-list',
   standalone: true,
-  imports: [RouterLink, FormsModule, CommonModule, ModalWindowComponent, FilterBarComponent, TranslatePipe, TourAnchorNgBootstrapDirective, TourStepTemplateComponent],
+  imports: [RouterLink, FormsModule, CommonModule, ModalWindowComponent, FilterBarComponent, SortBarComponent, TranslatePipe, TourAnchorNgBootstrapDirective, TourStepTemplateComponent],
   providers: [DatePipe],
   templateUrl: './day-expenses-list.component.html',
   styleUrl: './day-expenses-list.component.css'
@@ -184,6 +185,12 @@ export class DayExpensesListComponent implements OnInit, AfterViewInit, OnDestro
   // Sorting
   sortColumn: 'date' | 'location' | 'participants' | 'totalSum' = 'date';
   sortOrder: 'asc' | 'desc' = 'desc';
+  sortOptions: SortOption[] = [
+    { value: 'date', labelKey: 'EXPENSES.DATE' },
+    { value: 'location', labelKey: 'EXPENSES.LOCATION' },
+    { value: 'participants', labelKey: 'EXPENSES.PARTICIPANTS' },
+    { value: 'totalSum', labelKey: 'EXPENSES.TOTAL_SUM' }
+  ];
 
   constructor(
     private expensesService: ExpensesService,
@@ -388,6 +395,13 @@ export class DayExpensesListComponent implements OnInit, AfterViewInit, OnDestro
     this.loadExpenses();
   }
 
+  onSortChange(event: { column: string; order: 'asc' | 'desc' }): void {
+    this.sortColumn = event.column as 'date' | 'location' | 'participants' | 'totalSum';
+    this.sortOrder = event.order;
+    this.currentPage = 1;
+    this.loadExpenses();
+  }
+
   getIconOrderClass(column: 'date' | 'location' | 'participants' | 'totalSum') {
     if (this.sortColumn !== column)
       return 'ps-1 bi bi-funnel-fill'
diff --git a/src/ExpensesCalculator.UI/src/app/shared/sort-bar/sort-bar.component.css b/src/ExpensesCalculator.UI/src/app/shared/sort-bar/sort-bar.component.css
index b875f0c..b834f2a 100644
--- a/src/ExpensesCalculator.UI/src/app/shared/sort-bar/sort-bar.component.css
+++ b/src/ExpensesCalculator.UI/src/app/shared/sort-bar/sort-bar.component.css
@@ -43,3 +43,23 @@ hr {
   border-color: #6c757d;
   color: white;
 }
+
+/* Component-specific responsive styles */
+@media (max-width: 576px) {
+  .dropdown-toggle {
+    width: 100% !important;
+  }
+
+  .dropdown-menu {
+    width: 100% !important;
+  }
+
+  .form-check-label {
+    font-size: 0.8rem !important;
+  }
+
+  .dropdown-menu .btn {
+    font-size: 0.75rem !important;
+    padding: 0.25rem 0.5rem !important;
+  }
+}

From 8ed5a5ba075a63c8e52cf9886dcca6f2394996e0 Mon Sep 17 00:00:00 2001
From: User <oleksandr.palamarchuk1310@gmail.com>
Date: Wed, 20 May 2026 14:27:58 +0300
Subject: [PATCH 03/12] Make responsive design for the check list component for
 small screens

---
 .../check-list/check-list.component.css       |  40 ++++++
 .../check-list/check-list.component.html      | 118 +++++++++++++++++-
 .../checks/check-list/check-list.component.ts |  14 ++-
 .../day-expenses-details.component.css        |   4 +
 .../items/item-list/item-list.component.css   |  21 ++++
 .../items/item-list/item-list.component.html  |  72 +++++++----
 .../items/item-list/item-list.component.ts    |  22 +++-
 7 files changed, 257 insertions(+), 34 deletions(-)

diff --git a/src/ExpensesCalculator.UI/src/app/checks/check-list/check-list.component.css b/src/ExpensesCalculator.UI/src/app/checks/check-list/check-list.component.css
index 758af88..11f599c 100644
--- a/src/ExpensesCalculator.UI/src/app/checks/check-list/check-list.component.css
+++ b/src/ExpensesCalculator.UI/src/app/checks/check-list/check-list.component.css
@@ -138,3 +138,43 @@ td {
   background-color: #1f429d !important;
   color: white;
 }
+
+/* Accordion styles for small screens */
+.accordion-button {
+  background-color: transparent !important;
+  box-shadow: none !important;
+  border-radius: 0 !important;
+}
+
+.accordion-button:not(.collapsed) {
+  background-color: transparent !important;
+  color: white !important;
+}
+
+.accordion-button::after {
+  filter: invert(1);
+}
+
+.accordion-button:focus {
+  box-shadow: none !important;
+  border-color: transparent !important;
+}
+
+.accordion-item {
+  border-bottom: 1px solid rgba(13, 110, 253, 0.3) !important;
+}
+
+.accordion-item:last-child {
+  border-bottom: none !important;
+}
+
+.accordion-body {
+  border-top: 1px solid rgba(13, 110, 253, 0.2);
+}
+
+/* Component-specific responsive styles */
+@media (max-width: 576px) {
+  .pagination-info {
+    font-size: 0.8rem !important;
+  }
+}
diff --git a/src/ExpensesCalculator.UI/src/app/checks/check-list/check-list.component.html b/src/ExpensesCalculator.UI/src/app/checks/check-list/check-list.component.html
index 6f98de5..22b9eeb 100644
--- a/src/ExpensesCalculator.UI/src/app/checks/check-list/check-list.component.html
+++ b/src/ExpensesCalculator.UI/src/app/checks/check-list/check-list.component.html
@@ -23,11 +23,11 @@ <h5 class="pt-3">{{ 'CHECKS.NO_DATA_HINT' | translate }}</h5>
     <div *ngIf="checksList.length > 0" class="d-flex justify-content-end pb-lg-2 px-2 my-3">
         <div class="col-12">
             <div class="d-flex flex-column flex-lg-row gap-2 align-items-stretch align-items-lg-center justify-content-lg-between">
-                <div class="d-flex flex-column ms-2">
-                    <small class="text-white-50 mb-1" style="font-size: 0.7rem;">
+                <div class="d-flex flex-column ms-md-2 align-self-start align-self-lg-center">
+                    <small class="text-white-50 mb-1 d-none d-sm-block" style="font-size: 0.7rem;">
                         <i class="bi bi-table me-1"></i>{{ 'ITEMS.DATA' | translate }}
                     </small>
-                    <button class="btn btn-outline-primary text-white" (click)="openModal('add', '')" tourAnchor="add-check-btn">
+                    <button id="addCheckButton" class="btn btn-outline-primary text-white" (click)="openModal('add', '')" tourAnchor="add-check-btn">
                         <i class="bi bi-plus-circle me-1"></i>{{ 'CHECKS.ADD' | translate }}
                     </button>
                 </div>
@@ -53,8 +53,23 @@ <h5 class="pt-3">{{ 'CHECKS.NO_DATA_HINT' | translate }}</h5>
         <h3>{{ 'CHECKS.NO_SEARCH_RESULTS' | translate }}</h3>
     </div>
 
-    <!-- Checks Table -->
-    <div *ngIf="filteredChecksList.length > 0" class="table-responsive fix-table-height">
+    <!-- Sort controls for small screens -->
+    <div *ngIf="filteredChecksList.length > 0" class="d-block d-sm-none mb-2 px-2">
+        <div class="d-flex flex-column">
+            <small class="text-white-50 mb-1" style="font-size: 0.7rem;">
+                <i class="bi bi-sort-down me-1"></i>{{ 'ITEMS.SORT.CAPTION' | translate }}
+            </small>
+            <app-sort-bar
+                [sortOptions]="sortOptions"
+                [selectedColumn]="sortColumn"
+                [selectedOrder]="sortOrder"
+                (sortChange)="onSortChange($event)">
+            </app-sort-bar>
+        </div>
+    </div>
+
+    <!-- Checks Table for larger screens -->
+    <div *ngIf="filteredChecksList.length > 0" class="table-responsive fix-table-height d-none d-sm-block">
         <table class="table table-borderless text-white mb-0">
             <thead>
                 <tr>
@@ -141,6 +156,99 @@ <h3>{{ 'CHECKS.NO_SEARCH_RESULTS' | translate }}</h3>
         </table>
     </div>
 
+    <!-- Data label for small screens -->
+    <div *ngIf="filteredChecksList.length > 0" class="d-block d-sm-none px-2">
+        <small class="text-white-50 mb-1" style="font-size: 0.7rem;">
+            <i class="bi bi-table me-1"></i>{{ 'ITEMS.DATA' | translate }}
+        </small>
+    </div>
+
+    <!-- Accordion view for small screens -->
+    <div *ngIf="filteredChecksList.length > 0" class="accordion d-block d-sm-none px-2" id="checksAccordion">
+        <div *ngFor="let check of filteredChecksList; let i = index" class="accordion-item bg-transparent border-0">
+            <h2 class="accordion-header" [id]="'heading' + check.id">
+                <button class="accordion-button collapsed bg-transparent text-white border-bottom border-primary"
+                        type="button"
+                        data-bs-toggle="collapse"
+                        [attr.data-bs-target]="'#accordionCollapse' + check.id"
+                        aria-expanded="false"
+                        [attr.aria-controls]="'accordionCollapse' + check.id"
+                        style="padding: 0.75rem 0.5rem;">
+                    <div class="d-flex justify-content-between align-items-center w-100 me-2">
+                        <div class="d-flex flex-column flex-grow-1">
+                            <span class="fw-bold mb-2" style="font-size: 0.8rem;">
+                                <i class="bi bi-cart me-1"></i>{{ check.location || '-' }}
+                            </span>
+                            <span class="text-white-50" style="font-size: 0.85rem;">
+                                <i class="bi bi-cash-stack me-1"></i>{{ check.totalSum | currency:'UAH':'₴' }}
+                            </span>
+                        </div>
+                    </div>
+                </button>
+            </h2>
+            <div [id]="'accordionCollapse' + check.id"
+                 class="accordion-collapse collapse"
+                 [attr.aria-labelledby]="'heading' + check.id"
+                 data-bs-parent="#checksAccordion">
+                <div class="accordion-body bg-transparent text-white" style="padding: 0.75rem 0.5rem;">
+                    <div class="d-flex flex-column gap-2">
+                        <!-- Payer -->
+                        <div class="d-flex justify-content-between align-items-center">
+                            <span style="font-size: 0.85rem;">
+                                <i class="bi bi-wallet2 me-1"></i>{{ 'CHECKS.PAYER' | translate }}:
+                            </span>
+                            <span class="fw-bold" style="font-size: 0.85rem;">
+                                {{ check.payer || '-' }}
+                            </span>
+                        </div>
+
+                        <!-- Action Buttons -->
+                        <div class="d-flex gap-2">
+                            <button class="btn btn-sm btn-outline-warning text-white flex-fill btn-action-edit"
+                                    (click)="openModal('edit', check.id)">
+                                <i class="bi bi-pencil me-1"></i>{{ 'CHECKS.EDIT' | translate }}
+                            </button>
+                            <button class="btn btn-sm btn-outline-danger text-white flex-fill btn-action-delete"
+                                    (click)="openModal('delete', check.id)">
+                                <i class="bi bi-trash me-1"></i>{{ 'CHECKS.DELETE' | translate }}
+                            </button>
+                        </div>
+
+                        <!-- Expand/Collapse Check Items -->
+                        <div class="d-flex justify-content-center mt-2">
+                            <button class="btn btn-sm btn-outline-primary text-white w-100" type="button"
+                                    data-bs-toggle="collapse"
+                                    [attr.data-bs-target]="'#collapseItems' + check.id"
+                                    [attr.aria-expanded]="isCheckExpanded(check.id)"
+                                    [attr.aria-controls]="'collapseItems' + check.id"
+                                    (click)="toggleCheckExpansion(check.id)">
+                                <i [class]="isCheckExpanded(check.id) ? 'bi bi-dash-square-fill me-1' : 'bi bi-plus-square-fill me-1'"></i>
+                                {{ isCheckExpanded(check.id) ? ('Hide Items' | translate) : ('Show Items' | translate) }}
+                            </button>
+                        </div>
+
+                        <!-- Items List -->
+                        <div class="collapse" [id]="'collapseItems' + check.id">
+                            <div class="mt-2">
+                                <app-item-list
+                                    [checkId]="check.id"
+                                    [dayExpensesId]="dayExpensesId"
+                                    [users]="participants"
+                                    [items]="getItemsForCheck(check.id)"
+                                    [isLoading]="isCheckItemsLoading(check.id)"
+                                    [highlightedItemId]="highlightedItemId"
+                                    [disableTooltipManagement]="true"
+                                    (itemsChanged)="loadItemsForCheck($event)"
+                                    (checkSumUpdated)="onCheckSumUpdated($event)">
+                                </app-item-list>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+
     <!-- Checks count -->
     <div *ngIf="checksList.length > 0 && filteredChecksList.length > 0">
         <hr class="w-100 my-0" style="border-color: #080f27; opacity: 1;" />
diff --git a/src/ExpensesCalculator.UI/src/app/checks/check-list/check-list.component.ts b/src/ExpensesCalculator.UI/src/app/checks/check-list/check-list.component.ts
index 1824f4d..4fe6a39 100644
--- a/src/ExpensesCalculator.UI/src/app/checks/check-list/check-list.component.ts
+++ b/src/ExpensesCalculator.UI/src/app/checks/check-list/check-list.component.ts
@@ -11,6 +11,7 @@ import { DayExpensesTotalSumUpdateService } from '../../services/day-expenses-to
 import { ToastService } from '../../services/toast.service';
 import { FormValidationService } from '../../services/form-validation.service';
 import { FilterBarComponent, FilterOption } from '../../shared/filter-bar/filter-bar.component';
+import { SortBarComponent, SortOption } from '../../shared/sort-bar/sort-bar.component';
 import { TourAnchorNgBootstrapDirective } from 'ngx-ui-tour-ng-bootstrap';
 
 declare var bootstrap: any;
@@ -18,7 +19,7 @@ declare var bootstrap: any;
 @Component({
   selector: 'app-check-list',
   standalone: true,
-  imports: [CommonModule, FormsModule, ModalWindowComponent, TranslatePipe, ItemListComponent, FilterBarComponent, TourAnchorNgBootstrapDirective],
+  imports: [CommonModule, FormsModule, ModalWindowComponent, TranslatePipe, ItemListComponent, FilterBarComponent, SortBarComponent, TourAnchorNgBootstrapDirective],
   templateUrl: './check-list.component.html',
   styleUrl: './check-list.component.css'
 })
@@ -62,6 +63,11 @@ export class CheckListComponent implements OnInit, OnChanges {
   ];
   sortColumn: 'location' | 'totalSum' | 'payer' = 'totalSum';
   sortOrder: 'asc' | 'desc' = 'desc';
+  sortOptions: SortOption[] = [
+    { value: 'location', labelKey: 'CHECKS.LOCATION' },
+    { value: 'payer', labelKey: 'CHECKS.PAYER' },
+    { value: 'totalSum', labelKey: 'CHECKS.SUM' }
+  ];
 
   // UI state properties
   isLoading = false;
@@ -172,6 +178,12 @@ export class CheckListComponent implements OnInit, OnChanges {
     this.applyLocalSorting();
   }
 
+  onSortChange(event: { column: string; order: 'asc' | 'desc' }): void {
+    this.sortColumn = event.column as 'location' | 'totalSum' | 'payer';
+    this.sortOrder = event.order;
+    this.applyLocalSorting();
+  }
+
   applyLocalFiltering(): void {
     const searchTerm = this.filterText.toLowerCase().trim();
 
diff --git a/src/ExpensesCalculator.UI/src/app/dayExpenses/day-expenses-details/day-expenses-details.component.css b/src/ExpensesCalculator.UI/src/app/dayExpenses/day-expenses-details/day-expenses-details.component.css
index ae68b57..3a64af0 100644
--- a/src/ExpensesCalculator.UI/src/app/dayExpenses/day-expenses-details/day-expenses-details.component.css
+++ b/src/ExpensesCalculator.UI/src/app/dayExpenses/day-expenses-details/day-expenses-details.component.css
@@ -109,6 +109,10 @@
         padding: 0.25rem 0.5rem !important;
     }
 
+    #backButton i {
+        transform: scaleX(1.2) !important;
+    }
+
     .info-card {
         padding: 0.75rem !important;
     }
diff --git a/src/ExpensesCalculator.UI/src/app/items/item-list/item-list.component.css b/src/ExpensesCalculator.UI/src/app/items/item-list/item-list.component.css
index 2bc1527..e2a03e6 100644
--- a/src/ExpensesCalculator.UI/src/app/items/item-list/item-list.component.css
+++ b/src/ExpensesCalculator.UI/src/app/items/item-list/item-list.component.css
@@ -203,3 +203,24 @@ td {
   }
 }
 
+/* Component-specific responsive styles */
+@media (max-width: 576px) {
+  /* Card sizing for small screens */
+  .card-body {
+    padding: 0.5rem !important;
+  }
+
+  .card-title {
+    font-size: 0.85rem !important;
+  }
+
+  .card-body small {
+    font-size: 0.65rem !important;
+  }
+
+  /* Pagination info text sizing */
+  .pagination-info {
+    font-size: 0.8rem !important;
+  }
+}
+
diff --git a/src/ExpensesCalculator.UI/src/app/items/item-list/item-list.component.html b/src/ExpensesCalculator.UI/src/app/items/item-list/item-list.component.html
index 78e522a..bced5a3 100644
--- a/src/ExpensesCalculator.UI/src/app/items/item-list/item-list.component.html
+++ b/src/ExpensesCalculator.UI/src/app/items/item-list/item-list.component.html
@@ -10,24 +10,22 @@
             </div>
 
             <!-- Add Button and Filter/Sort Controls -->
-            <div *ngIf="itemsList.length > 0" class="d-flex justify-content-between align-items-center mb-3">
-                <div class="d-flex flex-column">
-                    <small class="text-white-50 mb-1" style="font-size: 0.7rem;">
-                        <i class="bi bi-table me-1"></i>{{ 'ITEMS.DATA' | translate }}
-                    </small>
-                    <button class="btn btn-outline-primary text-white" (click)="openModal('add')"
-                        [disabled]="loading" [tourAnchor]="'add-item-btn-' + checkId">
-                        <i class="bi bi-plus-circle me-1"></i>{{ 'ITEMS.ADD' | translate }}
-                    </button>
-                </div>
-                <div class="d-flex gap-0 align-items-center">
-                    <!-- Filter Group -->
-                    <div class="d-flex flex-column">
-                        <small class="text-white-50 mb-1" style="font-size: 0.7rem;">
-                            <i class="bi bi-funnel me-1"></i>{{ 'ITEMS.FILTER.CAPTION' | translate }}
-                        </small>
-                        <div class="d-flex gap-2 align-items-center pe-3"
-                            style="border-right: 1px solid rgba(255, 255, 255, 0.15);">
+            <div *ngIf="itemsList.length > 0" class="d-flex justify-content-end pb-lg-2 px-0 px-md-2 my-2 my-md-3">
+                <div class="col-12">
+                    <div class="d-flex flex-column flex-lg-row gap-2 align-items-stretch align-items-lg-center justify-content-lg-between">
+                        <div class="d-flex flex-column ms-md-2 align-self-start align-self-lg-center">
+                            <small class="text-white-50 mb-1 d-none d-sm-block" style="font-size: 0.7rem;">
+                                <i class="bi bi-table me-1"></i>{{ 'ITEMS.DATA' | translate }}
+                            </small>
+                            <button id="addItemButton" class="btn btn-outline-primary text-white" (click)="openModal('add')"
+                                [disabled]="loading">
+                                <i class="bi bi-plus-circle me-1"></i>{{ 'ITEMS.ADD' | translate }}
+                            </button>
+                        </div>
+                        <div class="d-flex flex-column">
+                            <small class="text-white-50 mb-1" style="font-size: 0.7rem;">
+                                <i class="bi bi-funnel me-1"></i>{{ 'ITEMS.FILTER.CAPTION' | translate }}
+                            </small>
                             <app-filter-bar
                                 [filterOptions]="filterOptions"
                                 [selectedCriteria]="filterCriteria"
@@ -37,20 +35,40 @@
                                 (filterTextChange)="onFilterChange($event)">
                             </app-filter-bar>
                         </div>
+                        <div class="d-none d-lg-flex flex-column">
+                            <small class="text-white-50 mb-1" style="font-size: 0.7rem;">
+                                <i class="bi bi-sort-down me-1"></i>{{ 'ITEMS.SORT.CAPTION' | translate }}
+                            </small>
+                            <app-sort-bar [sortOptions]="sortOptions" [selectedColumn]="sortColumn"
+                                [selectedOrder]="sortOrder" (sortChange)="onSortChange($event)">
+                            </app-sort-bar>
+                        </div>
                     </div>
+                </div>
+            </div>
 
-                    <!-- Sort Group -->
-                    <div class="d-flex flex-column ps-3">
-                        <small class="text-white-50 mb-1" style="font-size: 0.7rem;">
-                            <i class="bi bi-sort-down me-1"></i>{{ 'ITEMS.SORT.CAPTION' | translate }}
-                        </small>
-                        <app-sort-bar [sortOptions]="sortOptions" [selectedColumn]="sortColumn"
-                            [selectedOrder]="sortOrder" (sortChange)="onSortChange($event)">
-                        </app-sort-bar>
-                    </div>
+            <!-- Sort controls for small screens -->
+            <div *ngIf="itemsList.length > 0" class="d-block d-lg-none mb-2 px-0">
+                <div class="d-flex flex-column">
+                    <small class="text-white-50 mb-1" style="font-size: 0.7rem;">
+                        <i class="bi bi-sort-down me-1"></i>{{ 'ITEMS.SORT.CAPTION' | translate }}
+                    </small>
+                    <app-sort-bar
+                        [sortOptions]="sortOptions"
+                        [selectedColumn]="sortColumn"
+                        [selectedOrder]="sortOrder"
+                        (sortChange)="onSortChange($event)">
+                    </app-sort-bar>
                 </div>
             </div>
 
+            <!-- Data label for small screens -->
+            <div *ngIf="itemsList.length > 0" class="d-block d-sm-none mb-1">
+                <small class="text-white-50 mb-1" style="font-size: 0.7rem;">
+                    <i class="bi bi-table me-1"></i>{{ 'ITEMS.DATA' | translate }}
+                </small>
+            </div>
+
             <!-- No Items Message -->
             <div *ngIf="!loading && itemsList.length === 0" class="text-white text-center py-4">
                 <h5>{{ 'ITEMS.NO_ITEMS' | translate }}</h5>
diff --git a/src/ExpensesCalculator.UI/src/app/items/item-list/item-list.component.ts b/src/ExpensesCalculator.UI/src/app/items/item-list/item-list.component.ts
index 5393a21..6f204d6 100644
--- a/src/ExpensesCalculator.UI/src/app/items/item-list/item-list.component.ts
+++ b/src/ExpensesCalculator.UI/src/app/items/item-list/item-list.component.ts
@@ -151,6 +151,14 @@ export class ItemListComponent implements OnInit, OnChanges, OnDestroy, AfterVie
         }, 100);
       }
     });
+
+    // Move modal to body to avoid z-index/overflow issues in accordion layouts
+    setTimeout(() => {
+      const modalElement = document.getElementById('itemsModal-' + this.checkId);
+      if (modalElement && modalElement.parentElement !== document.body) {
+        document.body.appendChild(modalElement);
+      }
+    }, 0);
   }
 
 
@@ -172,6 +180,15 @@ export class ItemListComponent implements OnInit, OnChanges, OnDestroy, AfterVie
     if (this.filterTextSubscription) {
       this.filterTextSubscription.unsubscribe();
     }
+
+    // Clean up modal if it was moved to body
+    if (this.modalInstance) {
+      const modalElement = document.getElementById('itemsModal-' + this.checkId);
+      if (modalElement && modalElement.parentElement === document.body) {
+        document.body.removeChild(modalElement);
+      }
+      this.modalInstance.dispose();
+    }
   }
 
   initializeTooltips(): void {
@@ -428,7 +445,10 @@ export class ItemListComponent implements OnInit, OnChanges, OnDestroy, AfterVie
     this.modalTitle = this.translate.instant(`ITEMS.MODAL.${type.toUpperCase()}_TITLE`);
 
     const modalElement = document.getElementById('itemsModal-' + this.checkId);
-    if (!modalElement) return;
+    if (!modalElement) {
+      console.error('Modal element not found!');
+      return;
+    }
 
     if (type === 'add') {
       this.clearFormData();

From 2f34a510b3e585cf1e7400e6a65c1de7a2e91c6d Mon Sep 17 00:00:00 2001
From: User <oleksandr.palamarchuk1310@gmail.com>
Date: Wed, 20 May 2026 18:12:29 +0300
Subject: [PATCH 04/12] Fix responsive layout for the day expenses calculations
 view for small size windows

---
 .../day-expenses-calculations.component.css   | 42 +++++++++++++++++++
 .../day-expenses-calculations.component.html  | 20 ++++-----
 .../day-expenses-calculations.component.ts    |  5 +--
 .../day-expenses-list.component.css           |  9 ++++
 .../day-expenses-list.component.html          |  2 +-
 .../src/app/services/expenses.service.ts      |  1 +
 6 files changed, 65 insertions(+), 14 deletions(-)

diff --git a/src/ExpensesCalculator.UI/src/app/dayExpenses/day-expenses-calculations/day-expenses-calculations.component.css b/src/ExpensesCalculator.UI/src/app/dayExpenses/day-expenses-calculations/day-expenses-calculations.component.css
index c1a6fe4..9c3f585 100644
--- a/src/ExpensesCalculator.UI/src/app/dayExpenses/day-expenses-calculations/day-expenses-calculations.component.css
+++ b/src/ExpensesCalculator.UI/src/app/dayExpenses/day-expenses-calculations/day-expenses-calculations.component.css
@@ -35,3 +35,45 @@
   background-color: #1f429d !important;
   color: white;
 }
+
+/* Component-specific responsive styles */
+@media (max-width: 576px) {
+  /* Back button sizing */
+  #backButton {
+    padding: 0.25rem 0.5rem !important;
+  }
+
+  #backButton i {
+    transform: scaleX(1.2) !important;
+  }
+
+  /* Reduce title size */
+  h4 {
+    font-size: 0.9rem !important;
+  }
+
+  /* Reduce no data text size for small screens */
+  .no-data-section h2 {
+    font-size: 1.25rem !important;
+  }
+
+  .no-data-section h5 {
+    font-size: 0.85rem !important;
+  }
+
+  /* Reduce tab button text size */
+  .tab-btn {
+    font-size: 0.75rem !important;
+    padding: 0.5rem 0.75rem !important;
+  }
+
+  /* Reduce content text sizes */
+  .tab-content {
+    font-size: 0.85rem !important;
+  }
+
+  /* Reduce icon sizes */
+  .bi {
+    font-size: 0.9rem !important;
+  }
+}
diff --git a/src/ExpensesCalculator.UI/src/app/dayExpenses/day-expenses-calculations/day-expenses-calculations.component.html b/src/ExpensesCalculator.UI/src/app/dayExpenses/day-expenses-calculations/day-expenses-calculations.component.html
index 94a1be7..3d1040e 100644
--- a/src/ExpensesCalculator.UI/src/app/dayExpenses/day-expenses-calculations/day-expenses-calculations.component.html
+++ b/src/ExpensesCalculator.UI/src/app/dayExpenses/day-expenses-calculations/day-expenses-calculations.component.html
@@ -1,14 +1,14 @@
 <tour-step-template></tour-step-template>
 
-<div class="rounded mt-4 mb-5 ms-sm-4 me-sm-4 dark-blue-1">
+<div class="rounded mt-4 mb-5 mx-3 ms-sm-4 me-sm-4 dark-blue-1">
     <div class="container-fluid px-3 py-2 text-white">
         <div class="d-flex align-items-center justify-content-between mt-2 mb-3">
             <div class="d-flex align-items-center">
-                <button class="btn btn-outline-primary text-white px-4 me-3" (click)="navigateBack()" tourAnchor="back-to-details-btn">
+                <button id="backButton" class="btn btn-outline-primary text-white px-4 me-2 me-md-3" (click)="navigateBack()" tourAnchor="back-to-details-btn">
                     <i class="bi bi-arrow-left" style="transform: scaleX(2); display: inline-block;"></i>
                 </button>
                 <h4 class="mb-0">
-                    <i class="bi bi-calculator me-2"></i>{{ 'CALCULATIONS.TITLE' | translate }}
+                    <i class="bi bi-calculator me-1 me-md-2"></i>{{ 'CALCULATIONS.TITLE' | translate }}
                 </h4>
             </div>
             <div class="d-flex align-items-center gap-2">
@@ -21,7 +21,7 @@ <h4 class="mb-0">
 
         <!-- No Data -->
         <div *ngIf="!isLoading && (!calculationsData || !calculationsData.dayExpensesCalculations || calculationsData.dayExpensesCalculations.length === 0)"
-            class="text-white text-center pt-4 pb-5">
+            class="no-data-section text-white text-center pt-4 pb-5">
             <h2>{{ 'CALCULATIONS.NO_DATA' | translate }}</h2>
             <h5 class="pt-3">{{ 'CALCULATIONS.NO_DATA_HINT' | translate }}</h5>
         </div>
@@ -58,14 +58,14 @@ <h5 class="pt-3">{{ 'CALCULATIONS.NO_DATA_HINT' | translate }}</h5>
                             <div class="d-flex align-items-center mb-2">
                                 <span style="cursor: pointer;" data-bs-toggle="tooltip" data-bs-placement="top"
                                     data-bs-html="true"
-                                    [attr.data-bs-title]="getCheckTooltip(checkCalc.items, checkCalc.check.payer)">
-                                    <i class="bi bi-cart me-2"></i>
+                                    [attr.data-bs-title]="getCheckTooltip(checkCalc.check.totalSum, checkCalc.check.payer)">
+                                    <i class="bi bi-cart me-1"></i>
                                     <span class="fw-bold">{{ checkCalc.check.location }}</span>
                                 </span>
                             </div>
 
                             <!-- Items List -->
-                            <ul class="list-unstyled ms-3">
+                            <ul class="list-unstyled ms-0 ms-md-3">
                                 <li *ngFor="let itemCalc of checkCalc.items" class="mb-1">
                                     <i class="bi bi-box me-1"></i>
                                     <span>{{ itemCalc.item.name }}:</span>
@@ -77,7 +77,7 @@ <h5 class="pt-3">{{ 'CALCULATIONS.NO_DATA_HINT' | translate }}</h5>
                                         [attr.data-bs-title]="getItemUsersTooltip(itemCalc.item.users)">
                                         <i class="bi bi-people-fill me-1"></i>{{ itemCalc.item.users.length }}
                                     </span>
-                                    <span class="mx-1">=</span>
+                                    <span class="me-1">=</span>
                                     <span class="text-warning fw-bold">{{ itemCalc.pricePerUser | currency:'UAH':'₴' }}</span>
                                 </li>
                             </ul>
@@ -112,7 +112,7 @@ <h5 class="pt-3">{{ 'CALCULATIONS.NO_DATA_HINT' | translate }}</h5>
                         <i class="bi bi-cash-stack me-1"></i>
                         <span class="fw-bold">{{ 'CALCULATIONS.TRANSACTION_LIST' | translate }}:</span>
                     </div>
-                    <ul class="list-unstyled ms-3 mb-0">
+                    <ul class="list-unstyled ms-1 ms-md-3 mb-0">
                         <li *ngFor="let transaction of calculationsData.optimizedUserTransactions" class="mb-1">
                             <i class="bi bi-person-fill me-1"></i>{{ transaction.subjects.sender }}
                             <span class="text-warning fw-bold mx-1">({{ transaction.transferAmount | currency:'UAH':'₴'
@@ -140,7 +140,7 @@ <h5 class="pt-3">{{ 'CALCULATIONS.NO_DATA_HINT' | translate }}</h5>
                     </div>
 
                     <div class="collapse" id="fullTransactionList">
-                        <ul class="list-unstyled ms-3 mb-0">
+                        <ul class="list-unstyled ms-1 ms-md-3 mb-0">
                             <li *ngFor="let transaction of calculationsData.allUsersTransactions" class="mb-1">
                                 <i class="bi bi-cart me-1"></i>{{ transaction.checkName }}:
                                 <i class="bi bi-person-fill ms-2 me-1"></i>{{ transaction.subjects.sender }}
diff --git a/src/ExpensesCalculator.UI/src/app/dayExpenses/day-expenses-calculations/day-expenses-calculations.component.ts b/src/ExpensesCalculator.UI/src/app/dayExpenses/day-expenses-calculations/day-expenses-calculations.component.ts
index fe8bc15..dfed8ba 100644
--- a/src/ExpensesCalculator.UI/src/app/dayExpenses/day-expenses-calculations/day-expenses-calculations.component.ts
+++ b/src/ExpensesCalculator.UI/src/app/dayExpenses/day-expenses-calculations/day-expenses-calculations.component.ts
@@ -128,9 +128,8 @@ export class DayExpensesCalculationsComponent implements OnInit, AfterViewInit,
     return this.tooltipService.generateUsersTooltip(users, 3);
   }
 
-  getCheckTooltip(items: ItemCalculation[], payer: string): string {
-    const sum = items.reduce((total, itemCalc) => total + itemCalc.item.price, 0);
-    return this.tooltipService.generateCheckTooltip(sum, payer);
+  getCheckTooltip(totalSum: number, payer: string): string {
+    return this.tooltipService.generateCheckTooltip(totalSum, payer);
   }
 
   // Tour
diff --git a/src/ExpensesCalculator.UI/src/app/dayExpenses/day-expenses-list/day-expenses-list.component.css b/src/ExpensesCalculator.UI/src/app/dayExpenses/day-expenses-list/day-expenses-list.component.css
index 9ce585c..0902e24 100644
--- a/src/ExpensesCalculator.UI/src/app/dayExpenses/day-expenses-list/day-expenses-list.component.css
+++ b/src/ExpensesCalculator.UI/src/app/dayExpenses/day-expenses-list/day-expenses-list.component.css
@@ -203,6 +203,15 @@ tr .dropdown {
     min-width: 100% !important;
     width: 100% !important;
   }
+
+  /* Reduce no data text size for small screens */
+  .no-data-section h2 {
+    font-size: 1.25rem !important;
+  }
+
+  .no-data-section h5 {
+    font-size: 0.85rem !important;
+  }
 }
 
 /* Accordion styles for small screens */
diff --git a/src/ExpensesCalculator.UI/src/app/dayExpenses/day-expenses-list/day-expenses-list.component.html b/src/ExpensesCalculator.UI/src/app/dayExpenses/day-expenses-list/day-expenses-list.component.html
index e79734c..a3eb879 100644
--- a/src/ExpensesCalculator.UI/src/app/dayExpenses/day-expenses-list/day-expenses-list.component.html
+++ b/src/ExpensesCalculator.UI/src/app/dayExpenses/day-expenses-list/day-expenses-list.component.html
@@ -21,7 +21,7 @@ <h4 class="mt-1 mb-3 mb-sm-4">
         <hr class="w-100 my-3" style="border-color: #080f27; opacity: 1;" />
 
     </div>
-    <div *ngIf="showNoDataMessage()" class="text-white text-center pt-4 pb-5">
+    <div *ngIf="showNoDataMessage()" class="no-data-section text-white text-center pt-4 pb-5">
         <h2>{{ 'EXPENSES.NO_DATA' | translate }}</h2>
         <h5 class="pt-3">{{ 'EXPENSES.NO_DATA_HINT' | translate }}</h5>
         <button class="btn btn-outline-primary text-white mt-4" tourAnchor="add-expense-btn" (click)="openModal('add', '')">
diff --git a/src/ExpensesCalculator.UI/src/app/services/expenses.service.ts b/src/ExpensesCalculator.UI/src/app/services/expenses.service.ts
index 4d0a4bc..786ed94 100644
--- a/src/ExpensesCalculator.UI/src/app/services/expenses.service.ts
+++ b/src/ExpensesCalculator.UI/src/app/services/expenses.service.ts
@@ -60,6 +60,7 @@ export interface CheckCalculation {
     id: string;
     location: string;
     payer: string;
+    totalSum: number;
     dayExpensesId: string;
   };
   items: ItemCalculation[];

From fcfceba233ddd1f4817978bfa413bef48ea9702a Mon Sep 17 00:00:00 2001
From: User <oleksandr.palamarchuk1310@gmail.com>
Date: Wed, 20 May 2026 19:27:11 +0300
Subject: [PATCH 05/12] Fix recommendation responsive layout

---
 .../items/item-list/item-list.component.ts    |   2 +-
 .../recommendations.component.css             |  69 +++++++++
 .../recommendations.component.html            | 141 ++++++++++--------
 3 files changed, 145 insertions(+), 67 deletions(-)

diff --git a/src/ExpensesCalculator.UI/src/app/items/item-list/item-list.component.ts b/src/ExpensesCalculator.UI/src/app/items/item-list/item-list.component.ts
index 6f204d6..81e2ce2 100644
--- a/src/ExpensesCalculator.UI/src/app/items/item-list/item-list.component.ts
+++ b/src/ExpensesCalculator.UI/src/app/items/item-list/item-list.component.ts
@@ -373,7 +373,7 @@ export class ItemListComponent implements OnInit, OnChanges, OnDestroy, AfterVie
 
     const itemElement = document.querySelector(`.highlighted-item`);
     if (itemElement) {
-      itemElement.scrollIntoView({ behavior: 'smooth', block: 'center' });
+      itemElement.scrollIntoView({ behavior: 'auto', block: 'center' });
 
       // Remove highlight after animation completes (2s * 3 iterations = 6s)
       setTimeout(() => {
diff --git a/src/ExpensesCalculator.UI/src/app/recommendations/recommendations/recommendations.component.css b/src/ExpensesCalculator.UI/src/app/recommendations/recommendations/recommendations.component.css
index 710ebf8..e861945 100644
--- a/src/ExpensesCalculator.UI/src/app/recommendations/recommendations/recommendations.component.css
+++ b/src/ExpensesCalculator.UI/src/app/recommendations/recommendations/recommendations.component.css
@@ -98,3 +98,72 @@ input[type="search"]:-ms-input-placeholder {
 .scrollbar-dark::-webkit-scrollbar-thumb:hover {
   background-color: #aaaaaa;
 }
+
+/* Component-specific responsive styles */
+@media (max-width: 576px) {
+  /* Reduce title size */
+  h4 {
+    font-size: 0.9rem !important;
+  }
+
+  /* Card sizing for small screens */
+  .card-body {
+    padding: 0.5rem !important;
+  }
+
+  .card-title {
+    font-size: 0.85rem !important;
+  }
+
+  .card-body small {
+    font-size: 0.65rem !important;
+  }
+
+  /* Pagination info text sizing */
+  .pagination-info {
+    font-size: 0.8rem !important;
+  }
+
+  /* Input groups */
+  .input-group {
+    font-size: 0.8rem !important;
+  }
+
+  /* Buttons */
+  .btn {
+    font-size: 0.85rem !important;
+  }
+
+  /* Badge text */
+  .badge {
+    font-size: 0.75rem !important;
+  }
+
+  /* Checkbox label */
+  .form-check-label {
+    font-size: 0.8rem !important;
+  }
+
+  /* Checkbox input */
+  .form-check-input {
+    width: 1rem !important;
+    height: 1rem !important;
+  }
+
+  /* Tag filter input - prevent overflow on small screens */
+  .position-relative {
+    min-width: 100% !important;
+    max-width: 100% !important;
+  }
+
+  /* Ensure consistent input padding */
+  .input-group .form-control {
+    padding: 0.375rem 0.75rem !important;
+  }
+
+  /* Tag filter dropdown suggestions */
+  .list-group-item {
+    font-size: 0.8rem !important;
+    padding: 0.5rem 0.75rem !important;
+  }
+}
diff --git a/src/ExpensesCalculator.UI/src/app/recommendations/recommendations/recommendations.component.html b/src/ExpensesCalculator.UI/src/app/recommendations/recommendations/recommendations.component.html
index b706ade..cf7bd29 100644
--- a/src/ExpensesCalculator.UI/src/app/recommendations/recommendations/recommendations.component.html
+++ b/src/ExpensesCalculator.UI/src/app/recommendations/recommendations/recommendations.component.html
@@ -1,88 +1,95 @@
 <tour-step-template></tour-step-template>
 
-<div class="rounded my-4 ms-sm-4 me-sm-4 dark-blue-1">
+<div class="rounded my-4 mx-3 ms-sm-4 me-sm-4 dark-blue-1">
     <div class="container-fluid px-3 pt-2 text-white">
         <!-- Title with Loading Indicator -->
-        <div class="d-flex align-items-center justify-content-between">
+        <div class="d-flex align-items-center justify-content-between mb-3 mb-md-0">
             <div class="d-flex align-items-center gap-2">
-                <h4 class="mt-1 mb-4">
+                <h4 class="mt-1 mb-0 mb-md-4">
                     <i class="bi bi-lightbulb me-1"></i>{{ 'SIDEBAR.RECOMMENDATIONS' | translate }}
                 </h4>
-                <button *ngIf="!isLoading" class="btn btn-sm btn-outline-primary text-white mb-3" (click)="startTour()" title="Start tour">
+                <button *ngIf="!isLoading" class="btn btn-sm btn-outline-primary text-white mb-0 mb-md-4" (click)="startTour()" title="Start tour">
                     <i class="bi bi-question-circle"></i>
                 </button>
             </div>
             <div *ngIf="isLoading" class="spinner-border" role="status"></div>
         </div>
 
+        <!-- Add Button -->
+        <button class="btn btn-outline-primary text-white mb-3" (click)="openModal('add')" [disabled]="isLoading" tourAnchor="add-item-btn">
+            <i class="bi bi-plus-circle me-1"></i>{{ 'ITEMS.ADD' | translate }}
+        </button>
+
         <!-- Tag Filter Section and Filter/Sort Controls -->
-        <div class="d-flex justify-content-between align-items-end mb-3">
-            <!-- Tag Filter Group -->
-            <div class="d-flex flex-column" tourAnchor="tag-filter">
-                <small class="text-white-50 mb-1" style="font-size: 0.7rem;">
-                    <i class="bi bi-tags me-1"></i>{{ 'ITEMS.FILTER.TAG_FILTER' | translate }}
-                </small>
-                <div class="position-relative" style="width: 400px;">
-                    <div class="input-group">
-                        <span class="input-group-text bi bi-tags bg-transparent text-white border-primary"></span>
-                        <input [(ngModel)]="tagFilterInput" name="tagFilterInput"
-                            class="form-control bg-transparent text-white border-primary"
-                            [placeholder]="'ITEMS.TAG_FILTER_PLACEHOLDER' | translate" (input)="onTagInputChange()"
-                            (keydown.enter)="addFilterTag(); $event.preventDefault()" [disabled]="isLoading" />
-                        <button type="button" class="btn btn-outline-primary text-white" (click)="addFilterTag()"
-                            [disabled]="isLoading">
-                            <i class="bi bi-plus"></i>
-                        </button>
-                    </div>
-                    <!-- Tag Suggestions Dropdown -->
-                    <div *ngIf="showTagSuggestions" class="position-absolute w-100 mt-1" style="z-index: 1000;">
-                        <ul class="list-group">
-                            <li *ngFor="let tag of filteredTagSuggestions"
-                                class="list-group-item list-group-item-action bg-dark text-white border-primary"
-                                style="cursor: pointer;" (click)="selectTagSuggestion(tag)">
+        <div class="d-flex justify-content-start justify-content-lg-end pb-lg-2">
+            <div class="col-12">
+                <div class="d-flex flex-column flex-lg-row gap-2 align-items-stretch align-items-lg-end justify-content-lg-between px-0">
+                    <!-- Tag Filter Group -->
+                    <div class="d-flex flex-column" style="flex: 0 0 auto; max-width: 100%;" tourAnchor="tag-filter">
+                        <small class="text-white-50 mb-1" style="font-size: 0.7rem;">
+                            <i class="bi bi-tags me-1"></i>{{ 'ITEMS.FILTER.TAG_FILTER' | translate }}
+                        </small>
+                        <div class="position-relative" style="min-width: 300px;">
+                            <div class="input-group">
+                                <span class="input-group-text bi bi-tags bg-transparent text-white border-primary"></span>
+                                <input [(ngModel)]="tagFilterInput" name="tagFilterInput"
+                                    class="form-control bg-transparent text-white border-primary"
+                                    [placeholder]="'ITEMS.TAG_FILTER_PLACEHOLDER' | translate" (input)="onTagInputChange()"
+                                    (keydown.enter)="addFilterTag(); $event.preventDefault()" [disabled]="isLoading" />
+                                <button type="button" class="btn btn-outline-primary text-white" (click)="addFilterTag()"
+                                    [disabled]="isLoading">
+                                    <i class="bi bi-plus"></i>
+                                </button>
+                            </div>
+                            <!-- Tag Suggestions Dropdown -->
+                            <div *ngIf="showTagSuggestions" class="position-absolute w-100 mt-1" style="z-index: 1000;">
+                                <ul class="list-group">
+                                    <li *ngFor="let tag of filteredTagSuggestions"
+                                        class="list-group-item list-group-item-action bg-dark text-white border-primary"
+                                        style="cursor: pointer;" (click)="selectTagSuggestion(tag)">
+                                        #{{ tag }}
+                                    </li>
+                                </ul>
+                            </div>
+                        </div>
+
+                        <!-- Tag Badges Display (shown below tag input on small screens only) -->
+                        <div *ngIf="filterTags.length > 0" class="d-block d-lg-none mt-2 scrollbar-dark" style="max-height: 60px; overflow-x: auto; overflow-y: hidden; white-space: nowrap;">
+                            <span *ngFor="let tag of filterTags" class="badge border border-primary text-white fw-normal me-2 mb-2"
+                                style="font-size: 0.9rem; display: inline-block; cursor: pointer;">
                                 #{{ tag }}
-                            </li>
-                        </ul>
+                                <i class="bi bi-x ms-1" (click)="removeFilterTag(tag)"></i>
+                            </span>
+                        </div>
                     </div>
-                </div>
-            </div>
 
-            <!-- Search and Sort Group -->
-            <div class="d-flex gap-3 align-items-end">
-                <!-- Filter Group -->
-                <div class="d-flex flex-column" tourAnchor="search-filter">
-                    <small class="text-white-50 mb-1" style="font-size: 0.7rem;">
-                        <i class="bi bi-funnel me-1"></i>{{ 'ITEMS.FILTER.CAPTION' | translate }}
-                    </small>
-                    <app-filter-bar [filterOptions]="filterOptions" [selectedCriteria]="filterCriteria"
-                        [filterText]="filterText" [placeholderKey]="'ITEMS.SEARCH'"
-                        (criteriaChange)="changeFilterCriteria($event)" (filterTextChange)="onFilterChange($event)">
-                    </app-filter-bar>
-                </div>
+                    <!-- Search and Sort Group -->
+                    <div class="d-flex flex-column flex-lg-row gap-2 align-items-stretch">
+                        <!-- Filter Group -->
+                        <div class="d-flex flex-column" tourAnchor="search-filter">
+                            <small class="text-white-50 mb-1" style="font-size: 0.7rem;">
+                                <i class="bi bi-funnel me-1"></i>{{ 'ITEMS.FILTER.CAPTION' | translate }}
+                            </small>
+                            <app-filter-bar [filterOptions]="filterOptions" [selectedCriteria]="filterCriteria"
+                                [filterText]="filterText" [placeholderKey]="'ITEMS.SEARCH'"
+                                (criteriaChange)="changeFilterCriteria($event)" (filterTextChange)="onFilterChange($event)">
+                            </app-filter-bar>
+                        </div>
 
-                <!-- Sort Group -->
-                <div class="d-flex flex-column" tourAnchor="sort-bar">
-                    <small class="text-white-50 mb-1" style="font-size: 0.7rem;">
-                        <i class="bi bi-sort-down me-1"></i>{{ 'ITEMS.SORT.CAPTION' | translate }}
-                    </small>
-                    <app-sort-bar [sortOptions]="sortOptions" [selectedColumn]="sortColumn" [selectedOrder]="sortOrder"
-                        (sortChange)="onSortChange($event)">
-                    </app-sort-bar>
+                        <!-- Sort Group -->
+                        <div class="d-flex flex-column" tourAnchor="sort-bar">
+                            <small class="text-white-50 mb-1" style="font-size: 0.7rem;">
+                                <i class="bi bi-sort-down me-1"></i>{{ 'ITEMS.SORT.CAPTION' | translate }}
+                            </small>
+                            <app-sort-bar [sortOptions]="sortOptions" [selectedColumn]="sortColumn" [selectedOrder]="sortOrder"
+                                (sortChange)="onSortChange($event)">
+                            </app-sort-bar>
+                        </div>
+                    </div>
                 </div>
-            </div>
-        </div>
-
-        <!-- Add Button, Tag Badges and Checkbox in same row -->
-        <div class="d-flex justify-content-between align-items-center mb-3">
-            <!-- Add Button -->
-            <button class="btn btn-outline-primary text-white" (click)="openModal('add')" [disabled]="isLoading" tourAnchor="add-item-btn">
-                <i class="bi bi-plus-circle me-1"></i>{{ 'ITEMS.ADD' | translate }}
-            </button>
 
-            <!-- Tag Badges Display -->
-            <div class="flex-grow-1 mx-3">
-                <div *ngIf="filterTags.length > 0" class="scrollbar-dark"
-                    style="max-height: 60px; overflow-x: auto; overflow-y: hidden; white-space: nowrap;">
+                <!-- Tag Badges Display (shown below all controls on large screens only) -->
+                <div *ngIf="filterTags.length > 0" class="d-none d-lg-block mt-2 scrollbar-dark" style="max-height: 60px; overflow-x: auto; overflow-y: hidden; white-space: nowrap;">
                     <span *ngFor="let tag of filterTags" class="badge border border-primary text-white fw-normal me-2 mb-2"
                         style="font-size: 0.9rem; display: inline-block; cursor: pointer;">
                         #{{ tag }}
@@ -90,8 +97,10 @@ <h4 class="mt-1 mb-4">
                     </span>
                 </div>
             </div>
+        </div>
 
-            <!-- Checkbox -->
+        <!-- Checkbox -->
+        <div class="d-flex justify-content-start justify-content-lg-end mt-2 mb-3">
             <div class="form-check text-nowrap" tourAnchor="only-my-items">
                 <input type="checkbox" class="form-check-input" id="useOnlyMyItems"
                     [(ngModel)]="onlyMyItems" (change)="onOnlyMyItemsChange()">

From 2b92c2310ff01efdd7d12ef1bf14e926c18b90bb Mon Sep 17 00:00:00 2001
From: User <oleksandr.palamarchuk1310@gmail.com>
Date: Sat, 23 May 2026 14:41:13 +0300
Subject: [PATCH 06/12] Change filter/sort controls styling for small windows

---
 src/ExpensesCalculator.UI/public/i18n/en.json |  10 +-
 src/ExpensesCalculator.UI/public/i18n/ua.json |  10 +-
 .../check-list/check-list.component.css       |  84 +++++++++
 .../check-list/check-list.component.html      | 173 +++++++++++++-----
 .../checks/check-list/check-list.component.ts |   3 +
 .../day-expenses-calculations.component.ts    |   7 +-
 .../day-expenses-details.component.html       |   2 +-
 .../day-expenses-details.component.ts         |   7 +-
 .../day-expenses-list.component.css           |  27 ++-
 .../day-expenses-list.component.html          |  57 +++++-
 .../day-expenses-list.component.ts            |  21 ++-
 .../items/item-list/item-list.component.css   |   2 +-
 .../items/item-list/item-list.component.html  | 144 ++++++++++-----
 .../items/item-list/item-list.component.ts    |  57 ++++--
 .../recommendations.component.css             |  25 +++
 .../recommendations.component.html            | 170 +++++++++++++----
 .../recommendations.component.ts              | 132 ++++++-------
 .../shared/sort-bar/sort-bar.component.css    |   4 +-
 .../app/shared/sort-bar/sort-bar.component.ts |  16 ++
 src/ExpensesCalculator.UI/src/styles.css      |   2 +-
 20 files changed, 719 insertions(+), 234 deletions(-)

diff --git a/src/ExpensesCalculator.UI/public/i18n/en.json b/src/ExpensesCalculator.UI/public/i18n/en.json
index 5d1dcc0..9af1d44 100644
--- a/src/ExpensesCalculator.UI/public/i18n/en.json
+++ b/src/ExpensesCalculator.UI/public/i18n/en.json
@@ -203,7 +203,8 @@
       "TOTAL_SUM": "Total Sum",
       "USER_COUNT": "User Count",
       "RATING": "Rating",
-      "TAGS": "Tags"
+      "TAGS": "Tags",
+      "APPLY": "Apply"
     },
     "SORT": {
       "CAPTION": "Sort",
@@ -292,7 +293,10 @@
     "EXPENSES_ACCORDION_TITLE": "Expenses List",
     "EXPENSES_ACCORDION_CONTENT": "This accordion shows all your expenses. Each row displays the date and location. Click the arrow to expand and view participants, total sum, and action buttons to manage the expense.",
     "PAGINATION_TITLE": "Pagination Controls",
-    "PAGINATION_CONTENT": "Navigate through your expenses with these controls. Change the number of items displayed per page using the dropdown on the right."
+    "PAGINATION_CONTENT": "Navigate through your expenses with these controls. Change the number of items displayed per page using the dropdown on the right.",
+    "PREV_BTN": "Previous",
+    "NEXT_BTN": "Next",
+    "END_BTN": "End tour"
   },
   "TOUR_DETAILS": {
     "BACK_BTN_TITLE": "Back to List",
@@ -321,6 +325,8 @@
     "SEARCH_FILTER_CONTENT": "Search your items by different criteria. Use the dropdown to switch between filtering by name, description, price, amount, total sum, user count, or rating. Type in the search box to find specific items.",
     "SORT_BAR_TITLE": "Sort Options",
     "SORT_BAR_CONTENT": "Sort your items by different attributes. Click the dropdown to choose a column (name, price, amount, total price, user count, or rating) and toggle between ascending and descending order.",
+    "FILTER_SORT_CONTROLS_TITLE": "Filter & Sort",
+    "FILTER_SORT_CONTROLS_CONTENT": "Use the Filter button to search items, apply tag filters, and toggle showing only your items. Use the Sort dropdown to sort by name, price, amount, total price, user count, or rating.",
     "ADD_ITEM_TITLE": "Add New Item",
     "ADD_ITEM_CONTENT": "Click this button to add a new item to your recommendations. You can add items with name, description, price, amount, rating, and tags. These are your personal items that you can only access from this recommendations view.",
     "ONLY_MY_ITEMS_TITLE": "Filter Your Items",
diff --git a/src/ExpensesCalculator.UI/public/i18n/ua.json b/src/ExpensesCalculator.UI/public/i18n/ua.json
index e7c1859..ee49eaf 100644
--- a/src/ExpensesCalculator.UI/public/i18n/ua.json
+++ b/src/ExpensesCalculator.UI/public/i18n/ua.json
@@ -203,7 +203,8 @@
       "TOTAL_SUM": "Загальна сума",
       "USER_COUNT": "Користувачі",
       "RATING": "Рейтинг",
-      "TAGS": "Теги"
+      "TAGS": "Теги",
+      "APPLY": "Застосувати"
     },
     "SORT": {
       "CAPTION": "Сортування",
@@ -292,7 +293,10 @@
     "EXPENSES_ACCORDION_TITLE": "Список витрат",
     "EXPENSES_ACCORDION_CONTENT": "Цей розкривний список показує всі ваші витрати. Кожен рядок відображає дату та місце. Натисніть стрілку, щоб розгорнути та переглянути учасників, загальну суму та кнопки дій для керування витратами.",
     "PAGINATION_TITLE": "Сторінки",
-    "PAGINATION_CONTENT": "Перемикайтеся між витратами за допомогою цих елементів керування. Змініть кількість елементів на сторінці, використовуючи випадаюче меню справа."
+    "PAGINATION_CONTENT": "Перемикайтеся між витратами за допомогою цих елементів керування. Змініть кількість елементів на сторінці, використовуючи випадаюче меню справа.",
+    "PREV_BTN": "Попередній",
+    "NEXT_BTN": "Далі",
+    "END_BTN": "Завершити"
   },
   "TOUR_DETAILS": {
     "BACK_BTN_TITLE": "Назад до списку",
@@ -321,6 +325,8 @@
     "SEARCH_FILTER_CONTENT": "Шукайте свої товари за різними критеріями. Використовуйте випадаюче меню, щоб перемикатися між фільтрацією за назвою, описом, ціною, кількістю, загальною сумою, кількістю користувачів або рейтингом. Введіть текст у поле пошуку, щоб знайти конкретні товари.",
     "SORT_BAR_TITLE": "Сортування",
     "SORT_BAR_CONTENT": "Сортуйте свої товари за різними атрибутами. Натисніть на випадаюче меню, щоб вибрати колонку (назва, ціна, кількість, загальна ціна, кількість користувачів або рейтинг) та перемикайтеся між зростанням та спаданням.",
+    "FILTER_SORT_CONTROLS_TITLE": "Фільтр та сортування",
+    "FILTER_SORT_CONTROLS_CONTENT": "Використовуйте кнопку Фільтр для пошуку товарів, застосування фільтрів за тегами та перемикання показу лише ваших товарів. Використовуйте випадаюче меню Сортування для сортування за назвою, ціною, кількістю, загальною ціною, кількістю користувачів або рейтингом.",
     "ADD_ITEM_TITLE": "Додати новий товар",
     "ADD_ITEM_CONTENT": "Натисніть цю кнопку, щоб додати новий товар до ваших рекомендацій. Ви можете додавати товари з назвою, описом, ціною, кількістю, рейтингом та тегами. Це ваші персональні товари, до яких ви можете отримати доступ тільки з цього перегляду рекомендацій.",
     "ONLY_MY_ITEMS_TITLE": "Тільки ваші товари",
diff --git a/src/ExpensesCalculator.UI/src/app/checks/check-list/check-list.component.css b/src/ExpensesCalculator.UI/src/app/checks/check-list/check-list.component.css
index 11f599c..162c928 100644
--- a/src/ExpensesCalculator.UI/src/app/checks/check-list/check-list.component.css
+++ b/src/ExpensesCalculator.UI/src/app/checks/check-list/check-list.component.css
@@ -172,9 +172,93 @@ td {
   border-top: 1px solid rgba(13, 110, 253, 0.2);
 }
 
+/* Payer dropdown styling */
+.form-group .dropdown .btn.form-control {
+  font-size: 0.95rem;
+  padding: 0.375rem 0.75rem;
+  background-color: white;
+  border-color: #ced4da;
+  color: #212529;
+  text-align: left;
+}
+
+.form-group .dropdown .btn.form-control:hover,
+.form-group .dropdown .btn.form-control:focus,
+.form-group .dropdown .btn.form-control:active {
+  background-color: white;
+  border-color: #ced4da;
+  color: #212529;
+  box-shadow: none;
+}
+
+.form-group .dropdown .btn.form-control.is-invalid {
+  border-color: #dc3545;
+  background-color: white;
+}
+
+.form-group .dropdown .btn.form-control.is-valid {
+  border-color: #198754;
+  background-color: white;
+}
+
+.form-group .dropdown-menu {
+  background-color: white;
+  border-color: #ced4da;
+  max-height: 250px;
+  overflow-y: auto;
+}
+
+.form-group .dropdown-item {
+  color: #212529;
+  font-size: 0.95rem;
+  padding: 0.5rem 0.75rem;
+}
+
+.form-group .dropdown-item:hover,
+.form-group .dropdown-item:focus {
+  background-color: #e9ecef;
+  color: #212529;
+}
+
 /* Component-specific responsive styles */
 @media (max-width: 576px) {
   .pagination-info {
     font-size: 0.8rem !important;
   }
+
+  /* Reduce payer dropdown size on small screens */
+  .form-group .dropdown .btn.form-control {
+    font-size: 0.85rem !important;
+    padding: 0.25rem 0.5rem !important;
+  }
+
+  .form-group .dropdown-item {
+    font-size: 0.85rem !important;
+    padding: 0.375rem 0.5rem !important;
+  }
+
+  /* Filter and Sort group - side by side buttons */
+  .filter-sort-group {
+    gap: 0.5rem !important;
+  }
+
+  .filter-sort-group .filter-btn {
+    width: 50% !important;
+    font-size: 0.85rem !important;
+    padding: 0.2rem 0.5rem !important;
+    line-height: 1.2 !important;
+  }
+
+  .filter-sort-group app-sort-bar {
+    width: 50% !important;
+    flex: 0 0 50%;
+  }
+
+  .filter-sort-group app-sort-bar .sort-dropdown {
+    width: 100%;
+  }
+
+  .filter-sort-group app-sort-bar button {
+    width: 100% !important;
+  }
 }
diff --git a/src/ExpensesCalculator.UI/src/app/checks/check-list/check-list.component.html b/src/ExpensesCalculator.UI/src/app/checks/check-list/check-list.component.html
index 22b9eeb..853d270 100644
--- a/src/ExpensesCalculator.UI/src/app/checks/check-list/check-list.component.html
+++ b/src/ExpensesCalculator.UI/src/app/checks/check-list/check-list.component.html
@@ -2,7 +2,7 @@
     <!-- Header Section -->
     <div class="container-fluid px-3 pt-2 text-white">
         <div class="d-flex align-items-center justify-content-between">
-            <h4 class="mt-4 mb-0">
+            <h4 class="mt-0 mb-3 mt-md-4 mb-md-0">
                 <i class="bi bi-receipt me-1"></i>{{ 'CHECKS.TITLE' | translate }}
             </h4>
             <div *ngIf="isLoading" class="spinner-border" role="status"></div>
@@ -19,46 +19,92 @@ <h5 class="pt-3">{{ 'CHECKS.NO_DATA_HINT' | translate }}</h5>
         </button>
     </div>
 
-    <!-- Add Check button and Search Filter -->
-    <div *ngIf="checksList.length > 0" class="d-flex justify-content-end pb-lg-2 px-2 my-3">
-        <div class="col-12">
-            <div class="d-flex flex-column flex-lg-row gap-2 align-items-stretch align-items-lg-center justify-content-lg-between">
-                <div class="d-flex flex-column ms-md-2 align-self-start align-self-lg-center">
-                    <small class="text-white-50 mb-1 d-none d-sm-block" style="font-size: 0.7rem;">
-                        <i class="bi bi-table me-1"></i>{{ 'ITEMS.DATA' | translate }}
-                    </small>
-                    <button id="addCheckButton" class="btn btn-outline-primary text-white" (click)="openModal('add', '')" tourAnchor="add-check-btn">
-                        <i class="bi bi-plus-circle me-1"></i>{{ 'CHECKS.ADD' | translate }}
-                    </button>
-                </div>
-                <div class="d-flex flex-column">
-                    <small class="text-white-50 mb-1" style="font-size: 0.7rem;">
-                        <i class="bi bi-funnel me-1"></i>{{ 'ITEMS.FILTER.CAPTION' | translate }}
-                    </small>
-                    <app-filter-bar
-                        [filterOptions]="filterOptions"
-                        [selectedCriteria]="filterCriteria"
-                        [filterText]="filterText"
-                        [placeholderKey]="'CHECKS.SEARCH'"
-                        (criteriaChange)="changeFilterCriteria($event)"
-                        (filterTextChange)="onFilterChange($event)">
-                    </app-filter-bar>
-                </div>
+    <!-- Offcanvas for filters on small screens -->
+    <div class="offcanvas offcanvas-end dark-blue-1 text-white" tabindex="-1" id="filterOffcanvasChecks" aria-labelledby="filterOffcanvasChecksLabel">
+        <div class="offcanvas-header border-bottom border-secondary">
+            <div class="d-flex flex-column">
+                <h5 class="offcanvas-title mb-0" id="filterOffcanvasChecksLabel">
+                    <i class="bi bi-funnel me-2"></i>{{ 'ITEMS.FILTER.CAPTION' | translate }} {{ 'CHECKS.TITLE' | translate }}
+                </h5>
+                <small class="text-white-50 mt-1" *ngIf="dayExpensesDate">
+                    <i class="bi bi-calendar-event me-1"></i>{{ dayExpensesDate | date:'EEE, MMM dd, yyyy':'':currentLocale | titlecase }}
+                </small>
+                <small class="text-white-50 mt-2 mb-0" *ngIf="dayExpensesLocation">
+                    <i class="bi bi-geo-alt-fill me-1"></i>{{ dayExpensesLocation }}
+                </small>
+            </div>
+            <button type="button" class="btn-close btn-close-white" data-bs-dismiss="offcanvas" aria-label="Close"></button>
+        </div>
+        <div class="offcanvas-body">
+            <div class="d-flex flex-column">
+                <small class="text-white-50 mb-2" style="font-size: 0.7rem;">
+                    <i class="bi bi-funnel me-1"></i>{{ 'ITEMS.FILTER.CAPTION' | translate }}
+                </small>
+                <app-filter-bar
+                    [filterOptions]="filterOptions"
+                    [selectedCriteria]="filterCriteria"
+                    [filterText]="filterText"
+                    [placeholderKey]="'CHECKS.SEARCH'"
+                    (criteriaChange)="changeFilterCriteria($event)"
+                    (filterTextChange)="onFilterChange($event)">
+                </app-filter-bar>
+                <button class="btn btn-primary w-100 mt-3" type="button" data-bs-dismiss="offcanvas">
+                    {{ 'ITEMS.FILTER.APPLY' | translate }}
+                </button>
             </div>
         </div>
     </div>
 
-    <!-- No Search Results -->
-    <div *ngIf="checksList.length > 0 && filteredChecksList.length === 0" class="text-white text-center py-4">
-        <h3>{{ 'CHECKS.NO_SEARCH_RESULTS' | translate }}</h3>
+    <!-- Add Check button and Filter for larger screens -->
+    <div *ngIf="checksList.length > 0" class="d-none d-sm-block pb-2 px-2 my-3">
+        <div class="d-flex justify-content-between align-items-end">
+            <!-- LEFT SIDE: Add Check button -->
+            <div class="d-flex flex-column ms-md-2">
+                <small class="text-white-50 mb-1" style="font-size: 0.7rem;">
+                    <i class="bi bi-table me-1"></i>{{ 'ITEMS.DATA' | translate }}
+                </small>
+                <button id="addCheckButton" class="btn btn-outline-primary text-white" (click)="openModal('add', '')" tourAnchor="add-check-btn">
+                    <i class="bi bi-plus-circle me-1"></i>{{ 'CHECKS.ADD' | translate }}
+                </button>
+            </div>
+
+            <!-- RIGHT SIDE: Filter controls (hidden on small screens) -->
+            <div class="d-flex flex-column">
+                <small class="text-white-50 mb-1" style="font-size: 0.7rem;">
+                    <i class="bi bi-funnel me-1"></i>{{ 'ITEMS.FILTER.CAPTION' | translate }}
+                </small>
+                <app-filter-bar
+                    [filterOptions]="filterOptions"
+                    [selectedCriteria]="filterCriteria"
+                    [filterText]="filterText"
+                    [placeholderKey]="'CHECKS.SEARCH'"
+                    (criteriaChange)="changeFilterCriteria($event)"
+                    (filterTextChange)="onFilterChange($event)">
+                </app-filter-bar>
+            </div>
+        </div>
+    </div>
+
+    <!-- Add Check button for small screens -->
+    <div *ngIf="checksList.length > 0" class="d-block d-sm-none mb-2 px-2">
+        <button class="btn btn-outline-primary text-white w-100" (click)="openModal('add', '')">
+            <i class="bi bi-plus-circle me-1"></i>{{ 'CHECKS.ADD' | translate }}
+        </button>
     </div>
 
-    <!-- Sort controls for small screens -->
-    <div *ngIf="filteredChecksList.length > 0" class="d-block d-sm-none mb-2 px-2">
-        <div class="d-flex flex-column">
-            <small class="text-white-50 mb-1" style="font-size: 0.7rem;">
-                <i class="bi bi-sort-down me-1"></i>{{ 'ITEMS.SORT.CAPTION' | translate }}
-            </small>
+    <!-- Filter and Sort controls for small screens -->
+    <div *ngIf="checksList.length > 0" class="d-block d-sm-none mb-2 px-2">
+        <small class="text-white-50 mb-1" style="font-size: 0.7rem;">
+            <i class="bi bi-funnel me-1"></i>{{ 'ITEMS.FILTER.CAPTION' | translate }} & <i class="bi bi-sort-down me-1"></i>{{ 'ITEMS.SORT.CAPTION' | translate }}
+        </small>
+        <div class="d-flex w-100 filter-sort-group">
+            <button class="btn btn-outline-primary text-white filter-btn"
+                    type="button"
+                    data-bs-toggle="offcanvas"
+                    data-bs-target="#filterOffcanvasChecks"
+                    aria-controls="filterOffcanvasChecks">
+                <i class="bi bi-funnel me-1"></i>{{ 'ITEMS.FILTER.CAPTION' | translate }}
+            </button>
             <app-sort-bar
                 [sortOptions]="sortOptions"
                 [selectedColumn]="sortColumn"
@@ -68,6 +114,11 @@ <h3>{{ 'CHECKS.NO_SEARCH_RESULTS' | translate }}</h3>
         </div>
     </div>
 
+    <!-- No Search Results -->
+    <div *ngIf="checksList.length > 0 && filteredChecksList.length === 0" class="text-white text-center py-4">
+        <h3>{{ 'CHECKS.NO_SEARCH_RESULTS' | translate }}</h3>
+    </div>
+
     <!-- Checks Table for larger screens -->
     <div *ngIf="filteredChecksList.length > 0" class="table-responsive fix-table-height d-none d-sm-block">
         <table class="table table-borderless text-white mb-0">
@@ -144,6 +195,7 @@ <h3>{{ 'CHECKS.NO_SEARCH_RESULTS' | translate }}</h3>
                                         [isLoading]="isCheckItemsLoading(check.id)"
                                         [highlightedItemId]="highlightedItemId"
                                         [disableTooltipManagement]="true"
+                                        [isFirstCheck]="i === 0"
                                         (itemsChanged)="loadItemsForCheck($event)"
                                         (checkSumUpdated)="onCheckSumUpdated($event)">
                                     </app-item-list>
@@ -238,6 +290,7 @@ <h2 class="accordion-header" [id]="'heading' + check.id">
                                     [isLoading]="isCheckItemsLoading(check.id)"
                                     [highlightedItemId]="highlightedItemId"
                                     [disableTooltipManagement]="true"
+                                    [isFirstCheck]="false"
                                     (itemsChanged)="loadItemsForCheck($event)"
                                     (checkSumUpdated)="onCheckSumUpdated($event)">
                                 </app-item-list>
@@ -288,12 +341,25 @@ <h5 class="modal-title">{{ modalTitle }}</h5>
                 <i class="bi bi-wallet2 mx-1"></i>
                 <label class="control-label">{{ 'CHECKS.MODAL.PAYER_LABEL' | translate }}<span
                         class="text-danger">*</span></label>
-                <select [(ngModel)]="payer" name="payer" class="form-control" [class.is-invalid]="formErrors['payer']"
-                    [class.is-valid]="formValidated && !formErrors['payer'] && payer" required>
-                    <option value="">{{ 'CHECKS.MODAL.SELECT_PAYER' | translate }}</option>
-                    <option *ngFor="let participant of participants" [value]="participant">{{ participant }}</option>
-                </select>
-                <div class="invalid-feedback" *ngIf="formErrors['payer']">{{ formErrors['payer'] }}</div>
+                <div class="dropdown w-100">
+                    <button class="btn form-control text-start d-flex justify-content-between align-items-center"
+                            [class.is-invalid]="formErrors['payer']"
+                            [class.is-valid]="formValidated && !formErrors['payer'] && payer"
+                            type="button"
+                            data-bs-toggle="dropdown"
+                            aria-expanded="false">
+                        <span>{{ payer || ('CHECKS.MODAL.SELECT_PAYER' | translate) }}</span>
+                        <i class="bi bi-chevron-down"></i>
+                    </button>
+                    <ul class="dropdown-menu w-100">
+                        <li *ngFor="let participant of participants">
+                            <a class="dropdown-item" href="javascript:void(0)" (click)="payer = participant">
+                                {{ participant }}
+                            </a>
+                        </li>
+                    </ul>
+                </div>
+                <div class="invalid-feedback d-block" *ngIf="formErrors['payer']">{{ formErrors['payer'] }}</div>
             </div>
             <button type="button" class="btn btn-success" (click)="createCheck()">
                 <i class="bi bi-plus-circle me-1"></i>{{ 'CHECKS.MODAL.ADD_BUTTON' | translate }}
@@ -320,12 +386,25 @@ <h5 class="modal-title">{{ modalTitle }}</h5>
                 <i class="bi bi-wallet2 mx-1"></i>
                 <label class="control-label">{{ 'CHECKS.MODAL.PAYER_LABEL' | translate }}<span
                         class="text-danger">*</span></label>
-                <select [(ngModel)]="payer" name="payer" class="form-control" [class.is-invalid]="formErrors['payer']"
-                    [class.is-valid]="formValidated && !formErrors['payer'] && payer" required>
-                    <option value="">{{ 'CHECKS.MODAL.SELECT_PAYER' | translate }}</option>
-                    <option *ngFor="let participant of participants" [value]="participant">{{ participant }}</option>
-                </select>
-                <div class="invalid-feedback" *ngIf="formErrors['payer']">{{ formErrors['payer'] }}</div>
+                <div class="dropdown w-100">
+                    <button class="btn form-control text-start d-flex justify-content-between align-items-center"
+                            [class.is-invalid]="formErrors['payer']"
+                            [class.is-valid]="formValidated && !formErrors['payer'] && payer"
+                            type="button"
+                            data-bs-toggle="dropdown"
+                            aria-expanded="false">
+                        <span>{{ payer || ('CHECKS.MODAL.SELECT_PAYER' | translate) }}</span>
+                        <i class="bi bi-chevron-down"></i>
+                    </button>
+                    <ul class="dropdown-menu w-100">
+                        <li *ngFor="let participant of participants">
+                            <a class="dropdown-item" href="javascript:void(0)" (click)="payer = participant">
+                                {{ participant }}
+                            </a>
+                        </li>
+                    </ul>
+                </div>
+                <div class="invalid-feedback d-block" *ngIf="formErrors['payer']">{{ formErrors['payer'] }}</div>
             </div>
             <div class="form-group mb-3">
                 <i class="bi bi-cash-stack mx-1"></i>
diff --git a/src/ExpensesCalculator.UI/src/app/checks/check-list/check-list.component.ts b/src/ExpensesCalculator.UI/src/app/checks/check-list/check-list.component.ts
index 4fe6a39..797e2c7 100644
--- a/src/ExpensesCalculator.UI/src/app/checks/check-list/check-list.component.ts
+++ b/src/ExpensesCalculator.UI/src/app/checks/check-list/check-list.component.ts
@@ -25,6 +25,9 @@ declare var bootstrap: any;
 })
 export class CheckListComponent implements OnInit, OnChanges {
   @Input() dayExpensesId!: string;
+  @Input() dayExpensesLocation?: string;
+  @Input() dayExpensesDate?: Date;
+  @Input() currentLocale: string = 'en';
   @Input() participants: string[] = [];
   @Input() checks?: Check[]; // Optional: if provided, use these instead of loading
   @Input() scrollToCheckId?: string;
diff --git a/src/ExpensesCalculator.UI/src/app/dayExpenses/day-expenses-calculations/day-expenses-calculations.component.ts b/src/ExpensesCalculator.UI/src/app/dayExpenses/day-expenses-calculations/day-expenses-calculations.component.ts
index dfed8ba..ed57162 100644
--- a/src/ExpensesCalculator.UI/src/app/dayExpenses/day-expenses-calculations/day-expenses-calculations.component.ts
+++ b/src/ExpensesCalculator.UI/src/app/dayExpenses/day-expenses-calculations/day-expenses-calculations.component.ts
@@ -167,7 +167,12 @@ export class DayExpensesCalculationsComponent implements OnInit, AfterViewInit,
       );
     }
 
-    this.tourService.initialize(tourSteps);
+    // Initialize tour with global button title configuration
+    this.tourService.initialize(tourSteps, {
+      prevBtnTitle: this.translate.instant('TOUR.PREV_BTN'),
+      nextBtnTitle: this.translate.instant('TOUR.NEXT_BTN'),
+      endBtnTitle: this.translate.instant('TOUR.END_BTN')
+    });
   }
 
   startTour(): void {
diff --git a/src/ExpensesCalculator.UI/src/app/dayExpenses/day-expenses-details/day-expenses-details.component.html b/src/ExpensesCalculator.UI/src/app/dayExpenses/day-expenses-details/day-expenses-details.component.html
index b6f0095..bf46585 100644
--- a/src/ExpensesCalculator.UI/src/app/dayExpenses/day-expenses-details/day-expenses-details.component.html
+++ b/src/ExpensesCalculator.UI/src/app/dayExpenses/day-expenses-details/day-expenses-details.component.html
@@ -69,7 +69,7 @@
     <hr class="w-100 my-1" style="border-color: #080f27; opacity: 1;" />
 
     <!-- Check List Component -->
-    <app-check-list [dayExpensesId]="id" [participants]="dayExpenses?.participants || []" [checks]="checks" [scrollToCheckId]="scrollToCheckId" [scrollToItemId]="scrollToItemId" (checksLoaded)="onChecksLoaded()"></app-check-list>
+    <app-check-list [dayExpensesId]="id" [dayExpensesLocation]="dayExpenses?.location" [dayExpensesDate]="dayExpenses?.date" [currentLocale]="currentLocale" [participants]="dayExpenses?.participants || []" [checks]="checks" [scrollToCheckId]="scrollToCheckId" [scrollToItemId]="scrollToItemId" (checksLoaded)="onChecksLoaded()"></app-check-list>
 </div>
 
 <app-modal-window [modalId]="'staticBackdrop'" [modalTitle]="modalTitle" [currentModalContent]="currentModalContent">
diff --git a/src/ExpensesCalculator.UI/src/app/dayExpenses/day-expenses-details/day-expenses-details.component.ts b/src/ExpensesCalculator.UI/src/app/dayExpenses/day-expenses-details/day-expenses-details.component.ts
index c92d61d..b60869a 100644
--- a/src/ExpensesCalculator.UI/src/app/dayExpenses/day-expenses-details/day-expenses-details.component.ts
+++ b/src/ExpensesCalculator.UI/src/app/dayExpenses/day-expenses-details/day-expenses-details.component.ts
@@ -479,7 +479,12 @@ export class DayExpensesDetailsComponent implements OnInit, AfterViewInit, OnDes
       );
     }
 
-    this.tourService.initialize(tourSteps);
+    // Initialize tour with global button title configuration
+    this.tourService.initialize(tourSteps, {
+      prevBtnTitle: this.translate.instant('TOUR.PREV_BTN'),
+      nextBtnTitle: this.translate.instant('TOUR.NEXT_BTN'),
+      endBtnTitle: this.translate.instant('TOUR.END_BTN')
+    });
   }
 
   startTour() {
diff --git a/src/ExpensesCalculator.UI/src/app/dayExpenses/day-expenses-list/day-expenses-list.component.css b/src/ExpensesCalculator.UI/src/app/dayExpenses/day-expenses-list/day-expenses-list.component.css
index 0902e24..f95111f 100644
--- a/src/ExpensesCalculator.UI/src/app/dayExpenses/day-expenses-list/day-expenses-list.component.css
+++ b/src/ExpensesCalculator.UI/src/app/dayExpenses/day-expenses-list/day-expenses-list.component.css
@@ -194,7 +194,7 @@ tr .dropdown {
   }
 
   #calendarButton {
-    font-size: 0.75rem !important;
+    font-size: 0.8rem !important;
     padding: 0.25rem 0.5rem !important;
   }
 
@@ -204,6 +204,31 @@ tr .dropdown {
     width: 100% !important;
   }
 
+  /* Filter and Sort group - side by side buttons */
+  .filter-sort-group {
+    gap: 0.5rem !important;
+  }
+
+  .filter-sort-group .filter-btn {
+    width: 50% !important;
+    font-size: 0.85rem !important;
+    padding: 0.2rem 0.5rem !important;
+    line-height: 1.2 !important;
+  }
+
+  .filter-sort-group app-sort-bar {
+    width: 50% !important;
+    flex: 0 0 50%;
+  }
+
+  .filter-sort-group app-sort-bar .sort-dropdown {
+    width: 100%;
+  }
+
+  .filter-sort-group app-sort-bar button {
+    width: 100% !important;
+  }
+
   /* Reduce no data text size for small screens */
   .no-data-section h2 {
     font-size: 1.25rem !important;
diff --git a/src/ExpensesCalculator.UI/src/app/dayExpenses/day-expenses-list/day-expenses-list.component.html b/src/ExpensesCalculator.UI/src/app/dayExpenses/day-expenses-list/day-expenses-list.component.html
index a3eb879..eb01ec9 100644
--- a/src/ExpensesCalculator.UI/src/app/dayExpenses/day-expenses-list/day-expenses-list.component.html
+++ b/src/ExpensesCalculator.UI/src/app/dayExpenses/day-expenses-list/day-expenses-list.component.html
@@ -60,8 +60,8 @@ <h5 class="pt-3">{{ 'EXPENSES.NO_DATA_HINT' | translate }}</h5>
                     </div>
                 </div>
 
-                <!-- RIGHT SIDE: Filter dropdown and search -->
-                <div class="d-flex flex-column" tourAnchor="search-filter">
+                <!-- RIGHT SIDE: Filter dropdown and search (hidden on small screens) -->
+                <div class="d-none d-sm-flex flex-column" tourAnchor="search-filter">
                     <small class="text-white-50 mb-1" style="font-size: 0.7rem;">
                         <i class="bi bi-funnel me-1"></i>{{ 'ITEMS.FILTER.CAPTION' | translate }}
                     </small>
@@ -77,8 +77,33 @@ <h5 class="pt-3">{{ 'EXPENSES.NO_DATA_HINT' | translate }}</h5>
             </div>
         </div>
     </div>
-    <div *ngIf="showNoSearchResults()" class="text-white text-center py-4">
-        <h3>{{ 'EXPENSES.NO_SEARCH_RESULTS' | translate }}</h3>
+
+    <!-- Offcanvas for filters on small screens -->
+    <div class="offcanvas offcanvas-end dark-blue-1 text-white" tabindex="-1" id="filterOffcanvas" aria-labelledby="filterOffcanvasLabel">
+        <div class="offcanvas-header border-bottom border-secondary">
+            <h5 class="offcanvas-title" id="filterOffcanvasLabel">
+                <i class="bi bi-funnel me-2"></i>{{ 'ITEMS.FILTER.CAPTION' | translate }}
+            </h5>
+            <button type="button" class="btn-close btn-close-white" data-bs-dismiss="offcanvas" aria-label="Close"></button>
+        </div>
+        <div class="offcanvas-body">
+            <div class="d-flex flex-column">
+                <small class="text-white-50 mb-2" style="font-size: 0.7rem;">
+                    <i class="bi bi-funnel me-1"></i>{{ 'ITEMS.FILTER.CAPTION' | translate }}
+                </small>
+                <app-filter-bar
+                    [filterOptions]="filterOptions"
+                    [selectedCriteria]="filterCriteria"
+                    [filterText]="filterText"
+                    [placeholderKey]="'EXPENSES.SEARCH'"
+                    (criteriaChange)="changeFilterCriteria($event)"
+                    (filterTextChange)="onFilterChange($event)">
+                </app-filter-bar>
+                <button class="btn btn-primary w-100 mt-3" type="button" data-bs-dismiss="offcanvas">
+                    {{ 'ITEMS.FILTER.APPLY' | translate }}
+                </button>
+            </div>
+        </div>
     </div>
     <!-- Table view for larger screens -->
     <div *ngIf="expensesList.length > 0" class="table-responsive fix-table-height d-none d-sm-block">
@@ -172,12 +197,19 @@ <h3>{{ 'EXPENSES.NO_SEARCH_RESULTS' | translate }}</h3>
         </table>
     </div>
 
-    <!-- Sort controls for small screens -->
-    <div *ngIf="expensesList.length > 0" class="d-block d-sm-none mb-2 px-2" tourAnchor="sort-controls">
-        <div class="d-flex flex-column">
-            <small class="text-white-50 mb-1" style="font-size: 0.7rem;">
-                <i class="bi bi-sort-down me-1"></i>{{ 'ITEMS.SORT.CAPTION' | translate }}
-            </small>
+    <!-- Filter and Sort controls for small screens -->
+    <div *ngIf="showFilterControls()" class="d-block d-sm-none mb-2 px-2" tourAnchor="sort-controls">
+        <small class="text-white-50 mb-1" style="font-size: 0.7rem;">
+            <i class="bi bi-funnel me-1"></i>{{ 'ITEMS.FILTER.CAPTION' | translate }} & <i class="bi bi-sort-down me-1"></i>{{ 'ITEMS.SORT.CAPTION' | translate }}
+        </small>
+        <div class="d-flex w-100 filter-sort-group">
+            <button class="btn btn-outline-primary text-white filter-btn"
+                    type="button"
+                    data-bs-toggle="offcanvas"
+                    data-bs-target="#filterOffcanvas"
+                    aria-controls="filterOffcanvas">
+                <i class="bi bi-funnel me-1"></i>{{ 'ITEMS.FILTER.CAPTION' | translate }}
+            </button>
             <app-sort-bar
                 [sortOptions]="sortOptions"
                 [selectedColumn]="sortColumn"
@@ -187,6 +219,11 @@ <h3>{{ 'EXPENSES.NO_SEARCH_RESULTS' | translate }}</h3>
         </div>
     </div>
 
+    <!-- No Search Results -->
+    <div *ngIf="showNoSearchResults()" class="text-white text-center py-4">
+        <h3>{{ 'EXPENSES.NO_SEARCH_RESULTS' | translate }}</h3>
+    </div>
+
     <!-- Data label for small screens -->
     <div *ngIf="expensesList.length > 0" class="d-block d-sm-none px-2">
         <small class="text-white-50 mb-1" style="font-size: 0.7rem;">
diff --git a/src/ExpensesCalculator.UI/src/app/dayExpenses/day-expenses-list/day-expenses-list.component.ts b/src/ExpensesCalculator.UI/src/app/dayExpenses/day-expenses-list/day-expenses-list.component.ts
index ca8c765..0572266 100644
--- a/src/ExpensesCalculator.UI/src/app/dayExpenses/day-expenses-list/day-expenses-list.component.ts
+++ b/src/ExpensesCalculator.UI/src/app/dayExpenses/day-expenses-list/day-expenses-list.component.ts
@@ -705,13 +705,6 @@ export class DayExpensesListComponent implements OnInit, AfterViewInit, OnDestro
           title: this.translate.instant('TOUR.DATE_FILTER_TITLE'),
           placement: 'bottom',
           enableBackdrop: true
-        },
-        {
-          anchorId: 'search-filter',
-          content: this.translate.instant('TOUR.SEARCH_FILTER_CONTENT'),
-          title: this.translate.instant('TOUR.SEARCH_FILTER_TITLE'),
-          placement: 'top',
-          enableBackdrop: true
         }
       );
 
@@ -744,6 +737,13 @@ export class DayExpensesListComponent implements OnInit, AfterViewInit, OnDestro
       } else {
         // Steps for large screens (table view)
         tourSteps.push(
+          {
+            anchorId: 'search-filter',
+            content: this.translate.instant('TOUR.SEARCH_FILTER_CONTENT'),
+            title: this.translate.instant('TOUR.SEARCH_FILTER_TITLE'),
+            placement: 'top',
+            enableBackdrop: true
+          },
           {
             // Highlights the table header only (tourAnchor on <thead>)
             anchorId: 'expenses-table',
@@ -772,7 +772,12 @@ export class DayExpensesListComponent implements OnInit, AfterViewInit, OnDestro
       }
     }
 
-    this.tourService.initialize(tourSteps);
+    // Initialize tour with global button title configuration
+    this.tourService.initialize(tourSteps, {
+      prevBtnTitle: this.translate.instant('TOUR.PREV_BTN'),
+      nextBtnTitle: this.translate.instant('TOUR.NEXT_BTN'),
+      endBtnTitle: this.translate.instant('TOUR.END_BTN')
+    });
   }
 
   startTour() {
diff --git a/src/ExpensesCalculator.UI/src/app/items/item-list/item-list.component.css b/src/ExpensesCalculator.UI/src/app/items/item-list/item-list.component.css
index e2a03e6..f59cd35 100644
--- a/src/ExpensesCalculator.UI/src/app/items/item-list/item-list.component.css
+++ b/src/ExpensesCalculator.UI/src/app/items/item-list/item-list.component.css
@@ -188,7 +188,7 @@ td {
 /* Highlighted item animation */
 .highlighted-item {
   border: 2px solid #ffc107 !important;
-  animation: highlightPulse 2s ease-in-out 3;
+  animation: highlightPulse 1s ease-in-out 1;
   box-shadow: 0 0 20px rgba(255, 193, 7, 0.6);
 }
 
diff --git a/src/ExpensesCalculator.UI/src/app/items/item-list/item-list.component.html b/src/ExpensesCalculator.UI/src/app/items/item-list/item-list.component.html
index bced5a3..d69cccd 100644
--- a/src/ExpensesCalculator.UI/src/app/items/item-list/item-list.component.html
+++ b/src/ExpensesCalculator.UI/src/app/items/item-list/item-list.component.html
@@ -9,12 +9,12 @@
                 </div>
             </div>
 
-            <!-- Add Button and Filter/Sort Controls -->
-            <div *ngIf="itemsList.length > 0" class="d-flex justify-content-end pb-lg-2 px-0 px-md-2 my-2 my-md-3">
+            <!-- Add Button and Filter/Sort Controls for larger screens -->
+            <div *ngIf="itemsList.length > 0" class="d-none d-lg-flex justify-content-end pb-2 px-2 my-3">
                 <div class="col-12">
-                    <div class="d-flex flex-column flex-lg-row gap-2 align-items-stretch align-items-lg-center justify-content-lg-between">
-                        <div class="d-flex flex-column ms-md-2 align-self-start align-self-lg-center">
-                            <small class="text-white-50 mb-1 d-none d-sm-block" style="font-size: 0.7rem;">
+                    <div class="d-flex flex-row gap-2 align-items-center justify-content-between">
+                        <div class="d-flex flex-column ms-2">
+                            <small class="text-white-50 mb-1" style="font-size: 0.7rem;">
                                 <i class="bi bi-table me-1"></i>{{ 'ITEMS.DATA' | translate }}
                             </small>
                             <button id="addItemButton" class="btn btn-outline-primary text-white" (click)="openModal('add')"
@@ -22,6 +22,53 @@
                                 <i class="bi bi-plus-circle me-1"></i>{{ 'ITEMS.ADD' | translate }}
                             </button>
                         </div>
+                        <div class="d-flex flex-row gap-2 align-items-center">
+                            <div class="d-flex flex-column">
+                                <small class="text-white-50 mb-1" style="font-size: 0.7rem;">
+                                    <i class="bi bi-funnel me-1"></i>{{ 'ITEMS.FILTER.CAPTION' | translate }}
+                                </small>
+                                <app-filter-bar
+                                    [filterOptions]="filterOptions"
+                                    [selectedCriteria]="filterCriteria"
+                                    [filterText]="filterText"
+                                    [placeholderKey]="'ITEMS.SEARCH'"
+                                    (criteriaChange)="changeFilterCriteria($event)"
+                                    (filterTextChange)="onFilterChange($event)">
+                                </app-filter-bar>
+                            </div>
+                            <div class="d-flex flex-column">
+                                <small class="text-white-50 mb-1" style="font-size: 0.7rem;">
+                                    <i class="bi bi-sort-down me-1"></i>{{ 'ITEMS.SORT.CAPTION' | translate }}
+                                </small>
+                                <app-sort-bar [sortOptions]="sortOptions" [selectedColumn]="sortColumn"
+                                    [selectedOrder]="sortOrder" (sortChange)="onSortChange($event)">
+                                </app-sort-bar>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+
+            <!-- Add Button for small screens -->
+            <div *ngIf="itemsList.length > 0" class="d-block d-lg-none mb-2 px-0">
+                <button class="btn btn-outline-primary text-white w-100" (click)="openModal('add')"
+                    [disabled]="loading">
+                    <i class="bi bi-plus-circle me-1"></i>{{ 'ITEMS.ADD' | translate }}
+                </button>
+            </div>
+
+            <!-- Collapsible Filter/Sort controls for small screens -->
+            <div *ngIf="itemsList.length > 0" class="d-block d-lg-none mb-2 px-0">
+                <button class="btn btn-sm btn-outline-primary text-white w-100"
+                        type="button"
+                        data-bs-toggle="collapse"
+                        [attr.data-bs-target]="'#filterSortCollapse-' + checkId"
+                        [attr.aria-expanded]="false"
+                        [attr.aria-controls]="'filterSortCollapse-' + checkId">
+                    <i class="bi bi-funnel me-1"></i>{{ 'ITEMS.FILTER.CAPTION' | translate }} & <i class="bi bi-sort-down me-1"></i>{{ 'ITEMS.SORT.CAPTION' | translate }}
+                </button>
+                <div class="collapse mt-2" [id]="'filterSortCollapse-' + checkId">
+                    <div class="d-flex flex-column gap-2">
                         <div class="d-flex flex-column">
                             <small class="text-white-50 mb-1" style="font-size: 0.7rem;">
                                 <i class="bi bi-funnel me-1"></i>{{ 'ITEMS.FILTER.CAPTION' | translate }}
@@ -35,33 +82,21 @@
                                 (filterTextChange)="onFilterChange($event)">
                             </app-filter-bar>
                         </div>
-                        <div class="d-none d-lg-flex flex-column">
+                        <div class="d-flex flex-column">
                             <small class="text-white-50 mb-1" style="font-size: 0.7rem;">
                                 <i class="bi bi-sort-down me-1"></i>{{ 'ITEMS.SORT.CAPTION' | translate }}
                             </small>
-                            <app-sort-bar [sortOptions]="sortOptions" [selectedColumn]="sortColumn"
-                                [selectedOrder]="sortOrder" (sortChange)="onSortChange($event)">
+                            <app-sort-bar
+                                [sortOptions]="sortOptions"
+                                [selectedColumn]="sortColumn"
+                                [selectedOrder]="sortOrder"
+                                (sortChange)="onSortChange($event)">
                             </app-sort-bar>
                         </div>
                     </div>
                 </div>
             </div>
 
-            <!-- Sort controls for small screens -->
-            <div *ngIf="itemsList.length > 0" class="d-block d-lg-none mb-2 px-0">
-                <div class="d-flex flex-column">
-                    <small class="text-white-50 mb-1" style="font-size: 0.7rem;">
-                        <i class="bi bi-sort-down me-1"></i>{{ 'ITEMS.SORT.CAPTION' | translate }}
-                    </small>
-                    <app-sort-bar
-                        [sortOptions]="sortOptions"
-                        [selectedColumn]="sortColumn"
-                        [selectedOrder]="sortOrder"
-                        (sortChange)="onSortChange($event)">
-                    </app-sort-bar>
-                </div>
-            </div>
-
             <!-- Data label for small screens -->
             <div *ngIf="itemsList.length > 0" class="d-block d-sm-none mb-1">
                 <small class="text-white-50 mb-1" style="font-size: 0.7rem;">
@@ -72,7 +107,10 @@
             <!-- No Items Message -->
             <div *ngIf="!loading && itemsList.length === 0" class="text-white text-center py-4">
                 <h5>{{ 'ITEMS.NO_ITEMS' | translate }}</h5>
-                <button class="btn btn-outline-primary text-white mt-3" (click)="openModal('add')" [tourAnchor]="'add-item-btn-' + checkId">
+                <button *ngIf="isFirstCheck" class="btn btn-outline-primary text-white mt-3" (click)="openModal('add')" [tourAnchor]="'add-item-btn-' + checkId">
+                    <i class="bi bi-plus-circle me-1"></i>{{ 'ITEMS.ADD' | translate }}
+                </button>
+                <button *ngIf="!isFirstCheck" class="btn btn-outline-primary text-white mt-3" (click)="openModal('add')">
                     <i class="bi bi-plus-circle me-1"></i>{{ 'ITEMS.ADD' | translate }}
                 </button>
             </div>
@@ -84,10 +122,10 @@ <h3>{{ 'ITEMS.NO_SEARCH_RESULTS' | translate }}</h3>
 
             <!-- Items Cards with Pagination -->
             <div *ngIf="filteredItemsList.length > 0" class="d-flex align-items-center">
-                <!-- Previous Button -->
-                <button *ngIf="totalPages > 1" class="btn btn-outline-primary text-white me-1"
+                <!-- Previous Button (Desktop only) -->
+                <button *ngIf="totalPages > 1" class="btn btn-outline-primary text-white me-1 d-none d-md-flex"
                     (click)="goToPreviousPage()" [disabled]="currentPage === 1"
-                    style="width: 20px; height: 60px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; padding: 0;">
+                    style="width: 20px; height: 60px; align-items: center; justify-content: center; flex-shrink: 0; padding: 0;">
                     <i class="bi bi-chevron-left"></i>
                 </button>
 
@@ -157,14 +195,28 @@ <h3>{{ 'ITEMS.NO_SEARCH_RESULTS' | translate }}</h3>
                     </div>
                 </div>
 
-                <!-- Next Button -->
-                <button *ngIf="totalPages > 1" class="btn btn-outline-primary text-white ms-1" (click)="goToNextPage()"
-                    [disabled]="currentPage === totalPages"
-                    style="width: 20px; height: 60px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; padding: 0;">
+                <!-- Next Button (Desktop only) -->
+                <button *ngIf="totalPages > 1" class="btn btn-outline-primary text-white ms-1 d-none d-md-flex"
+                    (click)="goToNextPage()" [disabled]="currentPage === totalPages"
+                    style="width: 20px; height: 60px; align-items: center; justify-content: center; flex-shrink: 0; padding: 0;">
                     <i class="bi bi-chevron-right"></i>
                 </button>
             </div>
 
+            <!-- Pagination buttons for small screens -->
+            <div *ngIf="filteredItemsList.length > 0 && totalPages > 1" class="d-flex d-md-none justify-content-center mt-3 mb-2">
+                <div class="btn-group" role="group">
+                    <button class="btn btn-outline-primary text-white" (click)="goToPreviousPage()"
+                        [disabled]="currentPage === 1" style="min-width: 120px; font-size: 1.8rem;">
+                        <i class="bi bi-arrow-left" style="display: inline-block; transform: scaleX(2.5);"></i>
+                    </button>
+                    <button class="btn btn-outline-primary text-white" (click)="goToNextPage()"
+                        [disabled]="currentPage === totalPages" style="min-width: 120px; font-size: 1.8rem;">
+                        <i class="bi bi-arrow-right" style="display: inline-block; transform: scaleX(2.5);"></i>
+                    </button>
+                </div>
+            </div>
+
             <!-- Items count -->
             <div *ngIf="itemsList.length > 0 && filteredItemsList.length > 0">
                 <hr class="w-100 my-0" style="border-color: #080f27; opacity: 1;" />
@@ -207,7 +259,7 @@ <h5 class="modal-title">{{ modalTitle }}</h5>
                     style="resize: none;"></textarea>
             </div>
             <div class="row mb-2">
-                <div class="col-3">
+                <div class="col-6 col-md-3">
                     <div class="form-group">
                         <i class="bi bi-currency-dollar mx-1"></i>
                         <label class="control-label">{{ 'ITEMS.MODAL.PRICE' | translate }}<span
@@ -218,7 +270,7 @@ <h5 class="modal-title">{{ modalTitle }}</h5>
                         <div class="invalid-feedback" *ngIf="formErrors['price']">{{ formErrors['price'] }}</div>
                     </div>
                 </div>
-                <div class="col-3">
+                <div class="col-6 col-md-3">
                     <div class="form-group">
                         <i class="bi bi-grid-fill mx-1"></i>
                         <label class="control-label">{{ 'ITEMS.MODAL.AMOUNT' | translate }}<span
@@ -229,7 +281,7 @@ <h5 class="modal-title">{{ modalTitle }}</h5>
                         <div class="invalid-feedback" *ngIf="formErrors['amount']">{{ formErrors['amount'] }}</div>
                     </div>
                 </div>
-                <div class="col-6">
+                <div class="col-12 col-md-6">
                     <div class="form-group">
                         <i class="bi bi-star-fill mx-1"></i>
                         <label class="control-label mb-0">{{ 'ITEMS.MODAL.RATING' | translate }}<span
@@ -286,17 +338,17 @@ <h5 class="modal-title">{{ modalTitle }}</h5>
                         <i class="bi bi-people-fill mx-1"></i>
                         <label class="control-label">{{ 'ITEMS.MODAL.USERS' | translate }}<span
                                 class="text-danger">*</span></label>
-                        <div class="dropdown w-100" style="position: relative; z-index: 1050;">
+                        <div class="dropdown w-100" style="position: relative;">
                             <button class="form-control dropdown-toggle text-start"
                                 [class.is-invalid]="formErrors['users']"
                                 [class.is-valid]="formValidated && !formErrors['users'] && selectedUsers.length > 0"
                                 type="button" data-bs-toggle="dropdown" data-bs-auto-close="outside"
-                                data-bs-container="body" aria-expanded="false">
+                                aria-expanded="false">
                                 {{ selectedUsers.length > 0 ? selectedUsers.join(', ') : ('ITEMS.MODAL.SELECT_USERS' |
                                 translate) }}
                             </button>
                             <ul class="dropdown-menu w-100"
-                                style="position: absolute; z-index: 9999; max-height: 150px; overflow-y: auto;">
+                                style="max-height: 150px; overflow-y: auto;">
                                 <li>
                                     <label class="dropdown-item fw-bold">
                                         <input type="checkbox" [checked]="isAllUsersSelected()"
@@ -349,7 +401,7 @@ <h5 class="modal-title">{{ modalTitle }}</h5>
                     style="resize: none;"></textarea>
             </div>
             <div class="row mb-2">
-                <div class="col-3">
+                <div class="col-6 col-md-3">
                     <div class="form-group">
                         <i class="bi bi-currency-dollar mx-1"></i>
                         <label class="control-label">{{ 'ITEMS.MODAL.PRICE' | translate }}<span
@@ -360,7 +412,7 @@ <h5 class="modal-title">{{ modalTitle }}</h5>
                         <div class="invalid-feedback" *ngIf="formErrors['price']">{{ formErrors['price'] }}</div>
                     </div>
                 </div>
-                <div class="col-3">
+                <div class="col-6 col-md-3">
                     <div class="form-group">
                         <i class="bi bi-grid-fill mx-1"></i>
                         <label class="control-label">{{ 'ITEMS.MODAL.AMOUNT' | translate }}<span
@@ -371,7 +423,7 @@ <h5 class="modal-title">{{ modalTitle }}</h5>
                         <div class="invalid-feedback" *ngIf="formErrors['amount']">{{ formErrors['amount'] }}</div>
                     </div>
                 </div>
-                <div class="col-6">
+                <div class="col-12 col-md-6">
                     <div class="form-group">
                         <i class="bi bi-star-fill mx-1"></i>
                         <label class="control-label mb-0">{{ 'ITEMS.MODAL.RATING' | translate }}<span
@@ -426,17 +478,17 @@ <h5 class="modal-title">{{ modalTitle }}</h5>
                         <i class="bi bi-people-fill mx-1"></i>
                         <label class="control-label">{{ 'ITEMS.MODAL.USERS' | translate }}<span
                                 class="text-danger">*</span></label>
-                        <div class="dropdown w-100" style="position: relative; z-index: 1050;">
+                        <div class="dropdown w-100" style="position: relative;">
                             <button class="form-control dropdown-toggle text-start"
                                 [class.is-invalid]="formErrors['users']"
                                 [class.is-valid]="formValidated && !formErrors['users'] && selectedUsers.length > 0"
                                 type="button" data-bs-toggle="dropdown" data-bs-auto-close="outside"
-                                data-bs-container="body" aria-expanded="false">
+                                aria-expanded="false">
                                 {{ selectedUsers.length > 0 ? selectedUsers.join(', ') : ('ITEMS.MODAL.SELECT_USERS' |
                                 translate) }}
                             </button>
                             <ul class="dropdown-menu w-100"
-                                style="position: absolute; z-index: 9999; max-height: 150px; overflow-y: auto;">
+                                style="max-height: 150px; overflow-y: auto;">
                                 <li>
                                     <label class="dropdown-item fw-bold">
                                         <input type="checkbox" [checked]="isAllUsersSelected()"
@@ -480,21 +532,21 @@ <h5 class="modal-title">{{ modalTitle }}</h5>
                 <textarea [value]="comment" class="form-control" rows="3" disabled></textarea>
             </div>
             <div class="row mb-3">
-                <div class="col-3">
+                <div class="col-6 col-md-3">
                     <div class="form-group">
                         <i class="bi bi-currency-dollar mx-1"></i>
                         <label class="control-label">{{ 'ITEMS.MODAL.PRICE' | translate }}</label>
                         <input type="number" [value]="price" class="form-control" disabled />
                     </div>
                 </div>
-                <div class="col-3">
+                <div class="col-6 col-md-3">
                     <div class="form-group">
                         <i class="bi bi-grid-fill mx-1"></i>
                         <label class="control-label">{{ 'ITEMS.MODAL.AMOUNT' | translate }}</label>
                         <input type="number" [value]="amount" class="form-control" disabled />
                     </div>
                 </div>
-                <div class="col-6">
+                <div class="col-12 col-md-6">
                     <div class="form-group">
                         <i class="bi bi-star-fill mx-1"></i>
                         <label class="control-label mb-0">{{ 'ITEMS.MODAL.RATING' | translate }}</label>
diff --git a/src/ExpensesCalculator.UI/src/app/items/item-list/item-list.component.ts b/src/ExpensesCalculator.UI/src/app/items/item-list/item-list.component.ts
index 81e2ce2..54ccc85 100644
--- a/src/ExpensesCalculator.UI/src/app/items/item-list/item-list.component.ts
+++ b/src/ExpensesCalculator.UI/src/app/items/item-list/item-list.component.ts
@@ -32,6 +32,7 @@ export class ItemListComponent implements OnInit, OnChanges, OnDestroy, AfterVie
   @Input() isLoading?: boolean; // Optional: external loading state
   @Input() highlightedItemId?: string;
   @Input() disableTooltipManagement: boolean = false; // When true, parent handles tooltips
+  @Input() isFirstCheck: boolean = false; // Indicates if this is the first check (for tour anchor)
   @Output() checkSumUpdated = new EventEmitter<{ checkId: string, newSum: number }>();
   @Output() itemsChanged = new EventEmitter<string>(); // Emit when items are modified (checkId)
 
@@ -123,6 +124,9 @@ export class ItemListComponent implements OnInit, OnChanges, OnDestroy, AfterVie
       this.applyLocalFiltering();
     });
 
+    // Set items per page based on screen size
+    this.setItemsPerPageByScreenSize();
+
     // If items are provided, use them; otherwise load them
     if (this.items && this.items.length > 0) {
       this.itemsList = this.items;
@@ -182,12 +186,22 @@ export class ItemListComponent implements OnInit, OnChanges, OnDestroy, AfterVie
     }
 
     // Clean up modal if it was moved to body
-    if (this.modalInstance) {
-      const modalElement = document.getElementById('itemsModal-' + this.checkId);
-      if (modalElement && modalElement.parentElement === document.body) {
+    const modalElement = document.getElementById('itemsModal-' + this.checkId);
+    if (modalElement) {
+      // Try to get the modal instance if we lost our reference
+      if (!this.modalInstance) {
+        this.modalInstance = bootstrap.Modal.getInstance(modalElement);
+      }
+
+      if (this.modalInstance) {
+        this.modalInstance.dispose();
+        this.modalInstance = null;
+      }
+
+      // Remove from body if it was moved there
+      if (modalElement.parentElement === document.body) {
         document.body.removeChild(modalElement);
       }
-      this.modalInstance.dispose();
     }
   }
 
@@ -371,15 +385,10 @@ export class ItemListComponent implements OnInit, OnChanges, OnDestroy, AfterVie
   scrollToHighlightedItem(): void {
     if (!this.highlightedItemId) return;
 
-    const itemElement = document.querySelector(`.highlighted-item`);
-    if (itemElement) {
-      itemElement.scrollIntoView({ behavior: 'auto', block: 'center' });
-
-      // Remove highlight after animation completes (2s * 3 iterations = 6s)
-      setTimeout(() => {
-        this.highlightedItemId = undefined;
-      }, 6000);
-    }
+    // Remove highlight after animation completes (1s * 1 iteration = 1s)
+    setTimeout(() => {
+      this.highlightedItemId = undefined;
+    }, 1000);
   }
 
   goToNextPage(): void {
@@ -445,10 +454,7 @@ export class ItemListComponent implements OnInit, OnChanges, OnDestroy, AfterVie
     this.modalTitle = this.translate.instant(`ITEMS.MODAL.${type.toUpperCase()}_TITLE`);
 
     const modalElement = document.getElementById('itemsModal-' + this.checkId);
-    if (!modalElement) {
-      console.error('Modal element not found!');
-      return;
-    }
+    if (!modalElement) return;
 
     if (type === 'add') {
       this.clearFormData();
@@ -470,6 +476,14 @@ export class ItemListComponent implements OnInit, OnChanges, OnDestroy, AfterVie
   }
 
   hideModal(): void {
+    // Try to get the modal instance if we lost our reference
+    if (!this.modalInstance) {
+      const modalElement = document.getElementById('itemsModal-' + this.checkId);
+      if (modalElement) {
+        this.modalInstance = bootstrap.Modal.getInstance(modalElement);
+      }
+    }
+
     if (this.modalInstance) {
       this.modalInstance.hide();
       this.formErrors = {};
@@ -738,4 +752,13 @@ export class ItemListComponent implements OnInit, OnChanges, OnDestroy, AfterVie
     if (this.filteredItemsList.length === 0) return 0;
     return Math.min(this.currentPage * this.itemsPerPage, this.filteredItemsList.length);
   }
+
+  setItemsPerPageByScreenSize(): void {
+    // Bootstrap's md breakpoint is 768px
+    if (window.innerWidth < 768) {
+      this.itemsPerPage = 3;
+    } else {
+      this.itemsPerPage = 8;
+    }
+  }
 }
diff --git a/src/ExpensesCalculator.UI/src/app/recommendations/recommendations/recommendations.component.css b/src/ExpensesCalculator.UI/src/app/recommendations/recommendations/recommendations.component.css
index e861945..21fc716 100644
--- a/src/ExpensesCalculator.UI/src/app/recommendations/recommendations/recommendations.component.css
+++ b/src/ExpensesCalculator.UI/src/app/recommendations/recommendations/recommendations.component.css
@@ -134,6 +134,31 @@ input[type="search"]:-ms-input-placeholder {
     font-size: 0.85rem !important;
   }
 
+  /* Filter and Sort group - side by side buttons */
+  .filter-sort-group {
+    gap: 0.5rem !important;
+  }
+
+  .filter-sort-group .filter-btn {
+    width: 50% !important;
+    font-size: 0.85rem !important;
+    padding: 0.2rem 0.5rem !important;
+    line-height: 1.2 !important;
+  }
+
+  .filter-sort-group app-sort-bar {
+    width: 50% !important;
+    flex: 0 0 50%;
+  }
+
+  .filter-sort-group app-sort-bar .sort-dropdown {
+    width: 100%;
+  }
+
+  .filter-sort-group app-sort-bar button {
+    width: 100% !important;
+  }
+
   /* Badge text */
   .badge {
     font-size: 0.75rem !important;
diff --git a/src/ExpensesCalculator.UI/src/app/recommendations/recommendations/recommendations.component.html b/src/ExpensesCalculator.UI/src/app/recommendations/recommendations/recommendations.component.html
index cf7bd29..b41caac 100644
--- a/src/ExpensesCalculator.UI/src/app/recommendations/recommendations/recommendations.component.html
+++ b/src/ExpensesCalculator.UI/src/app/recommendations/recommendations/recommendations.component.html
@@ -20,8 +20,8 @@ <h4 class="mt-1 mb-0 mb-md-4">
             <i class="bi bi-plus-circle me-1"></i>{{ 'ITEMS.ADD' | translate }}
         </button>
 
-        <!-- Tag Filter Section and Filter/Sort Controls -->
-        <div class="d-flex justify-content-start justify-content-lg-end pb-lg-2">
+        <!-- Filter/Sort Controls for Large Screens -->
+        <div class="d-none d-lg-flex justify-content-end pb-2">
             <div class="col-12">
                 <div class="d-flex flex-column flex-lg-row gap-2 align-items-stretch align-items-lg-end justify-content-lg-between px-0">
                     <!-- Tag Filter Group -->
@@ -52,15 +52,6 @@ <h4 class="mt-1 mb-0 mb-md-4">
                                 </ul>
                             </div>
                         </div>
-
-                        <!-- Tag Badges Display (shown below tag input on small screens only) -->
-                        <div *ngIf="filterTags.length > 0" class="d-block d-lg-none mt-2 scrollbar-dark" style="max-height: 60px; overflow-x: auto; overflow-y: hidden; white-space: nowrap;">
-                            <span *ngFor="let tag of filterTags" class="badge border border-primary text-white fw-normal me-2 mb-2"
-                                style="font-size: 0.9rem; display: inline-block; cursor: pointer;">
-                                #{{ tag }}
-                                <i class="bi bi-x ms-1" (click)="removeFilterTag(tag)"></i>
-                            </span>
-                        </div>
                     </div>
 
                     <!-- Search and Sort Group -->
@@ -89,7 +80,7 @@ <h4 class="mt-1 mb-0 mb-md-4">
                 </div>
 
                 <!-- Tag Badges Display (shown below all controls on large screens only) -->
-                <div *ngIf="filterTags.length > 0" class="d-none d-lg-block mt-2 scrollbar-dark" style="max-height: 60px; overflow-x: auto; overflow-y: hidden; white-space: nowrap;">
+                <div *ngIf="filterTags.length > 0" class="mt-2 scrollbar-dark" style="max-height: 60px; overflow-x: auto; overflow-y: hidden; white-space: nowrap;">
                     <span *ngFor="let tag of filterTags" class="badge border border-primary text-white fw-normal me-2 mb-2"
                         style="font-size: 0.9rem; display: inline-block; cursor: pointer;">
                         #{{ tag }}
@@ -99,8 +90,102 @@ <h4 class="mt-1 mb-0 mb-md-4">
             </div>
         </div>
 
-        <!-- Checkbox -->
-        <div class="d-flex justify-content-start justify-content-lg-end mt-2 mb-3">
+        <!-- Filter/Sort Controls for Small Screens -->
+        <div class="d-flex d-lg-none flex-column gap-2">
+            <small class="text-white-50 d-block d-sm-none" style="font-size: 0.7rem;">
+                <i class="bi bi-funnel me-1"></i>{{ 'ITEMS.FILTER.CAPTION' | translate }} & <i class="bi bi-sort-down me-1"></i>{{ 'ITEMS.SORT.CAPTION' | translate }}
+            </small>
+            <div class="d-flex w-100 filter-sort-group" tourAnchor="filter-sort-controls">
+                <button class="btn btn-outline-primary text-white filter-btn"
+                        type="button"
+                        data-bs-toggle="offcanvas"
+                        data-bs-target="#filterOffcanvas"
+                        aria-controls="filterOffcanvas">
+                    <i class="bi bi-funnel me-1"></i>{{ 'ITEMS.FILTER.CAPTION' | translate }}
+                </button>
+                <app-sort-bar [sortOptions]="sortOptions" [selectedColumn]="sortColumn" [selectedOrder]="sortOrder"
+                    (sortChange)="onSortChange($event)">
+                </app-sort-bar>
+            </div>
+        </div>
+
+        <!-- Offcanvas for filters on small screens -->
+        <div class="offcanvas offcanvas-end dark-blue-1 text-white" tabindex="-1" id="filterOffcanvas" aria-labelledby="filterOffcanvasLabel">
+            <div class="offcanvas-header border-bottom border-secondary">
+                <h5 class="offcanvas-title" id="filterOffcanvasLabel">
+                    <i class="bi bi-funnel me-2"></i>{{ 'ITEMS.FILTER.CAPTION' | translate }}
+                </h5>
+                <button type="button" class="btn-close btn-close-white" data-bs-dismiss="offcanvas" aria-label="Close"></button>
+            </div>
+            <div class="offcanvas-body">
+                <!-- Tag Filter -->
+                <div class="mb-4">
+                    <small class="text-white-50 mb-2 d-block" style="font-size: 0.7rem;">
+                        <i class="bi bi-tags me-1"></i>{{ 'ITEMS.FILTER.TAG_FILTER' | translate }}
+                    </small>
+                    <div class="position-relative">
+                        <div class="input-group">
+                            <span class="input-group-text bi bi-tags bg-transparent text-white border-primary"></span>
+                            <input [(ngModel)]="tagFilterInput" name="tagFilterInputOffcanvas"
+                                class="form-control bg-transparent text-white border-primary"
+                                [placeholder]="'ITEMS.TAG_FILTER_PLACEHOLDER' | translate" (input)="onTagInputChange()"
+                                (keydown.enter)="addFilterTag(); $event.preventDefault()" [disabled]="isLoading" />
+                            <button type="button" class="btn btn-outline-primary text-white" (click)="addFilterTag()"
+                                [disabled]="isLoading">
+                                <i class="bi bi-plus"></i>
+                            </button>
+                        </div>
+                        <!-- Tag Suggestions Dropdown -->
+                        <div *ngIf="showTagSuggestions" class="position-absolute w-100 mt-1" style="z-index: 1000;">
+                            <ul class="list-group">
+                                <li *ngFor="let tag of filteredTagSuggestions"
+                                    class="list-group-item list-group-item-action bg-dark text-white border-primary"
+                                    style="cursor: pointer;" (click)="selectTagSuggestion(tag)">
+                                    #{{ tag }}
+                                </li>
+                            </ul>
+                        </div>
+                    </div>
+                    <!-- Tag Badges Display -->
+                    <div *ngIf="filterTags.length > 0" class="mt-2 scrollbar-dark" style="max-height: 60px; overflow-x: auto; overflow-y: hidden; white-space: nowrap;">
+                        <span *ngFor="let tag of filterTags" class="badge border border-primary text-white fw-normal me-2 mb-2"
+                            style="font-size: 0.9rem; display: inline-block; cursor: pointer;">
+                            #{{ tag }}
+                            <i class="bi bi-x ms-1" (click)="removeFilterTag(tag)"></i>
+                        </span>
+                    </div>
+                </div>
+
+                <!-- Search Filter -->
+                <div class="mb-4">
+                    <small class="text-white-50 mb-2 d-block" style="font-size: 0.7rem;">
+                        <i class="bi bi-funnel me-1"></i>{{ 'ITEMS.FILTER.CAPTION' | translate }}
+                    </small>
+                    <app-filter-bar [filterOptions]="filterOptions" [selectedCriteria]="filterCriteria"
+                        [filterText]="filterText" [placeholderKey]="'ITEMS.SEARCH'"
+                        (criteriaChange)="changeFilterCriteria($event)" (filterTextChange)="onFilterChange($event)">
+                    </app-filter-bar>
+                </div>
+
+                <!-- Checkbox -->
+                <div class="mb-4">
+                    <div class="form-check">
+                        <input type="checkbox" class="form-check-input" id="useOnlyMyItemsOffcanvas"
+                            [(ngModel)]="onlyMyItems" (change)="onOnlyMyItemsChange()">
+                        <label class="form-check-label text-white" for="useOnlyMyItemsOffcanvas">
+                            {{ 'ITEMS.USE_ONLY_MY_ITEMS' | translate }}
+                        </label>
+                    </div>
+                </div>
+
+                <button class="btn btn-primary w-100" type="button" data-bs-dismiss="offcanvas">
+                    {{ 'ITEMS.FILTER.APPLY' | translate }}
+                </button>
+            </div>
+        </div>
+
+        <!-- Checkbox for Large Screens -->
+        <div class="d-none d-lg-flex justify-content-start justify-content-lg-end mt-2 mb-3">
             <div class="form-check text-nowrap" tourAnchor="only-my-items">
                 <input type="checkbox" class="form-check-input" id="useOnlyMyItems"
                     [(ngModel)]="onlyMyItems" (change)="onOnlyMyItemsChange()">
@@ -110,7 +195,14 @@ <h4 class="mt-1 mb-0 mb-md-4">
             </div>
         </div>
 
-        <hr class="w-100 my-3" style="border-color: #080f27; opacity: 1;" />
+        <hr class="w-100 mt-3 mb-1 mb-sm-3" style="border-color: #080f27; opacity: 1;" />
+
+        <!-- Data caption for small screens -->
+        <div *ngIf="itemsList.length > 0" class="d-block d-sm-none mb-2">
+            <small class="text-white-50" style="font-size: 0.7rem;">
+                <i class="bi bi-table me-1"></i>{{ 'ITEMS.DATA' | translate }}
+            </small>
+        </div>
 
         <!-- No Items Message -->
         <div *ngIf="!isLoading && itemsList.length === 0" class="text-white text-center py-4">
@@ -125,10 +217,10 @@ <h3>{{ 'ITEMS.NO_SEARCH_RESULTS' | translate }}</h3>
 
         <!-- Items Cards with Pagination -->
         <div *ngIf="filteredItemsList.length > 0" class="d-flex align-items-center">
-            <!-- Previous Button -->
-            <button *ngIf="totalPages > 1" class="btn btn-outline-primary text-white me-1" (click)="goToPreviousPage()"
-                [disabled]="currentPage === 1"
-                style="width: 20px; height: 60px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; padding: 0;">
+            <!-- Previous Button (Desktop only) -->
+            <button *ngIf="totalPages > 1" class="btn btn-outline-primary text-white me-1 d-none d-md-flex"
+                (click)="goToPreviousPage()" [disabled]="currentPage === 1"
+                style="width: 20px; height: 60px; align-items: center; justify-content: center; flex-shrink: 0; padding: 0;">
                 <i class="bi bi-chevron-left"></i>
             </button>
 
@@ -286,14 +378,28 @@ <h3>{{ 'ITEMS.NO_SEARCH_RESULTS' | translate }}</h3>
                 </div>
             </div>
 
-            <!-- Next Button -->
-            <button *ngIf="totalPages > 1" class="btn btn-outline-primary text-white ms-1" (click)="goToNextPage()"
-                [disabled]="currentPage === totalPages"
-                style="width: 20px; height: 60px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; padding: 0;">
+            <!-- Next Button (Desktop only) -->
+            <button *ngIf="totalPages > 1" class="btn btn-outline-primary text-white ms-1 d-none d-md-flex"
+                (click)="goToNextPage()" [disabled]="currentPage === totalPages"
+                style="width: 20px; height: 60px; align-items: center; justify-content: center; flex-shrink: 0; padding: 0;">
                 <i class="bi bi-chevron-right"></i>
             </button>
         </div>
 
+        <!-- Pagination buttons for small screens -->
+        <div *ngIf="filteredItemsList.length > 0 && totalPages > 1" class="d-flex d-md-none justify-content-center mt-3 mb-2">
+            <div class="btn-group" role="group">
+                <button class="btn btn-outline-primary text-white" (click)="goToPreviousPage()"
+                    [disabled]="currentPage === 1" style="min-width: 120px; font-size: 1.8rem;">
+                    <i class="bi bi-arrow-left" style="display: inline-block; transform: scaleX(2.5);"></i>
+                </button>
+                <button class="btn btn-outline-primary text-white" (click)="goToNextPage()"
+                    [disabled]="currentPage === totalPages" style="min-width: 120px; font-size: 1.8rem;">
+                    <i class="bi bi-arrow-right" style="display: inline-block; transform: scaleX(2.5);"></i>
+                </button>
+            </div>
+        </div>
+
         <!-- Items count -->
         <div *ngIf="totalCount > 0">
             <hr class="w-100 my-0" style="border-color: #080f27; opacity: 1;" />
@@ -337,7 +443,7 @@ <h5 class="modal-title">{{ modalTitle }}</h5>
                     style="resize: none;"></textarea>
             </div>
             <div class="row mb-2">
-                <div class="col-3">
+                <div class="col-6 col-md-3">
                     <div class="form-group">
                         <i class="bi bi-currency-dollar mx-1"></i>
                         <label class="control-label">{{ 'ITEMS.MODAL.PRICE' | translate }}<span
@@ -348,7 +454,7 @@ <h5 class="modal-title">{{ modalTitle }}</h5>
                         <div class="invalid-feedback" *ngIf="formErrors['price']">{{ formErrors['price'] }}</div>
                     </div>
                 </div>
-                <div class="col-3">
+                <div class="col-6 col-md-3">
                     <div class="form-group">
                         <i class="bi bi-grid-fill mx-1"></i>
                         <label class="control-label">{{ 'ITEMS.MODAL.AMOUNT' | translate }}<span
@@ -359,7 +465,7 @@ <h5 class="modal-title">{{ modalTitle }}</h5>
                         <div class="invalid-feedback" *ngIf="formErrors['amount']">{{ formErrors['amount'] }}</div>
                     </div>
                 </div>
-                <div class="col-6">
+                <div class="col-12 col-md-6">
                     <div class="form-group">
                         <i class="bi bi-star-fill mx-1"></i>
                         <label class="control-label mb-0">{{ 'ITEMS.MODAL.RATING' | translate }}<span
@@ -433,7 +539,7 @@ <h5 class="modal-title">{{ modalTitle }}</h5>
                     style="resize: none;"></textarea>
             </div>
             <div class="row mb-2">
-                <div class="col-3">
+                <div class="col-6 col-md-3">
                     <div class="form-group">
                         <i class="bi bi-currency-dollar mx-1"></i>
                         <label class="control-label">{{ 'ITEMS.MODAL.PRICE' | translate }}<span
@@ -444,7 +550,7 @@ <h5 class="modal-title">{{ modalTitle }}</h5>
                         <div class="invalid-feedback" *ngIf="formErrors['price']">{{ formErrors['price'] }}</div>
                     </div>
                 </div>
-                <div class="col-3">
+                <div class="col-6 col-md-3">
                     <div class="form-group">
                         <i class="bi bi-grid-fill mx-1"></i>
                         <label class="control-label">{{ 'ITEMS.MODAL.AMOUNT' | translate }}<span
@@ -455,7 +561,7 @@ <h5 class="modal-title">{{ modalTitle }}</h5>
                         <div class="invalid-feedback" *ngIf="formErrors['amount']">{{ formErrors['amount'] }}</div>
                     </div>
                 </div>
-                <div class="col-6">
+                <div class="col-12 col-md-6">
                     <div class="form-group">
                         <i class="bi bi-star-fill mx-1"></i>
                         <label class="control-label mb-0">{{ 'ITEMS.MODAL.RATING' | translate }}<span
@@ -520,21 +626,21 @@ <h5 class="modal-title">{{ modalTitle }}</h5>
                 <textarea [value]="comment" class="form-control" rows="3" disabled></textarea>
             </div>
             <div class="row mb-3">
-                <div class="col-3">
+                <div class="col-6 col-md-3">
                     <div class="form-group">
                         <i class="bi bi-currency-dollar mx-1"></i>
                         <label class="control-label">{{ 'ITEMS.MODAL.PRICE' | translate }}</label>
                         <input type="number" [value]="price" class="form-control" disabled />
                     </div>
                 </div>
-                <div class="col-3">
+                <div class="col-6 col-md-3">
                     <div class="form-group">
                         <i class="bi bi-grid-fill mx-1"></i>
                         <label class="control-label">{{ 'ITEMS.MODAL.AMOUNT' | translate }}</label>
                         <input type="number" [value]="amount" class="form-control" disabled />
                     </div>
                 </div>
-                <div class="col-6">
+                <div class="col-12 col-md-6">
                     <div class="form-group">
                         <i class="bi bi-star-fill mx-1"></i>
                         <label class="control-label mb-0">{{ 'ITEMS.MODAL.RATING' | translate }}</label>
diff --git a/src/ExpensesCalculator.UI/src/app/recommendations/recommendations/recommendations.component.ts b/src/ExpensesCalculator.UI/src/app/recommendations/recommendations/recommendations.component.ts
index df6875f..ccc8b5e 100644
--- a/src/ExpensesCalculator.UI/src/app/recommendations/recommendations/recommendations.component.ts
+++ b/src/ExpensesCalculator.UI/src/app/recommendations/recommendations/recommendations.component.ts
@@ -70,8 +70,6 @@ export class RecommendationsComponent implements OnInit, AfterViewInit, OnDestro
   private actualFilterCriteria = 'Name';
   sortColumn: 'name' | 'price' | 'amount' | 'totalPrice' | 'userCount' | 'rating' = 'rating';
   sortOrder: 'asc' | 'desc' = 'desc';
-  tempSortColumn: 'name' | 'price' | 'amount' | 'totalPrice' | 'userCount' | 'rating' = 'rating';
-  tempSortOrder: 'asc' | 'desc' = 'desc';
 
   // Filter and sort options for shared components
   filterOptions: FilterOption[] = [
@@ -103,13 +101,6 @@ export class RecommendationsComponent implements OnInit, AfterViewInit, OnDestro
   private filterTextSubject = new Subject<string>();
   private filterTextSubscription!: Subscription;
 
-  get sortDisplayText(): string {
-    const columnKey = `ITEMS.SORT.${this.sortColumn.toUpperCase().replace('PRICE', 'PRICE').replace('TOTALPRICE', 'TOTAL_PRICE').replace('USERCOUNT', 'USER_COUNT')}`;
-    const columnText = this.translate.instant(columnKey);
-    const orderIcon = this.sortOrder === 'asc' ? '↑' : '↓';
-    return `${columnText} ${orderIcon}`;
-  }
-
   get filterCriteriaKey(): string {
     const keyMap: Record<string, string> = {
       'Name': 'ITEMS.FILTER.NAME',
@@ -153,6 +144,9 @@ export class RecommendationsComponent implements OnInit, AfterViewInit, OnDestro
       this.loadItems();
     });
 
+    // Set items per page based on screen size
+    this.setItemsPerPageByScreenSize();
+
     this.loadItems();
     this.loadAllTags();
   }
@@ -190,6 +184,15 @@ export class RecommendationsComponent implements OnInit, AfterViewInit, OnDestro
     }
   }
 
+  setItemsPerPageByScreenSize(): void {
+    // Bootstrap's md breakpoint is 768px
+    if (window.innerWidth < 768) {
+      this.itemsPerPage = 3;
+    } else {
+      this.itemsPerPage = 12;
+    }
+  }
+
   initializeTooltips(): void {
     const tooltipTriggerList = document.querySelectorAll('[data-bs-toggle="tooltip"]');
     tooltipTriggerList.forEach((tooltipTriggerEl) => {
@@ -309,22 +312,7 @@ export class RecommendationsComponent implements OnInit, AfterViewInit, OnDestro
     this.loadItems();
   }
 
-  openSortModal(): void {
-    this.tempSortColumn = this.sortColumn;
-    this.tempSortOrder = this.sortOrder;
-  }
-
-  applySorting2(): void {
-    this.sortColumn = this.tempSortColumn;
-    this.sortOrder = this.tempSortOrder;
-    this.currentPage = 1;
-    this.loadItems();
-    this.closeSortDropdown();
-  }
-
   resetSorting(): void {
-    this.tempSortColumn = 'name';
-    this.tempSortOrder = 'asc';
     this.sortColumn = 'name';
     this.sortOrder = 'asc';
     this.currentPage = 1;
@@ -620,47 +608,62 @@ export class RecommendationsComponent implements OnInit, AfterViewInit, OnDestro
   // Tour
   initializeTour(): void {
     const hasItems = !!document.querySelector('[touranchor="items-grid"]');
+    const isSmallScreen = window.innerWidth < 576;
 
     const tourSteps: any[] = [];
 
-    // Always show basic steps
-    tourSteps.push(
-      {
-        anchorId: 'tag-filter',
-        content: this.translate.instant('TOUR_RECOMMENDATIONS.TAG_FILTER_CONTENT'),
-        title: this.translate.instant('TOUR_RECOMMENDATIONS.TAG_FILTER_TITLE'),
-        placement: 'bottom',
-        enableBackdrop: true
-      },
-      {
-        anchorId: 'search-filter',
-        content: this.translate.instant('TOUR_RECOMMENDATIONS.SEARCH_FILTER_CONTENT'),
-        title: this.translate.instant('TOUR_RECOMMENDATIONS.SEARCH_FILTER_TITLE'),
-        placement: 'bottom',
-        enableBackdrop: true
-      },
-      {
-        anchorId: 'sort-bar',
-        content: this.translate.instant('TOUR_RECOMMENDATIONS.SORT_BAR_CONTENT'),
-        title: this.translate.instant('TOUR_RECOMMENDATIONS.SORT_BAR_TITLE'),
-        placement: 'left',
-        enableBackdrop: true
-      },
-      {
-        anchorId: 'add-item-btn',
-        content: this.translate.instant('TOUR_RECOMMENDATIONS.ADD_ITEM_CONTENT'),
-        title: this.translate.instant('TOUR_RECOMMENDATIONS.ADD_ITEM_TITLE'),
+    // Add item button - always visible
+    tourSteps.push({
+      anchorId: 'add-item-btn',
+      content: this.translate.instant('TOUR_RECOMMENDATIONS.ADD_ITEM_CONTENT'),
+      title: this.translate.instant('TOUR_RECOMMENDATIONS.ADD_ITEM_TITLE'),
+      placement: 'bottom',
+      enableBackdrop: true
+    });
+
+    // Different steps for small vs large screens
+    if (isSmallScreen) {
+      // Steps for small screens (filter/sort group)
+      tourSteps.push({
+        anchorId: 'filter-sort-controls',
+        content: this.translate.instant('TOUR_RECOMMENDATIONS.FILTER_SORT_CONTROLS_CONTENT'),
+        title: this.translate.instant('TOUR_RECOMMENDATIONS.FILTER_SORT_CONTROLS_TITLE'),
         placement: 'bottom',
         enableBackdrop: true
-      },
-      {
-        anchorId: 'only-my-items',
-        content: this.translate.instant('TOUR_RECOMMENDATIONS.ONLY_MY_ITEMS_CONTENT'),
-        title: this.translate.instant('TOUR_RECOMMENDATIONS.ONLY_MY_ITEMS_TITLE'),
-        placement: 'left',
-        enableBackdrop: true
-      }
-    );
+      });
+    } else {
+      // Steps for large screens (individual controls)
+      tourSteps.push(
+        {
+          anchorId: 'tag-filter',
+          content: this.translate.instant('TOUR_RECOMMENDATIONS.TAG_FILTER_CONTENT'),
+          title: this.translate.instant('TOUR_RECOMMENDATIONS.TAG_FILTER_TITLE'),
+          placement: 'bottom',
+          enableBackdrop: true
+        },
+        {
+          anchorId: 'search-filter',
+          content: this.translate.instant('TOUR_RECOMMENDATIONS.SEARCH_FILTER_CONTENT'),
+          title: this.translate.instant('TOUR_RECOMMENDATIONS.SEARCH_FILTER_TITLE'),
+          placement: 'bottom',
+          enableBackdrop: true
+        },
+        {
+          anchorId: 'sort-bar',
+          content: this.translate.instant('TOUR_RECOMMENDATIONS.SORT_BAR_CONTENT'),
+          title: this.translate.instant('TOUR_RECOMMENDATIONS.SORT_BAR_TITLE'),
+          placement: 'left',
+          enableBackdrop: true
+        },
+        {
+          anchorId: 'only-my-items',
+          content: this.translate.instant('TOUR_RECOMMENDATIONS.ONLY_MY_ITEMS_CONTENT'),
+          title: this.translate.instant('TOUR_RECOMMENDATIONS.ONLY_MY_ITEMS_TITLE'),
+          placement: 'left',
+          enableBackdrop: true
+        }
+      );
+    }
 
     // Add items grid step only if items exist
     if (hasItems) {
@@ -668,12 +671,17 @@ export class RecommendationsComponent implements OnInit, AfterViewInit, OnDestro
         anchorId: 'items-grid',
         content: this.translate.instant('TOUR_RECOMMENDATIONS.ITEMS_GRID_CONTENT'),
         title: this.translate.instant('TOUR_RECOMMENDATIONS.ITEMS_GRID_TITLE'),
-        placement: 'right',
+        placement: isSmallScreen ? 'bottom' : 'right',
         enableBackdrop: true
       });
     }
 
-    this.tourService.initialize(tourSteps);
+    // Initialize tour with global button title configuration
+    this.tourService.initialize(tourSteps, {
+      prevBtnTitle: this.translate.instant('TOUR.PREV_BTN'),
+      nextBtnTitle: this.translate.instant('TOUR.NEXT_BTN'),
+      endBtnTitle: this.translate.instant('TOUR.END_BTN')
+    });
   }
 
   startTour(): void {
diff --git a/src/ExpensesCalculator.UI/src/app/shared/sort-bar/sort-bar.component.css b/src/ExpensesCalculator.UI/src/app/shared/sort-bar/sort-bar.component.css
index b834f2a..e7bd5b3 100644
--- a/src/ExpensesCalculator.UI/src/app/shared/sort-bar/sort-bar.component.css
+++ b/src/ExpensesCalculator.UI/src/app/shared/sort-bar/sort-bar.component.css
@@ -46,11 +46,11 @@ hr {
 
 /* Component-specific responsive styles */
 @media (max-width: 576px) {
-  .dropdown-toggle {
+  .sort-dropdown .dropdown-toggle {
     width: 100% !important;
   }
 
-  .dropdown-menu {
+  .sort-dropdown .dropdown-menu {
     width: 100% !important;
   }
 
diff --git a/src/ExpensesCalculator.UI/src/app/shared/sort-bar/sort-bar.component.ts b/src/ExpensesCalculator.UI/src/app/shared/sort-bar/sort-bar.component.ts
index de76877..7034a93 100644
--- a/src/ExpensesCalculator.UI/src/app/shared/sort-bar/sort-bar.component.ts
+++ b/src/ExpensesCalculator.UI/src/app/shared/sort-bar/sort-bar.component.ts
@@ -26,6 +26,7 @@ export class SortBarComponent implements OnInit, OnChanges, OnDestroy, AfterView
   sortButtonWidth: string = 'auto';
   private sortButtonWidthCache: Map<string, string> = new Map();
   private langChangeSub!: Subscription;
+  private resizeListener: (() => void) | null = null;
 
   // Temporary sort state for modal
   tempSortColumn: string = '';
@@ -57,12 +58,21 @@ export class SortBarComponent implements OnInit, OnChanges, OnDestroy, AfterView
     this.langChangeSub = this.translate.onLangChange.subscribe(() => {
       setTimeout(() => this.syncSortButtonWidth(), 0);
     });
+
+    // Re-sync button width when window is resized
+    this.resizeListener = () => {
+      this.syncSortButtonWidth();
+    };
+    window.addEventListener('resize', this.resizeListener);
   }
 
   ngOnDestroy(): void {
     if (this.langChangeSub) {
       this.langChangeSub.unsubscribe();
     }
+    if (this.resizeListener) {
+      window.removeEventListener('resize', this.resizeListener);
+    }
   }
 
   get sortDisplayText(): string {
@@ -107,6 +117,12 @@ export class SortBarComponent implements OnInit, OnChanges, OnDestroy, AfterView
   }
 
   syncSortButtonWidth(): void {
+    // On small screens (< 576px), let CSS handle the width
+    if (window.innerWidth < 576) {
+      this.sortButtonWidth = 'auto';
+      return;
+    }
+
     // Find the longest translated text with arrow
     let longestText = '';
     let maxLength = 0;
diff --git a/src/ExpensesCalculator.UI/src/styles.css b/src/ExpensesCalculator.UI/src/styles.css
index bee3622..cbe0e2e 100644
--- a/src/ExpensesCalculator.UI/src/styles.css
+++ b/src/ExpensesCalculator.UI/src/styles.css
@@ -257,7 +257,7 @@ body { margin: 0; font-family: Roboto, "Helvetica Neue", sans-serif; }
   /* Global button sizing */
   .btn {
     font-size: 0.85rem !important;
-    padding: 0.3rem 0.6rem !important;
+    padding: 0.2rem 0.5rem !important;
   }
 
   .btn-sm {

From db91a174936870d05a80a4daaf5e54404c6b99f8 Mon Sep 17 00:00:00 2001
From: User <oleksandr.palamarchuk1310@gmail.com>
Date: Wed, 27 May 2026 19:20:15 +0300
Subject: [PATCH 07/12] Make home page responsive for small screens

---
 .../src/app/home/home/home.component.css      | 69 +++++++++++++++++++
 .../src/app/home/home/home.component.html     |  8 +--
 2 files changed, 73 insertions(+), 4 deletions(-)

diff --git a/src/ExpensesCalculator.UI/src/app/home/home/home.component.css b/src/ExpensesCalculator.UI/src/app/home/home/home.component.css
index ef421fd..8242e3c 100644
--- a/src/ExpensesCalculator.UI/src/app/home/home/home.component.css
+++ b/src/ExpensesCalculator.UI/src/app/home/home/home.component.css
@@ -619,3 +619,72 @@
     font-size: 1rem;
   }
 }
+
+@media (max-width: 576px) {
+  /* Reduce card padding for small screens */
+  .feature-card,
+  .step-card,
+  .use-case-card,
+  .problem-card,
+  .solution-card {
+    padding: 0.7rem !important;
+  }
+
+  .use-case-example {
+    padding: 0.7rem !important;
+  }
+
+  .tab-content {
+    padding: 0.7rem !important;
+  }
+
+  /* Increase secondary text size */
+  .hero-section .lead,
+  .steps-section .lead,
+  .tabs-section .lead,
+  .use-cases-section .lead,
+  .problem-solution-section .lead {
+    font-size: 1.15rem !important;
+  }
+
+  .feature-card p,
+  .step-card p,
+  .use-case-card p,
+  .problem-card p,
+  .solution-card p {
+    font-size: 1rem !important;
+  }
+
+  .use-case-example small,
+  .text-white-50 {
+    font-size: 0.95rem !important;
+  }
+
+  .feature-list li {
+    font-size: 1.05rem !important;
+  }
+
+  /* Make tab buttons same width */
+  .tab-btn {
+    width: 100% !important;
+    max-width: 100% !important;
+  }
+
+  /* Center problem/solution card content */
+  .problem-card,
+  .solution-card {
+    text-align: center !important;
+  }
+
+  .problem-icon,
+  .solution-icon {
+    margin-left: auto !important;
+    margin-right: auto !important;
+  }
+
+  /* Make btn-lg bigger on small screens */
+  .btn-lg {
+    padding: 0.85rem 2.2rem !important;
+    font-size: 1.15rem !important;
+  }
+}
diff --git a/src/ExpensesCalculator.UI/src/app/home/home/home.component.html b/src/ExpensesCalculator.UI/src/app/home/home/home.component.html
index 1c725fd..fd0a667 100644
--- a/src/ExpensesCalculator.UI/src/app/home/home/home.component.html
+++ b/src/ExpensesCalculator.UI/src/app/home/home/home.component.html
@@ -5,7 +5,7 @@
          OPTION 1: Hero + Feature Grid
          ======================================== -->
     <div class="hero-section text-white dark-blue-0 py-5">
-        <div class="container py-5">
+        <div class="container py-0 pt-md-3 pb-md-5">
             <div class="text-center mb-5">
                 <h1 class="display-3 fw-bold mb-4">{{ 'HOME_PAGE.HERO.TITLE' | translate }}</h1>
                 <p class="lead mb-4">{{ 'HOME_PAGE.HERO.SUBTITLE' | translate }}</p>
@@ -245,14 +245,14 @@ <h2 class="mb-4">{{ 'HOME_PAGE.TABS.RECOMMENDATIONS.TITLE' | translate }}</h2>
     <!-- ========================================
          OPTION 4: Use Case Scenarios
          ======================================== -->
-    <div class="use-cases-section text-white dark-blue-0 py-4">
+    <div class="use-cases-section text-white dark-blue-0 pb-0 py-md-4">
         <div class="container py-4">
             <div class="text-center mb-5">
                 <h1 class="display-4 fw-bold mb-3">{{ 'HOME_PAGE.USE_CASES.TITLE' | translate }}</h1>
                 <p class="lead text-white-50">{{ 'HOME_PAGE.USE_CASES.SUBTITLE' | translate }}</p>
             </div>
 
-            <div class="row g-4 mb-5">
+            <div class="row g-4 mb-0 mb-md-5">
                 <div class="col-lg-4 col-md-6">
                     <div class="use-case-card dark-blue-1 rounded p-4 h-100">
                         <div class="use-case-icon mb-3">
@@ -505,7 +505,7 @@ <h5 class="mb-3">{{ 'HOME_PAGE.PROBLEM_SOLUTION.SOLUTIONS.S6_TITLE' | translate
             </div>
 
             <!-- CTA -->
-            <div class="text-center mt-5 py-5">
+            <div class="text-center py-3 py-md-5">
                 <h3 class="mb-4">{{ 'HOME_PAGE.PROBLEM_SOLUTION.CTA_TITLE' | translate }}</h3>
                 <a routerLink="/day-expenses" class="btn btn-primary btn-lg px-5">
                     <i class="bi bi-rocket-takeoff me-2"></i>{{ 'HOME_PAGE.PROBLEM_SOLUTION.CTA_BUTTON' | translate }}

From 484cb22b310474c754a923ccf01f4f5e907881cf Mon Sep 17 00:00:00 2001
From: User <oleksandr.palamarchuk1310@gmail.com>
Date: Wed, 27 May 2026 21:36:43 +0300
Subject: [PATCH 08/12] Add responsive design for small screens

---
 .../check-list/check-list.component.html      |  5 +--
 .../checks/check-list/check-list.component.ts |  5 +++
 .../src/app/home/home/home.component.html     | 36 +++++++++----------
 .../items/item-list/item-list.component.html  |  6 ++--
 .../items/item-list/item-list.component.ts    | 35 ------------------
 5 files changed, 29 insertions(+), 58 deletions(-)

diff --git a/src/ExpensesCalculator.UI/src/app/checks/check-list/check-list.component.html b/src/ExpensesCalculator.UI/src/app/checks/check-list/check-list.component.html
index 853d270..abd239c 100644
--- a/src/ExpensesCalculator.UI/src/app/checks/check-list/check-list.component.html
+++ b/src/ExpensesCalculator.UI/src/app/checks/check-list/check-list.component.html
@@ -170,7 +170,7 @@ <h3>{{ 'CHECKS.NO_SEARCH_RESULTS' | translate }}</h3>
                         <td class="text-nowrap text-white">{{ check.totalSum | currency:'UAH':'₴' }}</td>
                         <td>
                             <div class="d-flex gap-2 justify-content-end pe-3">
-                                <button class="btn btn-sm btn-outline-warning text-white btn-action-edit" type="button"
+                                <button class="btn btn-sm btn-outline-primary text-white btn-action-edit" type="button"
                                     (click)="openModal('edit', check.id)"
                                     title="{{ 'CHECKS.EDIT' | translate }}">
                                     <i class="bi bi-pencil"></i>
@@ -225,6 +225,7 @@ <h2 class="accordion-header" [id]="'heading' + check.id">
                         [attr.data-bs-target]="'#accordionCollapse' + check.id"
                         aria-expanded="false"
                         [attr.aria-controls]="'accordionCollapse' + check.id"
+                        (click)="loadItemsForCheck(check.id)"
                         style="padding: 0.75rem 0.5rem;">
                     <div class="d-flex justify-content-between align-items-center w-100 me-2">
                         <div class="d-flex flex-column flex-grow-1">
@@ -256,7 +257,7 @@ <h2 class="accordion-header" [id]="'heading' + check.id">
 
                         <!-- Action Buttons -->
                         <div class="d-flex gap-2">
-                            <button class="btn btn-sm btn-outline-warning text-white flex-fill btn-action-edit"
+                            <button class="btn btn-sm btn-outline-primary text-white flex-fill btn-action-edit"
                                     (click)="openModal('edit', check.id)">
                                 <i class="bi bi-pencil me-1"></i>{{ 'CHECKS.EDIT' | translate }}
                             </button>
diff --git a/src/ExpensesCalculator.UI/src/app/checks/check-list/check-list.component.ts b/src/ExpensesCalculator.UI/src/app/checks/check-list/check-list.component.ts
index 797e2c7..ecfd4d5 100644
--- a/src/ExpensesCalculator.UI/src/app/checks/check-list/check-list.component.ts
+++ b/src/ExpensesCalculator.UI/src/app/checks/check-list/check-list.component.ts
@@ -269,6 +269,11 @@ export class CheckListComponent implements OnInit, OnChanges {
   }
 
   loadItemsForCheck(checkId: string): void {
+    // Skip if already loaded or currently loading
+    if (this.checkItemsMap.has(checkId) || this.checkLoadingMap.get(checkId)) {
+      return;
+    }
+
     // Set loading state
     this.checkLoadingMap.set(checkId, true);
 
diff --git a/src/ExpensesCalculator.UI/src/app/home/home/home.component.html b/src/ExpensesCalculator.UI/src/app/home/home/home.component.html
index fd0a667..f23ec3c 100644
--- a/src/ExpensesCalculator.UI/src/app/home/home/home.component.html
+++ b/src/ExpensesCalculator.UI/src/app/home/home/home.component.html
@@ -6,7 +6,7 @@
          ======================================== -->
     <div class="hero-section text-white dark-blue-0 py-5">
         <div class="container py-0 pt-md-3 pb-md-5">
-            <div class="text-center mb-5">
+            <div class="text-center mb-5 px-2">
                 <h1 class="display-3 fw-bold mb-4">{{ 'HOME_PAGE.HERO.TITLE' | translate }}</h1>
                 <p class="lead mb-4">{{ 'HOME_PAGE.HERO.SUBTITLE' | translate }}</p>
                 <a routerLink="/day-expenses" class="btn btn-primary btn-lg px-5">
@@ -65,8 +65,8 @@ <h1 class="display-4 fw-bold mb-3">{{ 'HOME_PAGE.STEPS.TITLE' | translate }}</h1
                 <p class="lead text-white-50">{{ 'HOME_PAGE.STEPS.SUBTITLE' | translate }}</p>
             </div>
 
-            <div class="row g-5">
-                <div class="col-lg-4">
+            <div class="row g-4">
+                <div class="col-lg-4 col-md-6">
                     <div class="step-card dark-blue-1 rounded p-4 text-center h-100">
                         <div class="step-number mb-4">1</div>
                         <div class="step-icon mb-3">
@@ -77,7 +77,7 @@ <h3 class="mb-3">{{ 'HOME_PAGE.STEPS.STEP1.TITLE' | translate }}</h3>
                     </div>
                 </div>
 
-                <div class="col-lg-4">
+                <div class="col-lg-4 col-md-6">
                     <div class="step-card dark-blue-1 rounded p-4 text-center h-100">
                         <div class="step-number mb-4">2</div>
                         <div class="step-icon mb-3">
@@ -88,7 +88,7 @@ <h3 class="mb-3">{{ 'HOME_PAGE.STEPS.STEP2.TITLE' | translate }}</h3>
                     </div>
                 </div>
 
-                <div class="col-lg-4">
+                <div class="col-lg-4 col-md-6">
                     <div class="step-card dark-blue-1 rounded p-4 text-center h-100">
                         <div class="step-number mb-4">3</div>
                         <div class="step-icon mb-3">
@@ -377,7 +377,7 @@ <h1 class="display-4 fw-bold mb-3">{{ 'HOME_PAGE.PROBLEM_SOLUTION.TITLE' | trans
                     </span>
                 </div>
                 <div class="row g-4">
-                    <div class="col-lg-4">
+                    <div class="col-lg-4 col-md-6">
                         <div class="problem-card dark-blue-1 rounded p-4 h-100">
                             <div class="problem-icon mb-3">
                                 <i class="bi bi-calculator"></i>
@@ -386,7 +386,7 @@ <h5 class="mb-3">{{ 'HOME_PAGE.PROBLEM_SOLUTION.PROBLEMS.P1_TITLE' | translate }
                             <p class="text-white-50 mb-0">{{ 'HOME_PAGE.PROBLEM_SOLUTION.PROBLEMS.P1_DESC' | translate }}</p>
                         </div>
                     </div>
-                    <div class="col-lg-4">
+                    <div class="col-lg-4 col-md-6">
                         <div class="problem-card dark-blue-1 rounded p-4 h-100">
                             <div class="problem-icon mb-3">
                                 <i class="bi bi-chat-left-dots"></i>
@@ -395,7 +395,7 @@ <h5 class="mb-3">{{ 'HOME_PAGE.PROBLEM_SOLUTION.PROBLEMS.P2_TITLE' | translate }
                             <p class="text-white-50 mb-0">{{ 'HOME_PAGE.PROBLEM_SOLUTION.PROBLEMS.P2_DESC' | translate }}</p>
                         </div>
                     </div>
-                    <div class="col-lg-4">
+                    <div class="col-lg-4 col-md-6">
                         <div class="problem-card dark-blue-1 rounded p-4 h-100">
                             <div class="problem-icon mb-3">
                                 <i class="bi bi-question-circle"></i>
@@ -404,7 +404,7 @@ <h5 class="mb-3">{{ 'HOME_PAGE.PROBLEM_SOLUTION.PROBLEMS.P3_TITLE' | translate }
                             <p class="text-white-50 mb-0">{{ 'HOME_PAGE.PROBLEM_SOLUTION.PROBLEMS.P3_DESC' | translate }}</p>
                         </div>
                     </div>
-                    <div class="col-lg-4">
+                    <div class="col-lg-4 col-md-6">
                         <div class="problem-card dark-blue-1 rounded p-4 h-100">
                             <div class="problem-icon mb-3">
                                 <i class="bi bi-hourglass-split"></i>
@@ -413,7 +413,7 @@ <h5 class="mb-3">{{ 'HOME_PAGE.PROBLEM_SOLUTION.PROBLEMS.P4_TITLE' | translate }
                             <p class="text-white-50 mb-0">{{ 'HOME_PAGE.PROBLEM_SOLUTION.PROBLEMS.P4_DESC' | translate }}</p>
                         </div>
                     </div>
-                    <div class="col-lg-4">
+                    <div class="col-lg-4 col-md-6">
                         <div class="problem-card dark-blue-1 rounded p-4 h-100">
                             <div class="problem-icon mb-3">
                                 <i class="bi bi-search"></i>
@@ -422,7 +422,7 @@ <h5 class="mb-3">{{ 'HOME_PAGE.PROBLEM_SOLUTION.PROBLEMS.P5_TITLE' | translate }
                             <p class="text-white-50 mb-0">{{ 'HOME_PAGE.PROBLEM_SOLUTION.PROBLEMS.P5_DESC' | translate }}</p>
                         </div>
                     </div>
-                    <div class="col-lg-4">
+                    <div class="col-lg-4 col-md-6">
                         <div class="problem-card dark-blue-1 rounded p-4 h-100">
                             <div class="problem-icon mb-3">
                                 <i class="bi bi-file-earmark-spreadsheet"></i>
@@ -447,7 +447,7 @@ <h5 class="mb-3">{{ 'HOME_PAGE.PROBLEM_SOLUTION.PROBLEMS.P6_TITLE' | translate }
                     </span>
                 </div>
                 <div class="row g-4">
-                    <div class="col-lg-4">
+                    <div class="col-lg-4 col-md-6">
                         <div class="solution-card dark-blue-1 rounded p-4 h-100">
                             <div class="solution-icon mb-3">
                                 <i class="bi bi-magic"></i>
@@ -456,7 +456,7 @@ <h5 class="mb-3">{{ 'HOME_PAGE.PROBLEM_SOLUTION.SOLUTIONS.S1_TITLE' | translate
                             <p class="text-white-50 mb-0">{{ 'HOME_PAGE.PROBLEM_SOLUTION.SOLUTIONS.S1_DESC' | translate }}</p>
                         </div>
                     </div>
-                    <div class="col-lg-4">
+                    <div class="col-lg-4 col-md-6">
                         <div class="solution-card dark-blue-1 rounded p-4 h-100">
                             <div class="solution-icon mb-3">
                                 <i class="bi bi-archive"></i>
@@ -465,7 +465,7 @@ <h5 class="mb-3">{{ 'HOME_PAGE.PROBLEM_SOLUTION.SOLUTIONS.S2_TITLE' | translate
                             <p class="text-white-50 mb-0">{{ 'HOME_PAGE.PROBLEM_SOLUTION.SOLUTIONS.S2_DESC' | translate }}</p>
                         </div>
                     </div>
-                    <div class="col-lg-4">
+                    <div class="col-lg-4 col-md-6">
                         <div class="solution-card dark-blue-1 rounded p-4 h-100">
                             <div class="solution-icon mb-3">
                                 <i class="bi bi-pie-chart"></i>
@@ -474,7 +474,7 @@ <h5 class="mb-3">{{ 'HOME_PAGE.PROBLEM_SOLUTION.SOLUTIONS.S3_TITLE' | translate
                             <p class="text-white-50 mb-0">{{ 'HOME_PAGE.PROBLEM_SOLUTION.SOLUTIONS.S3_DESC' | translate }}</p>
                         </div>
                     </div>
-                    <div class="col-lg-4">
+                    <div class="col-lg-4 col-md-6">
                         <div class="solution-card dark-blue-1 rounded p-4 h-100">
                             <div class="solution-icon mb-3">
                                 <i class="bi bi-cash-coin"></i>
@@ -483,7 +483,7 @@ <h5 class="mb-3">{{ 'HOME_PAGE.PROBLEM_SOLUTION.SOLUTIONS.S4_TITLE' | translate
                             <p class="text-white-50 mb-0">{{ 'HOME_PAGE.PROBLEM_SOLUTION.SOLUTIONS.S4_DESC' | translate }}</p>
                         </div>
                     </div>
-                    <div class="col-lg-4">
+                    <div class="col-lg-4 col-md-6">
                         <div class="solution-card dark-blue-1 rounded p-4 h-100">
                             <div class="solution-icon mb-3">
                                 <i class="bi bi-search"></i>
@@ -492,7 +492,7 @@ <h5 class="mb-3">{{ 'HOME_PAGE.PROBLEM_SOLUTION.SOLUTIONS.S5_TITLE' | translate
                             <p class="text-white-50 mb-0">{{ 'HOME_PAGE.PROBLEM_SOLUTION.SOLUTIONS.S5_DESC' | translate }}</p>
                         </div>
                     </div>
-                    <div class="col-lg-4">
+                    <div class="col-lg-4 col-md-6">
                         <div class="solution-card dark-blue-1 rounded p-4 h-100">
                             <div class="solution-icon mb-3">
                                 <i class="bi bi-bar-chart"></i>
@@ -505,7 +505,7 @@ <h5 class="mb-3">{{ 'HOME_PAGE.PROBLEM_SOLUTION.SOLUTIONS.S6_TITLE' | translate
             </div>
 
             <!-- CTA -->
-            <div class="text-center py-3 py-md-5">
+            <div class="text-center py-3 py-md-5 px-3">
                 <h3 class="mb-4">{{ 'HOME_PAGE.PROBLEM_SOLUTION.CTA_TITLE' | translate }}</h3>
                 <a routerLink="/day-expenses" class="btn btn-primary btn-lg px-5">
                     <i class="bi bi-rocket-takeoff me-2"></i>{{ 'HOME_PAGE.PROBLEM_SOLUTION.CTA_BUTTON' | translate }}
diff --git a/src/ExpensesCalculator.UI/src/app/items/item-list/item-list.component.html b/src/ExpensesCalculator.UI/src/app/items/item-list/item-list.component.html
index d69cccd..8cf5f43 100644
--- a/src/ExpensesCalculator.UI/src/app/items/item-list/item-list.component.html
+++ b/src/ExpensesCalculator.UI/src/app/items/item-list/item-list.component.html
@@ -10,10 +10,10 @@
             </div>
 
             <!-- Add Button and Filter/Sort Controls for larger screens -->
-            <div *ngIf="itemsList.length > 0" class="d-none d-lg-flex justify-content-end pb-2 px-2 my-3">
+            <div *ngIf="itemsList.length > 0" class="d-none d-lg-flex justify-content-end pb-2 my-3">
                 <div class="col-12">
                     <div class="d-flex flex-row gap-2 align-items-center justify-content-between">
-                        <div class="d-flex flex-column ms-2">
+                        <div class="d-flex flex-column">
                             <small class="text-white-50 mb-1" style="font-size: 0.7rem;">
                                 <i class="bi bi-table me-1"></i>{{ 'ITEMS.DATA' | translate }}
                             </small>
@@ -143,7 +143,7 @@ <h3>{{ 'ITEMS.NO_SEARCH_RESULTS' | translate }}</h3>
                                         {{ item.name || '-' }}
                                     </h5>
                                     <div class="d-flex gap-1" (click)="$event.stopPropagation()">
-                                        <button class="btn btn-outline-warning text-white btn-action-edit" type="button"
+                                        <button class="btn btn-outline-primary text-white btn-action-edit" type="button"
                                             (click)="openModal('edit', item.id)"
                                             style="padding: 0; font-size: 0.85rem; width: 1.5rem; height: 1.5rem; line-height: 1; display: flex; align-items: center; justify-content: center;">
                                             <i class="bi bi-pencil"></i>
diff --git a/src/ExpensesCalculator.UI/src/app/items/item-list/item-list.component.ts b/src/ExpensesCalculator.UI/src/app/items/item-list/item-list.component.ts
index 54ccc85..ea3cd56 100644
--- a/src/ExpensesCalculator.UI/src/app/items/item-list/item-list.component.ts
+++ b/src/ExpensesCalculator.UI/src/app/items/item-list/item-list.component.ts
@@ -155,14 +155,6 @@ export class ItemListComponent implements OnInit, OnChanges, OnDestroy, AfterVie
         }, 100);
       }
     });
-
-    // Move modal to body to avoid z-index/overflow issues in accordion layouts
-    setTimeout(() => {
-      const modalElement = document.getElementById('itemsModal-' + this.checkId);
-      if (modalElement && modalElement.parentElement !== document.body) {
-        document.body.appendChild(modalElement);
-      }
-    }, 0);
   }
 
 
@@ -184,25 +176,6 @@ export class ItemListComponent implements OnInit, OnChanges, OnDestroy, AfterVie
     if (this.filterTextSubscription) {
       this.filterTextSubscription.unsubscribe();
     }
-
-    // Clean up modal if it was moved to body
-    const modalElement = document.getElementById('itemsModal-' + this.checkId);
-    if (modalElement) {
-      // Try to get the modal instance if we lost our reference
-      if (!this.modalInstance) {
-        this.modalInstance = bootstrap.Modal.getInstance(modalElement);
-      }
-
-      if (this.modalInstance) {
-        this.modalInstance.dispose();
-        this.modalInstance = null;
-      }
-
-      // Remove from body if it was moved there
-      if (modalElement.parentElement === document.body) {
-        document.body.removeChild(modalElement);
-      }
-    }
   }
 
   initializeTooltips(): void {
@@ -476,14 +449,6 @@ export class ItemListComponent implements OnInit, OnChanges, OnDestroy, AfterVie
   }
 
   hideModal(): void {
-    // Try to get the modal instance if we lost our reference
-    if (!this.modalInstance) {
-      const modalElement = document.getElementById('itemsModal-' + this.checkId);
-      if (modalElement) {
-        this.modalInstance = bootstrap.Modal.getInstance(modalElement);
-      }
-    }
-
     if (this.modalInstance) {
       this.modalInstance.hide();
       this.formErrors = {};

From ba6f9492187253c1cc5cceaff6aa95cf5162a46d Mon Sep 17 00:00:00 2001
From: User <oleksandr.palamarchuk1310@gmail.com>
Date: Wed, 27 May 2026 19:20:15 +0300
Subject: [PATCH 09/12] Make home page responsive for small screens

---
 .../check-list/check-list.component.html      | 50 +++++---------
 .../src/app/home/home/home.component.css      | 69 +++++++++++++++++++
 .../src/app/home/home/home.component.html     |  8 +--
 3 files changed, 91 insertions(+), 36 deletions(-)

diff --git a/src/ExpensesCalculator.UI/src/app/checks/check-list/check-list.component.html b/src/ExpensesCalculator.UI/src/app/checks/check-list/check-list.component.html
index 853d270..dc71a3b 100644
--- a/src/ExpensesCalculator.UI/src/app/checks/check-list/check-list.component.html
+++ b/src/ExpensesCalculator.UI/src/app/checks/check-list/check-list.component.html
@@ -170,7 +170,7 @@ <h3>{{ 'CHECKS.NO_SEARCH_RESULTS' | translate }}</h3>
                         <td class="text-nowrap text-white">{{ check.totalSum | currency:'UAH':'₴' }}</td>
                         <td>
                             <div class="d-flex gap-2 justify-content-end pe-3">
-                                <button class="btn btn-sm btn-outline-warning text-white btn-action-edit" type="button"
+                                <button class="btn btn-sm btn-outline-primary text-white btn-action-edit" type="button"
                                     (click)="openModal('edit', check.id)"
                                     title="{{ 'CHECKS.EDIT' | translate }}">
                                     <i class="bi bi-pencil"></i>
@@ -225,6 +225,7 @@ <h2 class="accordion-header" [id]="'heading' + check.id">
                         [attr.data-bs-target]="'#accordionCollapse' + check.id"
                         aria-expanded="false"
                         [attr.aria-controls]="'accordionCollapse' + check.id"
+                        (click)="toggleCheckExpansion(check.id)"
                         style="padding: 0.75rem 0.5rem;">
                     <div class="d-flex justify-content-between align-items-center w-100 me-2">
                         <div class="d-flex flex-column flex-grow-1">
@@ -256,7 +257,7 @@ <h2 class="accordion-header" [id]="'heading' + check.id">
 
                         <!-- Action Buttons -->
                         <div class="d-flex gap-2">
-                            <button class="btn btn-sm btn-outline-warning text-white flex-fill btn-action-edit"
+                            <button class="btn btn-sm btn-outline-primary text-white flex-fill btn-action-edit"
                                     (click)="openModal('edit', check.id)">
                                 <i class="bi bi-pencil me-1"></i>{{ 'CHECKS.EDIT' | translate }}
                             </button>
@@ -266,35 +267,20 @@ <h2 class="accordion-header" [id]="'heading' + check.id">
                             </button>
                         </div>
 
-                        <!-- Expand/Collapse Check Items -->
-                        <div class="d-flex justify-content-center mt-2">
-                            <button class="btn btn-sm btn-outline-primary text-white w-100" type="button"
-                                    data-bs-toggle="collapse"
-                                    [attr.data-bs-target]="'#collapseItems' + check.id"
-                                    [attr.aria-expanded]="isCheckExpanded(check.id)"
-                                    [attr.aria-controls]="'collapseItems' + check.id"
-                                    (click)="toggleCheckExpansion(check.id)">
-                                <i [class]="isCheckExpanded(check.id) ? 'bi bi-dash-square-fill me-1' : 'bi bi-plus-square-fill me-1'"></i>
-                                {{ isCheckExpanded(check.id) ? ('Hide Items' | translate) : ('Show Items' | translate) }}
-                            </button>
-                        </div>
-
-                        <!-- Items List -->
-                        <div class="collapse" [id]="'collapseItems' + check.id">
-                            <div class="mt-2">
-                                <app-item-list
-                                    [checkId]="check.id"
-                                    [dayExpensesId]="dayExpensesId"
-                                    [users]="participants"
-                                    [items]="getItemsForCheck(check.id)"
-                                    [isLoading]="isCheckItemsLoading(check.id)"
-                                    [highlightedItemId]="highlightedItemId"
-                                    [disableTooltipManagement]="true"
-                                    [isFirstCheck]="false"
-                                    (itemsChanged)="loadItemsForCheck($event)"
-                                    (checkSumUpdated)="onCheckSumUpdated($event)">
-                                </app-item-list>
-                            </div>
+                        <!-- Items List (always visible) -->
+                        <div class="mt-2">
+                            <app-item-list
+                                [checkId]="check.id"
+                                [dayExpensesId]="dayExpensesId"
+                                [users]="participants"
+                                [items]="getItemsForCheck(check.id)"
+                                [isLoading]="isCheckItemsLoading(check.id)"
+                                [highlightedItemId]="highlightedItemId"
+                                [disableTooltipManagement]="true"
+                                [isFirstCheck]="false"
+                                (itemsChanged)="loadItemsForCheck($event)"
+                                (checkSumUpdated)="onCheckSumUpdated($event)">
+                            </app-item-list>
                         </div>
                     </div>
                 </div>
@@ -411,7 +397,7 @@ <h5 class="modal-title">{{ modalTitle }}</h5>
                 <label class="control-label">{{ 'CHECKS.MODAL.SUM_LABEL' | translate }}</label>
                 <input [value]="currentCheckTotalSum | currency:'UAH':'₴'" class="form-control" disabled readonly />
             </div>
-            <button type="button" class="btn btn-warning" (click)="editCheck()">
+            <button type="button" class="btn btn-primary" (click)="editCheck()">
                 <i class="bi bi-pencil me-1"></i>{{ 'CHECKS.MODAL.EDIT_BUTTON' | translate }}
             </button>
         </form>
diff --git a/src/ExpensesCalculator.UI/src/app/home/home/home.component.css b/src/ExpensesCalculator.UI/src/app/home/home/home.component.css
index ef421fd..8242e3c 100644
--- a/src/ExpensesCalculator.UI/src/app/home/home/home.component.css
+++ b/src/ExpensesCalculator.UI/src/app/home/home/home.component.css
@@ -619,3 +619,72 @@
     font-size: 1rem;
   }
 }
+
+@media (max-width: 576px) {
+  /* Reduce card padding for small screens */
+  .feature-card,
+  .step-card,
+  .use-case-card,
+  .problem-card,
+  .solution-card {
+    padding: 0.7rem !important;
+  }
+
+  .use-case-example {
+    padding: 0.7rem !important;
+  }
+
+  .tab-content {
+    padding: 0.7rem !important;
+  }
+
+  /* Increase secondary text size */
+  .hero-section .lead,
+  .steps-section .lead,
+  .tabs-section .lead,
+  .use-cases-section .lead,
+  .problem-solution-section .lead {
+    font-size: 1.15rem !important;
+  }
+
+  .feature-card p,
+  .step-card p,
+  .use-case-card p,
+  .problem-card p,
+  .solution-card p {
+    font-size: 1rem !important;
+  }
+
+  .use-case-example small,
+  .text-white-50 {
+    font-size: 0.95rem !important;
+  }
+
+  .feature-list li {
+    font-size: 1.05rem !important;
+  }
+
+  /* Make tab buttons same width */
+  .tab-btn {
+    width: 100% !important;
+    max-width: 100% !important;
+  }
+
+  /* Center problem/solution card content */
+  .problem-card,
+  .solution-card {
+    text-align: center !important;
+  }
+
+  .problem-icon,
+  .solution-icon {
+    margin-left: auto !important;
+    margin-right: auto !important;
+  }
+
+  /* Make btn-lg bigger on small screens */
+  .btn-lg {
+    padding: 0.85rem 2.2rem !important;
+    font-size: 1.15rem !important;
+  }
+}
diff --git a/src/ExpensesCalculator.UI/src/app/home/home/home.component.html b/src/ExpensesCalculator.UI/src/app/home/home/home.component.html
index 1c725fd..fd0a667 100644
--- a/src/ExpensesCalculator.UI/src/app/home/home/home.component.html
+++ b/src/ExpensesCalculator.UI/src/app/home/home/home.component.html
@@ -5,7 +5,7 @@
          OPTION 1: Hero + Feature Grid
          ======================================== -->
     <div class="hero-section text-white dark-blue-0 py-5">
-        <div class="container py-5">
+        <div class="container py-0 pt-md-3 pb-md-5">
             <div class="text-center mb-5">
                 <h1 class="display-3 fw-bold mb-4">{{ 'HOME_PAGE.HERO.TITLE' | translate }}</h1>
                 <p class="lead mb-4">{{ 'HOME_PAGE.HERO.SUBTITLE' | translate }}</p>
@@ -245,14 +245,14 @@ <h2 class="mb-4">{{ 'HOME_PAGE.TABS.RECOMMENDATIONS.TITLE' | translate }}</h2>
     <!-- ========================================
          OPTION 4: Use Case Scenarios
          ======================================== -->
-    <div class="use-cases-section text-white dark-blue-0 py-4">
+    <div class="use-cases-section text-white dark-blue-0 pb-0 py-md-4">
         <div class="container py-4">
             <div class="text-center mb-5">
                 <h1 class="display-4 fw-bold mb-3">{{ 'HOME_PAGE.USE_CASES.TITLE' | translate }}</h1>
                 <p class="lead text-white-50">{{ 'HOME_PAGE.USE_CASES.SUBTITLE' | translate }}</p>
             </div>
 
-            <div class="row g-4 mb-5">
+            <div class="row g-4 mb-0 mb-md-5">
                 <div class="col-lg-4 col-md-6">
                     <div class="use-case-card dark-blue-1 rounded p-4 h-100">
                         <div class="use-case-icon mb-3">
@@ -505,7 +505,7 @@ <h5 class="mb-3">{{ 'HOME_PAGE.PROBLEM_SOLUTION.SOLUTIONS.S6_TITLE' | translate
             </div>
 
             <!-- CTA -->
-            <div class="text-center mt-5 py-5">
+            <div class="text-center py-3 py-md-5">
                 <h3 class="mb-4">{{ 'HOME_PAGE.PROBLEM_SOLUTION.CTA_TITLE' | translate }}</h3>
                 <a routerLink="/day-expenses" class="btn btn-primary btn-lg px-5">
                     <i class="bi bi-rocket-takeoff me-2"></i>{{ 'HOME_PAGE.PROBLEM_SOLUTION.CTA_BUTTON' | translate }}

From e01caac65bea09df9d696a18f201b781e9d00914 Mon Sep 17 00:00:00 2001
From: User <oleksandr.palamarchuk1310@gmail.com>
Date: Fri, 5 Jun 2026 19:48:03 +0300
Subject: [PATCH 10/12] Move modal window to a global external component

---
 src/ExpensesCalculator.UI/public/i18n/en.json |   6 +-
 .../src/app/app.component.html                |   3 +-
 .../src/app/app.component.ts                  |   3 +-
 .../check-list/check-list.component.html      | 130 +-----
 .../checks/check-list/check-list.component.ts | 263 +++---------
 .../day-expenses-details.component.html       | 108 +----
 .../day-expenses-details.component.ts         | 286 +++----------
 .../day-expenses-list.component.html          | 144 +------
 .../day-expenses-list.component.ts            | 336 ++++-----------
 .../items/item-list/item-list.component.html  | 382 +-----------------
 .../items/item-list/item-list.component.ts    | 359 +++++-----------
 .../check-form/check-add-form.component.html  |  43 ++
 .../check-form/check-add-form.component.ts    |  95 +++++
 .../check-delete-form.component.html          |  20 +
 .../check-form/check-delete-form.component.ts |  72 ++++
 .../check-form/check-edit-form.component.html |  43 ++
 .../check-form/check-edit-form.component.ts   |  95 +++++
 .../day-expenses-add-form.component.html      |  29 ++
 .../day-expenses-add-form.component.ts        | 122 ++++++
 .../day-expenses-delete-form.component.html   |  25 ++
 .../day-expenses-delete-form.component.ts     |  94 +++++
 .../day-expenses-edit-form.component.html     |  34 ++
 .../day-expenses-edit-form.component.ts       | 124 ++++++
 .../day-expenses-share-form.component.html    |  31 ++
 .../day-expenses-share-form.component.ts      | 123 ++++++
 .../item-add-form.component.html              | 141 +++++++
 .../item-add-form/item-add-form.component.ts  | 175 ++++++++
 .../item-delete-form.component.html           |  73 ++++
 .../item-delete-form.component.ts             |  79 ++++
 .../item-edit-form.component.html             | 141 +++++++
 .../item-edit-form.component.ts               | 167 ++++++++
 .../recommendation-add-form.component.html    |  87 ++++
 .../recommendation-add-form.component.ts      | 126 ++++++
 .../recommendation-delete-form.component.html |  58 +++
 .../recommendation-delete-form.component.ts   |  64 +++
 .../recommendation-edit-form.component.html   |  88 ++++
 .../recommendation-edit-form.component.ts     | 129 ++++++
 .../recommendations.component.html            | 298 ++------------
 .../recommendations.component.ts              | 291 +++----------
 .../app/services/form-validation.service.ts   |   4 +-
 .../src/app/services/modal.service.ts         |  96 +++++
 .../modal-window/modal-window.component.html  |  17 +-
 .../modal-window/modal-window.component.ts    |  94 ++++-
 43 files changed, 2873 insertions(+), 2225 deletions(-)
 create mode 100644 src/ExpensesCalculator.UI/src/app/modals/check-form/check-add-form.component.html
 create mode 100644 src/ExpensesCalculator.UI/src/app/modals/check-form/check-add-form.component.ts
 create mode 100644 src/ExpensesCalculator.UI/src/app/modals/check-form/check-delete-form.component.html
 create mode 100644 src/ExpensesCalculator.UI/src/app/modals/check-form/check-delete-form.component.ts
 create mode 100644 src/ExpensesCalculator.UI/src/app/modals/check-form/check-edit-form.component.html
 create mode 100644 src/ExpensesCalculator.UI/src/app/modals/check-form/check-edit-form.component.ts
 create mode 100644 src/ExpensesCalculator.UI/src/app/modals/day-expenses-form/day-expenses-add-form.component.html
 create mode 100644 src/ExpensesCalculator.UI/src/app/modals/day-expenses-form/day-expenses-add-form.component.ts
 create mode 100644 src/ExpensesCalculator.UI/src/app/modals/day-expenses-form/day-expenses-delete-form.component.html
 create mode 100644 src/ExpensesCalculator.UI/src/app/modals/day-expenses-form/day-expenses-delete-form.component.ts
 create mode 100644 src/ExpensesCalculator.UI/src/app/modals/day-expenses-form/day-expenses-edit-form.component.html
 create mode 100644 src/ExpensesCalculator.UI/src/app/modals/day-expenses-form/day-expenses-edit-form.component.ts
 create mode 100644 src/ExpensesCalculator.UI/src/app/modals/day-expenses-form/day-expenses-share-form.component.html
 create mode 100644 src/ExpensesCalculator.UI/src/app/modals/day-expenses-form/day-expenses-share-form.component.ts
 create mode 100644 src/ExpensesCalculator.UI/src/app/modals/item-form/item-add-form/item-add-form.component.html
 create mode 100644 src/ExpensesCalculator.UI/src/app/modals/item-form/item-add-form/item-add-form.component.ts
 create mode 100644 src/ExpensesCalculator.UI/src/app/modals/item-form/item-delete-form/item-delete-form.component.html
 create mode 100644 src/ExpensesCalculator.UI/src/app/modals/item-form/item-delete-form/item-delete-form.component.ts
 create mode 100644 src/ExpensesCalculator.UI/src/app/modals/item-form/item-edit-form/item-edit-form.component.html
 create mode 100644 src/ExpensesCalculator.UI/src/app/modals/item-form/item-edit-form/item-edit-form.component.ts
 create mode 100644 src/ExpensesCalculator.UI/src/app/modals/recommendation-form/recommendation-add-form.component.html
 create mode 100644 src/ExpensesCalculator.UI/src/app/modals/recommendation-form/recommendation-add-form.component.ts
 create mode 100644 src/ExpensesCalculator.UI/src/app/modals/recommendation-form/recommendation-delete-form.component.html
 create mode 100644 src/ExpensesCalculator.UI/src/app/modals/recommendation-form/recommendation-delete-form.component.ts
 create mode 100644 src/ExpensesCalculator.UI/src/app/modals/recommendation-form/recommendation-edit-form.component.html
 create mode 100644 src/ExpensesCalculator.UI/src/app/modals/recommendation-form/recommendation-edit-form.component.ts
 create mode 100644 src/ExpensesCalculator.UI/src/app/services/modal.service.ts

diff --git a/src/ExpensesCalculator.UI/public/i18n/en.json b/src/ExpensesCalculator.UI/public/i18n/en.json
index 9af1d44..9dd25d6 100644
--- a/src/ExpensesCalculator.UI/public/i18n/en.json
+++ b/src/ExpensesCalculator.UI/public/i18n/en.json
@@ -154,9 +154,9 @@
       "PAYER_LABEL": "Payer",
       "SELECT_PAYER": "Select Payer",
       "SUM_LABEL": "Total Sum",
-      "ADD_BUTTON": "Add Check",
-      "EDIT_BUTTON": "Edit Check",
-      "DELETE_BUTTON": "Delete Check"
+      "ADD_BUTTON": "Add",
+      "EDIT_BUTTON": "Edit",
+      "DELETE_BUTTON": "Delete"
     },
     "TOAST": {
       "SUCCESS": "Success!",
diff --git a/src/ExpensesCalculator.UI/src/app/app.component.html b/src/ExpensesCalculator.UI/src/app/app.component.html
index 927aedb..43ea2cd 100644
--- a/src/ExpensesCalculator.UI/src/app/app.component.html
+++ b/src/ExpensesCalculator.UI/src/app/app.component.html
@@ -20,4 +20,5 @@
     </div>
 </div>
 
-<app-toast></app-toast>
\ No newline at end of file
+<app-toast></app-toast>
+<app-modal-window></app-modal-window>
\ No newline at end of file
diff --git a/src/ExpensesCalculator.UI/src/app/app.component.ts b/src/ExpensesCalculator.UI/src/app/app.component.ts
index 07a0e70..ca916e3 100644
--- a/src/ExpensesCalculator.UI/src/app/app.component.ts
+++ b/src/ExpensesCalculator.UI/src/app/app.component.ts
@@ -3,6 +3,7 @@ import { isPlatformBrowser } from '@angular/common';
 import { VerticalNavbarComponent } from "./shared/vertical-navbar/vertical-navbar.component";
 import { HorizontalNavbarComponent } from './shared/horizontal-navbar/horizontal-navbar.component';
 import { ToastComponent } from './shared/toast/toast.component';
+import { ModalWindowComponent } from './shared/modal-window/modal-window.component';
 import { RouterOutlet } from "@angular/router";
 import { TranslatePipe, TranslateService } from '@ngx-translate/core';
 
@@ -11,7 +12,7 @@ import { TranslatePipe, TranslateService } from '@ngx-translate/core';
   standalone: true,
   templateUrl: './app.component.html',
   styleUrl: './app.component.css',
-  imports: [VerticalNavbarComponent, HorizontalNavbarComponent, ToastComponent, RouterOutlet, TranslatePipe]
+  imports: [VerticalNavbarComponent, HorizontalNavbarComponent, ToastComponent, ModalWindowComponent, RouterOutlet, TranslatePipe]
 })
 export class AppComponent {
   title = 'Expenses Calculator';
diff --git a/src/ExpensesCalculator.UI/src/app/checks/check-list/check-list.component.html b/src/ExpensesCalculator.UI/src/app/checks/check-list/check-list.component.html
index dc71a3b..d45c5cc 100644
--- a/src/ExpensesCalculator.UI/src/app/checks/check-list/check-list.component.html
+++ b/src/ExpensesCalculator.UI/src/app/checks/check-list/check-list.component.html
@@ -297,132 +297,4 @@ <h2 class="accordion-header" [id]="'heading' + check.id">
     </div>
 
     <hr class="w-100 my-0" style="border-color: #080f27; opacity: 1;" />
-</div>
-
-<!-- Modal -->
-<app-modal-window [modalId]="'checksModal'" [modalTitle]="modalTitle" [currentModalContent]="currentModalContent">
-    <div class="modal-header py-2 bg-dark text-white border-secondary">
-        <h5 class="modal-title">{{ modalTitle }}</h5>
-        <button type="button" class="btn-close btn-close-white" (click)="hideModal()" aria-label="Close"></button>
-    </div>
-    <div class="modal-body bg-dark text-white">
-
-        <!-- Add Check Form -->
-        <form *ngIf="currentModalContent === 'add'">
-            <div class="form-group mb-3">
-                <div class="d-flex justify-content-between align-items-center">
-                    <label class="control-label mb-0">
-                        <i class="bi bi-cart me-1"></i>{{ 'CHECKS.MODAL.LOCATION_LABEL' | translate }}<span
-                            class="text-danger">*</span>
-                    </label>
-                    <small class="text-white" style="font-size: 0.75rem;">{{ location.length }}/25</small>
-                </div>
-                <input [(ngModel)]="location" name="location" class="form-control"
-                    [class.is-invalid]="formErrors['location']"
-                    [class.is-valid]="formValidated && !formErrors['location'] && location.trim()"
-                    maxlength="25" required />
-                <div class="invalid-feedback" *ngIf="formErrors['location']">{{ formErrors['location'] }}</div>
-            </div>
-            <div class="form-group mb-3">
-                <i class="bi bi-wallet2 mx-1"></i>
-                <label class="control-label">{{ 'CHECKS.MODAL.PAYER_LABEL' | translate }}<span
-                        class="text-danger">*</span></label>
-                <div class="dropdown w-100">
-                    <button class="btn form-control text-start d-flex justify-content-between align-items-center"
-                            [class.is-invalid]="formErrors['payer']"
-                            [class.is-valid]="formValidated && !formErrors['payer'] && payer"
-                            type="button"
-                            data-bs-toggle="dropdown"
-                            aria-expanded="false">
-                        <span>{{ payer || ('CHECKS.MODAL.SELECT_PAYER' | translate) }}</span>
-                        <i class="bi bi-chevron-down"></i>
-                    </button>
-                    <ul class="dropdown-menu w-100">
-                        <li *ngFor="let participant of participants">
-                            <a class="dropdown-item" href="javascript:void(0)" (click)="payer = participant">
-                                {{ participant }}
-                            </a>
-                        </li>
-                    </ul>
-                </div>
-                <div class="invalid-feedback d-block" *ngIf="formErrors['payer']">{{ formErrors['payer'] }}</div>
-            </div>
-            <button type="button" class="btn btn-success" (click)="createCheck()">
-                <i class="bi bi-plus-circle me-1"></i>{{ 'CHECKS.MODAL.ADD_BUTTON' | translate }}
-            </button>
-        </form>
-
-        <!-- Edit Check Form -->
-        <form *ngIf="currentModalContent === 'edit'">
-            <div class="form-group mb-3">
-                <div class="d-flex justify-content-between align-items-center">
-                    <label class="control-label mb-0">
-                        <i class="bi bi-cart me-1"></i>{{ 'CHECKS.MODAL.LOCATION_LABEL' | translate }}<span
-                            class="text-danger">*</span>
-                    </label>
-                    <small class="text-white" style="font-size: 0.75rem;">{{ location.length }}/25</small>
-                </div>
-                <input [(ngModel)]="location" name="location" class="form-control"
-                    [class.is-invalid]="formErrors['location']"
-                    [class.is-valid]="formValidated && !formErrors['location'] && location.trim()"
-                    maxlength="25" required />
-                <div class="invalid-feedback" *ngIf="formErrors['location']">{{ formErrors['location'] }}</div>
-            </div>
-            <div class="form-group mb-3">
-                <i class="bi bi-wallet2 mx-1"></i>
-                <label class="control-label">{{ 'CHECKS.MODAL.PAYER_LABEL' | translate }}<span
-                        class="text-danger">*</span></label>
-                <div class="dropdown w-100">
-                    <button class="btn form-control text-start d-flex justify-content-between align-items-center"
-                            [class.is-invalid]="formErrors['payer']"
-                            [class.is-valid]="formValidated && !formErrors['payer'] && payer"
-                            type="button"
-                            data-bs-toggle="dropdown"
-                            aria-expanded="false">
-                        <span>{{ payer || ('CHECKS.MODAL.SELECT_PAYER' | translate) }}</span>
-                        <i class="bi bi-chevron-down"></i>
-                    </button>
-                    <ul class="dropdown-menu w-100">
-                        <li *ngFor="let participant of participants">
-                            <a class="dropdown-item" href="javascript:void(0)" (click)="payer = participant">
-                                {{ participant }}
-                            </a>
-                        </li>
-                    </ul>
-                </div>
-                <div class="invalid-feedback d-block" *ngIf="formErrors['payer']">{{ formErrors['payer'] }}</div>
-            </div>
-            <div class="form-group mb-3">
-                <i class="bi bi-cash-stack mx-1"></i>
-                <label class="control-label">{{ 'CHECKS.MODAL.SUM_LABEL' | translate }}</label>
-                <input [value]="currentCheckTotalSum | currency:'UAH':'₴'" class="form-control" disabled readonly />
-            </div>
-            <button type="button" class="btn btn-primary" (click)="editCheck()">
-                <i class="bi bi-pencil me-1"></i>{{ 'CHECKS.MODAL.EDIT_BUTTON' | translate }}
-            </button>
-        </form>
-
-        <!-- Delete Check Form -->
-        <form *ngIf="currentModalContent === 'delete'">
-            <div class="form-group mb-3">
-                <i class="bi bi-cart mx-1"></i>
-                <label class="control-label">{{ 'CHECKS.MODAL.LOCATION_LABEL' | translate }}</label>
-                <input [(ngModel)]="location" name="location" class="form-control" disabled readonly />
-            </div>
-            <div class="form-group mb-3">
-                <i class="bi bi-wallet2 mx-1"></i>
-                <label class="control-label">{{ 'CHECKS.MODAL.PAYER_LABEL' | translate }}</label>
-                <input [(ngModel)]="payer" name="payer" class="form-control" disabled readonly />
-            </div>
-            <div class="form-group mb-3">
-                <i class="bi bi-cash-stack mx-1"></i>
-                <label class="control-label">{{ 'CHECKS.MODAL.SUM_LABEL' | translate }}</label>
-                <input [value]="currentCheckTotalSum | currency:'UAH':'₴'" class="form-control" disabled readonly />
-            </div>
-            <button type="button" class="btn btn-danger" (click)="deleteCheck()">
-                <i class="bi bi-trash me-1"></i>{{ 'CHECKS.MODAL.DELETE_BUTTON' | translate }}
-            </button>
-        </form>
-
-    </div>
-</app-modal-window>
\ No newline at end of file
+</div>
\ No newline at end of file
diff --git a/src/ExpensesCalculator.UI/src/app/checks/check-list/check-list.component.ts b/src/ExpensesCalculator.UI/src/app/checks/check-list/check-list.component.ts
index ecfd4d5..dd84bc9 100644
--- a/src/ExpensesCalculator.UI/src/app/checks/check-list/check-list.component.ts
+++ b/src/ExpensesCalculator.UI/src/app/checks/check-list/check-list.component.ts
@@ -1,25 +1,23 @@
-import { Component, Input, Output, EventEmitter, OnInit, OnChanges, SimpleChanges, ChangeDetectorRef, inject } from '@angular/core';
+import { Component, Input, Output, EventEmitter, OnInit, OnChanges, SimpleChanges, ChangeDetectorRef } from '@angular/core';
 import { CommonModule } from '@angular/common';
-import { FormsModule } from '@angular/forms';
 import { TranslatePipe, TranslateService } from '@ngx-translate/core';
-import { ModalWindowComponent } from '../../shared/modal-window/modal-window.component';
-import { ValidationErrors, parseValidationErrors } from '../../shared/models/validation-errors.model';
-import { ChecksService, Check, DeleteCheckResponse } from '../../services/checks.service';
+import { ChecksService, Check } from '../../services/checks.service';
 import { ItemListComponent } from '../../items/item-list/item-list.component';
 import { ItemsService, Item } from '../../services/items.service';
-import { DayExpensesTotalSumUpdateService } from '../../services/day-expenses-total-sum-update.service';
-import { ToastService } from '../../services/toast.service';
-import { FormValidationService } from '../../services/form-validation.service';
+import { ModalService } from '../../services/modal.service';
 import { FilterBarComponent, FilterOption } from '../../shared/filter-bar/filter-bar.component';
 import { SortBarComponent, SortOption } from '../../shared/sort-bar/sort-bar.component';
 import { TourAnchorNgBootstrapDirective } from 'ngx-ui-tour-ng-bootstrap';
+import { CheckAddFormComponent } from '../../modals/check-form/check-add-form.component';
+import { CheckEditFormComponent } from '../../modals/check-form/check-edit-form.component';
+import { CheckDeleteFormComponent } from '../../modals/check-form/check-delete-form.component';
 
 declare var bootstrap: any;
 
 @Component({
   selector: 'app-check-list',
   standalone: true,
-  imports: [CommonModule, FormsModule, ModalWindowComponent, TranslatePipe, ItemListComponent, FilterBarComponent, SortBarComponent, TourAnchorNgBootstrapDirective],
+  imports: [CommonModule, TranslatePipe, ItemListComponent, FilterBarComponent, SortBarComponent, TourAnchorNgBootstrapDirective],
   templateUrl: './check-list.component.html',
   styleUrl: './check-list.component.css'
 })
@@ -41,21 +39,6 @@ export class CheckListComponent implements OnInit, OnChanges {
   checkItemsMap: Map<string, Item[]> = new Map(); // Store items per check
   checkLoadingMap: Map<string, boolean> = new Map(); // Track loading state per check
 
-  // Modal properties
-  modalInstance: any;
-  currentModalContent: 'add' | 'edit' | 'delete' = 'add';
-  modalTitle: string = '';
-
-  // Form properties
-  id = '';
-  location = '';
-  payer = '';
-  currentCheckTotalSum = 0;
-
-  // Validation properties
-  formErrors: ValidationErrors = {};
-  formValidated = false;
-
   // Filter and sort properties
   filterText = '';
   filterCriteria: string = 'Location';
@@ -82,16 +65,12 @@ export class CheckListComponent implements OnInit, OnChanges {
   private shouldScrollToItem = false;
   highlightedItemId?: string;
 
-  // Inject services using inject() for better SSR compatibility
-  private dayExpensesTotalSumUpdateService = inject(DayExpensesTotalSumUpdateService);
-
   constructor(
     private checksService: ChecksService,
     private itemsService: ItemsService,
     private translate: TranslateService,
     private cdr: ChangeDetectorRef,
-    private toastService: ToastService,
-    private formValidationService: FormValidationService
+    private modalService: ModalService
   ) {}
 
   ngOnInit(): void {
@@ -269,12 +248,10 @@ export class CheckListComponent implements OnInit, OnChanges {
   }
 
   loadItemsForCheck(checkId: string): void {
-    // Skip if already loaded or currently loading
-    if (this.checkItemsMap.has(checkId) || this.checkLoadingMap.get(checkId)) {
+    if (this.checkLoadingMap.get(checkId)) {
       return;
     }
 
-    // Set loading state
     this.checkLoadingMap.set(checkId, true);
 
     this.itemsService.getAllCheckItems(checkId).subscribe({
@@ -332,187 +309,63 @@ export class CheckListComponent implements OnInit, OnChanges {
 
   // Modal management methods
   openModal(type: 'add' | 'edit' | 'delete', id: string = ''): void {
-    this.currentModalContent = type;
-    this.modalTitle = this.translate.instant(`CHECKS.MODAL.${type.toUpperCase()}_TITLE`);
-
-    const modalElement = document.getElementById('checksModal');
-    if (!modalElement) return;
-
     if (type === 'add') {
-      this.clearFormData();
-    } else if (id) {
-      // Load check data from local array (no server call needed)
-      const check = this.checksList.find(c => c.id === id);
-      if (check) {
-        this.id = check.id;
-        this.location = check.location;
-        this.payer = check.payer;
-        this.currentCheckTotalSum = check.totalSum;
-      }
+      this.modalService.open(
+        CheckAddFormComponent,
+        this.translate.instant('CHECKS.MODAL.ADD_TITLE'),
+        {
+          participants: this.participants,
+          dayExpensesId: this.dayExpensesId,
+          onSuccess: () => this.refreshChecks()
+        },
+        'md'
+      );
+      return;
     }
 
-    if (!this.modalInstance) {
-      this.modalInstance = new bootstrap.Modal(modalElement, {
-        backdrop: 'static',
-        keyboard: false
-      });
+    if (type === 'edit') {
+      const check = this.checksList.find(c => c.id === id);
+      if (!check) return;
+
+      this.modalService.open(
+        CheckEditFormComponent,
+        this.translate.instant('CHECKS.MODAL.EDIT_TITLE'),
+        {
+          participants: this.participants,
+          checkId: check.id,
+          location: check.location,
+          payer: check.payer,
+          onSuccess: () => this.refreshChecks()
+        },
+        'md'
+      );
+      return;
     }
 
-    this.formErrors = {};
-    this.formValidated = false;
-
-    this.modalInstance.show();
-  }
-
-  hideModal(): void {
-    if (this.modalInstance) {
-      this.modalInstance.hide();
-      this.formErrors = {};
-      this.formValidated = false;
-      this.clearFormData();
+    if (type === 'delete') {
+      const check = this.checksList.find(c => c.id === id);
+      if (!check) return;
+
+      this.modalService.open(
+        CheckDeleteFormComponent,
+        this.translate.instant('CHECKS.MODAL.DELETE_TITLE'),
+        {
+          checkId: check.id,
+          dayExpensesId: this.dayExpensesId,
+          location: check.location,
+          payer: check.payer,
+          totalSum: check.totalSum,
+          onSuccess: () => this.refreshChecks()
+        },
+        'md'
+      );
+      return;
     }
   }
 
-  clearFormData(): void {
-    this.id = '';
-    this.location = '';
-    this.payer = '';
-    this.currentCheckTotalSum = 0;
-  }
-
-  // CRUD operations
-  validateCheckForm(): boolean {
-    this.formErrors = {};
-    this.formValidated = true;
-
-    this.formErrors = this.formValidationService.validateCheckForm(this.location, this.payer);
-
-    return !this.formValidationService.hasErrors(this.formErrors);
-  }
-
-  createCheck(): void {
-    if (!this.validateCheckForm()) return;
-    this.formValidated = true;
-
-    this.checksService.createCheck(this.location, this.payer, this.dayExpensesId).subscribe({
-      next: (createdCheck) => {
-        // Add the new check to the list
-        this.checksList.push(createdCheck);
-        this.applyLocalFiltering();
-
-        // Emit event to parent to re-initialize tour with updated step count
-        this.checksLoaded.emit();
-
-        this.hideModal();
-        this.toastService.success(
-          this.translate.instant('CHECKS.TOAST.SUCCESS'),
-          this.translate.instant('CHECKS.TOAST.CREATE_SUCCESS')
-        );
-      },
-      error: error => {
-        this.formErrors = parseValidationErrors(error);
-        this.formValidated = true;
-        if (Object.keys(this.formErrors).length === 0 || this.formErrors['general']) {
-          const errorMessage = this.formErrors['general'] || error?.error?.message || error?.message || this.translate.instant('CHECKS.TOAST.CREATE_ERROR');
-          this.toastService.error(
-            this.translate.instant('CHECKS.TOAST.ERROR'),
-            this.translateBackendError(errorMessage)
-          );
-        }
-      }
-    });
-  }
-
-  editCheck(): void {
-    if (!this.validateCheckForm()) return;
-    this.formValidated = true;
-
-    this.checksService.editCheck(this.id, this.location, this.payer).subscribe({
-      next: (updatedCheck) => {
-        // Update the check in the local list
-        const index = this.checksList.findIndex(c => c.id === this.id);
-        if (index !== -1) {
-          this.checksList[index] = updatedCheck;
-          this.applyLocalFiltering();
-        }
-
-        this.hideModal();
-        this.toastService.success(
-          this.translate.instant('CHECKS.TOAST.SUCCESS'),
-          this.translate.instant('CHECKS.TOAST.EDIT_SUCCESS')
-        );
-      },
-      error: error => {
-        this.formErrors = parseValidationErrors(error);
-        this.formValidated = true;
-        if (Object.keys(this.formErrors).length === 0 || this.formErrors['general']) {
-          const errorMessage = this.formErrors['general'] || error?.error?.message || error?.message || this.translate.instant('CHECKS.TOAST.EDIT_ERROR');
-          this.toastService.error(
-            this.translate.instant('CHECKS.TOAST.ERROR'),
-            this.translateBackendError(errorMessage)
-          );
-        }
-      }
-    });
-  }
-
-  deleteCheck(): void {
-    this.checksService.deleteCheck(this.id).subscribe({
-      next: (response: DeleteCheckResponse) => {
-        // Remove the check from the local list
-        const index = this.checksList.findIndex(c => c.id === this.id);
-        if (index !== -1) {
-          this.checksList.splice(index, 1);
-          // Also remove cached items for this check
-          this.checkItemsMap.delete(this.id);
-          this.checkLoadingMap.delete(this.id);
-          this.applyLocalFiltering();
-
-          // Emit day expenses total sum from backend response
-          this.dayExpensesTotalSumUpdateService.emitDayExpensesTotalSumUpdate(this.dayExpensesId, response.dayExpensesTotalSum);
-
-          // Emit event to parent to re-initialize tour with updated step count
-          this.checksLoaded.emit();
-        }
-
-        this.hideModal();
-        this.toastService.success(
-          this.translate.instant('CHECKS.TOAST.SUCCESS'),
-          this.translate.instant('CHECKS.TOAST.DELETE_SUCCESS')
-        );
-      },
-      error: error => {
-        console.log(error);
-        const errorMessage = error?.error?.message || error?.message || this.translate.instant('CHECKS.TOAST.DELETE_ERROR');
-        this.toastService.error(
-          this.translate.instant('CHECKS.TOAST.ERROR'),
-          this.translateBackendError(errorMessage)
-        );
-      }
-    });
-  }
-
-  // Helper methods
-  translateBackendError(errorMessage: string): string {
-    if (!errorMessage) return '';
-
-    const errorMap: Record<string, string> = {
-      'Invalid data': 'CHECKS.BACKEND_ERRORS.INVALID_DATA',
-      'Unauthorized': 'CHECKS.BACKEND_ERRORS.UNAUTHORIZED'
-    };
-
-    const translationKey = errorMap[errorMessage];
-    if (translationKey) {
-      return this.translate.instant(translationKey);
-    }
-
-    for (const [key, value] of Object.entries(errorMap)) {
-      if (errorMessage.toLowerCase().includes(key.toLowerCase())) {
-        return this.translate.instant(value);
-      }
-    }
-
-    return errorMessage;
+  refreshChecks(): void {
+    this.loadChecks();
+    this.checksLoaded.emit();
   }
 
   getIconOrderClass(column: string): string {
diff --git a/src/ExpensesCalculator.UI/src/app/dayExpenses/day-expenses-details/day-expenses-details.component.html b/src/ExpensesCalculator.UI/src/app/dayExpenses/day-expenses-details/day-expenses-details.component.html
index bf46585..5960d6a 100644
--- a/src/ExpensesCalculator.UI/src/app/dayExpenses/day-expenses-details/day-expenses-details.component.html
+++ b/src/ExpensesCalculator.UI/src/app/dayExpenses/day-expenses-details/day-expenses-details.component.html
@@ -70,110 +70,4 @@
 
     <!-- Check List Component -->
     <app-check-list [dayExpensesId]="id" [dayExpensesLocation]="dayExpenses?.location" [dayExpensesDate]="dayExpenses?.date" [currentLocale]="currentLocale" [participants]="dayExpenses?.participants || []" [checks]="checks" [scrollToCheckId]="scrollToCheckId" [scrollToItemId]="scrollToItemId" (checksLoaded)="onChecksLoaded()"></app-check-list>
-</div>
-
-<app-modal-window [modalId]="'staticBackdrop'" [modalTitle]="modalTitle" [currentModalContent]="currentModalContent">
-    <div class="modal-header py-2 bg-dark text-white border-secondary">
-        <h5 class="modal-title">{{ modalTitle }}</h5>
-        <button type="button" class="btn-close btn-close-white" (click)="hideModal()" aria-label="Close"></button>
-    </div>
-    <div class="modal-body bg-dark text-white">
-
-        <!-- Edit Day Expenses -->
-        <form *ngIf="currentModalContent === 'edit'">
-            <div class="form-group mb-3">
-                <i class="bi bi-calendar-event-fill mx-1"></i>
-                <label class="control-label">{{ 'EXPENSES.MODAL.DATE_LABEL' | translate }}<span class="text-danger">*</span></label>
-                <input [value]="date | date:'EEE, MMM dd, yyyy':'':currentLocale | titlecase" name="date" type="text" class="form-control" [class.is-invalid]="formErrors['date']" [class.is-valid]="formValidated && !formErrors['date'] && date" id="modalDateInput" required readonly />
-                <div class="invalid-feedback d-block" *ngIf="formErrors['date']">{{ formErrors['date'] }}</div>
-            </div>
-            <div class="form-group mb-3">
-                <div class="d-flex justify-content-between align-items-center">
-                    <label class="control-label mb-0">
-                        <i class="bi bi-geo-alt-fill me-1"></i>{{ 'EXPENSES.MODAL.LOCATION_LABEL' | translate }}
-                    </label>
-                    <small class="text-white" style="font-size: 0.75rem;">{{ location.length }}/25</small>
-                </div>
-                <input [(ngModel)]="location" name="location" class="form-control" [class.is-invalid]="formErrors['location']" [class.is-valid]="formValidated && !formErrors['location']" maxlength="25" id="location" />
-                <div class="invalid-feedback" *ngIf="formErrors['location']">{{ formErrors['location'] }}</div>
-            </div>
-            <div class="form-group mb-3">
-                <i class="bi bi-people-fill mx-1"></i>
-                <label class="control-label">{{ 'EXPENSES.MODAL.PARTICIPANTS_LABEL' | translate }}<span class="text-danger">*</span></label>
-                <input [(ngModel)]="participants" name="participants" class="form-control" [class.is-invalid]="formErrors['participants']" [class.is-valid]="formValidated && !formErrors['participants'] && participants.trim()" id="participants" [placeholder]="'EXPENSES.MODAL.PARTICIPANTS_PLACEHOLDER' | translate" required />
-                <label class="form-text text-white small mt-0 pt-0"><span class="text-danger">*</span>
-                    {{ 'EXPENSES.MODAL.PARTICIPANTS_HINT' | translate }}</label>
-                <div class="invalid-feedback" *ngIf="formErrors['participants']">{{ formErrors['participants'] }}</div>
-            </div>
-            <div class="form-group mb-3">
-                <i class="bi bi-cash-stack mx-1"></i>
-                <label class="control-label">{{ 'EXPENSES.MODAL.TOTAL_SUM_LABEL' | translate }}</label>
-                <input [value]="totalSum | currency:'UAH':'₴'" class="form-control" disabled readonly />
-            </div>
-            <button type="button" value="Edit" class="btn btn-warning" (click)="editDayExpenses()">
-                <i class="bi bi-pencil me-1"></i>{{ 'EXPENSES.MODAL.EDIT_BUTTON' | translate }}
-            </button>
-        </form>
-
-        <!-- Delete Day Expenses -->
-        <form *ngIf="currentModalContent === 'delete'">
-            <div class="form-group mb-3">
-                <i class="bi bi-calendar-event-fill mx-1"></i>
-                <label class="control-label">{{ 'EXPENSES.MODAL.DATE_LABEL' | translate }}</label>
-                <input [value]="date | date:'EEE, MMM dd, yyyy':'':currentLocale | titlecase" name="date" type="text" class="form-control" id="modalDateInput" disabled readonly />
-            </div>
-            <div class="form-group mb-3">
-                <i class="bi bi-geo-alt-fill mx-1"></i>
-                <label class="control-label">{{ 'EXPENSES.MODAL.LOCATION_LABEL' | translate }}</label>
-                <input [(ngModel)]="location" name="location" class="form-control" id="location" disabled readonly />
-            </div>
-            <div class="form-group mb-3">
-                <i class="bi bi-people-fill mx-1"></i>
-                <label class="control-label">{{ 'EXPENSES.MODAL.PARTICIPANTS_LABEL' | translate }}</label>
-                <input [(ngModel)]="participants" name="participants" class="form-control" id="participants" disabled readonly />
-            </div>
-            <div class="form-group mb-3">
-                <i class="bi bi-cash-stack mx-1"></i>
-                <label class="control-label">{{ 'EXPENSES.MODAL.TOTAL_SUM_LABEL' | translate }}</label>
-                <input [value]="totalSum | currency:'UAH':'₴'" class="form-control" disabled readonly />
-            </div>
-            <button type="button" value="Delete" class="btn btn-danger" (click)="deleteDayExpenses()">
-                <i class="bi bi-trash me-1"></i>{{ 'EXPENSES.MODAL.DELETE_BUTTON' | translate }}
-            </button>
-        </form>
-
-        <!-- Share Day Expenses -->
-        <form *ngIf="currentModalContent === 'share'">
-            <div class="form-group mb-3">
-                <i class="bi bi-calendar-event-fill mx-1"></i>
-                <label class="control-label">{{ 'EXPENSES.MODAL.DATE_LABEL' | translate }}</label>
-                <input [value]="date | date:'EEE, MMM dd, yyyy':'':currentLocale | titlecase" name="date" type="text" class="form-control" id="modalDateInput" disabled readonly />
-            </div>
-            <div class="form-group mb-3">
-                <i class="bi bi-geo-alt-fill mx-1"></i>
-                <label class="control-label">{{ 'EXPENSES.MODAL.LOCATION_LABEL' | translate }}</label>
-                <input [(ngModel)]="location" name="location" class="form-control" id="location" disabled readonly />
-            </div>
-            <div class="form-group mb-3">
-                <i class="bi bi-people-fill mx-1"></i>
-                <label class="control-label">{{ 'EXPENSES.MODAL.PARTICIPANTS_LABEL' | translate }}</label>
-                <input [(ngModel)]="participants" name="participants" class="form-control" id="participants" disabled readonly />
-            </div>
-            <div class="form-group mb-3">
-                <i class="bi bi-cash-stack mx-1"></i>
-                <label class="control-label">{{ 'EXPENSES.MODAL.TOTAL_SUM_LABEL' | translate }}</label>
-                <input [value]="totalSum | currency:'UAH':'₴'" class="form-control" disabled readonly />
-            </div>
-            <div class="form-group mb-3">
-                <i class="bi bi-person-fill mx-1"></i>
-                <label class="control-label">{{ 'EXPENSES.MODAL.SHARE_USER_LABEL' | translate }}<span class="text-danger">*</span></label>
-                <input [(ngModel)]="newUserWithAccess" name="newUserWithAccess" class="form-control" [class.is-invalid]="formErrors['newUserWithAccess']" [class.is-valid]="formValidated && !formErrors['newUserWithAccess'] && newUserWithAccess.trim()" id="newUserWithAccess" required/>
-                <div class="invalid-feedback" *ngIf="formErrors['newUserWithAccess']">{{ formErrors['newUserWithAccess'] }}</div>
-            </div>
-            <button type="button" value="Share" class="btn btn-primary" (click)="shareDayExpenses()">
-                <i class="bi bi-share me-1"></i>{{ 'EXPENSES.MODAL.SHARE_BUTTON' | translate }}
-            </button>
-        </form>
-
-    </div>
-</app-modal-window>
\ No newline at end of file
+</div>
\ No newline at end of file
diff --git a/src/ExpensesCalculator.UI/src/app/dayExpenses/day-expenses-details/day-expenses-details.component.ts b/src/ExpensesCalculator.UI/src/app/dayExpenses/day-expenses-details/day-expenses-details.component.ts
index b60869a..119cfc9 100644
--- a/src/ExpensesCalculator.UI/src/app/dayExpenses/day-expenses-details/day-expenses-details.component.ts
+++ b/src/ExpensesCalculator.UI/src/app/dayExpenses/day-expenses-details/day-expenses-details.component.ts
@@ -1,41 +1,35 @@
 import { Component, OnInit, AfterViewInit, OnDestroy } from '@angular/core';
 import { TranslatePipe, TranslateService } from '@ngx-translate/core';
 import { CommonModule } from '@angular/common';
-import { FormsModule } from '@angular/forms';
 import { ActivatedRoute, Router } from '@angular/router';
-import { ModalWindowComponent } from "../../shared/modal-window/modal-window.component";
-import { ValidationErrors, parseValidationErrors } from '../../shared/models/validation-errors.model';
-import { ExpensesService, DayExpenses, DayExpensesDetails } from '../../services/expenses.service';
+import { ExpensesService, DayExpenses } from '../../services/expenses.service';
 import { Check } from '../../services/checks.service';
 import { CheckListComponent } from '../../checks/check-list/check-list.component';
 import { ToastService } from '../../services/toast.service';
 import { TooltipService } from '../../services/tooltip.service';
-import { FormValidationService } from '../../services/form-validation.service';
+import { ModalService } from '../../services/modal.service';
 import { DateRangeService } from '../../services/date-range.service';
 import { DayExpensesTotalSumUpdateService } from '../../services/day-expenses-total-sum-update.service';
 import { Subscription } from 'rxjs';
 import { TourService, TourAnchorNgBootstrapDirective, TourStepTemplateComponent } from 'ngx-ui-tour-ng-bootstrap';
+import { DayExpensesEditFormComponent } from '../../modals/day-expenses-form/day-expenses-edit-form.component';
+import { DayExpensesDeleteFormComponent } from '../../modals/day-expenses-form/day-expenses-delete-form.component';
+import { DayExpensesShareFormComponent } from '../../modals/day-expenses-form/day-expenses-share-form.component';
 
 declare var bootstrap: any;
 
 @Component({
   selector: 'app-day-expenses-details',
-  imports: [TranslatePipe, CommonModule, FormsModule, ModalWindowComponent, CheckListComponent, TourAnchorNgBootstrapDirective, TourStepTemplateComponent],
+  imports: [TranslatePipe, CommonModule, CheckListComponent, TourAnchorNgBootstrapDirective, TourStepTemplateComponent],
   standalone: true,
   templateUrl: './day-expenses-details.component.html',
   styleUrl: './day-expenses-details.component.css'
 })
 export class DayExpensesDetailsComponent implements OnInit, AfterViewInit, OnDestroy {
   // Private variables
-  private modalFlatpickrInstance: any;
   private langChangeSub!: Subscription;
   private dayExpensesTotalSumUpdateSub?: Subscription;
 
-  // Modal properties
-  modalInstance: any;
-  currentModalContent: 'edit' | 'delete' | 'share' = 'edit';
-  modalTitle: string = '';
-
   // Locale
   currentLocale: string = 'en';
 
@@ -50,15 +44,6 @@ export class DayExpensesDetailsComponent implements OnInit, AfterViewInit, OnDes
   scrollToCheckId?: string;
   scrollToItemId?: string;
 
-  // Share functionality
-  newUserWithAccess = '';
-  shareIsSuccess = false;
-  shareError = '';
-
-  // Form validation
-  formErrors: ValidationErrors = {};
-  formValidated = false;
-
   // Loading state
   isLoading = false;
 
@@ -69,7 +54,7 @@ export class DayExpensesDetailsComponent implements OnInit, AfterViewInit, OnDes
     private expensesService: ExpensesService,
     private toastService: ToastService,
     private tooltipService: TooltipService,
-    private formValidationService: FormValidationService,
+    private modalService: ModalService,
     private dateRangeService: DateRangeService,
     private dayExpensesTotalSumUpdateService: DayExpensesTotalSumUpdateService,
     public tourService: TourService
@@ -96,10 +81,6 @@ export class DayExpensesDetailsComponent implements OnInit, AfterViewInit, OnDes
       this.tooltipService.destroy();
       setTimeout(() => this.tooltipService.initialize({ html: true }), 0);
 
-      if (this.modalFlatpickrInstance) {
-        this.dateRangeService.updateLocale(this.modalFlatpickrInstance, event.lang);
-      }
-
       // Re-initialize tour with new language
       this.initializeTour();
     });
@@ -120,7 +101,6 @@ export class DayExpensesDetailsComponent implements OnInit, AfterViewInit, OnDes
   }
 
   ngOnDestroy(): void {
-    this.dateRangeService.destroy(this.modalFlatpickrInstance);
     this.tooltipService.destroy();
     if (this.langChangeSub) {
       this.langChangeSub.unsubscribe();
@@ -159,219 +139,71 @@ export class DayExpensesDetailsComponent implements OnInit, AfterViewInit, OnDes
 
   // Modal management
   openModal(type: 'edit' | 'delete' | 'share', id: string = '') {
-    this.currentModalContent = type;
-    this.modalTitle = this.translate.instant(`EXPENSES.MODAL.${type.toUpperCase()}_TITLE`);
-
-    const modalElement = document.getElementById('staticBackdrop');
-    if (!modalElement) return;
-
     if (id && id !== this.id) {
-      // If a different ID is provided, load that day expenses
       this.id = id;
       this.loadDayExpenses();
+      return;
     }
 
-    if (!this.modalInstance) {
-      this.modalInstance = new bootstrap.Modal(modalElement, {
-        backdrop: 'static',
-        keyboard: false
-      });
-    }
-
-    this.formErrors = {};
-    this.formValidated = false;
-    this.newUserWithAccess = '';
-
-    this.modalInstance.show();
-
-    // Initialize flatpickr for edit modal
-    const readonly = type === 'delete' || type === 'share';
-    setTimeout(() => this.initModalFlatpickr(readonly), 0);
-  }
-
-  hideModal() {
-    if (this.modalInstance) {
-      this.dateRangeService.destroy(this.modalFlatpickrInstance);
-      this.modalInstance.hide();
-      this.newUserWithAccess = '';
-      this.formErrors = {};
-      this.formValidated = false;
-    }
-  }
-
-  // Flatpickr
-  initModalFlatpickr(readonly: boolean = false) {
-    this.dateRangeService.destroy(this.modalFlatpickrInstance);
-
-    this.modalFlatpickrInstance = this.dateRangeService.initializeSingleDatePicker('modalDateInput', {
-      readonly: readonly,
-      defaultDate: this.date || undefined,
-      onChange: (dates: Date[]) => {
-        if (dates.length > 0) {
-          this.date = this.dateRangeService.formatDate(dates[0]);
-        }
-      }
-    });
-  }
-
-  // Form validation
-  private setDateInputValidation(invalid: boolean, valid: boolean) {
-    // Flatpickr altInput is the visible input next to the hidden #modalDateInput
-    if (this.modalFlatpickrInstance?.altInput) {
-      if (invalid) {
-        this.modalFlatpickrInstance.altInput.classList.add('is-invalid');
-        this.modalFlatpickrInstance.altInput.classList.remove('is-valid');
-      } else if (valid) {
-        this.modalFlatpickrInstance.altInput.classList.add('is-valid');
-        this.modalFlatpickrInstance.altInput.classList.remove('is-invalid');
-      } else {
-        this.modalFlatpickrInstance.altInput.classList.remove('is-invalid');
-        this.modalFlatpickrInstance.altInput.classList.remove('is-valid');
-      }
+    if (type === 'edit') {
+      this.modalService.open(
+        DayExpensesEditFormComponent,
+        this.translate.instant('EXPENSES.MODAL.EDIT_TITLE'),
+        {
+          currentLocale: this.currentLocale,
+          id: this.id,
+          date: this.date,
+          location: this.location,
+          participants: this.participants,
+          totalSum: this.totalSum,
+          onSuccess: () => this.refreshDayExpenses()
+        },
+        'md'
+      );
+      return;
     }
-  }
-
-  private validateDayExpensesForm(): boolean {
-    this.formErrors = {};
-    this.formValidated = true;
-    this.setDateInputValidation(false, false);
 
-    this.formErrors = this.formValidationService.validateDayExpensesForm(this.date, this.participants);
-
-    if (this.formErrors['date']) {
-      this.setDateInputValidation(true, false);
-    } else if (this.date) {
-      this.setDateInputValidation(false, true);
+    if (type === 'delete') {
+      this.modalService.open(
+        DayExpensesDeleteFormComponent,
+        this.translate.instant('EXPENSES.MODAL.DELETE_TITLE'),
+        {
+          currentLocale: this.currentLocale,
+          id: this.id,
+          date: this.date,
+          location: this.location,
+          participants: this.participants,
+          totalSum: this.totalSum,
+          onSuccess: () => this.router.navigate(['/day-expenses'])
+        },
+        'md'
+      );
+      return;
     }
 
-    return !this.formValidationService.hasErrors(this.formErrors);
-  }
-
-  // Data modification
-  editDayExpenses() {
-    if (!this.validateDayExpensesForm()) return;
-    this.formValidated = true;
-
-    const participantsList = this.participants.split(',').map(p => p.trim());
-
-    this.expensesService.editDayExpenses(this.id, this.date, this.location, participantsList).subscribe({
-      next: (updatedDay) => {
-        // Update local data with returned values
-        this.dayExpenses = updatedDay;
-        this.date = (new Date(updatedDay.date)).toISOString().substring(0, 10);
-        this.location = updatedDay.location;
-        this.participants = updatedDay.participants.join(', ');
-        this.totalSum = updatedDay.totalSum;
-
-        this.hideModal();
-        this.toastService.success(
-          this.translate.instant('EXPENSES.TOAST.SUCCESS'),
-          this.translate.instant('EXPENSES.TOAST.EDIT_SUCCESS')
-        );
-
-        // Re-initialize tooltips after data updates
-        setTimeout(() => this.tooltipService.initialize({ html: true }), 0);
-      },
-      error: error => {
-        this.formErrors = parseValidationErrors(error);
-        this.formValidated = true;
-        if (Object.keys(this.formErrors).length === 0 || this.formErrors['general']) {
-          const errorMessage = this.formErrors['general'] || error?.error?.message || error?.message || this.translate.instant('EXPENSES.TOAST.EDIT_ERROR');
-          this.toastService.error(
-            this.translate.instant('EXPENSES.TOAST.ERROR'),
-            this.translateBackendError(errorMessage)
-          );
-        }
-      }
-    });
-  }
-
-  deleteDayExpenses() {
-    this.expensesService.deleteDayExpenses(this.id).subscribe({
-      next: () => {
-        this.hideModal();
-        this.router.navigate(['/day-expenses']);
-      },
-      error: error => {
-        console.log(error);
-        const errorMessage = error?.error?.message || error?.message || this.translate.instant('EXPENSES.TOAST.DELETE_ERROR');
-        this.toastService.error(
-          this.translate.instant('EXPENSES.TOAST.ERROR'),
-          this.translateBackendError(errorMessage)
-        );
-      }
-    });
-  }
-
-  shareDayExpenses() {
-    this.formErrors = {};
-    this.shareError = '';
-    this.formValidated = true;
-
-    this.formErrors = this.formValidationService.validateShareForm(this.newUserWithAccess);
-    if (this.formValidationService.hasErrors(this.formErrors)) {
+    if (type === 'share') {
+      this.modalService.open(
+        DayExpensesShareFormComponent,
+        this.translate.instant('EXPENSES.MODAL.SHARE_TITLE'),
+        {
+          currentLocale: this.currentLocale,
+          id: this.id,
+          date: this.date,
+          location: this.location,
+          participants: this.participants,
+          totalSum: this.totalSum,
+          onSuccess: () => this.refreshDayExpenses()
+        },
+        'md'
+      );
       return;
     }
-
-    this.expensesService.shareDayExpenses(this.id, this.newUserWithAccess).subscribe({
-      next: (data) => {
-        if (data.isSuccess) {
-          this.hideModal();
-          this.loadDayExpenses();
-          this.shareIsSuccess = false;
-          this.toastService.success(
-            this.translate.instant('EXPENSES.TOAST.SUCCESS'),
-            this.translate.instant('EXPENSES.TOAST.SHARE_SUCCESS')
-          );
-        }
-        else {
-          this.shareIsSuccess = data.isSuccess;
-          this.shareError = this.translateBackendError(data.error);
-          this.formErrors['newUserWithAccess'] = this.shareError;
-        }
-      },
-      error: error => {
-        this.formErrors = parseValidationErrors(error);
-        this.formValidated = true;
-        if (Object.keys(this.formErrors).length === 0 || this.formErrors['general']) {
-          const errorMessage = this.formErrors['general'] || error?.error?.message || error?.message || this.translate.instant('EXPENSES.BACKEND_ERRORS.UNKNOWN_ERROR');
-          this.toastService.error(
-            this.translate.instant('EXPENSES.TOAST.ERROR'),
-            this.translateBackendError(errorMessage)
-          );
-        }
-      }
-    });
   }
 
-  // Helper methods
-  translateBackendError(errorMessage: string): string {
-    if (!errorMessage) return '';
-
-    // Map common backend error messages to translation keys
-    const errorMap: Record<string, string> = {
-      'User not found': 'EXPENSES.BACKEND_ERRORS.USER_NOT_FOUND',
-      'Invalid data': 'EXPENSES.BACKEND_ERRORS.INVALID_DATA',
-      'Unauthorized': 'EXPENSES.BACKEND_ERRORS.UNAUTHORIZED',
-      'Already shared': 'EXPENSES.BACKEND_ERRORS.ALREADY_SHARED',
-      'already has access': 'EXPENSES.BACKEND_ERRORS.ALREADY_HAS_ACCESS'
-    };
-
-    // Check if we have a translation for this error
-    const translationKey = errorMap[errorMessage];
-    if (translationKey) {
-      return this.translate.instant(translationKey);
-    }
-
-    // If no exact match, check for partial matches
-    for (const [key, value] of Object.entries(errorMap)) {
-      if (errorMessage.toLowerCase().includes(key.toLowerCase())) {
-        return this.translate.instant(value);
-      }
-    }
-
-    // Return original message if no translation found
-    return errorMessage;
+  refreshDayExpenses(): void {
+    this.loadDayExpenses();
+    this.tooltipService.destroy();
+    setTimeout(() => this.tooltipService.initialize({ html: true }), 100);
   }
 
   getTooltipContent() {
diff --git a/src/ExpensesCalculator.UI/src/app/dayExpenses/day-expenses-list/day-expenses-list.component.html b/src/ExpensesCalculator.UI/src/app/dayExpenses/day-expenses-list/day-expenses-list.component.html
index eb01ec9..4800678 100644
--- a/src/ExpensesCalculator.UI/src/app/dayExpenses/day-expenses-list/day-expenses-list.component.html
+++ b/src/ExpensesCalculator.UI/src/app/dayExpenses/day-expenses-list/day-expenses-list.component.html
@@ -393,146 +393,4 @@ <h2 class="accordion-header" [id]="'heading' + day.id">
         </div>
     </div>
 
-</div>
-
-<app-modal-window [modalId]="'staticBackdrop'" [modalTitle]="modalTitle" [currentModalContent]="currentModalContent">
-    <div class="modal-header py-2 bg-dark text-white border-secondary">
-        <h5 class="modal-title">{{ modalTitle }}</h5>
-        <button type="button" class="btn-close btn-close-white" (click)="hideModal()" aria-label="Close"></button>
-    </div>
-    <div class="modal-body bg-dark text-white">
-
-        <!-- Add Expenses -->
-        <form *ngIf="currentModalContent === 'add'">
-            <div class="form-group mb-3">
-                <i class="bi bi-calendar-event-fill mx-1"></i>
-                <label class="control-label">{{ 'EXPENSES.MODAL.DATE_LABEL' | translate }}<span class="text-danger">*</span></label>
-                <input [value]="date | date:'EEE, MMM dd, yyyy':'':currentLocale | titlecase" name="date" type="text" class="form-control" [class.is-invalid]="formErrors['date']" [class.is-valid]="formValidated && !formErrors['date'] && date" id="modalDateInput" required readonly/>
-                <div class="invalid-feedback d-block" *ngIf="formErrors['date']">{{ formErrors['date'] }}</div>
-            </div>
-            <div class="form-group mb-3">
-                <div class="d-flex justify-content-between align-items-center">
-                    <label class="control-label mb-0">
-                        <i class="bi bi-geo-alt-fill me-1"></i>{{ 'EXPENSES.MODAL.LOCATION_LABEL' | translate }}
-                    </label>
-                    <small class="text-white" style="font-size: 0.75rem;">{{ location.length }}/25</small>
-                </div>
-                <input [(ngModel)]="location" name="location" class="form-control" [class.is-invalid]="formErrors['location']" [class.is-valid]="formValidated && !formErrors['location']" maxlength="25" id="location" />
-                <div class="invalid-feedback" *ngIf="formErrors['location']">{{ formErrors['location'] }}</div>
-            </div>
-            <div class="form-group mb-3">
-                <i class="bi bi-people-fill mx-1"></i>
-                <label class="control-label">{{ 'EXPENSES.MODAL.PARTICIPANTS_LABEL' | translate }}<span class="text-danger">*</span></label>
-                <input [(ngModel)]="participants" name="participants" class="form-control" [class.is-invalid]="formErrors['participants']" id="participants" [placeholder]="'EXPENSES.MODAL.PARTICIPANTS_PLACEHOLDER' | translate" required />
-                <label class="form-text text-white small mt-0 pt-0"><span class="text-danger">*</span>
-                    {{ 'EXPENSES.MODAL.PARTICIPANTS_HINT' | translate }}</label>
-                <div class="invalid-feedback" *ngIf="formErrors['participants']">{{ formErrors['participants'] }}</div>
-            </div>
-            <button type="button" value="Create" class="btn btn-success" (click)="createDayExpenses()">
-                <i class="bi bi-plus-circle me-1"></i>{{ 'EXPENSES.MODAL.ADD_BUTTON' | translate }}
-            </button>
-        </form>
-
-        <!-- Edit Expenses -->
-        <form *ngIf="currentModalContent === 'edit'">
-            <div class="form-group mb-3">
-                <i class="bi bi-calendar-event-fill mx-1"></i>
-                <label class="control-label">{{ 'EXPENSES.MODAL.DATE_LABEL' | translate }}<span class="text-danger">*</span></label>
-                <input [value]="date | date:'EEE, MMM dd, yyyy':'':currentLocale | titlecase" name="date" type="text" class="form-control" [class.is-invalid]="formErrors['date']" [class.is-valid]="formValidated && !formErrors['date'] && date" id="modalDateInput" required readonly/>
-                <div class="invalid-feedback d-block" *ngIf="formErrors['date']">{{ formErrors['date'] }}</div>
-            </div>
-            <div class="form-group mb-3">
-                <div class="d-flex justify-content-between align-items-center">
-                    <label class="control-label mb-0">
-                        <i class="bi bi-geo-alt-fill me-1"></i>{{ 'EXPENSES.MODAL.LOCATION_LABEL' | translate }}
-                    </label>
-                    <small class="text-white" style="font-size: 0.75rem;">{{ location.length }}/25</small>
-                </div>
-                <input [(ngModel)]="location" name="location" class="form-control" [class.is-invalid]="formErrors['location']" [class.is-valid]="formValidated && !formErrors['location']" maxlength="25" id="location" />
-                <div class="invalid-feedback" *ngIf="formErrors['location']">{{ formErrors['location'] }}</div>
-            </div>
-            <div class="form-group mb-3">
-                <i class="bi bi-people-fill mx-1"></i>
-                <label class="control-label">{{ 'EXPENSES.MODAL.PARTICIPANTS_LABEL' | translate }}<span class="text-danger">*</span></label>
-                <input [(ngModel)]="participants" name="participants" class="form-control" [class.is-invalid]="formErrors['participants']" id="participants" [placeholder]="'EXPENSES.MODAL.PARTICIPANTS_PLACEHOLDER' | translate" required />
-                <label class="form-text text-white small mt-0 pt-0"><span class="text-danger">*</span>
-                    {{ 'EXPENSES.MODAL.PARTICIPANTS_HINT' | translate }}</label>
-                <div class="invalid-feedback" *ngIf="formErrors['participants']">{{ formErrors['participants'] }}</div>
-            </div>
-            <div class="form-group mb-3">
-                <i class="bi bi-cash-stack mx-1"></i>
-                <label class="control-label">{{ 'EXPENSES.MODAL.TOTAL_SUM_LABEL' | translate }}</label>
-                <input [value]="totalSum | currency:'UAH':'₴'" class="form-control" disabled readonly />
-            </div>
-            <button type="button" value="Edit" class="btn btn-warning" (click)="editDayExpenses()">
-                <i class="bi bi-pencil me-1"></i>{{ 'EXPENSES.MODAL.EDIT_BUTTON' | translate }}
-            </button>
-        </form>
-
-        <!-- Delete Expenses -->
-        <form *ngIf="currentModalContent === 'delete'">
-            <div class="form-group mb-3">
-                <i class="bi bi-calendar-event-fill mx-1"></i>
-                <label class="control-label">{{ 'EXPENSES.MODAL.DATE_LABEL' | translate }}</label>
-                <input [value]="date | date:'EEE, MMM dd, yyyy':'':currentLocale | titlecase" name="date" type="text" class="form-control" id="modalDateInput" disabled readonly />
-                <span class="text-danger"></span>
-            </div>
-            <div class="form-group mb-3">
-                <i class="bi bi-geo-alt-fill mx-1"></i>
-                <label class="control-label">{{ 'EXPENSES.MODAL.LOCATION_LABEL' | translate }}</label>
-                <input [(ngModel)]="location" name="location" class="form-control" id="location" disabled readonly />
-                <span class="text-danger"></span>
-            </div>
-            <div class="form-group mb-3">
-                <i class="bi bi-people-fill mx-1"></i>
-                <label class="control-label">{{ 'EXPENSES.MODAL.PARTICIPANTS_LABEL' | translate }}</label>
-                <input [(ngModel)]="participants" name="participants" class="form-control" id="participants" disabled readonly />
-                <span class="text-danger"></span>
-            </div>
-            <div class="form-group mb-3">
-                <i class="bi bi-cash-stack mx-1"></i>
-                <label class="control-label">{{ 'EXPENSES.MODAL.TOTAL_SUM_LABEL' | translate }}</label>
-                <input [value]="totalSum | currency:'UAH':'₴'" class="form-control" disabled readonly />
-            </div>
-            <button type="button" value="Delete" class="btn btn-danger" (click)="deleteDayExpenses()">
-                <i class="bi bi-trash me-1"></i>{{ 'EXPENSES.MODAL.DELETE_BUTTON' | translate }}
-            </button>
-        </form>
-
-        <!-- Share Expenses -->
-        <form *ngIf="currentModalContent === 'share'">
-            <div class="form-group mb-3">
-                <i class="bi bi-calendar-event-fill mx-1"></i>
-                <label class="control-label">{{ 'EXPENSES.MODAL.DATE_LABEL' | translate }}</label>
-                <input [value]="date | date:'EEE, MMM dd, yyyy':'':currentLocale | titlecase" name="date" type="text" class="form-control" id="modalDateInput" disabled readonly />
-                <span class="text-danger"></span>
-            </div>
-            <div class="form-group mb-3">
-                <i class="bi bi-geo-alt-fill mx-1"></i>
-                <label class="control-label">{{ 'EXPENSES.MODAL.LOCATION_LABEL' | translate }}</label>
-                <input [(ngModel)]="location" name="location" class="form-control" id="location" disabled readonly />
-                <span class="text-danger"></span>
-            </div>
-            <div class="form-group mb-3">
-                <i class="bi bi-people-fill mx-1"></i>
-                <label class="control-label">{{ 'EXPENSES.MODAL.PARTICIPANTS_LABEL' | translate }}</label>
-                <input [(ngModel)]="participants" name="participants" class="form-control" id="participants" disabled readonly />
-                <span class="text-danger"></span>
-            </div>
-            <div class="form-group mb-3">
-                <i class="bi bi-cash-stack mx-1"></i>
-                <label class="control-label">{{ 'EXPENSES.MODAL.TOTAL_SUM_LABEL' | translate }}</label>
-                <input [value]="totalSum | currency:'UAH':'₴'" class="form-control" disabled readonly />
-            </div>
-            <div class="form-group mb-3">
-                <i class="bi bi-person-fill mx-1"></i>
-                <label class="control-label">{{ 'EXPENSES.MODAL.SHARE_USER_LABEL' | translate }}<span class="text-danger">*</span></label>
-                <input [(ngModel)]="newUserWithAccess" name="newUserWithAccess" class="form-control" [class.is-invalid]="formErrors['newUserWithAccess']" [class.is-valid]="formValidated && !formErrors['newUserWithAccess'] && newUserWithAccess.trim()" id="newUserWithAccess" required/>
-                <div class="invalid-feedback" *ngIf="formErrors['newUserWithAccess']">{{ formErrors['newUserWithAccess'] }}</div>
-            </div>
-            <button type="button" value="Share" class="btn btn-primary" (click)="shareDayExpenses()">
-                <i class="bi bi-share me-1"></i>{{ 'EXPENSES.MODAL.SHARE_BUTTON' | translate }}
-            </button>
-        </form>
-    </div>
-</app-modal-window>
+</div>
\ No newline at end of file
diff --git a/src/ExpensesCalculator.UI/src/app/dayExpenses/day-expenses-list/day-expenses-list.component.ts b/src/ExpensesCalculator.UI/src/app/dayExpenses/day-expenses-list/day-expenses-list.component.ts
index 0572266..5a9f5eb 100644
--- a/src/ExpensesCalculator.UI/src/app/dayExpenses/day-expenses-list/day-expenses-list.component.ts
+++ b/src/ExpensesCalculator.UI/src/app/dayExpenses/day-expenses-list/day-expenses-list.component.ts
@@ -1,29 +1,29 @@
 import { Component, OnInit, AfterViewInit, OnDestroy } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { ExpensesService, DayExpenses } from '../../services/expenses.service';
-import { ToastService } from '../../services/toast.service';
 import { DateRangeService } from '../../services/date-range.service';
 import { TooltipService } from '../../services/tooltip.service';
-import { FormValidationService } from '../../services/form-validation.service';
-import { ModalWindowComponent } from "../../shared/modal-window/modal-window.component";
+import { ModalService } from '../../services/modal.service';
 import { FilterBarComponent, FilterOption } from '../../shared/filter-bar/filter-bar.component';
 import { SortBarComponent, SortOption } from '../../shared/sort-bar/sort-bar.component';
-import { FormsModule } from '@angular/forms';
 import { Router } from '@angular/router';
 import { RouterLink } from "@angular/router";
 import { DatePipe } from '@angular/common';
 import { TranslatePipe, TranslateService } from '@ngx-translate/core';
 import { Subject, Subscription } from 'rxjs';
 import { debounceTime, distinctUntilChanged } from 'rxjs/operators';
-import { ValidationErrors, parseValidationErrors } from '../../shared/models/validation-errors.model';
 import { TourService, TourAnchorNgBootstrapDirective, TourStepTemplateComponent } from 'ngx-ui-tour-ng-bootstrap';
+import { DayExpensesAddFormComponent } from '../../modals/day-expenses-form/day-expenses-add-form.component';
+import { DayExpensesEditFormComponent } from '../../modals/day-expenses-form/day-expenses-edit-form.component';
+import { DayExpensesDeleteFormComponent } from '../../modals/day-expenses-form/day-expenses-delete-form.component';
+import { DayExpensesShareFormComponent } from '../../modals/day-expenses-form/day-expenses-share-form.component';
 
 declare var bootstrap: any;
 
 @Component({
   selector: 'app-day-expenses-list',
   standalone: true,
-  imports: [RouterLink, FormsModule, CommonModule, ModalWindowComponent, FilterBarComponent, SortBarComponent, TranslatePipe, TourAnchorNgBootstrapDirective, TourStepTemplateComponent],
+  imports: [RouterLink, CommonModule, FilterBarComponent, SortBarComponent, TranslatePipe, TourAnchorNgBootstrapDirective, TourStepTemplateComponent],
   providers: [DatePipe],
   templateUrl: './day-expenses-list.component.html',
   styleUrl: './day-expenses-list.component.css'
@@ -31,7 +31,6 @@ declare var bootstrap: any;
 export class DayExpensesListComponent implements OnInit, AfterViewInit, OnDestroy {
   private flatpickrInitialized = false;
   private flatpickrInstance: any;
-  private modalFlatpickrInstance: any;
   private settingDatesFromApiWrapper = { value: false };
   private langChangeSub!: Subscription;
   private filterTextSubject = new Subject<string>();
@@ -45,7 +44,6 @@ export class DayExpensesListComponent implements OnInit, AfterViewInit, OnDestro
 
   ngOnDestroy(): void {
     this.dateRangeService.destroy(this.flatpickrInstance);
-    this.destroyModalFlatpickr();
     if (this.langChangeSub) {
       this.langChangeSub.unsubscribe();
     }
@@ -93,26 +91,6 @@ export class DayExpensesListComponent implements OnInit, AfterViewInit, OnDestro
     );
   }
 
-  initModalFlatpickr(readonly: boolean = false) {
-    this.destroyModalFlatpickr();
-
-    this.modalFlatpickrInstance = this.dateRangeService.initializeSingleDatePicker(
-      'modalDateInput',
-      {
-        defaultDate: this.date || undefined,
-        readonly: readonly,
-        onChange: (dates: Date[]) => {
-          this.date = this.dateRangeService.formatDate(dates[0]);
-        }
-      }
-    );
-  }
-
-  destroyModalFlatpickr() {
-    this.dateRangeService.destroy(this.modalFlatpickrInstance);
-    this.modalFlatpickrInstance = null;
-  }
-
   clearDateRange(): void {
     if (this.flatpickrInstance) {
       // Destroy and reinitialize to ensure clean state
@@ -163,22 +141,6 @@ export class DayExpensesListComponent implements OnInit, AfterViewInit, OnDestro
   currentPage: number = 1;
   pageSize: number = 10;
 
-  // Expenses data
-  id = '';
-  date = '';
-  location = '';
-  participants = '';
-  totalSum = 0;
-
-  // Add new user with access
-  newUserWithAccess = '';
-  shareIsSuccess = false;
-  shareError = '';
-
-  // Form validation errors
-  formErrors: ValidationErrors = {};
-  formValidated = false;
-
   // Searching
   filterText = '';
 
@@ -197,10 +159,9 @@ export class DayExpensesListComponent implements OnInit, AfterViewInit, OnDestro
     private router: Router,
     private datePipe: DatePipe,
     private translate: TranslateService,
-    private toastService: ToastService,
     private dateRangeService: DateRangeService,
     private tooltipService: TooltipService,
-    private formValidationService: FormValidationService,
+    private modalService: ModalService,
     public tourService: TourService
   ) {}
 
@@ -221,10 +182,6 @@ export class DayExpensesListComponent implements OnInit, AfterViewInit, OnDestro
         }
       }
 
-      if (this.modalFlatpickrInstance) {
-        this.dateRangeService.updateLocale(this.modalFlatpickrInstance, event.lang, false);
-      }
-
       // Re-initialize tour with new language
       this.initializeTour();
     });
@@ -282,11 +239,7 @@ export class DayExpensesListComponent implements OnInit, AfterViewInit, OnDestro
     })
   }
 
-  modalInstance: any;
-  currentModalContent: 'add' | 'edit' | 'delete' | 'share' = 'add';
-  modalTitle: string = '';
-
-  openModal(type: 'add' | 'edit' | 'delete' | 'share', id: string) {
+  openModal(type: 'add' | 'edit' | 'delete' | 'share', id: string = '') {
     // End tour if it's running
     if (this.tourService.getStatus() !== 0) {
       this.tourService.end();
@@ -294,62 +247,83 @@ export class DayExpensesListComponent implements OnInit, AfterViewInit, OnDestro
       setTimeout(() => window.scrollTo({ top: 0, behavior: 'smooth' }), 100);
     }
 
-    this.currentModalContent = type;
-    this.modalTitle = this.translate.instant(`EXPENSES.MODAL.${type.toUpperCase()}_TITLE`);
-
-    const modalElement = document.getElementById('staticBackdrop');
-    if (!modalElement) return;
-
-    // Clear form fields for 'add' modal, populate from list for others
     if (type === 'add') {
-      this.clearFormData();
-    } else if (id !== undefined) {
-      const expense = this.expensesList.find(e => e.id === id);
-      if (expense) {
-        this.id = expense.id;
-        this.date = (new Date(expense.date)).toISOString().substring(0, 10);
-        this.location = expense.location;
-        this.participants = expense.participants.join(', ');
-        this.totalSum = expense.totalSum;
-      }
+      this.modalService.open(
+        DayExpensesAddFormComponent,
+        this.translate.instant('EXPENSES.MODAL.ADD_TITLE'),
+        {
+          currentLocale: this.currentLocale,
+          onSuccess: () => { /* No callback needed as navigation happens in component */ }
+        },
+        'md'
+      );
+      return;
     }
 
-    if (!this.modalInstance) {
-      this.modalInstance = new bootstrap.Modal(modalElement, {
-        backdrop: 'static',
-        keyboard: false
-      });
-    }
+    const expense = this.expensesList.find(e => e.id === id);
+    if (!expense) return;
 
-    this.formErrors = {};
-    this.shareError = '';
-    this.formValidated = false;
+    if (type === 'edit') {
+      this.modalService.open(
+        DayExpensesEditFormComponent,
+        this.translate.instant('EXPENSES.MODAL.EDIT_TITLE'),
+        {
+          currentLocale: this.currentLocale,
+          id: expense.id,
+          date: (new Date(expense.date)).toISOString().substring(0, 10),
+          location: expense.location,
+          participants: expense.participants.join(', '),
+          totalSum: expense.totalSum,
+          onSuccess: () => this.refreshExpenses()
+        },
+        'md'
+      );
+      return;
+    }
 
-    this.modalInstance.show();
+    if (type === 'delete') {
+      this.modalService.open(
+        DayExpensesDeleteFormComponent,
+        this.translate.instant('EXPENSES.MODAL.DELETE_TITLE'),
+        {
+          currentLocale: this.currentLocale,
+          id: expense.id,
+          date: (new Date(expense.date)).toISOString().substring(0, 10),
+          location: expense.location,
+          participants: expense.participants.join(', '),
+          totalSum: expense.totalSum,
+          onSuccess: () => this.refreshExpenses()
+        },
+        'md'
+      );
+      return;
+    }
 
-    const readonly = type === 'delete' || type === 'share';
-    setTimeout(() => this.initModalFlatpickr(readonly), 0);
+    if (type === 'share') {
+      this.modalService.open(
+        DayExpensesShareFormComponent,
+        this.translate.instant('EXPENSES.MODAL.SHARE_TITLE'),
+        {
+          currentLocale: this.currentLocale,
+          id: expense.id,
+          date: (new Date(expense.date)).toISOString().substring(0, 10),
+          location: expense.location,
+          participants: expense.participants.join(', '),
+          totalSum: expense.totalSum,
+          onSuccess: () => this.refreshExpenses()
+        },
+        'md'
+      );
+      return;
+    }
   }
 
-  private clearFormData(): void {
-    this.date = '';
-    this.location = '';
-    this.participants = '';
-    this.totalSum = 0;
-    this.newUserWithAccess = '';
-    this.formErrors = {};
-    this.formValidated = false;
-    this.shareError = '';
+  refreshExpenses(): void {
+    this.loadExpenses();
+    this.tooltipService.destroy();
+    setTimeout(() => this.tooltipService.initialize(), 100);
   }
 
-  hideModal() {
-    if (this.modalInstance) {
-      this.destroyModalFlatpickr();
-      this.modalInstance.hide();
-      this.clearFormData();
-    }
-  }  
-
   // Filtering
   filterCriteria: string = 'Location';
   isLoading = false;
@@ -481,166 +455,6 @@ export class DayExpensesListComponent implements OnInit, AfterViewInit, OnDestro
   }
 
   // Data modification
-  private setDateInputValidation(state: 'valid' | 'invalid' | 'none') {
-    const altInput = this.modalFlatpickrInstance?.altInput;
-    if (!altInput) return;
-
-    altInput.classList.toggle('is-valid', state === 'valid');
-    altInput.classList.toggle('is-invalid', state === 'invalid');
-  }
-
-  private validateDayExpensesForm(): boolean {
-    this.formErrors = this.formValidationService.validateDayExpensesForm(this.date, this.participants);
-    this.formValidated = true;
-
-    // Update date input validation styling
-    if (!this.date) {
-      this.setDateInputValidation('invalid');
-    } else {
-      this.setDateInputValidation('valid');
-    }
-
-    return !this.formValidationService.hasErrors(this.formErrors);
-  }
-
-  createDayExpenses() {
-    if (!this.validateDayExpensesForm()) return;
-    this.formValidated = true;
-
-    let participantsList = this.participants.split(',').map(p => p.trim())
-
-    this.expensesService.createDayExpenses(this.date, this.location, participantsList).subscribe({
-      next: (createdDay) => {
-        this.hideModal();
-        this.toastService.success(
-          this.translate.instant('EXPENSES.TOAST.SUCCESS'),
-          this.translate.instant('EXPENSES.TOAST.CREATE_SUCCESS'));
-        this.router.navigate(['day-expenses-details', createdDay.id]);
-      },
-      error: error => {
-        this.formErrors = parseValidationErrors(error);
-        this.formValidated = true;
-        if (Object.keys(this.formErrors).length === 0 || this.formErrors['general']) {
-          const errorMessage = this.formErrors['general'] || error?.error?.message || error?.message || this.translate.instant('EXPENSES.TOAST.CREATE_ERROR');
-          this.toastService.error(
-            this.translate.instant('EXPENSES.TOAST.ERROR'),
-            this.translateBackendError(errorMessage));
-        }
-      }
-    })
-  }
-
-  editDayExpenses() {
-    if (!this.validateDayExpensesForm()) return;
-    this.formValidated = true;
-
-    let participantsList = this.participants.split(',').map(p => p.trim())
-
-    this.expensesService.editDayExpenses(this.id, this.date, this.location, participantsList).subscribe({
-      next: (updatedDay) => {
-        // Update the item in the local list
-        const index = this.expensesList.findIndex(e => e.id === this.id);
-        if (index !== -1) {
-          this.expensesList[index] = updatedDay;
-        }
-
-        this.hideModal();
-        this.toastService.success(
-          this.translate.instant('EXPENSES.TOAST.SUCCESS'),
-          this.translate.instant('EXPENSES.TOAST.EDIT_SUCCESS'));
-
-        // Re-initialize tooltips after data updates
-        setTimeout(() => this.tooltipService.initialize(), 0);
-      },
-      error: error => {
-        this.formErrors = parseValidationErrors(error);
-        this.formValidated = true;
-        if (Object.keys(this.formErrors).length === 0 || this.formErrors['general']) {
-          const errorMessage = this.formErrors['general'] || error?.error?.message || error?.message || this.translate.instant('EXPENSES.TOAST.EDIT_ERROR');
-          this.toastService.error(
-            this.translate.instant('EXPENSES.TOAST.ERROR'),
-            this.translateBackendError(errorMessage));
-        }
-      }
-    })
-  }
-
-  deleteDayExpenses() {
-    this.expensesService.deleteDayExpenses(this.id).subscribe({
-      next: () => {
-        // Remove the item from the local list
-        const index = this.expensesList.findIndex(e => e.id === this.id);
-        if (index !== -1) {
-          this.expensesList.splice(index, 1);
-        }
-
-        // If the current page is now empty and we're not on page 1, go to previous page
-        if (this.expensesList.length === 0 && this.currentPage > 1) {
-          this.currentPage--;
-          this.loadExpenses();
-        } else if (this.expensesList.length === 0) {
-          // If we're on page 1 and it's empty, clear filters to show "no data" view
-          this.filterText = '';
-          this.fromDate = '';
-          this.toDate = '';
-          this.currentPage = 1;
-          this.totalPages = 0;
-        }
-
-        this.hideModal();
-        this.toastService.success(
-          this.translate.instant('EXPENSES.TOAST.SUCCESS'),
-          this.translate.instant('EXPENSES.TOAST.DELETE_SUCCESS'));
-      },
-      error: error =>
-        {
-          console.log(error);
-          const errorMessage = error?.error?.message || error?.message || this.translate.instant('EXPENSES.TOAST.DELETE_ERROR');
-          this.toastService.error(
-            this.translate.instant('EXPENSES.TOAST.ERROR'),
-            this.translateBackendError(errorMessage));
-        }
-    })
-  }
-
-  shareDayExpenses() {
-    this.formErrors = this.formValidationService.validateShareForm(this.newUserWithAccess);
-    this.shareError = '';
-    this.formValidated = true;
-
-    if (this.formValidationService.hasErrors(this.formErrors)) {
-      return;
-    }
-
-    this.expensesService.shareDayExpenses(this.id, this.newUserWithAccess).subscribe({
-      next: (data) => {
-        if (data.isSuccess) {
-          this.hideModal();
-          this.loadExpenses();
-          this.shareIsSuccess = false;
-          this.toastService.success(
-            this.translate.instant('EXPENSES.TOAST.SUCCESS'),
-            this.translate.instant('EXPENSES.TOAST.SHARE_SUCCESS'));
-        }
-        else {
-          this.shareIsSuccess = data.isSuccess;
-          this.shareError = this.translateBackendError(data.error);
-          this.formErrors['newUserWithAccess'] = this.shareError;
-        }
-      },
-      error: error => {
-        this.formErrors = parseValidationErrors(error);
-        this.formValidated = true;
-        if (Object.keys(this.formErrors).length === 0 || this.formErrors['general']) {
-          const errorMessage = this.formErrors['general'] || error?.error?.message || error?.message || this.translate.instant('EXPENSES.BACKEND_ERRORS.UNKNOWN_ERROR');
-          this.toastService.error(
-            this.translate.instant('EXPENSES.TOAST.ERROR'),
-            this.translateBackendError(errorMessage));
-        }
-      }
-    })
-  }
-
   openDetails(id: string) {
     // Hide all tooltips before navigating
     const tooltips = document.querySelectorAll('[data-bs-toggle="tooltip"]');
diff --git a/src/ExpensesCalculator.UI/src/app/items/item-list/item-list.component.html b/src/ExpensesCalculator.UI/src/app/items/item-list/item-list.component.html
index 8cf5f43..d91e4fd 100644
--- a/src/ExpensesCalculator.UI/src/app/items/item-list/item-list.component.html
+++ b/src/ExpensesCalculator.UI/src/app/items/item-list/item-list.component.html
@@ -142,7 +142,8 @@ <h3>{{ 'ITEMS.NO_SEARCH_RESULTS' | translate }}</h3>
                                         <i class="bi bi-box-seam"></i>
                                         {{ item.name || '-' }}
                                     </h5>
-                                    <div class="d-flex gap-1" (click)="$event.stopPropagation()">
+                                    <!-- Desktop buttons (top-right) -->
+                                    <div class="d-none d-md-flex gap-1" (click)="$event.stopPropagation()">
                                         <button class="btn btn-outline-primary text-white btn-action-edit" type="button"
                                             (click)="openModal('edit', item.id)"
                                             style="padding: 0; font-size: 0.85rem; width: 1.5rem; height: 1.5rem; line-height: 1; display: flex; align-items: center; justify-content: center;">
@@ -190,6 +191,18 @@ <h3>{{ 'ITEMS.NO_SEARCH_RESULTS' | translate }}</h3>
                                     style="min-height: 10px; font-size: 0.9rem; color: rgba(255, 255, 255, 0.5);">
                                     {{ 'ITEMS.NO_TAGS' | translate }}
                                 </div>
+
+                                <!-- Mobile buttons (below tags) -->
+                                <div class="d-flex d-md-none gap-2 mt-2" (click)="$event.stopPropagation()">
+                                    <button class="btn btn-sm btn-outline-primary text-white flex-fill" type="button"
+                                        (click)="openModal('edit', item.id)">
+                                        <i class="bi bi-pencil me-1"></i>{{ 'ITEMS.MODAL.SAVE' | translate }}
+                                    </button>
+                                    <button class="btn btn-sm btn-outline-danger text-white flex-fill" type="button"
+                                        (click)="openModal('delete', item.id)">
+                                        <i class="bi bi-trash me-1"></i>{{ 'ITEMS.MODAL.DELETE' | translate }}
+                                    </button>
+                                </div>
                             </div>
                         </div>
                     </div>
@@ -227,369 +240,4 @@ <h3>{{ 'ITEMS.NO_SEARCH_RESULTS' | translate }}</h3>
             </div>
         </div>
     </div>
-</div>
-
-<!-- Modal Window -->
-<app-modal-window [modalId]="'itemsModal-' + checkId" [modalTitle]="modalTitle"
-    [currentModalContent]="currentModalContent" [modalSize]="'lg'">
-    <div class="modal-header py-2 bg-dark text-white border-secondary">
-        <h5 class="modal-title">{{ modalTitle }}</h5>
-        <button type="button" class="btn-close btn-close-white" (click)="hideModal()" aria-label="Close"></button>
-    </div>
-    <div class="modal-body bg-dark text-white" style="overflow: visible;">
-        <!-- Add Form -->
-        <form *ngIf="currentModalContent === 'add'">
-            <div class="form-group mb-2">
-                <div class="d-flex justify-content-between align-items-center">
-                    <label class="control-label mb-0"><i class="bi bi-box-seam me-1"></i>{{ 'ITEMS.MODAL.NAME' |
-                        translate }}<span class="text-danger">*</span></label>
-                    <small class="text-white" style="font-size: 0.75rem;">{{ name.length }}/20</small>
-                </div>
-                <input [(ngModel)]="name" name="name" class="form-control" [class.is-invalid]="formErrors['name']"
-                    [class.is-valid]="formValidated && !formErrors['name'] && name.trim()" maxlength="20" required />
-                <div class="invalid-feedback" *ngIf="formErrors['name']">{{ formErrors['name'] }}</div>
-            </div>
-            <div class="form-group mb-2">
-                <div class="d-flex justify-content-between align-items-center">
-                    <label class="control-label mb-0"><i class="bi bi-chat-text me-1"></i>{{ 'ITEMS.MODAL.COMMENT' |
-                        translate }}</label>
-                    <small class="text-white" style="font-size: 0.75rem;">{{ comment.length }}/120</small>
-                </div>
-                <textarea [(ngModel)]="comment" name="comment" class="form-control" rows="3" maxlength="120"
-                    style="resize: none;"></textarea>
-            </div>
-            <div class="row mb-2">
-                <div class="col-6 col-md-3">
-                    <div class="form-group">
-                        <i class="bi bi-currency-dollar mx-1"></i>
-                        <label class="control-label">{{ 'ITEMS.MODAL.PRICE' | translate }}<span
-                                class="text-danger">*</span></label>
-                        <input type="number" [(ngModel)]="price" name="price" class="form-control" step="0.01" min="0"
-                            [class.is-invalid]="formErrors['price']"
-                            [class.is-valid]="formValidated && !formErrors['price'] && price > 0" required />
-                        <div class="invalid-feedback" *ngIf="formErrors['price']">{{ formErrors['price'] }}</div>
-                    </div>
-                </div>
-                <div class="col-6 col-md-3">
-                    <div class="form-group">
-                        <i class="bi bi-grid-fill mx-1"></i>
-                        <label class="control-label">{{ 'ITEMS.MODAL.AMOUNT' | translate }}<span
-                                class="text-danger">*</span></label>
-                        <input type="number" [(ngModel)]="amount" name="amount" class="form-control" min="1"
-                            [class.is-invalid]="formErrors['amount']"
-                            [class.is-valid]="formValidated && !formErrors['amount'] && amount > 0" required />
-                        <div class="invalid-feedback" *ngIf="formErrors['amount']">{{ formErrors['amount'] }}</div>
-                    </div>
-                </div>
-                <div class="col-12 col-md-6">
-                    <div class="form-group">
-                        <i class="bi bi-star-fill mx-1"></i>
-                        <label class="control-label mb-0">{{ 'ITEMS.MODAL.RATING' | translate }}<span
-                                class="text-danger">*</span></label>
-                        <div class="d-flex align-items-center" style="padding-top: 0.3rem;">
-                            <div class="star-rating d-flex justify-content-between"
-                                style="flex: 1; margin-right: 0.5rem;">
-                                <i *ngFor="let star of [1,2,3,4,5,6,7,8,9,10]"
-                                    [class]="star <= (hoverRating || rating) ? 'bi bi-star-fill' : 'bi bi-star'"
-                                    (mouseenter)="hoverRating = star" (mouseleave)="hoverRating = 0"
-                                    (click)="setRating(star)"
-                                    style="cursor: pointer; font-size: 1.2rem; color: #ffc107;"></i>
-                            </div>
-                            <span class="text-white text-nowrap"
-                                style="min-width: 50px; text-align: right; display: inline-block;">{{ (hoverRating ||
-                                rating) }}/10</span>
-                        </div>
-                        <div class="invalid-feedback d-block" *ngIf="formErrors['rating']">{{ formErrors['rating'] }}
-                        </div>
-                    </div>
-                </div>
-            </div>
-            <div class="row mb-3">
-                <div class="col-6">
-                    <div class="form-group">
-                        <div class="d-flex justify-content-between align-items-center">
-                            <label class="control-label fw-normal mb-0"><i class="bi bi-tags me-1"></i>{{
-                                'ITEMS.MODAL.TAGS' | translate }}</label>
-                            <small class="text-white" style="font-size: 0.75rem;">{{ tags.length }}/5</small>
-                        </div>
-                        <div class="input-group border-secondary mb-2">
-                            <input [(ngModel)]="tagInput" name="tagInput" class="form-control"
-                                [placeholder]="'ITEMS.MODAL.TAG_PLACEHOLDER' | translate" [disabled]="tags.length >= 5"
-                                maxlength="15" (keydown.enter)="addTag(); $event.preventDefault()" />
-                            <button type="button" class="btn bg-white text-dark border border-dark" (click)="addTag()"
-                                [disabled]="tags.length >= 5">
-                                <i class="bi bi-plus"></i>
-                            </button>
-                        </div>
-                        <div class="mt-1"
-                            style="max-height: 75px; overflow-x: auto; overflow-y: hidden; white-space: nowrap;"
-                            *ngIf="tags.length > 0">
-                            <span *ngFor="let tag of tags"
-                                class="badge border border-light text-white fw-normal me-2 mb-1"
-                                style="font-size: 0.85rem; display: inline-block;">
-                                #{{ tag }}
-                                <i class="bi bi-x ms-1" style="cursor: pointer;" (click)="removeTag(tag)"></i>
-                            </span>
-                        </div>
-                    </div>
-                </div>
-                <div class="col-6">
-                    <div class="form-group">
-                        <i class="bi bi-people-fill mx-1"></i>
-                        <label class="control-label">{{ 'ITEMS.MODAL.USERS' | translate }}<span
-                                class="text-danger">*</span></label>
-                        <div class="dropdown w-100" style="position: relative;">
-                            <button class="form-control dropdown-toggle text-start"
-                                [class.is-invalid]="formErrors['users']"
-                                [class.is-valid]="formValidated && !formErrors['users'] && selectedUsers.length > 0"
-                                type="button" data-bs-toggle="dropdown" data-bs-auto-close="outside"
-                                aria-expanded="false">
-                                {{ selectedUsers.length > 0 ? selectedUsers.join(', ') : ('ITEMS.MODAL.SELECT_USERS' |
-                                translate) }}
-                            </button>
-                            <ul class="dropdown-menu w-100"
-                                style="max-height: 150px; overflow-y: auto;">
-                                <li>
-                                    <label class="dropdown-item fw-bold">
-                                        <input type="checkbox" [checked]="isAllUsersSelected()"
-                                            (change)="toggleAllUsers($event)" class="form-check-input me-2">
-                                        {{ 'ITEMS.MODAL.ALL_USERS' | translate }}
-                                    </label>
-                                </li>
-                                <li>
-                                    <hr class="dropdown-divider">
-                                </li>
-                                <li *ngFor="let user of users">
-                                    <label class="dropdown-item">
-                                        <input type="checkbox" [value]="user" [checked]="selectedUsers.includes(user)"
-                                            (change)="onUserSelectionChange(user, $event)"
-                                            class="form-check-input me-2">
-                                        {{ user }}
-                                    </label>
-                                </li>
-                            </ul>
-                        </div>
-                        <div class="invalid-feedback d-block" *ngIf="formErrors['users']">{{ formErrors['users'] }}
-                        </div>
-                    </div>
-                </div>
-            </div>
-            <button type="button" class="btn btn-success" (click)="createItem()">
-                <i class="bi bi-plus-circle me-1"></i>{{ 'ITEMS.MODAL.ADD' | translate }}
-            </button>
-        </form>
-
-        <!-- Edit Form -->
-        <form *ngIf="currentModalContent === 'edit'">
-            <div class="form-group mb-2">
-                <div class="d-flex justify-content-between align-items-center">
-                    <label class="control-label mb-0"><i class="bi bi-box-seam me-1"></i>{{ 'ITEMS.MODAL.NAME' |
-                        translate }}<span class="text-danger">*</span></label>
-                    <small class="text-white" style="font-size: 0.75rem;">{{ name.length }}/20</small>
-                </div>
-                <input [(ngModel)]="name" name="name" class="form-control" [class.is-invalid]="formErrors['name']"
-                    [class.is-valid]="formValidated && !formErrors['name'] && name.trim()" maxlength="20" required />
-                <div class="invalid-feedback" *ngIf="formErrors['name']">{{ formErrors['name'] }}</div>
-            </div>
-            <div class="form-group mb-2">
-                <div class="d-flex justify-content-between align-items-center">
-                    <label class="control-label mb-0"><i class="bi bi-chat-text me-1"></i>{{ 'ITEMS.MODAL.COMMENT' |
-                        translate }}</label>
-                    <small class="text-white" style="font-size: 0.75rem;">{{ comment.length }}/120</small>
-                </div>
-                <textarea [(ngModel)]="comment" name="comment" class="form-control" rows="3" maxlength="120"
-                    style="resize: none;"></textarea>
-            </div>
-            <div class="row mb-2">
-                <div class="col-6 col-md-3">
-                    <div class="form-group">
-                        <i class="bi bi-currency-dollar mx-1"></i>
-                        <label class="control-label">{{ 'ITEMS.MODAL.PRICE' | translate }}<span
-                                class="text-danger">*</span></label>
-                        <input type="number" [(ngModel)]="price" name="price" class="form-control" step="0.01" min="0"
-                            [class.is-invalid]="formErrors['price']"
-                            [class.is-valid]="formValidated && !formErrors['price'] && price > 0" required />
-                        <div class="invalid-feedback" *ngIf="formErrors['price']">{{ formErrors['price'] }}</div>
-                    </div>
-                </div>
-                <div class="col-6 col-md-3">
-                    <div class="form-group">
-                        <i class="bi bi-grid-fill mx-1"></i>
-                        <label class="control-label">{{ 'ITEMS.MODAL.AMOUNT' | translate }}<span
-                                class="text-danger">*</span></label>
-                        <input type="number" [(ngModel)]="amount" name="amount" class="form-control" min="1"
-                            [class.is-invalid]="formErrors['amount']"
-                            [class.is-valid]="formValidated && !formErrors['amount'] && amount > 0" required />
-                        <div class="invalid-feedback" *ngIf="formErrors['amount']">{{ formErrors['amount'] }}</div>
-                    </div>
-                </div>
-                <div class="col-12 col-md-6">
-                    <div class="form-group">
-                        <i class="bi bi-star-fill mx-1"></i>
-                        <label class="control-label mb-0">{{ 'ITEMS.MODAL.RATING' | translate }}<span
-                                class="text-danger">*</span></label>
-                        <div class="d-flex align-items-center" style="padding-top: 0.3rem;">
-                            <div class="star-rating d-flex justify-content-between"
-                                style="flex: 1; margin-right: 0.5rem;">
-                                <i *ngFor="let star of [1,2,3,4,5,6,7,8,9,10]"
-                                    [class]="star <= (hoverRating || rating) ? 'bi bi-star-fill' : 'bi bi-star'"
-                                    (mouseenter)="hoverRating = star" (mouseleave)="hoverRating = 0"
-                                    (click)="setRating(star)"
-                                    style="cursor: pointer; font-size: 1.2rem; color: #ffc107;"></i>
-                            </div>
-                            <span class="text-white text-nowrap"
-                                style="min-width: 50px; text-align: right; display: inline-block;">{{ rating
-                                }}/10</span>
-                        </div>
-                    </div>
-                </div>
-            </div>
-            <div class="row mb-3">
-                <div class="col-6">
-                    <div class="form-group">
-                        <div class="d-flex justify-content-between align-items-center">
-                            <label class="control-label fw-normal mb-0"><i class="bi bi-tags me-1"></i>{{
-                                'ITEMS.MODAL.TAGS' | translate }}</label>
-                            <small class="text-white" style="font-size: 0.75rem;">{{ tags.length }}/5</small>
-                        </div>
-                        <div class="input-group">
-                            <input [(ngModel)]="tagInput" name="tagInput" class="form-control"
-                                [placeholder]="'ITEMS.MODAL.TAG_PLACEHOLDER' | translate" [disabled]="tags.length >= 5"
-                                maxlength="15" (keydown.enter)="addTag(); $event.preventDefault()" />
-                            <button type="button" class="btn bg-white text-dark border border-dark" (click)="addTag()"
-                                [disabled]="tags.length >= 5">
-                                <i class="bi bi-plus"></i>
-                            </button>
-                        </div>
-                        <div class="mt-1"
-                            style="max-height: 75px; overflow-x: auto; overflow-y: hidden; white-space: nowrap;"
-                            *ngIf="tags.length > 0">
-                            <span *ngFor="let tag of tags"
-                                class="badge border border-light text-white fw-normal me-2 mb-1"
-                                style="font-size: 0.85rem; display: inline-block;">
-                                #{{ tag }}
-                                <i class="bi bi-x ms-1" style="cursor: pointer;" (click)="removeTag(tag)"></i>
-                            </span>
-                        </div>
-                    </div>
-                </div>
-                <div class="col-6">
-                    <div class="form-group">
-                        <i class="bi bi-people-fill mx-1"></i>
-                        <label class="control-label">{{ 'ITEMS.MODAL.USERS' | translate }}<span
-                                class="text-danger">*</span></label>
-                        <div class="dropdown w-100" style="position: relative;">
-                            <button class="form-control dropdown-toggle text-start"
-                                [class.is-invalid]="formErrors['users']"
-                                [class.is-valid]="formValidated && !formErrors['users'] && selectedUsers.length > 0"
-                                type="button" data-bs-toggle="dropdown" data-bs-auto-close="outside"
-                                aria-expanded="false">
-                                {{ selectedUsers.length > 0 ? selectedUsers.join(', ') : ('ITEMS.MODAL.SELECT_USERS' |
-                                translate) }}
-                            </button>
-                            <ul class="dropdown-menu w-100"
-                                style="max-height: 150px; overflow-y: auto;">
-                                <li>
-                                    <label class="dropdown-item fw-bold">
-                                        <input type="checkbox" [checked]="isAllUsersSelected()"
-                                            (change)="toggleAllUsers($event)" class="form-check-input me-2">
-                                        {{ 'ITEMS.MODAL.ALL_USERS' | translate }}
-                                    </label>
-                                </li>
-                                <li>
-                                    <hr class="dropdown-divider">
-                                </li>
-                                <li *ngFor="let user of users">
-                                    <label class="dropdown-item">
-                                        <input type="checkbox" [value]="user" [checked]="selectedUsers.includes(user)"
-                                            (change)="onUserSelectionChange(user, $event)"
-                                            class="form-check-input me-2">
-                                        {{ user }}
-                                    </label>
-                                </li>
-                            </ul>
-                        </div>
-                        <div class="invalid-feedback d-block" *ngIf="formErrors['users']">{{ formErrors['users'] }}
-                        </div>
-                    </div>
-                </div>
-            </div>
-            <button type="button" class="btn btn-warning" (click)="editItem()">
-                <i class="bi bi-pencil me-1"></i>{{ 'ITEMS.MODAL.SAVE' | translate }}
-            </button>
-        </form>
-
-        <!-- Delete Confirmation -->
-        <div *ngIf="currentModalContent === 'delete'">
-            <div class="form-group mb-3">
-                <i class="bi bi-box-seam mx-1"></i>
-                <label class="control-label">{{ 'ITEMS.MODAL.NAME' | translate }}</label>
-                <input [value]="name" class="form-control" disabled />
-            </div>
-            <div class="form-group mb-3">
-                <i class="bi bi-chat-text mx-1"></i>
-                <label class="control-label">{{ 'ITEMS.MODAL.COMMENT' | translate }}</label>
-                <textarea [value]="comment" class="form-control" rows="3" disabled></textarea>
-            </div>
-            <div class="row mb-3">
-                <div class="col-6 col-md-3">
-                    <div class="form-group">
-                        <i class="bi bi-currency-dollar mx-1"></i>
-                        <label class="control-label">{{ 'ITEMS.MODAL.PRICE' | translate }}</label>
-                        <input type="number" [value]="price" class="form-control" disabled />
-                    </div>
-                </div>
-                <div class="col-6 col-md-3">
-                    <div class="form-group">
-                        <i class="bi bi-grid-fill mx-1"></i>
-                        <label class="control-label">{{ 'ITEMS.MODAL.AMOUNT' | translate }}</label>
-                        <input type="number" [value]="amount" class="form-control" disabled />
-                    </div>
-                </div>
-                <div class="col-12 col-md-6">
-                    <div class="form-group">
-                        <i class="bi bi-star-fill mx-1"></i>
-                        <label class="control-label mb-0">{{ 'ITEMS.MODAL.RATING' | translate }}</label>
-                        <div class="d-flex align-items-center" style="padding-top: 0.3rem;">
-                            <div class="star-rating d-flex justify-content-between"
-                                style="flex: 1; margin-right: 0.5rem;">
-                                <i *ngFor="let star of [1,2,3,4,5,6,7,8,9,10]"
-                                    [class]="star <= rating ? 'bi bi-star-fill' : 'bi bi-star'"
-                                    style="font-size: 1.2rem; color: #ffc107;"></i>
-                            </div>
-                            <span class="text-white text-nowrap"
-                                style="min-width: 50px; text-align: right; display: inline-block;">{{ rating
-                                }}/10</span>
-                        </div>
-                    </div>
-                </div>
-            </div>
-            <div class="row mb-3">
-                <div class="col-6" *ngIf="tags.length > 0">
-                    <div class="form-group">
-                        <i class="bi bi-tags mx-1"></i>
-                        <label class="control-label fw-normal">{{ 'ITEMS.MODAL.TAGS' | translate }}</label>
-                        <div class="mt-2">
-                            <span *ngFor="let tag of tags"
-                                class="badge border border-secondary text-secondary fw-normal me-2 mb-2"
-                                style="font-size: 0.9rem;">
-                                #{{ tag }}
-                            </span>
-                        </div>
-                    </div>
-                </div>
-                <div [ngClass]="tags.length > 0 ? 'col-6' : 'col-12'">
-                    <div class="form-group">
-                        <i class="bi bi-people-fill mx-1"></i>
-                        <label class="control-label">{{ 'ITEMS.MODAL.USERS' | translate }}</label>
-                        <input [value]="selectedUsers.join(', ')" class="form-control" disabled />
-                    </div>
-                </div>
-            </div>
-            <button type="button" class="btn btn-danger" (click)="deleteItem()">
-                <i class="bi bi-trash me-1"></i>{{ 'ITEMS.MODAL.DELETE' | translate }}
-            </button>
-        </div>
-
-    </div>
-</app-modal-window>
\ No newline at end of file
+</div>
\ No newline at end of file
diff --git a/src/ExpensesCalculator.UI/src/app/items/item-list/item-list.component.ts b/src/ExpensesCalculator.UI/src/app/items/item-list/item-list.component.ts
index ea3cd56..d14ba05 100644
--- a/src/ExpensesCalculator.UI/src/app/items/item-list/item-list.component.ts
+++ b/src/ExpensesCalculator.UI/src/app/items/item-list/item-list.component.ts
@@ -1,26 +1,23 @@
-import { Component, Input, Output, EventEmitter, OnInit, OnChanges, OnDestroy, AfterViewInit, SimpleChanges, inject } from '@angular/core';
+import { Component, Input, Output, EventEmitter, OnInit, OnChanges, OnDestroy, AfterViewInit, SimpleChanges } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { FormsModule } from '@angular/forms';
 import { TranslatePipe, TranslateService } from '@ngx-translate/core';
-import { ModalWindowComponent } from '../../shared/modal-window/modal-window.component';
 import { SortBarComponent, SortOption } from '../../shared/sort-bar/sort-bar.component';
 import { FilterBarComponent, FilterOption } from '../../shared/filter-bar/filter-bar.component';
-import { ValidationErrors, parseValidationErrors } from '../../shared/models/validation-errors.model';
-import { ItemsService, Item, ItemResponse, DeleteItemResponse } from '../../services/items.service';
-import { DayExpensesTotalSumUpdateService } from '../../services/day-expenses-total-sum-update.service';
-import { ToastService } from '../../services/toast.service';
+import { ItemsService, Item } from '../../services/items.service';
+import { ModalService } from '../../services/modal.service';
 import { TooltipService } from '../../services/tooltip.service';
-import { FormValidationService } from '../../services/form-validation.service';
 import { Subject, Subscription } from 'rxjs';
 import { debounceTime, distinctUntilChanged } from 'rxjs/operators';
 import { TourAnchorNgBootstrapDirective } from 'ngx-ui-tour-ng-bootstrap';
-
-declare var bootstrap: any;
+import { ItemAddFormComponent } from '../../modals/item-form/item-add-form/item-add-form.component';
+import { ItemEditFormComponent } from '../../modals/item-form/item-edit-form/item-edit-form.component';
+import { ItemDeleteFormComponent } from '../../modals/item-form/item-delete-form/item-delete-form.component';
 
 @Component({
   selector: 'app-item-list',
   standalone: true,
-  imports: [CommonModule, FormsModule, ModalWindowComponent, SortBarComponent, FilterBarComponent, TranslatePipe, TourAnchorNgBootstrapDirective],
+  imports: [CommonModule, FormsModule, SortBarComponent, FilterBarComponent, TranslatePipe, TourAnchorNgBootstrapDirective],
   templateUrl: './item-list.component.html',
   styleUrl: './item-list.component.css'
 })
@@ -48,27 +45,6 @@ export class ItemListComponent implements OnInit, OnChanges, OnDestroy, AfterVie
   itemsPerPage = 8;
   totalPages = 1;
 
-  // Modal properties
-  modalInstance: any;
-  currentModalContent: 'add' | 'edit' | 'delete' = 'add';
-  modalTitle: string = '';
-
-  // Form properties
-  id = '';
-  name = '';
-  comment = '';
-  price = 0;
-  amount = 1;
-  rating = 0;
-  hoverRating = 0;
-  tags: string[] = [];
-  tagInput = '';
-  selectedUsers: string[] = [];
-
-  // Validation properties
-  formErrors: ValidationErrors = {};
-  formValidated = false;
-
   // Filter and sort properties
   filterText = '';
   filterCriteria: string = 'Name';
@@ -104,15 +80,11 @@ export class ItemListComponent implements OnInit, OnChanges, OnDestroy, AfterVie
   private filterTextSubject = new Subject<string>();
   private filterTextSubscription!: Subscription;
 
-  // Inject services using inject() for better SSR compatibility
-  private dayExpensesTotalSumUpdateService = inject(DayExpensesTotalSumUpdateService);
-
   constructor(
     private itemsService: ItemsService,
     private translate: TranslateService,
-    private toastService: ToastService,
-    private tooltipService: TooltipService,
-    private formValidationService: FormValidationService
+    private modalService: ModalService,
+    private tooltipService: TooltipService
   ) {}
 
   ngOnInit(): void {
@@ -207,19 +179,6 @@ export class ItemListComponent implements OnInit, OnChanges, OnDestroy, AfterVie
     });
   }
 
-  loadSingleItem(id: string): void {
-    const item = this.itemsList.find(i => i.id === id);
-    if (item) {
-      this.id = item.id;
-      this.name = item.name;
-      this.comment = item.comment || '';
-      this.price = item.price;
-      this.amount = item.amount;
-      this.rating = item.rating;
-      this.tags = [...item.tags];
-      this.selectedUsers = [...item.users];
-    }
-  }
 
   // Local filtering and sorting methods
   onFilterChange(filterText: string): void {
@@ -423,244 +382,112 @@ export class ItemListComponent implements OnInit, OnChanges, OnDestroy, AfterVie
 
   // Modal management methods
   openModal(type: 'add' | 'edit' | 'delete', id: string = ''): void {
-    this.currentModalContent = type;
-    this.modalTitle = this.translate.instant(`ITEMS.MODAL.${type.toUpperCase()}_TITLE`);
-
-    const modalElement = document.getElementById('itemsModal-' + this.checkId);
-    if (!modalElement) return;
-
     if (type === 'add') {
-      this.clearFormData();
-    } else if (id) {
-      this.loadSingleItem(id);
+      this.modalService.open(
+        ItemAddFormComponent,
+        this.translate.instant('ITEMS.MODAL.ADD_TITLE'),
+        {
+          users: this.users,
+          checkId: this.checkId,
+          dayExpensesId: this.dayExpensesId,
+          onSuccess: (checkId: string, newSum: number, dayExpensesTotalSum: number) =>
+            this.onItemCreated(checkId, newSum, dayExpensesTotalSum)
+        },
+        'lg'
+      );
+      return;
     }
 
-    if (!this.modalInstance) {
-      this.modalInstance = new bootstrap.Modal(modalElement, {
-        backdrop: 'static',
-        keyboard: false
-      });
+    if (type === 'edit') {
+      const item = this.itemsList.find(i => i.id === id);
+      if (!item) return;
+
+      this.modalService.open(
+        ItemEditFormComponent,
+        this.translate.instant('ITEMS.MODAL.EDIT_TITLE'),
+        {
+          users: this.users,
+          checkId: this.checkId,
+          dayExpensesId: this.dayExpensesId,
+          itemId: item.id,
+          name: item.name,
+          comment: item.comment || '',
+          price: item.price,
+          amount: item.amount,
+          rating: item.rating,
+          tags: [...item.tags],
+          selectedUsers: [...item.users],
+          onSuccess: (checkId: string, newSum: number, dayExpensesTotalSum: number) =>
+            this.onItemUpdated(checkId, newSum, dayExpensesTotalSum)
+        },
+        'lg'
+      );
+      return;
     }
 
-    this.formErrors = {};
-    this.formValidated = false;
-
-    this.modalInstance.show();
-  }
-
-  hideModal(): void {
-    if (this.modalInstance) {
-      this.modalInstance.hide();
-      this.formErrors = {};
-      this.formValidated = false;
-      this.clearFormData();
+    if (type === 'delete') {
+      const item = this.itemsList.find(i => i.id === id);
+      if (!item) return;
+
+      this.modalService.open(
+        ItemDeleteFormComponent,
+        this.translate.instant('ITEMS.MODAL.DELETE_TITLE'),
+        {
+          checkId: this.checkId,
+          dayExpensesId: this.dayExpensesId,
+          itemId: item.id,
+          name: item.name,
+          comment: item.comment || '',
+          price: item.price,
+          amount: item.amount,
+          rating: item.rating,
+          tags: [...item.tags],
+          selectedUsers: [...item.users],
+          onSuccess: (checkId: string, newSum: number, dayExpensesTotalSum: number) =>
+            this.onItemDeleted(checkId, newSum, dayExpensesTotalSum)
+        },
+        'lg'
+      );
+      return;
     }
   }
 
-  clearFormData(): void {
-    this.id = '';
-    this.name = '';
-    this.comment = '';
-    this.price = 0;
-    this.amount = 1;
-    this.rating = 0;
-    this.hoverRating = 0;
-    this.tags = [];
-    this.tagInput = '';
-    this.selectedUsers = [];
-  }
-
-  // Rating methods
-  setRating(rating: number): void {
-    this.rating = rating;
-  }
+  onItemCreated(checkId: string, newSum: number, _dayExpensesTotalSum: number): void {
+    // Emit check sum update
+    this.checkSumUpdated.emit({ checkId: checkId, newSum: newSum });
 
-  // User selection methods
-  onUserSelectionChange(user: string, event: any): void {
-    if (event.target.checked) {
-      if (!this.selectedUsers.includes(user)) {
-        this.selectedUsers.push(user);
-      }
+    // If items are provided from parent, emit event; otherwise reload
+    if (this.items !== undefined) {
+      this.itemsChanged.emit(this.checkId);
     } else {
-      const index = this.selectedUsers.indexOf(user);
-      if (index > -1) {
-        this.selectedUsers.splice(index, 1);
-      }
+      this.loadItems();
     }
   }
 
-  isAllUsersSelected(): boolean {
-    return this.users.length > 0 && this.selectedUsers.length === this.users.length;
-  }
+  onItemUpdated(checkId: string, newSum: number, _dayExpensesTotalSum: number): void {
+    // Emit check sum update
+    this.checkSumUpdated.emit({ checkId: checkId, newSum: newSum });
 
-  toggleAllUsers(event: any): void {
-    if (event.target.checked) {
-      // Select all users
-      this.selectedUsers = [...this.users];
+    // If items are provided from parent, emit event; otherwise reload
+    if (this.items !== undefined) {
+      this.itemsChanged.emit(this.checkId);
     } else {
-      // Deselect all users
-      this.selectedUsers = [];
+      this.loadItems();
     }
   }
 
-  // Tag management methods
-  addTag(): void {
-    const trimmedTag = this.tagInput.trim().replace(/\s+/g, '_').toLowerCase();
-    if (trimmedTag && !this.tags.includes(trimmedTag)) {
-      this.tags.push(trimmedTag);
-      this.tagInput = '';
-    }
-  }
+  onItemDeleted(checkId: string, newSum: number, _dayExpensesTotalSum: number): void {
+    // Emit check sum update
+    this.checkSumUpdated.emit({ checkId: checkId, newSum: newSum });
 
-  removeTag(tag: string): void {
-    const index = this.tags.indexOf(tag);
-    if (index > -1) {
-      this.tags.splice(index, 1);
+    // If items are provided from parent, emit event; otherwise reload
+    if (this.items !== undefined) {
+      this.itemsChanged.emit(this.checkId);
+    } else {
+      this.loadItems();
     }
   }
 
-  // CRUD operations
-  validateItemForm(): boolean {
-    this.formErrors = this.formValidationService.validateItemForm(
-      this.name,
-      this.price,
-      this.amount,
-      this.rating,
-      this.selectedUsers
-    );
-    this.formValidated = true;
-
-    return !this.formValidationService.hasErrors(this.formErrors);
-  }
-
-  createItem(): void {
-    if (!this.validateItemForm()) return;
-    this.formValidated = true;
-
-    const newItem: Item = {
-      id: '00000000-0000-0000-0000-000000000000',
-      name: this.name,
-      comment: this.comment,
-      price: this.price,
-      amount: this.amount,
-      rating: this.rating,
-      tags: this.tags,
-      users: this.selectedUsers,
-      checkId: this.checkId
-    };
-
-    this.itemsService.createItem(newItem).subscribe({
-      next: (response: ItemResponse) => {
-        this.hideModal();
-        // Emit check sum update
-        this.checkSumUpdated.emit({ checkId: this.checkId, newSum: response.checkTotalSum });
-        // If items are provided from parent, emit event; otherwise reload
-        if (this.items !== undefined) {
-          this.itemsChanged.emit(this.checkId);
-        } else {
-          this.loadItems();
-        }
-        this.dayExpensesTotalSumUpdateService.emitDayExpensesTotalSumUpdate(this.dayExpensesId, response.dayExpensesTotalSum);
-        this.toastService.success(
-          this.translate.instant('ITEMS.TOAST.SUCCESS'),
-          this.translate.instant('ITEMS.TOAST.CREATE_SUCCESS')
-        );
-      },
-      error: error => {
-        this.formErrors = parseValidationErrors(error);
-        this.formValidated = true;
-        if (Object.keys(this.formErrors).length === 0 || this.formErrors['general']) {
-          const errorMessage = this.formErrors['general'] || error?.error?.message || error?.message || this.translate.instant('ITEMS.TOAST.CREATE_ERROR');
-          this.toastService.error(
-            this.translate.instant('ITEMS.TOAST.ERROR'),
-            this.translateBackendError(errorMessage)
-          );
-        }
-      }
-    });
-  }
-
-  editItem(): void {
-    if (!this.validateItemForm()) return;
-    this.formValidated = true;
-
-    const updatedItem: Item = {
-      id: this.id,
-      name: this.name,
-      comment: this.comment,
-      price: this.price,
-      amount: this.amount,
-      rating: this.rating,
-      tags: this.tags,
-      users: this.selectedUsers,
-      checkId: this.checkId
-    };
-
-    this.itemsService.editItem(updatedItem).subscribe({
-      next: (response: ItemResponse) => {
-        this.hideModal();
-        // Emit check sum update
-        this.checkSumUpdated.emit({ checkId: this.checkId, newSum: response.checkTotalSum });
-        // If items are provided from parent, emit event; otherwise reload
-        if (this.items !== undefined) {
-          this.itemsChanged.emit(this.checkId);
-        } else {
-          this.loadItems();
-        }
-        this.dayExpensesTotalSumUpdateService.emitDayExpensesTotalSumUpdate(this.dayExpensesId, response.dayExpensesTotalSum);
-        this.toastService.success(
-          this.translate.instant('ITEMS.TOAST.SUCCESS'),
-          this.translate.instant('ITEMS.TOAST.EDIT_SUCCESS')
-        );
-      },
-      error: error => {
-        this.formErrors = parseValidationErrors(error);
-        this.formValidated = true;
-        if (Object.keys(this.formErrors).length === 0 || this.formErrors['general']) {
-          const errorMessage = this.formErrors['general'] || error?.error?.message || error?.message || this.translate.instant('ITEMS.TOAST.EDIT_ERROR');
-          this.toastService.error(
-            this.translate.instant('ITEMS.TOAST.ERROR'),
-            this.translateBackendError(errorMessage)
-          );
-        }
-      }
-    });
-  }
-
-  deleteItem(): void {
-    this.itemsService.deleteItem(this.id).subscribe({
-      next: (response: DeleteItemResponse) => {
-        // Remove the item from the local list
-        const index = this.itemsList.findIndex(i => i.id === this.id);
-        if (index !== -1) {
-          this.itemsList.splice(index, 1);
-          this.applyLocalFiltering();
-        }
-
-        this.hideModal();
-        // Emit check sum update
-        this.checkSumUpdated.emit({ checkId: this.checkId, newSum: response.checkTotalSum });
-        // If items are provided from parent, emit event
-        if (this.items !== undefined) {
-          this.itemsChanged.emit(this.checkId);
-        }
-        this.dayExpensesTotalSumUpdateService.emitDayExpensesTotalSumUpdate(this.dayExpensesId, response.dayExpensesTotalSum);
-        this.toastService.success(
-          this.translate.instant('ITEMS.TOAST.SUCCESS'),
-          this.translate.instant('ITEMS.TOAST.DELETE_SUCCESS')
-        );
-      },
-      error: error => {
-        console.log(error);
-        const errorMessage = error?.error?.message || error?.message || this.translate.instant('ITEMS.TOAST.DELETE_ERROR');
-        this.toastService.error(
-          this.translate.instant('ITEMS.TOAST.ERROR'),
-          this.translateBackendError(errorMessage)
-        );
-      }
-    });
-  }
-
   // Helper methods
   translateBackendError(errorMessage: string): string {
     if (!errorMessage) return '';
diff --git a/src/ExpensesCalculator.UI/src/app/modals/check-form/check-add-form.component.html b/src/ExpensesCalculator.UI/src/app/modals/check-form/check-add-form.component.html
new file mode 100644
index 0000000..d5a82c6
--- /dev/null
+++ b/src/ExpensesCalculator.UI/src/app/modals/check-form/check-add-form.component.html
@@ -0,0 +1,43 @@
+<form>
+    <div class="form-group mb-3">
+        <div class="d-flex justify-content-between align-items-center">
+            <label class="control-label mb-0">
+                <i class="bi bi-cart me-1"></i>{{ 'CHECKS.MODAL.LOCATION_LABEL' | translate }}<span class="text-danger">*</span>
+            </label>
+            <small class="text-white" style="font-size: 0.75rem;">{{ location.length }}/25</small>
+        </div>
+        <input [(ngModel)]="location" name="location" class="form-control"
+            [class.is-invalid]="formErrors['location']"
+            [class.is-valid]="formValidated && !formErrors['location'] && location.trim()"
+            maxlength="25" required />
+        <div class="invalid-feedback" *ngIf="formErrors['location']">{{ formErrors['location'] }}</div>
+    </div>
+
+    <div class="form-group mb-3">
+        <i class="bi bi-wallet2 mx-1"></i>
+        <label class="control-label">{{ 'CHECKS.MODAL.PAYER_LABEL' | translate }}<span class="text-danger">*</span></label>
+        <div class="dropdown w-100">
+            <button class="btn form-control text-start d-flex justify-content-between align-items-center bg-white bg-md-transparent text-dark text-md-white"
+                    [class.is-invalid]="formErrors['payer']"
+                    [class.is-valid]="formValidated && !formErrors['payer'] && payer"
+                    type="button"
+                    data-bs-toggle="dropdown"
+                    aria-expanded="false">
+                <span>{{ payer || ('CHECKS.MODAL.SELECT_PAYER' | translate) }}</span>
+                <i class="bi bi-chevron-down"></i>
+            </button>
+            <ul class="dropdown-menu w-100">
+                <li *ngFor="let participant of participants">
+                    <a class="dropdown-item" href="javascript:void(0)" (click)="payer = participant">
+                        {{ participant }}
+                    </a>
+                </li>
+            </ul>
+        </div>
+        <div class="invalid-feedback d-block" *ngIf="formErrors['payer']">{{ formErrors['payer'] }}</div>
+    </div>
+
+    <button type="button" class="btn btn-success" (click)="submit()">
+        <i class="bi bi-plus-circle me-1"></i>{{ 'CHECKS.MODAL.ADD_BUTTON' | translate }}
+    </button>
+</form>
diff --git a/src/ExpensesCalculator.UI/src/app/modals/check-form/check-add-form.component.ts b/src/ExpensesCalculator.UI/src/app/modals/check-form/check-add-form.component.ts
new file mode 100644
index 0000000..d0f7a94
--- /dev/null
+++ b/src/ExpensesCalculator.UI/src/app/modals/check-form/check-add-form.component.ts
@@ -0,0 +1,95 @@
+import { Component } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FormsModule } from '@angular/forms';
+import { TranslatePipe, TranslateService } from '@ngx-translate/core';
+import { ModalService } from '../../services/modal.service';
+import { ChecksService } from '../../services/checks.service';
+import { ToastService } from '../../services/toast.service';
+import { parseValidationErrors } from '../../shared/models/validation-errors.model';
+
+@Component({
+  selector: 'app-check-add-form',
+  standalone: true,
+  imports: [CommonModule, FormsModule, TranslatePipe],
+  templateUrl: './check-add-form.component.html'
+})
+export class CheckAddFormComponent {
+  // Injected by modal service
+  modalService!: ModalService;
+
+  // Data passed from parent component
+  participants: string[] = [];
+  dayExpensesId: string = '';
+
+  // Form fields
+  location: string = '';
+  payer: string = '';
+
+  // Form validation
+  formErrors: { [key: string]: string } = {};
+  formValidated: boolean = false;
+
+  // Callback functions passed from parent
+  onSuccess?: () => void;
+
+  constructor(
+    private translate: TranslateService,
+    private checksService: ChecksService,
+    private toastService: ToastService
+  ) {}
+
+  validateForm(): boolean {
+    this.formErrors = {};
+
+    if (!this.location.trim()) {
+      this.formErrors['location'] = this.translate.instant('CHECKS.MODAL.LOCATION_REQUIRED');
+    }
+
+    if (!this.payer) {
+      this.formErrors['payer'] = this.translate.instant('CHECKS.MODAL.PAYER_REQUIRED');
+    }
+
+    return Object.keys(this.formErrors).length === 0;
+  }
+
+  submit(): void {
+    if (!this.validateForm()) {
+      this.formValidated = true;
+      return;
+    }
+
+    this.formValidated = true;
+
+    this.checksService.createCheck(this.location, this.payer, this.dayExpensesId).subscribe({
+      next: (createdCheck) => {
+        this.modalService.close();
+        this.toastService.success(
+          this.translate.instant('CHECKS.TOAST.SUCCESS'),
+          this.translate.instant('CHECKS.TOAST.CREATE_SUCCESS')
+        );
+
+        // Call success callback to refresh the list
+        if (this.onSuccess) {
+          this.onSuccess();
+        }
+      },
+      error: error => {
+        this.formErrors = parseValidationErrors(error);
+        this.formValidated = true;
+        if (Object.keys(this.formErrors).length === 0 || this.formErrors['general']) {
+          const errorMessage = this.formErrors['general'] || error?.error?.message || error?.message || this.translate.instant('CHECKS.TOAST.CREATE_ERROR');
+          this.toastService.error(
+            this.translate.instant('CHECKS.TOAST.ERROR'),
+            this.translateBackendError(errorMessage)
+          );
+        }
+      }
+    });
+  }
+
+  translateBackendError(error: string): string {
+    const errorKey = `BACKEND_ERRORS.${error.toUpperCase().replace(/\s+/g, '_')}`;
+    const translated = this.translate.instant(errorKey);
+    return translated !== errorKey ? translated : error;
+  }
+}
diff --git a/src/ExpensesCalculator.UI/src/app/modals/check-form/check-delete-form.component.html b/src/ExpensesCalculator.UI/src/app/modals/check-form/check-delete-form.component.html
new file mode 100644
index 0000000..1e76725
--- /dev/null
+++ b/src/ExpensesCalculator.UI/src/app/modals/check-form/check-delete-form.component.html
@@ -0,0 +1,20 @@
+<form>
+    <div class="form-group mb-3">
+        <i class="bi bi-cart mx-1"></i>
+        <label class="control-label">{{ 'CHECKS.MODAL.LOCATION_LABEL' | translate }}</label>
+        <input [value]="location" name="location" class="form-control" disabled readonly />
+    </div>
+    <div class="form-group mb-3">
+        <i class="bi bi-wallet2 mx-1"></i>
+        <label class="control-label">{{ 'CHECKS.MODAL.PAYER_LABEL' | translate }}</label>
+        <input [value]="payer" name="payer" class="form-control" disabled readonly />
+    </div>
+    <div class="form-group mb-3">
+        <i class="bi bi-cash-stack mx-1"></i>
+        <label class="control-label">{{ 'CHECKS.MODAL.SUM_LABEL' | translate }}</label>
+        <input [value]="totalSum | currency:'UAH':'₴'" class="form-control" disabled readonly />
+    </div>
+    <button type="button" class="btn btn-danger" (click)="submit()">
+        <i class="bi bi-trash me-1"></i>{{ 'CHECKS.MODAL.DELETE_BUTTON' | translate }}
+    </button>
+</form>
diff --git a/src/ExpensesCalculator.UI/src/app/modals/check-form/check-delete-form.component.ts b/src/ExpensesCalculator.UI/src/app/modals/check-form/check-delete-form.component.ts
new file mode 100644
index 0000000..d67290e
--- /dev/null
+++ b/src/ExpensesCalculator.UI/src/app/modals/check-form/check-delete-form.component.ts
@@ -0,0 +1,72 @@
+import { Component, inject } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { TranslatePipe, TranslateService } from '@ngx-translate/core';
+import { ModalService } from '../../services/modal.service';
+import { ChecksService, DeleteCheckResponse } from '../../services/checks.service';
+import { ToastService } from '../../services/toast.service';
+import { DayExpensesTotalSumUpdateService } from '../../services/day-expenses-total-sum-update.service';
+
+@Component({
+  selector: 'app-check-delete-form',
+  standalone: true,
+  imports: [CommonModule, TranslatePipe],
+  templateUrl: './check-delete-form.component.html'
+})
+export class CheckDeleteFormComponent {
+  // Injected by modal service
+  modalService!: ModalService;
+
+  // Data passed from parent component
+  checkId: string = '';
+  dayExpensesId: string = '';
+  location: string = '';
+  payer: string = '';
+  totalSum: number = 0;
+
+  // Callback functions passed from parent
+  onSuccess?: () => void;
+
+  private dayExpensesTotalSumUpdateService = inject(DayExpensesTotalSumUpdateService);
+
+  constructor(
+    private translate: TranslateService,
+    private checksService: ChecksService,
+    private toastService: ToastService
+  ) {}
+
+  submit(): void {
+    this.checksService.deleteCheck(this.checkId).subscribe({
+      next: (response: DeleteCheckResponse) => {
+        this.modalService.close();
+        this.toastService.success(
+          this.translate.instant('CHECKS.TOAST.SUCCESS'),
+          this.translate.instant('CHECKS.TOAST.DELETE_SUCCESS')
+        );
+
+        // Emit day expenses total sum update
+        this.dayExpensesTotalSumUpdateService.emitDayExpensesTotalSumUpdate(
+          this.dayExpensesId,
+          response.dayExpensesTotalSum
+        );
+
+        // Call success callback to refresh the list
+        if (this.onSuccess) {
+          this.onSuccess();
+        }
+      },
+      error: error => {
+        const errorMessage = error?.error?.message || error?.message || this.translate.instant('CHECKS.TOAST.DELETE_ERROR');
+        this.toastService.error(
+          this.translate.instant('CHECKS.TOAST.ERROR'),
+          this.translateBackendError(errorMessage)
+        );
+      }
+    });
+  }
+
+  translateBackendError(error: string): string {
+    const errorKey = `BACKEND_ERRORS.${error.toUpperCase().replace(/\s+/g, '_')}`;
+    const translated = this.translate.instant(errorKey);
+    return translated !== errorKey ? translated : error;
+  }
+}
diff --git a/src/ExpensesCalculator.UI/src/app/modals/check-form/check-edit-form.component.html b/src/ExpensesCalculator.UI/src/app/modals/check-form/check-edit-form.component.html
new file mode 100644
index 0000000..1cf7678
--- /dev/null
+++ b/src/ExpensesCalculator.UI/src/app/modals/check-form/check-edit-form.component.html
@@ -0,0 +1,43 @@
+<form>
+    <div class="form-group mb-3">
+        <div class="d-flex justify-content-between align-items-center">
+            <label class="control-label mb-0">
+                <i class="bi bi-cart me-1"></i>{{ 'CHECKS.MODAL.LOCATION_LABEL' | translate }}<span class="text-danger">*</span>
+            </label>
+            <small class="text-white" style="font-size: 0.75rem;">{{ location.length }}/25</small>
+        </div>
+        <input [(ngModel)]="location" name="location" class="form-control"
+            [class.is-invalid]="formErrors['location']"
+            [class.is-valid]="formValidated && !formErrors['location'] && location.trim()"
+            maxlength="25" required />
+        <div class="invalid-feedback" *ngIf="formErrors['location']">{{ formErrors['location'] }}</div>
+    </div>
+
+    <div class="form-group mb-3">
+        <i class="bi bi-wallet2 mx-1"></i>
+        <label class="control-label">{{ 'CHECKS.MODAL.PAYER_LABEL' | translate }}<span class="text-danger">*</span></label>
+        <div class="dropdown w-100">
+            <button class="btn form-control text-start d-flex justify-content-between align-items-center bg-white bg-md-transparent text-dark text-md-white"
+                    [class.is-invalid]="formErrors['payer']"
+                    [class.is-valid]="formValidated && !formErrors['payer'] && payer"
+                    type="button"
+                    data-bs-toggle="dropdown"
+                    aria-expanded="false">
+                <span>{{ payer || ('CHECKS.MODAL.SELECT_PAYER' | translate) }}</span>
+                <i class="bi bi-chevron-down"></i>
+            </button>
+            <ul class="dropdown-menu w-100">
+                <li *ngFor="let participant of participants">
+                    <a class="dropdown-item" href="javascript:void(0)" (click)="payer = participant">
+                        {{ participant }}
+                    </a>
+                </li>
+            </ul>
+        </div>
+        <div class="invalid-feedback d-block" *ngIf="formErrors['payer']">{{ formErrors['payer'] }}</div>
+    </div>
+
+    <button type="button" class="btn btn-warning" (click)="submit()">
+        <i class="bi bi-pencil me-1"></i>{{ 'CHECKS.MODAL.EDIT_BUTTON' | translate }}
+    </button>
+</form>
diff --git a/src/ExpensesCalculator.UI/src/app/modals/check-form/check-edit-form.component.ts b/src/ExpensesCalculator.UI/src/app/modals/check-form/check-edit-form.component.ts
new file mode 100644
index 0000000..4cc4e02
--- /dev/null
+++ b/src/ExpensesCalculator.UI/src/app/modals/check-form/check-edit-form.component.ts
@@ -0,0 +1,95 @@
+import { Component } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FormsModule } from '@angular/forms';
+import { TranslatePipe, TranslateService } from '@ngx-translate/core';
+import { ModalService } from '../../services/modal.service';
+import { ChecksService } from '../../services/checks.service';
+import { ToastService } from '../../services/toast.service';
+import { parseValidationErrors } from '../../shared/models/validation-errors.model';
+
+@Component({
+  selector: 'app-check-edit-form',
+  standalone: true,
+  imports: [CommonModule, FormsModule, TranslatePipe],
+  templateUrl: './check-edit-form.component.html'
+})
+export class CheckEditFormComponent {
+  // Injected by modal service
+  modalService!: ModalService;
+
+  // Data passed from parent component
+  participants: string[] = [];
+  checkId: string = '';
+
+  // Form fields
+  location: string = '';
+  payer: string = '';
+
+  // Form validation
+  formErrors: { [key: string]: string } = {};
+  formValidated: boolean = false;
+
+  // Callback functions passed from parent
+  onSuccess?: () => void;
+
+  constructor(
+    private translate: TranslateService,
+    private checksService: ChecksService,
+    private toastService: ToastService
+  ) {}
+
+  validateForm(): boolean {
+    this.formErrors = {};
+
+    if (!this.location.trim()) {
+      this.formErrors['location'] = this.translate.instant('CHECKS.MODAL.LOCATION_REQUIRED');
+    }
+
+    if (!this.payer) {
+      this.formErrors['payer'] = this.translate.instant('CHECKS.MODAL.PAYER_REQUIRED');
+    }
+
+    return Object.keys(this.formErrors).length === 0;
+  }
+
+  submit(): void {
+    if (!this.validateForm()) {
+      this.formValidated = true;
+      return;
+    }
+
+    this.formValidated = true;
+
+    this.checksService.editCheck(this.checkId, this.location, this.payer).subscribe({
+      next: (updatedCheck) => {
+        this.modalService.close();
+        this.toastService.success(
+          this.translate.instant('CHECKS.TOAST.SUCCESS'),
+          this.translate.instant('CHECKS.TOAST.EDIT_SUCCESS')
+        );
+
+        // Call success callback to refresh the list
+        if (this.onSuccess) {
+          this.onSuccess();
+        }
+      },
+      error: error => {
+        this.formErrors = parseValidationErrors(error);
+        this.formValidated = true;
+        if (Object.keys(this.formErrors).length === 0 || this.formErrors['general']) {
+          const errorMessage = this.formErrors['general'] || error?.error?.message || error?.message || this.translate.instant('CHECKS.TOAST.EDIT_ERROR');
+          this.toastService.error(
+            this.translate.instant('CHECKS.TOAST.ERROR'),
+            this.translateBackendError(errorMessage)
+          );
+        }
+      }
+    });
+  }
+
+  translateBackendError(error: string): string {
+    const errorKey = `BACKEND_ERRORS.${error.toUpperCase().replace(/\s+/g, '_')}`;
+    const translated = this.translate.instant(errorKey);
+    return translated !== errorKey ? translated : error;
+  }
+}
diff --git a/src/ExpensesCalculator.UI/src/app/modals/day-expenses-form/day-expenses-add-form.component.html b/src/ExpensesCalculator.UI/src/app/modals/day-expenses-form/day-expenses-add-form.component.html
new file mode 100644
index 0000000..2d20ea7
--- /dev/null
+++ b/src/ExpensesCalculator.UI/src/app/modals/day-expenses-form/day-expenses-add-form.component.html
@@ -0,0 +1,29 @@
+<form>
+    <div class="form-group mb-3">
+        <i class="bi bi-calendar-event-fill mx-1"></i>
+        <label class="control-label">{{ 'EXPENSES.MODAL.DATE_LABEL' | translate }}<span class="text-danger">*</span></label>
+        <input [value]="date | date:'EEE, MMM dd, yyyy':'':currentLocale | titlecase" name="date" type="text" class="form-control" [class.is-invalid]="formErrors['date']" [class.is-valid]="formValidated && !formErrors['date'] && date" id="modalDateInput" required readonly/>
+        <div class="invalid-feedback d-block" *ngIf="formErrors['date']">{{ formErrors['date'] }}</div>
+    </div>
+    <div class="form-group mb-3">
+        <div class="d-flex justify-content-between align-items-center">
+            <label class="control-label mb-0">
+                <i class="bi bi-geo-alt-fill me-1"></i>{{ 'EXPENSES.MODAL.LOCATION_LABEL' | translate }}
+            </label>
+            <small class="text-white" style="font-size: 0.75rem;">{{ location.length }}/25</small>
+        </div>
+        <input [(ngModel)]="location" name="location" class="form-control" [class.is-invalid]="formErrors['location']" [class.is-valid]="formValidated && !formErrors['location']" maxlength="25" id="location" />
+        <div class="invalid-feedback" *ngIf="formErrors['location']">{{ formErrors['location'] }}</div>
+    </div>
+    <div class="form-group mb-3">
+        <i class="bi bi-people-fill mx-1"></i>
+        <label class="control-label">{{ 'EXPENSES.MODAL.PARTICIPANTS_LABEL' | translate }}<span class="text-danger">*</span></label>
+        <input [(ngModel)]="participants" name="participants" class="form-control" [class.is-invalid]="formErrors['participants']" id="participants" [placeholder]="'EXPENSES.MODAL.PARTICIPANTS_PLACEHOLDER' | translate" required />
+        <label class="form-text text-white small mt-0 pt-0"><span class="text-danger">*</span>
+            {{ 'EXPENSES.MODAL.PARTICIPANTS_HINT' | translate }}</label>
+        <div class="invalid-feedback" *ngIf="formErrors['participants']">{{ formErrors['participants'] }}</div>
+    </div>
+    <button type="button" value="Create" class="btn btn-success" (click)="submit()">
+        <i class="bi bi-plus-circle me-1"></i>{{ 'EXPENSES.MODAL.ADD_BUTTON' | translate }}
+    </button>
+</form>
diff --git a/src/ExpensesCalculator.UI/src/app/modals/day-expenses-form/day-expenses-add-form.component.ts b/src/ExpensesCalculator.UI/src/app/modals/day-expenses-form/day-expenses-add-form.component.ts
new file mode 100644
index 0000000..dbf1f6a
--- /dev/null
+++ b/src/ExpensesCalculator.UI/src/app/modals/day-expenses-form/day-expenses-add-form.component.ts
@@ -0,0 +1,122 @@
+import { Component, OnDestroy } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FormsModule } from '@angular/forms';
+import { TranslatePipe, TranslateService } from '@ngx-translate/core';
+import { Router } from '@angular/router';
+import { ModalService } from '../../services/modal.service';
+import { ExpensesService } from '../../services/expenses.service';
+import { ToastService } from '../../services/toast.service';
+import { FormValidationService } from '../../services/form-validation.service';
+import { DateRangeService } from '../../services/date-range.service';
+import { parseValidationErrors } from '../../shared/models/validation-errors.model';
+
+@Component({
+  selector: 'app-day-expenses-add-form',
+  standalone: true,
+  imports: [CommonModule, FormsModule, TranslatePipe],
+  templateUrl: './day-expenses-add-form.component.html'
+})
+export class DayExpensesAddFormComponent implements OnDestroy {
+  // Injected by modal service
+  modalService!: ModalService;
+
+  // Data passed from parent component
+  currentLocale: string = 'en';
+
+  // Form fields
+  date: string = '';
+  location: string = '';
+  participants: string = '';
+
+  // Form validation
+  formErrors: { [key: string]: string } = {};
+  formValidated: boolean = false;
+
+  // Flatpickr instance
+  private modalFlatpickrInstance: any;
+
+  // Callback functions passed from parent
+  onSuccess?: () => void;
+
+  constructor(
+    private translate: TranslateService,
+    private expensesService: ExpensesService,
+    private toastService: ToastService,
+    private formValidationService: FormValidationService,
+    private dateRangeService: DateRangeService,
+    private router: Router
+  ) {
+    // Initialize flatpickr after a short delay to ensure DOM is ready
+    setTimeout(() => this.initModalFlatpickr(), 0);
+  }
+
+  ngOnDestroy(): void {
+    this.destroyModalFlatpickr();
+  }
+
+  initModalFlatpickr() {
+    this.destroyModalFlatpickr();
+
+    this.modalFlatpickrInstance = this.dateRangeService.initializeSingleDatePicker(
+      'modalDateInput',
+      {
+        defaultDate: this.date || undefined,
+        onChange: (dates: Date[]) => {
+          this.date = this.dateRangeService.formatDate(dates[0]);
+        }
+      }
+    );
+  }
+
+  destroyModalFlatpickr() {
+    this.dateRangeService.destroy(this.modalFlatpickrInstance);
+    this.modalFlatpickrInstance = null;
+  }
+
+  validateForm(): boolean {
+    this.formErrors = {};
+
+    this.formErrors = this.formValidationService.validateDayExpensesForm(this.date, this.participants);
+
+    return !this.formValidationService.hasErrors(this.formErrors);
+  }
+
+  submit(): void {
+    if (!this.validateForm()) {
+      this.formValidated = true;
+      return;
+    }
+
+    this.formValidated = true;
+
+    const participantsList = this.participants.split(',').map(p => p.trim());
+
+    this.expensesService.createDayExpenses(this.date, this.location, participantsList).subscribe({
+      next: (createdDay) => {
+        this.modalService.close();
+        this.toastService.success(
+          this.translate.instant('EXPENSES.TOAST.SUCCESS'),
+          this.translate.instant('EXPENSES.TOAST.CREATE_SUCCESS')
+        );
+        this.router.navigate(['day-expenses-details', createdDay.id]);
+      },
+      error: error => {
+        this.formErrors = parseValidationErrors(error);
+        this.formValidated = true;
+        if (Object.keys(this.formErrors).length === 0 || this.formErrors['general']) {
+          const errorMessage = this.formErrors['general'] || error?.error?.message || error?.message || this.translate.instant('EXPENSES.TOAST.CREATE_ERROR');
+          this.toastService.error(
+            this.translate.instant('EXPENSES.TOAST.ERROR'),
+            this.translateBackendError(errorMessage)
+          );
+        }
+      }
+    });
+  }
+
+  translateBackendError(error: string): string {
+    const errorKey = `BACKEND_ERRORS.${error.toUpperCase().replace(/\s+/g, '_')}`;
+    const translated = this.translate.instant(errorKey);
+    return translated !== errorKey ? translated : error;
+  }
+}
diff --git a/src/ExpensesCalculator.UI/src/app/modals/day-expenses-form/day-expenses-delete-form.component.html b/src/ExpensesCalculator.UI/src/app/modals/day-expenses-form/day-expenses-delete-form.component.html
new file mode 100644
index 0000000..c8ba7c7
--- /dev/null
+++ b/src/ExpensesCalculator.UI/src/app/modals/day-expenses-form/day-expenses-delete-form.component.html
@@ -0,0 +1,25 @@
+<form>
+    <div class="form-group mb-3">
+        <i class="bi bi-calendar-event-fill mx-1"></i>
+        <label class="control-label">{{ 'EXPENSES.MODAL.DATE_LABEL' | translate }}</label>
+        <input [value]="date | date:'EEE, MMM dd, yyyy':'':currentLocale | titlecase" name="date" type="text" class="form-control" id="modalDateInput" disabled readonly />
+    </div>
+    <div class="form-group mb-3">
+        <i class="bi bi-geo-alt-fill mx-1"></i>
+        <label class="control-label">{{ 'EXPENSES.MODAL.LOCATION_LABEL' | translate }}</label>
+        <input [value]="location" name="location" class="form-control" id="location" disabled readonly />
+    </div>
+    <div class="form-group mb-3">
+        <i class="bi bi-people-fill mx-1"></i>
+        <label class="control-label">{{ 'EXPENSES.MODAL.PARTICIPANTS_LABEL' | translate }}</label>
+        <input [value]="participants" name="participants" class="form-control" id="participants" disabled readonly />
+    </div>
+    <div class="form-group mb-3">
+        <i class="bi bi-cash-stack mx-1"></i>
+        <label class="control-label">{{ 'EXPENSES.MODAL.TOTAL_SUM_LABEL' | translate }}</label>
+        <input [value]="totalSum | currency:'UAH':'₴'" class="form-control" disabled readonly />
+    </div>
+    <button type="button" value="Delete" class="btn btn-danger" (click)="submit()">
+        <i class="bi bi-trash me-1"></i>{{ 'EXPENSES.MODAL.DELETE_BUTTON' | translate }}
+    </button>
+</form>
diff --git a/src/ExpensesCalculator.UI/src/app/modals/day-expenses-form/day-expenses-delete-form.component.ts b/src/ExpensesCalculator.UI/src/app/modals/day-expenses-form/day-expenses-delete-form.component.ts
new file mode 100644
index 0000000..ebdb9b0
--- /dev/null
+++ b/src/ExpensesCalculator.UI/src/app/modals/day-expenses-form/day-expenses-delete-form.component.ts
@@ -0,0 +1,94 @@
+import { Component, OnDestroy } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FormsModule } from '@angular/forms';
+import { TranslatePipe, TranslateService } from '@ngx-translate/core';
+import { ModalService } from '../../services/modal.service';
+import { ExpensesService } from '../../services/expenses.service';
+import { ToastService } from '../../services/toast.service';
+import { DateRangeService } from '../../services/date-range.service';
+
+@Component({
+  selector: 'app-day-expenses-delete-form',
+  standalone: true,
+  imports: [CommonModule, FormsModule, TranslatePipe],
+  templateUrl: './day-expenses-delete-form.component.html'
+})
+export class DayExpensesDeleteFormComponent implements OnDestroy {
+  // Injected by modal service
+  modalService!: ModalService;
+
+  // Data passed from parent component
+  currentLocale: string = 'en';
+  id: string = '';
+  date: string = '';
+  location: string = '';
+  participants: string = '';
+  totalSum: number = 0;
+
+  // Flatpickr instance
+  private modalFlatpickrInstance: any;
+
+  // Callback functions passed from parent
+  onSuccess?: () => void;
+
+  constructor(
+    private translate: TranslateService,
+    private expensesService: ExpensesService,
+    private toastService: ToastService,
+    private dateRangeService: DateRangeService
+  ) {
+    // Initialize flatpickr after a short delay to ensure DOM is ready
+    setTimeout(() => this.initModalFlatpickr(), 0);
+  }
+
+  ngOnDestroy(): void {
+    this.destroyModalFlatpickr();
+  }
+
+  initModalFlatpickr() {
+    this.destroyModalFlatpickr();
+
+    this.modalFlatpickrInstance = this.dateRangeService.initializeSingleDatePicker(
+      'modalDateInput',
+      {
+        defaultDate: this.date || undefined,
+        readonly: true
+      }
+    );
+  }
+
+  destroyModalFlatpickr() {
+    this.dateRangeService.destroy(this.modalFlatpickrInstance);
+    this.modalFlatpickrInstance = null;
+  }
+
+  submit(): void {
+    this.expensesService.deleteDayExpenses(this.id).subscribe({
+      next: () => {
+        this.modalService.close();
+        this.toastService.success(
+          this.translate.instant('EXPENSES.TOAST.SUCCESS'),
+          this.translate.instant('EXPENSES.TOAST.DELETE_SUCCESS')
+        );
+
+        // Call success callback
+        if (this.onSuccess) {
+          this.onSuccess();
+        }
+      },
+      error: error => {
+        const errorMessage = error?.error?.message || error?.message || this.translate.instant('EXPENSES.TOAST.DELETE_ERROR');
+        this.toastService.error(
+          this.translate.instant('EXPENSES.TOAST.ERROR'),
+          this.translateBackendError(errorMessage)
+        );
+      }
+    });
+  }
+
+  translateBackendError(error: string): string {
+    const errorKey = `BACKEND_ERRORS.${error.toUpperCase().replace(/\s+/g, '_')}`;
+    const translated = this.translate.instant(errorKey);
+    return translated !== errorKey ? translated : error;
+  }
+}
diff --git a/src/ExpensesCalculator.UI/src/app/modals/day-expenses-form/day-expenses-edit-form.component.html b/src/ExpensesCalculator.UI/src/app/modals/day-expenses-form/day-expenses-edit-form.component.html
new file mode 100644
index 0000000..bb19866
--- /dev/null
+++ b/src/ExpensesCalculator.UI/src/app/modals/day-expenses-form/day-expenses-edit-form.component.html
@@ -0,0 +1,34 @@
+<form>
+    <div class="form-group mb-3">
+        <i class="bi bi-calendar-event-fill mx-1"></i>
+        <label class="control-label">{{ 'EXPENSES.MODAL.DATE_LABEL' | translate }}<span class="text-danger">*</span></label>
+        <input [value]="date | date:'EEE, MMM dd, yyyy':'':currentLocale | titlecase" name="date" type="text" class="form-control" [class.is-invalid]="formErrors['date']" [class.is-valid]="formValidated && !formErrors['date'] && date" id="modalDateInput" required readonly/>
+        <div class="invalid-feedback d-block" *ngIf="formErrors['date']">{{ formErrors['date'] }}</div>
+    </div>
+    <div class="form-group mb-3">
+        <div class="d-flex justify-content-between align-items-center">
+            <label class="control-label mb-0">
+                <i class="bi bi-geo-alt-fill me-1"></i>{{ 'EXPENSES.MODAL.LOCATION_LABEL' | translate }}
+            </label>
+            <small class="text-white" style="font-size: 0.75rem;">{{ location.length }}/25</small>
+        </div>
+        <input [(ngModel)]="location" name="location" class="form-control" [class.is-invalid]="formErrors['location']" [class.is-valid]="formValidated && !formErrors['location']" maxlength="25" id="location" />
+        <div class="invalid-feedback" *ngIf="formErrors['location']">{{ formErrors['location'] }}</div>
+    </div>
+    <div class="form-group mb-3">
+        <i class="bi bi-people-fill mx-1"></i>
+        <label class="control-label">{{ 'EXPENSES.MODAL.PARTICIPANTS_LABEL' | translate }}<span class="text-danger">*</span></label>
+        <input [(ngModel)]="participants" name="participants" class="form-control" [class.is-invalid]="formErrors['participants']" id="participants" [placeholder]="'EXPENSES.MODAL.PARTICIPANTS_PLACEHOLDER' | translate" required />
+        <label class="form-text text-white small mt-0 pt-0"><span class="text-danger">*</span>
+            {{ 'EXPENSES.MODAL.PARTICIPANTS_HINT' | translate }}</label>
+        <div class="invalid-feedback" *ngIf="formErrors['participants']">{{ formErrors['participants'] }}</div>
+    </div>
+    <div class="form-group mb-3">
+        <i class="bi bi-cash-stack mx-1"></i>
+        <label class="control-label">{{ 'EXPENSES.MODAL.TOTAL_SUM_LABEL' | translate }}</label>
+        <input [value]="totalSum | currency:'UAH':'₴'" class="form-control" disabled readonly />
+    </div>
+    <button type="button" value="Edit" class="btn btn-warning" (click)="submit()">
+        <i class="bi bi-pencil me-1"></i>{{ 'EXPENSES.MODAL.EDIT_BUTTON' | translate }}
+    </button>
+</form>
diff --git a/src/ExpensesCalculator.UI/src/app/modals/day-expenses-form/day-expenses-edit-form.component.ts b/src/ExpensesCalculator.UI/src/app/modals/day-expenses-form/day-expenses-edit-form.component.ts
new file mode 100644
index 0000000..978db91
--- /dev/null
+++ b/src/ExpensesCalculator.UI/src/app/modals/day-expenses-form/day-expenses-edit-form.component.ts
@@ -0,0 +1,124 @@
+import { Component, OnDestroy } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FormsModule } from '@angular/forms';
+import { TranslatePipe, TranslateService } from '@ngx-translate/core';
+import { ModalService } from '../../services/modal.service';
+import { ExpensesService } from '../../services/expenses.service';
+import { ToastService } from '../../services/toast.service';
+import { FormValidationService } from '../../services/form-validation.service';
+import { DateRangeService } from '../../services/date-range.service';
+import { parseValidationErrors } from '../../shared/models/validation-errors.model';
+
+@Component({
+  selector: 'app-day-expenses-edit-form',
+  standalone: true,
+  imports: [CommonModule, FormsModule, TranslatePipe],
+  templateUrl: './day-expenses-edit-form.component.html'
+})
+export class DayExpensesEditFormComponent implements OnDestroy {
+  // Injected by modal service
+  modalService!: ModalService;
+
+  // Data passed from parent component
+  currentLocale: string = 'en';
+  id: string = '';
+  date: string = '';
+  location: string = '';
+  participants: string = '';
+  totalSum: number = 0;
+
+  // Form validation
+  formErrors: { [key: string]: string } = {};
+  formValidated: boolean = false;
+
+  // Flatpickr instance
+  private modalFlatpickrInstance: any;
+
+  // Callback functions passed from parent
+  onSuccess?: () => void;
+
+  constructor(
+    private translate: TranslateService,
+    private expensesService: ExpensesService,
+    private toastService: ToastService,
+    private formValidationService: FormValidationService,
+    private dateRangeService: DateRangeService
+  ) {
+    // Initialize flatpickr after a short delay to ensure DOM is ready
+    setTimeout(() => this.initModalFlatpickr(), 0);
+  }
+
+  ngOnDestroy(): void {
+    this.destroyModalFlatpickr();
+  }
+
+  initModalFlatpickr() {
+    this.destroyModalFlatpickr();
+
+    this.modalFlatpickrInstance = this.dateRangeService.initializeSingleDatePicker(
+      'modalDateInput',
+      {
+        defaultDate: this.date || undefined,
+        onChange: (dates: Date[]) => {
+          this.date = this.dateRangeService.formatDate(dates[0]);
+        }
+      }
+    );
+  }
+
+  destroyModalFlatpickr() {
+    this.dateRangeService.destroy(this.modalFlatpickrInstance);
+    this.modalFlatpickrInstance = null;
+  }
+
+  validateForm(): boolean {
+    this.formErrors = {};
+
+    this.formErrors = this.formValidationService.validateDayExpensesForm(this.date, this.participants);
+
+    return !this.formValidationService.hasErrors(this.formErrors);
+  }
+
+  submit(): void {
+    if (!this.validateForm()) {
+      this.formValidated = true;
+      return;
+    }
+
+    this.formValidated = true;
+
+    const participantsList = this.participants.split(',').map(p => p.trim());
+
+    this.expensesService.editDayExpenses(this.id, this.date, this.location, participantsList).subscribe({
+      next: (updatedDay) => {
+        this.modalService.close();
+        this.toastService.success(
+          this.translate.instant('EXPENSES.TOAST.SUCCESS'),
+          this.translate.instant('EXPENSES.TOAST.EDIT_SUCCESS')
+        );
+
+        // Call success callback to refresh the list
+        if (this.onSuccess) {
+          this.onSuccess();
+        }
+      },
+      error: error => {
+        this.formErrors = parseValidationErrors(error);
+        this.formValidated = true;
+        if (Object.keys(this.formErrors).length === 0 || this.formErrors['general']) {
+          const errorMessage = this.formErrors['general'] || error?.error?.message || error?.message || this.translate.instant('EXPENSES.TOAST.EDIT_ERROR');
+          this.toastService.error(
+            this.translate.instant('EXPENSES.TOAST.ERROR'),
+            this.translateBackendError(errorMessage)
+          );
+        }
+      }
+    });
+  }
+
+  translateBackendError(error: string): string {
+    const errorKey = `BACKEND_ERRORS.${error.toUpperCase().replace(/\s+/g, '_')}`;
+    const translated = this.translate.instant(errorKey);
+    return translated !== errorKey ? translated : error;
+  }
+}
diff --git a/src/ExpensesCalculator.UI/src/app/modals/day-expenses-form/day-expenses-share-form.component.html b/src/ExpensesCalculator.UI/src/app/modals/day-expenses-form/day-expenses-share-form.component.html
new file mode 100644
index 0000000..e8a6c1c
--- /dev/null
+++ b/src/ExpensesCalculator.UI/src/app/modals/day-expenses-form/day-expenses-share-form.component.html
@@ -0,0 +1,31 @@
+<form>
+    <div class="form-group mb-3">
+        <i class="bi bi-calendar-event-fill mx-1"></i>
+        <label class="control-label">{{ 'EXPENSES.MODAL.DATE_LABEL' | translate }}</label>
+        <input [value]="date | date:'EEE, MMM dd, yyyy':'':currentLocale | titlecase" name="date" type="text" class="form-control" id="modalDateInput" disabled readonly />
+    </div>
+    <div class="form-group mb-3">
+        <i class="bi bi-geo-alt-fill mx-1"></i>
+        <label class="control-label">{{ 'EXPENSES.MODAL.LOCATION_LABEL' | translate }}</label>
+        <input [value]="location" name="location" class="form-control" id="location" disabled readonly />
+    </div>
+    <div class="form-group mb-3">
+        <i class="bi bi-people-fill mx-1"></i>
+        <label class="control-label">{{ 'EXPENSES.MODAL.PARTICIPANTS_LABEL' | translate }}</label>
+        <input [value]="participants" name="participants" class="form-control" id="participants" disabled readonly />
+    </div>
+    <div class="form-group mb-3">
+        <i class="bi bi-cash-stack mx-1"></i>
+        <label class="control-label">{{ 'EXPENSES.MODAL.TOTAL_SUM_LABEL' | translate }}</label>
+        <input [value]="totalSum | currency:'UAH':'₴'" class="form-control" disabled readonly />
+    </div>
+    <div class="form-group mb-3">
+        <i class="bi bi-person-fill mx-1"></i>
+        <label class="control-label">{{ 'EXPENSES.MODAL.SHARE_USER_LABEL' | translate }}<span class="text-danger">*</span></label>
+        <input [(ngModel)]="newUserWithAccess" name="newUserWithAccess" class="form-control" [class.is-invalid]="formErrors['newUserWithAccess']" [class.is-valid]="formValidated && !formErrors['newUserWithAccess'] && newUserWithAccess.trim()" id="newUserWithAccess" required/>
+        <div class="invalid-feedback" *ngIf="formErrors['newUserWithAccess']">{{ formErrors['newUserWithAccess'] }}</div>
+    </div>
+    <button type="button" value="Share" class="btn btn-primary" (click)="submit()">
+        <i class="bi bi-share me-1"></i>{{ 'EXPENSES.MODAL.SHARE_BUTTON' | translate }}
+    </button>
+</form>
diff --git a/src/ExpensesCalculator.UI/src/app/modals/day-expenses-form/day-expenses-share-form.component.ts b/src/ExpensesCalculator.UI/src/app/modals/day-expenses-form/day-expenses-share-form.component.ts
new file mode 100644
index 0000000..2da9789
--- /dev/null
+++ b/src/ExpensesCalculator.UI/src/app/modals/day-expenses-form/day-expenses-share-form.component.ts
@@ -0,0 +1,123 @@
+import { Component, OnDestroy } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FormsModule } from '@angular/forms';
+import { TranslatePipe, TranslateService } from '@ngx-translate/core';
+import { ModalService } from '../../services/modal.service';
+import { ExpensesService } from '../../services/expenses.service';
+import { ToastService } from '../../services/toast.service';
+import { FormValidationService } from '../../services/form-validation.service';
+import { DateRangeService } from '../../services/date-range.service';
+import { parseValidationErrors } from '../../shared/models/validation-errors.model';
+
+@Component({
+  selector: 'app-day-expenses-share-form',
+  standalone: true,
+  imports: [CommonModule, FormsModule, TranslatePipe],
+  templateUrl: './day-expenses-share-form.component.html'
+})
+export class DayExpensesShareFormComponent implements OnDestroy {
+  // Injected by modal service
+  modalService!: ModalService;
+
+  // Data passed from parent component
+  currentLocale: string = 'en';
+  id: string = '';
+  date: string = '';
+  location: string = '';
+  participants: string = '';
+  totalSum: number = 0;
+
+  // Share functionality
+  newUserWithAccess: string = '';
+  shareError: string = '';
+
+  // Form validation
+  formErrors: { [key: string]: string } = {};
+  formValidated: boolean = false;
+
+  // Flatpickr instance
+  private modalFlatpickrInstance: any;
+
+  // Callback functions passed from parent
+  onSuccess?: () => void;
+
+  constructor(
+    private translate: TranslateService,
+    private expensesService: ExpensesService,
+    private toastService: ToastService,
+    private formValidationService: FormValidationService,
+    private dateRangeService: DateRangeService
+  ) {
+    // Initialize flatpickr after a short delay to ensure DOM is ready
+    setTimeout(() => this.initModalFlatpickr(), 0);
+  }
+
+  ngOnDestroy(): void {
+    this.destroyModalFlatpickr();
+  }
+
+  initModalFlatpickr() {
+    this.destroyModalFlatpickr();
+
+    this.modalFlatpickrInstance = this.dateRangeService.initializeSingleDatePicker(
+      'modalDateInput',
+      {
+        defaultDate: this.date || undefined,
+        readonly: true
+      }
+    );
+  }
+
+  destroyModalFlatpickr() {
+    this.dateRangeService.destroy(this.modalFlatpickrInstance);
+    this.modalFlatpickrInstance = null;
+  }
+
+  submit(): void {
+    this.formErrors = {};
+    this.shareError = '';
+    this.formValidated = true;
+
+    this.formErrors = this.formValidationService.validateShareForm(this.newUserWithAccess);
+    if (this.formValidationService.hasErrors(this.formErrors)) {
+      return;
+    }
+
+    this.expensesService.shareDayExpenses(this.id, this.newUserWithAccess).subscribe({
+      next: (data) => {
+        if (data.isSuccess) {
+          this.modalService.close();
+          this.toastService.success(
+            this.translate.instant('EXPENSES.TOAST.SUCCESS'),
+            this.translate.instant('EXPENSES.TOAST.SHARE_SUCCESS')
+          );
+
+          // Call success callback to refresh data
+          if (this.onSuccess) {
+            this.onSuccess();
+          }
+        } else {
+          this.shareError = this.translateBackendError(data.error);
+          this.formErrors['newUserWithAccess'] = this.shareError;
+        }
+      },
+      error: error => {
+        this.formErrors = parseValidationErrors(error);
+        this.formValidated = true;
+        if (Object.keys(this.formErrors).length === 0 || this.formErrors['general']) {
+          const errorMessage = this.formErrors['general'] || error?.error?.message || error?.message || this.translate.instant('EXPENSES.BACKEND_ERRORS.UNKNOWN_ERROR');
+          this.toastService.error(
+            this.translate.instant('EXPENSES.TOAST.ERROR'),
+            this.translateBackendError(errorMessage)
+          );
+        }
+      }
+    });
+  }
+
+  translateBackendError(error: string): string {
+    const errorKey = `BACKEND_ERRORS.${error.toUpperCase().replace(/\s+/g, '_')}`;
+    const translated = this.translate.instant(errorKey);
+    return translated !== errorKey ? translated : error;
+  }
+}
diff --git a/src/ExpensesCalculator.UI/src/app/modals/item-form/item-add-form/item-add-form.component.html b/src/ExpensesCalculator.UI/src/app/modals/item-form/item-add-form/item-add-form.component.html
new file mode 100644
index 0000000..97f502c
--- /dev/null
+++ b/src/ExpensesCalculator.UI/src/app/modals/item-form/item-add-form/item-add-form.component.html
@@ -0,0 +1,141 @@
+<form>
+    <div class="form-group mb-2">
+        <div class="d-flex justify-content-between align-items-center">
+            <label class="control-label mb-0">
+                <i class="bi bi-box-seam me-1"></i>{{ 'ITEMS.MODAL.NAME' | translate }}<span class="text-danger">*</span>
+            </label>
+            <small class="text-white" style="font-size: 0.75rem;">{{ name.length }}/20</small>
+        </div>
+        <input [(ngModel)]="name" name="name" class="form-control"
+            [class.is-invalid]="formErrors['name']"
+            [class.is-valid]="formValidated && !formErrors['name'] && name.trim()"
+            maxlength="20" required />
+        <div class="invalid-feedback" *ngIf="formErrors['name']">{{ formErrors['name'] }}</div>
+    </div>
+
+    <div class="form-group mb-2">
+        <div class="d-flex justify-content-between align-items-center">
+            <label class="control-label mb-0">
+                <i class="bi bi-chat-text me-1"></i>{{ 'ITEMS.MODAL.COMMENT' | translate }}
+            </label>
+            <small class="text-white" style="font-size: 0.75rem;">{{ comment.length }}/120</small>
+        </div>
+        <textarea [(ngModel)]="comment" name="comment" class="form-control" rows="3" maxlength="120"
+            style="resize: none;"></textarea>
+    </div>
+
+    <div class="row mb-2">
+        <div class="col-6 col-md-3">
+            <div class="form-group">
+                <i class="bi bi-currency-dollar mx-1"></i>
+                <label class="control-label">{{ 'ITEMS.MODAL.PRICE' | translate }}<span class="text-danger">*</span></label>
+                <input type="number" [(ngModel)]="price" name="price" class="form-control" step="0.01" min="0" max="10000"
+                    [class.is-invalid]="formErrors['price']"
+                    [class.is-valid]="formValidated && !formErrors['price'] && price && price > 0" required />
+                <div class="invalid-feedback" *ngIf="formErrors['price']">{{ formErrors['price'] }}</div>
+            </div>
+        </div>
+        <div class="col-6 col-md-3">
+            <div class="form-group">
+                <i class="bi bi-grid-fill mx-1"></i>
+                <label class="control-label">{{ 'ITEMS.MODAL.AMOUNT' | translate }}<span class="text-danger">*</span></label>
+                <input type="number" [(ngModel)]="amount" name="amount" class="form-control" min="1" max="1000"
+                    [class.is-invalid]="formErrors['amount']"
+                    [class.is-valid]="formValidated && !formErrors['amount'] && amount > 0" required />
+                <div class="invalid-feedback" *ngIf="formErrors['amount']">{{ formErrors['amount'] }}</div>
+            </div>
+        </div>
+        <div class="col-12 col-md-6">
+            <div class="form-group">
+                <i class="bi bi-star-fill mx-1"></i>
+                <label class="control-label mb-0">{{ 'ITEMS.MODAL.RATING' | translate }}<span class="text-danger">*</span></label>
+                <div class="d-flex align-items-center" style="padding-top: 0.3rem;">
+                    <div class="star-rating d-flex justify-content-between" style="flex: 1; margin-right: 0.5rem;">
+                        <i *ngFor="let star of [1,2,3,4,5,6,7,8,9,10]"
+                            [class]="star <= (hoverRating || rating) ? 'bi bi-star-fill' : 'bi bi-star'"
+                            (mouseenter)="hoverRating = star" (mouseleave)="hoverRating = 0"
+                            (click)="setRating(star)"
+                            style="cursor: pointer; font-size: 1.2rem; color: #ffc107;"></i>
+                    </div>
+                    <span class="text-white text-nowrap" style="min-width: 50px; text-align: right; display: inline-block;">
+                        {{ (hoverRating || rating) }}/10
+                    </span>
+                </div>
+                <div class="invalid-feedback d-block" *ngIf="formErrors['rating']">{{ formErrors['rating'] }}</div>
+            </div>
+        </div>
+    </div>
+
+    <div class="row mb-3">
+        <div class="col-6">
+            <div class="form-group">
+                <div class="d-flex justify-content-between align-items-center">
+                    <label class="control-label fw-normal mb-0">
+                        <i class="bi bi-tags me-1"></i>{{ 'ITEMS.MODAL.TAGS' | translate }}
+                    </label>
+                    <small class="text-white" style="font-size: 0.75rem;">{{ tags.length }}/5</small>
+                </div>
+                <div class="input-group border-secondary mb-2">
+                    <input [(ngModel)]="tagInput" name="tagInput" class="form-control"
+                        [placeholder]="'ITEMS.MODAL.TAG_PLACEHOLDER' | translate"
+                        [disabled]="tags.length >= 5"
+                        maxlength="15"
+                        (keydown.enter)="addTag(); $event.preventDefault()" />
+                    <button type="button" class="btn bg-white text-dark border border-dark"
+                        (click)="addTag()"
+                        [disabled]="tags.length >= 5">
+                        <i class="bi bi-plus"></i>
+                    </button>
+                </div>
+                <div class="mt-1" style="max-height: 75px; overflow-x: auto; overflow-y: hidden; white-space: nowrap;"
+                    *ngIf="tags.length > 0">
+                    <span *ngFor="let tag of tags" class="badge border border-light text-white fw-normal me-2 mb-1"
+                        style="font-size: 0.85rem; display: inline-block;">
+                        #{{ tag }}
+                        <i class="bi bi-x ms-1" style="cursor: pointer;" (click)="removeTag(tag)"></i>
+                    </span>
+                </div>
+            </div>
+        </div>
+        <div class="col-6">
+            <div class="form-group">
+                <i class="bi bi-people-fill mx-1"></i>
+                <label class="control-label">{{ 'ITEMS.MODAL.USERS' | translate }}<span class="text-danger">*</span></label>
+                <div class="dropdown w-100" style="position: relative;">
+                    <button class="form-control dropdown-toggle text-start"
+                        [class.is-invalid]="formErrors['users']"
+                        [class.is-valid]="formValidated && !formErrors['users'] && selectedUsers.length > 0"
+                        type="button" data-bs-toggle="dropdown" data-bs-auto-close="outside"
+                        aria-expanded="false">
+                        {{ selectedUsers.length > 0 ? selectedUsers.join(', ') : ('ITEMS.MODAL.SELECT_USERS' | translate) }}
+                    </button>
+                    <ul class="dropdown-menu w-100" style="max-height: 150px; overflow-y: auto;">
+                        <li>
+                            <label class="dropdown-item fw-bold">
+                                <input type="checkbox" [checked]="isAllUsersSelected()"
+                                    (change)="toggleAllUsers($event)" class="form-check-input me-2">
+                                {{ 'ITEMS.MODAL.ALL_USERS' | translate }}
+                            </label>
+                        </li>
+                        <li>
+                            <hr class="dropdown-divider">
+                        </li>
+                        <li *ngFor="let user of users">
+                            <label class="dropdown-item">
+                                <input type="checkbox" [value]="user" [checked]="selectedUsers.includes(user)"
+                                    (change)="onUserSelectionChange(user, $event)"
+                                    class="form-check-input me-2">
+                                {{ user }}
+                            </label>
+                        </li>
+                    </ul>
+                </div>
+                <div class="invalid-feedback d-block" *ngIf="formErrors['users']">{{ formErrors['users'] }}</div>
+            </div>
+        </div>
+    </div>
+
+    <button type="button" class="btn btn-success" (click)="submit()">
+        <i class="bi bi-plus-circle me-1"></i>{{ 'ITEMS.MODAL.ADD' | translate }}
+    </button>
+</form>
diff --git a/src/ExpensesCalculator.UI/src/app/modals/item-form/item-add-form/item-add-form.component.ts b/src/ExpensesCalculator.UI/src/app/modals/item-form/item-add-form/item-add-form.component.ts
new file mode 100644
index 0000000..dbe3a0b
--- /dev/null
+++ b/src/ExpensesCalculator.UI/src/app/modals/item-form/item-add-form/item-add-form.component.ts
@@ -0,0 +1,175 @@
+import { Component } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FormsModule } from '@angular/forms';
+import { TranslatePipe, TranslateService } from '@ngx-translate/core';
+import { ModalService } from '../../../services/modal.service';
+import { ItemsService, Item, ItemResponse } from '../../../services/items.service';
+import { ToastService } from '../../../services/toast.service';
+import { FormValidationService } from '../../../services/form-validation.service';
+import { DayExpensesTotalSumUpdateService } from '../../../services/day-expenses-total-sum-update.service';
+import { parseValidationErrors } from '../../../shared/models/validation-errors.model';
+
+@Component({
+  selector: 'app-item-add-form',
+  standalone: true,
+  imports: [CommonModule, FormsModule, TranslatePipe],
+  templateUrl: './item-add-form.component.html'
+})
+export class ItemAddFormComponent {
+  // Injected by modal service
+  modalService!: ModalService;
+
+  // Data passed from parent component
+  private _users: string[] = [];
+  get users(): string[] {
+    return this._users;
+  }
+  set users(value: string[]) {
+    this._users = value;
+    // Auto-select all users when they are set
+    this.selectedUsers = [...value];
+  }
+
+  checkId: string = '';
+  dayExpensesId: string = '';
+
+  // Form fields
+  name: string = '';
+  comment: string = '';
+  price: number | null = null;
+  amount: number = 1;
+  rating: number = 5;
+  hoverRating: number = 0;
+  tags: string[] = [];
+  tagInput: string = '';
+  selectedUsers: string[] = [];
+
+  // Form validation
+  formErrors: { [key: string]: string } = {};
+  formValidated: boolean = false;
+
+  // Callback functions passed from parent
+  onSuccess?: (checkId: string, newSum: number, dayExpensesTotalSum: number) => void;
+
+  constructor(
+    private translate: TranslateService,
+    private itemsService: ItemsService,
+    private toastService: ToastService,
+    private formValidationService: FormValidationService,
+    private dayExpensesTotalSumUpdateService: DayExpensesTotalSumUpdateService
+  ) {}
+
+  setRating(rating: number): void {
+    this.rating = rating;
+  }
+
+  addTag(): void {
+    const trimmedTag = this.tagInput.trim().replace(/\s+/g, '_').toLowerCase();
+    if (trimmedTag && !this.tags.includes(trimmedTag) && this.tags.length < 5) {
+      this.tags.push(trimmedTag);
+      this.tagInput = '';
+    }
+  }
+
+  removeTag(tag: string): void {
+    const index = this.tags.indexOf(tag);
+    if (index > -1) {
+      this.tags.splice(index, 1);
+    }
+  }
+
+  isAllUsersSelected(): boolean {
+    return this.users.length > 0 && this.selectedUsers.length === this.users.length;
+  }
+
+  toggleAllUsers(event: any): void {
+    if (event.target.checked) {
+      this.selectedUsers = [...this.users];
+    } else {
+      this.selectedUsers = [];
+    }
+  }
+
+  onUserSelectionChange(user: string, event: any): void {
+    if (event.target.checked) {
+      if (!this.selectedUsers.includes(user)) {
+        this.selectedUsers.push(user);
+      }
+    } else {
+      const index = this.selectedUsers.indexOf(user);
+      if (index > -1) {
+        this.selectedUsers.splice(index, 1);
+      }
+    }
+  }
+
+  validateForm(): boolean {
+    this.formErrors = this.formValidationService.validateItemForm(
+      this.name,
+      this.price,
+      this.amount,
+      this.rating,
+      this.selectedUsers
+    );
+    return Object.keys(this.formErrors).length === 0;
+  }
+
+  submit(): void {
+    if (!this.validateForm()) {
+      this.formValidated = true;
+      return;
+    }
+
+    this.formValidated = true;
+
+    const newItem: Item = {
+      id: '00000000-0000-0000-0000-000000000000',
+      name: this.name,
+      comment: this.comment,
+      price: this.price!,
+      amount: this.amount,
+      rating: this.rating,
+      tags: this.tags,
+      users: this.selectedUsers,
+      checkId: this.checkId
+    };
+
+    this.itemsService.createItem(newItem).subscribe({
+      next: (response: ItemResponse) => {
+        this.modalService.close();
+        this.toastService.success(
+          this.translate.instant('ITEMS.TOAST.SUCCESS'),
+          this.translate.instant('ITEMS.TOAST.CREATE_SUCCESS')
+        );
+
+        // Update day expenses total sum
+        this.dayExpensesTotalSumUpdateService.emitDayExpensesTotalSumUpdate(
+          this.dayExpensesId,
+          response.dayExpensesTotalSum
+        );
+
+        // Call success callback to refresh the list and update check sum
+        if (this.onSuccess) {
+          this.onSuccess(this.checkId, response.checkTotalSum, response.dayExpensesTotalSum);
+        }
+      },
+      error: error => {
+        this.formErrors = parseValidationErrors(error);
+        this.formValidated = true;
+        if (Object.keys(this.formErrors).length === 0 || this.formErrors['general']) {
+          const errorMessage = this.formErrors['general'] || error?.error?.message || error?.message || this.translate.instant('ITEMS.TOAST.CREATE_ERROR');
+          this.toastService.error(
+            this.translate.instant('ITEMS.TOAST.ERROR'),
+            this.translateBackendError(errorMessage)
+          );
+        }
+      }
+    });
+  }
+
+  translateBackendError(error: string): string {
+    const errorKey = `BACKEND_ERRORS.${error.toUpperCase().replace(/\s+/g, '_')}`;
+    const translated = this.translate.instant(errorKey);
+    return translated !== errorKey ? translated : error;
+  }
+}
diff --git a/src/ExpensesCalculator.UI/src/app/modals/item-form/item-delete-form/item-delete-form.component.html b/src/ExpensesCalculator.UI/src/app/modals/item-form/item-delete-form/item-delete-form.component.html
new file mode 100644
index 0000000..3750d35
--- /dev/null
+++ b/src/ExpensesCalculator.UI/src/app/modals/item-form/item-delete-form/item-delete-form.component.html
@@ -0,0 +1,73 @@
+<div>
+    <div class="form-group mb-3">
+        <i class="bi bi-box-seam mx-1"></i>
+        <label class="control-label">{{ 'ITEMS.MODAL.NAME' | translate }}</label>
+        <input [value]="name" class="form-control" disabled />
+    </div>
+
+    <div class="form-group mb-3">
+        <i class="bi bi-chat-text mx-1"></i>
+        <label class="control-label">{{ 'ITEMS.MODAL.COMMENT' | translate }}</label>
+        <textarea [value]="comment" class="form-control" rows="3" disabled></textarea>
+    </div>
+
+    <div class="row mb-3">
+        <div class="col-6 col-md-3">
+            <div class="form-group">
+                <i class="bi bi-currency-dollar mx-1"></i>
+                <label class="control-label">{{ 'ITEMS.MODAL.PRICE' | translate }}</label>
+                <input type="number" [value]="price" class="form-control" disabled />
+            </div>
+        </div>
+        <div class="col-6 col-md-3">
+            <div class="form-group">
+                <i class="bi bi-grid-fill mx-1"></i>
+                <label class="control-label">{{ 'ITEMS.MODAL.AMOUNT' | translate }}</label>
+                <input type="number" [value]="amount" class="form-control" disabled />
+            </div>
+        </div>
+        <div class="col-12 col-md-6">
+            <div class="form-group">
+                <i class="bi bi-star-fill mx-1"></i>
+                <label class="control-label mb-0">{{ 'ITEMS.MODAL.RATING' | translate }}</label>
+                <div class="d-flex align-items-center" style="padding-top: 0.3rem;">
+                    <div class="star-rating d-flex justify-content-between" style="flex: 1; margin-right: 0.5rem;">
+                        <i *ngFor="let star of [1,2,3,4,5,6,7,8,9,10]"
+                            [class]="star <= rating ? 'bi bi-star-fill' : 'bi bi-star'"
+                            style="font-size: 1.2rem; color: #ffc107;"></i>
+                    </div>
+                    <span class="text-white text-nowrap" style="min-width: 50px; text-align: right; display: inline-block;">
+                        {{ rating }}/10
+                    </span>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <div class="row mb-3">
+        <div class="col-6" *ngIf="tags.length > 0">
+            <div class="form-group">
+                <i class="bi bi-tags mx-1"></i>
+                <label class="control-label fw-normal">{{ 'ITEMS.MODAL.TAGS' | translate }}</label>
+                <div class="mt-2">
+                    <span *ngFor="let tag of tags"
+                        class="badge border border-secondary text-secondary fw-normal me-2 mb-2"
+                        style="font-size: 0.9rem;">
+                        #{{ tag }}
+                    </span>
+                </div>
+            </div>
+        </div>
+        <div [ngClass]="tags.length > 0 ? 'col-6' : 'col-12'">
+            <div class="form-group">
+                <i class="bi bi-people-fill mx-1"></i>
+                <label class="control-label">{{ 'ITEMS.MODAL.USERS' | translate }}</label>
+                <input [value]="selectedUsers.join(', ')" class="form-control" disabled />
+            </div>
+        </div>
+    </div>
+
+    <button type="button" class="btn btn-danger" (click)="submit()">
+        <i class="bi bi-trash me-1"></i>{{ 'ITEMS.MODAL.DELETE' | translate }}
+    </button>
+</div>
diff --git a/src/ExpensesCalculator.UI/src/app/modals/item-form/item-delete-form/item-delete-form.component.ts b/src/ExpensesCalculator.UI/src/app/modals/item-form/item-delete-form/item-delete-form.component.ts
new file mode 100644
index 0000000..ea7c16c
--- /dev/null
+++ b/src/ExpensesCalculator.UI/src/app/modals/item-form/item-delete-form/item-delete-form.component.ts
@@ -0,0 +1,79 @@
+import { Component } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FormsModule } from '@angular/forms';
+import { TranslatePipe, TranslateService } from '@ngx-translate/core';
+import { ModalService } from '../../../services/modal.service';
+import { ItemsService, DeleteItemResponse } from '../../../services/items.service';
+import { ToastService } from '../../../services/toast.service';
+import { DayExpensesTotalSumUpdateService } from '../../../services/day-expenses-total-sum-update.service';
+
+@Component({
+  selector: 'app-item-delete-form',
+  standalone: true,
+  imports: [CommonModule, FormsModule, TranslatePipe],
+  templateUrl: './item-delete-form.component.html'
+})
+export class ItemDeleteFormComponent {
+  // Injected by modal service
+  modalService!: ModalService;
+
+  // Data passed from parent component
+  checkId: string = '';
+  dayExpensesId: string = '';
+  itemId: string = '';
+
+  // Display fields
+  name: string = '';
+  comment: string = '';
+  price: number = 0;
+  amount: number = 1;
+  rating: number = 5;
+  tags: string[] = [];
+  selectedUsers: string[] = [];
+
+  // Callback functions passed from parent
+  onSuccess?: (checkId: string, newSum: number, dayExpensesTotalSum: number) => void;
+
+  constructor(
+    private translate: TranslateService,
+    private itemsService: ItemsService,
+    private toastService: ToastService,
+    private dayExpensesTotalSumUpdateService: DayExpensesTotalSumUpdateService
+  ) {}
+
+  submit(): void {
+    this.itemsService.deleteItem(this.itemId).subscribe({
+      next: (response: DeleteItemResponse) => {
+        this.modalService.close();
+        this.toastService.success(
+          this.translate.instant('ITEMS.TOAST.SUCCESS'),
+          this.translate.instant('ITEMS.TOAST.DELETE_SUCCESS')
+        );
+
+        // Update day expenses total sum
+        this.dayExpensesTotalSumUpdateService.emitDayExpensesTotalSumUpdate(
+          this.dayExpensesId,
+          response.dayExpensesTotalSum
+        );
+
+        // Call success callback to refresh the list and update check sum
+        if (this.onSuccess) {
+          this.onSuccess(this.checkId, response.checkTotalSum, response.dayExpensesTotalSum);
+        }
+      },
+      error: error => {
+        const errorMessage = error?.error?.message || error?.message || this.translate.instant('ITEMS.TOAST.DELETE_ERROR');
+        this.toastService.error(
+          this.translate.instant('ITEMS.TOAST.ERROR'),
+          this.translateBackendError(errorMessage)
+        );
+      }
+    });
+  }
+
+  translateBackendError(error: string): string {
+    const errorKey = `BACKEND_ERRORS.${error.toUpperCase().replace(/\s+/g, '_')}`;
+    const translated = this.translate.instant(errorKey);
+    return translated !== errorKey ? translated : error;
+  }
+}
diff --git a/src/ExpensesCalculator.UI/src/app/modals/item-form/item-edit-form/item-edit-form.component.html b/src/ExpensesCalculator.UI/src/app/modals/item-form/item-edit-form/item-edit-form.component.html
new file mode 100644
index 0000000..9fdd94a
--- /dev/null
+++ b/src/ExpensesCalculator.UI/src/app/modals/item-form/item-edit-form/item-edit-form.component.html
@@ -0,0 +1,141 @@
+<form>
+    <div class="form-group mb-2">
+        <div class="d-flex justify-content-between align-items-center">
+            <label class="control-label mb-0">
+                <i class="bi bi-box-seam me-1"></i>{{ 'ITEMS.MODAL.NAME' | translate }}<span class="text-danger">*</span>
+            </label>
+            <small class="text-white" style="font-size: 0.75rem;">{{ name.length }}/20</small>
+        </div>
+        <input [(ngModel)]="name" name="name" class="form-control"
+            [class.is-invalid]="formErrors['name']"
+            [class.is-valid]="formValidated && !formErrors['name'] && name.trim()"
+            maxlength="20" required />
+        <div class="invalid-feedback" *ngIf="formErrors['name']">{{ formErrors['name'] }}</div>
+    </div>
+
+    <div class="form-group mb-2">
+        <div class="d-flex justify-content-between align-items-center">
+            <label class="control-label mb-0">
+                <i class="bi bi-chat-text me-1"></i>{{ 'ITEMS.MODAL.COMMENT' | translate }}
+            </label>
+            <small class="text-white" style="font-size: 0.75rem;">{{ comment.length }}/120</small>
+        </div>
+        <textarea [(ngModel)]="comment" name="comment" class="form-control" rows="3" maxlength="120"
+            style="resize: none;"></textarea>
+    </div>
+
+    <div class="row mb-2">
+        <div class="col-6 col-md-3">
+            <div class="form-group">
+                <i class="bi bi-currency-dollar mx-1"></i>
+                <label class="control-label">{{ 'ITEMS.MODAL.PRICE' | translate }}<span class="text-danger">*</span></label>
+                <input type="number" [(ngModel)]="price" name="price" class="form-control" step="0.01" min="0"
+                    [class.is-invalid]="formErrors['price']"
+                    [class.is-valid]="formValidated && !formErrors['price'] && price > 0" required />
+                <div class="invalid-feedback" *ngIf="formErrors['price']">{{ formErrors['price'] }}</div>
+            </div>
+        </div>
+        <div class="col-6 col-md-3">
+            <div class="form-group">
+                <i class="bi bi-grid-fill mx-1"></i>
+                <label class="control-label">{{ 'ITEMS.MODAL.AMOUNT' | translate }}<span class="text-danger">*</span></label>
+                <input type="number" [(ngModel)]="amount" name="amount" class="form-control" min="1"
+                    [class.is-invalid]="formErrors['amount']"
+                    [class.is-valid]="formValidated && !formErrors['amount'] && amount > 0" required />
+                <div class="invalid-feedback" *ngIf="formErrors['amount']">{{ formErrors['amount'] }}</div>
+            </div>
+        </div>
+        <div class="col-12 col-md-6">
+            <div class="form-group">
+                <i class="bi bi-star-fill mx-1"></i>
+                <label class="control-label mb-0">{{ 'ITEMS.MODAL.RATING' | translate }}<span class="text-danger">*</span></label>
+                <div class="d-flex align-items-center" style="padding-top: 0.3rem;">
+                    <div class="star-rating d-flex justify-content-between" style="flex: 1; margin-right: 0.5rem;">
+                        <i *ngFor="let star of [1,2,3,4,5,6,7,8,9,10]"
+                            [class]="star <= (hoverRating || rating) ? 'bi bi-star-fill' : 'bi bi-star'"
+                            (mouseenter)="hoverRating = star" (mouseleave)="hoverRating = 0"
+                            (click)="setRating(star)"
+                            style="cursor: pointer; font-size: 1.2rem; color: #ffc107;"></i>
+                    </div>
+                    <span class="text-white text-nowrap" style="min-width: 50px; text-align: right; display: inline-block;">
+                        {{ (hoverRating || rating) }}/10
+                    </span>
+                </div>
+                <div class="invalid-feedback d-block" *ngIf="formErrors['rating']">{{ formErrors['rating'] }}</div>
+            </div>
+        </div>
+    </div>
+
+    <div class="row mb-3">
+        <div class="col-6">
+            <div class="form-group">
+                <div class="d-flex justify-content-between align-items-center">
+                    <label class="control-label fw-normal mb-0">
+                        <i class="bi bi-tags me-1"></i>{{ 'ITEMS.MODAL.TAGS' | translate }}
+                    </label>
+                    <small class="text-white" style="font-size: 0.75rem;">{{ tags.length }}/5</small>
+                </div>
+                <div class="input-group border-secondary mb-2">
+                    <input [(ngModel)]="tagInput" name="tagInput" class="form-control"
+                        [placeholder]="'ITEMS.MODAL.TAG_PLACEHOLDER' | translate"
+                        [disabled]="tags.length >= 5"
+                        maxlength="15"
+                        (keydown.enter)="addTag(); $event.preventDefault()" />
+                    <button type="button" class="btn bg-white text-dark border border-dark"
+                        (click)="addTag()"
+                        [disabled]="tags.length >= 5">
+                        <i class="bi bi-plus"></i>
+                    </button>
+                </div>
+                <div class="mt-1" style="max-height: 75px; overflow-x: auto; overflow-y: hidden; white-space: nowrap;"
+                    *ngIf="tags.length > 0">
+                    <span *ngFor="let tag of tags" class="badge border border-light text-white fw-normal me-2 mb-1"
+                        style="font-size: 0.85rem; display: inline-block;">
+                        #{{ tag }}
+                        <i class="bi bi-x ms-1" style="cursor: pointer;" (click)="removeTag(tag)"></i>
+                    </span>
+                </div>
+            </div>
+        </div>
+        <div class="col-6">
+            <div class="form-group">
+                <i class="bi bi-people-fill mx-1"></i>
+                <label class="control-label">{{ 'ITEMS.MODAL.USERS' | translate }}<span class="text-danger">*</span></label>
+                <div class="dropdown w-100" style="position: relative;">
+                    <button class="form-control dropdown-toggle text-start"
+                        [class.is-invalid]="formErrors['users']"
+                        [class.is-valid]="formValidated && !formErrors['users'] && selectedUsers.length > 0"
+                        type="button" data-bs-toggle="dropdown" data-bs-auto-close="outside"
+                        aria-expanded="false">
+                        {{ selectedUsers.length > 0 ? selectedUsers.join(', ') : ('ITEMS.MODAL.SELECT_USERS' | translate) }}
+                    </button>
+                    <ul class="dropdown-menu w-100" style="max-height: 150px; overflow-y: auto;">
+                        <li>
+                            <label class="dropdown-item fw-bold">
+                                <input type="checkbox" [checked]="isAllUsersSelected()"
+                                    (change)="toggleAllUsers($event)" class="form-check-input me-2">
+                                {{ 'ITEMS.MODAL.ALL_USERS' | translate }}
+                            </label>
+                        </li>
+                        <li>
+                            <hr class="dropdown-divider">
+                        </li>
+                        <li *ngFor="let user of users">
+                            <label class="dropdown-item">
+                                <input type="checkbox" [value]="user" [checked]="selectedUsers.includes(user)"
+                                    (change)="onUserSelectionChange(user, $event)"
+                                    class="form-check-input me-2">
+                                {{ user }}
+                            </label>
+                        </li>
+                    </ul>
+                </div>
+                <div class="invalid-feedback d-block" *ngIf="formErrors['users']">{{ formErrors['users'] }}</div>
+            </div>
+        </div>
+    </div>
+
+    <button type="button" class="btn btn-warning" (click)="submit()">
+        <i class="bi bi-pencil me-1"></i>{{ 'ITEMS.MODAL.SAVE' | translate }}
+    </button>
+</form>
diff --git a/src/ExpensesCalculator.UI/src/app/modals/item-form/item-edit-form/item-edit-form.component.ts b/src/ExpensesCalculator.UI/src/app/modals/item-form/item-edit-form/item-edit-form.component.ts
new file mode 100644
index 0000000..a12bf80
--- /dev/null
+++ b/src/ExpensesCalculator.UI/src/app/modals/item-form/item-edit-form/item-edit-form.component.ts
@@ -0,0 +1,167 @@
+import { Component } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FormsModule } from '@angular/forms';
+import { TranslatePipe, TranslateService } from '@ngx-translate/core';
+import { ModalService } from '../../../services/modal.service';
+import { ItemsService, Item, ItemResponse } from '../../../services/items.service';
+import { ToastService } from '../../../services/toast.service';
+import { FormValidationService } from '../../../services/form-validation.service';
+import { DayExpensesTotalSumUpdateService } from '../../../services/day-expenses-total-sum-update.service';
+import { parseValidationErrors } from '../../../shared/models/validation-errors.model';
+
+@Component({
+  selector: 'app-item-edit-form',
+  standalone: true,
+  imports: [CommonModule, FormsModule, TranslatePipe],
+  templateUrl: './item-edit-form.component.html'
+})
+export class ItemEditFormComponent {
+  // Injected by modal service
+  modalService!: ModalService;
+
+  // Data passed from parent component
+  users: string[] = [];
+  checkId: string = '';
+  dayExpensesId: string = '';
+  itemId: string = '';
+
+  // Form fields
+  name: string = '';
+  comment: string = '';
+  price: number = 0;
+  amount: number = 1;
+  rating: number = 5;
+  hoverRating: number = 0;
+  tags: string[] = [];
+  tagInput: string = '';
+  selectedUsers: string[] = [];
+
+  // Form validation
+  formErrors: { [key: string]: string } = {};
+  formValidated: boolean = false;
+
+  // Callback functions passed from parent
+  onSuccess?: (checkId: string, newSum: number, dayExpensesTotalSum: number) => void;
+
+  constructor(
+    private translate: TranslateService,
+    private itemsService: ItemsService,
+    private toastService: ToastService,
+    private formValidationService: FormValidationService,
+    private dayExpensesTotalSumUpdateService: DayExpensesTotalSumUpdateService
+  ) {}
+
+  setRating(rating: number): void {
+    this.rating = rating;
+  }
+
+  addTag(): void {
+    const trimmedTag = this.tagInput.trim().replace(/\s+/g, '_').toLowerCase();
+    if (trimmedTag && !this.tags.includes(trimmedTag) && this.tags.length < 5) {
+      this.tags.push(trimmedTag);
+      this.tagInput = '';
+    }
+  }
+
+  removeTag(tag: string): void {
+    const index = this.tags.indexOf(tag);
+    if (index > -1) {
+      this.tags.splice(index, 1);
+    }
+  }
+
+  isAllUsersSelected(): boolean {
+    return this.users.length > 0 && this.selectedUsers.length === this.users.length;
+  }
+
+  toggleAllUsers(event: any): void {
+    if (event.target.checked) {
+      this.selectedUsers = [...this.users];
+    } else {
+      this.selectedUsers = [];
+    }
+  }
+
+  onUserSelectionChange(user: string, event: any): void {
+    if (event.target.checked) {
+      if (!this.selectedUsers.includes(user)) {
+        this.selectedUsers.push(user);
+      }
+    } else {
+      const index = this.selectedUsers.indexOf(user);
+      if (index > -1) {
+        this.selectedUsers.splice(index, 1);
+      }
+    }
+  }
+
+  validateForm(): boolean {
+    this.formErrors = this.formValidationService.validateItemForm(
+      this.name,
+      this.price,
+      this.amount,
+      this.rating,
+      this.selectedUsers
+    );
+    return Object.keys(this.formErrors).length === 0;
+  }
+
+  submit(): void {
+    if (!this.validateForm()) {
+      this.formValidated = true;
+      return;
+    }
+
+    this.formValidated = true;
+
+    const updatedItem: Item = {
+      id: this.itemId,
+      name: this.name,
+      comment: this.comment,
+      price: this.price,
+      amount: this.amount,
+      rating: this.rating,
+      tags: this.tags,
+      users: this.selectedUsers,
+      checkId: this.checkId
+    };
+
+    this.itemsService.editItem(updatedItem).subscribe({
+      next: (response: ItemResponse) => {
+        this.modalService.close();
+        this.toastService.success(
+          this.translate.instant('ITEMS.TOAST.SUCCESS'),
+          this.translate.instant('ITEMS.TOAST.EDIT_SUCCESS')
+        );
+
+        // Update day expenses total sum
+        this.dayExpensesTotalSumUpdateService.emitDayExpensesTotalSumUpdate(
+          this.dayExpensesId,
+          response.dayExpensesTotalSum
+        );
+
+        // Call success callback to refresh the list and update check sum
+        if (this.onSuccess) {
+          this.onSuccess(this.checkId, response.checkTotalSum, response.dayExpensesTotalSum);
+        }
+      },
+      error: error => {
+        this.formErrors = parseValidationErrors(error);
+        this.formValidated = true;
+        if (Object.keys(this.formErrors).length === 0 || this.formErrors['general']) {
+          const errorMessage = this.formErrors['general'] || error?.error?.message || error?.message || this.translate.instant('ITEMS.TOAST.EDIT_ERROR');
+          this.toastService.error(
+            this.translate.instant('ITEMS.TOAST.ERROR'),
+            this.translateBackendError(errorMessage)
+          );
+        }
+      }
+    });
+  }
+
+  translateBackendError(error: string): string {
+    const errorKey = `BACKEND_ERRORS.${error.toUpperCase().replace(/\s+/g, '_')}`;
+    const translated = this.translate.instant(errorKey);
+    return translated !== errorKey ? translated : error;
+  }
+}
diff --git a/src/ExpensesCalculator.UI/src/app/modals/recommendation-form/recommendation-add-form.component.html b/src/ExpensesCalculator.UI/src/app/modals/recommendation-form/recommendation-add-form.component.html
new file mode 100644
index 0000000..df38315
--- /dev/null
+++ b/src/ExpensesCalculator.UI/src/app/modals/recommendation-form/recommendation-add-form.component.html
@@ -0,0 +1,87 @@
+<form>
+    <div class="alert alert-info p-2 mb-3" style="font-size: 0.9rem;">
+        <i class="bi bi-info-circle me-2"></i>{{ 'ITEMS.MODAL.RECOMMENDATIONS_INFO' | translate }}
+    </div>
+    <div class="form-group mb-2">
+        <div class="d-flex justify-content-between align-items-center">
+            <label class="control-label mb-0"><i class="bi bi-box-seam me-1"></i>{{ 'ITEMS.MODAL.NAME' | translate }}<span class="text-danger">*</span></label>
+            <small class="text-white" style="font-size: 0.75rem;">{{ name.length }}/20</small>
+        </div>
+        <input [(ngModel)]="name" name="name" class="form-control" [class.is-invalid]="formErrors['name']"
+            [class.is-valid]="formValidated && !formErrors['name'] && name.trim()" maxlength="20" required />
+        <div class="invalid-feedback" *ngIf="formErrors['name']">{{ formErrors['name'] }}</div>
+    </div>
+    <div class="form-group mb-2">
+        <div class="d-flex justify-content-between align-items-center">
+            <label class="control-label mb-0"><i class="bi bi-chat-text me-1"></i>{{ 'ITEMS.MODAL.COMMENT' | translate }}</label>
+            <small class="text-white" style="font-size: 0.75rem;">{{ comment.length }}/120</small>
+        </div>
+        <textarea [(ngModel)]="comment" name="comment" class="form-control" rows="3" maxlength="120"
+            style="resize: none;"></textarea>
+    </div>
+    <div class="row mb-2">
+        <div class="col-6 col-md-3">
+            <div class="form-group">
+                <i class="bi bi-currency-dollar mx-1"></i>
+                <label class="control-label">{{ 'ITEMS.MODAL.PRICE' | translate }}<span class="text-danger">*</span></label>
+                <input type="number" [(ngModel)]="price" name="price" class="form-control" step="0.01" min="0" max="10000"
+                    [class.is-invalid]="formErrors['price']"
+                    [class.is-valid]="formValidated && !formErrors['price'] && price && price > 0" required />
+                <div class="invalid-feedback" *ngIf="formErrors['price']">{{ formErrors['price'] }}</div>
+            </div>
+        </div>
+        <div class="col-6 col-md-3">
+            <div class="form-group">
+                <i class="bi bi-grid-fill mx-1"></i>
+                <label class="control-label">{{ 'ITEMS.MODAL.AMOUNT' | translate }}<span class="text-danger">*</span></label>
+                <input type="number" [(ngModel)]="amount" name="amount" class="form-control" min="1" max="1000"
+                    [class.is-invalid]="formErrors['amount']"
+                    [class.is-valid]="formValidated && !formErrors['amount'] && amount > 0" required />
+                <div class="invalid-feedback" *ngIf="formErrors['amount']">{{ formErrors['amount'] }}</div>
+            </div>
+        </div>
+        <div class="col-12 col-md-6">
+            <div class="form-group">
+                <i class="bi bi-star-fill mx-1"></i>
+                <label class="control-label mb-0">{{ 'ITEMS.MODAL.RATING' | translate }}<span class="text-danger">*</span></label>
+                <div class="d-flex align-items-center" style="padding-top: 0.3rem;">
+                    <div class="star-rating d-flex justify-content-between" style="flex: 1; margin-right: 0.5rem;">
+                        <i *ngFor="let star of [1,2,3,4,5,6,7,8,9,10]"
+                            [class]="star <= (hoverRating || rating) ? 'bi bi-star-fill' : 'bi bi-star'"
+                            (mouseenter)="setHoverRating(star)" (mouseleave)="setHoverRating(0)"
+                            (click)="setRating(star)"
+                            style="cursor: pointer; font-size: 1.2rem; color: #ffc107;"></i>
+                    </div>
+                    <span class="text-white text-nowrap" style="min-width: 50px; text-align: right; display: inline-block;">{{ (hoverRating || rating) }}/10</span>
+                </div>
+                <div class="invalid-feedback d-block" *ngIf="formErrors['rating']">{{ formErrors['rating'] }}</div>
+            </div>
+        </div>
+    </div>
+    <div class="form-group mb-3">
+        <div class="d-flex justify-content-between align-items-center">
+            <label class="control-label fw-normal mb-0"><i class="bi bi-tags me-1"></i>{{ 'ITEMS.MODAL.TAGS' | translate }}</label>
+            <small class="text-white" style="font-size: 0.75rem;">{{ tags.length }}/5</small>
+        </div>
+        <div class="input-group border-secondary mb-2">
+            <input [(ngModel)]="tagInput" name="tagInput" class="form-control"
+                [placeholder]="'ITEMS.MODAL.TAG_PLACEHOLDER' | translate" [disabled]="tags.length >= 5"
+                maxlength="15" (keydown.enter)="addTag(); $event.preventDefault()" />
+            <button type="button" class="btn bg-white text-dark border border-dark" (click)="addTag()"
+                [disabled]="tags.length >= 5">
+                <i class="bi bi-plus"></i>
+            </button>
+        </div>
+        <div class="mt-1" style="max-height: 75px; overflow-x: auto; overflow-y: hidden; white-space: nowrap;"
+            *ngIf="tags.length > 0">
+            <span *ngFor="let tag of tags" class="badge border border-light text-white fw-normal me-2 mb-1"
+                style="font-size: 0.85rem; display: inline-block;">
+                #{{ tag }}
+                <i class="bi bi-x ms-1" style="cursor: pointer;" (click)="removeTag(tag)"></i>
+            </span>
+        </div>
+    </div>
+    <button type="button" class="btn btn-success" (click)="submit()">
+        <i class="bi bi-plus-circle me-1"></i>{{ 'ITEMS.MODAL.ADD' | translate }}
+    </button>
+</form>
diff --git a/src/ExpensesCalculator.UI/src/app/modals/recommendation-form/recommendation-add-form.component.ts b/src/ExpensesCalculator.UI/src/app/modals/recommendation-form/recommendation-add-form.component.ts
new file mode 100644
index 0000000..05d7c46
--- /dev/null
+++ b/src/ExpensesCalculator.UI/src/app/modals/recommendation-form/recommendation-add-form.component.ts
@@ -0,0 +1,126 @@
+import { Component } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FormsModule } from '@angular/forms';
+import { TranslatePipe, TranslateService } from '@ngx-translate/core';
+import { ModalService } from '../../services/modal.service';
+import { ItemsService } from '../../services/items.service';
+import { ToastService } from '../../services/toast.service';
+import { parseValidationErrors } from '../../shared/models/validation-errors.model';
+
+@Component({
+  selector: 'app-recommendation-add-form',
+  standalone: true,
+  imports: [CommonModule, FormsModule, TranslatePipe],
+  templateUrl: './recommendation-add-form.component.html'
+})
+export class RecommendationAddFormComponent {
+  // Injected by modal service
+  modalService!: ModalService;
+
+  // Form fields
+  name: string = '';
+  comment: string = '';
+  price: number | null = null;
+  amount: number = 1;
+  rating: number = 5;
+  hoverRating: number = 0;
+  tags: string[] = [];
+  tagInput: string = '';
+
+  // Form validation
+  formErrors: { [key: string]: string } = {};
+  formValidated: boolean = false;
+
+  // Callback functions passed from parent
+  onSuccess?: () => void;
+
+  constructor(
+    private translate: TranslateService,
+    private itemsService: ItemsService,
+    private toastService: ToastService
+  ) {}
+
+  validateForm(): boolean {
+    this.formErrors = {};
+    this.formValidated = true;
+
+    if (!this.name.trim()) {
+      this.formErrors['name'] = this.translate.instant('ITEMS.VALIDATION.NAME_REQUIRED');
+    }
+    if (!this.price || this.price <= 0) {
+      this.formErrors['price'] = this.translate.instant('ITEMS.VALIDATION.PRICE_INVALID');
+    }
+    if (this.amount <= 0) {
+      this.formErrors['amount'] = this.translate.instant('ITEMS.VALIDATION.AMOUNT_INVALID');
+    }
+    if (this.rating <= 0) {
+      this.formErrors['rating'] = this.translate.instant('ITEMS.VALIDATION.RATING_REQUIRED');
+    }
+
+    return Object.keys(this.formErrors).length === 0;
+  }
+
+  submit(): void {
+    if (!this.validateForm()) return;
+    this.formValidated = true;
+
+    const newItem = {
+      name: this.name,
+      comment: this.comment,
+      price: this.price!,
+      amount: this.amount,
+      rating: this.rating,
+      tags: this.tags
+    };
+
+    this.itemsService.createRecommendationItem(newItem).subscribe({
+      next: () => {
+        this.modalService.close();
+        this.toastService.success(
+          this.translate.instant('ITEMS.TOAST.SUCCESS'),
+          this.translate.instant('ITEMS.TOAST.CREATE_SUCCESS')
+        );
+
+        // Call success callback to refresh the list
+        if (this.onSuccess) {
+          this.onSuccess();
+        }
+      },
+      error: error => {
+        this.formErrors = parseValidationErrors(error);
+        this.formValidated = true;
+        if (Object.keys(this.formErrors).length === 0 || this.formErrors['general']) {
+          const errorMessage = this.formErrors['general'] || error?.error?.message || error?.message || this.translate.instant('ITEMS.TOAST.CREATE_ERROR');
+          this.toastService.error(
+            this.translate.instant('ITEMS.TOAST.ERROR'),
+            errorMessage
+          );
+        }
+      }
+    });
+  }
+
+  setRating(value: number): void {
+    this.rating = value;
+  }
+
+  setHoverRating(value: number): void {
+    this.hoverRating = value;
+  }
+
+  addTag(): void {
+    const tag = this.tagInput.trim();
+    if (tag && !this.tags.includes(tag)) {
+      this.tags.push(tag);
+      this.tagInput = '';
+    }
+  }
+
+  removeTag(tag: string): void {
+    this.tags = this.tags.filter(t => t !== tag);
+  }
+
+  getTotalPrice(): number {
+    return (this.price || 0) * this.amount;
+  }
+}
diff --git a/src/ExpensesCalculator.UI/src/app/modals/recommendation-form/recommendation-delete-form.component.html b/src/ExpensesCalculator.UI/src/app/modals/recommendation-form/recommendation-delete-form.component.html
new file mode 100644
index 0000000..e67b4b5
--- /dev/null
+++ b/src/ExpensesCalculator.UI/src/app/modals/recommendation-form/recommendation-delete-form.component.html
@@ -0,0 +1,58 @@
+<form>
+    <div class="form-group mb-3">
+        <i class="bi bi-box-seam mx-1"></i>
+        <label class="control-label">{{ 'ITEMS.MODAL.NAME' | translate }}</label>
+        <input [value]="name" class="form-control" disabled />
+    </div>
+    <div class="form-group mb-3">
+        <i class="bi bi-chat-text mx-1"></i>
+        <label class="control-label">{{ 'ITEMS.MODAL.COMMENT' | translate }}</label>
+        <textarea [value]="comment" class="form-control" rows="3" disabled></textarea>
+    </div>
+    <div class="row mb-3">
+        <div class="col-6 col-md-3">
+            <div class="form-group">
+                <i class="bi bi-currency-dollar mx-1"></i>
+                <label class="control-label">{{ 'ITEMS.MODAL.PRICE' | translate }}</label>
+                <input type="number" [value]="price" class="form-control" disabled />
+            </div>
+        </div>
+        <div class="col-6 col-md-3">
+            <div class="form-group">
+                <i class="bi bi-grid-fill mx-1"></i>
+                <label class="control-label">{{ 'ITEMS.MODAL.AMOUNT' | translate }}</label>
+                <input type="number" [value]="amount" class="form-control" disabled />
+            </div>
+        </div>
+        <div class="col-12 col-md-6">
+            <div class="form-group">
+                <i class="bi bi-star-fill mx-1"></i>
+                <label class="control-label mb-0">{{ 'ITEMS.MODAL.RATING' | translate }}</label>
+                <div class="d-flex align-items-center" style="padding-top: 0.3rem;">
+                    <div class="star-rating d-flex justify-content-between" style="flex: 1; margin-right: 0.5rem;">
+                        <i *ngFor="let star of [1,2,3,4,5,6,7,8,9,10]"
+                            [class]="star <= rating ? 'bi bi-star-fill' : 'bi bi-star'"
+                            style="font-size: 1.2rem; color: #ffc107;"></i>
+                    </div>
+                    <span class="text-white text-nowrap" style="min-width: 50px; text-align: right; display: inline-block;">{{ rating }}/10</span>
+                </div>
+            </div>
+        </div>
+    </div>
+    <div class="form-group mb-3" *ngIf="tags.length > 0">
+        <i class="bi bi-tags mx-1"></i>
+        <label class="control-label fw-normal">{{ 'ITEMS.MODAL.TAGS' | translate }}</label>
+        <div class="mt-2">
+            <span *ngFor="let tag of tags" class="badge border border-secondary text-secondary fw-normal me-2 mb-2"
+                style="font-size: 0.9rem;">
+                #{{ tag }}
+            </span>
+        </div>
+    </div>
+    <div class="alert alert-warning p-2 mb-3" *ngIf="!canDelete" style="font-size: 0.9rem;">
+        <i class="bi bi-info-circle me-2"></i>{{ 'ITEMS.MODAL.CANNOT_DELETE_NOT_OWNER' | translate }}
+    </div>
+    <button type="button" class="btn btn-danger" (click)="submit()" [disabled]="!canDelete">
+        <i class="bi bi-trash me-1"></i>{{ 'ITEMS.MODAL.DELETE' | translate }}
+    </button>
+</form>
diff --git a/src/ExpensesCalculator.UI/src/app/modals/recommendation-form/recommendation-delete-form.component.ts b/src/ExpensesCalculator.UI/src/app/modals/recommendation-form/recommendation-delete-form.component.ts
new file mode 100644
index 0000000..9008a58
--- /dev/null
+++ b/src/ExpensesCalculator.UI/src/app/modals/recommendation-form/recommendation-delete-form.component.ts
@@ -0,0 +1,64 @@
+import { Component } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { TranslatePipe, TranslateService } from '@ngx-translate/core';
+import { ModalService } from '../../services/modal.service';
+import { ItemsService } from '../../services/items.service';
+import { ToastService } from '../../services/toast.service';
+
+@Component({
+  selector: 'app-recommendation-delete-form',
+  standalone: true,
+  imports: [CommonModule, TranslatePipe],
+  templateUrl: './recommendation-delete-form.component.html'
+})
+export class RecommendationDeleteFormComponent {
+  // Injected by modal service
+  modalService!: ModalService;
+
+  // Data passed from parent component
+  id: string = '';
+  name: string = '';
+  comment: string = '';
+  price: number = 0;
+  amount: number = 1;
+  rating: number = 0;
+  tags: string[] = [];
+  canDelete: boolean = true;
+
+  // Callback functions passed from parent
+  onSuccess?: () => void;
+
+  constructor(
+    private translate: TranslateService,
+    private itemsService: ItemsService,
+    private toastService: ToastService
+  ) {}
+
+  submit(): void {
+    this.itemsService.deleteRecommendationItem(this.id).subscribe({
+      next: () => {
+        this.modalService.close();
+        this.toastService.success(
+          this.translate.instant('ITEMS.TOAST.SUCCESS'),
+          this.translate.instant('ITEMS.TOAST.DELETE_SUCCESS')
+        );
+
+        // Call success callback to refresh the list
+        if (this.onSuccess) {
+          this.onSuccess();
+        }
+      },
+      error: error => {
+        const errorMessage = error?.error?.message || error?.message || this.translate.instant('ITEMS.TOAST.DELETE_ERROR');
+        this.toastService.error(
+          this.translate.instant('ITEMS.TOAST.ERROR'),
+          errorMessage
+        );
+      }
+    });
+  }
+
+  getTotalPrice(): number {
+    return this.price * this.amount;
+  }
+}
diff --git a/src/ExpensesCalculator.UI/src/app/modals/recommendation-form/recommendation-edit-form.component.html b/src/ExpensesCalculator.UI/src/app/modals/recommendation-form/recommendation-edit-form.component.html
new file mode 100644
index 0000000..2e94d87
--- /dev/null
+++ b/src/ExpensesCalculator.UI/src/app/modals/recommendation-form/recommendation-edit-form.component.html
@@ -0,0 +1,88 @@
+<form>
+    <div class="form-group mb-2">
+        <div class="d-flex justify-content-between align-items-center">
+            <label class="control-label mb-0"><i class="bi bi-box-seam me-1"></i>{{ 'ITEMS.MODAL.NAME' | translate }}<span class="text-danger">*</span></label>
+            <small class="text-white" style="font-size: 0.75rem;">{{ name.length }}/20</small>
+        </div>
+        <input [(ngModel)]="name" name="name" class="form-control" [class.is-invalid]="formErrors['name']"
+            [class.is-valid]="formValidated && !formErrors['name'] && name.trim()" maxlength="20" required [disabled]="!canEdit" />
+        <div class="invalid-feedback" *ngIf="formErrors['name']">{{ formErrors['name'] }}</div>
+    </div>
+    <div class="form-group mb-2">
+        <div class="d-flex justify-content-between align-items-center">
+            <label class="control-label mb-0"><i class="bi bi-chat-text me-1"></i>{{ 'ITEMS.MODAL.COMMENT' | translate }}</label>
+            <small class="text-white" style="font-size: 0.75rem;">{{ comment.length }}/120</small>
+        </div>
+        <textarea [(ngModel)]="comment" name="comment" class="form-control" rows="3" maxlength="120"
+            style="resize: none;" [disabled]="!canEdit"></textarea>
+    </div>
+    <div class="row mb-2">
+        <div class="col-6 col-md-3">
+            <div class="form-group">
+                <i class="bi bi-currency-dollar mx-1"></i>
+                <label class="control-label">{{ 'ITEMS.MODAL.PRICE' | translate }}<span class="text-danger">*</span></label>
+                <input type="number" [(ngModel)]="price" name="price" class="form-control" step="0.01" min="0"
+                    [class.is-invalid]="formErrors['price']"
+                    [class.is-valid]="formValidated && !formErrors['price'] && price > 0" required [disabled]="!canEdit" />
+                <div class="invalid-feedback" *ngIf="formErrors['price']">{{ formErrors['price'] }}</div>
+            </div>
+        </div>
+        <div class="col-6 col-md-3">
+            <div class="form-group">
+                <i class="bi bi-grid-fill mx-1"></i>
+                <label class="control-label">{{ 'ITEMS.MODAL.AMOUNT' | translate }}<span class="text-danger">*</span></label>
+                <input type="number" [(ngModel)]="amount" name="amount" class="form-control" min="1"
+                    [class.is-invalid]="formErrors['amount']"
+                    [class.is-valid]="formValidated && !formErrors['amount'] && amount > 0" required [disabled]="!canEdit" />
+                <div class="invalid-feedback" *ngIf="formErrors['amount']">{{ formErrors['amount'] }}</div>
+            </div>
+        </div>
+        <div class="col-12 col-md-6">
+            <div class="form-group">
+                <i class="bi bi-star-fill mx-1"></i>
+                <label class="control-label mb-0">{{ 'ITEMS.MODAL.RATING' | translate }}<span class="text-danger">*</span></label>
+                <div class="d-flex align-items-center" style="padding-top: 0.3rem;">
+                    <div class="star-rating d-flex justify-content-between" style="flex: 1; margin-right: 0.5rem;">
+                        <i *ngFor="let star of [1,2,3,4,5,6,7,8,9,10]"
+                            [class]="star <= (hoverRating || rating) ? 'bi bi-star-fill' : 'bi bi-star'"
+                            [style.cursor]="canEdit ? 'pointer' : 'default'"
+                            (mouseenter)="canEdit && setHoverRating(star)" (mouseleave)="canEdit && setHoverRating(0)"
+                            (click)="canEdit && setRating(star)"
+                            style="font-size: 1.2rem; color: #ffc107;"></i>
+                    </div>
+                    <span class="text-white text-nowrap" style="min-width: 50px; text-align: right; display: inline-block;">{{ (hoverRating || rating) }}/10</span>
+                </div>
+                <div class="invalid-feedback d-block" *ngIf="formErrors['rating']">{{ formErrors['rating'] }}</div>
+            </div>
+        </div>
+    </div>
+    <div class="form-group mb-3">
+        <div class="d-flex justify-content-between align-items-center">
+            <label class="control-label fw-normal mb-0"><i class="bi bi-tags me-1"></i>{{ 'ITEMS.MODAL.TAGS' | translate }}</label>
+            <small class="text-white" style="font-size: 0.75rem;">{{ tags.length }}/5</small>
+        </div>
+        <div class="input-group border-secondary mb-2">
+            <input [(ngModel)]="tagInput" name="tagInput" class="form-control"
+                [placeholder]="'ITEMS.MODAL.TAG_PLACEHOLDER' | translate" [disabled]="tags.length >= 5 || !canEdit"
+                maxlength="15" (keydown.enter)="addTag(); $event.preventDefault()" />
+            <button type="button" class="btn bg-white text-dark border border-dark" (click)="addTag()"
+                [disabled]="tags.length >= 5 || !canEdit">
+                <i class="bi bi-plus"></i>
+            </button>
+        </div>
+        <div class="mt-1" style="max-height: 75px; overflow-x: auto; overflow-y: hidden; white-space: nowrap;"
+            *ngIf="tags.length > 0">
+            <span *ngFor="let tag of tags" class="badge border border-light text-white fw-normal me-2 mb-1"
+                style="font-size: 0.85rem; display: inline-block;">
+                #{{ tag }}
+                <i *ngIf="canEdit" class="bi bi-x ms-1" style="cursor: pointer;" (click)="removeTag(tag)"></i>
+            </span>
+        </div>
+    </div>
+    <div class="alert alert-warning p-2 mb-3" *ngIf="!canEdit" style="font-size: 0.9rem;">
+        <i class="bi bi-info-circle me-2"></i>{{ 'ITEMS.MODAL.CANNOT_EDIT_NOT_OWNER' | translate }}
+    </div>
+    <button type="button" class="btn btn-warning" (click)="submit()" [disabled]="!canEdit">
+        <i class="bi bi-pencil me-1"></i>{{ 'ITEMS.MODAL.SAVE' | translate }}
+    </button>
+</form>
diff --git a/src/ExpensesCalculator.UI/src/app/modals/recommendation-form/recommendation-edit-form.component.ts b/src/ExpensesCalculator.UI/src/app/modals/recommendation-form/recommendation-edit-form.component.ts
new file mode 100644
index 0000000..184a1c2
--- /dev/null
+++ b/src/ExpensesCalculator.UI/src/app/modals/recommendation-form/recommendation-edit-form.component.ts
@@ -0,0 +1,129 @@
+import { Component } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FormsModule } from '@angular/forms';
+import { TranslatePipe, TranslateService } from '@ngx-translate/core';
+import { ModalService } from '../../services/modal.service';
+import { ItemsService } from '../../services/items.service';
+import { ToastService } from '../../services/toast.service';
+import { parseValidationErrors } from '../../shared/models/validation-errors.model';
+
+@Component({
+  selector: 'app-recommendation-edit-form',
+  standalone: true,
+  imports: [CommonModule, FormsModule, TranslatePipe],
+  templateUrl: './recommendation-edit-form.component.html'
+})
+export class RecommendationEditFormComponent {
+  // Injected by modal service
+  modalService!: ModalService;
+
+  // Data passed from parent component
+  id: string = '';
+  name: string = '';
+  comment: string = '';
+  price: number = 0;
+  amount: number = 1;
+  rating: number = 0;
+  hoverRating: number = 0;
+  tags: string[] = [];
+  tagInput: string = '';
+  canEdit: boolean = true;
+
+  // Form validation
+  formErrors: { [key: string]: string } = {};
+  formValidated: boolean = false;
+
+  // Callback functions passed from parent
+  onSuccess?: () => void;
+
+  constructor(
+    private translate: TranslateService,
+    private itemsService: ItemsService,
+    private toastService: ToastService
+  ) {}
+
+  validateForm(): boolean {
+    this.formErrors = {};
+    this.formValidated = true;
+
+    if (!this.name.trim()) {
+      this.formErrors['name'] = this.translate.instant('ITEMS.VALIDATION.NAME_REQUIRED');
+    }
+    if (this.price <= 0) {
+      this.formErrors['price'] = this.translate.instant('ITEMS.VALIDATION.PRICE_INVALID');
+    }
+    if (this.amount <= 0) {
+      this.formErrors['amount'] = this.translate.instant('ITEMS.VALIDATION.AMOUNT_INVALID');
+    }
+    if (this.rating <= 0) {
+      this.formErrors['rating'] = this.translate.instant('ITEMS.VALIDATION.RATING_REQUIRED');
+    }
+
+    return Object.keys(this.formErrors).length === 0;
+  }
+
+  submit(): void {
+    if (!this.validateForm()) return;
+    this.formValidated = true;
+
+    const updatedItem = {
+      id: this.id,
+      name: this.name,
+      comment: this.comment,
+      price: this.price,
+      amount: this.amount,
+      rating: this.rating,
+      tags: this.tags
+    };
+
+    this.itemsService.editRecommendationItem(updatedItem).subscribe({
+      next: () => {
+        this.modalService.close();
+        this.toastService.success(
+          this.translate.instant('ITEMS.TOAST.SUCCESS'),
+          this.translate.instant('ITEMS.TOAST.EDIT_SUCCESS')
+        );
+
+        // Call success callback to refresh the list
+        if (this.onSuccess) {
+          this.onSuccess();
+        }
+      },
+      error: error => {
+        this.formErrors = parseValidationErrors(error);
+        this.formValidated = true;
+        if (Object.keys(this.formErrors).length === 0 || this.formErrors['general']) {
+          const errorMessage = this.formErrors['general'] || error?.error?.message || error?.message || this.translate.instant('ITEMS.TOAST.EDIT_ERROR');
+          this.toastService.error(
+            this.translate.instant('ITEMS.TOAST.ERROR'),
+            errorMessage
+          );
+        }
+      }
+    });
+  }
+
+  setRating(value: number): void {
+    this.rating = value;
+  }
+
+  setHoverRating(value: number): void {
+    this.hoverRating = value;
+  }
+
+  addTag(): void {
+    const tag = this.tagInput.trim();
+    if (tag && !this.tags.includes(tag)) {
+      this.tags.push(tag);
+      this.tagInput = '';
+    }
+  }
+
+  removeTag(tag: string): void {
+    this.tags = this.tags.filter(t => t !== tag);
+  }
+
+  getTotalPrice(): number {
+    return this.price * this.amount;
+  }
+}
diff --git a/src/ExpensesCalculator.UI/src/app/recommendations/recommendations/recommendations.component.html b/src/ExpensesCalculator.UI/src/app/recommendations/recommendations/recommendations.component.html
index b41caac..5c1473f 100644
--- a/src/ExpensesCalculator.UI/src/app/recommendations/recommendations/recommendations.component.html
+++ b/src/ExpensesCalculator.UI/src/app/recommendations/recommendations/recommendations.component.html
@@ -238,8 +238,9 @@ <h3>{{ 'ITEMS.NO_SEARCH_RESULTS' | translate }}</h3>
                                     <i class="bi bi-box-seam"></i>
                                     {{ item.name || '-' }}
                                 </h5>
+                                <!-- Desktop buttons (top-right) -->
                                 <!-- Edit and Delete buttons for editable items -->
-                                <div *ngIf="item.canEdit" class="d-flex gap-1" (click)="$event.stopPropagation()">
+                                <div *ngIf="item.canEdit" class="d-none d-md-flex gap-1" (click)="$event.stopPropagation()">
                                     <button class="btn btn-outline-warning text-white btn-action-edit" type="button"
                                         (click)="openModal('edit', item.id)"
                                         style="padding: 0; font-size: 0.85rem; width: 1.5rem; height: 1.5rem; line-height: 1; display: flex; align-items: center; justify-content: center;">
@@ -299,6 +300,18 @@ <h3>{{ 'ITEMS.NO_SEARCH_RESULTS' | translate }}</h3>
                                 style="min-height: 10px; font-size: 0.9rem; color: rgba(255, 255, 255, 0.5);">
                                 {{ 'ITEMS.NO_TAGS' | translate }}
                             </div>
+
+                            <!-- Mobile buttons (below tags) - only for editable items -->
+                            <div *ngIf="item.canEdit" class="d-flex d-md-none gap-2 mt-2" (click)="$event.stopPropagation()">
+                                <button class="btn btn-sm btn-outline-warning text-white flex-fill" type="button"
+                                    (click)="openModal('edit', item.id)">
+                                    <i class="bi bi-pencil me-1"></i>{{ 'ITEMS.MODAL.SAVE' | translate }}
+                                </button>
+                                <button class="btn btn-sm btn-outline-danger text-white flex-fill" type="button"
+                                    (click)="openModal('delete', item.id)">
+                                    <i class="bi bi-trash me-1"></i>{{ 'ITEMS.MODAL.DELETE' | translate }}
+                                </button>
+                            </div>
                         </div>
                     </div>
                     <!-- Card with tour anchor (first item) -->
@@ -312,8 +325,9 @@ <h3>{{ 'ITEMS.NO_SEARCH_RESULTS' | translate }}</h3>
                                     <i class="bi bi-box-seam"></i>
                                     {{ item.name || '-' }}
                                 </h5>
+                                <!-- Desktop buttons (top-right) -->
                                 <!-- Edit and Delete buttons for editable items -->
-                                <div *ngIf="item.canEdit" class="d-flex gap-1" (click)="$event.stopPropagation()">
+                                <div *ngIf="item.canEdit" class="d-none d-md-flex gap-1" (click)="$event.stopPropagation()">
                                     <button class="btn btn-outline-warning text-white btn-action-edit" type="button"
                                         (click)="openModal('edit', item.id)"
                                         style="padding: 0; font-size: 0.85rem; width: 1.5rem; height: 1.5rem; line-height: 1; display: flex; align-items: center; justify-content: center;">
@@ -373,6 +387,18 @@ <h3>{{ 'ITEMS.NO_SEARCH_RESULTS' | translate }}</h3>
                                 style="min-height: 10px; font-size: 0.9rem; color: rgba(255, 255, 255, 0.5);">
                                 {{ 'ITEMS.NO_TAGS' | translate }}
                             </div>
+
+                            <!-- Mobile buttons (below tags) - only for editable items -->
+                            <div *ngIf="item.canEdit" class="d-flex d-md-none gap-2 mt-2" (click)="$event.stopPropagation()">
+                                <button class="btn btn-sm btn-outline-warning text-white flex-fill" type="button"
+                                    (click)="openModal('edit', item.id)">
+                                    <i class="bi bi-pencil me-1"></i>{{ 'ITEMS.MODAL.SAVE' | translate }}
+                                </button>
+                                <button class="btn btn-sm btn-outline-danger text-white flex-fill" type="button"
+                                    (click)="openModal('delete', item.id)">
+                                    <i class="bi bi-trash me-1"></i>{{ 'ITEMS.MODAL.DELETE' | translate }}
+                                </button>
+                            </div>
                         </div>
                     </div>
                 </div>
@@ -409,270 +435,4 @@ <h3>{{ 'ITEMS.NO_SEARCH_RESULTS' | translate }}</h3>
             </div>
         </div>
     </div>
-</div>
-
-<!-- Modal Window -->
-<app-modal-window [modalId]="'recommendationsModal'" [modalTitle]="modalTitle"
-    [currentModalContent]="currentModalContent" [modalSize]="'lg'">
-    <div class="modal-header py-2 bg-dark text-white border-secondary">
-        <h5 class="modal-title">{{ modalTitle }}</h5>
-        <button type="button" class="btn-close btn-close-white" (click)="hideModal()" aria-label="Close"></button>
-    </div>
-    <div class="modal-body bg-dark text-white" style="overflow: visible;">
-        <!-- Add Form -->
-        <form *ngIf="currentModalContent === 'add'">
-            <div class="alert alert-info p-2 mb-3" style="font-size: 0.9rem;">
-                <i class="bi bi-info-circle me-2"></i>{{ 'ITEMS.MODAL.RECOMMENDATIONS_INFO' | translate }}
-            </div>
-            <div class="form-group mb-2">
-                <div class="d-flex justify-content-between align-items-center">
-                    <label class="control-label mb-0"><i class="bi bi-box-seam me-1"></i>{{ 'ITEMS.MODAL.NAME' |
-                        translate }}<span class="text-danger">*</span></label>
-                    <small class="text-white" style="font-size: 0.75rem;">{{ name.length }}/20</small>
-                </div>
-                <input [(ngModel)]="name" name="name" class="form-control" [class.is-invalid]="formErrors['name']"
-                    [class.is-valid]="formValidated && !formErrors['name'] && name.trim()" maxlength="20" required />
-                <div class="invalid-feedback" *ngIf="formErrors['name']">{{ formErrors['name'] }}</div>
-            </div>
-            <div class="form-group mb-2">
-                <div class="d-flex justify-content-between align-items-center">
-                    <label class="control-label mb-0"><i class="bi bi-chat-text me-1"></i>{{ 'ITEMS.MODAL.COMMENT' | translate }}</label>
-                    <small class="text-white" style="font-size: 0.75rem;">{{ comment.length }}/120</small>
-                </div>
-                <textarea [(ngModel)]="comment" name="comment" class="form-control" rows="3" maxlength="120"
-                    style="resize: none;"></textarea>
-            </div>
-            <div class="row mb-2">
-                <div class="col-6 col-md-3">
-                    <div class="form-group">
-                        <i class="bi bi-currency-dollar mx-1"></i>
-                        <label class="control-label">{{ 'ITEMS.MODAL.PRICE' | translate }}<span
-                                class="text-danger">*</span></label>
-                        <input type="number" [(ngModel)]="price" name="price" class="form-control" step="0.01" min="0"
-                            [class.is-invalid]="formErrors['price']"
-                            [class.is-valid]="formValidated && !formErrors['price'] && price > 0" required />
-                        <div class="invalid-feedback" *ngIf="formErrors['price']">{{ formErrors['price'] }}</div>
-                    </div>
-                </div>
-                <div class="col-6 col-md-3">
-                    <div class="form-group">
-                        <i class="bi bi-grid-fill mx-1"></i>
-                        <label class="control-label">{{ 'ITEMS.MODAL.AMOUNT' | translate }}<span
-                                class="text-danger">*</span></label>
-                        <input type="number" [(ngModel)]="amount" name="amount" class="form-control" min="1"
-                            [class.is-invalid]="formErrors['amount']"
-                            [class.is-valid]="formValidated && !formErrors['amount'] && amount > 0" required />
-                        <div class="invalid-feedback" *ngIf="formErrors['amount']">{{ formErrors['amount'] }}</div>
-                    </div>
-                </div>
-                <div class="col-12 col-md-6">
-                    <div class="form-group">
-                        <i class="bi bi-star-fill mx-1"></i>
-                        <label class="control-label mb-0">{{ 'ITEMS.MODAL.RATING' | translate }}<span
-                                class="text-danger">*</span></label>
-                        <div class="d-flex align-items-center" style="padding-top: 0.3rem;">
-                            <div class="star-rating d-flex justify-content-between"
-                                style="flex: 1; margin-right: 0.5rem;">
-                                <i *ngFor="let star of [1,2,3,4,5,6,7,8,9,10]"
-                                    [class]="star <= (hoverRating || rating) ? 'bi bi-star-fill' : 'bi bi-star'"
-                                    (mouseenter)="hoverRating = star" (mouseleave)="hoverRating = 0"
-                                    (click)="setRating(star)"
-                                    style="cursor: pointer; font-size: 1.2rem; color: #ffc107;"></i>
-                            </div>
-                            <span class="text-white text-nowrap"
-                                style="min-width: 50px; text-align: right; display: inline-block;">{{ (hoverRating ||
-                                rating) }}/10</span>
-                        </div>
-                        <div class="invalid-feedback d-block" *ngIf="formErrors['rating']">{{ formErrors['rating'] }}
-                        </div>
-                    </div>
-                </div>
-            </div>
-            <div class="form-group mb-3">
-                <div class="d-flex justify-content-between align-items-center">
-                    <label class="control-label fw-normal mb-0"><i class="bi bi-tags me-1"></i>{{ 'ITEMS.MODAL.TAGS' |
-                        translate }}</label>
-                    <small class="text-white" style="font-size: 0.75rem;">{{ tags.length }}/5</small>
-                </div>
-                <div class="input-group border-secondary mb-2">
-                    <input [(ngModel)]="tagInput" name="tagInput" class="form-control"
-                        [placeholder]="'ITEMS.MODAL.TAG_PLACEHOLDER' | translate" [disabled]="tags.length >= 5"
-                        maxlength="15" (keydown.enter)="addTag(); $event.preventDefault()" />
-                    <button type="button" class="btn bg-white text-dark border border-dark" (click)="addTag()"
-                        [disabled]="tags.length >= 5">
-                        <i class="bi bi-plus"></i>
-                    </button>
-                </div>
-                <div class="mt-1" style="max-height: 75px; overflow-x: auto; overflow-y: hidden; white-space: nowrap;"
-                    *ngIf="tags.length > 0">
-                    <span *ngFor="let tag of tags" class="badge border border-light text-white fw-normal me-2 mb-1"
-                        style="font-size: 0.85rem; display: inline-block;">
-                        #{{ tag }}
-                        <i class="bi bi-x ms-1" style="cursor: pointer;" (click)="removeTag(tag)"></i>
-                    </span>
-                </div>
-            </div>
-            <button type="button" class="btn btn-success" (click)="createItem()">
-                <i class="bi bi-plus-circle me-1"></i>{{ 'ITEMS.MODAL.ADD' | translate }}
-            </button>
-        </form>
-
-        <!-- Edit Form -->
-        <form *ngIf="currentModalContent === 'edit'">
-            <div class="form-group mb-2">
-                <div class="d-flex justify-content-between align-items-center">
-                    <label class="control-label mb-0"><i class="bi bi-box-seam me-1"></i>{{ 'ITEMS.MODAL.NAME' |
-                        translate }}<span class="text-danger">*</span></label>
-                    <small class="text-white" style="font-size: 0.75rem;">{{ name.length }}/20</small>
-                </div>
-                <input [(ngModel)]="name" name="name" class="form-control" [class.is-invalid]="formErrors['name']"
-                    [class.is-valid]="formValidated && !formErrors['name'] && name.trim()" maxlength="20" required />
-                <div class="invalid-feedback" *ngIf="formErrors['name']">{{ formErrors['name'] }}</div>
-            </div>
-            <div class="form-group mb-2">
-                <div class="d-flex justify-content-between align-items-center">
-                    <label class="control-label mb-0"><i class="bi bi-chat-text me-1"></i>{{ 'ITEMS.MODAL.COMMENT' |
-                        translate }}</label>
-                    <small class="text-white" style="font-size: 0.75rem;">{{ comment.length }}/120</small>
-                </div>
-                <textarea [(ngModel)]="comment" name="comment" class="form-control" rows="3" maxlength="120"
-                    style="resize: none;"></textarea>
-            </div>
-            <div class="row mb-2">
-                <div class="col-6 col-md-3">
-                    <div class="form-group">
-                        <i class="bi bi-currency-dollar mx-1"></i>
-                        <label class="control-label">{{ 'ITEMS.MODAL.PRICE' | translate }}<span
-                                class="text-danger">*</span></label>
-                        <input type="number" [(ngModel)]="price" name="price" class="form-control" step="0.01" min="0"
-                            [class.is-invalid]="formErrors['price']"
-                            [class.is-valid]="formValidated && !formErrors['price'] && price > 0" required />
-                        <div class="invalid-feedback" *ngIf="formErrors['price']">{{ formErrors['price'] }}</div>
-                    </div>
-                </div>
-                <div class="col-6 col-md-3">
-                    <div class="form-group">
-                        <i class="bi bi-grid-fill mx-1"></i>
-                        <label class="control-label">{{ 'ITEMS.MODAL.AMOUNT' | translate }}<span
-                                class="text-danger">*</span></label>
-                        <input type="number" [(ngModel)]="amount" name="amount" class="form-control" min="1"
-                            [class.is-invalid]="formErrors['amount']"
-                            [class.is-valid]="formValidated && !formErrors['amount'] && amount > 0" required />
-                        <div class="invalid-feedback" *ngIf="formErrors['amount']">{{ formErrors['amount'] }}</div>
-                    </div>
-                </div>
-                <div class="col-12 col-md-6">
-                    <div class="form-group">
-                        <i class="bi bi-star-fill mx-1"></i>
-                        <label class="control-label mb-0">{{ 'ITEMS.MODAL.RATING' | translate }}<span
-                                class="text-danger">*</span></label>
-                        <div class="d-flex align-items-center" style="padding-top: 0.3rem;">
-                            <div class="star-rating d-flex justify-content-between"
-                                style="flex: 1; margin-right: 0.5rem;">
-                                <i *ngFor="let star of [1,2,3,4,5,6,7,8,9,10]"
-                                    [class]="star <= (hoverRating || rating) ? 'bi bi-star-fill' : 'bi bi-star'"
-                                    (mouseenter)="hoverRating = star" (mouseleave)="hoverRating = 0"
-                                    (click)="setRating(star)"
-                                    style="cursor: pointer; font-size: 1.2rem; color: #ffc107;"></i>
-                            </div>
-                            <span class="text-white text-nowrap"
-                                style="min-width: 50px; text-align: right; display: inline-block;">{{ (hoverRating ||
-                                rating) }}/10</span>
-                        </div>
-                        <div class="invalid-feedback d-block" *ngIf="formErrors['rating']">{{ formErrors['rating'] }}
-                        </div>
-                    </div>
-                </div>
-            </div>
-            <div class="form-group mb-3">
-                <div class="d-flex justify-content-between align-items-center">
-                    <label class="control-label fw-normal mb-0"><i class="bi bi-tags me-1"></i>{{ 'ITEMS.MODAL.TAGS' |
-                        translate }}</label>
-                    <small class="text-white" style="font-size: 0.75rem;">{{ tags.length }}/5</small>
-                </div>
-                <div class="input-group border-secondary mb-2">
-                    <input [(ngModel)]="tagInput" name="tagInput" class="form-control"
-                        [placeholder]="'ITEMS.MODAL.TAG_PLACEHOLDER' | translate" [disabled]="tags.length >= 5"
-                        maxlength="15" (keydown.enter)="addTag(); $event.preventDefault()" />
-                    <button type="button" class="btn bg-white text-dark border border-dark" (click)="addTag()"
-                        [disabled]="tags.length >= 5">
-                        <i class="bi bi-plus"></i>
-                    </button>
-                </div>
-                <div class="mt-1" style="max-height: 75px; overflow-x: auto; overflow-y: hidden; white-space: nowrap;"
-                    *ngIf="tags.length > 0">
-                    <span *ngFor="let tag of tags" class="badge border border-light text-white fw-normal me-2 mb-1"
-                        style="font-size: 0.85rem; display: inline-block;">
-                        #{{ tag }}
-                        <i class="bi bi-x ms-1" style="cursor: pointer;" (click)="removeTag(tag)"></i>
-                    </span>
-                </div>
-            </div>
-            <button type="button" class="btn btn-warning" (click)="editItem()">
-                <i class="bi bi-pencil me-1"></i>{{ 'ITEMS.MODAL.SAVE' | translate }}
-            </button>
-        </form>
-
-        <!-- Delete Confirmation -->
-        <div *ngIf="currentModalContent === 'delete'">
-            <div class="form-group mb-3">
-                <i class="bi bi-box-seam mx-1"></i>
-                <label class="control-label">{{ 'ITEMS.MODAL.NAME' | translate }}</label>
-                <input [value]="name" class="form-control" disabled />
-            </div>
-            <div class="form-group mb-3">
-                <i class="bi bi-chat-text mx-1"></i>
-                <label class="control-label">{{ 'ITEMS.MODAL.COMMENT' | translate }}</label>
-                <textarea [value]="comment" class="form-control" rows="3" disabled></textarea>
-            </div>
-            <div class="row mb-3">
-                <div class="col-6 col-md-3">
-                    <div class="form-group">
-                        <i class="bi bi-currency-dollar mx-1"></i>
-                        <label class="control-label">{{ 'ITEMS.MODAL.PRICE' | translate }}</label>
-                        <input type="number" [value]="price" class="form-control" disabled />
-                    </div>
-                </div>
-                <div class="col-6 col-md-3">
-                    <div class="form-group">
-                        <i class="bi bi-grid-fill mx-1"></i>
-                        <label class="control-label">{{ 'ITEMS.MODAL.AMOUNT' | translate }}</label>
-                        <input type="number" [value]="amount" class="form-control" disabled />
-                    </div>
-                </div>
-                <div class="col-12 col-md-6">
-                    <div class="form-group">
-                        <i class="bi bi-star-fill mx-1"></i>
-                        <label class="control-label mb-0">{{ 'ITEMS.MODAL.RATING' | translate }}</label>
-                        <div class="d-flex align-items-center" style="padding-top: 0.3rem;">
-                            <div class="star-rating d-flex justify-content-between"
-                                style="flex: 1; margin-right: 0.5rem;">
-                                <i *ngFor="let star of [1,2,3,4,5,6,7,8,9,10]"
-                                    [class]="star <= rating ? 'bi bi-star-fill' : 'bi bi-star'"
-                                    style="font-size: 1.2rem; color: #ffc107;"></i>
-                            </div>
-                            <span class="text-white text-nowrap"
-                                style="min-width: 50px; text-align: right; display: inline-block;">{{ rating
-                                }}/10</span>
-                        </div>
-                    </div>
-                </div>
-            </div>
-            <div class="form-group mb-3" *ngIf="tags.length > 0">
-                <i class="bi bi-tags mx-1"></i>
-                <label class="control-label fw-normal">{{ 'ITEMS.MODAL.TAGS' | translate }}</label>
-                <div class="mt-2">
-                    <span *ngFor="let tag of tags"
-                        class="badge border border-secondary text-secondary fw-normal me-2 mb-2"
-                        style="font-size: 0.9rem;">
-                        #{{ tag }}
-                    </span>
-                </div>
-            </div>
-            <button type="button" class="btn btn-danger" (click)="deleteItem()">
-                <i class="bi bi-trash me-1"></i>{{ 'ITEMS.MODAL.DELETE' | translate }}
-            </button>
-        </div>
-
-    </div>
-</app-modal-window>
\ No newline at end of file
+</div>
\ No newline at end of file
diff --git a/src/ExpensesCalculator.UI/src/app/recommendations/recommendations/recommendations.component.ts b/src/ExpensesCalculator.UI/src/app/recommendations/recommendations/recommendations.component.ts
index ccc8b5e..76755a5 100644
--- a/src/ExpensesCalculator.UI/src/app/recommendations/recommendations/recommendations.component.ts
+++ b/src/ExpensesCalculator.UI/src/app/recommendations/recommendations/recommendations.component.ts
@@ -3,10 +3,12 @@ import { CommonModule } from '@angular/common';
 import { FormsModule } from '@angular/forms';
 import { RouterLink } from '@angular/router';
 import { TranslatePipe, TranslateService } from '@ngx-translate/core';
-import { ModalWindowComponent } from '../../shared/modal-window/modal-window.component';
+import { ModalService } from '../../services/modal.service';
 import { FilterBarComponent, FilterOption } from '../../shared/filter-bar/filter-bar.component';
 import { SortBarComponent, SortOption } from '../../shared/sort-bar/sort-bar.component';
-import { ValidationErrors, parseValidationErrors } from '../../shared/models/validation-errors.model';
+import { RecommendationAddFormComponent } from '../../modals/recommendation-form/recommendation-add-form.component';
+import { RecommendationEditFormComponent } from '../../modals/recommendation-form/recommendation-edit-form.component';
+import { RecommendationDeleteFormComponent } from '../../modals/recommendation-form/recommendation-delete-form.component';
 import { ItemsService, Item } from '../../services/items.service';
 import { ToastService } from '../../services/toast.service';
 import { Subject, Subscription } from 'rxjs';
@@ -18,7 +20,7 @@ declare var bootstrap: any;
 @Component({
   selector: 'app-recommendations',
   standalone: true,
-  imports: [CommonModule, FormsModule, RouterLink, ModalWindowComponent, FilterBarComponent, SortBarComponent, TranslatePipe, TourAnchorNgBootstrapDirective, TourStepTemplateComponent],
+  imports: [CommonModule, FormsModule, RouterLink, FilterBarComponent, SortBarComponent, TranslatePipe, TourAnchorNgBootstrapDirective, TourStepTemplateComponent],
   templateUrl: './recommendations.component.html',
   styleUrl: './recommendations.component.css'
 })
@@ -34,29 +36,6 @@ export class RecommendationsComponent implements OnInit, AfterViewInit, OnDestro
   totalPages = 1;
   totalCount = 0;
 
-  // Modal properties
-  modalInstance: any;
-  currentModalContent: 'add' | 'edit' | 'delete' = 'add';
-  modalTitle: string = '';
-
-  // Form properties
-  id = '';
-  name = '';
-  comment = '';
-  price = 0;
-  amount = 1;
-  rating = 0;
-  hoverRating = 0;
-  tags: string[] = [];
-  tagInput = '';
-  selectedUsers: string[] = [];
-  users: string[] = []; // Will be populated from existing items
-  canEditCurrentItem = false;
-
-  // Validation properties
-  formErrors: ValidationErrors = {};
-  formValidated = false;
-
   // Filter and sort properties
   filterText = '';
   filterCriteria: string = 'Name';
@@ -131,6 +110,7 @@ export class RecommendationsComponent implements OnInit, AfterViewInit, OnDestro
     private itemsService: ItemsService,
     private translate: TranslateService,
     private toastService: ToastService,
+    private modalService: ModalService,
     public tourService: TourService
   ) {}
 
@@ -244,21 +224,6 @@ export class RecommendationsComponent implements OnInit, AfterViewInit, OnDestro
     });
   }
 
-  loadSingleItem(id: string): void {
-    const item = this.itemsList.find(i => i.id === id);
-    if (item) {
-      this.id = item.id;
-      this.name = item.name;
-      this.comment = item.comment || '';
-      this.price = item.price;
-      this.amount = item.amount;
-      this.rating = item.rating;
-      this.tags = [...item.tags];
-      this.selectedUsers = [...item.users];
-      this.canEditCurrentItem = item.canEdit || false;
-    }
-  }
-
   goToNextPage(): void {
     if (this.currentPage < this.totalPages) {
       this.currentPage++;
@@ -350,68 +315,53 @@ export class RecommendationsComponent implements OnInit, AfterViewInit, OnDestro
   }
 
   openModal(type: 'add' | 'edit' | 'delete', id: string = ''): void {
-    this.currentModalContent = type;
-    this.modalTitle = this.translate.instant(`ITEMS.MODAL.${type.toUpperCase()}_TITLE`);
-
-    const modalElement = document.getElementById('recommendationsModal');
-    if (!modalElement) return;
-
     if (type === 'add') {
-      this.clearFormData();
-    } else if (id) {
-      this.loadSingleItem(id);
-    }
-
-    if (!this.modalInstance) {
-      this.modalInstance = new bootstrap.Modal(modalElement, {
-        backdrop: 'static',
-        keyboard: false
-      });
-    }
-
-    this.formErrors = {};
-    this.formValidated = false;
-    this.modalInstance.show();
-  }
-
-  hideModal(): void {
-    if (this.modalInstance) {
-      this.modalInstance.hide();
-      this.clearFormData();
-    }
-  }
-
-  private clearFormData(): void {
-    this.id = '';
-    this.name = '';
-    this.comment = '';
-    this.price = 0;
-    this.amount = 1;
-    this.rating = 0;
-    this.hoverRating = 0;
-    this.tags = [];
-    this.tagInput = '';
-    this.selectedUsers = [];
-    this.formErrors = {};
-    this.formValidated = false;
-  }
-
-  setRating(rating: number): void {
-    this.rating = rating;
-  }
+      this.modalService.open(
+        RecommendationAddFormComponent,
+        this.translate.instant('ITEMS.MODAL.ADD_TITLE'),
+        { onSuccess: () => this.loadItems() },
+        'lg'
+      );
+    } else if (type === 'edit' && id) {
+      const item = this.itemsList.find(i => i.id === id);
+      if (!item) return;
 
-  addTag(): void {
-    const tag = this.tagInput.trim().replace(/\s+/g, '_').toLowerCase();
-    if (tag && !this.tags.includes(tag)) {
-      this.tags.push(tag);
-      this.tagInput = '';
-    }
-  }
+      this.modalService.open(
+        RecommendationEditFormComponent,
+        this.translate.instant('ITEMS.MODAL.EDIT_TITLE'),
+        {
+          id: item.id,
+          name: item.name,
+          comment: item.comment || '',
+          price: item.price,
+          amount: item.amount,
+          rating: item.rating,
+          tags: [...item.tags],
+          canEdit: item.canEdit || false,
+          onSuccess: () => this.loadItems()
+        },
+        'lg'
+      );
+    } else if (type === 'delete' && id) {
+      const item = this.itemsList.find(i => i.id === id);
+      if (!item) return;
 
-  removeTag(tag: string): void {
-    const index = this.tags.indexOf(tag);
-    if (index > -1) {
-      this.tags.splice(index, 1);
+      this.modalService.open(
+        RecommendationDeleteFormComponent,
+        this.translate.instant('ITEMS.MODAL.DELETE_TITLE'),
+        {
+          id: item.id,
+          name: item.name,
+          comment: item.comment || '',
+          price: item.price,
+          amount: item.amount,
+          rating: item.rating,
+          tags: [...item.tags],
+          canDelete: item.canEdit || false,
+          onSuccess: () => this.loadItems()
+        },
+        'md'
+      );
     }
   }
 
@@ -460,147 +410,6 @@ export class RecommendationsComponent implements OnInit, AfterViewInit, OnDestro
     this.loadItems();
   }
 
-  onUserSelectionChange(user: string, event: any): void {
-    if (event.target.checked) {
-      if (!this.selectedUsers.includes(user)) {
-        this.selectedUsers.push(user);
-      }
-    } else {
-      const index = this.selectedUsers.indexOf(user);
-      if (index > -1) {
-        this.selectedUsers.splice(index, 1);
-      }
-    }
-  }
-
-  isAllUsersSelected(): boolean {
-    return this.users.length > 0 && this.selectedUsers.length === this.users.length;
-  }
-
-  toggleAllUsers(event: any): void {
-    if (event.target.checked) {
-      this.selectedUsers = [...this.users];
-    } else {
-      this.selectedUsers = [];
-    }
-  }
-
-  validateItemForm(): boolean {
-    this.formErrors = {};
-    this.formValidated = true;
-
-    if (!this.name.trim()) {
-      this.formErrors['name'] = this.translate.instant('ITEMS.VALIDATION.NAME_REQUIRED');
-    }
-    if (this.price <= 0) {
-      this.formErrors['price'] = this.translate.instant('ITEMS.VALIDATION.PRICE_INVALID');
-    }
-    if (this.amount <= 0) {
-      this.formErrors['amount'] = this.translate.instant('ITEMS.VALIDATION.AMOUNT_INVALID');
-    }
-    if (this.rating <= 0) {
-      this.formErrors['rating'] = this.translate.instant('ITEMS.VALIDATION.RATING_REQUIRED');
-    }
-
-    return Object.keys(this.formErrors).length === 0;
-  }
-
-  createItem(): void {
-    if (!this.validateItemForm()) return;
-    this.formValidated = true;
-
-    const newItem = {
-      name: this.name,
-      comment: this.comment,
-      price: this.price,
-      amount: this.amount,
-      rating: this.rating,
-      tags: this.tags
-    };
-
-    this.itemsService.createRecommendationItem(newItem).subscribe({
-      next: () => {
-        this.hideModal();
-        // Reload items to get fresh data from server
-        this.loadItems();
-        this.toastService.success(
-          this.translate.instant('ITEMS.TOAST.SUCCESS'),
-          this.translate.instant('ITEMS.TOAST.CREATE_SUCCESS')
-        );
-      },
-      error: error => {
-        this.formErrors = parseValidationErrors(error);
-        this.formValidated = true;
-        if (Object.keys(this.formErrors).length === 0 || this.formErrors['general']) {
-          const errorMessage = this.formErrors['general'] || error?.error?.message || error?.message || this.translate.instant('ITEMS.TOAST.CREATE_ERROR');
-          this.toastService.error(
-            this.translate.instant('ITEMS.TOAST.ERROR'),
-            errorMessage
-          );
-        }
-      }
-    });
-  }
-
-  editItem(): void {
-    if (!this.validateItemForm()) return;
-    this.formValidated = true;
-
-    const updatedItem = {
-      id: this.id,
-      name: this.name,
-      comment: this.comment,
-      price: this.price,
-      amount: this.amount,
-      rating: this.rating,
-      tags: this.tags
-    };
-
-    this.itemsService.editRecommendationItem(updatedItem).subscribe({
-      next: () => {
-        this.hideModal();
-        // Reload items to get fresh data from server
-        this.loadItems();
-        this.toastService.success(
-          this.translate.instant('ITEMS.TOAST.SUCCESS'),
-          this.translate.instant('ITEMS.TOAST.EDIT_SUCCESS')
-        );
-      },
-      error: error => {
-        this.formErrors = parseValidationErrors(error);
-        this.formValidated = true;
-        if (Object.keys(this.formErrors).length === 0 || this.formErrors['general']) {
-          const errorMessage = this.formErrors['general'] || error?.error?.message || error?.message || this.translate.instant('ITEMS.TOAST.EDIT_ERROR');
-          this.toastService.error(
-            this.translate.instant('ITEMS.TOAST.ERROR'),
-            errorMessage
-          );
-        }
-      }
-    });
-  }
-
-  deleteItem(): void {
-    this.itemsService.deleteRecommendationItem(this.id).subscribe({
-      next: () => {
-        this.hideModal();
-        // Reload items to get fresh data from server
-        this.loadItems();
-        this.toastService.success(
-          this.translate.instant('ITEMS.TOAST.SUCCESS'),
-          this.translate.instant('ITEMS.TOAST.DELETE_SUCCESS')
-        );
-      },
-      error: error => {
-        const errorMessage = error?.error?.message || error?.message || this.translate.instant('ITEMS.TOAST.DELETE_ERROR');
-        this.toastService.error(
-          this.translate.instant('ITEMS.TOAST.ERROR'),
-          errorMessage
-        );
-      }
-    });
-  }
-
   translateBackendError(errorMessage: string): string {
     return errorMessage;
   }
diff --git a/src/ExpensesCalculator.UI/src/app/services/form-validation.service.ts b/src/ExpensesCalculator.UI/src/app/services/form-validation.service.ts
index 7e7152b..92e944c 100644
--- a/src/ExpensesCalculator.UI/src/app/services/form-validation.service.ts
+++ b/src/ExpensesCalculator.UI/src/app/services/form-validation.service.ts
@@ -58,13 +58,13 @@ export class FormValidationService {
   /**
    * Validate item form
    */
-  validateItemForm(name: string, price: number, amount: number, rating: number, selectedUsers: string[]): ValidationErrors {
+  validateItemForm(name: string, price: number | null, amount: number, rating: number, selectedUsers: string[]): ValidationErrors {
     const errors: ValidationErrors = {};
 
     if (!name.trim()) {
       errors['name'] = this.translate.instant('ITEMS.VALIDATION.NAME_REQUIRED');
     }
-    if (price <= 0) {
+    if (!price || price <= 0) {
       errors['price'] = this.translate.instant('ITEMS.VALIDATION.PRICE_INVALID');
     }
     if (amount <= 0) {
diff --git a/src/ExpensesCalculator.UI/src/app/services/modal.service.ts b/src/ExpensesCalculator.UI/src/app/services/modal.service.ts
new file mode 100644
index 0000000..7de4d72
--- /dev/null
+++ b/src/ExpensesCalculator.UI/src/app/services/modal.service.ts
@@ -0,0 +1,96 @@
+import { Injectable, Type, ComponentRef } from '@angular/core';
+import { BehaviorSubject, Observable } from 'rxjs';
+
+export interface ModalConfig {
+  component: Type<any>;
+  title: string;
+  size?: 'sm' | 'md' | 'lg' | 'xl';
+  data?: any;
+  show: boolean;
+}
+
+@Injectable({
+  providedIn: 'root'
+})
+export class ModalService {
+  private modalSubject = new BehaviorSubject<ModalConfig | null>(null);
+  public modal$: Observable<ModalConfig | null> = this.modalSubject.asObservable();
+
+  private modalInstance: any = null;
+  private componentRef: ComponentRef<any> | null = null;
+
+  /**
+   * Open a modal with a dynamic component
+   * @param component - The component class to load
+   * @param title - Modal title
+   * @param data - Data to pass to the component
+   * @param size - Modal size
+   */
+  open(component: Type<any>, title: string, data?: any, size: 'sm' | 'md' | 'lg' | 'xl' = 'md'): void {
+    const config: ModalConfig = {
+      component,
+      title,
+      size,
+      data,
+      show: true
+    };
+
+    this.modalSubject.next(config);
+  }
+
+  /**
+   * Close the modal
+   */
+  close(): void {
+    if (this.modalInstance) {
+      this.modalInstance.hide();
+      this.modalInstance = null;
+    }
+
+    const currentModal = this.modalSubject.value;
+    if (currentModal) {
+      this.modalSubject.next({ ...currentModal, show: false });
+
+      // Clear the modal after animation
+      setTimeout(() => {
+        this.modalSubject.next(null);
+        this.componentRef = null;
+      }, 300);
+    }
+  }
+
+  /**
+   * Set the Bootstrap modal instance (called by modal-window component)
+   */
+  setModalInstance(instance: any): void {
+    this.modalInstance = instance;
+  }
+
+  /**
+   * Set the component ref (called by modal-window component)
+   */
+  setComponentRef(ref: ComponentRef<any>): void {
+    this.componentRef = ref;
+  }
+
+  /**
+   * Get the current component ref
+   */
+  getComponentRef(): ComponentRef<any> | null {
+    return this.componentRef;
+  }
+
+  /**
+   * Check if modal is open
+   */
+  isOpen(): boolean {
+    return this.modalSubject.value?.show ?? false;
+  }
+
+  /**
+   * Get current modal config
+   */
+  getCurrentConfig(): ModalConfig | null {
+    return this.modalSubject.value;
+  }
+}
diff --git a/src/ExpensesCalculator.UI/src/app/shared/modal-window/modal-window.component.html b/src/ExpensesCalculator.UI/src/app/shared/modal-window/modal-window.component.html
index da17b8a..47c89a8 100644
--- a/src/ExpensesCalculator.UI/src/app/shared/modal-window/modal-window.component.html
+++ b/src/ExpensesCalculator.UI/src/app/shared/modal-window/modal-window.component.html
@@ -3,7 +3,22 @@
     <div class="modal-dialog modal-dialog-centered"
          [ngClass]="{'modal-sm': modalSize === 'sm', 'modal-lg': modalSize === 'lg', 'modal-xl': modalSize === 'xl'}">
         <div class="modal-content" id="modal-content">
-            <ng-content></ng-content>
+            <!-- Header and content for global modal (service-based) -->
+            <ng-container *ngIf="modalId === 'globalModal'">
+                <div class="modal-header py-2 bg-dark text-white border-secondary">
+                    <h5 class="modal-title" [id]="modalId + 'Label'">{{ modalTitle }}</h5>
+                    <button type="button" class="btn-close btn-close-white" (click)="hideModal()" aria-label="Close"></button>
+                </div>
+                <div class="modal-body bg-dark text-white" style="overflow: visible;">
+                    <!-- Dynamic content will be loaded here -->
+                    <ng-container #dynamicContent></ng-container>
+                </div>
+            </ng-container>
+
+            <!-- Content projection for old modals (backwards compatibility) -->
+            <ng-container *ngIf="modalId !== 'globalModal'">
+                <ng-content></ng-content>
+            </ng-container>
         </div>
     </div>
 </div>
\ No newline at end of file
diff --git a/src/ExpensesCalculator.UI/src/app/shared/modal-window/modal-window.component.ts b/src/ExpensesCalculator.UI/src/app/shared/modal-window/modal-window.component.ts
index 1ed2ca2..e12ec1c 100644
--- a/src/ExpensesCalculator.UI/src/app/shared/modal-window/modal-window.component.ts
+++ b/src/ExpensesCalculator.UI/src/app/shared/modal-window/modal-window.component.ts
@@ -1,5 +1,9 @@
-import { Component, Input } from '@angular/core';
+import { Component, Input, ViewChild, ViewContainerRef, ComponentRef, OnInit, OnDestroy } from '@angular/core';
 import { CommonModule } from '@angular/common';
+import { ModalService, ModalConfig } from '../../services/modal.service';
+import { Subscription } from 'rxjs';
+
+declare const bootstrap: any;
 
 @Component({
   selector: 'app-modal-window',
@@ -7,9 +11,95 @@ import { CommonModule } from '@angular/common';
   templateUrl: './modal-window.component.html',
   styleUrl: './modal-window.component.css'
 })
-export class ModalWindowComponent {
+export class ModalWindowComponent implements OnInit, OnDestroy {
+  @ViewChild('dynamicContent', { read: ViewContainerRef }) dynamicContent!: ViewContainerRef;
+
+  // For backwards compatibility with old modal usage
   @Input() modalId = 'myModal';
   @Input() currentModalContent: 'add' | 'edit' | 'delete' | 'share' = 'add';
   @Input() modalTitle: string = '';
   @Input() modalSize: 'sm' | 'md' | 'lg' | 'xl' = 'md';
+
+  private modalInstance: any = null;
+  private componentRef: ComponentRef<any> | null = null;
+  private subscription!: Subscription;
+
+  constructor(private modalService: ModalService) {}
+
+  ngOnInit(): void {
+    // Set modalId to 'globalModal' for service-based usage
+    if (this.modalId === 'myModal') {
+      this.modalId = 'globalModal';
+    }
+
+    this.subscription = this.modalService.modal$.subscribe(
+      (config: ModalConfig | null) => {
+        if (config && config.show) {
+          this.openModal(config);
+        } else if (config && !config.show) {
+          this.closeModal();
+        }
+      }
+    );
+  }
+
+  ngOnDestroy(): void {
+    if (this.subscription) {
+      this.subscription.unsubscribe();
+    }
+    if (this.componentRef) {
+      this.componentRef.destroy();
+    }
+    if (this.modalInstance) {
+      this.modalInstance.dispose();
+    }
+  }
+
+  private openModal(config: ModalConfig): void {
+    // Set modal properties
+    this.modalTitle = config.title;
+    this.modalSize = config.size || 'md';
+
+    // Clear previous content
+    if (this.componentRef) {
+      this.componentRef.destroy();
+    }
+    this.dynamicContent.clear();
+
+    // Create the component dynamically
+    this.componentRef = this.dynamicContent.createComponent(config.component);
+
+    // Pass data to the component if provided
+    if (config.data) {
+      Object.assign(this.componentRef.instance, config.data);
+    }
+
+    // Set the modal service as a property on the component instance
+    // so components can call modalService.close()
+    this.componentRef.instance.modalService = this.modalService;
+
+    // Notify the service about the component ref
+    this.modalService.setComponentRef(this.componentRef);
+
+    // Show the Bootstrap modal
+    const modalElement = document.getElementById(this.modalId);
+    if (modalElement) {
+      this.modalInstance = new bootstrap.Modal(modalElement, {
+        backdrop: 'static',
+        keyboard: false
+      });
+      this.modalService.setModalInstance(this.modalInstance);
+      this.modalInstance.show();
+    }
+  }
+
+  private closeModal(): void {
+    if (this.modalInstance) {
+      this.modalInstance.hide();
+    }
+  }
+
+  hideModal(): void {
+    this.modalService.close();
+  }
 }

From 91b3fa51d165721ebb61cbcca3ba2c1e0050cdfb Mon Sep 17 00:00:00 2001
From: User <oleksandr.palamarchuk1310@gmail.com>
Date: Sat, 6 Jun 2026 23:39:31 +0300
Subject: [PATCH 11/12] Add localization for a currency sign

---
 src/ExpensesCalculator.UI/public/i18n/en.json        |  4 ++++
 src/ExpensesCalculator.UI/public/i18n/ua.json        |  4 ++++
 .../app/checks/check-list/check-list.component.html  |  4 ++--
 .../day-expenses-calculations.component.html         | 12 ++++++------
 .../day-expenses-details.component.html              |  2 +-
 .../day-expenses-list.component.html                 |  4 ++--
 .../src/app/items/item-list/item-list.component.html |  6 +++---
 .../check-form/check-delete-form.component.html      |  2 +-
 .../day-expenses-delete-form.component.html          |  2 +-
 .../day-expenses-edit-form.component.html            |  2 +-
 .../day-expenses-share-form.component.html           |  2 +-
 .../recommendations/recommendations.component.html   | 12 ++++++------
 12 files changed, 32 insertions(+), 24 deletions(-)

diff --git a/src/ExpensesCalculator.UI/public/i18n/en.json b/src/ExpensesCalculator.UI/public/i18n/en.json
index 9dd25d6..399b2ff 100644
--- a/src/ExpensesCalculator.UI/public/i18n/en.json
+++ b/src/ExpensesCalculator.UI/public/i18n/en.json
@@ -1,4 +1,8 @@
 {
+  "GENERAL": {
+    "CURRENCY_SYMBOL": "$",
+    "CURRENCY_CODE": "USD"
+  },
   "NAV": {
     "LOGIN": "Login",
     "REGISTER": "Register",
diff --git a/src/ExpensesCalculator.UI/public/i18n/ua.json b/src/ExpensesCalculator.UI/public/i18n/ua.json
index ee49eaf..62c3222 100644
--- a/src/ExpensesCalculator.UI/public/i18n/ua.json
+++ b/src/ExpensesCalculator.UI/public/i18n/ua.json
@@ -1,4 +1,8 @@
 {
+  "GENERAL": {
+    "CURRENCY_SYMBOL": "₴",
+    "CURRENCY_CODE": "UAH"
+  },
   "NAV": {
     "LOGIN": "Увійти",
     "REGISTER": "Зареєструватися",
diff --git a/src/ExpensesCalculator.UI/src/app/checks/check-list/check-list.component.html b/src/ExpensesCalculator.UI/src/app/checks/check-list/check-list.component.html
index d45c5cc..bcb7fea 100644
--- a/src/ExpensesCalculator.UI/src/app/checks/check-list/check-list.component.html
+++ b/src/ExpensesCalculator.UI/src/app/checks/check-list/check-list.component.html
@@ -167,7 +167,7 @@ <h3>{{ 'CHECKS.NO_SEARCH_RESULTS' | translate }}</h3>
                         </td>
                         <td class="text-white location-cell">{{ check.location || '-' }}</td>
                         <td class="text-white">{{ check.payer || '-' }}</td>
-                        <td class="text-nowrap text-white">{{ check.totalSum | currency:'UAH':'₴' }}</td>
+                        <td class="text-nowrap text-white">{{ check.totalSum | currency:('GENERAL.CURRENCY_CODE' | translate):('GENERAL.CURRENCY_SYMBOL' | translate) }}</td>
                         <td>
                             <div class="d-flex gap-2 justify-content-end pe-3">
                                 <button class="btn btn-sm btn-outline-primary text-white btn-action-edit" type="button"
@@ -233,7 +233,7 @@ <h2 class="accordion-header" [id]="'heading' + check.id">
                                 <i class="bi bi-cart me-1"></i>{{ check.location || '-' }}
                             </span>
                             <span class="text-white-50" style="font-size: 0.85rem;">
-                                <i class="bi bi-cash-stack me-1"></i>{{ check.totalSum | currency:'UAH':'₴' }}
+                                <i class="bi bi-cash-stack me-1"></i>{{ check.totalSum | currency:('GENERAL.CURRENCY_CODE' | translate):('GENERAL.CURRENCY_SYMBOL' | translate) }}
                             </span>
                         </div>
                     </div>
diff --git a/src/ExpensesCalculator.UI/src/app/dayExpenses/day-expenses-calculations/day-expenses-calculations.component.html b/src/ExpensesCalculator.UI/src/app/dayExpenses/day-expenses-calculations/day-expenses-calculations.component.html
index 3d1040e..4cc8214 100644
--- a/src/ExpensesCalculator.UI/src/app/dayExpenses/day-expenses-calculations/day-expenses-calculations.component.html
+++ b/src/ExpensesCalculator.UI/src/app/dayExpenses/day-expenses-calculations/day-expenses-calculations.component.html
@@ -69,7 +69,7 @@ <h5 class="pt-3">{{ 'CALCULATIONS.NO_DATA_HINT' | translate }}</h5>
                                 <li *ngFor="let itemCalc of checkCalc.items" class="mb-1">
                                     <i class="bi bi-box me-1"></i>
                                     <span>{{ itemCalc.item.name }}:</span>
-                                    <span class="ms-1">{{ itemCalc.item.price * itemCalc.item.amount | currency:'UAH':'₴' }}</span>
+                                    <span class="ms-1">{{ itemCalc.item.price * itemCalc.item.amount | currency:('GENERAL.CURRENCY_CODE' | translate):('GENERAL.CURRENCY_SYMBOL' | translate) }}</span>
                                     <span class="mx-1">/</span>
                                     <span class="text-muted text-white"
                                         style="cursor: pointer; color: white !important;" data-bs-toggle="tooltip"
@@ -78,7 +78,7 @@ <h5 class="pt-3">{{ 'CALCULATIONS.NO_DATA_HINT' | translate }}</h5>
                                         <i class="bi bi-people-fill me-1"></i>{{ itemCalc.item.users.length }}
                                     </span>
                                     <span class="me-1">=</span>
-                                    <span class="text-warning fw-bold">{{ itemCalc.pricePerUser | currency:'UAH':'₴' }}</span>
+                                    <span class="text-warning fw-bold">{{ itemCalc.pricePerUser | currency:('GENERAL.CURRENCY_CODE' | translate):('GENERAL.CURRENCY_SYMBOL' | translate) }}</span>
                                 </li>
                             </ul>
 
@@ -86,7 +86,7 @@ <h5 class="pt-3">{{ 'CALCULATIONS.NO_DATA_HINT' | translate }}</h5>
                             <div>
                                 <i class="bi bi-coin me-1"></i>
                                 <span>{{ 'CALCULATIONS.SUM_PER_PARTICIPANT' | translate }}:</span>
-                                <span class="text-warning fw-bold ms-1">{{ checkCalc.sumPerParticipant | currency:'UAH':'₴' }}</span>
+                                <span class="text-warning fw-bold ms-1">{{ checkCalc.sumPerParticipant | currency:('GENERAL.CURRENCY_CODE' | translate):('GENERAL.CURRENCY_SYMBOL' | translate) }}</span>
                             </div>
 
                             <hr class="my-3" style="border-color: #6c757d; opacity: 1;" />
@@ -97,7 +97,7 @@ <h5 class="pt-3">{{ 'CALCULATIONS.NO_DATA_HINT' | translate }}</h5>
                     <div>
                         <i class="bi bi-wallet2 me-1"></i>
                         <span>{{ 'CALCULATIONS.TOTAL_EXPENSES' | translate }}:</span>
-                        <span class="text-warning fw-bold ms-1">{{ getTotalForUser(participant) | currency:'UAH':'₴' }}</span>
+                        <span class="text-warning fw-bold ms-1">{{ getTotalForUser(participant) | currency:('GENERAL.CURRENCY_CODE' | translate):('GENERAL.CURRENCY_SYMBOL' | translate) }}</span>
                     </div>
 
                 </ng-container>
@@ -115,7 +115,7 @@ <h5 class="pt-3">{{ 'CALCULATIONS.NO_DATA_HINT' | translate }}</h5>
                     <ul class="list-unstyled ms-1 ms-md-3 mb-0">
                         <li *ngFor="let transaction of calculationsData.optimizedUserTransactions" class="mb-1">
                             <i class="bi bi-person-fill me-1"></i>{{ transaction.subjects.sender }}
-                            <span class="text-warning fw-bold mx-1">({{ transaction.transferAmount | currency:'UAH':'₴'
+                            <span class="text-warning fw-bold mx-1">({{ transaction.transferAmount | currency:('GENERAL.CURRENCY_CODE' | translate):('GENERAL.CURRENCY_SYMBOL' | translate)
                                 }})</span>
                             <span class="mx-1">→</span>
                             <i class="bi bi-person-fill me-1"></i>{{ transaction.subjects.recipient }}
@@ -144,7 +144,7 @@ <h5 class="pt-3">{{ 'CALCULATIONS.NO_DATA_HINT' | translate }}</h5>
                             <li *ngFor="let transaction of calculationsData.allUsersTransactions" class="mb-1">
                                 <i class="bi bi-cart me-1"></i>{{ transaction.checkName }}:
                                 <i class="bi bi-person-fill ms-2 me-1"></i>{{ transaction.subjects.sender }}
-                                <span class="text-warning fw-bold mx-1">({{ transaction.transferAmount | currency:'UAH':'₴' }})</span>
+                                <span class="text-warning fw-bold mx-1">({{ transaction.transferAmount | currency:('GENERAL.CURRENCY_CODE' | translate):('GENERAL.CURRENCY_SYMBOL' | translate) }})</span>
                                 <span class="mx-1">→</span>
                                 <i class="bi bi-person-fill me-1"></i>{{ transaction.subjects.recipient }}
                             </li>
diff --git a/src/ExpensesCalculator.UI/src/app/dayExpenses/day-expenses-details/day-expenses-details.component.html b/src/ExpensesCalculator.UI/src/app/dayExpenses/day-expenses-details/day-expenses-details.component.html
index 5960d6a..28ffccb 100644
--- a/src/ExpensesCalculator.UI/src/app/dayExpenses/day-expenses-details/day-expenses-details.component.html
+++ b/src/ExpensesCalculator.UI/src/app/dayExpenses/day-expenses-details/day-expenses-details.component.html
@@ -60,7 +60,7 @@
             <div class="col-md-6 col-lg-3">
                 <div class="info-card p-3 rounded dark-blue-0">
                     <div class="text-white mb-1"><i class="bi bi-cash-stack me-1 text-white fs-5"></i>{{ 'EXPENSES.TOTAL_SUM' | translate }}</div>
-                    <div class="h6 mb-0 fw-semibold">{{ dayExpenses.totalSum | currency:'UAH':'₴' }}</div>
+                    <div class="h6 mb-0 fw-semibold">{{ dayExpenses.totalSum | currency:('GENERAL.CURRENCY_CODE' | translate):('GENERAL.CURRENCY_SYMBOL' | translate) }}</div>
                 </div>
             </div>
         </div>
diff --git a/src/ExpensesCalculator.UI/src/app/dayExpenses/day-expenses-list/day-expenses-list.component.html b/src/ExpensesCalculator.UI/src/app/dayExpenses/day-expenses-list/day-expenses-list.component.html
index 4800678..fb5a226 100644
--- a/src/ExpensesCalculator.UI/src/app/dayExpenses/day-expenses-list/day-expenses-list.component.html
+++ b/src/ExpensesCalculator.UI/src/app/dayExpenses/day-expenses-list/day-expenses-list.component.html
@@ -153,7 +153,7 @@ <h5 class="offcanvas-title" id="filterOffcanvasLabel">
                         </label>
                     </td>
                     <td class="text-nowrap text-white d-none d-sm-table-cell">
-                        {{ day.totalSum | currency:'UAH':'₴' }}
+                        {{ day.totalSum | currency:('GENERAL.CURRENCY_CODE' | translate):('GENERAL.CURRENCY_SYMBOL' | translate) }}
                     </td>
                     <td>
                         <div class="dropdown">
@@ -284,7 +284,7 @@ <h2 class="accordion-header" [id]="'heading' + day.id">
                                 {{ 'EXPENSES.TOTAL_SUM' | translate }}:
                             </span>
                             <span class="fw-bold" style="font-size: 0.85rem;">
-                                {{ day.totalSum | currency:'UAH':'₴' }}
+                                {{ day.totalSum | currency:('GENERAL.CURRENCY_CODE' | translate):('GENERAL.CURRENCY_SYMBOL' | translate) }}
                             </span>
                         </div>
 
diff --git a/src/ExpensesCalculator.UI/src/app/items/item-list/item-list.component.html b/src/ExpensesCalculator.UI/src/app/items/item-list/item-list.component.html
index d91e4fd..7d983d8 100644
--- a/src/ExpensesCalculator.UI/src/app/items/item-list/item-list.component.html
+++ b/src/ExpensesCalculator.UI/src/app/items/item-list/item-list.component.html
@@ -157,13 +157,13 @@ <h3>{{ 'ITEMS.NO_SEARCH_RESULTS' | translate }}</h3>
                                     </div>
                                 </div>
 
-                                <div class="d-flex align-items-center justify-content-between my-2"
+                                <div class="d-flex align-items-center justify-content-between my-2 flex-wrap"
                                     style="font-size: 0.8rem;">
-                                    <div>{{ item.price | currency:'UAH':'₴' }}</div>
+                                    <div>{{ item.price | currency:('GENERAL.CURRENCY_CODE' | translate):('GENERAL.CURRENCY_SYMBOL' | translate) }}</div>
                                     <div>×</div>
                                     <div><i class="bi bi-grid-fill me-1"></i>{{ item.amount }}</div>
                                     <div>=</div>
-                                    <div>{{ getTotalPrice(item) | currency:'UAH':'₴' }}</div>
+                                    <div>{{ getTotalPrice(item) | currency:('GENERAL.CURRENCY_CODE' | translate):('GENERAL.CURRENCY_SYMBOL' | translate) }}</div>
                                 </div>
 
                                 <div class="d-flex align-items-center justify-content-between mt-2 mb-0 flex-nowrap"
diff --git a/src/ExpensesCalculator.UI/src/app/modals/check-form/check-delete-form.component.html b/src/ExpensesCalculator.UI/src/app/modals/check-form/check-delete-form.component.html
index 1e76725..5083521 100644
--- a/src/ExpensesCalculator.UI/src/app/modals/check-form/check-delete-form.component.html
+++ b/src/ExpensesCalculator.UI/src/app/modals/check-form/check-delete-form.component.html
@@ -12,7 +12,7 @@
     <div class="form-group mb-3">
         <i class="bi bi-cash-stack mx-1"></i>
         <label class="control-label">{{ 'CHECKS.MODAL.SUM_LABEL' | translate }}</label>
-        <input [value]="totalSum | currency:'UAH':'₴'" class="form-control" disabled readonly />
+        <input [value]="totalSum | currency:('GENERAL.CURRENCY_CODE' | translate):('GENERAL.CURRENCY_SYMBOL' | translate)" class="form-control" disabled readonly />
     </div>
     <button type="button" class="btn btn-danger" (click)="submit()">
         <i class="bi bi-trash me-1"></i>{{ 'CHECKS.MODAL.DELETE_BUTTON' | translate }}
diff --git a/src/ExpensesCalculator.UI/src/app/modals/day-expenses-form/day-expenses-delete-form.component.html b/src/ExpensesCalculator.UI/src/app/modals/day-expenses-form/day-expenses-delete-form.component.html
index c8ba7c7..cec3b14 100644
--- a/src/ExpensesCalculator.UI/src/app/modals/day-expenses-form/day-expenses-delete-form.component.html
+++ b/src/ExpensesCalculator.UI/src/app/modals/day-expenses-form/day-expenses-delete-form.component.html
@@ -17,7 +17,7 @@
     <div class="form-group mb-3">
         <i class="bi bi-cash-stack mx-1"></i>
         <label class="control-label">{{ 'EXPENSES.MODAL.TOTAL_SUM_LABEL' | translate }}</label>
-        <input [value]="totalSum | currency:'UAH':'₴'" class="form-control" disabled readonly />
+        <input [value]="totalSum | currency:('GENERAL.CURRENCY_CODE' | translate):('GENERAL.CURRENCY_SYMBOL' | translate)" class="form-control" disabled readonly />
     </div>
     <button type="button" value="Delete" class="btn btn-danger" (click)="submit()">
         <i class="bi bi-trash me-1"></i>{{ 'EXPENSES.MODAL.DELETE_BUTTON' | translate }}
diff --git a/src/ExpensesCalculator.UI/src/app/modals/day-expenses-form/day-expenses-edit-form.component.html b/src/ExpensesCalculator.UI/src/app/modals/day-expenses-form/day-expenses-edit-form.component.html
index bb19866..030565f 100644
--- a/src/ExpensesCalculator.UI/src/app/modals/day-expenses-form/day-expenses-edit-form.component.html
+++ b/src/ExpensesCalculator.UI/src/app/modals/day-expenses-form/day-expenses-edit-form.component.html
@@ -26,7 +26,7 @@
     <div class="form-group mb-3">
         <i class="bi bi-cash-stack mx-1"></i>
         <label class="control-label">{{ 'EXPENSES.MODAL.TOTAL_SUM_LABEL' | translate }}</label>
-        <input [value]="totalSum | currency:'UAH':'₴'" class="form-control" disabled readonly />
+        <input [value]="totalSum | currency:('GENERAL.CURRENCY_CODE' | translate):('GENERAL.CURRENCY_SYMBOL' | translate)" class="form-control" disabled readonly />
     </div>
     <button type="button" value="Edit" class="btn btn-warning" (click)="submit()">
         <i class="bi bi-pencil me-1"></i>{{ 'EXPENSES.MODAL.EDIT_BUTTON' | translate }}
diff --git a/src/ExpensesCalculator.UI/src/app/modals/day-expenses-form/day-expenses-share-form.component.html b/src/ExpensesCalculator.UI/src/app/modals/day-expenses-form/day-expenses-share-form.component.html
index e8a6c1c..7895531 100644
--- a/src/ExpensesCalculator.UI/src/app/modals/day-expenses-form/day-expenses-share-form.component.html
+++ b/src/ExpensesCalculator.UI/src/app/modals/day-expenses-form/day-expenses-share-form.component.html
@@ -17,7 +17,7 @@
     <div class="form-group mb-3">
         <i class="bi bi-cash-stack mx-1"></i>
         <label class="control-label">{{ 'EXPENSES.MODAL.TOTAL_SUM_LABEL' | translate }}</label>
-        <input [value]="totalSum | currency:'UAH':'₴'" class="form-control" disabled readonly />
+        <input [value]="totalSum | currency:('GENERAL.CURRENCY_CODE' | translate):('GENERAL.CURRENCY_SYMBOL' | translate)" class="form-control" disabled readonly />
     </div>
     <div class="form-group mb-3">
         <i class="bi bi-person-fill mx-1"></i>
diff --git a/src/ExpensesCalculator.UI/src/app/recommendations/recommendations/recommendations.component.html b/src/ExpensesCalculator.UI/src/app/recommendations/recommendations/recommendations.component.html
index 5c1473f..f055ae2 100644
--- a/src/ExpensesCalculator.UI/src/app/recommendations/recommendations/recommendations.component.html
+++ b/src/ExpensesCalculator.UI/src/app/recommendations/recommendations/recommendations.component.html
@@ -262,13 +262,13 @@ <h3>{{ 'ITEMS.NO_SEARCH_RESULTS' | translate }}</h3>
                                 </a>
                             </div>
 
-                            <div class="d-flex align-items-center justify-content-between my-2"
+                            <div class="d-flex align-items-center justify-content-between my-2 flex-wrap"
                                 style="font-size: 0.8rem;">
-                                <div>{{ item.price | currency:'UAH':'₴' }}</div>
+                                <div>{{ item.price | currency:('GENERAL.CURRENCY_CODE' | translate):('GENERAL.CURRENCY_SYMBOL' | translate) }}</div>
                                 <div>×</div>
                                 <div><i class="bi bi-grid-fill me-1"></i>{{ item.amount }}</div>
                                 <div>=</div>
-                                <div>{{ getTotalPrice(item) | currency:'UAH':'₴' }}</div>
+                                <div>{{ getTotalPrice(item) | currency:('GENERAL.CURRENCY_CODE' | translate):('GENERAL.CURRENCY_SYMBOL' | translate) }}</div>
                             </div>
 
                             <div class="d-flex align-items-center justify-content-between mt-2 mb-0 flex-nowrap"
@@ -349,13 +349,13 @@ <h3>{{ 'ITEMS.NO_SEARCH_RESULTS' | translate }}</h3>
                                 </a>
                             </div>
 
-                            <div class="d-flex align-items-center justify-content-between my-2"
+                            <div class="d-flex align-items-center justify-content-between my-2 flex-wrap"
                                 style="font-size: 0.8rem;">
-                                <div>{{ item.price | currency:'UAH':'₴' }}</div>
+                                <div>{{ item.price | currency:('GENERAL.CURRENCY_CODE' | translate):('GENERAL.CURRENCY_SYMBOL' | translate) }}</div>
                                 <div>×</div>
                                 <div><i class="bi bi-grid-fill me-1"></i>{{ item.amount }}</div>
                                 <div>=</div>
-                                <div>{{ getTotalPrice(item) | currency:'UAH':'₴' }}</div>
+                                <div>{{ getTotalPrice(item) | currency:('GENERAL.CURRENCY_CODE' | translate):('GENERAL.CURRENCY_SYMBOL' | translate) }}</div>
                             </div>
 
                             <div class="d-flex align-items-center justify-content-between mt-2 mb-0 flex-nowrap"

From e5c83684b2e0705050976fd94a135e1a228e814c Mon Sep 17 00:00:00 2001
From: User <oleksandr.palamarchuk1310@gmail.com>
Date: Sun, 7 Jun 2026 12:20:23 +0300
Subject: [PATCH 12/12] Add retry logic for 401 response case

---
 src/ExpensesCalculator.UI/public/i18n/en.json |  17 +-
 src/ExpensesCalculator.UI/public/i18n/ua.json |  17 +-
 .../check-list/check-list.component.html      |  11 +-
 .../day-expenses-details.component.ts         | 169 ++++++++++++------
 .../items/item-list/item-list.component.css   |  13 ++
 .../items/item-list/item-list.component.html  |  33 ++--
 .../item-add-form.component.html              |   2 +-
 .../item-delete-form.component.html           |   2 +-
 .../item-edit-form.component.html             |   2 +-
 .../recommendation-add-form.component.html    |  14 +-
 .../recommendation-add-form.component.ts      |  17 +-
 .../recommendation-delete-form.component.html |  11 +-
 .../recommendation-delete-form.component.ts   |   8 +-
 .../recommendation-edit-form.component.html   |  16 +-
 .../recommendation-edit-form.component.ts     |  17 +-
 .../recommendations.component.html            |  59 +++---
 .../recommendations.component.ts              |   8 +-
 .../src/app/services/auth.service.ts          |  14 +-
 .../app/services/form-validation.service.ts   |   4 +-
 src/ExpensesCalculator.UI/tsconfig.json       |   1 +
 20 files changed, 254 insertions(+), 181 deletions(-)
 rename src/ExpensesCalculator.UI/src/app/modals/recommendation-form/{ => recommendation-add-form}/recommendation-add-form.component.html (85%)
 rename src/ExpensesCalculator.UI/src/app/modals/recommendation-form/{ => recommendation-add-form}/recommendation-add-form.component.ts (86%)
 rename src/ExpensesCalculator.UI/src/app/modals/recommendation-form/{ => recommendation-delete-form}/recommendation-delete-form.component.html (84%)
 rename src/ExpensesCalculator.UI/src/app/modals/recommendation-form/{ => recommendation-delete-form}/recommendation-delete-form.component.ts (88%)
 rename src/ExpensesCalculator.UI/src/app/modals/recommendation-form/{ => recommendation-edit-form}/recommendation-edit-form.component.html (84%)
 rename src/ExpensesCalculator.UI/src/app/modals/recommendation-form/{ => recommendation-edit-form}/recommendation-edit-form.component.ts (87%)

diff --git a/src/ExpensesCalculator.UI/public/i18n/en.json b/src/ExpensesCalculator.UI/public/i18n/en.json
index 399b2ff..2c420ab 100644
--- a/src/ExpensesCalculator.UI/public/i18n/en.json
+++ b/src/ExpensesCalculator.UI/public/i18n/en.json
@@ -17,7 +17,7 @@
     "GITHUB": "Github"
   },
   "HOME": {
-    "COPYRIGHT": "© 2024-2026 ExpensesCalculator"
+    "COPYRIGHT": "© 2024-2026 ExpensesTracker"
   },
   "LOGIN": {
     "TITLE": "Log in",
@@ -193,6 +193,7 @@
     "PERSON": "person",
     "PEOPLE": "people",
     "NO_TAGS": "No tags",
+    "VIEW_IN_EXPENSES": "View in Expenses",
     "SHOWING": "Showing items from",
     "TO": "to",
     "OF": "of",
@@ -259,8 +260,8 @@
     },
     "VALIDATION": {
       "NAME_REQUIRED": "Item name is required.",
-      "PRICE_INVALID": "Price > 0",
-      "AMOUNT_INVALID": "Amount > 0",
+      "PRICE_INVALID": "Price > 0 & <= 10000",
+      "AMOUNT_INVALID": "Amount > 0 & <= 1000",
       "RATING_REQUIRED": "Rating is required.",
       "USERS_REQUIRED": "At least one user is required."
     },
@@ -312,7 +313,15 @@
     "ADD_ITEM_TITLE": "Add Item",
     "ADD_ITEM_CONTENT": "Click this button to add items to the check. Specify the item name, price, quantity, and select which participants consumed it. The check total will update automatically.",
     "CALCULATOR_TITLE": "Calculate Expenses",
-    "CALCULATOR_CONTENT": "Once you've added all checks and items, click this button to view the calculations showing how expenses are split among participants."
+    "CALCULATOR_CONTENT": "Once you've added all checks and items, click this button to view the calculations showing how expenses are split among participants.",
+    "FILTER_SORT_CONTROLS_TITLE": "Filter & Sort",
+    "FILTER_SORT_CONTROLS_CONTENT": "Use these controls to filter and sort your checks. The filter button lets you search by location, payer, or sum, while the sort dropdown helps organize checks by different criteria.",
+    "CHECKS_ACCORDION_TITLE": "Checks List",
+    "CHECKS_ACCORDION_CONTENT": "This shows all your checks in an accordion format optimized for mobile. Each check displays the location and total sum. Tap any check to expand it and view its items.",
+    "ACCORDION_CHECK_ITEM_TITLE": "Check Details",
+    "ACCORDION_CHECK_ITEM_CONTENT": "Tap the check header to expand or collapse it. When expanded, you can view the payer information, edit or delete the check, and see all items belonging to this check.",
+    "ACTIONS_MENU_TITLE": "Actions Menu",
+    "ACTIONS_MENU_CONTENT": "Click the three-dot menu to access additional actions for this expense entry, including edit, share, and delete options."
   },
   "TOUR_CALCULATIONS": {
     "BACK_BTN_TITLE": "Back to Details",
diff --git a/src/ExpensesCalculator.UI/public/i18n/ua.json b/src/ExpensesCalculator.UI/public/i18n/ua.json
index 62c3222..e22b403 100644
--- a/src/ExpensesCalculator.UI/public/i18n/ua.json
+++ b/src/ExpensesCalculator.UI/public/i18n/ua.json
@@ -17,7 +17,7 @@
     "GITHUB": "Github"
   },
   "HOME": {
-    "COPYRIGHT": "© 2024-2026 ExpensesCalculator"
+    "COPYRIGHT": "© 2024-2026 ExpensesTracker"
   },
   "LOGIN": {
     "TITLE": "Увійти",
@@ -192,6 +192,7 @@
     "PERSON": "користувач",
     "PEOPLE": "користувачів",
     "NO_TAGS": "Без тегів",
+    "VIEW_IN_EXPENSES": "Переглянути у витратах",
     "SHOWING": "Показано товари з",
     "TO": "до",
     "OF": "з",
@@ -259,8 +260,8 @@
     },
     "VALIDATION": {
       "NAME_REQUIRED": "Назва товару обов'язкова.",
-      "PRICE_INVALID": "Ціна > 0",
-      "AMOUNT_INVALID": "Кількість > 0",
+      "PRICE_INVALID": "Ціна > 0 & <= 10000",
+      "AMOUNT_INVALID": "Кількість > 0 & <= 1000",
       "RATING_REQUIRED": "Рейтинг обов'язковий.",
       "USERS_REQUIRED": "Потрібен хоча б один користувач."
     },
@@ -312,7 +313,15 @@
     "ADD_ITEM_TITLE": "Додати товар",
     "ADD_ITEM_CONTENT": "Натисніть цю кнопку, щоб додати товари до чека. Вкажіть назву товару, ціну, кількість та оберіть, які учасники його споживали. Загальна сума чека оновиться автоматично.",
     "CALCULATOR_TITLE": "Розрахунки",
-    "CALCULATOR_CONTENT": "Після того, як ви додали всі чеки та товари, натисніть цю кнопку, щоб переглянути розрахунки, які показують, як витрати розподіляються між учасниками."
+    "CALCULATOR_CONTENT": "Після того, як ви додали всі чеки та товари, натисніть цю кнопку, щоб переглянути розрахунки, які показують, як витрати розподіляються між учасниками.",
+    "FILTER_SORT_CONTROLS_TITLE": "Фільтр і Сортування",
+    "FILTER_SORT_CONTROLS_CONTENT": "Використовуйте ці елементи керування для фільтрації та сортування ваших чеків. Кнопка фільтра дозволяє шукати за місцем, платником або сумою, а випадаюче меню сортування допомагає організувати чеки за різними критеріями.",
+    "CHECKS_ACCORDION_TITLE": "Список Чеків",
+    "CHECKS_ACCORDION_CONTENT": "Це показує всі ваші чеки в форматі акордеона, оптимізованому для мобільних пристроїв. Кожен чек відображає місце та загальну суму. Торкніться будь-якого чека, щоб розгорнути його та переглянути його елементи.",
+    "ACCORDION_CHECK_ITEM_TITLE": "Деталі Чека",
+    "ACCORDION_CHECK_ITEM_CONTENT": "Торкніться заголовка чека, щоб розгорнути або згорнути його. Коли розгорнуто, ви можете переглянути інформацію про платника, редагувати або видалити чек, а також переглянути всі елементи, що належать до цього чека.",
+    "ACTIONS_MENU_TITLE": "Меню Дій",
+    "ACTIONS_MENU_CONTENT": "Натисніть меню з трьома крапками, щоб отримати доступ до додаткових дій для цього запису витрат, включаючи редагування, спільний доступ та видалення."
   },
   "TOUR_CALCULATIONS": {
     "BACK_BTN_TITLE": "Назад до деталей",
diff --git a/src/ExpensesCalculator.UI/src/app/checks/check-list/check-list.component.html b/src/ExpensesCalculator.UI/src/app/checks/check-list/check-list.component.html
index bcb7fea..5d9cb72 100644
--- a/src/ExpensesCalculator.UI/src/app/checks/check-list/check-list.component.html
+++ b/src/ExpensesCalculator.UI/src/app/checks/check-list/check-list.component.html
@@ -87,13 +87,13 @@ <h5 class="offcanvas-title mb-0" id="filterOffcanvasChecksLabel">
 
     <!-- Add Check button for small screens -->
     <div *ngIf="checksList.length > 0" class="d-block d-sm-none mb-2 px-2">
-        <button class="btn btn-outline-primary text-white w-100" (click)="openModal('add', '')">
+        <button class="btn btn-outline-primary text-white w-100" (click)="openModal('add', '')" tourAnchor="add-check-btn-small">
             <i class="bi bi-plus-circle me-1"></i>{{ 'CHECKS.ADD' | translate }}
         </button>
     </div>
 
     <!-- Filter and Sort controls for small screens -->
-    <div *ngIf="checksList.length > 0" class="d-block d-sm-none mb-2 px-2">
+    <div *ngIf="checksList.length > 0" class="d-block d-sm-none mb-2 px-2" tourAnchor="filter-sort-controls">
         <small class="text-white-50 mb-1" style="font-size: 0.7rem;">
             <i class="bi bi-funnel me-1"></i>{{ 'ITEMS.FILTER.CAPTION' | translate }} & <i class="bi bi-sort-down me-1"></i>{{ 'ITEMS.SORT.CAPTION' | translate }}
         </small>
@@ -218,7 +218,7 @@ <h3>{{ 'CHECKS.NO_SEARCH_RESULTS' | translate }}</h3>
     <!-- Accordion view for small screens -->
     <div *ngIf="filteredChecksList.length > 0" class="accordion d-block d-sm-none px-2" id="checksAccordion">
         <div *ngFor="let check of filteredChecksList; let i = index" class="accordion-item bg-transparent border-0">
-            <h2 class="accordion-header" [id]="'heading' + check.id">
+            <h2 class="accordion-header" [id]="'heading' + check.id" tourAnchor="checks-accordion">
                 <button class="accordion-button collapsed bg-transparent text-white border-bottom border-primary"
                         type="button"
                         data-bs-toggle="collapse"
@@ -226,7 +226,8 @@ <h2 class="accordion-header" [id]="'heading' + check.id">
                         aria-expanded="false"
                         [attr.aria-controls]="'accordionCollapse' + check.id"
                         (click)="toggleCheckExpansion(check.id)"
-                        style="padding: 0.75rem 0.5rem;">
+                        style="padding: 0.75rem 0.5rem;"                        
+                        [tourAnchor]="i === 0 ? 'accordion-check-item' : ''">
                     <div class="d-flex justify-content-between align-items-center w-100 me-2">
                         <div class="d-flex flex-column flex-grow-1">
                             <span class="fw-bold mb-2" style="font-size: 0.8rem;">
@@ -277,7 +278,7 @@ <h2 class="accordion-header" [id]="'heading' + check.id">
                                 [isLoading]="isCheckItemsLoading(check.id)"
                                 [highlightedItemId]="highlightedItemId"
                                 [disableTooltipManagement]="true"
-                                [isFirstCheck]="false"
+                                [isFirstCheck]="i === 0"
                                 (itemsChanged)="loadItemsForCheck($event)"
                                 (checkSumUpdated)="onCheckSumUpdated($event)">
                             </app-item-list>
diff --git a/src/ExpensesCalculator.UI/src/app/dayExpenses/day-expenses-details/day-expenses-details.component.ts b/src/ExpensesCalculator.UI/src/app/dayExpenses/day-expenses-details/day-expenses-details.component.ts
index 119cfc9..5005215 100644
--- a/src/ExpensesCalculator.UI/src/app/dayExpenses/day-expenses-details/day-expenses-details.component.ts
+++ b/src/ExpensesCalculator.UI/src/app/dayExpenses/day-expenses-details/day-expenses-details.component.ts
@@ -257,58 +257,107 @@ export class DayExpensesDetailsComponent implements OnInit, AfterViewInit, OnDes
 
   // Tour
   initializeTour() {
-    // Check if checks exist by checking the checks array
+    // Detect small screen (same breakpoint as CSS: 576px)
+    const isSmallScreen = window.innerWidth < 576;
     const checksExist = this.checks && this.checks.length > 0;
-
     const tourSteps: any[] = [];
 
-    // Always show these basic steps
-    tourSteps.push(
-      {
-        anchorId: 'back-btn',
-        content: this.translate.instant('TOUR_DETAILS.BACK_BTN_CONTENT'),
-        title: this.translate.instant('TOUR_DETAILS.BACK_BTN_TITLE'),
+    // Step 1: Back button (all screens)
+    tourSteps.push({
+      anchorId: 'back-btn',
+      content: this.translate.instant('TOUR_DETAILS.BACK_BTN_CONTENT'),
+      title: this.translate.instant('TOUR_DETAILS.BACK_BTN_TITLE'),
+      placement: 'bottom',
+      enableBackdrop: true
+    });
+
+    // Step 2: Add check button (different anchor for small screens with data)
+    if (isSmallScreen && checksExist) {
+      tourSteps.push({
+        anchorId: 'add-check-btn-small',
+        content: this.translate.instant('TOUR_DETAILS.ADD_CHECK_CONTENT'),
+        title: this.translate.instant('TOUR_DETAILS.ADD_CHECK_TITLE'),
         placement: 'bottom',
         enableBackdrop: true
-      },
-      {
+      });
+    } else {
+      tourSteps.push({
         anchorId: 'add-check-btn',
         content: this.translate.instant('TOUR_DETAILS.ADD_CHECK_CONTENT'),
         title: this.translate.instant('TOUR_DETAILS.ADD_CHECK_TITLE'),
-        placement: 'top',
+        placement: isSmallScreen ? 'bottom' : 'top',
         enableBackdrop: true
-      }
-    );
+      });
+    }
 
-    // Add workflow steps only if checks exist
+    // Steps 3-6: Screen-specific workflow (only if checks exist)
     if (checksExist) {
-      // Get the first check's ID to construct the dynamic add-item-btn anchor
-      const firstCheckId = this.checks[0].id;
-      const addItemBtnAnchorId = `add-item-btn-${firstCheckId}`;
-
-      tourSteps.push(
-        {
-          anchorId: 'expand-check-btn',
-          content: this.translate.instant('TOUR_DETAILS.EXPAND_CHECK_CONTENT'),
-          title: this.translate.instant('TOUR_DETAILS.EXPAND_CHECK_TITLE'),
-          placement: 'right',
-          enableBackdrop: true
-        },
-        {
-          anchorId: addItemBtnAnchorId,
-          content: this.translate.instant('TOUR_DETAILS.ADD_ITEM_CONTENT'),
-          title: this.translate.instant('TOUR_DETAILS.ADD_ITEM_TITLE'),
-          placement: 'right',
-          enableBackdrop: true
-        },
-        {
-          anchorId: 'calculator-btn',
-          content: this.translate.instant('TOUR_DETAILS.CALCULATOR_CONTENT'),
-          title: this.translate.instant('TOUR_DETAILS.CALCULATOR_TITLE'),
-          placement: 'left',
-          enableBackdrop: true
-        }
-      );
+      if (isSmallScreen) {
+        // Small screen: accordion view
+        tourSteps.push(
+          {
+            anchorId: 'filter-sort-controls',
+            content: this.translate.instant('TOUR_DETAILS.FILTER_SORT_CONTROLS_CONTENT'),
+            title: this.translate.instant('TOUR_DETAILS.FILTER_SORT_CONTROLS_TITLE'),
+            placement: 'bottom',
+            enableBackdrop: true
+          },
+          {
+            anchorId: 'checks-accordion',
+            content: this.translate.instant('TOUR_DETAILS.CHECKS_ACCORDION_CONTENT'),
+            title: this.translate.instant('TOUR_DETAILS.CHECKS_ACCORDION_TITLE'),
+            placement: 'top',
+            enableBackdrop: true
+          },
+          {
+            anchorId: 'accordion-check-item',
+            content: this.translate.instant('TOUR_DETAILS.ACCORDION_CHECK_ITEM_CONTENT'),
+            title: this.translate.instant('TOUR_DETAILS.ACCORDION_CHECK_ITEM_TITLE'),
+            placement: 'top',
+            enableBackdrop: true
+          },
+          {
+            anchorId: 'calculator-btn',
+            content: this.translate.instant('TOUR_DETAILS.CALCULATOR_CONTENT'),
+            title: this.translate.instant('TOUR_DETAILS.CALCULATOR_TITLE'),
+            placement: 'bottom',
+            enableBackdrop: true
+          }
+        );
+      } else {
+        // Large screen: table view
+        const firstCheckId = this.checks[0].id;
+        tourSteps.push(
+          {
+            anchorId: 'expand-check-btn',
+            content: this.translate.instant('TOUR_DETAILS.EXPAND_CHECK_CONTENT'),
+            title: this.translate.instant('TOUR_DETAILS.EXPAND_CHECK_TITLE'),
+            placement: 'right',
+            enableBackdrop: true
+          },
+          {
+            anchorId: `add-item-btn-${firstCheckId}`,
+            content: this.translate.instant('TOUR_DETAILS.ADD_ITEM_CONTENT'),
+            title: this.translate.instant('TOUR_DETAILS.ADD_ITEM_TITLE'),
+            placement: 'right',
+            enableBackdrop: true
+          },
+          {
+            anchorId: 'actions-menu',
+            content: this.translate.instant('TOUR_DETAILS.ACTIONS_MENU_CONTENT'),
+            title: this.translate.instant('TOUR_DETAILS.ACTIONS_MENU_TITLE'),
+            placement: 'left',
+            enableBackdrop: true
+          },
+          {
+            anchorId: 'calculator-btn',
+            content: this.translate.instant('TOUR_DETAILS.CALCULATOR_CONTENT'),
+            title: this.translate.instant('TOUR_DETAILS.CALCULATOR_TITLE'),
+            placement: 'left',
+            enableBackdrop: true
+          }
+        );
+      }
     }
 
     // Initialize tour with global button title configuration
@@ -320,16 +369,36 @@ export class DayExpensesDetailsComponent implements OnInit, AfterViewInit, OnDes
   }
 
   startTour() {
-    // Auto-expand the first check when tour starts so the Add Item button becomes visible
-    const expandButton = document.querySelector('[touranchor="expand-check-btn"]') as HTMLElement;
-    if (expandButton) {
-      // Find the collapse target from the button's data-bs-target attribute
-      const collapseTarget = expandButton.getAttribute('data-bs-target');
-      if (collapseTarget) {
-        const collapseElement = document.querySelector(collapseTarget);
+    const isSmallScreen = window.innerWidth < 576;
+    const checksExist = this.checks && this.checks.length > 0;
+
+    if (!checksExist) {
+      this.tourService.start();
+      return;
+    }
+
+    if (isSmallScreen) {
+      // For small screens (accordion view), expand the first accordion item
+      const firstCheck = this.checks[0];
+      const accordionButton = document.querySelector(
+        `[data-bs-target="#accordionCollapse${firstCheck.id}"]`
+      ) as HTMLElement;
+      if (accordionButton) {
+        const collapseElement = document.getElementById('accordionCollapse' + firstCheck.id);
         if (collapseElement && !collapseElement.classList.contains('show')) {
-          // Programmatically expand the first check
-          expandButton.click();
+          accordionButton.click();
+        }
+      }
+    } else {
+      // For large screens (table view), expand the first check
+      const expandButton = document.querySelector('[touranchor="expand-check-btn"]') as HTMLElement;
+      if (expandButton) {
+        const collapseTarget = expandButton.getAttribute('data-bs-target');
+        if (collapseTarget) {
+          const collapseElement = document.querySelector(collapseTarget);
+          if (collapseElement && !collapseElement.classList.contains('show')) {
+            expandButton.click();
+          }
         }
       }
     }
diff --git a/src/ExpensesCalculator.UI/src/app/items/item-list/item-list.component.css b/src/ExpensesCalculator.UI/src/app/items/item-list/item-list.component.css
index f59cd35..5e62bee 100644
--- a/src/ExpensesCalculator.UI/src/app/items/item-list/item-list.component.css
+++ b/src/ExpensesCalculator.UI/src/app/items/item-list/item-list.component.css
@@ -203,6 +203,19 @@ td {
   }
 }
 
+/* Add Item and Filter/Sort button group for small screens */
+.add-filter-group {
+  gap: 0.5rem !important;
+}
+
+.add-filter-group .add-btn,
+.add-filter-group .filter-btn {
+  width: 50% !important;
+  font-size: 0.85rem !important;
+  padding: 0.375rem 0.5rem !important;
+  line-height: 1.2 !important;
+}
+
 /* Component-specific responsive styles */
 @media (max-width: 576px) {
   /* Card sizing for small screens */
diff --git a/src/ExpensesCalculator.UI/src/app/items/item-list/item-list.component.html b/src/ExpensesCalculator.UI/src/app/items/item-list/item-list.component.html
index 7d983d8..96f97a5 100644
--- a/src/ExpensesCalculator.UI/src/app/items/item-list/item-list.component.html
+++ b/src/ExpensesCalculator.UI/src/app/items/item-list/item-list.component.html
@@ -49,24 +49,23 @@
                 </div>
             </div>
 
-            <!-- Add Button for small screens -->
+            <!-- Add Item and Filter/Sort buttons for small screens -->
             <div *ngIf="itemsList.length > 0" class="d-block d-lg-none mb-2 px-0">
-                <button class="btn btn-outline-primary text-white w-100" (click)="openModal('add')"
-                    [disabled]="loading">
-                    <i class="bi bi-plus-circle me-1"></i>{{ 'ITEMS.ADD' | translate }}
-                </button>
-            </div>
-
-            <!-- Collapsible Filter/Sort controls for small screens -->
-            <div *ngIf="itemsList.length > 0" class="d-block d-lg-none mb-2 px-0">
-                <button class="btn btn-sm btn-outline-primary text-white w-100"
-                        type="button"
-                        data-bs-toggle="collapse"
-                        [attr.data-bs-target]="'#filterSortCollapse-' + checkId"
-                        [attr.aria-expanded]="false"
-                        [attr.aria-controls]="'filterSortCollapse-' + checkId">
-                    <i class="bi bi-funnel me-1"></i>{{ 'ITEMS.FILTER.CAPTION' | translate }} & <i class="bi bi-sort-down me-1"></i>{{ 'ITEMS.SORT.CAPTION' | translate }}
-                </button>
+                <div class="d-flex w-100 add-filter-group">
+                    <button class="btn btn-outline-primary text-white add-btn"
+                            (click)="openModal('add')"
+                            [disabled]="loading">
+                        <i class="bi bi-plus-circle me-1"></i>{{ 'ITEMS.ADD' | translate }}
+                    </button>
+                    <button class="btn btn-outline-primary text-white filter-btn"
+                            type="button"
+                            data-bs-toggle="collapse"
+                            [attr.data-bs-target]="'#filterSortCollapse-' + checkId"
+                            [attr.aria-expanded]="false"
+                            [attr.aria-controls]="'filterSortCollapse-' + checkId">
+                        <i class="bi bi-funnel"></i>{{ 'ITEMS.FILTER.CAPTION' | translate }}/{{ 'ITEMS.SORT.CAPTION' | translate }}
+                    </button>
+                </div>
                 <div class="collapse mt-2" [id]="'filterSortCollapse-' + checkId">
                     <div class="d-flex flex-column gap-2">
                         <div class="d-flex flex-column">
diff --git a/src/ExpensesCalculator.UI/src/app/modals/item-form/item-add-form/item-add-form.component.html b/src/ExpensesCalculator.UI/src/app/modals/item-form/item-add-form/item-add-form.component.html
index 97f502c..aa66ebe 100644
--- a/src/ExpensesCalculator.UI/src/app/modals/item-form/item-add-form/item-add-form.component.html
+++ b/src/ExpensesCalculator.UI/src/app/modals/item-form/item-add-form/item-add-form.component.html
@@ -48,7 +48,7 @@
         <div class="col-12 col-md-6">
             <div class="form-group">
                 <i class="bi bi-star-fill mx-1"></i>
-                <label class="control-label mb-0">{{ 'ITEMS.MODAL.RATING' | translate }}<span class="text-danger">*</span></label>
+                <label class="control-label mt-1 mt-md-0 mb-0">{{ 'ITEMS.MODAL.RATING' | translate }}<span class="text-danger">*</span></label>
                 <div class="d-flex align-items-center" style="padding-top: 0.3rem;">
                     <div class="star-rating d-flex justify-content-between" style="flex: 1; margin-right: 0.5rem;">
                         <i *ngFor="let star of [1,2,3,4,5,6,7,8,9,10]"
diff --git a/src/ExpensesCalculator.UI/src/app/modals/item-form/item-delete-form/item-delete-form.component.html b/src/ExpensesCalculator.UI/src/app/modals/item-form/item-delete-form/item-delete-form.component.html
index 3750d35..b5a9af4 100644
--- a/src/ExpensesCalculator.UI/src/app/modals/item-form/item-delete-form/item-delete-form.component.html
+++ b/src/ExpensesCalculator.UI/src/app/modals/item-form/item-delete-form/item-delete-form.component.html
@@ -29,7 +29,7 @@
         <div class="col-12 col-md-6">
             <div class="form-group">
                 <i class="bi bi-star-fill mx-1"></i>
-                <label class="control-label mb-0">{{ 'ITEMS.MODAL.RATING' | translate }}</label>
+                <label class="control-label mt-1 mt-md-0 mb-0">{{ 'ITEMS.MODAL.RATING' | translate }}</label>
                 <div class="d-flex align-items-center" style="padding-top: 0.3rem;">
                     <div class="star-rating d-flex justify-content-between" style="flex: 1; margin-right: 0.5rem;">
                         <i *ngFor="let star of [1,2,3,4,5,6,7,8,9,10]"
diff --git a/src/ExpensesCalculator.UI/src/app/modals/item-form/item-edit-form/item-edit-form.component.html b/src/ExpensesCalculator.UI/src/app/modals/item-form/item-edit-form/item-edit-form.component.html
index 9fdd94a..32fa696 100644
--- a/src/ExpensesCalculator.UI/src/app/modals/item-form/item-edit-form/item-edit-form.component.html
+++ b/src/ExpensesCalculator.UI/src/app/modals/item-form/item-edit-form/item-edit-form.component.html
@@ -48,7 +48,7 @@
         <div class="col-12 col-md-6">
             <div class="form-group">
                 <i class="bi bi-star-fill mx-1"></i>
-                <label class="control-label mb-0">{{ 'ITEMS.MODAL.RATING' | translate }}<span class="text-danger">*</span></label>
+                <label class="control-label mt-1 mt-md-0 mb-0">{{ 'ITEMS.MODAL.RATING' | translate }}<span class="text-danger">*</span></label>
                 <div class="d-flex align-items-center" style="padding-top: 0.3rem;">
                     <div class="star-rating d-flex justify-content-between" style="flex: 1; margin-right: 0.5rem;">
                         <i *ngFor="let star of [1,2,3,4,5,6,7,8,9,10]"
diff --git a/src/ExpensesCalculator.UI/src/app/modals/recommendation-form/recommendation-add-form.component.html b/src/ExpensesCalculator.UI/src/app/modals/recommendation-form/recommendation-add-form/recommendation-add-form.component.html
similarity index 85%
rename from src/ExpensesCalculator.UI/src/app/modals/recommendation-form/recommendation-add-form.component.html
rename to src/ExpensesCalculator.UI/src/app/modals/recommendation-form/recommendation-add-form/recommendation-add-form.component.html
index df38315..0b3beb2 100644
--- a/src/ExpensesCalculator.UI/src/app/modals/recommendation-form/recommendation-add-form.component.html
+++ b/src/ExpensesCalculator.UI/src/app/modals/recommendation-form/recommendation-add-form/recommendation-add-form.component.html
@@ -20,7 +20,7 @@
             style="resize: none;"></textarea>
     </div>
     <div class="row mb-2">
-        <div class="col-6 col-md-3">
+        <div class="col-12 col-md-6">
             <div class="form-group">
                 <i class="bi bi-currency-dollar mx-1"></i>
                 <label class="control-label">{{ 'ITEMS.MODAL.PRICE' | translate }}<span class="text-danger">*</span></label>
@@ -30,20 +30,10 @@
                 <div class="invalid-feedback" *ngIf="formErrors['price']">{{ formErrors['price'] }}</div>
             </div>
         </div>
-        <div class="col-6 col-md-3">
-            <div class="form-group">
-                <i class="bi bi-grid-fill mx-1"></i>
-                <label class="control-label">{{ 'ITEMS.MODAL.AMOUNT' | translate }}<span class="text-danger">*</span></label>
-                <input type="number" [(ngModel)]="amount" name="amount" class="form-control" min="1" max="1000"
-                    [class.is-invalid]="formErrors['amount']"
-                    [class.is-valid]="formValidated && !formErrors['amount'] && amount > 0" required />
-                <div class="invalid-feedback" *ngIf="formErrors['amount']">{{ formErrors['amount'] }}</div>
-            </div>
-        </div>
         <div class="col-12 col-md-6">
             <div class="form-group">
                 <i class="bi bi-star-fill mx-1"></i>
-                <label class="control-label mb-0">{{ 'ITEMS.MODAL.RATING' | translate }}<span class="text-danger">*</span></label>
+                <label class="control-label mt-1 mt-md-0 mb-0">{{ 'ITEMS.MODAL.RATING' | translate }}<span class="text-danger">*</span></label>
                 <div class="d-flex align-items-center" style="padding-top: 0.3rem;">
                     <div class="star-rating d-flex justify-content-between" style="flex: 1; margin-right: 0.5rem;">
                         <i *ngFor="let star of [1,2,3,4,5,6,7,8,9,10]"
diff --git a/src/ExpensesCalculator.UI/src/app/modals/recommendation-form/recommendation-add-form.component.ts b/src/ExpensesCalculator.UI/src/app/modals/recommendation-form/recommendation-add-form/recommendation-add-form.component.ts
similarity index 86%
rename from src/ExpensesCalculator.UI/src/app/modals/recommendation-form/recommendation-add-form.component.ts
rename to src/ExpensesCalculator.UI/src/app/modals/recommendation-form/recommendation-add-form/recommendation-add-form.component.ts
index 05d7c46..74a48b8 100644
--- a/src/ExpensesCalculator.UI/src/app/modals/recommendation-form/recommendation-add-form.component.ts
+++ b/src/ExpensesCalculator.UI/src/app/modals/recommendation-form/recommendation-add-form/recommendation-add-form.component.ts
@@ -2,10 +2,10 @@ import { Component } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { FormsModule } from '@angular/forms';
 import { TranslatePipe, TranslateService } from '@ngx-translate/core';
-import { ModalService } from '../../services/modal.service';
-import { ItemsService } from '../../services/items.service';
-import { ToastService } from '../../services/toast.service';
-import { parseValidationErrors } from '../../shared/models/validation-errors.model';
+import { ModalService } from '../../../services/modal.service';
+import { ItemsService } from '../../../services/items.service';
+import { ToastService } from '../../../services/toast.service';
+import { parseValidationErrors } from '../../../shared/models/validation-errors.model';
 
 @Component({
   selector: 'app-recommendation-add-form',
@@ -47,12 +47,9 @@ export class RecommendationAddFormComponent {
     if (!this.name.trim()) {
       this.formErrors['name'] = this.translate.instant('ITEMS.VALIDATION.NAME_REQUIRED');
     }
-    if (!this.price || this.price <= 0) {
+    if (!this.price || this.price <= 0 || this.price > 10000) {
       this.formErrors['price'] = this.translate.instant('ITEMS.VALIDATION.PRICE_INVALID');
     }
-    if (this.amount <= 0) {
-      this.formErrors['amount'] = this.translate.instant('ITEMS.VALIDATION.AMOUNT_INVALID');
-    }
     if (this.rating <= 0) {
       this.formErrors['rating'] = this.translate.instant('ITEMS.VALIDATION.RATING_REQUIRED');
     }
@@ -68,7 +65,7 @@ export class RecommendationAddFormComponent {
       name: this.name,
       comment: this.comment,
       price: this.price!,
-      amount: this.amount,
+      amount: 1,
       rating: this.rating,
       tags: this.tags
     };
@@ -86,7 +83,7 @@ export class RecommendationAddFormComponent {
           this.onSuccess();
         }
       },
-      error: error => {
+      error: (error: any) => {
         this.formErrors = parseValidationErrors(error);
         this.formValidated = true;
         if (Object.keys(this.formErrors).length === 0 || this.formErrors['general']) {
diff --git a/src/ExpensesCalculator.UI/src/app/modals/recommendation-form/recommendation-delete-form.component.html b/src/ExpensesCalculator.UI/src/app/modals/recommendation-form/recommendation-delete-form/recommendation-delete-form.component.html
similarity index 84%
rename from src/ExpensesCalculator.UI/src/app/modals/recommendation-form/recommendation-delete-form.component.html
rename to src/ExpensesCalculator.UI/src/app/modals/recommendation-form/recommendation-delete-form/recommendation-delete-form.component.html
index e67b4b5..8198f65 100644
--- a/src/ExpensesCalculator.UI/src/app/modals/recommendation-form/recommendation-delete-form.component.html
+++ b/src/ExpensesCalculator.UI/src/app/modals/recommendation-form/recommendation-delete-form/recommendation-delete-form.component.html
@@ -10,24 +10,17 @@
         <textarea [value]="comment" class="form-control" rows="3" disabled></textarea>
     </div>
     <div class="row mb-3">
-        <div class="col-6 col-md-3">
+        <div class="col-12 col-md-6">
             <div class="form-group">
                 <i class="bi bi-currency-dollar mx-1"></i>
                 <label class="control-label">{{ 'ITEMS.MODAL.PRICE' | translate }}</label>
                 <input type="number" [value]="price" class="form-control" disabled />
             </div>
         </div>
-        <div class="col-6 col-md-3">
-            <div class="form-group">
-                <i class="bi bi-grid-fill mx-1"></i>
-                <label class="control-label">{{ 'ITEMS.MODAL.AMOUNT' | translate }}</label>
-                <input type="number" [value]="amount" class="form-control" disabled />
-            </div>
-        </div>
         <div class="col-12 col-md-6">
             <div class="form-group">
                 <i class="bi bi-star-fill mx-1"></i>
-                <label class="control-label mb-0">{{ 'ITEMS.MODAL.RATING' | translate }}</label>
+                <label class="control-label mt-1 mt-md-0 mb-0">{{ 'ITEMS.MODAL.RATING' | translate }}</label>
                 <div class="d-flex align-items-center" style="padding-top: 0.3rem;">
                     <div class="star-rating d-flex justify-content-between" style="flex: 1; margin-right: 0.5rem;">
                         <i *ngFor="let star of [1,2,3,4,5,6,7,8,9,10]"
diff --git a/src/ExpensesCalculator.UI/src/app/modals/recommendation-form/recommendation-delete-form.component.ts b/src/ExpensesCalculator.UI/src/app/modals/recommendation-form/recommendation-delete-form/recommendation-delete-form.component.ts
similarity index 88%
rename from src/ExpensesCalculator.UI/src/app/modals/recommendation-form/recommendation-delete-form.component.ts
rename to src/ExpensesCalculator.UI/src/app/modals/recommendation-form/recommendation-delete-form/recommendation-delete-form.component.ts
index 9008a58..0e1cb68 100644
--- a/src/ExpensesCalculator.UI/src/app/modals/recommendation-form/recommendation-delete-form.component.ts
+++ b/src/ExpensesCalculator.UI/src/app/modals/recommendation-form/recommendation-delete-form/recommendation-delete-form.component.ts
@@ -1,9 +1,9 @@
 import { Component } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { TranslatePipe, TranslateService } from '@ngx-translate/core';
-import { ModalService } from '../../services/modal.service';
-import { ItemsService } from '../../services/items.service';
-import { ToastService } from '../../services/toast.service';
+import { ModalService } from '../../../services/modal.service';
+import { ItemsService } from '../../../services/items.service';
+import { ToastService } from '../../../services/toast.service';
 
 @Component({
   selector: 'app-recommendation-delete-form',
@@ -48,7 +48,7 @@ export class RecommendationDeleteFormComponent {
           this.onSuccess();
         }
       },
-      error: error => {
+      error: (error: any) => {
         const errorMessage = error?.error?.message || error?.message || this.translate.instant('ITEMS.TOAST.DELETE_ERROR');
         this.toastService.error(
           this.translate.instant('ITEMS.TOAST.ERROR'),
diff --git a/src/ExpensesCalculator.UI/src/app/modals/recommendation-form/recommendation-edit-form.component.html b/src/ExpensesCalculator.UI/src/app/modals/recommendation-form/recommendation-edit-form/recommendation-edit-form.component.html
similarity index 84%
rename from src/ExpensesCalculator.UI/src/app/modals/recommendation-form/recommendation-edit-form.component.html
rename to src/ExpensesCalculator.UI/src/app/modals/recommendation-form/recommendation-edit-form/recommendation-edit-form.component.html
index 2e94d87..2f0ee3d 100644
--- a/src/ExpensesCalculator.UI/src/app/modals/recommendation-form/recommendation-edit-form.component.html
+++ b/src/ExpensesCalculator.UI/src/app/modals/recommendation-form/recommendation-edit-form/recommendation-edit-form.component.html
@@ -17,30 +17,20 @@
             style="resize: none;" [disabled]="!canEdit"></textarea>
     </div>
     <div class="row mb-2">
-        <div class="col-6 col-md-3">
+        <div class="col-12 col-md-6">
             <div class="form-group">
                 <i class="bi bi-currency-dollar mx-1"></i>
                 <label class="control-label">{{ 'ITEMS.MODAL.PRICE' | translate }}<span class="text-danger">*</span></label>
-                <input type="number" [(ngModel)]="price" name="price" class="form-control" step="0.01" min="0"
+                <input type="number" [(ngModel)]="price" name="price" class="form-control" step="0.01" min="0" max="10000"
                     [class.is-invalid]="formErrors['price']"
                     [class.is-valid]="formValidated && !formErrors['price'] && price > 0" required [disabled]="!canEdit" />
                 <div class="invalid-feedback" *ngIf="formErrors['price']">{{ formErrors['price'] }}</div>
             </div>
         </div>
-        <div class="col-6 col-md-3">
-            <div class="form-group">
-                <i class="bi bi-grid-fill mx-1"></i>
-                <label class="control-label">{{ 'ITEMS.MODAL.AMOUNT' | translate }}<span class="text-danger">*</span></label>
-                <input type="number" [(ngModel)]="amount" name="amount" class="form-control" min="1"
-                    [class.is-invalid]="formErrors['amount']"
-                    [class.is-valid]="formValidated && !formErrors['amount'] && amount > 0" required [disabled]="!canEdit" />
-                <div class="invalid-feedback" *ngIf="formErrors['amount']">{{ formErrors['amount'] }}</div>
-            </div>
-        </div>
         <div class="col-12 col-md-6">
             <div class="form-group">
                 <i class="bi bi-star-fill mx-1"></i>
-                <label class="control-label mb-0">{{ 'ITEMS.MODAL.RATING' | translate }}<span class="text-danger">*</span></label>
+                <label class="control-label mt-1 mt-md-0 mb-0">{{ 'ITEMS.MODAL.RATING' | translate }}<span class="text-danger">*</span></label>
                 <div class="d-flex align-items-center" style="padding-top: 0.3rem;">
                     <div class="star-rating d-flex justify-content-between" style="flex: 1; margin-right: 0.5rem;">
                         <i *ngFor="let star of [1,2,3,4,5,6,7,8,9,10]"
diff --git a/src/ExpensesCalculator.UI/src/app/modals/recommendation-form/recommendation-edit-form.component.ts b/src/ExpensesCalculator.UI/src/app/modals/recommendation-form/recommendation-edit-form/recommendation-edit-form.component.ts
similarity index 87%
rename from src/ExpensesCalculator.UI/src/app/modals/recommendation-form/recommendation-edit-form.component.ts
rename to src/ExpensesCalculator.UI/src/app/modals/recommendation-form/recommendation-edit-form/recommendation-edit-form.component.ts
index 184a1c2..619ab45 100644
--- a/src/ExpensesCalculator.UI/src/app/modals/recommendation-form/recommendation-edit-form.component.ts
+++ b/src/ExpensesCalculator.UI/src/app/modals/recommendation-form/recommendation-edit-form/recommendation-edit-form.component.ts
@@ -2,10 +2,10 @@ import { Component } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { FormsModule } from '@angular/forms';
 import { TranslatePipe, TranslateService } from '@ngx-translate/core';
-import { ModalService } from '../../services/modal.service';
-import { ItemsService } from '../../services/items.service';
-import { ToastService } from '../../services/toast.service';
-import { parseValidationErrors } from '../../shared/models/validation-errors.model';
+import { ModalService } from '../../../services/modal.service';
+import { ItemsService } from '../../../services/items.service';
+import { ToastService } from '../../../services/toast.service';
+import { parseValidationErrors } from '../../../shared/models/validation-errors.model';
 
 @Component({
   selector: 'app-recommendation-edit-form',
@@ -49,12 +49,9 @@ export class RecommendationEditFormComponent {
     if (!this.name.trim()) {
       this.formErrors['name'] = this.translate.instant('ITEMS.VALIDATION.NAME_REQUIRED');
     }
-    if (this.price <= 0) {
+    if (this.price <= 0 || this.price > 10000) {
       this.formErrors['price'] = this.translate.instant('ITEMS.VALIDATION.PRICE_INVALID');
     }
-    if (this.amount <= 0) {
-      this.formErrors['amount'] = this.translate.instant('ITEMS.VALIDATION.AMOUNT_INVALID');
-    }
     if (this.rating <= 0) {
       this.formErrors['rating'] = this.translate.instant('ITEMS.VALIDATION.RATING_REQUIRED');
     }
@@ -71,7 +68,7 @@ export class RecommendationEditFormComponent {
       name: this.name,
       comment: this.comment,
       price: this.price,
-      amount: this.amount,
+      amount: 1,
       rating: this.rating,
       tags: this.tags
     };
@@ -89,7 +86,7 @@ export class RecommendationEditFormComponent {
           this.onSuccess();
         }
       },
-      error: error => {
+      error: (error: any) => {
         this.formErrors = parseValidationErrors(error);
         this.formValidated = true;
         if (Object.keys(this.formErrors).length === 0 || this.formErrors['general']) {
diff --git a/src/ExpensesCalculator.UI/src/app/recommendations/recommendations/recommendations.component.html b/src/ExpensesCalculator.UI/src/app/recommendations/recommendations/recommendations.component.html
index f055ae2..5856043 100644
--- a/src/ExpensesCalculator.UI/src/app/recommendations/recommendations/recommendations.component.html
+++ b/src/ExpensesCalculator.UI/src/app/recommendations/recommendations/recommendations.component.html
@@ -241,7 +241,7 @@ <h3>{{ 'ITEMS.NO_SEARCH_RESULTS' | translate }}</h3>
                                 <!-- Desktop buttons (top-right) -->
                                 <!-- Edit and Delete buttons for editable items -->
                                 <div *ngIf="item.canEdit" class="d-none d-md-flex gap-1" (click)="$event.stopPropagation()">
-                                    <button class="btn btn-outline-warning text-white btn-action-edit" type="button"
+                                    <button class="btn btn-outline-primary text-white btn-action-edit" type="button"
                                         (click)="openModal('edit', item.id)"
                                         style="padding: 0; font-size: 0.85rem; width: 1.5rem; height: 1.5rem; line-height: 1; display: flex; align-items: center; justify-content: center;">
                                         <i class="bi bi-pencil"></i>
@@ -252,27 +252,19 @@ <h3>{{ 'ITEMS.NO_SEARCH_RESULTS' | translate }}</h3>
                                         <i class="bi bi-trash"></i>
                                     </button>
                                 </div>
-                                <!-- Navigation button for other items -->
+                                <!-- Navigation button for other items - desktop only -->
                                 <a *ngIf="!item.canEdit && item.dayExpensesId && item.dayExpensesId !== '00000000-0000-0000-0000-000000000000'"
                                     [routerLink]="['/day-expenses-details', item.dayExpensesId]"
                                     [queryParams]="{ checkId: item.checkId, itemId: item.id }"
-                                    class="btn btn-outline-primary text-info"
+                                    class="btn btn-outline-primary text-info d-none d-md-flex"
                                     style="padding: 0; font-size: 0.85rem; width: 1.5rem; height: 1.5rem; line-height: 1; display: flex; align-items: center; justify-content: center;">
                                     <i class="bi bi-cloud-check"></i>
                                 </a>
                             </div>
 
-                            <div class="d-flex align-items-center justify-content-between my-2 flex-wrap"
-                                style="font-size: 0.8rem;">
+                            <div class="d-flex align-items-center justify-content-between my-2 mb-0 flex-wrap"
+                                style="font-size: 0.8rem; gap: 0.5rem;">
                                 <div>{{ item.price | currency:('GENERAL.CURRENCY_CODE' | translate):('GENERAL.CURRENCY_SYMBOL' | translate) }}</div>
-                                <div>×</div>
-                                <div><i class="bi bi-grid-fill me-1"></i>{{ item.amount }}</div>
-                                <div>=</div>
-                                <div>{{ getTotalPrice(item) | currency:('GENERAL.CURRENCY_CODE' | translate):('GENERAL.CURRENCY_SYMBOL' | translate) }}</div>
-                            </div>
-
-                            <div class="d-flex align-items-center justify-content-between mt-2 mb-0 flex-nowrap"
-                                style="font-size: 0.8rem;">
                                 <div *ngIf="item.users && item.users.length > 0" style="white-space: nowrap;">
                                     <label class="mb-0" data-bs-toggle="tooltip" data-bs-placement="top"
                                         data-bs-html="true" data-bs-custom-class="custom-tooltip"
@@ -303,7 +295,7 @@ <h3>{{ 'ITEMS.NO_SEARCH_RESULTS' | translate }}</h3>
 
                             <!-- Mobile buttons (below tags) - only for editable items -->
                             <div *ngIf="item.canEdit" class="d-flex d-md-none gap-2 mt-2" (click)="$event.stopPropagation()">
-                                <button class="btn btn-sm btn-outline-warning text-white flex-fill" type="button"
+                                <button class="btn btn-sm btn-outline-primary text-white flex-fill" type="button"
                                     (click)="openModal('edit', item.id)">
                                     <i class="bi bi-pencil me-1"></i>{{ 'ITEMS.MODAL.SAVE' | translate }}
                                 </button>
@@ -312,6 +304,15 @@ <h3>{{ 'ITEMS.NO_SEARCH_RESULTS' | translate }}</h3>
                                     <i class="bi bi-trash me-1"></i>{{ 'ITEMS.MODAL.DELETE' | translate }}
                                 </button>
                             </div>
+
+                            <!-- View in Expenses button (full width at bottom) - only on small screens -->
+                            <a *ngIf="!item.canEdit && item.dayExpensesId && item.dayExpensesId !== '00000000-0000-0000-0000-000000000000'"
+                                [routerLink]="['/day-expenses-details', item.dayExpensesId]"
+                                [queryParams]="{ checkId: item.checkId, itemId: item.id }"
+                                class="btn btn-sm btn-outline-primary text-info w-100 mt-2 d-block d-md-none"
+                                (click)="$event.stopPropagation()">
+                                <i class="bi bi-cloud-check me-1"></i>{{ 'ITEMS.VIEW_IN_EXPENSES' | translate }}
+                            </a>
                         </div>
                     </div>
                     <!-- Card with tour anchor (first item) -->
@@ -328,7 +329,7 @@ <h3>{{ 'ITEMS.NO_SEARCH_RESULTS' | translate }}</h3>
                                 <!-- Desktop buttons (top-right) -->
                                 <!-- Edit and Delete buttons for editable items -->
                                 <div *ngIf="item.canEdit" class="d-none d-md-flex gap-1" (click)="$event.stopPropagation()">
-                                    <button class="btn btn-outline-warning text-white btn-action-edit" type="button"
+                                    <button class="btn btn-outline-primary text-white btn-action-edit" type="button"
                                         (click)="openModal('edit', item.id)"
                                         style="padding: 0; font-size: 0.85rem; width: 1.5rem; height: 1.5rem; line-height: 1; display: flex; align-items: center; justify-content: center;">
                                         <i class="bi bi-pencil"></i>
@@ -339,27 +340,19 @@ <h3>{{ 'ITEMS.NO_SEARCH_RESULTS' | translate }}</h3>
                                         <i class="bi bi-trash"></i>
                                     </button>
                                 </div>
-                                <!-- Navigation button for other items -->
+                                <!-- Navigation button for other items - desktop only -->
                                 <a *ngIf="!item.canEdit && item.dayExpensesId && item.dayExpensesId !== '00000000-0000-0000-0000-000000000000'"
                                     [routerLink]="['/day-expenses-details', item.dayExpensesId]"
                                     [queryParams]="{ checkId: item.checkId, itemId: item.id }"
-                                    class="btn btn-outline-primary text-info"
+                                    class="btn btn-outline-primary text-info d-none d-md-flex"
                                     style="padding: 0; font-size: 0.85rem; width: 1.5rem; height: 1.5rem; line-height: 1; display: flex; align-items: center; justify-content: center;">
                                     <i class="bi bi-cloud-check"></i>
                                 </a>
                             </div>
 
-                            <div class="d-flex align-items-center justify-content-between my-2 flex-wrap"
-                                style="font-size: 0.8rem;">
+                            <div class="d-flex align-items-center justify-content-between my-2 mb-0 flex-wrap"
+                                style="font-size: 0.8rem; gap: 0.5rem;">
                                 <div>{{ item.price | currency:('GENERAL.CURRENCY_CODE' | translate):('GENERAL.CURRENCY_SYMBOL' | translate) }}</div>
-                                <div>×</div>
-                                <div><i class="bi bi-grid-fill me-1"></i>{{ item.amount }}</div>
-                                <div>=</div>
-                                <div>{{ getTotalPrice(item) | currency:('GENERAL.CURRENCY_CODE' | translate):('GENERAL.CURRENCY_SYMBOL' | translate) }}</div>
-                            </div>
-
-                            <div class="d-flex align-items-center justify-content-between mt-2 mb-0 flex-nowrap"
-                                style="font-size: 0.8rem;">
                                 <div *ngIf="item.users && item.users.length > 0" style="white-space: nowrap;">
                                     <label class="mb-0" data-bs-toggle="tooltip" data-bs-placement="top"
                                         data-bs-html="true" data-bs-custom-class="custom-tooltip"
@@ -390,7 +383,7 @@ <h3>{{ 'ITEMS.NO_SEARCH_RESULTS' | translate }}</h3>
 
                             <!-- Mobile buttons (below tags) - only for editable items -->
                             <div *ngIf="item.canEdit" class="d-flex d-md-none gap-2 mt-2" (click)="$event.stopPropagation()">
-                                <button class="btn btn-sm btn-outline-warning text-white flex-fill" type="button"
+                                <button class="btn btn-sm btn-outline-primary text-white flex-fill" type="button"
                                     (click)="openModal('edit', item.id)">
                                     <i class="bi bi-pencil me-1"></i>{{ 'ITEMS.MODAL.SAVE' | translate }}
                                 </button>
@@ -399,6 +392,15 @@ <h3>{{ 'ITEMS.NO_SEARCH_RESULTS' | translate }}</h3>
                                     <i class="bi bi-trash me-1"></i>{{ 'ITEMS.MODAL.DELETE' | translate }}
                                 </button>
                             </div>
+
+                            <!-- View in Expenses button (full width at bottom) - only on small screens -->
+                            <a *ngIf="!item.canEdit && item.dayExpensesId && item.dayExpensesId !== '00000000-0000-0000-0000-000000000000'"
+                                [routerLink]="['/day-expenses-details', item.dayExpensesId]"
+                                [queryParams]="{ checkId: item.checkId, itemId: item.id }"
+                                class="btn btn-sm btn-outline-primary text-info w-100 mt-2 d-block d-md-none"
+                                (click)="$event.stopPropagation()">
+                                <i class="bi bi-cloud-check me-1"></i>{{ 'ITEMS.VIEW_IN_EXPENSES' | translate }}
+                            </a>
                         </div>
                     </div>
                 </div>
@@ -428,7 +430,6 @@ <h3>{{ 'ITEMS.NO_SEARCH_RESULTS' | translate }}</h3>
 
         <!-- Items count -->
         <div *ngIf="totalCount > 0">
-            <hr class="w-100 my-0" style="border-color: #080f27; opacity: 1;" />
             <div class="pagination-info ms-3 my-3 pb-3 text-white">
                 {{ 'ITEMS.SHOWING' | translate }} {{ paginationStartIndex }} {{ 'ITEMS.TO' | translate }} {{
                 paginationEndIndex }} {{ 'ITEMS.OF' | translate }} {{ totalCount }}
diff --git a/src/ExpensesCalculator.UI/src/app/recommendations/recommendations/recommendations.component.ts b/src/ExpensesCalculator.UI/src/app/recommendations/recommendations/recommendations.component.ts
index 76755a5..639b4a5 100644
--- a/src/ExpensesCalculator.UI/src/app/recommendations/recommendations/recommendations.component.ts
+++ b/src/ExpensesCalculator.UI/src/app/recommendations/recommendations/recommendations.component.ts
@@ -6,9 +6,9 @@ import { TranslatePipe, TranslateService } from '@ngx-translate/core';
 import { ModalService } from '../../services/modal.service';
 import { FilterBarComponent, FilterOption } from '../../shared/filter-bar/filter-bar.component';
 import { SortBarComponent, SortOption } from '../../shared/sort-bar/sort-bar.component';
-import { RecommendationAddFormComponent } from '../../modals/recommendation-form/recommendation-add-form.component';
-import { RecommendationEditFormComponent } from '../../modals/recommendation-form/recommendation-edit-form.component';
-import { RecommendationDeleteFormComponent } from '../../modals/recommendation-form/recommendation-delete-form.component';
+import { RecommendationAddFormComponent } from '../../modals/recommendation-form/recommendation-add-form/recommendation-add-form.component';
+import { RecommendationEditFormComponent } from '../../modals/recommendation-form/recommendation-edit-form/recommendation-edit-form.component';
+import { RecommendationDeleteFormComponent } from '../../modals/recommendation-form/recommendation-delete-form/recommendation-delete-form.component';
 import { ItemsService, Item } from '../../services/items.service';
 import { ToastService } from '../../services/toast.service';
 import { Subject, Subscription } from 'rxjs';
@@ -360,7 +360,7 @@ export class RecommendationsComponent implements OnInit, AfterViewInit, OnDestro
           canDelete: item.canEdit || false,
           onSuccess: () => this.loadItems()
         },
-        'md'
+        'lg'
       );
     }
   }
diff --git a/src/ExpensesCalculator.UI/src/app/services/auth.service.ts b/src/ExpensesCalculator.UI/src/app/services/auth.service.ts
index 263a7d5..d399afc 100644
--- a/src/ExpensesCalculator.UI/src/app/services/auth.service.ts
+++ b/src/ExpensesCalculator.UI/src/app/services/auth.service.ts
@@ -97,30 +97,34 @@ export class RefreshInterceptor implements HttpInterceptor {
 
   constructor(
     private auth: AuthService,
-    private tokens: TokenService 
+    private tokens: TokenService,
+    private router: Router
   ) {}
 
   intercept(req: HttpRequest<any>, next: HttpHandler) {
     return next.handle(req).pipe(
       catchError(err => {
-        if (err.status === 401 && !this.isRefreshing){
+        // Only handle 401 errors, skip if already refreshing or if this is the refresh endpoint
+        if (err.status === 401 && !this.isRefreshing && !req.url.includes('/auth/refresh')) {
           this.isRefreshing = true;
 
           return this.auth.refreshToken().pipe(
             switchMap(() => {
               this.isRefreshing = false;
 
-              const newReq = req.clone({
+              // Retry the original request with the new token
+              const retryReq = req.clone({
                 setHeaders: {
                   Authorization: `Bearer ${this.tokens.getAccessToken()}`
                 }
-              })
+              });
 
-              return next.handle(newReq);
+              return next.handle(retryReq);
             }),
             catchError(() => {
               this.isRefreshing = false;
               this.tokens.clear();
+              this.router.navigate(['/login']);
               return throwError(() => err);
             })
           );
diff --git a/src/ExpensesCalculator.UI/src/app/services/form-validation.service.ts b/src/ExpensesCalculator.UI/src/app/services/form-validation.service.ts
index 92e944c..a0bbc60 100644
--- a/src/ExpensesCalculator.UI/src/app/services/form-validation.service.ts
+++ b/src/ExpensesCalculator.UI/src/app/services/form-validation.service.ts
@@ -64,10 +64,10 @@ export class FormValidationService {
     if (!name.trim()) {
       errors['name'] = this.translate.instant('ITEMS.VALIDATION.NAME_REQUIRED');
     }
-    if (!price || price <= 0) {
+    if (!price || price <= 0 || price > 10000) {
       errors['price'] = this.translate.instant('ITEMS.VALIDATION.PRICE_INVALID');
     }
-    if (amount <= 0) {
+    if (amount <= 0 || amount > 1000) {
       errors['amount'] = this.translate.instant('ITEMS.VALIDATION.AMOUNT_INVALID');
     }
     if (rating <= 0) {
diff --git a/src/ExpensesCalculator.UI/tsconfig.json b/src/ExpensesCalculator.UI/tsconfig.json
index 5525117..3e01b56 100644
--- a/src/ExpensesCalculator.UI/tsconfig.json
+++ b/src/ExpensesCalculator.UI/tsconfig.json
@@ -4,6 +4,7 @@
   "compileOnSave": false,
   "compilerOptions": {
     "outDir": "./dist/out-tsc",
+    "rootDir": "./src",
     "strict": true,
     "noImplicitOverride": true,
     "noPropertyAccessFromIndexSignature": true,