diff --git a/webapp/src/components/dashboard/home/incomeOutcome.tsx b/webapp/src/components/dashboard/home/incomeOutcome.tsx
index 2ea9d7a..01a5842 100644
--- a/webapp/src/components/dashboard/home/incomeOutcome.tsx
+++ b/webapp/src/components/dashboard/home/incomeOutcome.tsx
@@ -11,7 +11,7 @@ export default function IncomeOutcome()
 {
     // get needed redux state
     const report = useAppSelector((state) => state.statisticsReducer.value.report);
-    const currencySymbol = useAppSelector((state) => state.settingsReducer.value.appGeneralSettings.currencySymbol || '$');
+    const settings = useAppSelector((state) => state.settingsReducer.value);
     const themeType = useAppSelector((state) => state.themeTypeReducer.value.themeType);
     const [isClient, setIsClient] = useState(false);
     
@@ -27,8 +27,8 @@ export default function IncomeOutcome()
         setIsClient(true);
     }, []);
     
-    // if loading or no report, don't render the chart
-    if (!report || !isClient) {
+    // if loading or no report or settings not loaded, show loading spinner
+    if (!report || !isClient || !settings?.appGeneralSettings) {
         return (
             <div className="w-full h-[350px] flex items-center justify-center">
                 <div className="animate-spin rounded-full h-12 w-12 border-t-2 border-b-2 border-gray-900 dark:border-gray-100"></div>
@@ -36,6 +36,9 @@ export default function IncomeOutcome()
         );
     }
     
+    // Get currency symbol with fallback to '$' if not available
+    const currencySymbol = settings.appGeneralSettings.currencySymbol || '$';
+    
     // prepare chart data
     const data = [report?.totalIncome || 0, report?.totalOutcome || 0];
     // prepare chart labels