diff --git a/src/main/java/com/faf223/expensetrackerfaf/web/package-lock.json b/src/main/java/com/faf223/expensetrackerfaf/web/package-lock.json
index c7e6810..6a53a3f 100644
--- a/src/main/java/com/faf223/expensetrackerfaf/web/package-lock.json
+++ b/src/main/java/com/faf223/expensetrackerfaf/web/package-lock.json
@@ -822,9 +822,9 @@
 			"integrity": "sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q=="
 		},
 		"node_modules/axios": {
-			"version": "1.5.1",
-			"resolved": "https://registry.npmjs.org/axios/-/axios-1.5.1.tgz",
-			"integrity": "sha512-Q28iYCWzNHjAm+yEAot5QaAMxhMghWLFVf7rRdwhUI+c2jix2DUXjAHXVi+s1ibs3mjPO/cCgbA++3BjD0vP/A==",
+			"version": "1.6.2",
+			"resolved": "https://registry.npmjs.org/axios/-/axios-1.6.2.tgz",
+			"integrity": "sha512-7i24Ri4pmDRfJTR7LDBhsOTtcm+9kjX5WiY1X3wIisx6G9So3pfMkEiU7emUBe46oceVImccTEM3k6C5dbVW8A==",
 			"dependencies": {
 				"follow-redirects": "^1.15.0",
 				"form-data": "^4.0.0",
diff --git a/src/main/java/com/faf223/expensetrackerfaf/web/package.json b/src/main/java/com/faf223/expensetrackerfaf/web/package.json
index 6dd1555..97c06d8 100644
--- a/src/main/java/com/faf223/expensetrackerfaf/web/package.json
+++ b/src/main/java/com/faf223/expensetrackerfaf/web/package.json
@@ -2,7 +2,8 @@
 	"name": "expensetracker",
 	"version": "0.0.1",
 	"scripts": {
-		"dev": "vite dev",
+		"dev": "vite dev --host",
+		"devs": "vite dev --host --https",
 		"build": "vite build",
 		"preview": "vite preview",
 		"lint": "prettier --plugin-search-dir . --check . && eslint .",
diff --git a/src/main/java/com/faf223/expensetrackerfaf/web/src/app.html b/src/main/java/com/faf223/expensetrackerfaf/web/src/app.html
index 2617a45..267d317 100644
--- a/src/main/java/com/faf223/expensetrackerfaf/web/src/app.html
+++ b/src/main/java/com/faf223/expensetrackerfaf/web/src/app.html
@@ -2,7 +2,7 @@
 <html lang="en">
 	<head>
 		<meta charset="utf-8" />
-		<link rel="icon" href="%sveltekit.assets%/favicon.png" />
+		<link rel="icon" href="/favicon.png" />
 		<meta name="viewport" content="width=device-width" />
 		<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
 		<style>
diff --git a/src/main/java/com/faf223/expensetrackerfaf/web/src/favicon.png b/src/main/java/com/faf223/expensetrackerfaf/web/src/favicon.png
new file mode 100644
index 0000000..632a364
Binary files /dev/null and b/src/main/java/com/faf223/expensetrackerfaf/web/src/favicon.png differ
diff --git a/src/main/java/com/faf223/expensetrackerfaf/web/src/routes/+page.svelte b/src/main/java/com/faf223/expensetrackerfaf/web/src/routes/+page.svelte
new file mode 100644
index 0000000..0d4f9a3
--- /dev/null
+++ b/src/main/java/com/faf223/expensetrackerfaf/web/src/routes/+page.svelte
@@ -0,0 +1,9 @@
+<script>
+    import { onMount } from "svelte";
+
+    onMount(() => {
+        // Redirect to /auth/login
+        window.location.href = '/auth/login';
+    });
+</script>
+
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 a0bade3..cb63cd8 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
@@ -22,11 +22,13 @@
         event.preventDefault();
 
         try {
-            const response = await axios.post('http://localhost:8081/api/v1/auth/authenticate', {
+            const response = await axios.post('https://trackio.online:8081/api/v1/auth/authenticate', {
                 email: username,
                 password: password,
             });
 
+            console.log(response.data)
+
             const { access_token, refresh_token } = response.data;
 
             setCookie('access_token', access_token);
@@ -60,6 +62,10 @@
     </div> 
 </div>
 
+<svelte:head>
+    <link rel="icon" type="image/x-icon" href="../favicon.png" />
+    <title>Login into Track.IO</title>
+</svelte:head>
 
 <style>
     @import url('https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400');
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 6372a01..46b4752 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
@@ -36,7 +36,7 @@
 
             console.log(data)
 
-            const response = await axios.post('http://localhost:8081/api/v1/auth/register', data);
+            const response = await axios.post('https://trackio.online:8081/api/v1/auth/register', data);
 
             const { access_token, refresh_token } = response.data;
 
@@ -78,6 +78,12 @@
 
 </script>
 
+<svelte:head>
+    <link rel="icon" type="image/x-icon" href="../favicon.png" />
+    <title>Register into Track.IO</title>
+</svelte:head>
+
+
 <div class="animated bounceInDown">
     <div class="container">
         {#if isErrorVisible}
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 ac065bf..dda54a7 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
@@ -30,24 +30,33 @@
                         }
                 };
 
-                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)
-                        ]);
+            try {
+                var currentDate = new Date();
+                var currentMonth = currentDate.getMonth() + 1;
+                const [incomeResponse, expenseResponse, incomeTypesResponse, expenseTypesResponse] = await Promise.all([
+                    axios.get('https://trackio.online:8081/incomes/personal-incomes?month=' + currentMonth , config),
+                    axios.get('https://trackio.online:8081/expenses/personal-expenses?month=' + currentMonth, config),
+                    axios.get('https://trackio.online:8081/incomes/categories', config),
+                    axios.get('https://trackio.online:8081/expenses/categories', config)
+                ]);
 
-                        incomeData.set(incomeResponse.data);
-                        expenseData.set(expenseResponse.data);
-                        incomeTypes.set(incomeTypesResponse.data);
-                        expenseTypes.set(expenseTypesResponse.data);
-                } catch (error) {
-                        console.error('Error:', error);
-                }
+                console.log("Data", incomeResponse.data);
+
+                incomeData.set(incomeResponse.data);
+                expenseData.set(expenseResponse.data);
+                incomeTypes.set(incomeTypesResponse.data);
+                expenseTypes.set(expenseTypesResponse.data);
+            } catch (error) {
+                console.error('Error:', error);
+            }
         });
 </script>
 
