Merge branch 'master' of https://github.com/lumijiez/ExpenseTrackerFAF into front-v3

Updated interface, fixed bug
2024-01-11 00:42:36 +02:00 · 2023-12-21 22:56:40 +02:00 · 2023-12-21 22:56:27 +02:00
30 changed files with 1888 additions and 937 deletions
--- a/src/main/java/com/faf223/expensetrackerfaf/web/fullchain.pem
+++ b/src/main/java/com/faf223/expensetrackerfaf/web/fullchain.pem
@@ -0,0 +1,86 @@
+-----BEGIN CERTIFICATE-----
+MIIEHTCCAwWgAwIBAgISBGYC3YGfvdZxQg6y2YUSjvzLMA0GCSqGSIb3DQEBCwUA
+MDIxCzAJBgNVBAYTAlVTMRYwFAYDVQQKEw1MZXQncyBFbmNyeXB0MQswCQYDVQQD
+EwJSMzAeFw0yMzEyMTIxOTAxNTVaFw0yNDAzMTExOTAxNTRaMBkxFzAVBgNVBAMT
+DnRyYWNraW8ub25saW5lMFkwEwYHKoZIzj0CAQYIKoZIzj0DAQcDQgAEirToCuVv
+qNiT3Rxqsyu2+OmD7TYBW+CV9639OW4FhwHaFxyzoCWI3/w3gZNVE/5Y1CvwHAsw
+qfuam0LjfbnKOKOCAg8wggILMA4GA1UdDwEB/wQEAwIHgDAdBgNVHSUEFjAUBggr
+BgEFBQcDAQYIKwYBBQUHAwIwDAYDVR0TAQH/BAIwADAdBgNVHQ4EFgQUmUFyQf+b
+b16jD80QRaO9ipw7h9kwHwYDVR0jBBgwFoAUFC6zF7dYVsuuUAlA5h+vnYsUwsYw
+VQYIKwYBBQUHAQEESTBHMCEGCCsGAQUFBzABhhVodHRwOi8vcjMuby5sZW5jci5v
+cmcwIgYIKwYBBQUHMAKGFmh0dHA6Ly9yMy5pLmxlbmNyLm9yZy8wGQYDVR0RBBIw
+EIIOdHJhY2tpby5vbmxpbmUwEwYDVR0gBAwwCjAIBgZngQwBAgEwggEDBgorBgEE
+AdZ5AgQCBIH0BIHxAO8AdQA7U3d1Pi25gE6LMFsG/kA7Z9hPw/THvQANLXJv4frU
+FwAAAYxfnyo6AAAEAwBGMEQCIBqYq5pa2GE7UNJHzN+1AAbw///s8PtWNkauU9UO
+igWZAiAktf1uf/O90k1l/+ihkPxJXToxcH5yeOiqATqDMol5PwB2AHb/iD8KtvuV
+UcJhzPWHujS0pM27KdxoQgqf5mdMWjp0AAABjF+fKoMAAAQDAEcwRQIgfNyTycHQ
+D1OMAOBA8vHAyu//5SjnY0BtCxOITyY/W1oCIQCCHFH+VKTFCglsqcp2hwQJHGq/
+jiSj4tR0jYIm5xMlaTANBgkqhkiG9w0BAQsFAAOCAQEAqu7cvsrkAnyrBgQHovQ4
+r+F1S/H6vu/Bvt9x+d125uDa/pT55JO/wG1IvdT9fxws2oYcc/nc8DjvW9U7+peu
+5K675kH09QTi+GhBAU4gZBhx3PohA6qG0Wm/6gC4lOq+S7o32x6RpoptcSvB3UXQ
+9BkgbO6LgDu99jPm6Acv4wre6trXAbPOpSlruSKSENnda7l/CamfiOX0cRKHjZdX
+PNpIfqWXokXNNYDAdrcXbOm7mFVMo1WcjBQM6E++IXfDRqHQ82Y94YVhEdH/hCo6
+3ce9uSrgL9+HcwhHzlZj20rTHFJ6iX/+Ffk8wbYfR4Eu7MXDg8ULT0z93yIvDxgy
+uw==
+-----END CERTIFICATE-----
+-----BEGIN CERTIFICATE-----
+MIIFFjCCAv6gAwIBAgIRAJErCErPDBinU/bWLiWnX1owDQYJKoZIhvcNAQELBQAw
+TzELMAkGA1UEBhMCVVMxKTAnBgNVBAoTIEludGVybmV0IFNlY3VyaXR5IFJlc2Vh
+cmNoIEdyb3VwMRUwEwYDVQQDEwxJU1JHIFJvb3QgWDEwHhcNMjAwOTA0MDAwMDAw
+WhcNMjUwOTE1MTYwMDAwWjAyMQswCQYDVQQGEwJVUzEWMBQGA1UEChMNTGV0J3Mg
+RW5jcnlwdDELMAkGA1UEAxMCUjMwggEiMA0GCSqGSIb3DQEBAQUAA4IBDwAwggEK
+AoIBAQC7AhUozPaglNMPEuyNVZLD+ILxmaZ6QoinXSaqtSu5xUyxr45r+XXIo9cP
+R5QUVTVXjJ6oojkZ9YI8QqlObvU7wy7bjcCwXPNZOOftz2nwWgsbvsCUJCWH+jdx
+sxPnHKzhm+/b5DtFUkWWqcFTzjTIUu61ru2P3mBw4qVUq7ZtDpelQDRrK9O8Zutm
+NHz6a4uPVymZ+DAXXbpyb/uBxa3Shlg9F8fnCbvxK/eG3MHacV3URuPMrSXBiLxg
+Z3Vms/EY96Jc5lP/Ooi2R6X/ExjqmAl3P51T+c8B5fWmcBcUr2Ok/5mzk53cU6cG
+/kiFHaFpriV1uxPMUgP17VGhi9sVAgMBAAGjggEIMIIBBDAOBgNVHQ8BAf8EBAMC
+AYYwHQYDVR0lBBYwFAYIKwYBBQUHAwIGCCsGAQUFBwMBMBIGA1UdEwEB/wQIMAYB
+Af8CAQAwHQYDVR0OBBYEFBQusxe3WFbLrlAJQOYfr52LFMLGMB8GA1UdIwQYMBaA
+FHm0WeZ7tuXkAXOACIjIGlj26ZtuMDIGCCsGAQUFBwEBBCYwJDAiBggrBgEFBQcw
+AoYWaHR0cDovL3gxLmkubGVuY3Iub3JnLzAnBgNVHR8EIDAeMBygGqAYhhZodHRw
+Oi8veDEuYy5sZW5jci5vcmcvMCIGA1UdIAQbMBkwCAYGZ4EMAQIBMA0GCysGAQQB
+gt8TAQEBMA0GCSqGSIb3DQEBCwUAA4ICAQCFyk5HPqP3hUSFvNVneLKYY611TR6W
+PTNlclQtgaDqw+34IL9fzLdwALduO/ZelN7kIJ+m74uyA+eitRY8kc607TkC53wl
+ikfmZW4/RvTZ8M6UK+5UzhK8jCdLuMGYL6KvzXGRSgi3yLgjewQtCPkIVz6D2QQz
+CkcheAmCJ8MqyJu5zlzyZMjAvnnAT45tRAxekrsu94sQ4egdRCnbWSDtY7kh+BIm
+lJNXoB1lBMEKIq4QDUOXoRgffuDghje1WrG9ML+Hbisq/yFOGwXD9RiX8F6sw6W4
+avAuvDszue5L3sz85K+EC4Y/wFVDNvZo4TYXao6Z0f+lQKc0t8DQYzk1OXVu8rp2
+yJMC6alLbBfODALZvYH7n7do1AZls4I9d1P4jnkDrQoxB3UqQ9hVl3LEKQ73xF1O
+yK5GhDDX8oVfGKF5u+decIsH4YaTw7mP3GFxJSqv3+0lUFJoi5Lc5da149p90Ids
+hCExroL1+7mryIkXPeFM5TgO9r0rvZaBFOvV2z0gp35Z0+L4WPlbuEjN/lxPFin+
+HlUjr8gRsI3qfJOQFy/9rKIJR0Y/8Omwt/8oTWgy1mdeHmmjk7j1nYsvC9JSQ6Zv
+MldlTTKB3zhThV1+XWYp6rjd5JW1zbVWEkLNxE7GJThEUG3szgBVGP7pSWTUTsqX
+nLRbwHOoq7hHwg==
+-----END CERTIFICATE-----
+-----BEGIN CERTIFICATE-----
+MIIFYDCCBEigAwIBAgIQQAF3ITfU6UK47naqPGQKtzANBgkqhkiG9w0BAQsFADA/
+MSQwIgYDVQQKExtEaWdpdGFsIFNpZ25hdHVyZSBUcnVzdCBDby4xFzAVBgNVBAMT
+DkRTVCBSb290IENBIFgzMB4XDTIxMDEyMDE5MTQwM1oXDTI0MDkzMDE4MTQwM1ow
+TzELMAkGA1UEBhMCVVMxKTAnBgNVBAoTIEludGVybmV0IFNlY3VyaXR5IFJlc2Vh
+cmNoIEdyb3VwMRUwEwYDVQQDEwxJU1JHIFJvb3QgWDEwggIiMA0GCSqGSIb3DQEB
+AQUAA4ICDwAwggIKAoICAQCt6CRz9BQ385ueK1coHIe+3LffOJCMbjzmV6B493XC
+ov71am72AE8o295ohmxEk7axY/0UEmu/H9LqMZshftEzPLpI9d1537O4/xLxIZpL
+wYqGcWlKZmZsj348cL+tKSIG8+TA5oCu4kuPt5l+lAOf00eXfJlII1PoOK5PCm+D
+LtFJV4yAdLbaL9A4jXsDcCEbdfIwPPqPrt3aY6vrFk/CjhFLfs8L6P+1dy70sntK
+4EwSJQxwjQMpoOFTJOwT2e4ZvxCzSow/iaNhUd6shweU9GNx7C7ib1uYgeGJXDR5
+bHbvO5BieebbpJovJsXQEOEO3tkQjhb7t/eo98flAgeYjzYIlefiN5YNNnWe+w5y
+sR2bvAP5SQXYgd0FtCrWQemsAXaVCg/Y39W9Eh81LygXbNKYwagJZHduRze6zqxZ
+Xmidf3LWicUGQSk+WT7dJvUkyRGnWqNMQB9GoZm1pzpRboY7nn1ypxIFeFntPlF4
+FQsDj43QLwWyPntKHEtzBRL8xurgUBN8Q5N0s8p0544fAQjQMNRbcTa0B7rBMDBc
+SLeCO5imfWCKoqMpgsy6vYMEG6KDA0Gh1gXxG8K28Kh8hjtGqEgqiNx2mna/H2ql
+PRmP6zjzZN7IKw0KKP/32+IVQtQi0Cdd4Xn+GOdwiK1O5tmLOsbdJ1Fu/7xk9TND
+TwIDAQABo4IBRjCCAUIwDwYDVR0TAQH/BAUwAwEB/zAOBgNVHQ8BAf8EBAMCAQYw
+SwYIKwYBBQUHAQEEPzA9MDsGCCsGAQUFBzAChi9odHRwOi8vYXBwcy5pZGVudHJ1
+c3QuY29tL3Jvb3RzL2RzdHJvb3RjYXgzLnA3YzAfBgNVHSMEGDAWgBTEp7Gkeyxx
+tvhS5B1/8QVYIWJEDBUBgNVHSAETTBLMAgGBmeBDAECATA/BgsrBgEEAYLfEwEB
+ATAwMC4GCCsGAQUFBwIBFiJodHRwOi8vY3BzLnJvb3QteDEubGV0c2VuY3J5cHQu
+b3JnMDwGA1UdHwQ1MDMwMaAvoC2GK2h0dHA6Ly9jcmwuaWRlbnRydXN0LmNvbS9E
+U1RST09UQ0FYM0NSTC5jcmwwHQYDVR0OBBYEFHm0WeZ7tuXkAXOACIjIGlj26Ztu
+MA0GCSqGSIb3DQEBCwUAA4IBAQAKcwBslm7/DlLQrt2M51oGrS+o44+/yQoDFVDC
+5WxCu2+b9LRPwkSICHXM6webFGJueN7sJ7o5XPWioW5WlHAQU7G75K/QosMrAdSW
+9MUgNTP52GE24HGNtLi1qoJFlcDyqSMo59ahy2cI2qBDLKobkx/J3vWraV0T9VuG
+WCLKTVXkcGdtwlfFRjlBz4pYg1htmf5X6DYO8A4jqv2Il9DjXA6USbW1FzXSLr9O
+he8Y4IWS6wY7bCkjCWDcRQJMEhg76fsO3txE+FiYruq9RUWhiF1myv4Q6W+CyBFC
+Dfvp7OOGAN6dEOM4+qR9sdjoSYKEBpsr6GtPAQw4dy753ec5
+-----END CERTIFICATE-----
--- a/src/main/java/com/faf223/expensetrackerfaf/web/privkey.pem
+++ b/src/main/java/com/faf223/expensetrackerfaf/web/privkey.pem
@@ -0,0 +1,5 @@
+-----BEGIN PRIVATE KEY-----
+MIGHAgEAMBMGByqGSM49AgEGCCqGSM49AwEHBG0wawIBAQQg9kCIfgqNqFYgYU0Q
+HGi/jc5nLxhZxoXST5qeXBGtOAehRANCAASKtOgK5W+o2JPdHGqzK7b46YPtNgFb
+4JX3rf05bgWHAdoXHLOgJYjf/DeBk1UT/ljUK/AcCzCp+5qbQuN9uco4
+-----END PRIVATE KEY-----
--- a/src/main/java/com/faf223/expensetrackerfaf/web/src/routes/dashboard/+page.svelte
+++ b/src/main/java/com/faf223/expensetrackerfaf/web/src/routes/dashboard/+page.svelte
@@ -8,6 +8,8 @@

    function handleTabClick(tab) {
        selectedTab.set(tab);
+        // $isCategorizedIncome = false;
+        // $isCategorizedExpense = false;
    }

    let screenWidth;
@@ -39,9 +41,11 @@

 <style>
    @import url('https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400');
+    @import url('https://fonts.googleapis.com/css?family=Inconsolata');

    #wrapper {
        padding: 0;
+        font-family: Inconsolata,"Source Sans Pro",sans-serif;
        margin: 0;
        display: flex;
        align-items: stretch;
--- a/src/main/java/com/faf223/expensetrackerfaf/web/src/routes/dashboard/board/AdminPanel.svelte
+++ b/src/main/java/com/faf223/expensetrackerfaf/web/src/routes/dashboard/board/AdminPanel.svelte
@@ -1 +1,80 @@
-<h1>ADMIN PANEL</h1>
+<script>
+    import { onMount } from "svelte";
+    import axios from "axios";
+    import { getCookie } from "svelte-cookie";
+
+    let isLoaded = false;
+
+    onMount(async () => {
+        isLoaded = false;
+        isLoaded = true;
+        const token = getCookie('access_token');
+
+        if (token === '') {
+            window.location.href = '/auth/login';
+            return;
+        }
+
+        const config = {
+            headers: {
+                'Authorization': `Bearer ${token}`
+            }
+        };
+
+        try {
+            const response = await axios.get('https://trackio.online:8081/users', config);
+            const userResponse = response.data;
+            userData = userResponse;
+
+        } catch (error) {
+            console.error(error)
+        }
+    });
+</script>
+
+<div class="adminContainer">
+    {#if !isLoaded}
+        <div class="loading-container">
+            <div class="loading-spinner"></div>
+            <div class="loading-text">Loading...</div>
+        </div>
+    {:else}
+        LOL
+    {/if}
+</div>
+
+<style>
+
+    .adminContainer {
+        display: flex;
+        height: 100%;
+        flex-direction: row;
+        justify-content: center;
+        align-items: center;
+    }
+
+    .loading-container {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        flex-direction: column;
+    }
+
+    .loading-spinner {
+        border: 8px solid rgba(0, 0, 0, 0.1);
+        border-top: 8px solid #3498db;
+        border-radius: 50%;
+        width: 50px;
+        height: 50px;
+        animation: spin 1s linear infinite;
+    }
+
+    @keyframes spin {
+        0% { transform: rotate(0deg); }
+        100% { transform: rotate(360deg); }
+    }
+
+    .loading-text {
+        margin-top: 10px;
+    }
+</style>
--- 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
@@ -13,7 +13,8 @@
            monthIncome,
            monthExpense,
            tempExpense,
-            tempIncome
+            tempIncome, copyExpenseData, copyIncomeData,
+            isAdmin, username
        } from "../stores.js";
        import {globalStyles} from "../styles.js";

