diff --git a/src/components/widgets/balance-trend.vue b/src/components/widgets/balance-trend.vue
index 008a20dc..34ad8a96 100644
--- a/src/components/widgets/balance-trend.vue
+++ b/src/components/widgets/balance-trend.vue
@@ -1,25 +1,19 @@
 <template>
-  <WidgetWrapper class="balance-trend-widget" title="Balance trend">
-    <div class="balance-trend-widget__details">
-      <div class="balance-trend-widget__details-titles">
-        <div
-          class="balance-trend-widget__details-title balance-trend-widget__details-title--today"
-        >
-          Today
-        </div>
-        <div class="balance-trend-widget__details-title">
-          vs previous period
-        </div>
+  <WidgetWrapper title="Balance trend" :is-fetching="isWidgetDataFetching">
+    <div>
+      <div class="flex items-center justify-between mb-1 text-xs">
+        <div class="font-medium tracking-tight uppercase">Today</div>
+        <div class="tracking-tight">vs previous period</div>
       </div>
-      <div class="balance-trend-widget__details-values">
-        <div class="balance-trend-widget__today-balance">
+
+      <div class="flex items-center justify-between">
+        <div class="text-lg font-bold tracking-wider">
           {{ formatBaseCurrency(todayBalance) }}
         </div>
         <div
-          class="balance-trend-widget__diff"
           :class="{
-            'balance-trend-widget__diff--positive': balancesDiff > 0,
-            'balance-trend-widget__diff--negative': balancesDiff < 0,
+            'text-[var(--app-success)]': balancesDiff < 0,
+            'text-[var(--app-error)]': balancesDiff > 0,
           }"
         >
           {{ `${balancesDiff}%` }}
@@ -29,7 +23,6 @@
 
     <highcharts
       v-node-resize-observer="{ callback: onChartResize }"
-      class="balance-trend-widget__chart"
       :options="chartOptions"
     />
   </WidgetWrapper>
@@ -76,51 +69,79 @@ defineOptions({
   name: "balance-trend-widget",
 });
 
-const props = withDefaults(
-  defineProps<{
-    selectedPeriod?: { from: Date; to: Date };
-  }>(),
-  {
-    selectedPeriod: () => ({
-      from: startOfMonth(new Date()),
-      to: new Date(),
-    }),
-  },
-);
+const props = defineProps<{
+  selectedPeriod: { from: Date; to: Date };
+}>();
 
-const periodFrom = ref(new Date().getTime());
 const currentChartWidth = ref(0);
 const { formatBaseCurrency } = useFormatCurrency();
 const { baseCurrency } = storeToRefs(useCurrenciesStore());
 const { buildAreaChartConfig } = useHighcharts();
 
