diff --git a/src/main/java/com/faf223/expensetrackerfaf/web/src/routes/auth/login/LoginForm.svelte b/src/main/java/com/faf223/expensetrackerfaf/web/src/routes/auth/login/LoginForm.svelte
index ed00879..a0bade3 100644
--- a/src/main/java/com/faf223/expensetrackerfaf/web/src/routes/auth/login/LoginForm.svelte
+++ b/src/main/java/com/faf223/expensetrackerfaf/web/src/routes/auth/login/LoginForm.svelte
@@ -1,5 +1,4 @@
 <script>
-    import * as EmailValidator from 'email-validator';
     import axios from "axios";
     import {onMount} from "svelte";
     import { getCookie, setCookie } from 'svelte-cookie';
@@ -9,19 +8,19 @@
     let message = ""
 
     onMount(async () => {
-        console.log("Mounted");
+
         const access_token = getCookie('access_token');
         const refresh_token = getCookie('refresh_token');
+
         if (access_token && refresh_token) {
             window.location.href = '/dashboard';
         }
+
     });
 
     async function submitForm(event) {
         event.preventDefault();
-        console.log("Tried to submit!");
-        console.log(username);
-        console.log(password);
+
         try {
             const response = await axios.post('http://localhost:8081/api/v1/auth/authenticate', {
                 email: username,
@@ -30,30 +29,14 @@
 
             const { access_token, refresh_token } = response.data;
 
-            // Save the tokens in cookies
             setCookie('access_token', access_token);
             setCookie('refresh_token', refresh_token);
-            console.log(access_token, refresh_token);
+
             window.location.href = '/dashboard'
         } catch (error) {
             console.error('Login failed:', error);
         }
     }
-
-    // function validateEmail() {
-    //     let valid = EmailValidator.validate(username);
-    //     isErrorVisible = !valid;
-    //     message = isErrorVisible ? "Invalid e-mail!" : "";
-    //     return valid;
-    // }
-    //
-    // function validatePassword() {
-    //     let valid = password.value !== '';
-    //     isErrorVisible = !valid;
-    //     message = isErrorVisible ? "Invalid password!" : "";
-    //     return valid;
-    // }
-
 </script>
 
 <div class="animated bounceInDown">
diff --git a/src/main/java/com/faf223/expensetrackerfaf/web/src/routes/auth/register/RegisterForm.svelte b/src/main/java/com/faf223/expensetrackerfaf/web/src/routes/auth/register/RegisterForm.svelte
index 076d8a7..0a8f712 100644
--- a/src/main/java/com/faf223/expensetrackerfaf/web/src/routes/auth/register/RegisterForm.svelte
+++ b/src/main/java/com/faf223/expensetrackerfaf/web/src/routes/auth/register/RegisterForm.svelte
@@ -55,7 +55,7 @@
             <input type="submit" value="Sign up" class="submitButton">
         </form>
         <a href="/auth/login" class="noAccount">Already have an account? Sign in</a>
-    </div> 
+    </div>
 </div>
 
 
@@ -78,18 +78,18 @@
         height: 600px;
         box-shadow: 1px 1px 108.8px 19.2px rgb(25, 31, 53);
     }
-    
+
     #formTitle {
         font-family: 'Source Sans Pro', sans-serif;
         color: #5c6bc0;
         margin-top: 94px;
     }
-    
+
     #formTitle span {
         color: #dfdeee;
         font-weight: lighter;
     }
-    
+
     .registerForm h5 {
         font-family: 'Source Sans Pro', sans-serif;
         font-size: 13px;
@@ -98,7 +98,7 @@
         margin-top: -15px;
         margin-bottom: 70px;
     }
-    
+
     .registerForm input[type="text"],
     .registerForm input[type="password"] {
         display: block;
@@ -116,21 +116,21 @@
         -o-transition: all .2s ease-out;
         transition: all .2s ease-out;
     }
-    
+
     .registerForm input[type="text"]:focus,
     .registerForm input[type="password"]:focus {
         border: 1px solid #79A6FE;
     }
-    
+
     a {
         color: #5c7fda;
         text-decoration: none;
     }