@@ -44,6 +45,17 @@
                };

            try {
+
+                try {
+                    const response = await axios.get('https://trackio.online:8081/users/get-user-data', config);
+                    const data = response.data;
+                    $username = data.username;
+                    $isAdmin = data.userrole === 'ROLE_ADMIN';
+
+                } catch (error) {
+                    console.error('Error:', error);
+                }
+
                const currentDate = new Date();
                const currentMonth = currentDate.getMonth() + 1;
                const [incomeResponse, expenseResponse, incomeTypesResponse, expenseTypesResponse] = await Promise.all([
@@ -58,6 +70,9 @@
                incomeData.set(incomeResponse.data);
                expenseData.set(expenseResponse.data);

+                copyExpenseData.set(expenseResponse.data);
+                copyIncomeData.set(incomeResponse.data);
+
                incomeTypes.set(incomeTypesResponse.data);
                expenseTypes.set(expenseTypesResponse.data);

--- a/src/main/java/com/faf223/expensetrackerfaf/web/src/routes/dashboard/board/ExpenseDashboard.svelte
+++ b/src/main/java/com/faf223/expensetrackerfaf/web/src/routes/dashboard/board/ExpenseDashboard.svelte
@@ -3,6 +3,7 @@
    import QuickInfobar from "./expenses/other/QuickInfobar.svelte";
    import Expenses from "./expenses/infolists/Expenses.svelte";
    import Graph3 from "./expenses/graphs/Graph3.svelte";
+    import Graph2 from "./expenses/graphs/Graph2.svelte";
 </script>

 <div class="expenseContainer">
@@ -14,6 +15,7 @@

        <div class="graphs">
            <Graph3 />
+            <Graph2 />
        </div>
    </div>
    <Expenses />
@@ -26,6 +28,10 @@
            flex: 1 1 auto;
            width: 100%;
        }
+
+        .graphs {
+            flex-wrap: wrap;
+        }
    }

    .graphs {
@@ -42,6 +48,7 @@
    .expenseContainer {
        display: flex;
        height: 100%;
+        background-color: #172233;
        flex-direction: row;
        justify-content: space-between;
    }
@@ -53,7 +60,8 @@
        flex-direction: column;
        flex: 1 1 auto;
        background-color: #212942;
-        padding: 10px;
+        border-radius: 20px;
+        /*padding: 10px;*/
    }
 </style>

--- a/src/main/java/com/faf223/expensetrackerfaf/web/src/routes/dashboard/board/IncomeDashboard.svelte
+++ b/src/main/java/com/faf223/expensetrackerfaf/web/src/routes/dashboard/board/IncomeDashboard.svelte
@@ -1,9 +1,67 @@
 <script>
    import DashHeader from "./incomes/other/DashHeader.svelte";
-    import DataMenu from "./incomes/other/DataMenu.svelte";
    import QuickInfobar from "./incomes/other/QuickInfobar.svelte";
+    import Incomes from "./incomes/infolists/Incomes.svelte";
+    import Graph3 from "./incomes/graphs/Graph3.svelte";
+    import Graph2 from "./incomes/graphs/Graph2.svelte";
 </script>

-<DashHeader />
-<QuickInfobar />
-<DataMenu />
+<div class="incomeContainer">
+    <div class="dataHalf">
+        <div>
+            <DashHeader />
+            <QuickInfobar />
+        </div>
+
+        <div class="graphs">
+            <Graph3 />
+            <Graph2 />
+        </div>
+    </div>
+    <Incomes />
+</div>
+
+<style>
+    @media only screen and (max-width: 900px) {
+        .incomeContainer {
+            flex-wrap: wrap;
+            flex: 1 1 auto;
+            width: 100%;
+        }
+
+        .graphs {
+            flex-wrap: wrap;
+        }
+    }
+
+    .graphs {
+        display:flex;
+        flex-direction: row;
+        justify-content: space-between;
+        align-items: stretch;
+        min-width: 0;
+        min-height: 0;
+        height: 100% !important;
+        width: 100% !important;
+        flex: 1 1 auto;
+    }
+    .incomeContainer {
+        display: flex;
+        height: 100%;
+        background-color: #172233;
+        flex-direction: row;
+        justify-content: space-between;
+    }
+
+    .dataHalf {
+        display:flex;
+        min-height: 0;
+        min-width: 0;
+        flex-direction: column;
+        flex: 1 1 auto;
+        background-color: #212942;
+        border-radius: 20px;
+        /*padding: 10px;*/
+    }
+</style>
+
--- 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
@@ -1,7 +1,7 @@
 <script>
 	import Chart from 'chart.js/auto';
 	import {onMount} from 'svelte';
-	import {expenseData} from "../../../stores.js";
+	import {monthExpense} from "../../../stores.js";
 	import {globalStyles} from "../../../styles.js";

 	let ctx;
@@ -10,7 +10,7 @@

 	function groupAndSumByCategory() {
 		const groupedData = new Map();
-		$expenseData.forEach(expense => {
+		$monthExpense.forEach(expense => {
 					const category = expense.expenseCategory.name;
 					if (groupedData.has(category)) {
 						groupedData.set(category, groupedData.get(category) + parseInt(expense.amount));
@@ -26,8 +26,6 @@
 	function createGraph() {
 		try {
 			const groupedExpenseData = groupAndSumByCategory();
-			console.log("============= here start")
-			console.log(groupedExpenseData);

 			const chartLabels = [];
 			const chartValues = [];
@@ -36,32 +34,44 @@
 				chartLabels.push(label);
 				chartValues.push(value);
 			}
-			console.log(chartLabels)
-			console.log(chartValues)
-			console.log("============= here end")
+
 			ctx = chartCanvas.getContext('2d');

 			if (!chart) {
 				chart = new Chart(ctx, {
-					type: 'bar',
+					type: 'doughnut',
 					data: {
 						labels: chartLabels,
 						datasets: [{
 							label: 'Spendings',
-							backgroundColor: [
-								'rgb(107, 80, 107)',
-								'rgb(171, 61, 169)',
-								'rgb(222, 37, 218)',
-								'rgb(235, 68, 232)',
-								'rgb(255, 128, 255)'],
 							data: chartValues
 						}]
 					},
 					options: {
 						responsive: true,
 						maintainAspectRatio: false,
+						backgroundColor: [
+							'rgb(255, 140, 140)',
+							'rgb(140, 180, 255)',
+							'rgb(255, 200, 140)',
+							'rgb(160, 200, 160)',
+							'rgb(160, 130, 200)',
+							'rgb(255, 160, 140)',
+							'rgb(140, 180, 255)',
+							'rgb(160, 255, 160)',
+							'rgb(255, 140, 120)',
+							'rgb(160, 140, 200)',
+							'rgb(255, 220, 140)',
+							'rgb(140, 255, 255)',
+							'rgb(255, 160, 140)',
+							'rgb(160, 255, 160)',
+							'rgb(160, 160, 255)'
+						],
 						plugins: {
 							legend: {
+								position: 'bottom',
+								align: 'start',
+								fullWidth: false,
 								labels: {
 									font: {
 										weight: 'bold'
@@ -83,7 +93,7 @@
 	}

 	$: {
-		if ($expenseData) {
+		if ($monthExpense) {
 			createGraph();
 		}
 	}
@@ -99,16 +109,25 @@

 <style>
 	#chart {
-		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);
-		flex: 1;
-		border-radius: 0 0 10px 10px;
-		margin: 0 0 10px 10px;
 		min-width: 0;
 		min-height:0;
+		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);
+		display: flex;
+		flex: 1 1 auto;
+		flex-grow: 1;
+		padding: 10px;
+		border-radius: 10px;
+		margin: 0 10px 10px;
 	}

 	#chart: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);
+	}
+
+	@media only screen and (max-width: 900px) {
+		#chart {
+			min-height: 400px;
+		}
 	}
 </style>
--- 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
@@ -1,7 +1,7 @@
 <script>
 	import Chart from 'chart.js/auto';
 	import { onMount } from 'svelte';
-	import {monthIncome, monthExpense, isCategorizedExpense, categorizedExpense} from "../../../stores.js";
+	import {monthIncome, monthExpense, isCategorizedExpense, categorizedExpense, expenseCategoryLabel} from "../../../stores.js";
 	import { globalStyles } from "../../../styles.js";

 	let ctx;
@@ -12,19 +12,26 @@

 	function createGraph() {
 		try {
-			// const allDates = [...new Set([...$monthIncome, ...$monthExpense].map(item => item.date))];
-			// const uniqueDates = allDates.sort((a, b) => new Date(a) - new Date(b));
-			//
-			// const incomeValues = uniqueDates.map(date => $monthIncome.filter(item => item.date === date).reduce((total, item) => total + item.amount, 0));
-			// const expenseValues = uniqueDates.map(date => $monthExpense.filter(item => item.date === date).reduce((total, item) => total + item.amount, 0));
-
 			if (chartCanvas.getContext('2d') !== undefined) {
 				ctx = chartCanvas.getContext('2d');
 				if (!chart) {
+					console.log(generatedData);
 					chart = new Chart(ctx, {
 						type: 'line',
 						data: generatedData,
 						options: {
+							scales: {
+								y: {
+									ticks: {
+										color: 'rgb(255,255,255)'
+									}
+								},
+								x: {
+									ticks: {
+										color: 'rgb(255,255,255)'
+									}
+								}
+							},
 							responsive: true,
 							maintainAspectRatio: false
 						}
@@ -34,11 +41,10 @@
 						chart.data.labels = generatedData.labels;
 						chart.data.datasets = generatedData.datasets;
 					} else {
-						generatedData.datasets = generatedData.datasets.filter(dataset => dataset.label !== "Category");
+						generatedData.datasets = generatedData.datasets.filter(dataset => dataset.label !== $expenseCategoryLabel);
 						chart.data.labels = generatedData.labels;
 						chart.data.datasets = generatedData.datasets;
 					}
-
 					chart.update();
 				}
 			}
@@ -59,7 +65,7 @@
 				labels: uniqueDates,
 				datasets: [
 					{
-						label: "Category",
+						label: $expenseCategoryLabel,
 						backgroundColor: "rgba(21, 194, 58, 0.4)",
 						borderColor: "rgba(21, 194, 58, 1)",
 						data: categorizedValues,
@@ -76,6 +82,13 @@
 					}
 				]
 			};
+
+			const tempData = generatedData.datasets.filter(dataset => dataset.label !== undefined);
+
+			generatedData = {
+				labels: generatedData.labels || [],
+				datasets: tempData
+			};
 		} else {
 			const allDates = [...new Set([...$monthExpense].map(item => item.date))];
 			const uniqueDates = allDates.sort((a, b) => new Date(a) - new Date(b));
@@ -94,6 +107,13 @@
 							fill: true
 						}
 			};
+
+			const tempData = generatedData.datasets.filter(dataset => dataset.label !== undefined);
+
+			generatedData = {
+				labels: generatedData.labels || [],
+				datasets: tempData
+			};
 		}

 		if ($monthIncome || $monthExpense || $isCategorizedExpense || $categorizedExpense) {
@@ -118,11 +138,19 @@
 		transition: all 0.3s cubic-bezier(.25, .8, .25, 1);
 		display: flex;
 		flex: 1 1 auto;
-		border-radius: 0 0 10px 10px;
-		margin: 0 0 10px 10px;
+		flex-grow: 2;
+		border-radius: 10px;
+		margin: 0 10px 10px;
+		padding: 10px;
 	}

 	#chart:hover {
 		box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22);
 	}
+
+	@media only screen and (max-width: 900px) {
+		#chart {
+			min-height: 400px;
+		}
+	}
 </style>
--- 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
@@ -10,7 +10,9 @@
        monthIncome,
        monthExpense,
        isCategorizedExpense,
-        categorizedExpense
+        categorizedExpense,
+        expenseCategoryLabel,
+        currencyLabel, copyExpenseData, copyIncomeData, isCategorizedIncome
    } from "../../../stores.js";
    import {globalStyles} from "../../../styles.js";
    import {onMount} from "svelte";
@@ -36,6 +38,9 @@

    let isDateDropdownExpanded = false
    let isCategoryDropdownExpanded = false
+    let isCurrencyDropdownExpanded = false
+    let isFilterDown = false;
+
    let dropdownStates = {};
    let deleteDropdownStates = {}

@@ -48,8 +53,27 @@
        });
    }

+    function clickFilter() {
+        isDateDropdownExpanded = false;
+        isCategoryDropdownExpanded = false;
+        isFilterDown = !isFilterDown;
+        isCurrencyDropdownExpanded = false;
+    }
    function clickHandlerDate() {
        isDateDropdownExpanded = !isDateDropdownExpanded
+        isCategoryDropdownExpanded = false;
+    }
+
+    function clickHandlerCategory() {
+        isCategoryDropdownExpanded = !isCategoryDropdownExpanded;
+        isDateDropdownExpanded = false;
+    }
+
+    function clickHandlerCurrency() {
+        isCurrencyDropdownExpanded = !isCurrencyDropdownExpanded;
+        isCategoryDropdownExpanded = false;
+        isDateDropdownExpanded = false;
+        isFilterDown = false;
    }

    function clickItemHandler(id) {
@@ -62,26 +86,19 @@
        if (dropdownStates[id] === true) dropdownStates[id] = false;
    }

-    function clickHandlerCategory() {
-        isCategoryDropdownExpanded = !isCategoryDropdownExpanded;
-    }
-
    function clickOutsideHandler(event) {
-        const isDateButton = event.target.closest("#btn1");
-        const isCategoryButton = event.target.closest("#btn2");
+        const isDateButton = event.target.closest("#expenseInfo");

        if (!isDateButton) {
-            isDateDropdownExpanded = false;
-        }
-
-        if (!isCategoryButton) {
+            isFilterDown = false;
            isCategoryDropdownExpanded = false;
+            isDateDropdownExpanded = false;
+            isCurrencyDropdownExpanded = false;
        }
    }

    onMount(() => {
        document.body.addEventListener("click", clickOutsideHandler);
-
        return () => {
            document.body.removeEventListener("click", clickOutsideHandler);
        };
@@ -98,6 +115,7 @@
            });
            expenseData.set(response1.data);
            tempExpense.set(response1.data);
+            copyExpenseData.set(response1.data);
            const response2 = await axios.get('https://trackio.online:8081/incomes/personal-incomes?date=' + currentDay, {
                headers: {
                    'Authorization': `Bearer ${getCookie('access_token')}`
@@ -105,10 +123,12 @@
            });
            incomeData.set(response2.data);
            tempIncome.set(response2.data);
+            copyIncomeData.set(response1.data);
            $dateText = "Today"

            $isCategorizedExpense = false;
            categorizedExpense.set([]);
+            changeCurrency($currencyLabel);
        } catch (error) {
            console.error("Error fetching expenses:", error);
        }
@@ -130,6 +150,7 @@
            });
            expenseData.set(response1.data);
            tempExpense.set(response1.data);
+            copyExpenseData.set(response1.data);
            const response2 = await axios.get('https://trackio.online:8081/incomes/personal-incomes?date=' + yesterdayString, {
                headers: {
                    'Authorization': `Bearer ${getCookie('access_token')}`
@@ -137,7 +158,9 @@
            });
            incomeData.set(response2.data);
            tempIncome.set(response2.data);
+            copyIncomeData.set(response2.data);
            $dateText = "Yesterday"
+            changeCurrency($currencyLabel);
        } catch (error) {
            console.error("Error fetching expenses:", error);
        }
@@ -157,6 +180,7 @@
            expenseData.set(response1.data);
            tempExpense.set(response1.data);
            monthExpense.set(response1.data);
+            copyExpenseData.set(response1.data);
            const response2 = await axios.get('https://trackio.online:8081/incomes/personal-incomes?month=' + year, {
                headers: {
                    'Authorization': `Bearer ${getCookie('access_token')}`
@@ -166,10 +190,12 @@
            incomeData.set(response2.data);
            tempIncome.set(response2.data);
            monthIncome.set(response2.data);
+            copyIncomeData.set(response2.data);
            $dateText = "This Month"

            $isCategorizedExpense = false;
            categorizedExpense.set([]);
+            changeCurrency($currencyLabel);
        } catch (error) {
            console.error("Error fetching expenses:", error);
        }
@@ -189,6 +215,7 @@
            expenseData.set(response1.data);
            tempExpense.set(response1.data)
            monthExpense.set(response1.data);
+            copyExpenseData.set(response1.data);
            const response2 = await axios.get('https://trackio.online:8081/incomes/personal-incomes?month=' + year, {
                headers: {
                    'Authorization': `Bearer ${getCookie('access_token')}`
@@ -198,10 +225,12 @@
            incomeData.set(response2.data);
            tempIncome.set(response2.data);
            monthIncome.set(response2.data);
+            copyIncomeData.set(response2.data);
            $dateText = "Last Month"

            $isCategorizedExpense = false;
            categorizedExpense.set([]);
+            changeCurrency($currencyLabel);
        } catch (error) {
            console.error("Error fetching expenses:", error);
        }
@@ -221,6 +250,7 @@
            expenseData.set(response1.data);
            tempExpense.set(response1.data);
            monthExpense.set(response1.data);
+            copyExpenseData.set(response1.data);
            const response2 = await axios.get('https://trackio.online:8081/incomes/personal-incomes?year=' + year, {
                headers: {
                    'Authorization': `Bearer ${getCookie('access_token')}`
@@ -230,10 +260,12 @@
            incomeData.set(response2.data);
            tempIncome.set(response2.data);
            monthIncome.set(response2.data);
+            copyIncomeData.set(response2.data);
            $dateText = "This Year"

            $isCategorizedExpense = false;
            categorizedExpense.set([]);
+            changeCurrency($currencyLabel);
        } catch (error) {
            console.error("Error fetching expenses:", error);
        }
@@ -241,6 +273,7 @@

    function filterByCategory(category) {
        $isCategorizedExpense = true;
+        $expenseCategoryLabel = category;
        console.log($isCategorizedExpense);
        let tempArr = $tempExpense.filter(expense => expense.expenseCategory.name === category);
        categorizedExpense.set(tempArr);
@@ -249,6 +282,7 @@

    function getAll() {
        categorizedExpense.set([]);
+        $expenseCategoryLabel = "Category";
        $isCategorizedExpense = false;
        console.log($isCategorizedExpense);
        expenseData.set($tempExpense);
@@ -258,72 +292,161 @@

    }

+    function changeCurrency(currency) {
+        if (currency === 'USD') {
+            expenseData.set($copyExpenseData);
+            incomeData.set($copyIncomeData);
+            $currencyLabel = "USD";
+        }
+        if (currency === 'MDL') {
+            const tempData1 = $copyExpenseData.map(expense => ({
+                ...expense,
+                amount: expense.amount / 0.056
+            }));
+            expenseData.set(tempData1);
+
+            const tempData2 = $copyIncomeData.map(income => ({
+                ...income,
+                amount: income.amount / 0.056
+            }));
+            incomeData.set(tempData2);
+            $currencyLabel = "MDL";
+        }
+        if (currency === 'EUR') {
+            const tempData1 = $copyExpenseData.map(expense => ({
+                ...expense,
+                amount: expense.amount / 1.08
+            }));
+            expenseData.set(tempData1);
+
+            const tempData2 = $copyIncomeData.map(income => ({
+                ...income,
+                amount: income.amount / 1.08
+            }));
+            incomeData.set(tempData2);
+            $currencyLabel = "EUR";
+        }
+
+        if (currency === 'GBP') {
+            const tempData1 = $copyExpenseData.map(expense => ({
+                ...expense,
+                amount: expense.amount / 1.26
+            }));
+            expenseData.set(tempData1);
+
+            const tempData2 = $copyIncomeData.map(income => ({
+                ...income,
+                amount: income.amount / 1.26
+            }));
+            incomeData.set(tempData2);
+            $currencyLabel = "GBP";
+        }
+    }
 </script>

 <div id="expenseInfo" style="background-color: {$globalStyles.mainColor}">
-    <ContentExpense/>
-    <div style="display: flex; justify-content: space-between">
-        <div id="dropdown-date" style="margin: 10px;">
-            <button id="btn1" class="button" on:click={clickHandlerDate}>Filter by Date ▼</button>
-            {#if isDateDropdownExpanded}
-                <div id="date-list" transition:slide>
-                    <div class="date-entry" on:click={() => getToday()} role="button" tabindex="0"
-                         on:keydown={doNothing}>Today
-                    </div>
-                    <div class="date-entry" on:click={() => getYesterday()} role="button" tabindex="0"
-                         on:keydown={doNothing}>Yesterday
-                    </div>
-                    <div class="date-entry" on:click={() => getMonth()} role="button" tabindex="0"
-                         on:keydown={doNothing}>This month
-                    </div>
-                    <div class="date-entry" on:click={() => getLastMonth()} role="button" tabindex="0"
-                         on:keydown={doNothing}>Last month
-                    </div>
-                    <div class="date-entry" on:click={() => getLastYear()} role="button" tabindex="0"
-                         on:keydown={doNothing}>This year
-                    </div>
-                </div>
-            {/if}
+    <ContentExpense />
+    <div style="display: flex; justify-content: space-around">
+
+        <div id="dropdown" style="margin: 10px; display: flex; justify-content: space-between">
+            <button id="btn1" class="button" on:click={clickFilter}>Filter ▼</button>
        </div>

-        <div id="dropdown-category" style="margin: 10px;">
-            <button id="btn2" class="button" on:click={clickHandlerCategory}>Filter by Category ▼</button>
-            {#if isCategoryDropdownExpanded}
-                <div id="date-list" transition:slide>
-                    <div class="date-entry" on:click={() => getAll()} role="button"
-                         tabindex="0" on:keydown={doNothing}>All</div>
-                    {#each $expenseTypes as expense (expense.id)}
-                        {#if expense.id !== undefined}
-                            <div class="date-entry" on:click={() => filterByCategory(expense.name)} role="button"
-                                 tabindex="0" on:keydown={doNothing}>{expense.name}</div>
-                        {/if}
-                    {/each}
-                </div>
-            {/if}
+        <div id="dropdown-currency" style="margin: 10px;">
+            <button id="btn2" class="button" on:click={clickHandlerCurrency}>Currency ▼</button>
        </div>
    </div>
+
+    <div>
+        {#if isFilterDown}
+            <div style="margin: 10px; display: flex; justify-content: space-between" transition:slide>
+                <div id="dropdown-date" style="margin: 10px;">
+                    <button id="btn3" class="button" on:click={clickHandlerDate}>Filter by Date ▼</button></div>
+
+                <div id="dropdown-category" style="margin: 10px;">
+                    <button id="btn4" class="button" on:click={clickHandlerCategory}>Filter by Category ▼</button>
+                </div>
+            </div>
+        {/if}
+
+        {#if isDateDropdownExpanded}
+            <div id="date-list" transition:slide>
+                <div class="date-entry" on:click={() => getToday()} role="button" tabindex="0"
+                     on:keydown={doNothing}>Today
+                </div>
+                <div class="date-entry" on:click={() => getYesterday()} role="button" tabindex="0"
+                     on:keydown={doNothing}>Yesterday
+                </div>
+                <div class="date-entry" on:click={() => getMonth()} role="button" tabindex="0"
+                     on:keydown={doNothing}>This month
+                </div>
+                <div class="date-entry" on:click={() => getLastMonth()} role="button" tabindex="0"
+                     on:keydown={doNothing}>Last month
+                </div>
+                <div class="date-entry" on:click={() => getLastYear()} role="button" tabindex="0"
+                     on:keydown={doNothing}>This year
+                </div>
+            </div>
+        {/if}
+
+        {#if isCategoryDropdownExpanded}
+            <div id="date-list" transition:slide>
+                <div class="date-entry" on:click={() => getAll()} role="button"
+                     tabindex="0" on:keydown={doNothing}>All</div>
+                {#each $expenseTypes as expense (expense.id)}
+                    {#if expense.id !== undefined}
+                        <div class="date-entry" on:click={() => filterByCategory(expense.name)} role="button"
+                             tabindex="0" on:keydown={doNothing}>{expense.name}</div>
+                    {/if}
+                {/each}
+            </div>
+        {/if}
+
+        {#if isCurrencyDropdownExpanded}
+            <div id="date-list" transition:slide>
+                <div class="date-entry" on:click={() => changeCurrency("MDL")} role="button"
+                     tabindex="0" on:keydown={doNothing}>MDL Leu</div>
+                <div class="date-entry" on:click={() => changeCurrency("GBP")} role="button"
+                     tabindex="0" on:keydown={doNothing}>GBP Pound</div>
+                <div class="date-entry" on:click={() => changeCurrency("USD")} role="button"
+                     tabindex="0" on:keydown={doNothing}>USD Dollar</div>
+                <div class="date-entry" on:click={() => changeCurrency("EUR")} role="button"
+                     tabindex="0" on:keydown={doNothing}>EUR Euro</div>
+            </div>
+        {/if}
+    </div>
    <div id="listContainer" style="color: {$globalStyles.color}">
        <ul>
            {#each $expenseData.toReversed() as item (item.expenseId)}
                <li style="display:flex; flex-direction: column; justify-content: space-between; color: {$globalStyles.color}">
                    <div style="display:flex; flex-direction: row; justify-content: space-between; align-items: center;">
-                    <span>
+                    <div>
                        {#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="font-weight:bold; margin-right: 10px; color: red; font-size: larger">{item.incomeCategory ? `+${item.amount}$` : `-${item.amount}$`}</span>
-                    </span>
-                        <span style="margin-right: 5px;">{`${item.date}`}
-                            <span id="editBtn" role="button" tabindex="0" on:keydown={doNothing}
-                                  on:click={() => clickItemHandler(item.expenseId)}><svg
-                                    xmlns="http://www.w3.org/2000/svg" height="16" width="16" viewBox="0 0 512 512"><path
-                                    d="M471.6 21.7c-21.9-21.9-57.3-21.9-79.2 0L362.3 51.7l97.9 97.9 30.1-30.1c21.9-21.9 21.9-57.3 0-79.2L471.6 21.7zm-299.2 220c-6.1 6.1-10.8 13.6-13.5 21.9l-29.6 88.8c-2.9 8.6-.6 18.1 5.8 24.6s15.9 8.7 24.6 5.8l88.8-29.6c8.2-2.7 15.7-7.4 21.9-13.5L437.7 172.3 339.7 74.3 172.4 241.7zM96 64C43 64 0 107 0 160V416c0 53 43 96 96 96H352c53 0 96-43 96-96V320c0-17.7-14.3-32-32-32s-32 14.3-32 32v96c0 17.7-14.3 32-32 32H96c-17.7 0-32-14.3-32-32V160c0-17.7 14.3-32 32-32h96c17.7 0 32-14.3 32-32s-14.3-32-32-32H96z"/></svg></span>
-                        <span id="deleteBtn" role="button" tabindex="0" on:keydown={doNothing}
-                              on:click={() => clickDeleteHandler(item.expenseId)}><svg
-                                xmlns="http://www.w3.org/2000/svg" height="16" width="14" viewBox="0 0 448 512"><path
-                                d="M135.2 17.7L128 32H32C14.3 32 0 46.3 0 64S14.3 96 32 96H416c17.7 0 32-14.3 32-32s-14.3-32-32-32H320l-7.2-14.3C307.4 6.8 296.3 0 284.2 0H163.8c-12.1 0-23.2 6.8-28.6 17.7zM416 128H32L53.2 467c1.6 25.3 22.6 45 47.9 45H346.9c25.3 0 46.3-19.7 47.9-45L416 128z"/></svg></span>
-                    </span>
+                    <span style="font-weight:bold; margin-right: 10px; color: red; font-size: larger">{item.incomeCategory ? `+${item.amount.toFixed(2)} ${$currencyLabel}` : `-${item.amount.toFixed(2)} ${$currencyLabel}`}</span>
+                    </div>
+                        <div style="margin-right: 5px; display: flex; flex-direction: row">
+
+                            <div>
+                                {`${item.date}`}
+                            </div>
+
+                            <div id="editBtnDiv" role="button" tabindex="0" on:keydown={doNothing}
+                                 on:click={() => clickItemHandler(item.expenseId)}>
+                                <span id="editBtn"><svg
+                                        xmlns="http://www.w3.org/2000/svg" height="16" width="16" viewBox="0 0 512 512"><path
+                                        d="M471.6 21.7c-21.9-21.9-57.3-21.9-79.2 0L362.3 51.7l97.9 97.9 30.1-30.1c21.9-21.9 21.9-57.3 0-79.2L471.6 21.7zm-299.2 220c-6.1 6.1-10.8 13.6-13.5 21.9l-29.6 88.8c-2.9 8.6-.6 18.1 5.8 24.6s15.9 8.7 24.6 5.8l88.8-29.6c8.2-2.7 15.7-7.4 21.9-13.5L437.7 172.3 339.7 74.3 172.4 241.7zM96 64C43 64 0 107 0 160V416c0 53 43 96 96 96H352c53 0 96-43 96-96V320c0-17.7-14.3-32-32-32s-32 14.3-32 32v96c0 17.7-14.3 32-32 32H96c-17.7 0-32-14.3-32-32V160c0-17.7 14.3-32 32-32h96c17.7 0 32-14.3 32-32s-14.3-32-32-32H96z"/></svg></span>
+                            </div>
+
+                            <div id="deleteBtnDiv" role="button" tabindex="0" on:keydown={doNothing}
+                                 on:click={() => clickDeleteHandler(item.expenseId)}>
+                                <span id="deleteBtn"><svg
+                                        xmlns="http://www.w3.org/2000/svg" height="16" width="14" viewBox="0 0 448 512"><path
+                                        d="M135.2 17.7L128 32H32C14.3 32 0 46.3 0 64S14.3 96 32 96H416c17.7 0 32-14.3 32-32s-14.3-32-32-32H320l-7.2-14.3C307.4 6.8 296.3 0 284.2 0H163.8c-12.1 0-23.2 6.8-28.6 17.7zM416 128H32L53.2 467c1.6 25.3 22.6 45 47.9 45H346.9c25.3 0 46.3-19.7 47.9-45L416 128z"/></svg></span>
+                            </div>
+                            </div>
                    </div>

                    {#if dropdownStates[item.expenseId]}
@@ -351,6 +474,7 @@
 </div>

 <style>
+
    #textf {
        font-family: "Inter UI", "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
        font-size: 20px;
@@ -422,7 +546,7 @@
    }

    #editBtn {
-        margin-left: 5px;
+        margin-left: 10px;
        margin-right: 5px;
        fill: darkblue;
    }
@@ -440,6 +564,7 @@

    #deleteBtn {
        fill: red;
+        margin-left: 5px;
    }

    #deleteBtn:hover {
@@ -550,12 +675,10 @@

    #date-list {
        background-color: black;
-        position: absolute;
-        margin-top: 20px;
+        margin: 0 20px 20px;
        max-height: 400px;
        overflow-y: scroll;
        border-radius: 20px;
-        z-index: 1;
    }

    .date-entry {
--- a/src/main/java/com/faf223/expensetrackerfaf/web/src/routes/dashboard/board/expenses/other/DashHeader.svelte
+++ b/src/main/java/com/faf223/expensetrackerfaf/web/src/routes/dashboard/board/expenses/other/DashHeader.svelte
@@ -4,17 +4,16 @@ import {globalStyles} from "../../../styles.js";
 </script>

 <div id="header">
-    <div id="dashboardTitleWrapper" style="color: {$globalStyles.dashTextColor}">
-        <h5>Hello, welcome to your</h5>
-        <h1 id="dashboardTitle">Dashboard</h1>
+    <div id="dashboardTitleWrapper" style="color: white">
+        <h1 id="dashboardTitle">Dashboard - Expenses</h1>
    </div>

    <div id="icons">
        <div class="headerbtn searchButton">
-            <svg style="fill: {$globalStyles.dashTextColor}" xmlns="http://www.w3.org/2000/svg" height="1.3em" viewBox="0 0 512 512"><path d="M416 208c0 45.9-14.9 88.3-40 122.7L502.6 457.4c12.5 12.5 12.5 32.8 0 45.3s-32.8 12.5-45.3 0L330.7 376c-34.4 25.2-76.8 40-122.7 40C93.1 416 0 322.9 0 208S93.1 0 208 0S416 93.1 416 208zM208 352a144 144 0 1 0 0-288 144 144 0 1 0 0 288z"/></svg>
+            <svg style="fill: white" xmlns="http://www.w3.org/2000/svg" height="1.3em" viewBox="0 0 512 512"><path d="M416 208c0 45.9-14.9 88.3-40 122.7L502.6 457.4c12.5 12.5 12.5 32.8 0 45.3s-32.8 12.5-45.3 0L330.7 376c-34.4 25.2-76.8 40-122.7 40C93.1 416 0 322.9 0 208S93.1 0 208 0S416 93.1 416 208zM208 352a144 144 0 1 0 0-288 144 144 0 1 0 0 288z"/></svg>
        </div>
        <div class="headerbtn notificationButton">
-            <svg style="fill: {$globalStyles.dashTextColor}" xmlns="http://www.w3.org/2000/svg" height="1.3em" viewBox="0 0 448 512"><path d="M224 0c-17.7 0-32 14.3-32 32V49.9C119.5 61.4 64 124.2 64 200v33.4c0 45.4-15.5 89.5-43.8 124.9L5.3 377c-5.8 7.2-6.9 17.1-2.9 25.4S14.8 416 24 416H424c9.2 0 17.6-5.3 21.6-13.6s2.9-18.2-2.9-25.4l-14.9-18.6C399.5 322.9 384 278.8 384 233.4V200c0-75.8-55.5-138.6-128-150.1V32c0-17.7-14.3-32-32-32zm0 96h8c57.4 0 104 46.6 104 104v33.4c0 47.9 13.9 94.6 39.7 134.6H72.3C98.1 328 112 281.3 112 233.4V200c0-57.4 46.6-104 104-104h8zm64 352H224 160c0 17 6.7 33.3 18.7 45.3s28.3 18.7 45.3 18.7s33.3-6.7 45.3-18.7s18.7-28.3 18.7-45.3z"/></svg>
+            <svg style="fill: white" xmlns="http://www.w3.org/2000/svg" height="1.3em" viewBox="0 0 448 512"><path d="M224 0c-17.7 0-32 14.3-32 32V49.9C119.5 61.4 64 124.2 64 200v33.4c0 45.4-15.5 89.5-43.8 124.9L5.3 377c-5.8 7.2-6.9 17.1-2.9 25.4S14.8 416 24 416H424c9.2 0 17.6-5.3 21.6-13.6s2.9-18.2-2.9-25.4l-14.9-18.6C399.5 322.9 384 278.8 384 233.4V200c0-75.8-55.5-138.6-128-150.1V32c0-17.7-14.3-32-32-32zm0 96h8c57.4 0 104 46.6 104 104v33.4c0 47.9 13.9 94.6 39.7 134.6H72.3C98.1 328 112 281.3 112 233.4V200c0-57.4 46.6-104 104-104h8zm64 352H224 160c0 17 6.7 33.3 18.7 45.3s28.3 18.7 45.3 18.7s33.3-6.7 45.3-18.7s18.7-28.3 18.7-45.3z"/></svg>
        </div>
    </div>
 </div>
@@ -33,10 +32,6 @@ import {globalStyles} from "../../../styles.js";
        margin: 20px 20px 0;
    }

-    #dashboardTitleWrapper h5 {
-        margin: 0;
-    }
-
    #dashboardTitleWrapper h1 {
        margin-top: 0;
    }
--- 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
@@ -1,36 +1,52 @@
 <script>
    import { onMount } from 'svelte';
-    import { incomeData, expenseData } from "../../../stores.js";
+    import { incomeData, expenseData, currencyLabel } from "../../../stores.js";
    import {globalStyles} from "../../../styles.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
+    let lastMonthIncome = 800;
+    let lastMonthExpense = 200;
+    let incomeDifference;
+    let expenseDifference;

    function updateInfo() {
        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.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: 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");
-        }
+        incomeDifference = ((totalIncomes - lastMonthIncome) / lastMonthIncome) * 100;
+        expenseDifference = ((lastMonthExpense - totalExpenses) / lastMonthExpense) * 100;
    }

    $: {
+        if ($currencyLabel) {
+            if ($currencyLabel === 'USD') {
+                lastMonthIncome = 800;
+                lastMonthExpense = 200;
+            }
+
+            if ($currencyLabel === 'MDL') {
+                lastMonthIncome = 800 / 0.056;
+                lastMonthExpense = 200 / 0.056;
+            }
+
+            if ($currencyLabel === 'EUR') {
+                lastMonthIncome = 800 / 1.08;
+                lastMonthExpense = 200 / 1.08;
+            }
+
+            if ($currencyLabel === 'GBP') {
+                lastMonthIncome = 800 / 1.26;
+                lastMonthExpense = 200 / 1.26;
+            }
+        }
+
        if ($incomeData || $expenseData) {
            updateInfo();
        }
+
+
    }

    onMount(() => {
@@ -39,26 +55,75 @@
 </script>

 <div id="quickInfobar">
-    <div class="infobarElement" bind:this={infobar1} style="background-color: {$globalStyles.mainColor}"></div>
-    <div class="infobarElement" bind:this={infobar2} style="background-color: {$globalStyles.mainColor}"></div>
-    <div class="infobarElement" bind:this={infobar3} style="background-color: {$globalStyles.mainColor}"></div>
-    <div class="infobarElement" bind:this={infobar4} style="background-color: {$globalStyles.mainColor}"></div>
+    <div class="firstTwo">
+        <div class="infobarElement" bind:this={infobar1} style="background-color: {$globalStyles.mainColor}">
+            <span class="infobarSpan">Total expenses:</span><br><span class="dataSpan" style="color:#ab1a3c">{totalExpenses.toFixed(2)} {$currencyLabel}</span>
+        </div>
+        <div class="infobarElement" bind:this={infobar2} style="background-color: {$globalStyles.mainColor}">
+            <span class="infobarSpan">Total incomes:</span><br><span class="dataSpan" style="color:#38cc1b">{totalIncomes.toFixed(2)} {$currencyLabel}</span>
+        </div>
+    </div>
+
+    <div class="secondTwo">
+        <div class="infobarElement" bind:this={infobar3} style="background-color: {$globalStyles.mainColor}">
+            <span class="infobarSpan">Income by last month:</span><br><span class="dataSpan" style="color:#2763db">{incomeDifference.toFixed(2)}%</span>
+        </div>
+        <div class="infobarElement" bind:this={infobar4} style="background-color: {$globalStyles.mainColor}">
+            <span class="infobarSpan">Expense by last month:</span><br><span class="dataSpan" style="color:#dba527">{expenseDifference.toFixed(2)}%</span>
+        </div>
+    </div>
+
 </div>

 <style>
-    #quickInfobar {
+
+    .firstTwo {
        display: flex;
-        justify-content: space-between;
        flex-wrap: wrap;
+        justify-content: space-between;
+    }
+
+    .secondTwo {
+        display: flex;
+        flex-wrap: wrap;
+        justify-content: space-between;
+    }
+
+    .infobarSpan {
+        font-size: larger;
+        color: #00FEFC
+    }
+
+    .dataSpan {
+        color:#ab1a3c;
+        font-size: xxx-large;
+    }
+
+    #quickInfobar {
+        /*display: flex;*/
+        /*justify-content: space-between;*/
+        /*flex-wrap: wrap;*/
        min-height: 0;
        flex: 1 1 auto;
        margin: 20px;
    }

+    @media only screen and (min-width: 768px) and (max-width: 1200px) {
+        .infobarSpan {
+            font-size: medium;
+        }
+
+        .dataSpan {
+            font-size: large;
+        }
+    }
+
    .infobarElement {
+        font-family: Inconsolata,"Source Sans Pro",sans-serif;
+        font-size: larger;
        margin: 10px;
-        min-width: 0px;
-        min-height: 0px;
+        min-width: 0;
+        min-height: 0;
        flex: 1 1 auto;
        color: white;
        padding: 10px;
--- 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
@@ -1,116 +0,0 @@
-<script>
-	import Chart from 'chart.js/auto';
-	import { onMount } from 'svelte';
-	import { incomeData } from "../../../stores.js";
-	import {globalStyles} from "../../../styles.js";
-
-	let componentStyles;
-
-	$: {
-		console.log("got here")
-		componentStyles = $globalStyles;
-	}
-
-	let ctx;
-	let chartCanvas;
-	let chart = null;
-
-	function groupAndSumByCategory() {
-		const groupedData = new Map();
-		$incomeData.forEach(income => {
-					const category = income.incomeCategory.name;
-					if (groupedData.has(category)) {
-						groupedData.set(category, groupedData.get(category) + parseInt(income.amount));
-					} else {
-						groupedData.set(category, income.amount);
-					}
-				}
-		);
-
-		return new Map([...groupedData.entries()].sort());;
-	}
-
-	function createGraph() {
-		try {
-			const groupedIncomeData = groupAndSumByCategory();
-
-			const chartLabels = Array.from(groupedIncomeData.keys());
-			const chartValues = Array.from(groupedIncomeData.values());
-
-			ctx = chartCanvas.getContext('2d');
-
-			if (!chart) {
-				chart = new Chart(ctx, {
-					type: 'bar',
-					data: {
-						labels: chartLabels,
-						datasets: [{
-							label: 'Revenue',
-							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
-						}]
-					},
-					options: {
-						responsive: true,
-						maintainAspectRatio: false,
-						plugins: {
-							legend: {
-								labels: {
-									font: {
-										weight: 'bold'
-									},
-									color: '#fff'
-								}
-							}
-						}
-					}
-				});
-			} else {
-				chart.data.labels = chartLabels;
-				chart.data.datasets[0].data = chartValues;
-				chart.update();
-			}
-		} catch (error) {
-			console.error('Error:', error);
-		}
-	}
-
-	$: {
-		if ($incomeData) {
-			createGraph();
-		}
-	}
-
-	onMount(() => {
-		createGraph();
-	});
-</script>
-
-<div id="chart" style="background-color: {componentStyles.mainColor}">
-	<canvas bind:this={chartCanvas}></canvas>
-</div>
-
-<style>
-	#chart {
-		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);
-		flex: 1;
-		border-radius: 0 0 10px 10px;
-		margin: 0 0 10px 10px;
-		min-width: 0;
-		min-height:0;
-	}
-
-	#chart:hover {
-		box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
-	}
-</style>
--- a/src/main/java/com/faf223/expensetrackerfaf/web/src/routes/dashboard/board/incomes/graphs/Graph2.svelte
+++ b/src/main/java/com/faf223/expensetrackerfaf/web/src/routes/dashboard/board/incomes/graphs/Graph2.svelte
@@ -0,0 +1,133 @@
+<script>
+	import Chart from 'chart.js/auto';
+	import {onMount} from 'svelte';
+	import {monthIncome} from "../../../stores.js";
+	import {globalStyles} from "../../../styles.js";
+
+	let ctx;
+	let chartCanvas;
+	let chart = null;
+
+	function groupAndSumByCategory() {
+		const groupedData = new Map();
+		$monthIncome.forEach(income => {
+					const category = income.incomeCategory.name;
+					if (groupedData.has(category)) {
+						groupedData.set(category, groupedData.get(category) + parseInt(income.amount));
+					} else {
+						groupedData.set(category, parseInt(income.amount));
+					}
+				}
+		);
+
+		return new Map([...groupedData.entries()].sort());
+	}
+
+	function createGraph() {
+		try {
+			const groupedIncomeData = groupAndSumByCategory();
+
+			const chartLabels = [];
+			const chartValues = [];
+
+			for (const [label, value] of groupedIncomeData.entries()) {
+				chartLabels.push(label);
+				chartValues.push(value);
+			}
+
+			ctx = chartCanvas.getContext('2d');
+
+			if (!chart) {
+				chart = new Chart(ctx, {
+					type: 'doughnut',
+					data: {
+						labels: chartLabels,
+						datasets: [{
+							label: 'Incomes',
+							data: chartValues
+						}]
+					},
+					options: {
+						responsive: true,
+						maintainAspectRatio: false,
+						backgroundColor: [
+							'rgb(255, 140, 140)',
+							'rgb(140, 180, 255)',
+							'rgb(255, 200, 140)',
+							'rgb(160, 200, 160)',
+							'rgb(160, 130, 200)',
+							'rgb(255, 160, 140)',
+							'rgb(140, 180, 255)',
+							'rgb(160, 255, 160)',
+							'rgb(255, 140, 120)',
+							'rgb(160, 140, 200)',
+							'rgb(255, 220, 140)',
+							'rgb(140, 255, 255)',
+							'rgb(255, 160, 140)',
+							'rgb(160, 255, 160)',
+							'rgb(160, 160, 255)'
+						],
+						plugins: {
+							legend: {
+								position: 'bottom',
+								align: 'start',
+								fullWidth: false,
+								labels: {
+									font: {
+										weight: 'bold'
+									},
+									color: '#fff'
+								}
+							}
+						}
+					}
+				});
+			} else {
+				chart.data.labels = chartLabels;
+				chart.data.datasets[0].data = chartValues;
+				chart.update();
+			}
+		} catch (error) {
+			console.error('Error:', error);
+		}
+	}
+
+	$: {
+		if ($monthIncome) {
+			createGraph();
+		}
+	}
+
+	onMount(() => {
+		createGraph();
+	});
+</script>
+
+<div id="chart" style="background-color: {$globalStyles.mainColor}">
+	<canvas bind:this={chartCanvas}></canvas>
+</div>
+
+<style>
+	#chart {
+		min-width: 0;
+		min-height:0;
+		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);
+		display: flex;
+		flex: 1 1 auto;
+		flex-grow: 1;
+		padding: 10px;
+		border-radius: 10px;
+		margin: 0 10px 10px;
+	}
+
+	#chart:hover {
+		box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22);
+	}
+
+	@media only screen and (max-width: 900px) {
+		#chart {
+			min-height: 400px;
+		}
+	}
+</style>
--- 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
@@ -1,66 +1,49 @@
 <script>
 	import Chart from 'chart.js/auto';
 	import { onMount } from 'svelte';
-	import { incomeData, expenseData } from "../../../stores.js";
-	import {globalStyles} from "../../../styles.js";
-
-	let componentStyles;
-
-	$: {
-		console.log("got here")
-		componentStyles = $globalStyles;
-	}
+	import {monthIncome, monthExpense, isCategorizedIncome, categorizedIncome, incomeCategoryLabel} from "../../../stores.js";
+	import { globalStyles } from "../../../styles.js";

 	let ctx;
 	let chartCanvas;
 	let chart = null;

+	let generatedData;
+
 	function createGraph() {
 		try {
-			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];
-
 			if (chartCanvas.getContext('2d') !== undefined) {
 				ctx = chartCanvas.getContext('2d');
 				if (!chart) {
 					chart = new Chart(ctx, {
-						type: 'pie',
-						data: {
-							labels: chartLabels,
-							datasets: [{
-								data: chartValues,
-								backgroundColor: [
-									'rgb(243, 188, 0)',
-									'rgb(0, 117, 164)'
-								],
-							}]
-						},
+						type: 'line',
+						data: generatedData,
 						options: {
-							responsive: true,
-							maintainAspectRatio: false,
-							plugins: {
-								legend: {
-									labels: {
-										font: {
-											weight: 'bold'
-										},
-										color: '#fff'
+							scales: {
+								y: {
+									ticks: {
+										color: 'rgb(255,255,255)'
+									}
+								},
+								x: {
+									ticks: {
+										color: 'rgb(255,255,255)'
 									}
 								}
-							}
+							},
+							responsive: true,
+							maintainAspectRatio: false
 						}
 					});
 				} 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;
+					if ($isCategorizedIncome === true) {
+						chart.data.labels = generatedData.labels;
+						chart.data.datasets = generatedData.datasets;
+					} else {
+						generatedData.datasets = generatedData.datasets.filter(dataset => dataset.label !== $incomeCategoryLabel);
+						chart.data.labels = generatedData.labels;
+						chart.data.datasets = generatedData.datasets;
+					}
 					chart.update();
 				}
 			}
@@ -70,7 +53,68 @@
 	}

 	$: {
-		if ($incomeData || $expenseData) {
+		if (isCategorizedIncome) {
+			const allDates = [...new Set([...$monthIncome, ...$categorizedIncome].map(item => item.date))];
+			const uniqueDates = allDates.sort((a, b) => new Date(a) - new Date(b));
+
+			const categorizedValues = uniqueDates.map(date => $categorizedIncome.filter(item => item.date === date).reduce((total, item) => total + item.amount, 0));
+			const incomeValues = uniqueDates.map(date => $monthIncome.filter(item => item.date === date).reduce((total, item) => total + item.amount, 0));
+
+			generatedData = {
+				labels: uniqueDates,
+				datasets: [
+					{
+						label: $incomeCategoryLabel,
+						backgroundColor: "rgba(21, 194, 58, 0.4)",
+						borderColor: "rgba(21, 194, 58, 1)",
+						data: categorizedValues,
+						tension: 0.2,
+						fill: true
+					},
+					{
+						label: "Revenue",
+						backgroundColor: "rgba(194, 21, 96, 0.4)",
+						borderColor: "rgba(194, 21, 96, 1)",
+						data: incomeValues,
+						tension: 0.4,
+						fill: true
+					}
+				]
+			};
+			const tempData = generatedData.datasets.filter(dataset => dataset.label !== undefined);
+
+			generatedData = {
+				labels: generatedData.labels || [],
+				datasets: tempData
+			};
+		} else {
+			const allDates = [...new Set([...$monthIncome].map(item => item.date))];
+			const uniqueDates = allDates.sort((a, b) => new Date(a) - new Date(b));
+
+			const incomeValues = uniqueDates.map(date => $monthIncome.filter(item => item.date === date).reduce((total, item) => total + item.amount, 0));
+
+			generatedData = {
+				labels: uniqueDates,
+				datasets:
+						{
+							label: "Income",
+							backgroundColor: "rgba(194, 21, 96, 0.4)",
+							borderColor: "rgba(194, 21, 96, 1)",
+							data: incomeValues,
+							tension: 0.4,
+							fill: true
+						}
+			};
+
+			const tempData = generatedData.datasets.filter(dataset => dataset.label !== undefined);
+
+			generatedData = {
+				labels: generatedData.labels || [],
+				datasets: tempData
+			};
+		}
+
+		if ($monthIncome || $monthExpense || $isCategorizedIncome || $categorizedIncome) {
 			createGraph();
 		}
 	}
@@ -80,22 +124,31 @@
 	});
 </script>

-<div id="chart" style="background-color: {componentStyles.mainColor}">
-	<canvas bind:this={chartCanvas}></canvas>
+<div id="chart" style="background-color: {$globalStyles.mainColor}">
+	<canvas id="canvas" bind:this={chartCanvas}></canvas>
 </div>

 <style>
 	#chart {
-		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);
-		flex: 1;
-		border-radius: 0 0 10px 10px;
-		margin: 0 0 10px 10px;
 		min-width: 0;
 		min-height:0;
+		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);
+		display: flex;
+		flex: 1 1 auto;
+		flex-grow: 2;
+		border-radius: 10px;
+		margin: 0 10px 10px;
+		padding: 10px;
 	}

 	#chart: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);
+	}
+
+	@media only screen and (max-width: 900px) {
+		#chart {
+			min-height: 400px;
+		}
 	}
 </style>
--- 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
@@ -1,30 +1,23 @@
 <script>
-    import Modal from './Modal.svelte';
    import { writable } from 'svelte/store';
    import axios from 'axios';
    import { getCookie } from "svelte-cookie";
-    import {incomeData, incomeTypes} from "../../../stores.js";
+    import {incomeTypes, incomeData, dateText} from "../../../stores.js";
+    import { slide } from 'svelte/transition';

-    let showModal;
+    let showModal = false;
    let amount = '';
    let newData;

    const selectedIncomeId = writable('');

-    function addNewIncome(id, amount) {
+    function addNewIncome(expid, id, amount) {
        const today = new Date().toISOString().split('T')[0];
        const incomeCategory = $incomeTypes.find(incomeType => incomeType.id === id);

-        console.log(amount);
-
        if (incomeCategory) {
            const newIncome = {
-                incomeId: 0,
-                userDTO: {
-                    name: "Dummy",
-                    surname: "User",
-                    username: "dummyuser"
-                },
+                incomeId: expid,
                incomeCategory: incomeCategory,
                date: today,
                amount: parseInt(amount)
@@ -34,19 +27,18 @@
            newData.push(newIncome);
            $incomeData = newData;
        } else {
-            console.error('Income category not found for id:', id);
+            console.error('Expense category not found for id:', id);
        }
    }

    const createIncome = async () => {
+        showModal = false;
        const selectedIncome = $incomeTypes.find(income => income.id === $selectedIncomeId);
        const data = {
            incomeCategory: selectedIncome.id,
            amount: parseInt(amount),
        };

-        addNewIncome(selectedIncome.id, parseInt(amount));
-
        try {
            const token = getCookie('access_token');

@@ -58,7 +50,7 @@
            });

            if (response.status === 201) {
-                //console.log("cool");
+                addNewIncome(response.data.incomeId, selectedIncome.id, parseInt(amount));
            } else {
                console.error('Error:', response.status);
            }
@@ -66,17 +58,21 @@
            console.error('Error:', error);
        }
    };
+
+    function toggleModal() {
+        showModal = !showModal;
+    }
 </script>

-<div id="inc">
+<div id="exp">
    <div id="optionField">
-        <h2>Incomes</h2>
-        <div id="openModal" class="plus-button" role="button" tabindex="0" on:click={() => (showModal = true)} on:keydown={() => console.log("keydown")}>
+        <h2>Incomes: {$dateText}</h2>
+        <div id="openModal" class="plus-button" role="button" tabindex="0" on:click={toggleModal} on:keydown={() => console.log("keydown")}>
            +
        </div>
    </div>
-    <Modal bind:showModal>
-        <div class="income-form">
+        {#if showModal}
+        <div class="income-form" transition:slide>
            <h3>Income Details</h3>
            <div class="form-group">
                <label for="amount">Amount:</label>
@@ -94,18 +90,48 @@
                </select>
            </div>

-            <button class="btn btn-primary" on:click={createIncome}>Submit</button>
+            <div style="display: flex; justify-content: space-around">
+                <button class="btn btn-primary" on:click={createIncome}>SUBMIT</button>
+                <button class="btn btn-primary" on:click={() => showModal = false}>CANCEL</button>
+            </div>
+
        </div>
-    </Modal>
+    {/if}
 </div>


 <style>
-    #inc {
+    #exp {
        padding: 10px 20px;
        text-align: center;
    }

+    button {
+        background-image: linear-gradient(92.88deg, #455EB5 9.16%, #5643CC 43.89%, #673FD7 64.72%);
+        border-radius: 8px;
+        border-style: none;
+        box-sizing: border-box;
+        color: #FFFFFF;
+        cursor: pointer;
+        flex-shrink: 0;
+        font-family: "Inter UI", "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
+        font-size: 16px;
+        font-weight: 500;
+        height: 3rem;
+        padding: 0 1.6rem;
+        text-align: center;
+        text-shadow: rgba(0, 0, 0, 0.25) 0 3px 8px;
+        transition: all .5s;
+        user-select: none;
+        -webkit-user-select: none;
+        touch-action: manipulation;
+    }
+
+    button:hover {
+        box-shadow: rgba(80, 63, 205, 0.5) 0 1px 30px;
+        transition-duration: .1s;
+    }
+
    #optionField {
        display: flex;
        align-items: center;
@@ -130,10 +156,29 @@

    .income-form {
        background-color: #fff;
-        border-radius: 5px;
+        border-radius: 20px;
        padding: 20px;
        max-width: 400px;
-        margin: 0 auto;
+        color: black;
+    }
+
+    input[type=text] {
+        padding: 12px 20px;
+        margin: 8px 0;
+        display: inline-block;
+        border: 1px solid #ccc;
+        border-radius: 4px;
+        box-sizing: border-box;
+    }
+
+    select {
+        padding: 12px 20px;
+        margin: 8px 0;
+        display: inline-block;
+        border: 1px solid #ccc;
+        border-radius: 4px;
+        box-sizing: border-box;
+        font-size: 16px;
    }

    h3 {
--- 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
@@ -1,7 +1,23 @@
 <script>
    import ContentIncome from "./ContentIncome.svelte";
-    import { incomeData } from "../../../stores.js";
-    import { globalStyles } from "../../../styles.js";
+    import {
+        dateText,
+        expenseData,
+        incomeData,
+        tempExpense,
+        tempIncome,
+        monthIncome,
+        monthExpense,
+        isCategorizedExpense,
+        categorizedExpense,
+        currencyLabel, copyExpenseData, copyIncomeData, incomeCategoryLabel, categorizedIncome, isCategorizedIncome, incomeTypes
+    } from "../../../stores.js";
+    import {globalStyles} from "../../../styles.js";
+    import {onMount} from "svelte";
+    import axios from "axios";
+    import {getCookie} from "svelte-cookie";
+    import {slide} from 'svelte/transition'
+    import EditEntry from "../util/EditEntry.svelte";

    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>",
@@ -13,22 +29,442 @@
        '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>"
    };
+
+    let isDateDropdownExpanded = false
+    let isCategoryDropdownExpanded = false
+    let isCurrencyDropdownExpanded = false
+    let isFilterDown = false;
+
+    let dropdownStates = {};
+    let deleteDropdownStates = {}
+
+    $: {
+        dropdownStates = {};
+        deleteDropdownStates = {};
+        $incomeData.toReversed().forEach(data => {
+            dropdownStates[data.incomeId] = false;
+            deleteDropdownStates[data.incomeId] = false;
+        });
+    }
+
+    function clickFilter() {
+        isDateDropdownExpanded = false;
+        isCategoryDropdownExpanded = false;
+        isFilterDown = !isFilterDown;
+        isCurrencyDropdownExpanded = false;
+    }
+    function clickHandlerDate() {
+        isDateDropdownExpanded = !isDateDropdownExpanded
+        isCategoryDropdownExpanded = false;
+    }
+
+    function clickHandlerCategory() {
+        isCategoryDropdownExpanded = !isCategoryDropdownExpanded;
+        isDateDropdownExpanded = false;
+    }
+
+    function clickHandlerCurrency() {
+        isCurrencyDropdownExpanded = !isCurrencyDropdownExpanded;
+        isCategoryDropdownExpanded = false;
+        isDateDropdownExpanded = false;
+        isFilterDown = false;
+    }
+
+    function clickItemHandler(id) {
+        dropdownStates[id] = !dropdownStates[id];
+        if (deleteDropdownStates[id] === true) deleteDropdownStates[id] = false;
+    }
+
+    function clickDeleteHandler(id) {
+        deleteDropdownStates[id] = !deleteDropdownStates[id];
+        if (dropdownStates[id] === true) dropdownStates[id] = false;
+    }
+
+    function clickOutsideHandler(event) {
+        const isDateButton = event.target.closest("#incomeInfo");
+
+        if (!isDateButton) {
+            isFilterDown = false;
+            isCategoryDropdownExpanded = false;
+            isDateDropdownExpanded = false;
+            isCurrencyDropdownExpanded = false;
+        }
+    }
+
+    onMount(() => {
+        $isCategorizedExpense = false;
+        $isCategorizedIncome = false;
+
+        document.body.addEventListener("click", clickOutsideHandler);
+
+        return () => {
+            document.body.removeEventListener("click", clickOutsideHandler);
+        };
+    });
+
+    async function getToday() {
+        const currentDate = new Date();
+        const 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);
+            copyExpenseData.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);
+            copyIncomeData.set(response1.data);
+            $dateText = "Today"
+
+            $isCategorizedExpense = false;
+            categorizedExpense.set([]);
+            changeCurrency($currencyLabel);
+        } catch (error) {
+            console.error("Error fetching expenses:", error);
+        }
+    }
+
+    async function getYesterday() {
+        const currentDate = new Date();
+
+        const yesterday = new Date(currentDate);
+        yesterday.setDate(currentDate.getDate() - 1);
+
+        const 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);
+            copyExpenseData.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);
+            copyIncomeData.set(response2.data);
+            $dateText = "Yesterday"
+            changeCurrency($currencyLabel);
+        } catch (error) {
+            console.error("Error fetching expenses:", error);
+        }
+    }
+
+    async function getMonth() {
+        const currentDate = new Date();
+        const 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);
+            monthExpense.set(response1.data);
+            copyExpenseData.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);
+            monthIncome.set(response2.data);
+            copyIncomeData.set(response2.data);
+            $dateText = "This Month"
+
+            $isCategorizedExpense = false;
+            categorizedExpense.set([]);
+            changeCurrency($currencyLabel);
+        } catch (error) {
+            console.error("Error fetching expenses:", error);
+        }
+    }
+
+    async function getLastMonth() {
+        const currentDate = new Date();
+        const 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)
+            monthExpense.set(response1.data);
+            copyExpenseData.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);
+            monthIncome.set(response2.data);
+            copyIncomeData.set(response2.data);
+            $dateText = "Last Month"
+
+            $isCategorizedExpense = false;
+            categorizedExpense.set([]);
+            changeCurrency($currencyLabel);
+        } catch (error) {
+            console.error("Error fetching expenses:", error);
+        }
+    }
+
+    async function getLastYear() {
+        const currentDate = new Date();
+        const 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);
+            monthExpense.set(response1.data);
+            copyExpenseData.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);
+            monthIncome.set(response2.data);
+            copyIncomeData.set(response2.data);
+            $dateText = "This Year"
+
+            $isCategorizedExpense = false;
+            categorizedExpense.set([]);
+            changeCurrency($currencyLabel);
+        } catch (error) {
+            console.error("Error fetching expenses:", error);
+        }
+    }
+
+    function filterByCategory(category) {
+        $isCategorizedIncome = true;
+        $incomeCategoryLabel = category;
+        console.log($isCategorizedIncome);
+        let tempArr = $tempIncome.filter(income => income.incomeCategory.name === category);
+        categorizedIncome.set(tempArr);
+        incomeData.set(tempArr);
+    }
+
+    function getAll() {
+        categorizedIncome.set([]);
+        $incomeCategoryLabel = "Category";
+        $isCategorizedIncome = false;
+        console.log($isCategorizedIncome);
+        incomeData.set($tempIncome);
+    }
+
+    function doNothing() {
+
+    }
+
+    function changeCurrency(currency) {
+        if (currency === 'USD') {
+            expenseData.set($copyExpenseData);
+            incomeData.set($copyIncomeData);
+            $currencyLabel = "USD";
+        }
+        if (currency === 'MDL') {
+            const tempData1 = $copyExpenseData.map(expense => ({
+                ...expense,
+                amount: expense.amount / 0.056
+            }));
+            expenseData.set(tempData1);
+
+            const tempData2 = $copyIncomeData.map(income => ({
+                ...income,
+                amount: income.amount / 0.056
+            }));
+            incomeData.set(tempData2);
+            $currencyLabel = "MDL";
+        }
+        if (currency === 'EUR') {
+            const tempData1 = $copyExpenseData.map(expense => ({
+                ...expense,
+                amount: expense.amount / 1.08
+            }));
+            expenseData.set(tempData1);
+
+            const tempData2 = $copyIncomeData.map(income => ({
+                ...income,
+                amount: income.amount / 1.08
+            }));
+            incomeData.set(tempData2);
+            $currencyLabel = "EUR";
+        }
+
+        if (currency === 'GBP') {
+            const tempData1 = $copyExpenseData.map(expense => ({
+                ...expense,
+                amount: expense.amount / 1.26
+            }));
+            expenseData.set(tempData1);
+
+            const tempData2 = $copyIncomeData.map(income => ({
+                ...income,
+                amount: income.amount / 1.26
+            }));
+            incomeData.set(tempData2);
+            $currencyLabel = "GBP";
+        }
+    }
 </script>

 <div id="incomeInfo" style="background-color: {$globalStyles.mainColor}">
    <ContentIncome />
