From 908918c43d60a3c906656fc92b7bb2527cdbe788 Mon Sep 17 00:00:00 2001
From: Dmytro Svyrydenko <dmytro.svyrydenko@gmail.com>
Date: Mon, 16 Sep 2024 21:10:27 +0200
Subject: [PATCH 1/9] fix: Bad params being sent upon categories creation

---
 src/common/utils/remove-keys.ts                  |  9 +++++++++
 src/pages/settings/subpages/categories/index.vue | 14 +++++++-------
 2 files changed, 16 insertions(+), 7 deletions(-)
 create mode 100644 src/common/utils/remove-keys.ts

diff --git a/src/common/utils/remove-keys.ts b/src/common/utils/remove-keys.ts
new file mode 100644
index 00000000..47c990f4
--- /dev/null
+++ b/src/common/utils/remove-keys.ts
@@ -0,0 +1,9 @@
+export function removeNullishValues<T extends object>(obj: T): Partial<T> {
+  return Object.entries(obj).reduce((acc, [key, value]) => {
+    if (value === null || value === undefined) {
+      return acc;
+    }
+    acc[key as keyof T] = value;
+    return acc;
+  }, {} as Partial<T>);
+}
diff --git a/src/pages/settings/subpages/categories/index.vue b/src/pages/settings/subpages/categories/index.vue
index 56f60673..7a2ba235 100644
--- a/src/pages/settings/subpages/categories/index.vue
+++ b/src/pages/settings/subpages/categories/index.vue
@@ -102,6 +102,7 @@ import InputField from "@/components/fields/input-field.vue";
 import UiButton from "@/components/common/ui-button.vue";
 import { type FormattedCategory } from "@/common/types";
 import { ApiErrorResponseError } from "@/js/errors";
+import { removeNullishValues } from "@/common/utils/remove-keys";
 
 defineOptions({
   name: "settings-categories",
@@ -153,18 +154,17 @@ const applyChanges = async () => {
         name: form.name,
       });
     } else if (isCreating.value) {
-      let params: Parameters<typeof createCategory>[0] = {
-        name: form.name,
-        imageUrl: "",
-        color: "",
-      };
+      type InputParams = Parameters<typeof createCategory>[0];
+
+      let params: InputParams = { name: form.name };
+
       if (selectedCategory.value) {
-        params = {
+        params = removeNullishValues({
           ...params,
           imageUrl: selectedCategory.value.imageUrl,
           color: selectedCategory.value.color,
           parentId: selectedCategory.value.id,
-        };
+        }) as InputParams;
       }
       await createCategory(params);
     }

From ab1e36044f8294e6fd6e40104f4ce18040457be3 Mon Sep 17 00:00:00 2001
From: Dmytro Svyrydenko <dmytro.svyrydenko@gmail.com>
Date: Mon, 16 Sep 2024 21:11:44 +0200
Subject: [PATCH 2/9] chore: Increate categories dropdown height

---
 src/components/fields/category-select-field.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/fields/category-select-field.vue b/src/components/fields/category-select-field.vue