-watch(
-  () => props.selectedPeriod.from,
-  () => {
-    periodFrom.value = props.selectedPeriod.from.getTime();
+// We store actual and prev period separately, so when new data is loading, we
+// can still show the old period, to avoid UI flickering
+const actualDataPeriod = ref(props.selectedPeriod);
+const prevDataPeriod = ref(props.selectedPeriod);
+const periodQueryKey = computed(() => props.selectedPeriod.from.getTime());
+
+const { data: balanceHistory, isFetching: isBalanceHistoryFetching } = useQuery(
+  {
+    queryKey: [...VUE_QUERY_CACHE_KEYS.widgetBalanceTrend, periodQueryKey],
+    queryFn: () => loadBalanceTrendData(props.selectedPeriod),
+    staleTime: Infinity,
+    placeholderData: (prevData) => prevData,
   },
 );
-
-const { data: balanceHistory } = useQuery({
-  queryKey: [...VUE_QUERY_CACHE_KEYS.widgetBalanceTrend, periodFrom],
-  queryFn: () => loadBalanceTrendData(props.selectedPeriod),
-  staleTime: Infinity,
-});
-const { data: todayBalance } = useQuery({
-  queryKey: [...VUE_QUERY_CACHE_KEYS.widgetBalanceTotalBalance, periodFrom],
+const { data: todayBalance, isFetching: isTodayBalanceFetching } = useQuery({
+  queryKey: [...VUE_QUERY_CACHE_KEYS.widgetBalanceTotalBalance, periodQueryKey],
   queryFn: () => getTotalBalance({ date: props.selectedPeriod.to }),
-  placeholderData: 0,
-  staleTime: Infinity,
-});
-const { data: previousBalance } = useQuery({
-  queryKey: [...VUE_QUERY_CACHE_KEYS.widgetBalancePreviousBalance, periodFrom],
-  queryFn: () =>
-    getTotalBalance({
-      date: endOfMonth(subMonths(props.selectedPeriod.to, 1)),
-    }),
-  placeholderData: 0,
+  placeholderData: (prevData) => prevData || 0,
   staleTime: Infinity,
 });
+const { data: previousBalance, isFetching: isPreviousBalanceFetching } =
+  useQuery({
+    queryKey: [
+      ...VUE_QUERY_CACHE_KEYS.widgetBalancePreviousBalance,
+      periodQueryKey,
+    ],
+    queryFn: () =>
+      getTotalBalance({
+        date: endOfMonth(subMonths(props.selectedPeriod.to, 1)),
+      }),
+    placeholderData: (prevData) => prevData || 0,
+    staleTime: Infinity,
+  });
+
+const isWidgetDataFetching = computed(
+  () =>
+    isBalanceHistoryFetching.value ||
+    isTodayBalanceFetching.value ||
+    isPreviousBalanceFetching.value,
+);
+
+// On each "selectedPeriod" change we immediately set it as "actualDataPeriod"
+// but if "isWidgetDataFetching" is also triggered, means we started loading new
+// data, then we need to actually reassing "actualDataPeriod" to be as "prevDataPeriod",
+// so there won't be any data flickering. Once data is fully loaded, we assign
+// actual values to both of them
+watch(
+  () => props.selectedPeriod,
+  (value) => {
+    actualDataPeriod.value = value;
+  },
+);
+watch(
+  isWidgetDataFetching,
+  (value) => {
+    if (value) {
+      actualDataPeriod.value = prevDataPeriod.value;
+    } else {
+      actualDataPeriod.value = props.selectedPeriod;
+      prevDataPeriod.value = props.selectedPeriod;
+    }
+  },
+  { immediate: true },
+);
 
 const chartOptions = computed(() => {
   const pixelsPerTick = 120;
@@ -128,13 +149,16 @@ const chartOptions = computed(() => {
     ? Math.round(currentChartWidth.value / pixelsPerTick)
     : 5;
 
+  const fromDate = actualDataPeriod.value.from;
+  const toDate = actualDataPeriod.value.to;
+
   const config = buildAreaChartConfig({
     chart: {
       height: 220,
       marginTop: 20,
     },
     xAxis: {
-      tickPositions: generateDateSteps(ticksAmount, props.selectedPeriod.from),
+      tickPositions: generateDateSteps(ticksAmount, fromDate),
     },
     yAxis: {
       tickAmount: 5,
@@ -158,15 +182,9 @@ const chartOptions = computed(() => {
           ]),
           // fill remaining days with `null` so chart will be rendered for all
           // days in the month
-          ...Array(
-            getDaysInMonth(props.selectedPeriod.to) -
-              props.selectedPeriod.to.getDate(),
-          )
+          ...Array(getDaysInMonth(toDate) - toDate.getDate())
             .fill([])
-            .map((_, i) => [
-              addDays(props.selectedPeriod.to, i + 1).getTime(),
-              null,
-            ]),
+            .map((_, i) => [addDays(toDate, i + 1).getTime(), null]),
         ],
       },
     ],
@@ -188,34 +206,3 @@ const onChartResize = (entries: ResizeObserverEntry[]) => {
   currentChartWidth.value = entry.contentRect.width;
 };
 </script>
-
-<style lang="scss">
-.balance-trend-widget__details-titles,
-.balance-trend-widget__details-values {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-}
-.balance-trend-widget__details-titles {
-  font-size: 12px;
-  margin-bottom: 4px;
-}
-.balance-trend-widget__details-title {
-  letter-spacing: -0.3px;
-}
-.balance-trend-widget__details-title--today {
-  text-transform: uppercase;
-  font-weight: 500;
-}
-.balance-trend-widget__today-balance {
-  font-size: 18px;
-  letter-spacing: 1px;
-  font-weight: 700;
-}
-.balance-trend-widget__diff--positive {
-  color: var(--app-success);
-}
-.balance-trend-widget__diff--negative {
-  color: var(--app-error);
-}
-</style>
diff --git a/src/components/widgets/components/widget-wrapper.vue b/src/components/widgets/components/widget-wrapper.vue
index 29fafeae..a9aca5b6 100644
--- a/src/components/widgets/components/widget-wrapper.vue
+++ b/src/components/widgets/components/widget-wrapper.vue
@@ -7,11 +7,20 @@
   >
     <CardHeader>
       <slot name="header">
-        <div class="flex items-center justify-between">
+        <div
+          class="grid grid-cols-[minmax(0,1fr),max-content,20px] gap-1 items-center justify-between"
+        >
           <h3>
             {{ title }}
           </h3>
-          <slot name="action" />
+
+          <div>
+            <slot name="action" />
+          </div>
+
+          <template v-if="isFetching">
+            <Loader2Icon class="text-white opacity-50 size-5 animate-spin" />
+          </template>
         </div>
       </slot>
     </CardHeader>
@@ -23,15 +32,18 @@
 </template>
 
 <script setup lang="ts">
+import { Loader2Icon } from "lucide-vue-next";
 import { Card, CardContent, CardHeader } from "@/components/lib/ui/card";
 
 withDefaults(
   defineProps<{
     title?: string;
     higher?: boolean;
+    isFetching?: boolean;
   }>(),
   {
     title: undefined,
+    isFetching: false,
   },
 );
 </script>
diff --git a/src/components/widgets/expenses-structure.vue b/src/components/widgets/expenses-structure.vue
index 56ca078d..df87855d 100644
--- a/src/components/widgets/expenses-structure.vue
+++ b/src/components/widgets/expenses-structure.vue
@@ -1,25 +1,20 @@
 <template>
-  <WidgetWrapper class="expenses-structure-widget" title="Expenses Structure">
-    <div class="expenses-structure-widget__details">
-      <div class="expenses-structure-widget__details-titles">
-        <div
-          class="expenses-structure-widget__details-title expenses-structure-widget__details-title--today"
-        >
-          Today
-        </div>
-        <div class="expenses-structure-widget__details-title">
-          vs previous period
-        </div>
+  <WidgetWrapper title="Expenses Structure" :is-fetching="isWidgetDataFetching">
+    <div>
+      <div class="flex items-center justify-between mb-1 text-xs">
+        <div class="font-medium tracking-tight uppercase">Today</div>
+        <div class="tracking-tight">vs previous period</div>
       </div>
-      <div class="expenses-structure-widget__details-values">
-        <div class="expenses-structure-widget__today-balance">
+
+      <div class="flex items-center justify-between">
+        <div class="text-lg font-bold tracking-wider">
           {{ formatBaseCurrency(-(currentMonthExpense || 0)) }}
         </div>
+
         <div
-          class="expenses-structure-widget__diff"
           :class="{
-            'expenses-structure-widget__diff--positive': expensesDiff < 0,
-            'expenses-structure-widget__diff--negative': expensesDiff > 0,
+            'text-[var(--app-success)]': expensesDiff < 0,
+            'text-[var(--app-error)]': expensesDiff > 0,
           }"
         >
           {{ `${expensesDiff}%` }}
@@ -27,10 +22,7 @@
       </div>
     </div>
 
-    <highcharts
-      class="expenses-structure-widget__chart"
-      :options="chartOptions"
-    />
+    <highcharts :options="chartOptions" />
   </WidgetWrapper>
 </template>
 
@@ -53,17 +45,9 @@ defineOptions({
   name: "expenses-structure-widget",
 });
 
-const props = withDefaults(
-  defineProps<{
-    selectedPeriod?: { from: Date; to: Date };
-  }>(),
-  {
-    selectedPeriod: () => ({
-      from: startOfMonth(new Date()),
-      to: new Date(),
-    }),
-  },
-);
+const props = defineProps<{
+  selectedPeriod: { from: Date; to: Date };
+}>();
 
 const { formatBaseCurrency } = useFormatCurrency();
 const periodFrom = ref(new Date().getTime());
@@ -75,7 +59,10 @@ watch(
   },
 );
 
-const { data: spendingsByCategories } = useQuery({
+const {
+  data: spendingsByCategories,
+  isFetching: isSpendingsByCategoriesFetching,
+} = useQuery({
   queryKey: [...VUE_QUERY_CACHE_KEYS.widgetExpensesStructureTotal, periodFrom],
   queryFn: () =>
     getSpendingsByCategories({
@@ -83,36 +70,45 @@ const { data: spendingsByCategories } = useQuery({
       to: props.selectedPeriod.to,
     }),
   staleTime: Infinity,
-  placeholderData: {},
-});
-
-const { data: currentMonthExpense } = useQuery({
-  queryKey: [
-    ...VUE_QUERY_CACHE_KEYS.widgetExpensesStructureCurrentAmount,
-    periodFrom,
-  ],
-  queryFn: () =>
-    getExpensesAmountForPeriod({
-      from: props.selectedPeriod.from,
-      to: props.selectedPeriod.to,
-    }),
-  staleTime: Infinity,
-  placeholderData: 0,
+  placeholderData: (previousData) => previousData || {},
 });
 
-const { data: prevMonthExpense } = useQuery({
-  queryKey: [
-    ...VUE_QUERY_CACHE_KEYS.widgetExpensesStructurePrevAmount,
-    periodFrom,
-  ],
-  queryFn: () =>
-    getExpensesAmountForPeriod({
-      from: startOfMonth(subMonths(props.selectedPeriod.from, 1)),
-      to: endOfMonth(subMonths(props.selectedPeriod.to, 1)),
-    }),
-  staleTime: Infinity,
-  placeholderData: 0,
-});
+const { data: currentMonthExpense, isFetching: isCurrentMonthExpenseFetching } =
+  useQuery({
+    queryKey: [
+      ...VUE_QUERY_CACHE_KEYS.widgetExpensesStructureCurrentAmount,
+      periodFrom,
+    ],
+    queryFn: () =>
+      getExpensesAmountForPeriod({
+        from: props.selectedPeriod.from,
+        to: props.selectedPeriod.to,
+      }),
+    staleTime: Infinity,
+    placeholderData: (previousData) => previousData || 0,
+  });
+
+const { data: prevMonthExpense, isFetching: isPrevMonthExpenseFetching } =
+  useQuery({
+    queryKey: [
+      ...VUE_QUERY_CACHE_KEYS.widgetExpensesStructurePrevAmount,
+      periodFrom,
+    ],
+    queryFn: () =>
+      getExpensesAmountForPeriod({
+        from: startOfMonth(subMonths(props.selectedPeriod.from, 1)),
+        to: endOfMonth(subMonths(props.selectedPeriod.to, 1)),
+      }),
+    staleTime: Infinity,
+    placeholderData: (previousData) => previousData || 0,
+  });
+
+const isWidgetDataFetching = computed(
+  () =>
+    isSpendingsByCategoriesFetching.value ||
+    isCurrentMonthExpenseFetching.value ||
+    isPrevMonthExpenseFetching.value,
+);
 
 const expensesDiff = computed(() => {
   const percentage = Number(
@@ -172,34 +168,3 @@ const chartOptions = computed(() =>
   }),
 );
 </script>
-
-<style lang="scss">
-.expenses-structure-widget__details-titles,
-.expenses-structure-widget__details-values {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-}
-.expenses-structure-widget__details-titles {
-  font-size: 12px;
-  margin-bottom: 4px;
-}
-.expenses-structure-widget__details-title {
-  letter-spacing: -0.3px;
-}
-.expenses-structure-widget__details-title--today {
-  text-transform: uppercase;
-  font-weight: 500;
-}
-.expenses-structure-widget__today-balance {
-  font-size: 18px;
-  letter-spacing: 1px;
-  font-weight: 700;
-}
-.expenses-structure-widget__diff--positive {
-  color: var(--app-success);
-}
-.expenses-structure-widget__diff--negative {
-  color: var(--app-error);
-}
-</style>
diff --git a/src/pages/dashboard/dashboard.vue b/src/pages/dashboard/dashboard.vue
index 90a2a0f8..0ac6e8a1 100644
--- a/src/pages/dashboard/dashboard.vue
+++ b/src/pages/dashboard/dashboard.vue
@@ -30,10 +30,7 @@
         :selected-period="currentPeriod"
         class="dashboard-page__spending-categories"
       />
-      <LatestRecordsWidget
-        :selected-period="currentPeriod"
-        class="dashboard-page__latest-records"
-      />
+      <LatestRecordsWidget class="dashboard-page__latest-records" />
     </div>
   </section>
 </template>