+    <div style="display: flex; justify-content: space-around">
+
+        <div id="dropdown" style="margin: 10px; display: flex; justify-content: space-between">
+            <button id="btn1" class="button" on:click={clickFilter}>Filter ▼</button>
+        </div>
+
+        <div id="dropdown-currency" style="margin: 10px;">
+            <button id="btn2" class="button" on:click={clickHandlerCurrency}>Currency ▼</button>
+        </div>
+    </div>
+
+    <div>
+        {#if isFilterDown}
+            <div style="margin: 10px; display: flex; justify-content: space-between" transition:slide>
+                <div id="dropdown-date" style="margin: 10px;">
+                    <button id="btn3" class="button" on:click={clickHandlerDate}>Filter by Date ▼</button></div>
+
+                <div id="dropdown-category" style="margin: 10px;">
+                    <button id="btn4" class="button" on:click={clickHandlerCategory}>Filter by Category ▼</button>
+                </div>
+            </div>
+        {/if}
+
+        {#if isDateDropdownExpanded}
+            <div id="date-list" transition:slide>
+                <div class="date-entry" on:click={() => getToday()} role="button" tabindex="0"
+                     on:keydown={doNothing}>Today
+                </div>
+                <div class="date-entry" on:click={() => getYesterday()} role="button" tabindex="0"
+                     on:keydown={doNothing}>Yesterday
+                </div>
+                <div class="date-entry" on:click={() => getMonth()} role="button" tabindex="0"
+                     on:keydown={doNothing}>This month
+                </div>
+                <div class="date-entry" on:click={() => getLastMonth()} role="button" tabindex="0"
+                     on:keydown={doNothing}>Last month
+                </div>
+                <div class="date-entry" on:click={() => getLastYear()} role="button" tabindex="0"
+                     on:keydown={doNothing}>This year
+                </div>
+            </div>
+        {/if}
+
+        {#if isCategoryDropdownExpanded}
+            <div id="date-list" transition:slide>
+                <div class="date-entry" on:click={() => getAll()} role="button"
+                     tabindex="0" on:keydown={doNothing}>All</div>
+                {#each $incomeTypes as income (income.id)}
+                    {#if income.id !== undefined}
+                        <div class="date-entry" on:click={() => filterByCategory(income.name)} role="button"
+                             tabindex="0" on:keydown={doNothing}>{income.name}</div>
+                    {/if}
+                {/each}
+            </div>
+        {/if}
+
+        {#if isCurrencyDropdownExpanded}
+            <div id="date-list" transition:slide>
+                <div class="date-entry" on:click={() => changeCurrency("MDL")} role="button"
+                     tabindex="0" on:keydown={doNothing}>MDL Leu</div>
+                <div class="date-entry" on:click={() => changeCurrency("GBP")} role="button"
+                     tabindex="0" on:keydown={doNothing}>GBP Pound</div>
+                <div class="date-entry" on:click={() => changeCurrency("USD")} role="button"
+                     tabindex="0" on:keydown={doNothing}>USD Dollar</div>
+                <div class="date-entry" on:click={() => changeCurrency("EUR")} role="button"
+                     tabindex="0" on:keydown={doNothing}>EUR Euro</div>
+            </div>
+        {/if}
+    </div>
    <div id="listContainer" style="color: {$globalStyles.color}">
        <ul>
-            {#each $incomeData.reverse() as item}
-                <li style="display:flex; justify-content: space-between; color: {$globalStyles.color}">
-                    <span>
-                    {#if textToIcon[item.incomeCategory.name]}
+            {#each $incomeData.toReversed() as item (item.incomeId)}
+                <li style="display:flex; flex-direction: column; justify-content: space-between; color: {$globalStyles.color}">
+                    <div style="display:flex; flex-direction: row; justify-content: space-between; align-items: center;">
+                    <div>
+                        {#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="font-weight:bold; margin-right: 10px; color: green; font-size: larger">{item.incomeCategory ? `+${item.amount}$` : `-${item.amount}$`}</span>
-                    </span>
-                    <span style="">{`${item.date}`}</span>
+                        <span style="font-weight: bold">{item.incomeCategory ? `${item.incomeCategory.name}: ` : `${item.expenseCategory.name}: `}</span>
+                    <span style="font-weight:bold; margin-right: 10px; color: limegreen; font-size: larger">{item.incomeCategory ? `+${item.amount.toFixed(2)} ${$currencyLabel}` : `-${item.amount.toFixed(2)} ${$currencyLabel}`}</span>
+                    </div>
+                        <div style="margin-right: 5px; display: flex; flex-direction: row">
+
+                            <div>
+                                {`${item.date}`}
+                            </div>
+
+                            <div id="editBtnDiv" role="button" tabindex="0" on:keydown={doNothing}
+                                 on:click={() => clickItemHandler(item.incomeId)}>
+                                <span id="editBtn"><svg
+                                        xmlns="http://www.w3.org/2000/svg" height="16" width="16" viewBox="0 0 512 512"><path
+                                        d="M471.6 21.7c-21.9-21.9-57.3-21.9-79.2 0L362.3 51.7l97.9 97.9 30.1-30.1c21.9-21.9 21.9-57.3 0-79.2L471.6 21.7zm-299.2 220c-6.1 6.1-10.8 13.6-13.5 21.9l-29.6 88.8c-2.9 8.6-.6 18.1 5.8 24.6s15.9 8.7 24.6 5.8l88.8-29.6c8.2-2.7 15.7-7.4 21.9-13.5L437.7 172.3 339.7 74.3 172.4 241.7zM96 64C43 64 0 107 0 160V416c0 53 43 96 96 96H352c53 0 96-43 96-96V320c0-17.7-14.3-32-32-32s-32 14.3-32 32v96c0 17.7-14.3 32-32 32H96c-17.7 0-32-14.3-32-32V160c0-17.7 14.3-32 32-32h96c17.7 0 32-14.3 32-32s-14.3-32-32-32H96z"/></svg></span>
+                            </div>
+
+                            <div id="deleteBtnDiv" role="button" tabindex="0" on:keydown={doNothing}
+                                 on:click={() => clickDeleteHandler(item.incomeId)}>
+                                <span id="deleteBtn"><svg
+                                        xmlns="http://www.w3.org/2000/svg" height="16" width="14" viewBox="0 0 448 512"><path
+                                        d="M135.2 17.7L128 32H32C14.3 32 0 46.3 0 64S14.3 96 32 96H416c17.7 0 32-14.3 32-32s-14.3-32-32-32H320l-7.2-14.3C307.4 6.8 296.3 0 284.2 0H163.8c-12.1 0-23.2 6.8-28.6 17.7zM416 128H32L53.2 467c1.6 25.3 22.6 45 47.9 45H346.9c25.3 0 46.3-19.7 47.9-45L416 128z"/></svg></span>
+                            </div>
+                            </div>
+                    </div>
+
+                    {#if dropdownStates[item.incomeId]}
+                        <EditEntry {item} bind:isOn={dropdownStates[item.incomeId]}/>
+                    {/if}
+
+                    {#if deleteDropdownStates[item.incomeId]}
+                        <div style="padding: 5px; margin-top: 5px; display:flex; flex-direction: column; justify-content: space-evenly"
+                             class="inputForm" transition:slide>
+                            <span id="textf" style="text-align: center; margin-bottom: 10px">Confirm deletion?</span>
+                            <div style="display:flex; flex-direction: row; justify-content: space-evenly">
+                                <button id="confirmBtn">CONFIRM</button>
+                                <button id="cancelBtn">CANCEL</button>
+                            </div>
+
+                            <!--                            <button style="background-color: #8BD17C" on:click={() => console.log("LOL")}>Delete</button>-->
+                            <!--                            <button style="background-color: palevioletred" on:click={clickItemHandler(item.expenseId)}>Cancel</button>-->
+                        </div>
+                    {/if}
+
                </li>
            {/each}
        </ul>
@@ -37,13 +473,108 @@

 <style>

+    #textf {
+        font-family: "Inter UI", "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
+        font-size: 20px;
+        font-weight: 500;
+    }
+
+    #confirmBtn {
+        background-image: linear-gradient(92.88deg, #455EB5 9.16%, #5643CC 43.89%, #673FD7 64.72%);
+        border-radius: 8px;
+        border-style: none;
+        box-sizing: border-box;
+        color: #FFFFFF;
+        cursor: pointer;
+        flex-shrink: 0;
+        font-family: "Inter UI", "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
+        font-size: 16px;
+        font-weight: 500;
+        height: 3rem;
+        padding: 0 1.6rem;
+        text-align: center;
+        text-shadow: rgba(0, 0, 0, 0.25) 0 3px 8px;
+        transition: all .5s;
+        user-select: none;
+        -webkit-user-select: none;
+        touch-action: manipulation;
+    }
+
+    #confirmBtn:hover {
+        box-shadow: rgba(80, 63, 205, 0.5) 0 1px 30px;
+        transition-duration: .1s;
+    }
+
+    #cancelBtn {
+        background-image: linear-gradient(92.88deg, #455EB5 9.16%, #5643CC 43.89%, #673FD7 64.72%);
+        border-radius: 8px;
+        border-style: none;
+        box-sizing: border-box;
+        color: #FFFFFF;
+        cursor: pointer;
+        flex-shrink: 0;
+        font-family: "Inter UI", "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
+        font-size: 16px;
+        font-weight: 500;
+        height: 3rem;
+        padding: 0 1.6rem;
+        text-align: center;
+        text-shadow: rgba(0, 0, 0, 0.25) 0 3px 8px;
+        transition: all .5s;
+        user-select: none;
+        -webkit-user-select: none;
+        touch-action: manipulation;
+    }
+
+    #cancelBtn:hover {
+        box-shadow: rgba(80, 63, 205, 0.5) 0 1px 30px;
+        transition-duration: .1s;
+    }
+
+    @media only screen and (max-width: 900px) {
+        #listContainer {
+            max-height: 50vh;
+            width: 100%;
+        }
+
+        #incomeInfo {
+            margin: 0;
+            width: 100%;
+        }
+    }
+
+    #editBtn {
+        margin-left: 10px;
+        margin-right: 5px;
+        fill: darkblue;
+    }
+
+    .inputForm {
+        display: flex;
+        flex-direction: column;
+        margin-bottom: 10px;
+    }
+
+    #editBtn:hover {
+        cursor: pointer;
+        fill: lightseagreen;
+    }
+
+    #deleteBtn {
+        fill: red;
+        margin-left: 5px;
+    }
+
+    #deleteBtn:hover {
+        cursor: pointer;
+        fill: palevioletred;
+    }
+
    #incomeInfo {
-        min-width: 300px;
+        min-width: 350px;
        min-height: 0;
        background-color: #212942;
        color: white;
-        border-radius: 0 0 10px 10px;
-        margin: 0 0 10px 0;
        display: flex;
        flex-direction: column;
        box-sizing: border-box;
@@ -54,7 +585,7 @@
        overflow-y: auto;
        min-height: 0;
        padding: 0 10px 10px;
-        margin: 0 0 10px;
+        /*margin: 0 0 10px;*/
        box-sizing: border-box;
        border-radius: 0 0 10px 10px;
    }
@@ -63,19 +594,16 @@
        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;
    }
@@ -98,4 +626,85 @@
    #listContainer li:hover {
        box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22);
    }