index f221cd77..7e8e18e0 100644
--- a/src/components/fields/category-select-field.vue
+++ b/src/components/fields/category-select-field.vue
@@ -348,7 +348,7 @@ onBeforeUnmount(() => {
 }
 .category-select-field__dropdown-values {
   overflow: auto;
-  max-height: 250px;
+  max-height: 350px;
 }
 .category-select-field__dropdown-item {
   display: flex;

From a781ae0273ff546d2613513e739dace4292f6828 Mon Sep 17 00:00:00 2001
From: Dmytro Svyrydenko <dmytro.svyrydenko@gmail.com>
Date: Mon, 16 Sep 2024 21:12:47 +0200
Subject: [PATCH 3/9] fix: Account creation btn color

---
 .../modify-record/components/account-field.vue   | 16 ++++------------
 1 file changed, 4 insertions(+), 12 deletions(-)

diff --git a/src/components/modals/modify-record/components/account-field.vue b/src/components/modals/modify-record/components/account-field.vue
index 7bba72dc..0afe1c2c 100644
--- a/src/components/modals/modify-record/components/account-field.vue
+++ b/src/components/modals/modify-record/components/account-field.vue
@@ -45,7 +45,10 @@
     <form-row>
       <input-field model-value="No account exists" label="Account" readonly :disabled="disabled">
         <template #label-right>
-          <div class="account-field__create-account" @click="redirectToCreateAccountPage">
+          <div
+            class="text-primary cursor-pointer hover:underline"
+            @click="redirectToCreateAccountPage"
+          >
             Create account
           </div>
         </template>
@@ -101,14 +104,3 @@ const updateFormAccount = (account: AccountModel) => {
   emit("update:account", account);
 };
 </script>
-
-<style lang="scss" scoped>
-.account-field__create-account {
-  color: var(--primary-500);
-  cursor: pointer;
-
-  &:hover {
-    text-decoration: underline;
-  }
-}
-</style>

From 2179afe07e2e73b92e43512f1486b4d6b7a73a6e Mon Sep 17 00:00:00 2001
From: Dmytro Svyrydenko <dmytro.svyrydenko@gmail.com>
Date: Mon, 16 Sep 2024 21:22:31 +0200
Subject: [PATCH 4/9] fix: "Expenses Structure" prev month % diff calculation

---
 src/components/widgets/expenses-structure.vue |  4 +-
 .../calculate-percentage-difference.spec.ts   | 42 ++++++++++++-------
 .../math/calculate-percentage-difference.ts   |  9 ++--
 3 files changed, 33 insertions(+), 22 deletions(-)

diff --git a/src/components/widgets/expenses-structure.vue b/src/components/widgets/expenses-structure.vue
index bbcd66ee..8c607b90 100644
--- a/src/components/widgets/expenses-structure.vue
+++ b/src/components/widgets/expenses-structure.vue
@@ -19,8 +19,8 @@
 
           <div
             :class="{
-              'text-[var(--app-error)]': expensesDiff < 0,
-              'text-[var(--app-success)]': expensesDiff > 0,
+              'text-[var(--app-error)]': expensesDiff > 0,
+              'text-[var(--app-success)]': expensesDiff < 0,
             }"
           >
             {{ `${expensesDiff}%` }}
diff --git a/src/js/helpers/math/calculate-percentage-difference.spec.ts b/src/js/helpers/math/calculate-percentage-difference.spec.ts
index 59591ff7..c274260f 100644
--- a/src/js/helpers/math/calculate-percentage-difference.spec.ts
+++ b/src/js/helpers/math/calculate-percentage-difference.spec.ts
@@ -3,35 +3,45 @@ import { calculatePercentageDifference } from "./calculate-percentage-difference
 describe("calculatePercentageDifference", () => {
   test.each([
     [0, 0, 0, "returns 0 when both numbers are 0"],
-    [0, 10, 100, "returns 100 when one number is 0"],
-    [10, 0, 100, "returns 100 when one number is 0"],
-    [20, -20, 100, "returns 100 when numbers have opposite signs"],
-    [-15, 15, 100, "returns 100 when numbers have opposite signs"],
+    [0, 10, -100, "returns -100 when first number is 0"],
+    [10, 0, 100, "returns 100 when second number is 0"],
+    [20, -20, 100, "returns 100 when numbers have opposite signs (positive to negative)"],
+    [-15, 15, -100, "returns -100 when numbers have opposite signs (negative to positive)"],
     [100, 90, 10.53, "calculates correct percentage for positive numbers"],
+    [90, 100, -10.53, "calculates correct negative percentage for positive numbers"],
     [50, 40, 22.22, "calculates correct percentage for positive numbers"],
-    [-100, -90, 10.53, "calculates correct percentage for negative numbers"],
-    [-50, -40, 22.22, "calculates correct percentage for negative numbers"],
-    [-10, 10, 100, "calculates correct percentage for mixed positive and negative numbers"],
-    [1, 1000000, 100, "returns 100 for very large differences"],
-    [-1000000, 1, 100, "returns 100 for very large differences"],
-    [0.1, 0.2, 66.67, "handles floating point numbers"],
-    [1.5, 2.5, 50, "handles floating point numbers"],
-    [NaN, 10, 100, "treats NaN as 0"],
+    [40, 50, -22.22, "calculates correct negative percentage for positive numbers"],
+    [-100, -90, -10.53, "calculates correct percentage for negative numbers"],
+    [-90, -100, 10.53, "calculates correct positive percentage for negative numbers"],
+    [-50, -40, -22.22, "calculates correct percentage for negative numbers"],
+    [-40, -50, 22.22, "calculates correct positive percentage for negative numbers"],
+    [-10, 10, -100, "calculates correct percentage for mixed positive and negative numbers"],
+    [10, -10, 100, "calculates correct percentage for mixed positive and negative numbers"],
+    [1, 1000000, -99.9998, "calculates percentage for very large differences"],
+    [-1000000, 1, -100, "returns -100 for very large negative differences"],
+    [0.1, 0.2, -66.67, "handles floating point numbers"],
+    [0.2, 0.1, 66.67, "handles floating point numbers (reverse)"],
+    [1.5, 2.5, -50, "handles floating point numbers"],
+    [2.5, 1.5, 50, "handles floating point numbers (reverse)"],
+    [NaN, 10, -100, "treats NaN as 0"],
     [10, NaN, 100, "treats NaN as 0"],
     [NaN, NaN, 0, "treats NaN as 0 (both NaN)"],
-    [Infinity, 10, 100, "treats Infinity as 0"],
+    [Infinity, 10, -100, "treats Infinity as 0"],
     [10, Infinity, 100, "treats Infinity as 0"],
     [Infinity, Infinity, 0, "treats Infinity as 0 (both Infinity)"],
-    [-Infinity, 10, 100, "treats -Infinity as 0"],
+    [-Infinity, 10, -100, "treats -Infinity as 0"],
     [10, -Infinity, 100, "treats -Infinity as 0"],
     [-Infinity, -Infinity, 0, "treats -Infinity as 0 (both -Infinity)"],
   ])("(%f, %f) = %f (%s)", (a, b, expected) => {
     expect(calculatePercentageDifference(a, b)).toBeCloseTo(expected, 2);
   });
 
-  test("is symmetric", () => {
+  test("is not symmetric", () => {
     const a = 10;
     const b = 20;
-    expect(calculatePercentageDifference(a, b)).toBeCloseTo(calculatePercentageDifference(b, a), 5);
+    expect(calculatePercentageDifference(a, b)).toBeCloseTo(
+      -calculatePercentageDifference(b, a),
+      5,
+    );
   });
 });
diff --git a/src/js/helpers/math/calculate-percentage-difference.ts b/src/js/helpers/math/calculate-percentage-difference.ts
index b54c08ca..9910e022 100644
--- a/src/js/helpers/math/calculate-percentage-difference.ts
+++ b/src/js/helpers/math/calculate-percentage-difference.ts
@@ -9,16 +9,17 @@ export function calculatePercentageDifference(_a: number, _b: number): number {
 
   // If one number is zero and the other isn't, it's a 100% difference
   if (a === 0 || b === 0) {
-    return 100;
+    return a > b ? 100 : -100;
   }
 
   // If the numbers have opposite signs
   if ((a > 0 && b < 0) || (a < 0 && b > 0)) {
-    return 100;
+    return a > b ? 100 : -100;
   }
 
-  const difference = Math.abs(a - b);
+  const difference = a - b;
   const average = (Math.abs(a) + Math.abs(b)) / 2;
 
-  return Math.min(100, (difference / average) * 100);
+  const percent = (difference / average) * 100;
+  return Math.max(-100, Math.min(100, percent));
 }

From 4478b2cfbba0062e3ce55b1775d7a2c08921dc52 Mon Sep 17 00:00:00 2001
From: Dmytro Svyrydenko <dmytro.svyrydenko@gmail.com>
Date: Mon, 16 Sep 2024 22:08:21 +0200
Subject: [PATCH 5/9] feat: Improve dashboard layout on tablets

---
 src/pages/dashboard/dashboard.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/pages/dashboard/dashboard.vue b/src/pages/dashboard/dashboard.vue
index 5477ec1e..752ddde5 100644
--- a/src/pages/dashboard/dashboard.vue
+++ b/src/pages/dashboard/dashboard.vue
@@ -100,7 +100,7 @@ const selectNextPeriod = () => {
   grid-template-areas: "balance-trend spending-categories latest-records";
   grid-gap: 24px;
 
-  @include below(1200) {
+  @include below(1300) {
     grid-template-columns: repeat(2, minmax(0, 1fr));
     grid-template-areas: "balance-trend spending-categories" "latest-records latest-records";
   }

From 8fe73298041f0a83e457b1b65c7abad15b348aba Mon Sep 17 00:00:00 2001
From: Dmytro Svyrydenko <dmytro.svyrydenko@gmail.com>
Date: Mon, 16 Sep 2024 22:08:30 +0200
Subject: [PATCH 6/9] feat: Add icons to sidebar

---
 src/components/ui-sidebar.vue | 38 ++++++++++++++++++++++++-----------
 1 file changed, 26 insertions(+), 12 deletions(-)

diff --git a/src/components/ui-sidebar.vue b/src/components/ui-sidebar.vue
index 01c60b7e..9111a01f 100644
--- a/src/components/ui-sidebar.vue
+++ b/src/components/ui-sidebar.vue
@@ -9,9 +9,10 @@
           <ui-button
             :variant="isActive ? 'default' : 'ghost'"
             as="span"
-            class="justify-start w-full px-3"
+            class="sidebar__item"
             size="lg"
           >
+            <LayoutDashboardIcon />
             Dashboard
           </ui-button>
         </router-link>
@@ -20,9 +21,10 @@
           <ui-button
             :variant="isActive ? 'default' : 'ghost'"
             as="span"
-            class="justify-start w-full px-3"
+            class="sidebar__item"
             size="lg"
           >
+            <CreditCardIcon />
             Accounts
           </ui-button>
         </router-link>
@@ -31,9 +33,10 @@
           <ui-button
             :variant="isActive ? 'default' : 'ghost'"
             as="span"
-            class="justify-start w-full px-3"
+            class="sidebar__item"
             size="lg"
           >
+            <ListIcon />
             Records
           </ui-button>
         </router-link>
@@ -43,9 +46,10 @@
             <ui-button
               :variant="isActive ? 'default' : 'ghost'"
               as="span"
-              class="justify-start w-full px-3"
+              class="sidebar__item"
               size="lg"
             >
+              <ChartAreaIcon />
               Analytics (dev only)
             </ui-button>
           </router-link>
@@ -56,9 +60,10 @@
             <ui-button
               :variant="isActive ? 'default' : 'ghost'"
               as="span"
-              class="justify-start w-full px-3"
+              class="sidebar__item"
               size="lg"
             >
+              <BitcoinIcon />
               Crypto (dev only)
             </ui-button>
           </router-link>
@@ -67,15 +72,17 @@
           <ui-button
             :variant="isActive ? 'default' : 'ghost'"
             as="span"
-            class="justify-start w-full px-3"
+            class="sidebar__item"
             size="lg"
           >
+            <SettingsIcon />
             Settings
           </ui-button>
         </router-link>
       </nav>
 
-      <ui-button variant="secondary" class="sidebar__logout" @click="logOutHandler">
+      <ui-button variant="secondary" class="sidebar__item mt-auto" @click="logOutHandler">
+        <LogOutIcon />
         Logout
       </ui-button>
     </CardContent>
@@ -88,6 +95,15 @@ import { useRouter } from "vue-router";
 import { useAuthStore } from "@/stores";
 import { isDevEnv } from "@/common/const";
 import { ROUTES_NAMES } from "@/routes";
+import {
+  LayoutDashboardIcon,
+  CreditCardIcon,
+  ListIcon,
+  ChartAreaIcon,
+  BitcoinIcon,
+  SettingsIcon,
+  LogOutIcon,
+} from "lucide-vue-next";
 import UiButton from "@/components/lib/ui/button/Button.vue";
 import { Card, CardContent, CardHeader } from "@/components/lib/ui/card";
 
@@ -114,6 +130,9 @@ const logOutHandler = () => {
 .sidebar__content {
   @apply flex flex-col flex-grow;
 }
+.sidebar__item {
+  @apply justify-start w-full px-3 gap-2;
+}
 .sidebar__navigation {
   display: grid;
   gap: 16px;
@@ -142,9 +161,4 @@ const logOutHandler = () => {
     }
   }
 }
-.sidebar__logout {
-  margin-top: auto;
-  width: 100%;
-  justify-content: flex-start;
-}
 </style>

From feaa6905fe64d1074dde3f16f3cc359f178a1aea Mon Sep 17 00:00:00 2001
From: Dmytro Svyrydenko <dmytro.svyrydenko@gmail.com>
Date: Mon, 16 Sep 2024 22:18:33 +0200
Subject: [PATCH 7/9] chore: Rename /records to /transactions so it's more
 clear to users

---
 src/components/ui-sidebar.vue             | 2 +-
 src/components/widgets/latest-records.vue | 5 ++++-
 src/routes/constants.ts                   | 2 +-
 src/routes/index.ts                       | 4 ++--
 4 files changed, 8 insertions(+), 5 deletions(-)

diff --git a/src/components/ui-sidebar.vue b/src/components/ui-sidebar.vue
index 9111a01f..10ce3011 100644
--- a/src/components/ui-sidebar.vue
+++ b/src/components/ui-sidebar.vue
@@ -29,7 +29,7 @@
           </ui-button>
         </router-link>
 
-        <router-link v-slot="{ isActive }" :to="{ name: ROUTES_NAMES.records }">
+        <router-link v-slot="{ isActive }" :to="{ name: ROUTES_NAMES.transactions }">
           <ui-button
             :variant="isActive ? 'default' : 'ghost'"
             as="span"
diff --git a/src/components/widgets/latest-records.vue b/src/components/widgets/latest-records.vue
index 674bcb3d..eaca814a 100644
--- a/src/components/widgets/latest-records.vue
+++ b/src/components/widgets/latest-records.vue
@@ -2,7 +2,10 @@
   <WidgetWrapper class="latest-records-widget" title="Latest records" higher>
     <template #action>
       <template v-if="!isDataEmpty">
-        <router-link class="latest-records-widget__show-all" :to="{ name: ROUTES_NAMES.records }">
+        <router-link
+          class="latest-records-widget__show-all"
+          :to="{ name: ROUTES_NAMES.transactions }"
+        >
           <ui-button variant="link" as="span" size="sm"> Show all </ui-button>
         </router-link>
       </template>
diff --git a/src/routes/constants.ts b/src/routes/constants.ts
index 349013f6..c6714fc5 100644
--- a/src/routes/constants.ts
+++ b/src/routes/constants.ts
@@ -11,7 +11,7 @@ export const ROUTES_NAMES = Object.freeze({
   createAccount: `${ROUTER_LAYOUTS.dashboard}.create-account`,
   crypto: `${ROUTER_LAYOUTS.dashboard}.crypto`,
   analytics: `${ROUTER_LAYOUTS.dashboard}.analytics`,
-  records: `${ROUTER_LAYOUTS.dashboard}.records`,
+  transactions: `${ROUTER_LAYOUTS.dashboard}.transactions`,
   settings: `${ROUTER_LAYOUTS.dashboard}.settings`,
   settingsCurrencies: `${ROUTER_LAYOUTS.dashboard}.settings.currencies`,
   settingsCategories: `${ROUTER_LAYOUTS.dashboard}.settings.categories`,
diff --git a/src/routes/index.ts b/src/routes/index.ts
index eb8f080f..1c60e2c5 100644
--- a/src/routes/index.ts
+++ b/src/routes/index.ts
@@ -44,8 +44,8 @@ const routes = [
         component: () => import("@/pages/analytics/index.vue"),
       },
       {
-        path: "/records",
-        name: ROUTES_NAMES.records,
+        path: "/transactions",
+        name: ROUTES_NAMES.transactions,
         component: () => import("@/pages/records/records.vue"),
       },
       {

From 2cc4cea8cd1438b555c92db38b1af088079cf3cb Mon Sep 17 00:00:00 2001
From: Dmytro Svyrydenko <dmytro.svyrydenko@gmail.com>
Date: Mon, 16 Sep 2024 22:18:45 +0200
Subject: [PATCH 8/9] feat: Improve dashboard mobile design

---
 src/components/ui-sidebar.vue | 34 +++++++++++++++++++---------------
 1 file changed, 19 insertions(+), 15 deletions(-)

diff --git a/src/components/ui-sidebar.vue b/src/components/ui-sidebar.vue
index 10ce3011..37593f06 100644
--- a/src/components/ui-sidebar.vue
+++ b/src/components/ui-sidebar.vue
@@ -1,9 +1,12 @@
 <template>
   <Card class="sidebar">
     <CardHeader>
-      <div class="sidebar__logo">BudgetTracker</div>
+      <div class="sidebar__logo">
+        <span class="hidden md:block"> BudgetTracker </span>
+        <span class="md:hidden"> BT </span>
+      </div>
     </CardHeader>
-    <CardContent class="sidebar__content">
+    <CardContent class="px-3 md:px-6 flex flex-col flex-grow">
       <nav class="sidebar__navigation">
         <router-link v-slot="{ isActive }" :to="{ name: ROUTES_NAMES.home }">
           <ui-button
@@ -13,7 +16,7 @@
             size="lg"
           >
             <LayoutDashboardIcon />
-            Dashboard
+            <span> Dashboard </span>
           </ui-button>
         </router-link>
 
@@ -24,8 +27,8 @@
             class="sidebar__item"
             size="lg"
           >
-            <CreditCardIcon />
-            Accounts
+            <LayersIcon />
+            <span> Accounts </span>
           </ui-button>
         </router-link>
 
@@ -36,8 +39,8 @@
             class="sidebar__item"
             size="lg"
           >
-            <ListIcon />
-            Records
+            <CreditCardIcon />
+            <span> Transactions </span>
           </ui-button>
         </router-link>
 
@@ -50,7 +53,7 @@
               size="lg"
             >
               <ChartAreaIcon />
-              Analytics (dev only)
+              <span> Analytics (dev only) </span>
             </ui-button>
           </router-link>
         </template>
@@ -64,7 +67,7 @@
               size="lg"
             >
               <BitcoinIcon />
-              Crypto (dev only)
+              <span> Crypto (dev only) </span>
             </ui-button>
           </router-link>
         </template>
@@ -76,14 +79,14 @@
             size="lg"
           >
             <SettingsIcon />
-            Settings
+            <span> Settings </span>
           </ui-button>
         </router-link>
       </nav>
 
       <ui-button variant="secondary" class="sidebar__item mt-auto" @click="logOutHandler">
         <LogOutIcon />
-        Logout
+        <span> Logout </span>
       </ui-button>
     </CardContent>
   </Card>
@@ -98,7 +101,7 @@ import { ROUTES_NAMES } from "@/routes";
 import {
   LayoutDashboardIcon,
   CreditCardIcon,
-  ListIcon,
+  LayersIcon,
   ChartAreaIcon,
   BitcoinIcon,
   SettingsIcon,
@@ -127,11 +130,12 @@ const logOutHandler = () => {
   text-align: center;
   color: var(--abc-text-white-base);
 }
-.sidebar__content {
-  @apply flex flex-col flex-grow;
-}
 .sidebar__item {
   @apply justify-start w-full px-3 gap-2;
+
+  span {
+    @apply hidden md:block;
+  }
 }
 .sidebar__navigation {
   display: grid;

From b41cbd53a3cf4ab950bad7ef4ae5f9ded9d5540a Mon Sep 17 00:00:00 2001
From: Dmytro Svyrydenko <dmytro.svyrydenko@gmail.com>
Date: Mon, 16 Sep 2024 22:34:33 +0200
Subject: [PATCH 9/9] feat: Improve namings and mobile layout

---
 src/components/modals/modify-record/index.vue       | 2 +-
 src/components/ui-header.vue                        | 2 +-
 src/components/widgets/latest-records.vue           | 2 +-
 src/pages/account/account.vue                       | 2 +-
 src/pages/accounts/accounts.vue                     | 6 +++---
 src/pages/dashboard/accounts-list/accounts-list.vue | 2 +-
 6 files changed, 8 insertions(+), 8 deletions(-)

diff --git a/src/components/modals/modify-record/index.vue b/src/components/modals/modify-record/index.vue
index e82ce4a5..63e06813 100644
--- a/src/components/modals/modify-record/index.vue
+++ b/src/components/modals/modify-record/index.vue
@@ -378,7 +378,7 @@ useEventListener(document, "keydown", (event) => {
     />
     <div class="flex items-center justify-between py-3 px-6 mb-4">
       <span class="text-2xl">
-        {{ isFormCreation ? "Add Record" : "Edit Record" }}
+        {{ isFormCreation ? "Add Transaction" : "Edit Transaction" }}
       </span>
 
       <Button variant="ghost" @click="closeModal"> Close </Button>
diff --git a/src/components/ui-header.vue b/src/components/ui-header.vue
index 4129f1ff..b605d3f9 100644
--- a/src/components/ui-header.vue
+++ b/src/components/ui-header.vue
@@ -2,7 +2,7 @@
   <div class="layout-header">
     <div class="layout-header__actions">
       <div class="layout-header__action">
-        <ui-button variant="default" size="lg" @click="openFormModal"> New Record </ui-button>
+        <ui-button variant="default" size="lg" @click="openFormModal"> New Transaction </ui-button>
       </div>
     </div>
 
diff --git a/src/components/widgets/latest-records.vue b/src/components/widgets/latest-records.vue
index eaca814a..1a7d5699 100644
--- a/src/components/widgets/latest-records.vue
+++ b/src/components/widgets/latest-records.vue
@@ -1,5 +1,5 @@
 <template>
-  <WidgetWrapper class="latest-records-widget" title="Latest records" higher>
+  <WidgetWrapper class="latest-records-widget" title="Latest Transactions" higher>
     <template #action>
       <template v-if="!isDataEmpty">
         <router-link
diff --git a/src/pages/account/account.vue b/src/pages/account/account.vue
index a92a9597..dcd120cd 100644
--- a/src/pages/account/account.vue
+++ b/src/pages/account/account.vue
@@ -18,7 +18,7 @@
       <Card.CardContent>
         <Tabs.Tabs default-value="records">
           <Tabs.TabsList class="justify-start w-full">
-            <Tabs.TabsTrigger value="records"> Records </Tabs.TabsTrigger>
+            <Tabs.TabsTrigger value="records"> Transactions </Tabs.TabsTrigger>
             <Tabs.TabsTrigger disabled value="analytics"> Analytics (soon) </Tabs.TabsTrigger>
           </Tabs.TabsList>
           <Tabs.TabsContent value="records">
diff --git a/src/pages/accounts/accounts.vue b/src/pages/accounts/accounts.vue
index 2a042538..d4405a60 100644
--- a/src/pages/accounts/accounts.vue
+++ b/src/pages/accounts/accounts.vue
@@ -1,9 +1,9 @@
 <template>
   <div class="accounts">
-    <div class="flex items-center justify-between gap-8 mb-6">
+    <div class="flex items-center flex-wrap justify-between gap-x-8 gap-y-4 mb-6">
       <h1 class="text-2xl tracking-wider">Accounts</h1>
 
-      <div class="flex gap-4">
+      <div class="flex gap-x-4 gap-y-2 flex-wrap">
         <router-link :to="{ name: ROUTES_NAMES.createAccount }">
           <UiButton as="span"> Create account </UiButton>
         </router-link>
@@ -32,7 +32,7 @@
     </div>
 
     <template v-if="formattedAccounts.length">
-      <div class="accounts__list">
+      <div class="grid gap-3 mb-6 grid-cols-[repeat(auto-fill,minmax(240px,1fr))]">
         <template v-for="account in formattedAccounts" :key="account.id">
           <Card :class="cn('relative', !account.isEnabled && 'opacity-40')">
             <router-link
diff --git a/src/pages/dashboard/accounts-list/accounts-list.vue b/src/pages/dashboard/accounts-list/accounts-list.vue
index b27ce028..209efa18 100644
--- a/src/pages/dashboard/accounts-list/accounts-list.vue
+++ b/src/pages/dashboard/accounts-list/accounts-list.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="grid gap-2 grid-cols-[repeat(auto-fit,180px)]">
+  <div class="grid gap-2 grid-cols-[repeat(auto-fill,minmax(180px,1fr))]">
     <template v-if="noAccountsExist">
       <Card>
         <RouterLink to="/create-account">