+<svelte:head>
+    <link rel="icon" type="image/x-icon" href="../favicon.png" />
+    <title>Track.IO</title>
+</svelte:head>
+
 <div id="dashboard" style="background-color: {componentStyles.dashColor}; color: {componentStyles.color}">
                 {#if $selectedTab === 'expenses'}
                         <ExpenseDashboard />
@@ -59,6 +68,7 @@
 </div>
 
 <style>
+
         #dashboard {
                 font-family: 'Source Sans Pro', sans-serif;
                 border-radius: 20px;
diff --git a/src/main/java/com/faf223/expensetrackerfaf/web/src/routes/dashboard/board/expenses/graphs/Graph2.svelte b/src/main/java/com/faf223/expensetrackerfaf/web/src/routes/dashboard/board/expenses/graphs/Graph2.svelte
index c81928f..0901c55 100644
--- a/src/main/java/com/faf223/expensetrackerfaf/web/src/routes/dashboard/board/expenses/graphs/Graph2.svelte
+++ b/src/main/java/com/faf223/expensetrackerfaf/web/src/routes/dashboard/board/expenses/graphs/Graph2.svelte
@@ -50,7 +50,17 @@
 					},
 					options: {
 						responsive: true,
-						maintainAspectRatio: false
+						maintainAspectRatio: false,
+						plugins: {
+							legend: {
+								labels: {
+									font: {
+										weight: 'bold'
+									},
+									color: '#fff'
+								}
+							}
+						}
 					}
 				});
 			} else {
diff --git a/src/main/java/com/faf223/expensetrackerfaf/web/src/routes/dashboard/board/expenses/graphs/Graph3.svelte b/src/main/java/com/faf223/expensetrackerfaf/web/src/routes/dashboard/board/expenses/graphs/Graph3.svelte
index ad13d3e..f7cae70 100644
--- a/src/main/java/com/faf223/expensetrackerfaf/web/src/routes/dashboard/board/expenses/graphs/Graph3.svelte
+++ b/src/main/java/com/faf223/expensetrackerfaf/web/src/routes/dashboard/board/expenses/graphs/Graph3.svelte
@@ -33,7 +33,17 @@
 						},
 						options: {
 							responsive: true,
-							maintainAspectRatio: false
+							maintainAspectRatio: false,
+							plugins: {
+								legend: {
+									labels: {
+										font: {
+											weight: 'bold'
+										},
+										color: '#fff'
+									}
+								}
+							}
 						}
 					});
 				} else {
diff --git a/src/main/java/com/faf223/expensetrackerfaf/web/src/routes/dashboard/board/expenses/infolists/ContentExpense.svelte b/src/main/java/com/faf223/expensetrackerfaf/web/src/routes/dashboard/board/expenses/infolists/ContentExpense.svelte
index 995ceea..9211115 100644
--- a/src/main/java/com/faf223/expensetrackerfaf/web/src/routes/dashboard/board/expenses/infolists/ContentExpense.svelte
+++ b/src/main/java/com/faf223/expensetrackerfaf/web/src/routes/dashboard/board/expenses/infolists/ContentExpense.svelte
@@ -49,7 +49,7 @@
         try {
             const token = getCookie('access_token');
 
-            const response = await axios.post('http://localhost:8081/expenses', data, {
+            const response = await axios.post('https://trackio.online:8081/expenses', data, {
                 headers: {
                     'Authorization': `Bearer ${token}`,
                     'Content-Type': 'application/json',
diff --git a/src/main/java/com/faf223/expensetrackerfaf/web/src/routes/dashboard/board/expenses/infolists/Expenses.svelte b/src/main/java/com/faf223/expensetrackerfaf/web/src/routes/dashboard/board/expenses/infolists/Expenses.svelte
index f67be16..e7ff869 100644
--- a/src/main/java/com/faf223/expensetrackerfaf/web/src/routes/dashboard/board/expenses/infolists/Expenses.svelte
+++ b/src/main/java/com/faf223/expensetrackerfaf/web/src/routes/dashboard/board/expenses/infolists/Expenses.svelte
@@ -2,17 +2,37 @@
     import ContentExpense from "./ContentExpense.svelte";
     import { expenseData } from "../../../stores.js";
     import { globalStyles } from "../../../styles.js";
+
+    const textToIcon = {
+        'Groceries': "<svg xmlns=\"http://www.w3.org/2000/svg\" height=\"16\" width=\"18\" viewBox=\"0 0 576 512\"><!--!Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2023 Fonticons, Inc.--><path d=\"M0 24C0 10.7 10.7 0 24 0H69.5c22 0 41.5 12.8 50.6 32h411c26.3 0 45.5 25 38.6 50.4l-41 152.3c-8.5 31.4-37 53.3-69.5 53.3H170.7l5.4 28.5c2.2 11.3 12.1 19.5 23.6 19.5H488c13.3 0 24 10.7 24 24s-10.7 24-24 24H199.7c-34.6 0-64.3-24.6-70.7-58.5L77.4 54.5c-.7-3.8-4-6.5-7.9-6.5H24C10.7 48 0 37.3 0 24zM128 464a48 48 0 1 1 96 0 48 48 0 1 1 -96 0zm336-48a48 48 0 1 1 0 96 48 48 0 1 1 0-96z\"/></svg>",
+        'Utilities': "<svg xmlns=\"http://www.w3.org/2000/svg\" height=\"16\" width=\"16\" viewBox=\"0 0 512 512\"><!--!Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2023 Fonticons, Inc.--><path d=\"M176 88v40H336V88c0-4.4-3.6-8-8-8H184c-4.4 0-8 3.6-8 8zm-48 40V88c0-30.9 25.1-56 56-56H328c30.9 0 56 25.1 56 56v40h28.1c12.7 0 24.9 5.1 33.9 14.1l51.9 51.9c9 9 14.1 21.2 14.1 33.9V304H384V288c0-17.7-14.3-32-32-32s-32 14.3-32 32v16H192V288c0-17.7-14.3-32-32-32s-32 14.3-32 32v16H0V227.9c0-12.7 5.1-24.9 14.1-33.9l51.9-51.9c9-9 21.2-14.1 33.9-14.1H128zM0 416V336H128v16c0 17.7 14.3 32 32 32s32-14.3 32-32V336H320v16c0 17.7 14.3 32 32 32s32-14.3 32-32V336H512v80c0 35.3-28.7 64-64 64H64c-35.3 0-64-28.7-64-64z\"/></svg>",
+        'Rent': "<svg xmlns=\"http://www.w3.org/2000/svg\" height=\"16\" width=\"18\" viewBox=\"0 0 576 512\"><!--!Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2023 Fonticons, Inc.--><path d=\"M575.8 255.5c0 18-15 32.1-32 32.1h-32l.7 160.2c0 2.7-.2 5.4-.5 8.1V472c0 22.1-17.9 40-40 40H456c-1.1 0-2.2 0-3.3-.1c-1.4 .1-2.8 .1-4.2 .1H416 392c-22.1 0-40-17.9-40-40V448 384c0-17.7-14.3-32-32-32H256c-17.7 0-32 14.3-32 32v64 24c0 22.1-17.9 40-40 40H160 128.1c-1.5 0-3-.1-4.5-.2c-1.2 .1-2.4 .2-3.6 .2H104c-22.1 0-40-17.9-40-40V360c0-.9 0-1.9 .1-2.8V287.6H32c-18 0-32-14-32-32.1c0-9 3-17 10-24L266.4 8c7-7 15-8 22-8s15 2 21 7L564.8 231.5c8 7 12 15 11 24z\"/></svg>",
+        'Transportation': "<svg xmlns=\"http://www.w3.org/2000/svg\" height=\"16\" width=\"16\" viewBox=\"0 0 512 512\"><!--!Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2023 Fonticons, Inc.--><path d=\"M135.2 117.4L109.1 192H402.9l-26.1-74.6C372.3 104.6 360.2 96 346.6 96H165.4c-13.6 0-25.7 8.6-30.2 21.4zM39.6 196.8L74.8 96.3C88.3 57.8 124.6 32 165.4 32H346.6c40.8 0 77.1 25.8 90.6 64.3l35.2 100.5c23.2 9.6 39.6 32.5 39.6 59.2V400v48c0 17.7-14.3 32-32 32H448c-17.7 0-32-14.3-32-32V400H96v48c0 17.7-14.3 32-32 32H32c-17.7 0-32-14.3-32-32V400 256c0-26.7 16.4-49.6 39.6-59.2zM128 288a32 32 0 1 0 -64 0 32 32 0 1 0 64 0zm288 32a32 32 0 1 0 0-64 32 32 0 1 0 0 64z\"/></svg>",
+        'Education': "<svg xmlns=\"http://www.w3.org/2000/svg\" height=\"16\" width=\"20\" viewBox=\"0 0 640 512\"><!--!Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2023 Fonticons, Inc.--><path d=\"M337.8 5.4C327-1.8 313-1.8 302.2 5.4L166.3 96H48C21.5 96 0 117.5 0 144V464c0 26.5 21.5 48 48 48H256V416c0-35.3 28.7-64 64-64s64 28.7 64 64v96H592c26.5 0 48-21.5 48-48V144c0-26.5-21.5-48-48-48H473.7L337.8 5.4zM96 192h32c8.8 0 16 7.2 16 16v64c0 8.8-7.2 16-16 16H96c-8.8 0-16-7.2-16-16V208c0-8.8 7.2-16 16-16zm400 16c0-8.8 7.2-16 16-16h32c8.8 0 16 7.2 16 16v64c0 8.8-7.2 16-16 16H512c-8.8 0-16-7.2-16-16V208zM96 320h32c8.8 0 16 7.2 16 16v64c0 8.8-7.2 16-16 16H96c-8.8 0-16-7.2-16-16V336c0-8.8 7.2-16 16-16zm400 16c0-8.8 7.2-16 16-16h32c8.8 0 16 7.2 16 16v64c0 8.8-7.2 16-16 16H512c-8.8 0-16-7.2-16-16V336zM232 176a88 88 0 1 1 176 0 88 88 0 1 1 -176 0zm88-48c-8.8 0-16 7.2-16 16v32c0 8.8 7.2 16 16 16h32c8.8 0 16-7.2 16-16s-7.2-16-16-16H336V144c0-8.8-7.2-16-16-16z\"/></svg>",
+        'Restaurants & Cafes': "<svg xmlns=\"http://www.w3.org/2000/svg\" height=\"16\" width=\"16\" viewBox=\"0 0 512 512\"><!--!Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2023 Fonticons, Inc.--><path d=\"M0 192c0-35.3 28.7-64 64-64c.5 0 1.1 0 1.6 0C73 91.5 105.3 64 144 64c15 0 29 4.1 40.9 11.2C198.2 49.6 225.1 32 256 32s57.8 17.6 71.1 43.2C339 68.1 353 64 368 64c38.7 0 71 27.5 78.4 64c.5 0 1.1 0 1.6 0c35.3 0 64 28.7 64 64c0 11.7-3.1 22.6-8.6 32H8.6C3.1 214.6 0 203.7 0 192zm0 91.4C0 268.3 12.3 256 27.4 256H484.6c15.1 0 27.4 12.3 27.4 27.4c0 70.5-44.4 130.7-106.7 154.1L403.5 452c-2 16-15.6 28-31.8 28H140.2c-16.1 0-29.8-12-31.8-28l-1.8-14.4C44.4 414.1 0 353.9 0 283.4z\"/></svg>",
+        'Home Maintenance': "<svg xmlns=\"http://www.w3.org/2000/svg\" height=\"16\" width=\"18\" viewBox=\"0 0 576 512\"><!--!Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2023 Fonticons, Inc.--><path d=\"M575.8 255.5c0 18-15 32.1-32 32.1h-32l.7 160.2c0 2.7-.2 5.4-.5 8.1V472c0 22.1-17.9 40-40 40H456c-1.1 0-2.2 0-3.3-.1c-1.4 .1-2.8 .1-4.2 .1H416 392c-22.1 0-40-17.9-40-40V448 384c0-17.7-14.3-32-32-32H256c-17.7 0-32 14.3-32 32v64 24c0 22.1-17.9 40-40 40H160 128.1c-1.5 0-3-.1-4.5-.2c-1.2 .1-2.4 .2-3.6 .2H104c-22.1 0-40-17.9-40-40V360c0-.9 0-1.9 .1-2.8V287.6H32c-18 0-32-14-32-32.1c0-9 3-17 10-24L266.4 8c7-7 15-8 22-8s15 2 21 7L564.8 231.5c8 7 12 15 11 24z\"/></svg>",
+        'Transport': "<svg xmlns=\"http://www.w3.org/2000/svg\" height=\"16\" width=\"16\" viewBox=\"0 0 512 512\"><!--!Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2023 Fonticons, Inc.--><path d=\"M135.2 117.4L109.1 192H402.9l-26.1-74.6C372.3 104.6 360.2 96 346.6 96H165.4c-13.6 0-25.7 8.6-30.2 21.4zM39.6 196.8L74.8 96.3C88.3 57.8 124.6 32 165.4 32H346.6c40.8 0 77.1 25.8 90.6 64.3l35.2 100.5c23.2 9.6 39.6 32.5 39.6 59.2V400v48c0 17.7-14.3 32-32 32H448c-17.7 0-32-14.3-32-32V400H96v48c0 17.7-14.3 32-32 32H32c-17.7 0-32-14.3-32-32V400 256c0-26.7 16.4-49.6 39.6-59.2zM128 288a32 32 0 1 0 -64 0 32 32 0 1 0 64 0zm288 32a32 32 0 1 0 0-64 32 32 0 1 0 0 64z\"/></svg>",
+        'Shopping': "<svg xmlns=\"http://www.w3.org/2000/svg\" height=\"16\" width=\"18\" viewBox=\"0 0 576 512\"><!--!Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2023 Fonticons, Inc.--><path d=\"M0 24C0 10.7 10.7 0 24 0H69.5c22 0 41.5 12.8 50.6 32h411c26.3 0 45.5 25 38.6 50.4l-41 152.3c-8.5 31.4-37 53.3-69.5 53.3H170.7l5.4 28.5c2.2 11.3 12.1 19.5 23.6 19.5H488c13.3 0 24 10.7 24 24s-10.7 24-24 24H199.7c-34.6 0-64.3-24.6-70.7-58.5L77.4 54.5c-.7-3.8-4-6.5-7.9-6.5H24C10.7 48 0 37.3 0 24zM128 464a48 48 0 1 1 96 0 48 48 0 1 1 -96 0zm336-48a48 48 0 1 1 0 96 48 48 0 1 1 0-96z\"/></svg>",
+        'Miscellaneous': "<svg xmlns=\"http://www.w3.org/2000/svg\" height=\"16\" width=\"16\" viewBox=\"0 0 512 512\"><!--!Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2023 Fonticons, Inc.--><path d=\"M403.8 34.4c12-5 25.7-2.2 34.9 6.9l64 64c6 6 9.4 14.1 9.4 22.6s-3.4 16.6-9.4 22.6l-64 64c-9.2 9.2-22.9 11.9-34.9 6.9s-19.8-16.6-19.8-29.6V160H352c-10.1 0-19.6 4.7-25.6 12.8L284 229.3 244 176l31.2-41.6C293.3 110.2 321.8 96 352 96h32V64c0-12.9 7.8-24.6 19.8-29.6zM164 282.7L204 336l-31.2 41.6C154.7 401.8 126.2 416 96 416H32c-17.7 0-32-14.3-32-32s14.3-32 32-32H96c10.1 0 19.6-4.7 25.6-12.8L164 282.7zm274.6 188c-9.2 9.2-22.9 11.9-34.9 6.9s-19.8-16.6-19.8-29.6V416H352c-30.2 0-58.7-14.2-76.8-38.4L121.6 172.8c-6-8.1-15.5-12.8-25.6-12.8H32c-17.7 0-32-14.3-32-32s14.3-32 32-32H96c30.2 0 58.7 14.2 76.8 38.4L326.4 339.2c6 8.1 15.5 12.8 25.6 12.8h32V320c0-12.9 7.8-24.6 19.8-29.6s25.7-2.2 34.9 6.9l64 64c6 6 9.4 14.1 9.4 22.6s-3.4 16.6-9.4 22.6l-64 64z\"/></svg>",
+        'Charity': "<svg xmlns=\"http://www.w3.org/2000/svg\" height=\"16\" width=\"18\" viewBox=\"0 0 576 512\"><!--!Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2023 Fonticons, Inc.--><path d=\"M163.9 136.9c-29.4-29.8-29.4-78.2 0-108s77-29.8 106.4 0l17.7 18 17.7-18c29.4-29.8 77-29.8 106.4 0s29.4 78.2 0 108L310.5 240.1c-6.2 6.3-14.3 9.4-22.5 9.4s-16.3-3.1-22.5-9.4L163.9 136.9zM568.2 336.3c13.1 17.8 9.3 42.8-8.5 55.9L433.1 485.5c-23.4 17.2-51.6 26.5-80.7 26.5H192 32c-17.7 0-32-14.3-32-32V416c0-17.7 14.3-32 32-32H68.8l44.9-36c22.7-18.2 50.9-28 80-28H272h16 64c17.7 0 32 14.3 32 32s-14.3 32-32 32H288 272c-8.8 0-16 7.2-16 16s7.2 16 16 16H392.6l119.7-88.2c17.8-13.1 42.8-9.3 55.9 8.5zM193.6 384l0 0-.9 0c.3 0 .6 0 .9 0z\"/></svg>",
+        'Legal Services': "<svg xmlns=\"http://www.w3.org/2000/svg\" height=\"16\" width=\"16\" viewBox=\"0 0 512 512\"><!--!Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2023 Fonticons, Inc.--><path d=\"M318.6 9.4c-12.5-12.5-32.8-12.5-45.3 0l-120 120c-12.5 12.5-12.5 32.8 0 45.3l16 16c12.5 12.5 32.8 12.5 45.3 0l4-4L325.4 293.4l-4 4c-12.5 12.5-12.5 32.8 0 45.3l16 16c12.5 12.5 32.8 12.5 45.3 0l120-120c12.5-12.5 12.5-32.8 0-45.3l-16-16c-12.5-12.5-32.8-12.5-45.3 0l-4 4L330.6 74.6l4-4c12.5-12.5 12.5-32.8 0-45.3l-16-16zm-152 288c-12.5-12.5-32.8-12.5-45.3 0l-112 112c-12.5 12.5-12.5 32.8 0 45.3l48 48c12.5 12.5 32.8 12.5 45.3 0l112-112c12.5-12.5 12.5-32.8 0-45.3l-1.4-1.4L272 285.3 226.7 240 168 298.7l-1.4-1.4z\"/></svg>"
+    };
 </script>
 
 <div id="expenseInfo" style="background-color: {$globalStyles.mainColor}">
     <ContentExpense />
     <div id="listContainer" style="color: {$globalStyles.color}">
         <ul>
-            {#each $expenseData as item}
-                <li style="color: {$globalStyles.color}">
-                    {item.incomeCategory ? `${item.incomeCategory.name}: ` : `${item.expenseCategory.name}: `}
-                    {item.incomeCategory ? `+${item.amount}$` : `-${item.amount}$`}
-                    {`${item.date}`}
+            {#each $expenseData.reverse() as item}
+                <li style="display:flex; justify-content: space-between; color: {$globalStyles.color}">
+                    <span>
+                        {#if textToIcon[item.expenseCategory.name]}
+                        {@html textToIcon[item.expenseCategory.name]}
+                    {/if}
+                    <span style="font-weight: bold">{item.incomeCategory ? `${item.incomeCategory.name}: ` : `${item.expenseCategory.name}: `}</span>
+                    <span style="margin-right: 10px; color: red; font-size: larger">{item.incomeCategory ? `+${item.amount}$` : `-${item.amount}$`}</span>
+                    </span>
+                    <span style="">{`${item.date}`}</span>
                 </li>
             {/each}
         </ul>
@@ -43,16 +63,25 @@
         border-radius: 0 0 10px 10px;
     }
 
-    #listContainer::-webkit-scrollbar {
-        width: 0;
+    ::-webkit-scrollbar {
+        width: 10px;
     }
 
-    #listContainer::-webkit-scrollbar-thumb {
-        background-color: transparent;
+    /* Track */
+    ::-webkit-scrollbar-track {
+        background: #f1f1f1;
+        border-radius: 10px;
     }
 
-    #listContainer::-webkit-scrollbar-track {
-        background-color: transparent;
+    /* Handle */
+    ::-webkit-scrollbar-thumb {
+        background: #888;
+        border-radius: 10px;
+    }
+
+    /* Handle on hover */
+    ::-webkit-scrollbar-thumb:hover {
+        background: #555;
     }
 
     #listContainer ul {
diff --git a/src/main/java/com/faf223/expensetrackerfaf/web/src/routes/dashboard/board/expenses/other/DataMenu.svelte b/src/main/java/com/faf223/expensetrackerfaf/web/src/routes/dashboard/board/expenses/other/DataMenu.svelte
index 1052824..404aec0 100644
--- a/src/main/java/com/faf223/expensetrackerfaf/web/src/routes/dashboard/board/expenses/other/DataMenu.svelte
+++ b/src/main/java/com/faf223/expensetrackerfaf/web/src/routes/dashboard/board/expenses/other/DataMenu.svelte
@@ -4,10 +4,18 @@
     import Expenses from "../infolists/Expenses.svelte";
     import {globalStyles} from "../../../styles.js";
     import { slide } from 'svelte/transition'
-    import {expenseTypes} from "../../../stores.js";
+    import {expenseTypes, expenseData, incomeData, dateText, tempExpense, tempIncome} from "../../../stores.js";
+    import axios from "axios";
+    import {getCookie} from "svelte-cookie";
+    import {onMount} from "svelte";
 
     let isDateDropdownExpanded = false
     let isCategoryDropdownExpanded = false
+    let expenseAnalysisText = "EXPENSE ANALYSIS: " + $dateText;
+
+    $ : {
+        expenseAnalysisText = "EXPENSE ANALYSIS: " + $dateText;
+    }
 
     function clickHandlerDate() {
         isDateDropdownExpanded = !isDateDropdownExpanded
@@ -17,33 +25,195 @@
         isCategoryDropdownExpanded = !isCategoryDropdownExpanded;
     }
 
+    function clickOutsideHandler(event) {
+        const isDateButton = event.target.closest("#btn1");
+        const isCategoryButton = event.target.closest("#btn2");
+
+        if (!isDateButton) {
+            isDateDropdownExpanded = false;
+        }
+
+        if (!isCategoryButton) {
+            isCategoryDropdownExpanded = false;
+        }
+    }
+
+    onMount(() => {
+        document.body.addEventListener("click", clickOutsideHandler);
+
+        // Clean up the event listener when the component is destroyed
+        return () => {
+            document.body.removeEventListener("click", clickOutsideHandler);
+        };
+    });
+
+    async function getToday() {
+        var currentDate = new Date();
+        var currentDay = currentDate.toISOString().split('T')[0];
+        try {
+            const response1 = await axios.get('https://trackio.online:8081/expenses/personal-expenses?date=' + currentDay, {
+                headers: {
+                    'Authorization': `Bearer ${getCookie('access_token')}`
+                }
+            });
+            expenseData.set(response1.data);
+            tempExpense.set(response1.data);
+            const response2 = await axios.get('https://trackio.online:8081/incomes/personal-incomes?date=' + currentDay, {
+                headers: {
+                    'Authorization': `Bearer ${getCookie('access_token')}`
+                }
+            });
+            incomeData.set(response2.data);
+            tempIncome.set(response2.data);
+            $dateText = "Today"
+        } catch (error) {
+            console.error("Error fetching expenses:", error);
+        }
+    }
+
+    async function getYesterday() {
+        var currentDate = new Date();
+
+        var yesterday = new Date(currentDate);
+        yesterday.setDate(currentDate.getDate() - 1);
+
+        var yesterdayString = yesterday.toISOString().split('T')[0];
+
+        try {
+            const response1 = await axios.get('https://trackio.online:8081/expenses/personal-expenses?date=' + yesterdayString, {
+                headers: {
+                    'Authorization': `Bearer ${getCookie('access_token')}`
+                }
+            });
+            expenseData.set(response1.data);
+            tempExpense.set(response1.data);
+            const response2 = await axios.get('https://trackio.online:8081/incomes/personal-incomes?date=' + yesterdayString, {
+                headers: {
+                    'Authorization': `Bearer ${getCookie('access_token')}`
+                }
+            });
+            incomeData.set(response2.data);
+            tempIncome.set(response2.data);
+            $dateText = "Yesterday"
+        } catch (error) {
+            console.error("Error fetching expenses:", error);
+        }
+    }
+
+    async function getMonth() {
+        var currentDate = new Date();
+        var year = currentDate.getMonth() + 1;
+
+        try {
+            const response1 = await axios.get('https://trackio.online:8081/expenses/personal-expenses?month=' + year, {
+                headers: {
+                    'Authorization': `Bearer ${getCookie('access_token')}`
+                }
+            });
+
+            expenseData.set(response1.data);
+            tempExpense.set(response1.data);
+            const response2 = await axios.get('https://trackio.online:8081/incomes/personal-incomes?month=' + year, {
+                headers: {
+                    'Authorization': `Bearer ${getCookie('access_token')}`
+                }
+            });
+
+            incomeData.set(response2.data);
+            tempIncome.set(response2.data);
+            $dateText = "This Month"
+        } catch (error) {
+            console.error("Error fetching expenses:", error);
+        }
+    }
+
+    async function getLastMonth() {
+        var currentDate = new Date();
+        var year = currentDate.getMonth();
+
+        try {
+            const response1 = await axios.get('https://trackio.online:8081/expenses/personal-expenses?month=' + year, {
+                headers: {
+                    'Authorization': `Bearer ${getCookie('access_token')}`
+                }
+            });
+
+            expenseData.set(response1.data);
+            tempExpense.set(response1.data)
+            const response2 = await axios.get('https://trackio.online:8081/incomes/personal-incomes?month=' + year, {
+                headers: {
+                    'Authorization': `Bearer ${getCookie('access_token')}`
+                }
+            });
+
+            incomeData.set(response2.data);
+            tempIncome.set(response2.data);
+            $dateText = "Last Month"
+        } catch (error) {
+            console.error("Error fetching expenses:", error);
+        }
+    }
+
+    async function getLastYear() {
+        var currentDate = new Date();
+        var year = currentDate.getFullYear();
+
+        try {
+            const response1 = await axios.get('https://trackio.online:8081/expenses/personal-expenses?year=' + year, {
+                headers: {
+                    'Authorization': `Bearer ${getCookie('access_token')}`
+                }
+            });
+
+            expenseData.set(response1.data);
+            tempExpense.set(response1.data);
+            const response2 = await axios.get('https://trackio.online:8081/incomes/personal-incomes?year=' + year, {
+                headers: {
+                    'Authorization': `Bearer ${getCookie('access_token')}`
+                }
+            });
+
+            incomeData.set(response2.data);
+            tempIncome.set(response2.data);
+            $dateText = "This Year"
+        } catch (error) {
+            console.error("Error fetching expenses:", error);
+        }
+    }
+
+    function filterByCategory(category) {
+        console.log(category)
+        let tempArr = $tempExpense.filter(expense => expense.expenseCategory.name === category);
+        expenseData.set(tempArr);
+    }
 </script>
 
 <div id="main-data" style="background-color: {$globalStyles.dashColor}; color: {$globalStyles.color}">
     <div id="data-header" style="background-color:{$globalStyles.mainColor}; color: {$globalStyles.altColor}">
-        <span style="color: {$globalStyles.altColor}">Revenue Analysis</span>
+        <span style="color: {$globalStyles.altColor}" contenteditable="false" bind:innerHTML={expenseAnalysisText}></span>
 
         <div id="dropdown-date">
-            <button id="button" on:click={clickHandlerDate}>Filter by Date:</button>
+            <button id="btn1" class="button" on:click={clickHandlerDate}>Filter by Date ▼</button>
             {#if isDateDropdownExpanded}
                 <div id="date-list" transition:slide>
-                    <div on:click={() => console.log("Today")}>Today</div>
-                    <div on:click={() => console.log("Yesterday")}>Yesterday</div>
-                    <div on:click={() => console.log("Last week")}>Last week</div>
-                    <div on:click={() => console.log("Last month")}>Last month</div>
-                    <div on:click={() => console.log("Current quarter")}>Current quarter</div>
-                    <div on:click={() => console.log("This year")}>This year</div>
+                    <div class="date-entry" on:click={() => getToday()}>Today</div>
+                    <div class="date-entry" on:click={() => getYesterday()}>Yesterday</div>
+                    <div class="date-entry" on:click={() => getMonth()}>This month</div>
+                    <div class="date-entry" on:click={() => getLastMonth()}>Last month</div>
+<!--                    <div on:click={() => console.log("Last month")}>Last month</div>-->
+<!--                    <div on:click={() => console.log("Current quarter")}>Current quarter</div>-->
+                    <div class="date-entry" on:click={() => getLastYear()}>This year</div>
                 </div>
             {/if}
         </div>
 
         <div id="dropdown-category">
-            <button id="button" on:click={clickHandlerCategory}>Filter by Category:</button>
+            <button id="btn2" class="button" on:click={clickHandlerCategory}>Filter by Category ▼</button>
             {#if isCategoryDropdownExpanded}
-                <div id="category-list" transition:slide>
+                <div id="date-list" transition:slide>
                     {#each $expenseTypes as expense (expense.id)}
                         {#if expense.id !== undefined}
-                            <option value={expense.id}>{expense.name}</option>
+                            <div class="date-entry" on:click={() => filterByCategory(expense.name)} value={expense.id}>{expense.name}</div>
                         {/if}
                     {/each}
                 </div>
@@ -76,48 +246,147 @@
         flex: 1 1 auto;
     }
 
-    #button {
-        background-color: #fff000;
-        border-radius: 12px;
-        color: #000;
-        cursor: pointer;
-        font-weight: bold;
-        padding: 10px 15px;
-        text-align: center;
-        transition: 200ms;
-        width: 100%;
-        box-sizing: border-box;
+    /*#button {*/
+    /*    background-color: #fff000;*/
+    /*    border-radius: 12px;*/
+    /*    color: #000;*/
+    /*    cursor: pointer;*/
+    /*    font-weight: bold;*/
+    /*    padding: 10px 15px;*/
+    /*    text-align: center;*/
+    /*    transition: 200ms;*/
+    /*    width: 100%;*/
+    /*    box-sizing: border-box;*/
+    /*    border: 0;*/
+    /*    font-size: 16px;*/
+    /*    user-select: none;*/
+    /*    -webkit-user-select: none;*/
+    /*    touch-action: manipulation;*/
+    /*}*/
+
+    /*#button:not(:disabled):hover,*/
+    /*#button:not(:disabled):focus {*/
+    /*    outline: 0;*/
+    /*    background: #f4e603;*/
+    /*    box-shadow: 0 0 0 2px rgba(0,0,0,.2), 0 3px 8px 0 rgba(0,0,0,.15);*/
+    /*}*/
+
+    /*#button:disabled {*/
+    /*    filter: saturate(0.2) opacity(0.5);*/
+    /*    -webkit-filter: saturate(0.2) opacity(0.5);*/
+    /*    cursor: not-allowed;*/
+    /*}*/
+
+    /*.button {*/
+    /*    font-size: large;*/
+    /*    background-color: #007BFF;*/
+    /*    color: #fff;*/
+    /*    border: none;*/
+    /*    border-radius: 20px;*/
+    /*    line-height: 40px;*/
+    /*    cursor: pointer;*/
+    /*    margin: 10px;*/
+    /*}*/
+
+    /*.button:hover {*/
+    /*    background-color: #0056b3;*/
+    /*}*/
+
+
+    .button {
+        align-items: center;
+        background-color: #0A66C2;
         border: 0;
+        border-radius: 100px;
+        box-sizing: border-box;
+        color: #ffffff;
+        cursor: pointer;
+        display: inline-flex;
+        font-family: -apple-system, system-ui, system-ui, "Segoe UI", Roboto, "Helvetica Neue", "Fira Sans", Ubuntu, Oxygen, "Oxygen Sans", Cantarell, "Droid Sans", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Lucida Grande", Helvetica, Arial, sans-serif;
         font-size: 16px;
+        font-weight: 600;
+        justify-content: center;
+        line-height: 20px;
+        max-width: 480px;
+        min-height: 40px;
+        min-width: 0px;
+        overflow: hidden;
+        padding: 0px;
+        padding-left: 20px;
+        padding-right: 20px;
+        text-align: center;
+        touch-action: manipulation;
+        transition: background-color 0.167s cubic-bezier(0.4, 0, 0.2, 1) 0s, box-shadow 0.167s cubic-bezier(0.4, 0, 0.2, 1) 0s, color 0.167s cubic-bezier(0.4, 0, 0.2, 1) 0s;
         user-select: none;
         -webkit-user-select: none;
-        touch-action: manipulation;
+        vertical-align: middle;
     }
 
-    #button:not(:disabled):hover,
-    #button:not(:disabled):focus {
-        outline: 0;
-        background: #f4e603;
-        box-shadow: 0 0 0 2px rgba(0,0,0,.2), 0 3px 8px 0 rgba(0,0,0,.15);
+    .button:hover,
+    .button:focus {
+        background-color: #16437E;
+        color: #ffffff;
     }
 
-    #button:disabled {
-        filter: saturate(0.2) opacity(0.5);
-        -webkit-filter: saturate(0.2) opacity(0.5);
+    .button:active {
+        background: #09223b;
+        color: rgb(255, 255, 255, .7);
+    }
+
+    .button:disabled {
         cursor: not-allowed;
+        background: rgba(0, 0, 0, .08);
+        color: rgba(0, 0, 0, .3);
     }
 
-
     #date-list {
-        background-color: #8BD17C;
+        background-color: #007BFF;
         position:absolute;
+        margin-top: 20px;
+        max-height: 400px;
+        overflow-y: scroll;
+        border-radius: 20px;
         z-index:1;
     }
 
-    #category-list {
-        background-color: #8BD17C;
-        position:absolute;
-        z-index:1;
+    .date-entry {
+        padding: 10px;
+        margin: 10px;
+        background-color: black;
+        color: white;
+        border-radius: 20px;
+        cursor: pointer;
+    }
+
+    .date-entry:hover {
+        background-color: rgb(128, 128, 128);
+    }
+
+    /*#category-list {*/
+    /*    background-color: #8BD17C;*/
+    /*    position:absolute;*/
+    /*    z-index:1;*/
+    /*}*/
+
+    ::-webkit-scrollbar {
+        width: 10px;
+    }
+
+    /* Track */
+    ::-webkit-scrollbar-track {
+        background: #f1f1f1;
+        border-radius: 10px;
+    }
+
+    /* Handle */
+    ::-webkit-scrollbar-thumb {
+        background: #888;
+        border-radius: 10px;
+    }
+
+    /* Handle on hover */
+    ::-webkit-scrollbar-thumb:hover {
+        background: #555;
     }
 
     #data-header {
@@ -131,7 +400,8 @@
         border-top-left-radius: 20px;
         border-top-right-radius: 20px;
         font-size: larger;
-        border: #8BD17C 2px solid;
+        margin-bottom: 5px;
+        /*border: #8BD17C 2px solid;*/
     }
 
     #data-menu {
diff --git a/src/main/java/com/faf223/expensetrackerfaf/web/src/routes/dashboard/board/expenses/other/QuickInfobar.svelte b/src/main/java/com/faf223/expensetrackerfaf/web/src/routes/dashboard/board/expenses/other/QuickInfobar.svelte
index c66edbb..e150a09 100644
--- a/src/main/java/com/faf223/expensetrackerfaf/web/src/routes/dashboard/board/expenses/other/QuickInfobar.svelte
+++ b/src/main/java/com/faf223/expensetrackerfaf/web/src/routes/dashboard/board/expenses/other/QuickInfobar.svelte
@@ -17,11 +17,11 @@
         const expenseDifference = ((lastMonthExpense - totalExpenses) / lastMonthExpense) * 100;
 
         try {
-            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>`;
+            infobar1.innerHTML = `<span style="font-size: larger">Total expenses:</span><br><span style="color:red;font-size: xxx-large">${totalExpenses.toFixed(2)}$</span>`;
+            infobar2.innerHTML = `<span style="font-size: larger">Total incomes:</span><br><span style="color:green;font-size: xxx-large">${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>`;
+            infobar3.innerHTML = `<span style="font-size: larger">Income by last month:</span><br><span style="color:blue;font-size: xxx-large">${incomeDifference.toFixed(2)}%</span>`;
+            infobar4.innerHTML = `<span style="font-size: larger">Expense by last month:</span><br><span style="color:orange;font-size: xxx-large">${expenseDifference.toFixed(2)}%</span>`;
         } catch {
             console.log("not yet loaded");
         }
diff --git a/src/main/java/com/faf223/expensetrackerfaf/web/src/routes/dashboard/board/incomes/graphs/Graph1.svelte b/src/main/java/com/faf223/expensetrackerfaf/web/src/routes/dashboard/board/incomes/graphs/Graph1.svelte
index 1999e6c..0a4ff57 100644
--- a/src/main/java/com/faf223/expensetrackerfaf/web/src/routes/dashboard/board/incomes/graphs/Graph1.svelte
+++ b/src/main/java/com/faf223/expensetrackerfaf/web/src/routes/dashboard/board/incomes/graphs/Graph1.svelte
@@ -60,7 +60,17 @@
 					},
 					options: {
 						responsive: true,
-						maintainAspectRatio: false
+						maintainAspectRatio: false,
+						plugins: {
+							legend: {
+								labels: {
+									font: {
+										weight: 'bold'
+									},
+									color: '#fff'
+								}
+							}
+						}
 					}
 				});
 			} else {
diff --git a/src/main/java/com/faf223/expensetrackerfaf/web/src/routes/dashboard/board/incomes/graphs/Graph3.svelte b/src/main/java/com/faf223/expensetrackerfaf/web/src/routes/dashboard/board/incomes/graphs/Graph3.svelte
index 5a1f99b..cd5aa84 100644
--- a/src/main/java/com/faf223/expensetrackerfaf/web/src/routes/dashboard/board/incomes/graphs/Graph3.svelte
+++ b/src/main/java/com/faf223/expensetrackerfaf/web/src/routes/dashboard/board/incomes/graphs/Graph3.svelte
@@ -40,7 +40,17 @@
 						},
 						options: {
 							responsive: true,
-							maintainAspectRatio: false
+							maintainAspectRatio: false,
+							plugins: {
+								legend: {
+									labels: {
+										font: {
+											weight: 'bold'
+										},
+										color: '#fff'
+									}
+								}
+							}
 						}
 					});
 				} else {
diff --git a/src/main/java/com/faf223/expensetrackerfaf/web/src/routes/dashboard/board/incomes/infolists/ContentIncome.svelte b/src/main/java/com/faf223/expensetrackerfaf/web/src/routes/dashboard/board/incomes/infolists/ContentIncome.svelte
index 8c8b8da..7ab371f 100644
--- a/src/main/java/com/faf223/expensetrackerfaf/web/src/routes/dashboard/board/incomes/infolists/ContentIncome.svelte
+++ b/src/main/java/com/faf223/expensetrackerfaf/web/src/routes/dashboard/board/incomes/infolists/ContentIncome.svelte
@@ -50,7 +50,7 @@
         try {
             const token = getCookie('access_token');
 
-            const response = await axios.post('http://localhost:8081/incomes', data, {
+            const response = await axios.post('https://trackio.online:8081/incomes', data, {
                 headers: {
                     'Authorization': `Bearer ${token}`,
                     'Content-Type': 'application/json',
diff --git a/src/main/java/com/faf223/expensetrackerfaf/web/src/routes/dashboard/board/incomes/infolists/Incomes.svelte b/src/main/java/com/faf223/expensetrackerfaf/web/src/routes/dashboard/board/incomes/infolists/Incomes.svelte
index 9dceadc..3d9347f 100644
--- a/src/main/java/com/faf223/expensetrackerfaf/web/src/routes/dashboard/board/incomes/infolists/Incomes.svelte
+++ b/src/main/java/com/faf223/expensetrackerfaf/web/src/routes/dashboard/board/incomes/infolists/Incomes.svelte
@@ -2,17 +2,33 @@
     import ContentIncome from "./ContentIncome.svelte";
     import { incomeData } from "../../../stores.js";
     import { globalStyles } from "../../../styles.js";
+
+    const textToIcon = {
+        'Interest': "<svg xmlns=\"http://www.w3.org/2000/svg\" height=\"16\" width=\"20\" viewBox=\"0 0 640 512\"><!--!Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2023 Fonticons, Inc.--><path d=\"M539.7 237.3c3.1-12.3 4.3-24.8 4.3-37.4C544 107.4 468.6 32 376.1 32c-77.2 0-144.6 53-163 127.8-15.3-13.2-34.9-20.5-55.2-20.5-46.3 0-84 37.7-84 84 0 7.4 .9 15 3.1 22.4-42.9 20.2-70.8 63.7-70.8 111.2C6.2 424.8 61.7 480 129.4 480h381.2c67.7 0 123.2-55.2 123.2-123.2 0-56.4-38.9-106-94.1-119.5zM199.9 401.6c0 8.3-7 15.3-15.3 15.3H153.6c-8.3 0-15.3-7-15.3-15.3V290.6c0-8.3 7-15.3 15.3-15.3h30.9c8.3 0 15.3 7 15.3 15.3v110.9zm89.5 0c0 8.3-7 15.3-15.3 15.3h-30.9c-8.3 0-15.3-7-15.3-15.3V270.1c0-8.3 7-15.3 15.3-15.3h30.9c8.3 0 15.3 7 15.3 15.3v131.5zm89.5 0c0 8.3-7 15.3-15.3 15.3h-30.9c-8.3 0-15.3-7-15.3-15.3V238.8c0-8.3 7-15.3 15.3-15.3h30.9c8.3 0 15.3 7 15.3 15.3v162.7zm87 0c0 8.3-7 15.3-15.3 15.3h-28.5c-8.3 0-15.3-7-15.3-15.3V176.9c0-8.6 7-15.6 15.3-15.6h28.5c8.3 0 15.3 7 15.3 15.6v224.6z\"/></svg>",
+        'Salary': "<svg xmlns=\"http://www.w3.org/2000/svg\" height=\"16\" width=\"18\" viewBox=\"0 0 576 512\"><!--!Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2023 Fonticons, Inc.--><path d=\"M64 64C28.7 64 0 92.7 0 128V384c0 35.3 28.7 64 64 64H512c35.3 0 64-28.7 64-64V128c0-35.3-28.7-64-64-64H64zm64 320H64V320c35.3 0 64 28.7 64 64zM64 192V128h64c0 35.3-28.7 64-64 64zM448 384c0-35.3 28.7-64 64-64v64H448zm64-192c-35.3 0-64-28.7-64-64h64v64zM288 160a96 96 0 1 1 0 192 96 96 0 1 1 0-192z\"/></svg>",
+        'Freelance Income': "<svg xmlns=\"http://www.w3.org/2000/svg\" height=\"16\" width=\"18\" viewBox=\"0 0 576 512\"><!--!Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2023 Fonticons, Inc.--><path d=\"M64 64C28.7 64 0 92.7 0 128V384c0 35.3 28.7 64 64 64H512c35.3 0 64-28.7 64-64V128c0-35.3-28.7-64-64-64H64zm64 320H64V320c35.3 0 64 28.7 64 64zM64 192V128h64c0 35.3-28.7 64-64 64zM448 384c0-35.3 28.7-64 64-64v64H448zm64-192c-35.3 0-64-28.7-64-64h64v64zM288 160a96 96 0 1 1 0 192 96 96 0 1 1 0-192z\"/></svg>",
+        'Investment Income': "<svg xmlns=\"http://www.w3.org/2000/svg\" height=\"16\" width=\"20\" viewBox=\"0 0 640 512\"><!--!Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2023 Fonticons, Inc.--><path d=\"M539.7 237.3c3.1-12.3 4.3-24.8 4.3-37.4C544 107.4 468.6 32 376.1 32c-77.2 0-144.6 53-163 127.8-15.3-13.2-34.9-20.5-55.2-20.5-46.3 0-84 37.7-84 84 0 7.4 .9 15 3.1 22.4-42.9 20.2-70.8 63.7-70.8 111.2C6.2 424.8 61.7 480 129.4 480h381.2c67.7 0 123.2-55.2 123.2-123.2 0-56.4-38.9-106-94.1-119.5zM199.9 401.6c0 8.3-7 15.3-15.3 15.3H153.6c-8.3 0-15.3-7-15.3-15.3V290.6c0-8.3 7-15.3 15.3-15.3h30.9c8.3 0 15.3 7 15.3 15.3v110.9zm89.5 0c0 8.3-7 15.3-15.3 15.3h-30.9c-8.3 0-15.3-7-15.3-15.3V270.1c0-8.3 7-15.3 15.3-15.3h30.9c8.3 0 15.3 7 15.3 15.3v131.5zm89.5 0c0 8.3-7 15.3-15.3 15.3h-30.9c-8.3 0-15.3-7-15.3-15.3V238.8c0-8.3 7-15.3 15.3-15.3h30.9c8.3 0 15.3 7 15.3 15.3v162.7zm87 0c0 8.3-7 15.3-15.3 15.3h-28.5c-8.3 0-15.3-7-15.3-15.3V176.9c0-8.6 7-15.6 15.3-15.6h28.5c8.3 0 15.3 7 15.3 15.6v224.6z\"/></svg>",
+        'Comission': "<svg xmlns=\"http://www.w3.org/2000/svg\" height=\"16\" width=\"18\" viewBox=\"0 0 576 512\"><!--!Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2023 Fonticons, Inc.--><path d=\"M64 64C28.7 64 0 92.7 0 128v64c0 8.8 7.4 15.7 15.7 18.6C34.5 217.1 48 235 48 256s-13.5 38.9-32.3 45.4C7.4 304.3 0 311.2 0 320v64c0 35.3 28.7 64 64 64H512c35.3 0 64-28.7 64-64V320c0-8.8-7.4-15.7-15.7-18.6C541.5 294.9 528 277 528 256s13.5-38.9 32.3-45.4c8.3-2.9 15.7-9.8 15.7-18.6V128c0-35.3-28.7-64-64-64H64zm64 112l0 160c0 8.8 7.2 16 16 16H432c8.8 0 16-7.2 16-16V176c0-8.8-7.2-16-16-16H144c-8.8 0-16 7.2-16 16zM96 160c0-17.7 14.3-32 32-32H448c17.7 0 32 14.3 32 32V352c0 17.7-14.3 32-32 32H128c-17.7 0-32-14.3-32-32V160z\"/></svg>",
+        'Sold Products': "<svg xmlns=\"http://www.w3.org/2000/svg\" height=\"16\" width=\"18\" viewBox=\"0 0 576 512\"><!--!Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2023 Fonticons, Inc.--><path d=\"M64 64C28.7 64 0 92.7 0 128V384c0 35.3 28.7 64 64 64H512c35.3 0 64-28.7 64-64V128c0-35.3-28.7-64-64-64H64zm64 320H64V320c35.3 0 64 28.7 64 64zM64 192V128h64c0 35.3-28.7 64-64 64zM448 384c0-35.3 28.7-64 64-64v64H448zm64-192c-35.3 0-64-28.7-64-64h64v64zM288 160a96 96 0 1 1 0 192 96 96 0 1 1 0-192z\"/></svg>",
+        'Gifts': "<svg xmlns=\"http://www.w3.org/2000/svg\" height=\"16\" width=\"16\" viewBox=\"0 0 512 512\"><!--!Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2023 Fonticons, Inc.--><path d=\"M190.5 68.8L225.3 128H224 152c-22.1 0-40-17.9-40-40s17.9-40 40-40h2.2c14.9 0 28.8 7.9 36.3 20.8zM64 88c0 14.4 3.5 28 9.6 40H32c-17.7 0-32 14.3-32 32v64c0 17.7 14.3 32 32 32H480c17.7 0 32-14.3 32-32V160c0-17.7-14.3-32-32-32H438.4c6.1-12 9.6-25.6 9.6-40c0-48.6-39.4-88-88-88h-2.2c-31.9 0-61.5 16.9-77.7 44.4L256 85.5l-24.1-41C215.7 16.9 186.1 0 154.2 0H152C103.4 0 64 39.4 64 88zm336 0c0 22.1-17.9 40-40 40H288h-1.3l34.8-59.2C329.1 55.9 342.9 48 357.8 48H360c22.1 0 40 17.9 40 40zM32 288V464c0 26.5 21.5 48 48 48H224V288H32zM288 512H432c26.5 0 48-21.5 48-48V288H288V512z\"/></svg>",
+        'Government Payments': "<svg xmlns=\"http://www.w3.org/2000/svg\" height=\"16\" width=\"18\" viewBox=\"0 0 576 512\"><!--!Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2023 Fonticons, Inc.--><path d=\"M64 64C28.7 64 0 92.7 0 128V384c0 35.3 28.7 64 64 64H512c35.3 0 64-28.7 64-64V128c0-35.3-28.7-64-64-64H64zm64 320H64V320c35.3 0 64 28.7 64 64zM64 192V128h64c0 35.3-28.7 64-64 64zM448 384c0-35.3 28.7-64 64-64v64H448zm64-192c-35.3 0-64-28.7-64-64h64v64zM288 160a96 96 0 1 1 0 192 96 96 0 1 1 0-192z\"/></svg>"
+    };
 </script>
 
 <div id="incomeInfo" style="background-color: {$globalStyles.mainColor}">
     <ContentIncome />
     <div id="listContainer" style="color: {$globalStyles.color}">
         <ul>
-            {#each $incomeData as item}
-                <li>
-                    {item.incomeCategory ? `${item.incomeCategory.name}: ` : `${item.incomeCategory.name}: `}
-                    {item.incomeCategory ? `+${item.amount}$` : `-${item.amount}$`}
-                    {`${item.date}`}
+            {#each $incomeData.reverse() as item}
+                <li style="display:flex; justify-content: space-between; color: {$globalStyles.color}">
+                    <span>
+                    {#if textToIcon[item.incomeCategory.name]}
+                        {@html textToIcon[item.incomeCategory.name]}
+                    {/if}
+                    <span style="font-weight: bold">{item.incomeCategory ? `${item.incomeCategory.name}: ` : `${item.expenseCategory.name}: `}</span>
+                    <span style="margin-right: 10px; color: green; font-size: larger">{item.incomeCategory ? `+${item.amount}$` : `-${item.amount}$`}</span>
+                    </span>
+                    <span style="">{`${item.date}`}</span>
                 </li>
             {/each}
         </ul>
@@ -43,16 +59,25 @@
         border-radius: 0 0 10px 10px;
     }
 
-    #listContainer::-webkit-scrollbar {
-        width: 0;
+    ::-webkit-scrollbar {
+        width: 10px;
     }
 
-    #listContainer::-webkit-scrollbar-thumb {
-        background-color: transparent;
+    /* Track */
+    ::-webkit-scrollbar-track {
+        background: #f1f1f1;
+        border-radius: 10px;
     }
 
-    #listContainer::-webkit-scrollbar-track {
-        background-color: transparent;
+    /* Handle */
+    ::-webkit-scrollbar-thumb {
+        background: #888;
+        border-radius: 10px;
+    }
+
+    /* Handle on hover */
+    ::-webkit-scrollbar-thumb:hover {
+        background: #555;
     }
 
     #listContainer ul {
diff --git a/src/main/java/com/faf223/expensetrackerfaf/web/src/routes/dashboard/board/incomes/other/DataMenu.svelte b/src/main/java/com/faf223/expensetrackerfaf/web/src/routes/dashboard/board/incomes/other/DataMenu.svelte
index 64cf655..4421280 100644
--- a/src/main/java/com/faf223/expensetrackerfaf/web/src/routes/dashboard/board/incomes/other/DataMenu.svelte
+++ b/src/main/java/com/faf223/expensetrackerfaf/web/src/routes/dashboard/board/incomes/other/DataMenu.svelte
@@ -4,10 +4,17 @@
     import Incomes from "../infolists/Incomes.svelte";
     import {globalStyles} from "../../../styles.js";
     import { slide } from 'svelte/transition'
-    import {incomeTypes} from "../../../stores.js";
+    import {dateText, expenseData, incomeData, incomeTypes, tempIncome, tempExpense} from "../../../stores.js";
+    import axios from "axios";
+    import {getCookie} from "svelte-cookie";
+    import {onMount} from "svelte";
 
     let isDateDropdownExpanded = false
     let isCategoryDropdownExpanded = false
+    let incomeAnalysisText = "REVENUE ANALYSIS: ";
+    $ : {
+        incomeAnalysisText = "REVENUE ANALYSIS: " + $dateText;
+    }
 
     function clickHandlerDate() {
         isDateDropdownExpanded = !isDateDropdownExpanded
@@ -17,33 +24,196 @@
         isCategoryDropdownExpanded = !isCategoryDropdownExpanded;
     }
 
+    function clickOutsideHandler(event) {
+        const isDateButton = event.target.closest("#btn1");
+        const isCategoryButton = event.target.closest("#btn2");
+
+        if (!isDateButton) {
+            isDateDropdownExpanded = false;
+        }
+
+        if (!isCategoryButton) {
+            isCategoryDropdownExpanded = false;
+        }
+    }
+
+    onMount(() => {
+        document.body.addEventListener("click", clickOutsideHandler);
+
+        // Clean up the event listener when the component is destroyed
+        return () => {
+            document.body.removeEventListener("click", clickOutsideHandler);
+        };
+    });
+
+    async function getToday() {
+        var currentDate = new Date();
+        var currentDay = currentDate.toISOString().split('T')[0];
+        try {
+            const response1 = await axios.get('https://trackio.online:8081/incomes/personal-incomes?date=' + currentDay, {
+                headers: {
+                    'Authorization': `Bearer ${getCookie('access_token')}`
+                }
+            });
+            incomeData.set(response1.data);
+            tempIncome.set(response1.data);
+            const response2 = await axios.get('https://trackio.online:8081/expenses/personal-expenses?date=' + currentDay, {
+                headers: {
+                    'Authorization': `Bearer ${getCookie('access_token')}`
+                }
+            });
+            expenseData.set(response2.data);
+            tempExpense.set(response2.data);
+            $dateText = "Today"
+        } catch (error) {
+            console.error("Error fetching expenses:", error);
+        }
+    }
+
+    async function getYesterday() {
+        var currentDate = new Date();
+
+        var yesterday = new Date(currentDate);
+        yesterday.setDate(currentDate.getDate() - 1);
+
+        var yesterdayString = yesterday.toISOString().split('T')[0];
+
+        try {
+            const response1 = await axios.get('https://trackio.online:8081/incomes/personal-incomes?date=' + yesterdayString, {
+                headers: {
+                    'Authorization': `Bearer ${getCookie('access_token')}`
+                }
+            });
+            incomeData.set(response1.data);
+            tempIncome.set(response1.data);
+            const response2 = await axios.get('https://trackio.online:8081/expenses/personal-expenses?date=' + yesterdayString, {
+                headers: {
+                    'Authorization': `Bearer ${getCookie('access_token')}`
+                }
+            });
+            expenseData.set(response2.data);
+            tempExpense.set(response2.data);
+            $dateText = "Yesterday"
+        } catch (error) {
+            console.error("Error fetching expenses:", error);
+        }
+    }
+
+    async function getMonth() {
+        var currentDate = new Date();
+        var year = currentDate.getMonth() + 1;
+
+        try {
+            const response1 = await axios.get('https://trackio.online:8081/incomes/personal-incomes?month=' + year, {
+                headers: {
+                    'Authorization': `Bearer ${getCookie('access_token')}`
+                }
+            });
+
+            incomeData.set(response1.data);
+            tempIncome.set(response1.data);
+
+            const response2 = await axios.get('https://trackio.online:8081/expenses/personal-expenses?month=' + year, {
+                headers: {
+                    'Authorization': `Bearer ${getCookie('access_token')}`
+                }
+            });
+
+            expenseData.set(response2.data);
+            tempExpense.set(response2.data);
+            $dateText = "This Month"
+        } catch (error) {
+            console.error("Error fetching expenses:", error);
+        }
+    }
+
+    async function getLastMonth() {
+        var currentDate = new Date();
+        var year = currentDate.getMonth();
+
+        try {
+            const response1 = await axios.get('https://trackio.online:8081/expenses/personal-expenses?month=' + year, {
+                headers: {
+                    'Authorization': `Bearer ${getCookie('access_token')}`
+                }
+            });
+
+            expenseData.set(response1.data);
+            tempExpense.set(response1.data);
+            const response2 = await axios.get('https://trackio.online:8081/incomes/personal-incomes?month=' + year, {
+                headers: {
+                    'Authorization': `Bearer ${getCookie('access_token')}`
+                }
+            });
+
+            incomeData.set(response2.data);
+            tempIncome.set(response2.data);
+            $dateText = "Last Month"
+        } catch (error) {
+            console.error("Error fetching expenses:", error);
+        }
+    }
+
+    async function getLastYear() {
+        var currentDate = new Date();
+        var year = currentDate.getFullYear();
+
+        try {
+            const response1 = await axios.get('https://trackio.online:8081/incomes/personal-incomes?year=' + year, {
+                headers: {
+                    'Authorization': `Bearer ${getCookie('access_token')}`
+                }
+            });
+
+            incomeData.set(response1.data);
+            tempIncome.set(response1.data);
+            const response2 = await axios.get('https://trackio.online:8081/expenses/personal-expenses?year=' + year, {
+                headers: {
+                    'Authorization': `Bearer ${getCookie('access_token')}`
+                }
+            });
+
+            expenseData.set(response2.data);
+            tempExpense.set(response2.data);
+            $dateText = "This Year"
+        } catch (error) {
+            console.error("Error fetching expenses:", error);
+        }
+    }
+
+    function filterByCategory(category) {
+        console.log(category)
+        let tempArr = $tempIncome.filter(income => income.incomeCategory.name === category);
+        incomeData.set(tempArr);
+    }
+
 </script>
 
 <div id="main-data" style="background-color: {$globalStyles.dashColor}; color: {$globalStyles.color}">
     <div id="data-header" style="background-color:{$globalStyles.mainColor}; color: {$globalStyles.altColor}">
-        <span>Revenue Analysis</span>
+        <span style="color: {$globalStyles.altColor}" contenteditable="false" bind:innerHTML={incomeAnalysisText}></span>
 
         <div id="dropdown-date">
-            <button id="button" on:click={clickHandlerDate}>Filter by Date:</button>
+            <button id="btn1" class="button" on:click={clickHandlerDate}>Filter by Date ▼</button>
             {#if isDateDropdownExpanded}
                 <div id="date-list" transition:slide>
-                    <div on:click={() => console.log("Today")}>Today</div>
-                    <div on:click={() => console.log("Yesterday")}>Yesterday</div>
-                    <div on:click={() => console.log("Last week")}>Last week</div>
-                    <div on:click={() => console.log("Last month")}>Last month</div>
-                    <div on:click={() => console.log("Current quarter")}>Current quarter</div>
-                    <div on:click={() => console.log("This year")}>This year</div>
+                    <div class="date-entry" on:click={() => getToday()}>Today</div>
+                    <div class="date-entry" on:click={() => getYesterday()}>Yesterday</div>
+                    <div class="date-entry" on:click={() => getMonth()}>This month</div>
+                    <div class="date-entry" on:click={() => getLastMonth()}>Last month</div>
+                    <!--                    <div on:click={() => console.log("Current quarter")}>Current quarter</div>-->
+                    <div class="date-entry" on:click={() => getLastYear()}>This year</div>
                 </div>
             {/if}
         </div>
 
         <div id="dropdown-category">
-            <button id="button" on:click={clickHandlerCategory}>Filter by Category:</button>
+            <button id="btn2" class="button" on:click={clickHandlerCategory}>Filter by Category ▼</button>
             {#if isCategoryDropdownExpanded}
-                <div id="category-list" transition:slide>
+                <div id="date-list" transition:slide>
                     {#each $incomeTypes as income (income.id)}
                         {#if income.id !== undefined}
-                            <option value={income.id}>{income.name}</option>
+                            <div class="date-entry" on:click={() => filterByCategory(income.name)} value={income.id}>{income.name}</div>
                         {/if}
                     {/each}
                 </div>
@@ -76,48 +246,147 @@
         flex: 1 1 auto;
     }
 
-    #button {
-        background-color: #fff000;
-        border-radius: 12px;
-        color: #000;
-        cursor: pointer;
-        font-weight: bold;
-        padding: 10px 15px;
-        text-align: center;
-        transition: 200ms;
-        width: 100%;
-        box-sizing: border-box;
-        border: 0;
-        font-size: 16px;
-        user-select: none;
-        -webkit-user-select: none;
-        touch-action: manipulation;
-    }
+    /*#button {*/
+    /*    background-color: #fff000;*/
+    /*    border-radius: 12px;*/
+    /*    color: #000;*/
+    /*    cursor: pointer;*/
+    /*    font-weight: bold;*/
+    /*    padding: 10px 15px;*/
+    /*    text-align: center;*/
+    /*    transition: 200ms;*/
+    /*    width: 100%;*/
+    /*    box-sizing: border-box;*/
+    /*    border: 0;*/
+    /*    font-size: 16px;*/
+    /*    user-select: none;*/
+    /*    -webkit-user-select: none;*/
+    /*    touch-action: manipulation;*/
+    /*}*/
 
-    #button:not(:disabled):hover,
-    #button:not(:disabled):focus {
-        outline: 0;
-        background: #f4e603;
-        box-shadow: 0 0 0 2px rgba(0,0,0,.2), 0 3px 8px 0 rgba(0,0,0,.15);
-    }
-
-    #button:disabled {
-        filter: saturate(0.2) opacity(0.5);
-        -webkit-filter: saturate(0.2) opacity(0.5);
-        cursor: not-allowed;
-    }
+    /*#button:not(:disabled):hover,*/
+    /*#button:not(:disabled):focus {*/
+    /*    outline: 0;*/
+    /*    background: #f4e603;*/
+    /*    box-shadow: 0 0 0 2px rgba(0,0,0,.2), 0 3px 8px 0 rgba(0,0,0,.15);*/
+    /*}*/
 
+    /*#button:disabled {*/
+    /*    filter: saturate(0.2) opacity(0.5);*/
+    /*    -webkit-filter: saturate(0.2) opacity(0.5);*/
+    /*    cursor: not-allowed;*/
+    /*}*/
 
     #date-list {
-        background-color: #8BD17C;
+        background-color: #007BFF;
         position:absolute;
+        margin-top: 20px;
+        max-height: 400px;
+        overflow-y: scroll;
+        border-radius: 20px;
         z-index:1;
     }
 
-    #category-list {
-        background-color: #8BD17C;
-        position:absolute;
-        z-index:1;
+    .date-entry {
+        padding: 10px;
+        margin: 10px;
+        background-color: black;
+        color: white;
+        border-radius: 20px;
+        cursor: pointer;
+    }
+
+    .date-entry:hover {
+        background-color: rgb(128, 128, 128);
+    }
+
+
+    /*.button {*/
+    /*    font-size: large;*/
+    /*    margin: 10px;*/
+    /*    background-color: #007BFF;*/
+    /*    color: #fff;*/
+    /*    border: none;*/
+    /*    border-radius: 20px;*/
+    /*    line-height: 40px;*/
+    /*    cursor: pointer;*/
+    /*}*/
+
+    /*.button:hover {*/
+    /*    background-color: #0056b3;*/
+    /*}*/
+
+    .button {
+        align-items: center;
+        background-color: #0A66C2;
+        border: 0;
+        border-radius: 100px;
+        box-sizing: border-box;
+        color: #ffffff;
+        cursor: pointer;
+        display: inline-flex;
+        font-family: -apple-system, system-ui, system-ui, "Segoe UI", Roboto, "Helvetica Neue", "Fira Sans", Ubuntu, Oxygen, "Oxygen Sans", Cantarell, "Droid Sans", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Lucida Grande", Helvetica, Arial, sans-serif;
+        font-size: 16px;
+        font-weight: 600;
+        justify-content: center;
+        line-height: 20px;
+        max-width: 480px;
+        min-height: 40px;
+        min-width: 0px;
+        overflow: hidden;
+        padding: 0px;
+        padding-left: 20px;
+        padding-right: 20px;
+        text-align: center;
+        touch-action: manipulation;
+        transition: background-color 0.167s cubic-bezier(0.4, 0, 0.2, 1) 0s, box-shadow 0.167s cubic-bezier(0.4, 0, 0.2, 1) 0s, color 0.167s cubic-bezier(0.4, 0, 0.2, 1) 0s;
+        user-select: none;
+        -webkit-user-select: none;
+        vertical-align: middle;
+    }
+
+    .button:hover,
+    .button:focus {
+        background-color: #16437E;
+        color: #ffffff;
+    }
+
+    .button:active {
+        background: #09223b;
+        color: rgb(255, 255, 255, .7);
+    }
+
+    .button:disabled {
+        cursor: not-allowed;
+        background: rgba(0, 0, 0, .08);
+        color: rgba(0, 0, 0, .3);
+    }
+
+    /*#category-list {*/
+    /*    background-color: #8BD17C;*/
+    /*    position:absolute;*/
+    /*    z-index:1;*/
+    /*}*/
+
+    ::-webkit-scrollbar {
+        width: 10px;
+    }
+
+    /* Track */
+    ::-webkit-scrollbar-track {
+        background: #f1f1f1;
+        border-radius: 10px;
+    }
+
+    /* Handle */
+    ::-webkit-scrollbar-thumb {
+        background: #888;
+        border-radius: 10px;
+    }
+
+    /* Handle on hover */
+    ::-webkit-scrollbar-thumb:hover {
+        background: #555;
     }
 
     #data-header {
@@ -131,7 +400,8 @@
         border-top-left-radius: 20px;
         border-top-right-radius: 20px;
         font-size: larger;
-        border: #8BD17C 2px solid;
+        margin-bottom: 5px;
+        /*border: #8BD17C 2px solid;*/
     }
 
     #data-menu {
diff --git a/src/main/java/com/faf223/expensetrackerfaf/web/src/routes/dashboard/board/incomes/other/QuickInfobar.svelte b/src/main/java/com/faf223/expensetrackerfaf/web/src/routes/dashboard/board/incomes/other/QuickInfobar.svelte
index 017d47e..c569aff 100644
--- a/src/main/java/com/faf223/expensetrackerfaf/web/src/routes/dashboard/board/incomes/other/QuickInfobar.svelte
+++ b/src/main/java/com/faf223/expensetrackerfaf/web/src/routes/dashboard/board/incomes/other/QuickInfobar.svelte
@@ -24,11 +24,11 @@
         const expenseDifference = ((lastMonthExpense - totalExpenses) / lastMonthExpense) * 100;
 
         try {
-            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>`;
+            infobar1.innerHTML = `<span style="font-size: larger">Total expenses:</span><br><span style="color:red;font-size: xxx-large">${totalExpenses.toFixed(2)}$</span>`;
+            infobar2.innerHTML = `<span style="font-size: larger">Total incomes:</span><br><span style="color:green;font-size: xxx-large">${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>`;
+            infobar3.innerHTML = `<span style="font-size: larger">Income by last month:</span><br><span style="color:blue;font-size: xxx-large">${incomeDifference.toFixed(2)}%</span>`;
+            infobar4.innerHTML = `<span style="font-size: larger">Expense by last month:</span><br><span style="color:orange;font-size: xxx-large">${expenseDifference.toFixed(2)}%</span>`;
         } catch {
             console.log("not yet loaded");
         }
diff --git a/src/main/java/com/faf223/expensetrackerfaf/web/src/routes/dashboard/menu/SideMenu.svelte b/src/main/java/com/faf223/expensetrackerfaf/web/src/routes/dashboard/menu/SideMenu.svelte
index df98d3d..d33250c 100644
--- a/src/main/java/com/faf223/expensetrackerfaf/web/src/routes/dashboard/menu/SideMenu.svelte
+++ b/src/main/java/com/faf223/expensetrackerfaf/web/src/routes/dashboard/menu/SideMenu.svelte
@@ -17,7 +17,7 @@
         };
 
         try {
-            const response = await axios.get('http://localhost:8081/users/getUserData', config);
+            const response = await axios.get('https://trackio.online:8081/users/get-user-data', config);
             const data = response.data;
             username = data.username;
             console.log(username)
@@ -110,6 +110,7 @@
         justify-content: center;
         align-items: center;
         border-radius: 20px;
+        cursor: pointer;
     }
 
     .sideMenuItem:hover {
diff --git a/src/main/java/com/faf223/expensetrackerfaf/web/src/routes/dashboard/stores.js b/src/main/java/com/faf223/expensetrackerfaf/web/src/routes/dashboard/stores.js
index b25c279..495a708 100644
--- a/src/main/java/com/faf223/expensetrackerfaf/web/src/routes/dashboard/stores.js
+++ b/src/main/java/com/faf223/expensetrackerfaf/web/src/routes/dashboard/stores.js
@@ -8,4 +8,10 @@ export const incomeTypes = writable([]);
 
 export const expenseTypes = writable([]);
 
-export let selectedTab = writable('expenses');
\ No newline at end of file
+export const tempExpense = writable([])
+
+export const tempIncome = writable([]);
+
+export let selectedTab = writable('expenses');
+
+export let dateText = writable("This Month");
\ No newline at end of file
diff --git a/src/main/java/com/faf223/expensetrackerfaf/web/vite.config.js b/src/main/java/com/faf223/expensetrackerfaf/web/vite.config.js
index bbf8c7d..9fa0126 100644
--- a/src/main/java/com/faf223/expensetrackerfaf/web/vite.config.js
+++ b/src/main/java/com/faf223/expensetrackerfaf/web/vite.config.js
@@ -1,6 +1,15 @@
 import { sveltekit } from '@sveltejs/kit/vite';
 import { defineConfig } from 'vite';
+import fs from 'fs'
 
 export default defineConfig({
-	plugins: [sveltekit()]
+	plugins: [sveltekit()],
+	server: {
+		port: 443,
+		https: {
+			key: fs.readFileSync('D:\\Source\\JavaProjects\\ExpenseTrackerFAF\\src\\main\\java\\com\\faf223\\expensetrackerfaf\\web\\privkey.pem'),
+			cert: fs.readFileSync('D:\\Source\\JavaProjects\\ExpenseTrackerFAF\\src\\main\\java\\com\\faf223\\expensetrackerfaf\\web\\fullchain.pem'),
+			proxy: {}
+		}
+	},
 });