+
+    .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: 0;
+        overflow: hidden;
+        padding: 0 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);
+    }
+
+    #date-list {
+        background-color: black;
+        margin: 0 20px 20px;
+        max-height: 400px;
+        overflow-y: scroll;
+        border-radius: 20px;
+    }
+
+    .date-entry {
+        background-image: linear-gradient(92.88deg, #455EB5 9.16%, #5643CC 43.89%, #673FD7 64.72%);
+        border-radius: 8px;
+        border-style: none;
+        box-sizing: border-box;
+        color: #FFFFFF;
+        cursor: pointer;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        flex-shrink: 0;
+        font-family: "Inter UI", "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
+        font-size: 16px;
+        font-weight: 500;
+        height: 3rem;
+        padding: 0 1.6rem;
+        text-align: center;
+        text-shadow: rgba(0, 0, 0, 0.25) 0 3px 8px;
+        transition: all .3s;
+        user-select: none;
+        -webkit-user-select: none;
+        touch-action: manipulation;
+        margin: 10px;
+    }
+
+    .date-entry:hover {
+        box-shadow: rgba(255, 255, 255, 0.8) 0 0 20px;
+    }
 </style>
--- a/src/main/java/com/faf223/expensetrackerfaf/web/src/routes/dashboard/board/incomes/infolists/Modal.svelte
+++ b/src/main/java/com/faf223/expensetrackerfaf/web/src/routes/dashboard/board/incomes/infolists/Modal.svelte
@@ -1,57 +0,0 @@
-<script>
-    export let showModal;
-
-    let dialog;
-
-    $: if (dialog && showModal) dialog.showModal();
-</script>
-
-<!-- svelte-ignore a11y-click-events-have-key-events a11y-no-noninteractive-element-interactions -->
-<dialog
-        bind:this={dialog}
-        on:close={() => (showModal = false)}
-        on:click|self={() => dialog.close()}
->
-    <!-- svelte-ignore a11y-no-static-element-interactions -->
-    <div on:click|stopPropagation>
-        <slot name="header" />
-        <slot />
-    </div>
-</dialog>
-
-<style>
-    dialog {
-        max-width: 32em;
-        border-radius: 20px;
-        border: none;
-        padding: 0;
-    }
-    dialog::backdrop {
-        background: rgba(0, 0, 0, 0.3);
-    }
-    dialog > div {
-        padding: 1em;
-    }
-    dialog[open] {
-        animation: zoom 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
-    }
-    @keyframes zoom {
-        from {
-            transform: scale(0.95);
-        }
-        to {
-            transform: scale(1);
-        }
-    }
-    dialog[open]::backdrop {
-        animation: fade 0.2s ease-out;
-    }
-    @keyframes fade {
-        from {
-            opacity: 0;
-        }
-        to {
-            opacity: 1;
-        }
-    }
-</style>
--- a/src/main/java/com/faf223/expensetrackerfaf/web/src/routes/dashboard/board/incomes/other/DashHeader.svelte
+++ b/src/main/java/com/faf223/expensetrackerfaf/web/src/routes/dashboard/board/incomes/other/DashHeader.svelte
@@ -1,19 +1,19 @@
 <script>
-    import {globalStyles} from "../../../styles.js";
+
+import {globalStyles} from "../../../styles.js";
 </script>

 <div id="header">
-    <div id="dashboardTitleWrapper" style="color: {$globalStyles.dashTextColor}">
-        <h5>Hello, welcome to your</h5>
-        <h1 id="dashboardTitle">Dashboard</h1>
+    <div id="dashboardTitleWrapper" style="color: white">
+        <h1 id="dashboardTitle">Dashboard - Incomes</h1>
    </div>

    <div id="icons">
        <div class="headerbtn searchButton">
-            <svg xmlns="http://www.w3.org/2000/svg" height="1.3em" viewBox="0 0 512 512"><path d="M416 208c0 45.9-14.9 88.3-40 122.7L502.6 457.4c12.5 12.5 12.5 32.8 0 45.3s-32.8 12.5-45.3 0L330.7 376c-34.4 25.2-76.8 40-122.7 40C93.1 416 0 322.9 0 208S93.1 0 208 0S416 93.1 416 208zM208 352a144 144 0 1 0 0-288 144 144 0 1 0 0 288z"/></svg>
+            <svg style="fill: white" xmlns="http://www.w3.org/2000/svg" height="1.3em" viewBox="0 0 512 512"><path d="M416 208c0 45.9-14.9 88.3-40 122.7L502.6 457.4c12.5 12.5 12.5 32.8 0 45.3s-32.8 12.5-45.3 0L330.7 376c-34.4 25.2-76.8 40-122.7 40C93.1 416 0 322.9 0 208S93.1 0 208 0S416 93.1 416 208zM208 352a144 144 0 1 0 0-288 144 144 0 1 0 0 288z"/></svg>
        </div>
        <div class="headerbtn notificationButton">
-            <svg xmlns="http://www.w3.org/2000/svg" height="1.3em" viewBox="0 0 448 512"><path d="M224 0c-17.7 0-32 14.3-32 32V49.9C119.5 61.4 64 124.2 64 200v33.4c0 45.4-15.5 89.5-43.8 124.9L5.3 377c-5.8 7.2-6.9 17.1-2.9 25.4S14.8 416 24 416H424c9.2 0 17.6-5.3 21.6-13.6s2.9-18.2-2.9-25.4l-14.9-18.6C399.5 322.9 384 278.8 384 233.4V200c0-75.8-55.5-138.6-128-150.1V32c0-17.7-14.3-32-32-32zm0 96h8c57.4 0 104 46.6 104 104v33.4c0 47.9 13.9 94.6 39.7 134.6H72.3C98.1 328 112 281.3 112 233.4V200c0-57.4 46.6-104 104-104h8zm64 352H224 160c0 17 6.7 33.3 18.7 45.3s28.3 18.7 45.3 18.7s33.3-6.7 45.3-18.7s18.7-28.3 18.7-45.3z"/></svg>
+            <svg style="fill: white" xmlns="http://www.w3.org/2000/svg" height="1.3em" viewBox="0 0 448 512"><path d="M224 0c-17.7 0-32 14.3-32 32V49.9C119.5 61.4 64 124.2 64 200v33.4c0 45.4-15.5 89.5-43.8 124.9L5.3 377c-5.8 7.2-6.9 17.1-2.9 25.4S14.8 416 24 416H424c9.2 0 17.6-5.3 21.6-13.6s2.9-18.2-2.9-25.4l-14.9-18.6C399.5 322.9 384 278.8 384 233.4V200c0-75.8-55.5-138.6-128-150.1V32c0-17.7-14.3-32-32-32zm0 96h8c57.4 0 104 46.6 104 104v33.4c0 47.9 13.9 94.6 39.7 134.6H72.3C98.1 328 112 281.3 112 233.4V200c0-57.4 46.6-104 104-104h8zm64 352H224 160c0 17 6.7 33.3 18.7 45.3s28.3 18.7 45.3 18.7s33.3-6.7 45.3-18.7s18.7-28.3 18.7-45.3z"/></svg>
        </div>
    </div>
 </div>
@@ -29,12 +29,7 @@
    #dashboardTitleWrapper {
        display: flex;
        flex-direction: column;
-        margin:20px;
-        margin-bottom: 0px;
-    }
-
-    #dashboardTitleWrapper h5 {
-        margin: 0;
+        margin: 20px 20px 0;
    }

    #dashboardTitleWrapper h1 {