-    
+
     a:hover {
         text-decoration: underline;
     }
-    
+
     .submitButton {
         border: 0;
         background: #7f5feb;
@@ -145,23 +145,23 @@
         transition: 0.3s;
         cursor: pointer;
     }
-    
+
     .submitButton:hover {
         background: #5d33e6;
     }
-    
+
     .recoveryPass {
         position: relative;
         float: right;
         right: 28px;
     }
-    
+
     .noAccount {
         position: absolute;
         top: 92%;
         left: 24%;
     }
-    
+
     .error {
         text-align: center;
         width: 337px;
diff --git a/src/main/java/com/faf223/expensetrackerfaf/web/src/routes/dashboard/board/Dashboard.svelte b/src/main/java/com/faf223/expensetrackerfaf/web/src/routes/dashboard/board/Dashboard.svelte
index 9a7ee4f..9ee8e54 100644
--- a/src/main/java/com/faf223/expensetrackerfaf/web/src/routes/dashboard/board/Dashboard.svelte
+++ b/src/main/java/com/faf223/expensetrackerfaf/web/src/routes/dashboard/board/Dashboard.svelte
@@ -5,60 +5,40 @@
     import { getCookie } from "svelte-cookie";
     import {onMount} from "svelte";
 
-    import {incomeData} from "../stores.js";
-    import {expenseData} from "../stores.js";
-    import {incomeTypes} from "../stores.js";
-    import {expenseTypes} from "../stores.js";
+    import {incomeData, expenseData, incomeTypes, expenseTypes} from "../stores.js";
 
     import axios from "axios";
 
 
-    onMount(() => {
-            if (getCookie('access_token') === '') {
-                    window.location.href = '/auth/login';
-                    console.log("no token");
-            }
-
+    onMount(async () => {
             const token = getCookie('access_token');
 
+            if (token === '') {
+                    window.location.href = '/auth/login';
+                    return;
+            }
+
             const config = {
                     headers: {
                             'Authorization': `Bearer ${token}`
                     }
             };
 
-            const incomePromise = axios.get('http://localhost:8081/incomes/personal-incomes', config)
-                    .then(response => {
-                            incomeData.set(response.data);
-                            console.log("Received Income Data");
-                    })
-                    .catch(error => console.error('Error fetching income data:', error));
+            try {
+                    const [incomeResponse, expenseResponse, incomeTypesResponse, expenseTypesResponse] = await Promise.all([
+                            axios.get('http://localhost:8081/incomes/personal-incomes', config),
+                            axios.get('http://localhost:8081/expenses/personal-expenses', config),
+                            axios.get('http://localhost:8081/incomes/categories', config),
+                            axios.get('http://localhost:8081/expenses/categories', config)
+                    ]);
 
-            const expensePromise = axios.get('http://localhost:8081/expenses/personal-expenses', config)
-                    .then(response => {
-                            expenseData.set(response.data);
-                            console.log("Received Expense Data");
-                    })
-                    .catch(error => console.error('Error fetching expense data:', error));
-
-            const incomeTypesPromise = axios.get('http://localhost:8081/incomes/categories', config)
-                    .then(response => {
-                            incomeTypes.set(response.data);
-                            console.log("Received Income Type Data");
-                    })
-                    .catch(error => console.error('Error:', error));
-
-            const expenseTypesPromise = axios.get('http://localhost:8081/expenses/categories', config)
-                    .then(response => {
-                            expenseTypes.set(response.data);
-                            console.log("Received Expense Type Data");
-                    })
-                    .catch(error => console.error('Error:', error));
-
-            Promise.all([incomePromise, expensePromise, incomeTypesPromise, expenseTypesPromise])
-                    .then(() => {
-                            console.log(getCookie('access_token'));
-                    });
+                    incomeData.set(incomeResponse.data);
+                    expenseData.set(expenseResponse.data);
+                    incomeTypes.set(incomeTypesResponse.data);
+                    expenseTypes.set(expenseTypesResponse.data);
+            } catch (error) {
+                    console.error('Error:', error);
+            }
     });
 </script>
 
diff --git a/src/main/java/com/faf223/expensetrackerfaf/web/src/routes/dashboard/board/graphs/Graph1.svelte b/src/main/java/com/faf223/expensetrackerfaf/web/src/routes/dashboard/board/graphs/Graph1.svelte
index bc4771f..3b653b1 100644
--- a/src/main/java/com/faf223/expensetrackerfaf/web/src/routes/dashboard/board/graphs/Graph1.svelte
+++ b/src/main/java/com/faf223/expensetrackerfaf/web/src/routes/dashboard/board/graphs/Graph1.svelte
@@ -7,9 +7,9 @@
 	let chartCanvas;
 	let chart = null;
 
-	function groupAndSumByCategory(incomes) {
+	function groupAndSumByCategory() {
 		const groupedData = new Map();
-		incomes.forEach(income => {
+		$incomeData.forEach(income => {
 					const category = income.incomeCategory.name;
 					if (groupedData.has(category)) {
 						groupedData.set(category, groupedData.get(category) + parseInt(income.amount));
@@ -21,10 +21,9 @@
 		return groupedData;
 	}
 
-	function createGraph(data) {
+	function createGraph() {
 		try {
-
-			const groupedIncomeData = groupAndSumByCategory(data);
+			const groupedIncomeData = groupAndSumByCategory();
 
 			const chartLabels = Array.from(groupedIncomeData.keys());
 			const chartValues = Array.from(groupedIncomeData.values());
@@ -38,7 +37,16 @@
 						labels: chartLabels,
 						datasets: [{
 							label: 'Revenue',
-							backgroundColor: 'rgb(255, 99, 132)',
+							backgroundColor:
+									['rgb(0, 0, 179)',
+									'rgb(0, 16, 217)',
+									'rgb(0, 32, 255)',
+									'rgb(0, 64, 255)',
+									'rgb(0, 96, 255)',
+									'rgb(0, 128, 255)',
+									'rgb(0, 159, 255)',
+									'rgb(0, 191, 255)',
+									'rgb(0, 255, 255)'],
 							data: chartValues
 						}]
 					},
@@ -50,7 +58,6 @@
 			} else {
 				chart.data.labels = chartLabels;
 				chart.data.datasets[0].data = chartValues;
-				console.log(chart.data.datasets[0].data);
 				chart.update();
 			}
 		} catch (error) {
@@ -60,13 +67,12 @@
 
 	$: {
 		if ($incomeData) {
-			createGraph($incomeData);
-			console.log($incomeData);
+			createGraph();
 		}
 	}
 
 	onMount(() => {
-		createGraph($incomeData);
+		createGraph();
 	});
 </script>
 
diff --git a/src/main/java/com/faf223/expensetrackerfaf/web/src/routes/dashboard/board/graphs/Graph2.svelte b/src/main/java/com/faf223/expensetrackerfaf/web/src/routes/dashboard/board/graphs/Graph2.svelte
index eee5dc2..9fb1a4a 100644
--- a/src/main/java/com/faf223/expensetrackerfaf/web/src/routes/dashboard/board/graphs/Graph2.svelte
+++ b/src/main/java/com/faf223/expensetrackerfaf/web/src/routes/dashboard/board/graphs/Graph2.svelte
@@ -1,15 +1,16 @@
 <script>
 	import Chart from 'chart.js/auto';
 	import { onMount } from 'svelte';
-	import {expenseData} from "../../stores.js";
+	import { expenseData } from "../../stores.js";
 
 	let ctx;
 	let chartCanvas;
 	let chart = null;
 
-	function groupAndSumByCategory(expenses) {
+	function groupAndSumByCategory() {
 		const groupedData = new Map();
-		expenses.forEach(expense => {
+		console.log($expenseData)
+		$expenseData.forEach(expense => {
 					const category = expense.expenseCategory.name;
 					if (groupedData.has(category)) {
 						groupedData.set(category, groupedData.get(category) + parseInt(expense.amount));
@@ -21,10 +22,9 @@
 		return groupedData;
 	}
 
-	function createGraph(data) {
+	function createGraph() {
 		try {
-
-			const groupedExpenseData = groupAndSumByCategory(data);
+			const groupedExpenseData = groupAndSumByCategory();
 
 			const chartLabels = Array.from(groupedExpenseData.keys());
 			const chartValues = Array.from(groupedExpenseData.values());
@@ -38,7 +38,12 @@
 						labels: chartLabels,
 						datasets: [{
 							label: 'Spendings',
-							backgroundColor: 'rgb(255, 99, 132)',
+							backgroundColor: [
+								'rgb(107, 80, 107)',
+								'rgb(171, 61, 169)',
+								'rgb(222, 37, 218)',
+								'rgb(235, 68, 232)',
+								'rgb(255, 128, 255)'],
 							data: chartValues
 						}]
 					},
@@ -50,7 +55,6 @@
 			} else {
 				chart.data.labels = chartLabels;
 				chart.data.datasets[0].data = chartValues;
-				console.log(chart.data.datasets[0].data);
 				chart.update();
 			}
 		} catch (error) {
@@ -60,13 +64,12 @@
 
 	$: {
 		if ($expenseData) {
-			createGraph($expenseData);
-			console.log($expenseData);
+			createGraph();
 		}
 	}
 
 	onMount(() => {
-		createGraph($expenseData);
+		createGraph();
 	});
 </script>
 
diff --git a/src/main/java/com/faf223/expensetrackerfaf/web/src/routes/dashboard/board/graphs/Graph3.svelte b/src/main/java/com/faf223/expensetrackerfaf/web/src/routes/dashboard/board/graphs/Graph3.svelte
index 34dcb86..10245ba 100644
--- a/src/main/java/com/faf223/expensetrackerfaf/web/src/routes/dashboard/board/graphs/Graph3.svelte
+++ b/src/main/java/com/faf223/expensetrackerfaf/web/src/routes/dashboard/board/graphs/Graph3.svelte
@@ -1,5 +1,5 @@
 <script>
-	import chartjs from 'chart.js/auto';
+	import Chart from 'chart.js/auto';
 	import { onMount } from 'svelte';
 	import { incomeData, expenseData } from "../../stores.js";
 
@@ -7,24 +7,26 @@
 	let chartCanvas;
 	let chart = null;
 
-	function createGraph(incomes, expenses) {
+	function createGraph() {
 		try {
-
-			const totalIncomes = incomes.reduce((total, item) => total + item.amount, 0);
-			const totalExpenses = expenses.reduce((total, item) => total + item.amount, 0);
+			const totalIncomes = $incomeData.reduce((total, item) => total + item.amount, 0);
+			const totalExpenses = $expenseData.reduce((total, item) => total + item.amount, 0);
 
 			const chartLabels = ['Incomes', 'Expenses'];
 			const chartValues = [totalIncomes, totalExpenses];
 
 			ctx = chartCanvas.getContext('2d');
 			if (!chart) {
-			chart = new chartjs(ctx, {
+			chart = new Chart(ctx, {
 				type: 'pie',
 				data: {
 					labels: chartLabels,
 					datasets: [{
 						data: chartValues,
-						backgroundColor: ['green', 'red'],
+						backgroundColor: [
+							'rgb(243, 188, 0)',
+							'rgb(0, 117, 164)'
+						],
 					}]
 				},
 				options: {
@@ -33,9 +35,13 @@
 				}
 			});
 			} else {
+				const totalIncomesUpd = $incomeData.reduce((total, item) => total + parseInt(item.amount), 0);
+				const totalExpensesUpd = $expenseData.reduce((total, item) => total + parseInt(item.amount), 0);
+
+				const chartLabels = ['Incomes', 'Expenses'];
+				const chartValues = [totalIncomesUpd, totalExpensesUpd];
 				chart.data.labels = chartLabels;
 				chart.data.datasets[0].data = chartValues;
-				console.log(chart.data.datasets[0].data);
 				chart.update();
 			}
 		} catch (error) {
@@ -45,13 +51,12 @@
 
 	$: {
 		if ($incomeData || $expenseData) {
-			console.log("created");
-			createGraph($incomeData, $expenseData);
+			createGraph();
 		}
 	}
 
 	onMount(() => {
-		createGraph($incomeData, $expenseData);
+		createGraph();
 	});
 </script>
 
diff --git a/src/main/java/com/faf223/expensetrackerfaf/web/src/routes/dashboard/board/infolists/Expenses.svelte b/src/main/java/com/faf223/expensetrackerfaf/web/src/routes/dashboard/board/infolists/Expenses.svelte
index e05f4b9..0015c1f 100644
--- a/src/main/java/com/faf223/expensetrackerfaf/web/src/routes/dashboard/board/infolists/Expenses.svelte
+++ b/src/main/java/com/faf223/expensetrackerfaf/web/src/routes/dashboard/board/infolists/Expenses.svelte
@@ -36,6 +36,10 @@
     #expenseInfo {
         display: flex;
         flex-direction: column;
+        background-color: #212942;
+        color:white;
+        border-radius: 10px;
+        margin: 10px;
     }
 
     #expenseList {
@@ -54,6 +58,7 @@
     ul {
         list-style: none;
         padding: 0;
+        color:black;
     }
 
     li {
diff --git a/src/main/java/com/faf223/expensetrackerfaf/web/src/routes/dashboard/board/infolists/Incomes.svelte b/src/main/java/com/faf223/expensetrackerfaf/web/src/routes/dashboard/board/infolists/Incomes.svelte
index 104bf91..2f4e2e5 100644
--- a/src/main/java/com/faf223/expensetrackerfaf/web/src/routes/dashboard/board/infolists/Incomes.svelte
+++ b/src/main/java/com/faf223/expensetrackerfaf/web/src/routes/dashboard/board/infolists/Incomes.svelte
@@ -35,6 +35,10 @@
     #incomeInfo {
         display: flex;
         flex-direction: column;
+        background-color: #212942;
+        color:white;
+        border-radius: 10px;
+        margin: 10px;
     }
 
     #incomeList {
@@ -49,6 +53,7 @@
     ul {
         list-style: none;
         padding: 0;
+        color: black;
     }
 
     li {
diff --git a/src/main/java/com/faf223/expensetrackerfaf/web/src/routes/dashboard/board/infolists/contents/ContentExpense.svelte b/src/main/java/com/faf223/expensetrackerfaf/web/src/routes/dashboard/board/infolists/contents/ContentExpense.svelte
index 007d1df..75abede 100644
--- a/src/main/java/com/faf223/expensetrackerfaf/web/src/routes/dashboard/board/infolists/contents/ContentExpense.svelte
+++ b/src/main/java/com/faf223/expensetrackerfaf/web/src/routes/dashboard/board/infolists/contents/ContentExpense.svelte
@@ -3,13 +3,41 @@
     import { writable } from 'svelte/store';
     import axios from 'axios';
     import { getCookie } from "svelte-cookie";
-    import {expenseTypes} from "../../../stores.js";
+    import {expenseTypes, expenseData} from "../../../stores.js";
 
     let showModal;
     let amount = '';
+    let newData;
 
     const selectedExpenseId = writable('');
 
+    function addNewExpense(id, amount) {
+        const today = new Date().toISOString().split('T')[0];
+        const expenseCategory = $expenseTypes.find(incomeType => incomeType.id === id);
+
+        console.log(amount);
+
+        if (expenseCategory) {
+            const newIncome = {
+                incomeId: 0,
+                userDTO: {
+                    name: "Dummy",
+                    surname: "User",
+                    username: "dummyuser"
+                },
+                expenseCategory: expenseCategory,
+                date: today,
+                amount: amount
+            };
+
+            newData = $expenseData;
+            newData.push(newIncome);
+            $expenseData = newData;
+        } else {
+            console.error('Expense category not found for id:', id);
+        }
+    }
+
     const createExpense = async () => {
         const selectedExpense = $expenseTypes.find(expense => expense.id === $selectedExpenseId);
         const data = {
@@ -17,9 +45,11 @@
             amount: amount,
         };
 
+        addNewExpense(selectedExpense.id, amount);
+
         try {
             const token = getCookie('access_token');
-            console.log(token);
+
             const response = await axios.post('http://localhost:8081/expenses', data, {
                 headers: {
                     'Authorization': `Bearer ${token}`,
@@ -27,10 +57,8 @@
                 },
             });
 
-            console.log(response.data);
-
-            if (response.status === 200) {
-                console.log("cool");
+            if (response.status === 201) {
+                //console.log("cool");
             } else {
                 console.error('Error:', response.status);
             }
diff --git a/src/main/java/com/faf223/expensetrackerfaf/web/src/routes/dashboard/board/infolists/contents/ContentIncome.svelte b/src/main/java/com/faf223/expensetrackerfaf/web/src/routes/dashboard/board/infolists/contents/ContentIncome.svelte
index 3116d9a..f23e81e 100644
--- a/src/main/java/com/faf223/expensetrackerfaf/web/src/routes/dashboard/board/infolists/contents/ContentIncome.svelte
+++ b/src/main/java/com/faf223/expensetrackerfaf/web/src/routes/dashboard/board/infolists/contents/ContentIncome.svelte
@@ -3,8 +3,7 @@
     import { writable } from 'svelte/store';
     import axios from 'axios';
     import { getCookie } from "svelte-cookie";
-    import {incomeData} from "../../../stores.js";
-    import {incomeTypes} from "../../../stores.js";
+    import {incomeData, incomeTypes} from "../../../stores.js";
 
     let showModal;
     let amount = '';
@@ -34,7 +33,6 @@
             newData = $incomeData;
             newData.push(newIncome);
             $incomeData = newData;
-            console.log("ggWPPPPP", newIncome);
         } else {
             console.error('Income category not found for id:', id);
         }
@@ -51,7 +49,7 @@
 
         try {
             const token = getCookie('access_token');
-            console.log(token);
+
             const response = await axios.post('http://localhost:8081/incomes', data, {
                 headers: {
                     'Authorization': `Bearer ${token}`,
@@ -59,8 +57,8 @@
                 },
             });
 
-            if (response.status === 200) {
-                console.log("cool");
+            if (response.status === 201) {
+                //console.log("cool");
             } else {
                 console.error('Error:', response.status);
             }
diff --git a/src/main/java/com/faf223/expensetrackerfaf/web/src/routes/dashboard/board/other/DataMenu.svelte b/src/main/java/com/faf223/expensetrackerfaf/web/src/routes/dashboard/board/other/DataMenu.svelte
index 2eec838..f2f2009 100644
--- a/src/main/java/com/faf223/expensetrackerfaf/web/src/routes/dashboard/board/other/DataMenu.svelte
+++ b/src/main/java/com/faf223/expensetrackerfaf/web/src/routes/dashboard/board/other/DataMenu.svelte
@@ -4,14 +4,6 @@
     import Graph3 from '../graphs/Graph3.svelte';
     import Expenses from "../infolists/Expenses.svelte";
     import Incomes from "../infolists/Incomes.svelte";
-
-    function updateAll() {
-        Graph1.updateGraph();
-        Graph2.updateGraph();
-        Graph3.updateGraph();
-        Expenses.updateInfo();
-        Incomes.updateInfo();
-    }
 </script>
 
 <div id="dataMenu">
diff --git a/src/main/java/com/faf223/expensetrackerfaf/web/src/routes/dashboard/board/other/QuickInfobar.svelte b/src/main/java/com/faf223/expensetrackerfaf/web/src/routes/dashboard/board/other/QuickInfobar.svelte
index 05211af..5b6b490 100644
--- a/src/main/java/com/faf223/expensetrackerfaf/web/src/routes/dashboard/board/other/QuickInfobar.svelte
+++ b/src/main/java/com/faf223/expensetrackerfaf/web/src/routes/dashboard/board/other/QuickInfobar.svelte
@@ -1,26 +1,33 @@
 <script>
     import { onMount } from 'svelte';
-    import {incomeData, expenseData} from "../../stores.js";
+    import { incomeData, expenseData } from "../../stores.js";
 
     let infobar1, infobar2, infobar3, infobar4;
     let totalExpenses = 0;
     let totalIncomes = 0;
+    let lastMonthIncome = 800; // Dummy last month's income
+    let lastMonthExpense = 200; // Dummy last month's expense
 
     function updateInfo() {
-        totalExpenses = $expenseData.reduce((total, item) => total + item.amount, 0);
-        totalIncomes = $incomeData.reduce((total, item) => total + item.amount, 0);
+        totalExpenses = $expenseData.reduce((total, item) => total + parseInt(item.amount), 0);
+        totalIncomes = $incomeData.reduce((total, item) => total + parseInt(item.amount), 0);
+
+        const incomeDifference = ((totalIncomes - lastMonthIncome) / lastMonthIncome) * 100;
+        const expenseDifference = ((lastMonthExpense - totalExpenses) / lastMonthExpense) * 100;
 
         try {
-            infobar1.innerHTML = `<span style="font-size: larger">Total expenses:</span><br><span style="color:red;font-size: xxx-large">${totalExpenses}$`;
-            infobar2.innerHTML = `<span style="font-size: larger">Total incomes:</span><br><span style="color:green;font-size: xxx-large">${totalIncomes}$</span>`;
+            infobar1.innerHTML = `<span style="font-size: larger">Total expenses:</span><br><span style="color:red;font-size: 150%">${totalExpenses.toFixed(2)}$</span>`;
+            infobar2.innerHTML = `<span style="font-size: larger">Total incomes:</span><br><span style="color:green;font-size: 150%">${totalIncomes.toFixed(2)}$</span>`;
+
+            infobar3.innerHTML = `<span style="font-size: larger">Income by last month:</span><br><span style="color:blue;font-size: 150%">${incomeDifference.toFixed(2)}%</span>`;
+            infobar4.innerHTML = `<span style="font-size: larger">Expense by last month:</span><br><span style="color:orange;font-size: 150%">${expenseDifference.toFixed(2)}%</span>`;
         } catch {
             console.log("not yet loaded");
         }
-
     }
 
     $: {
-        if ($incomeData && $expenseData) {
+        if ($incomeData || $expenseData) {
             updateInfo();
         }
     }
@@ -49,15 +56,16 @@
         width: 200px;
         min-width: 100px;
         height: 100px;
-        color:white;
+        color: white;
         padding: 10px;
         border-radius: 10px;
         background-color: #212942;
-        box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
-        transition: all 0.3s cubic-bezier(.25,.8,.25,1);
+        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
+        transition: all 0.3s cubic-bezier(.25, .8, .25, 1);
+        overflow: hidden;
     }
 
     .infobarElement:hover {
-        box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
+        box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22);
     }
-</style>
\ No newline at end of file
+</style>
diff --git a/src/main/java/com/faf223/expensetrackerfaf/web/src/routes/dashboard/menu/Navbar.svelte b/src/main/java/com/faf223/expensetrackerfaf/web/src/routes/dashboard/menu/Navbar.svelte
deleted file mode 100644
index 39f0d01..0000000
--- a/src/main/java/com/faf223/expensetrackerfaf/web/src/routes/dashboard/menu/Navbar.svelte
+++ /dev/null
@@ -1,47 +0,0 @@
-<script>
-
-</script>
-
-<div id="navbar">
-    <div id="profilePic">PROFILEPIC</div>
-    <div class="menuItem" on:click={() => console.log("help clicked")}>Help</div>
-    <div class="menuItem" on:click={() => console.log("contact clicked")}>Contact</div>
-    <div class="menuItem" on:click={() => console.log("settings clicked")}>Settings</div>
-    <div class="menuItem" on:click={() => console.log("logout clicked")}>Logout</div>
-</div>
-
-<style>
-    #navbar {
-        padding:0;
-        background-color: rgb(33, 41, 66);
-        display: flex;
-        justify-content: flex-end;
-    }
-
-    .menuItem {
-        font-family: 'Source Sans Pro', sans-serif;
-        color:white;
-        display: flex;
-        align-items: center;
-        padding-left: 20px;
-        padding-right: 20px;
-        text-align: center;
-        height: 50px;
-    }
-
-    .menuItem:hover {
-        background-color: rgb(45, 60, 90);
-    }
-    
-    #profilePic {
-        margin-right:auto;
-        display: flex;
-        padding-left: 20px;
-        padding-right: 20px;
-        align-items: center;
-        color:white;
-        justify-self: left;
-    }
-
-    
-</style>
\ No newline at end of file