--- 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
@@ -1,437 +0,0 @@
-<script>
-    import Graph1 from '../graphs/Graph1.svelte';
-    import Graph3 from '../graphs/Graph3.svelte';
-    import Incomes from "../infolists/Incomes.svelte";
-    import {globalStyles} from "../../../styles.js";
-    import { slide } from 'svelte/transition'
-    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
-    }
-
-    function clickHandlerCategory() {
-        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);
-
-        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 style="color: {$globalStyles.altColor}" contenteditable="false" bind:innerHTML={incomeAnalysisText}></span>
-
-        <div id="dropdown-date">
-            <button id="btn1" class="button" on:click={clickHandlerDate}>Filter by Date ▼</button>
-            {#if isDateDropdownExpanded}
-                <div id="date-list" transition:slide>
-                    <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="btn2" class="button" on:click={clickHandlerCategory}>Filter by Category ▼</button>
-            {#if isCategoryDropdownExpanded}
-                <div id="date-list" transition:slide>
-                    {#each $incomeTypes as income (income.id)}
-                        {#if income.id !== undefined}
-                            <div class="date-entry" on:click={() => filterByCategory(income.name)} value={income.id}>{income.name}</div>
-                        {/if}
-                    {/each}
-                </div>
-            {/if}
-        </div>
-    </div>
-    <div id="data-menu">
-        <div id="first-graph">
-            <Graph1 />
-        </div>
-        <div id="second-graph">
-            <Graph3 />
-        </div>
-        <Incomes />
-    </div>
-
-</div>
-
-<style>
-    #main-data {
-        border-bottom-left-radius: 20px;
-        border-bottom-right-radius: 20px;
-        padding:0;
-        display: flex;
-        min-height: 0;
-        height: 0;
-        flex-direction: column;
-        justify-content: stretch;
-        align-items: stretch;
-        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: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: #007BFF;
-        position:absolute;
-        margin-top: 20px;
-        max-height: 400px;
-        overflow-y: scroll;
-        border-radius: 20px;
-        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 {
-        background-color: black;
-        min-height: 50px;
-        padding-left: 30px;
-        display: flex;
-        flex-direction: row;
-        align-items: center;
-        justify-content: space-around;
-        border-top-left-radius: 20px;
-        border-top-right-radius: 20px;
-        font-size: larger;
-        margin-bottom: 5px;
-        /*border: #8BD17C 2px solid;*/
-    }
-
-    #data-menu {
-        border-bottom-left-radius: 20px;
-        border-bottom-right-radius: 20px;
-        display:flex;
-        /*padding:10px;*/
-        flex-direction: row-reverse;
-        justify-content: space-between;
-        align-items: stretch;
-        flex: 1;
-        height: 0;
-        min-height: 0;
-    }
-
-    #first-graph {
-        display: flex;
-        flex-direction: column;
-        align-self: stretch;
-        flex-grow: 1;
-        min-width: 0;
-        min-height:0;
-    }
-
-    #second-graph {
-        display: flex;
-        flex-direction: column;
-        align-self: stretch;
-        flex-grow: 1;
-        min-width: 0;
-        min-height:0;
-    }
-
-</style>
--- 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
@@ -1,43 +1,52 @@
 <script>
    import { onMount } from 'svelte';
-    import { incomeData, expenseData } from "../../../stores.js";
+    import { incomeData, expenseData, currencyLabel } from "../../../stores.js";
    import {globalStyles} from "../../../styles.js";

-    let componentStyles;
-
-    $: {
-        console.log("got here")
-        componentStyles = $globalStyles;
-    }
-
    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
+    let lastMonthIncome = 800;
+    let lastMonthExpense = 200;
+    let incomeDifference;
+    let expenseDifference;

    function updateInfo() {
        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.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: 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");
-        }
+        incomeDifference = ((totalIncomes - lastMonthIncome) / lastMonthIncome) * 100;
+        expenseDifference = ((lastMonthExpense - totalExpenses) / lastMonthExpense) * 100;
    }

    $: {
+        if ($currencyLabel) {
+            if ($currencyLabel === 'USD') {
+                lastMonthIncome = 800;
+                lastMonthExpense = 200;
+            }
+
+            if ($currencyLabel === 'MDL') {
+                lastMonthIncome = 800 / 0.056;
+                lastMonthExpense = 200 / 0.056;
+            }
+
+            if ($currencyLabel === 'EUR') {
+                lastMonthIncome = 800 / 1.08;
+                lastMonthExpense = 200 / 1.08;
+            }
+
+            if ($currencyLabel === 'GBP') {
+                lastMonthIncome = 800 / 1.26;
+                lastMonthExpense = 200 / 1.26;
+            }
+        }
+
        if ($incomeData || $expenseData) {
            updateInfo();
        }
+
+
    }

    onMount(() => {
@@ -46,24 +55,76 @@
 </script>

 <div id="quickInfobar">
-    <div class="infobarElement" bind:this={infobar1} style="background-color: {componentStyles.mainColor}"></div>
-    <div class="infobarElement" bind:this={infobar2} style="background-color: {componentStyles.mainColor}"></div>
-    <div class="infobarElement" bind:this={infobar3} style="background-color: {componentStyles.mainColor}"></div>
-    <div class="infobarElement" bind:this={infobar4} style="background-color: {componentStyles.mainColor}"></div>
+    <div class="firstTwo">
+        <div class="infobarElement" bind:this={infobar1} style="background-color: {$globalStyles.mainColor}">
+            <span class="infobarSpan">Total expenses:</span><br><span class="dataSpan" style="color:#ab1a3c">{totalExpenses.toFixed(2)} {$currencyLabel}</span>
+        </div>
+        <div class="infobarElement" bind:this={infobar2} style="background-color: {$globalStyles.mainColor}">
+            <span class="infobarSpan">Total incomes:</span><br><span class="dataSpan" style="color:#38cc1b">{totalIncomes.toFixed(2)} {$currencyLabel}</span>
+        </div>
+    </div>
+
+    <div class="secondTwo">
+        <div class="infobarElement" bind:this={infobar3} style="background-color: {$globalStyles.mainColor}">
+            <span class="infobarSpan">Income by last month:</span><br><span class="dataSpan" style="color:#2763db">{incomeDifference.toFixed(2)}%</span>
+        </div>
+        <div class="infobarElement" bind:this={infobar4} style="background-color: {$globalStyles.mainColor}">
+            <span class="infobarSpan">Expense by last month:</span><br><span class="dataSpan" style="color:#dba527">{expenseDifference.toFixed(2)}%</span>
+        </div>
+    </div>
+
 </div>

 <style>
-    #quickInfobar {
+
+    .firstTwo {
        display: flex;
+        flex-wrap: wrap;
        justify-content: space-between;
+    }
+
+    .secondTwo {
+        display: flex;
+        flex-wrap: wrap;
+        justify-content: space-between;
+    }
+
+    .infobarSpan {
+        font-size: larger;
+        color: #00FEFC
+    }
+
+    .dataSpan {
+        color:#ab1a3c;
+        font-size: xxx-large;
+    }
+
+    #quickInfobar {
+        /*display: flex;*/
+        /*justify-content: space-between;*/
+        /*flex-wrap: wrap;*/
+        min-height: 0;
+        flex: 1 1 auto;
        margin: 20px;
    }

+    @media only screen and (min-width: 768px) and (max-width: 1200px) {
+        .infobarSpan {
+            font-size: medium;
+        }
+
+        .dataSpan {
+            font-size: large;
+        }
+    }
+
    .infobarElement {
+        font-family: Inconsolata,"Source Sans Pro",sans-serif;
+        font-size: larger;
        margin: 10px;
-        width: 200px;
-        min-width: 100px;
-        height: 100px;
+        min-width: 0;
+        min-height: 0;
+        flex: 1 1 auto;
        color: white;
        padding: 10px;
        border-radius: 10px;
--- a/src/main/java/com/faf223/expensetrackerfaf/web/src/routes/dashboard/board/incomes/util/EditEntry.svelte
+++ b/src/main/java/com/faf223/expensetrackerfaf/web/src/routes/dashboard/board/incomes/util/EditEntry.svelte
@@ -0,0 +1,114 @@
+<script>
+    import {incomeTypes} from "../../../stores.js";
+    import { slide } from 'svelte/transition'
+    export let item;
+    export let isOn;
+
+    function handleSave() {
+        const amount = document.getElementById('amountInput').value;
+        const expenseCategory = document.getElementById('incomeCategory').value;
+
+        console.log("tryna save: " + item.incomeId + " " + amount + " " + expenseCategory)
+        // saveFunction(item.expenseId, amount, expenseCategory);
+    }
+</script>
+
+<div style="display: flex; flex-direction: column" transition:slide>
+    <span id="textf" style="margin-top: 10px; text-align: center">Edit Entry</span>
+    <input type="text" id="amountInput" bind:value={item.amount}>
+    <select id="incomeCategory" class="form-control">
+        {#each $incomeTypes as income (income.id)}
+            {#if income.id !== undefined}
+                {#if income.id === item.incomeCategory.id}
+                    <option value={income.id} selected>{income.name}</option>
+                {:else}
+                    <option value={income.id}>{income.name}</option>
+                {/if}
+            {/if}
+        {/each}
+    </select>
+    <div style="margin: 10px; display:flex; flex-direction: row; justify-content: space-evenly">
+        <button class="buttonCL" id="saveBtn" on:click={handleSave}>SAVE</button>
+        <button class="buttonCL" id="cancelBtn" on:click={() => isOn = false}>CANCEL</button>
+    </div>
+</div>
+
+<style>
+
+    #textf {
+        font-family: "Inter UI","SF Pro Display",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen,Ubuntu,Cantarell,"Open Sans","Helvetica Neue",sans-serif;
+        font-size: 20px;
+        font-weight: 500;
+    }
+
+    input[type=text] {
+        padding: 12px 20px;
+        margin: 8px 0;
+        display: inline-block;
+        border: 1px solid #ccc;
+        border-radius: 4px;
+        box-sizing: border-box;
+    }
+
+    select {
+        padding: 12px 20px;
+        margin: 8px 0;
+        display: inline-block;
+        border: 1px solid #ccc;
+        border-radius: 4px;
+        box-sizing: border-box;
+        font-size: 16px;
+    }
+
+    #saveBtn {
+        background-image: linear-gradient(92.88deg, #455EB5 9.16%, #5643CC 43.89%, #673FD7 64.72%);
+        border-radius: 8px;
+        border-style: none;
+        box-sizing: border-box;
+        color: #FFFFFF;
+        cursor: pointer;
+        flex-shrink: 0;
+        font-family: "Inter UI","SF Pro Display",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen,Ubuntu,Cantarell,"Open Sans","Helvetica Neue",sans-serif;
+        font-size: 16px;
+        font-weight: 500;
+        height: 3rem;
+        padding: 0 1.6rem;
+        text-align: center;
+        text-shadow: rgba(0, 0, 0, 0.25) 0 3px 8px;
+        transition: all .5s;
+        user-select: none;
+        -webkit-user-select: none;
+        touch-action: manipulation;
+    }
+
+    #saveBtn:hover {
+        box-shadow: rgba(80, 63, 205, 0.5) 0 1px 30px;
+        transition-duration: .1s;
+    }
+
+    #cancelBtn {
+        background-image: linear-gradient(92.88deg, #455EB5 9.16%, #5643CC 43.89%, #673FD7 64.72%);
+        border-radius: 8px;
+        border-style: none;
+        box-sizing: border-box;
+        color: #FFFFFF;
+        cursor: pointer;
+        flex-shrink: 0;
+        font-family: "Inter UI","SF Pro Display",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen,Ubuntu,Cantarell,"Open Sans","Helvetica Neue",sans-serif;
+        font-size: 16px;
+        font-weight: 500;
+        height: 3rem;
+        padding: 0 1.6rem;
+        text-align: center;
+        text-shadow: rgba(0, 0, 0, 0.25) 0 3px 8px;
+        transition: all .5s;
+        user-select: none;
+        -webkit-user-select: none;
+        touch-action: manipulation;
+    }
+
+    #cancelBtn:hover {
+        box-shadow: rgba(80, 63, 205, 0.5) 0 1px 30px;
+        transition-duration: .1s;
+    }
+</style>
--- 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
@@ -1,32 +1,8 @@
 <script>
-    import { onMount } from 'svelte';
-    import axios from 'axios';
-    import {deleteCookie, getCookie} from "svelte-cookie";
-
+    import {deleteCookie} from "svelte-cookie";
+    import {isAdmin, username} from "../stores.js";
    export let onTabClick;

-    let username;
-    let isAdmin = true;
-
-    onMount(async () => {
-        const token = getCookie('access_token');
-
-        const config = {
-            headers: {
-                'Authorization': `Bearer ${token}`
-            }
-        };
-
-        try {
-            const response = await axios.get('https://trackio.online:8081/users/get-user-data', config);
-            const data = response.data;
-            username = data.username;
-
-        } catch (error) {
-            console.error('Error:', error);
-        }
-    });
-
    function doNothing() {
    }

@@ -74,7 +50,7 @@
    </div>

    <div id="profileSpace">
-        <div id="profileInfo">Hello, {username}</div>
+        <div id="profileInfo">Hello, {$username}</div>
        <div id="logout" role="button"
        tabindex="0"
        on:click={() => {
--- a/src/main/java/com/faf223/expensetrackerfaf/web/src/routes/dashboard/menu/StickyMenu.svelte
+++ b/src/main/java/com/faf223/expensetrackerfaf/web/src/routes/dashboard/menu/StickyMenu.svelte
@@ -3,32 +3,11 @@
    import axios from 'axios';
    import {deleteCookie, getCookie} from "svelte-cookie";
    import { slide } from 'svelte/transition'
+    import {isAdmin, username} from "../stores.js";

    export let onTabClick;

    let isMenuDown = false;
-    let isAdmin = true;
-    let username;
-
-    onMount(async () => {
-        const token = getCookie('access_token');
-
-        const config = {
-            headers: {
-                'Authorization': `Bearer ${token}`
-            }
-        };
-
-        try {
-            const response = await axios.get('https://trackio.online:8081/users/get-user-data', config);
-            const data = response.data;
-            username = data.username;
-            console.log(username)
-
-        } catch (error) {
-            console.error('Error:', error);
-        }
-    });

    function toggleMenu() {
        isMenuDown = !isMenuDown;
@@ -81,7 +60,7 @@
            {/if}

            <div id="profileSpace">
-                <div id="profileInfo">Hello, {username}</div>
+                <div id="profileInfo">Hello, {$username}</div>
                <div id="logout" role="button"
                     tabindex="0"
                     on:click={() => {
--- 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
@@ -1,9 +1,16 @@
 import {writable} from "svelte/store";

+export const isAdmin = writable(false);
+
+export const username = writable("");
 export const incomeData = writable([]);

 export const expenseData = writable([]);

+export const copyExpenseData = writable([]);
+
+export const copyIncomeData = writable([]);
+
 export const incomeTypes = writable([]);

 export const expenseTypes = writable([]);
@@ -24,6 +31,12 @@ export let isCategorizedExpense = writable(false);

 export let isCategorizedIncome = writable(false);

+export let expenseCategoryLabel = writable();
+
+export let incomeCategoryLabel = writable();
+
 export let selectedTab = writable('expenses');

-export let dateText = writable("This Month");
+export let dateText = writable("This Month");
+
+export let currencyLabel = writable('USD');
--- a/src/main/java/com/faf223/expensetrackerfaf/web/src/routes/main/+page.svelte
+++ b/src/main/java/com/faf223/expensetrackerfaf/web/src/routes/main/+page.svelte
@@ -0,0 +1,7 @@
+<script>
+    import { onMount } from "svelte";
+
+    onMount(() => {
+        window.location.href = 'https://www.youtube.com/watch?v=dQw4w9WgXcQ';
+    });
+</script>
--- a/src/main/java/com/faf223/expensetrackerfaf/web/static/img.jpg
+++ b/src/main/java/com/faf223/expensetrackerfaf/web/static/img.jpg
--- a/src/main/java/com/faf223/expensetrackerfaf/web/vite.config.js
+++ b/src/main/java/com/faf223/expensetrackerfaf/web/vite.config.js
@@ -12,4 +12,4 @@ export default defineConfig({
 			proxy: {}
 		}
 	},
-});
+})
--- a/src/main/resources/fullchain.pem
+++ b/src/main/resources/fullchain.pem
@@ -0,0 +1,86 @@
+-----BEGIN CERTIFICATE-----
+MIIEHTCCAwWgAwIBAgISBGYC3YGfvdZxQg6y2YUSjvzLMA0GCSqGSIb3DQEBCwUA
+MDIxCzAJBgNVBAYTAlVTMRYwFAYDVQQKEw1MZXQncyBFbmNyeXB0MQswCQYDVQQD
+EwJSMzAeFw0yMzEyMTIxOTAxNTVaFw0yNDAzMTExOTAxNTRaMBkxFzAVBgNVBAMT
+DnRyYWNraW8ub25saW5lMFkwEwYHKoZIzj0CAQYIKoZIzj0DAQcDQgAEirToCuVv
+qNiT3Rxqsyu2+OmD7TYBW+CV9639OW4FhwHaFxyzoCWI3/w3gZNVE/5Y1CvwHAsw
+qfuam0LjfbnKOKOCAg8wggILMA4GA1UdDwEB/wQEAwIHgDAdBgNVHSUEFjAUBggr
+BgEFBQcDAQYIKwYBBQUHAwIwDAYDVR0TAQH/BAIwADAdBgNVHQ4EFgQUmUFyQf+b
+b16jD80QRaO9ipw7h9kwHwYDVR0jBBgwFoAUFC6zF7dYVsuuUAlA5h+vnYsUwsYw
+VQYIKwYBBQUHAQEESTBHMCEGCCsGAQUFBzABhhVodHRwOi8vcjMuby5sZW5jci5v
+cmcwIgYIKwYBBQUHMAKGFmh0dHA6Ly9yMy5pLmxlbmNyLm9yZy8wGQYDVR0RBBIw
+EIIOdHJhY2tpby5vbmxpbmUwEwYDVR0gBAwwCjAIBgZngQwBAgEwggEDBgorBgEE
+AdZ5AgQCBIH0BIHxAO8AdQA7U3d1Pi25gE6LMFsG/kA7Z9hPw/THvQANLXJv4frU
+FwAAAYxfnyo6AAAEAwBGMEQCIBqYq5pa2GE7UNJHzN+1AAbw///s8PtWNkauU9UO
+igWZAiAktf1uf/O90k1l/+ihkPxJXToxcH5yeOiqATqDMol5PwB2AHb/iD8KtvuV
+UcJhzPWHujS0pM27KdxoQgqf5mdMWjp0AAABjF+fKoMAAAQDAEcwRQIgfNyTycHQ
+D1OMAOBA8vHAyu//5SjnY0BtCxOITyY/W1oCIQCCHFH+VKTFCglsqcp2hwQJHGq/
+jiSj4tR0jYIm5xMlaTANBgkqhkiG9w0BAQsFAAOCAQEAqu7cvsrkAnyrBgQHovQ4
+r+F1S/H6vu/Bvt9x+d125uDa/pT55JO/wG1IvdT9fxws2oYcc/nc8DjvW9U7+peu
+5K675kH09QTi+GhBAU4gZBhx3PohA6qG0Wm/6gC4lOq+S7o32x6RpoptcSvB3UXQ
+9BkgbO6LgDu99jPm6Acv4wre6trXAbPOpSlruSKSENnda7l/CamfiOX0cRKHjZdX
+PNpIfqWXokXNNYDAdrcXbOm7mFVMo1WcjBQM6E++IXfDRqHQ82Y94YVhEdH/hCo6
+3ce9uSrgL9+HcwhHzlZj20rTHFJ6iX/+Ffk8wbYfR4Eu7MXDg8ULT0z93yIvDxgy
+uw==
+-----END CERTIFICATE-----
+-----BEGIN CERTIFICATE-----
+MIIFFjCCAv6gAwIBAgIRAJErCErPDBinU/bWLiWnX1owDQYJKoZIhvcNAQELBQAw
+TzELMAkGA1UEBhMCVVMxKTAnBgNVBAoTIEludGVybmV0IFNlY3VyaXR5IFJlc2Vh
+cmNoIEdyb3VwMRUwEwYDVQQDEwxJU1JHIFJvb3QgWDEwHhcNMjAwOTA0MDAwMDAw
+WhcNMjUwOTE1MTYwMDAwWjAyMQswCQYDVQQGEwJVUzEWMBQGA1UEChMNTGV0J3Mg
+RW5jcnlwdDELMAkGA1UEAxMCUjMwggEiMA0GCSqGSIb3DQEBAQUAA4IBDwAwggEK
+AoIBAQC7AhUozPaglNMPEuyNVZLD+ILxmaZ6QoinXSaqtSu5xUyxr45r+XXIo9cP
+R5QUVTVXjJ6oojkZ9YI8QqlObvU7wy7bjcCwXPNZOOftz2nwWgsbvsCUJCWH+jdx
+sxPnHKzhm+/b5DtFUkWWqcFTzjTIUu61ru2P3mBw4qVUq7ZtDpelQDRrK9O8Zutm
+NHz6a4uPVymZ+DAXXbpyb/uBxa3Shlg9F8fnCbvxK/eG3MHacV3URuPMrSXBiLxg
+Z3Vms/EY96Jc5lP/Ooi2R6X/ExjqmAl3P51T+c8B5fWmcBcUr2Ok/5mzk53cU6cG
+/kiFHaFpriV1uxPMUgP17VGhi9sVAgMBAAGjggEIMIIBBDAOBgNVHQ8BAf8EBAMC
+AYYwHQYDVR0lBBYwFAYIKwYBBQUHAwIGCCsGAQUFBwMBMBIGA1UdEwEB/wQIMAYB
+Af8CAQAwHQYDVR0OBBYEFBQusxe3WFbLrlAJQOYfr52LFMLGMB8GA1UdIwQYMBaA
+FHm0WeZ7tuXkAXOACIjIGlj26ZtuMDIGCCsGAQUFBwEBBCYwJDAiBggrBgEFBQcw
+AoYWaHR0cDovL3gxLmkubGVuY3Iub3JnLzAnBgNVHR8EIDAeMBygGqAYhhZodHRw
+Oi8veDEuYy5sZW5jci5vcmcvMCIGA1UdIAQbMBkwCAYGZ4EMAQIBMA0GCysGAQQB
+gt8TAQEBMA0GCSqGSIb3DQEBCwUAA4ICAQCFyk5HPqP3hUSFvNVneLKYY611TR6W
+PTNlclQtgaDqw+34IL9fzLdwALduO/ZelN7kIJ+m74uyA+eitRY8kc607TkC53wl
+ikfmZW4/RvTZ8M6UK+5UzhK8jCdLuMGYL6KvzXGRSgi3yLgjewQtCPkIVz6D2QQz
+CkcheAmCJ8MqyJu5zlzyZMjAvnnAT45tRAxekrsu94sQ4egdRCnbWSDtY7kh+BIm
+lJNXoB1lBMEKIq4QDUOXoRgffuDghje1WrG9ML+Hbisq/yFOGwXD9RiX8F6sw6W4
+avAuvDszue5L3sz85K+EC4Y/wFVDNvZo4TYXao6Z0f+lQKc0t8DQYzk1OXVu8rp2
+yJMC6alLbBfODALZvYH7n7do1AZls4I9d1P4jnkDrQoxB3UqQ9hVl3LEKQ73xF1O
+yK5GhDDX8oVfGKF5u+decIsH4YaTw7mP3GFxJSqv3+0lUFJoi5Lc5da149p90Ids
+hCExroL1+7mryIkXPeFM5TgO9r0rvZaBFOvV2z0gp35Z0+L4WPlbuEjN/lxPFin+
+HlUjr8gRsI3qfJOQFy/9rKIJR0Y/8Omwt/8oTWgy1mdeHmmjk7j1nYsvC9JSQ6Zv
+MldlTTKB3zhThV1+XWYp6rjd5JW1zbVWEkLNxE7GJThEUG3szgBVGP7pSWTUTsqX
+nLRbwHOoq7hHwg==
+-----END CERTIFICATE-----
+-----BEGIN CERTIFICATE-----
+MIIFYDCCBEigAwIBAgIQQAF3ITfU6UK47naqPGQKtzANBgkqhkiG9w0BAQsFADA/
+MSQwIgYDVQQKExtEaWdpdGFsIFNpZ25hdHVyZSBUcnVzdCBDby4xFzAVBgNVBAMT
+DkRTVCBSb290IENBIFgzMB4XDTIxMDEyMDE5MTQwM1oXDTI0MDkzMDE4MTQwM1ow
+TzELMAkGA1UEBhMCVVMxKTAnBgNVBAoTIEludGVybmV0IFNlY3VyaXR5IFJlc2Vh
+cmNoIEdyb3VwMRUwEwYDVQQDEwxJU1JHIFJvb3QgWDEwggIiMA0GCSqGSIb3DQEB
+AQUAA4ICDwAwggIKAoICAQCt6CRz9BQ385ueK1coHIe+3LffOJCMbjzmV6B493XC
+ov71am72AE8o295ohmxEk7axY/0UEmu/H9LqMZshftEzPLpI9d1537O4/xLxIZpL
+wYqGcWlKZmZsj348cL+tKSIG8+TA5oCu4kuPt5l+lAOf00eXfJlII1PoOK5PCm+D
+LtFJV4yAdLbaL9A4jXsDcCEbdfIwPPqPrt3aY6vrFk/CjhFLfs8L6P+1dy70sntK
+4EwSJQxwjQMpoOFTJOwT2e4ZvxCzSow/iaNhUd6shweU9GNx7C7ib1uYgeGJXDR5
+bHbvO5BieebbpJovJsXQEOEO3tkQjhb7t/eo98flAgeYjzYIlefiN5YNNnWe+w5y
+sR2bvAP5SQXYgd0FtCrWQemsAXaVCg/Y39W9Eh81LygXbNKYwagJZHduRze6zqxZ
+Xmidf3LWicUGQSk+WT7dJvUkyRGnWqNMQB9GoZm1pzpRboY7nn1ypxIFeFntPlF4
+FQsDj43QLwWyPntKHEtzBRL8xurgUBN8Q5N0s8p0544fAQjQMNRbcTa0B7rBMDBc
+SLeCO5imfWCKoqMpgsy6vYMEG6KDA0Gh1gXxG8K28Kh8hjtGqEgqiNx2mna/H2ql
+PRmP6zjzZN7IKw0KKP/32+IVQtQi0Cdd4Xn+GOdwiK1O5tmLOsbdJ1Fu/7xk9TND
+TwIDAQABo4IBRjCCAUIwDwYDVR0TAQH/BAUwAwEB/zAOBgNVHQ8BAf8EBAMCAQYw
+SwYIKwYBBQUHAQEEPzA9MDsGCCsGAQUFBzAChi9odHRwOi8vYXBwcy5pZGVudHJ1
+c3QuY29tL3Jvb3RzL2RzdHJvb3RjYXgzLnA3YzAfBgNVHSMEGDAWgBTEp7Gkeyxx
+tvhS5B1/8QVYIWJEDBUBgNVHSAETTBLMAgGBmeBDAECATA/BgsrBgEEAYLfEwEB
+ATAwMC4GCCsGAQUFBwIBFiJodHRwOi8vY3BzLnJvb3QteDEubGV0c2VuY3J5cHQu
+b3JnMDwGA1UdHwQ1MDMwMaAvoC2GK2h0dHA6Ly9jcmwuaWRlbnRydXN0LmNvbS9E
+U1RST09UQ0FYM0NSTC5jcmwwHQYDVR0OBBYEFHm0WeZ7tuXkAXOACIjIGlj26Ztu
+MA0GCSqGSIb3DQEBCwUAA4IBAQAKcwBslm7/DlLQrt2M51oGrS+o44+/yQoDFVDC
+5WxCu2+b9LRPwkSICHXM6webFGJueN7sJ7o5XPWioW5WlHAQU7G75K/QosMrAdSW
+9MUgNTP52GE24HGNtLi1qoJFlcDyqSMo59ahy2cI2qBDLKobkx/J3vWraV0T9VuG
+WCLKTVXkcGdtwlfFRjlBz4pYg1htmf5X6DYO8A4jqv2Il9DjXA6USbW1FzXSLr9O
+he8Y4IWS6wY7bCkjCWDcRQJMEhg76fsO3txE+FiYruq9RUWhiF1myv4Q6W+CyBFC
+Dfvp7OOGAN6dEOM4+qR9sdjoSYKEBpsr6GtPAQw4dy753ec5
+-----END CERTIFICATE-----
--- a/src/main/resources/privkey.pem
+++ b/src/main/resources/privkey.pem
@@ -0,0 +1,5 @@
+-----BEGIN PRIVATE KEY-----
+MIGHAgEAMBMGByqGSM49AgEGCCqGSM49AwEHBG0wawIBAQQg9kCIfgqNqFYgYU0Q
+HGi/jc5nLxhZxoXST5qeXBGtOAehRANCAASKtOgK5W+o2JPdHGqzK7b46YPtNgFb
+4JX3rf05bgWHAdoXHLOgJYjf/DeBk1UT/ljUK/AcCzCp+5qbQuN9uco4
+-----END PRIVATE KEY-----
Author	SHA1	Message	Date
Daniel	fd5718ec8f	Merge branch 'master' of https://github.com/lumijiez/ExpenseTrackerFAF into front-v3	2024-01-11 00:42:36 +02:00
Daniel	de86a9d474	Updated interface, fixed bug	2023-12-21 22:56:40 +02:00
Daniel	31087f82dd	Updated interface, fixed bug	2023-12-21 22:56:27 +02:00