diff --git a/src/main/java/com/faf223/expensetrackerfaf/web/src/routes/+page.svelte b/src/main/java/com/faf223/expensetrackerfaf/web/src/routes/+page.svelte
index 0d4f9a3..5a70387 100644
--- a/src/main/java/com/faf223/expensetrackerfaf/web/src/routes/+page.svelte
+++ b/src/main/java/com/faf223/expensetrackerfaf/web/src/routes/+page.svelte
@@ -2,7 +2,6 @@
     import { onMount } from "svelte";
 
     onMount(() => {
-        // Redirect to /auth/login
         window.location.href = '/auth/login';
     });
 </script>
diff --git a/src/main/java/com/faf223/expensetrackerfaf/web/src/routes/dashboard/+page.svelte b/src/main/java/com/faf223/expensetrackerfaf/web/src/routes/dashboard/+page.svelte
index 42adfe0..01f3657 100644
--- 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
@@ -3,15 +3,37 @@
     import SideMenu from './menu/SideMenu.svelte';
     import {selectedTab} from "./stores.js";
     import {globalStyles} from "./styles.js";
+    import StickyMenu from "./menu/StickyMenu.svelte";
+    import {onMount} from "svelte";
 
     function handleTabClick(tab) {
         selectedTab.set(tab);
     }
 
+    let screenWidth;
+
+    onMount(() => {
+        screenWidth = window.innerWidth;
+        const handleResize = () => {
+            console.log(screenWidth);
+            screenWidth = window.innerWidth;
+        };
+
+        window.addEventListener('resize', handleResize);
+
+        return () => {
+            window.removeEventListener('resize', handleResize);
+        };
+    });
+
 </script>
 
 <div id="wrapper" style="background-color: {$globalStyles.mainColor}">
-    <SideMenu onTabClick={handleTabClick} />
+    {#if screenWidth < 900}
+        <StickyMenu onTabClick={handleTabClick} />
+    {:else}
+        <SideMenu onTabClick={handleTabClick} />
+    {/if}
     <Dashboard />
 </div>
 
@@ -19,10 +41,18 @@
     @import url('https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400');
 
     #wrapper {
+        padding: 0;
+        margin: 0;
         display: flex;
         align-items: stretch;
         min-height: 100vh;
         max-height: 100%;
         transition: all 0.3s cubic-bezier(.25,.8,.25,1);
     }
+
+    @media only screen and (max-width: 900px) {
+        #wrapper {
+            flex-direction: column;
+        }
+    }
 </style>
\ No newline at end of file
diff --git 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
new file mode 100644
index 0000000..4ffecc0
--- /dev/null
+++ b/src/main/java/com/faf223/expensetrackerfaf/web/src/routes/dashboard/board/AdminPanel.svelte
@@ -0,0 +1 @@
+<h1>ADMIN PANEL</h1>
\ No newline at end of file
diff --git a/src/main/java/com/faf223/expensetrackerfaf/web/src/routes/dashboard/board/Dashboard.svelte b/src/main/java/com/faf223/expensetrackerfaf/web/src/routes/dashboard/board/Dashboard.svelte
index a956f8a..98ab047 100644
--- a/src/main/java/com/faf223/expensetrackerfaf/web/src/routes/dashboard/board/Dashboard.svelte
+++ b/src/main/java/com/faf223/expensetrackerfaf/web/src/routes/dashboard/board/Dashboard.svelte
@@ -4,7 +4,17 @@
         import ExpenseDashboard from "./ExpenseDashboard.svelte";
         import IncomeDashboard from "./IncomeDashboard.svelte";
         import Settings from "./Settings.svelte";
-        import { incomeData, expenseData, incomeTypes, expenseTypes, selectedTab } from "../stores.js";
+        import {
+            incomeData,
+            expenseData,
+            incomeTypes,
+            expenseTypes,
+            selectedTab,
+            monthIncome,
+            monthExpense,
+            tempExpense,
+            tempIncome
+        } from "../stores.js";
         import {globalStyles} from "../styles.js";
 
         let componentStyles;
@@ -16,6 +26,8 @@
 
         import axios from "axios";
         import Statistics from "./Statistics.svelte";
+        import AdminPanel from "./AdminPanel.svelte";
+        import Profile from "./Profile.svelte";
 
         onMount(async () => {
                 const token = getCookie('access_token');
@@ -32,8 +44,8 @@
                 };
 
             try {
-                var currentDate = new Date();
-                var currentMonth = currentDate.getMonth() + 1;
+                const currentDate = new Date();
+                const currentMonth = currentDate.getMonth() + 1;
                 const [incomeResponse, expenseResponse, incomeTypesResponse, expenseTypesResponse] = await Promise.all([
                     axios.get('https://trackio.online:8081/incomes/personal-incomes?month=' + currentMonth , config),
                     axios.get('https://trackio.online:8081/expenses/personal-expenses?month=' + currentMonth, config),
@@ -45,8 +57,15 @@
 
                 incomeData.set(incomeResponse.data);
                 expenseData.set(expenseResponse.data);
+
                 incomeTypes.set(incomeTypesResponse.data);
                 expenseTypes.set(expenseTypesResponse.data);
+
+                tempExpense.set(expenseResponse.data);
+                tempIncome.set(incomeResponse.data);
+
+                monthIncome.set(incomeResponse.data);
+                monthExpense.set(expenseResponse.data);
             } catch (error) {
                 console.error('Error:', error);
             }
@@ -67,6 +86,10 @@
                         <Settings />
                 {:else if $selectedTab === 'statistics'}
                         <Statistics />
+                {:else if $selectedTab === 'admin'}
+                        <AdminPanel />
+                {:else if $selectedTab === 'profile'}
+                        <Profile />
                 {/if}
 </div>
 
@@ -76,7 +99,6 @@
                 font-family: 'Source Sans Pro', sans-serif;
                 border-radius: 20px;
                 margin: 20px;
-                padding: 20px 20px 0;
                 min-width: 100px;
                 display: flex;
                 flex: 1 1 auto;
@@ -85,4 +107,12 @@
                 justify-content: stretch;
                 transition: all 0.3s cubic-bezier(.25,.8,.25,1);
         }
+
+        @media only screen and (max-width: 900px) {
+            #dashboard {
+                margin: 0;
+                flex-wrap: wrap;
+                width: 100%;
+            }
+        }
 </style>
diff --git 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
index 63c3b79..3896961 100644
--- 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
@@ -1,9 +1,59 @@
 <script>
     import DashHeader from "./expenses/other/DashHeader.svelte";
-    import DataMenu from "./expenses/other/DataMenu.svelte";
     import QuickInfobar from "./expenses/other/QuickInfobar.svelte";
+    import Expenses from "./expenses/infolists/Expenses.svelte";
+    import Graph3 from "./expenses/graphs/Graph3.svelte";
 </script>
 
-<DashHeader />
-<QuickInfobar />
-<DataMenu />
+<div class="expenseContainer">
+    <div class="dataHalf">
+        <div>
+            <DashHeader />
+            <QuickInfobar />
+        </div>
+
+        <div class="graphs">
+            <Graph3 />
+        </div>
+    </div>
+    <Expenses />
+</div>
+
+<style>
+    @media only screen and (max-width: 900px) {
+        .expenseContainer {
+            flex-wrap: wrap;
+            flex: 1 1 auto;
+            width: 100%;
+        }
+    }
+
+    .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;
+    }
+    .expenseContainer {
+        display: flex;
+        height: 100%;
+        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;
+        padding: 10px;
+    }
+</style>
+
diff --git a/src/main/java/com/faf223/expensetrackerfaf/web/src/routes/dashboard/board/Profile.svelte b/src/main/java/com/faf223/expensetrackerfaf/web/src/routes/dashboard/board/Profile.svelte
new file mode 100644
index 0000000..c74c94d
--- /dev/null
+++ b/src/main/java/com/faf223/expensetrackerfaf/web/src/routes/dashboard/board/Profile.svelte
@@ -0,0 +1 @@
+<h1>PROFILE</h1>
\ No newline at end of file
diff --git a/src/main/java/com/faf223/expensetrackerfaf/web/src/routes/dashboard/board/expenses/graphs/Graph3.svelte b/src/main/java/com/faf223/expensetrackerfaf/web/src/routes/dashboard/board/expenses/graphs/Graph3.svelte
index f7cae70..dc374c3 100644
--- a/src/main/java/com/faf223/expensetrackerfaf/web/src/routes/dashboard/board/expenses/graphs/Graph3.svelte
+++ b/src/main/java/com/faf223/expensetrackerfaf/web/src/routes/dashboard/board/expenses/graphs/Graph3.svelte
@@ -1,59 +1,44 @@
 <script>
 	import Chart from 'chart.js/auto';
 	import { onMount } from 'svelte';
-	import { incomeData, expenseData } from "../../../stores.js";
-	import {globalStyles} from "../../../styles.js";
+	import {monthIncome, monthExpense, isCategorizedExpense, categorizedExpense} 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];
+			// 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) {
 					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'
-									}
-								}
-							}
+							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);
+					if ($isCategorizedExpense === true) {
+						chart.data.labels = generatedData.labels;
+						chart.data.datasets = generatedData.datasets;
+					} else {
+						generatedData.datasets = generatedData.datasets.filter(dataset => dataset.label !== "Category");
+						chart.data.labels = generatedData.labels;
+						chart.data.datasets = generatedData.datasets;
+					}
 
-					const chartLabels = ['Incomes', 'Expenses'];
-					const chartValues = [totalIncomesUpd, totalExpensesUpd];
-					chart.data.labels = chartLabels;
-					chart.data.datasets[0].data = chartValues;
 					chart.update();
 				}
 			}
@@ -63,7 +48,55 @@
 	}
 
 	$: {
-		if ($incomeData || $expenseData) {
+		if (isCategorizedExpense) {
+			const allDates = [...new Set([...$monthExpense, ...$categorizedExpense].map(item => item.date))];
+			const uniqueDates = allDates.sort((a, b) => new Date(a) - new Date(b));
+
+			const categorizedValues = uniqueDates.map(date => $categorizedExpense.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));
+
+			generatedData = {
+				labels: uniqueDates,
+				datasets: [
+					{
+						label: "Category",
+						backgroundColor: "rgba(21, 194, 58, 0.4)",
+						borderColor: "rgba(21, 194, 58, 1)",
+						data: categorizedValues,
+						tension: 0.2,
+						fill: true
+					},
+					{
+						label: "Expense",
+						backgroundColor: "rgba(194, 21, 96, 0.4)",
+						borderColor: "rgba(194, 21, 96, 1)",
+						data: expenseValues,
+						tension: 0.4,
+						fill: true
+					}
+				]
+			};
+		} else {
+			const allDates = [...new Set([...$monthExpense].map(item => item.date))];
+			const uniqueDates = allDates.sort((a, b) => new Date(a) - new Date(b));
+
+			const expenseValues = uniqueDates.map(date => $monthExpense.filter(item => item.date === date).reduce((total, item) => total + item.amount, 0));
+
+			generatedData = {
+				labels: uniqueDates,
+				datasets:
+						{
+							label: "Expense",
+							backgroundColor: "rgba(194, 21, 96, 0.4)",
+							borderColor: "rgba(194, 21, 96, 1)",
+							data: expenseValues,
+							tension: 0.4,
+							fill: true
+						}
+			};
+		}
+
+		if ($monthIncome || $monthExpense || $isCategorizedExpense || $categorizedExpense) {
 			createGraph();
 		}
 	}
@@ -74,21 +107,22 @@
 </script>
 
 <div id="chart" style="background-color: {$globalStyles.mainColor}">
-	<canvas bind:this={chartCanvas}></canvas>
+	<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;
+		border-radius: 0 0 10px 10px;
+		margin: 0 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);
 	}
 </style>
diff --git a/src/main/java/com/faf223/expensetrackerfaf/web/src/routes/dashboard/board/expenses/infolists/ContentExpense.svelte b/src/main/java/com/faf223/expensetrackerfaf/web/src/routes/dashboard/board/expenses/infolists/ContentExpense.svelte
index b65dbbd..8283051 100644
--- a/src/main/java/com/faf223/expensetrackerfaf/web/src/routes/dashboard/board/expenses/infolists/ContentExpense.svelte
+++ b/src/main/java/com/faf223/expensetrackerfaf/web/src/routes/dashboard/board/expenses/infolists/ContentExpense.svelte
@@ -1,29 +1,23 @@
 <script>
-    import Modal from './Modal.svelte';
     import { writable } from 'svelte/store';
     import axios from 'axios';
     import { getCookie } from "svelte-cookie";
-    import {expenseTypes, expenseData} from "../../../stores.js";
+    import {expenseTypes, expenseData, dateText} from "../../../stores.js";
+    import { slide } from 'svelte/transition';
 
-
-    var showModal;
+    let showModal = false;
     let amount = '';
     let newData;
 
     const selectedExpenseId = writable('');
 
-    function addNewExpense(id, amount) {
+    function addNewExpense(expid, id, amount) {
         const today = new Date().toISOString().split('T')[0];
         const expenseCategory = $expenseTypes.find(incomeType => incomeType.id === id);
 
         if (expenseCategory) {
             const newExpense = {
-                expenseId: 0,
-                userDTO: {
-                    name: "Dummy",
-                    surname: "User",
-                    username: "dummyuser"
-                },
+                expenseId: expid,
                 expenseCategory: expenseCategory,
                 date: today,
                 amount: parseInt(amount)
@@ -31,7 +25,6 @@
 
             newData = $expenseData;
             newData.push(newExpense);
-            console.log(newExpense);
             $expenseData = newData;
         } else {
             console.error('Expense category not found for id:', id);
@@ -46,7 +39,6 @@
             amount: parseInt(amount),
         };
 
-        addNewExpense(selectedExpense.id, parseInt(amount));
         try {
             const token = getCookie('access_token');
 
@@ -58,7 +50,7 @@
             });
 
             if (response.status === 201) {
-                //console.log("cool");
+                addNewExpense(response.data.expenseId, selectedExpense.id, parseInt(amount));
             } else {
                 console.error('Error:', response.status);
             }
@@ -66,17 +58,21 @@
             console.error('Error:', error);
         }
     };
+
+    function toggleModal() {
+        showModal = !showModal;
+    }
 </script>
 
 <div id="exp">
     <div id="optionField">
-        <h2>Expenses</h2>
-        <div id="openModal" class="plus-button" role="button" tabindex="0" on:click={() => (showModal = true)} on:keydown={() => console.log("keydown")}>
+        <h2>Expenses: {$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="expense-form">
+        {#if showModal}
+        <div class="expense-form" transition:slide>
             <h3>Expense Details</h3>
             <div class="form-group">
                 <label for="amount">Amount:</label>
@@ -94,9 +90,13 @@
                 </select>
             </div>
 
-            <button class="btn btn-primary" on:click={createExpense}>Submit</button>
+            <div style="display: flex; justify-content: space-around">
+                <button class="btn btn-primary" on:click={createExpense}>SUBMIT</button>
+                <button class="btn btn-primary" on:click={() => showModal = false}>CANCEL</button>
+            </div>
+
         </div>
-    </Modal>
+    {/if}
 </div>
 
 
@@ -106,6 +106,32 @@
         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;
@@ -133,7 +159,26 @@
         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 {
diff --git a/src/main/java/com/faf223/expensetrackerfaf/web/src/routes/dashboard/board/expenses/infolists/Expenses.svelte b/src/main/java/com/faf223/expensetrackerfaf/web/src/routes/dashboard/board/expenses/infolists/Expenses.svelte
index 0f28cb4..0e66fa7 100644
--- a/src/main/java/com/faf223/expensetrackerfaf/web/src/routes/dashboard/board/expenses/infolists/Expenses.svelte
+++ b/src/main/java/com/faf223/expensetrackerfaf/web/src/routes/dashboard/board/expenses/infolists/Expenses.svelte
@@ -1,38 +1,349 @@
 <script>
     import ContentExpense from "./ContentExpense.svelte";
-    import { expenseData } from "../../../stores.js";
-    import { globalStyles } from "../../../styles.js";
+    import {
+        dateText,
+        expenseData,
+        expenseTypes,
+        incomeData,
+        tempExpense,
+        tempIncome,
+        monthIncome,
+        monthExpense,
+        isCategorizedExpense,
+        categorizedExpense
+    } 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 = {
-        'Groceries': "<svg xmlns=\"http://www.w3.org/2000/svg\" height=\"16\" width=\"18\" viewBox=\"0 0 576 512\"><!--!Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2023 Fonticons, Inc.--><path d=\"M0 24C0 10.7 10.7 0 24 0H69.5c22 0 41.5 12.8 50.6 32h411c26.3 0 45.5 25 38.6 50.4l-41 152.3c-8.5 31.4-37 53.3-69.5 53.3H170.7l5.4 28.5c2.2 11.3 12.1 19.5 23.6 19.5H488c13.3 0 24 10.7 24 24s-10.7 24-24 24H199.7c-34.6 0-64.3-24.6-70.7-58.5L77.4 54.5c-.7-3.8-4-6.5-7.9-6.5H24C10.7 48 0 37.3 0 24zM128 464a48 48 0 1 1 96 0 48 48 0 1 1 -96 0zm336-48a48 48 0 1 1 0 96 48 48 0 1 1 0-96z\"/></svg>",
-        'Utilities': "<svg xmlns=\"http://www.w3.org/2000/svg\" height=\"16\" width=\"16\" viewBox=\"0 0 512 512\"><!--!Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2023 Fonticons, Inc.--><path d=\"M176 88v40H336V88c0-4.4-3.6-8-8-8H184c-4.4 0-8 3.6-8 8zm-48 40V88c0-30.9 25.1-56 56-56H328c30.9 0 56 25.1 56 56v40h28.1c12.7 0 24.9 5.1 33.9 14.1l51.9 51.9c9 9 14.1 21.2 14.1 33.9V304H384V288c0-17.7-14.3-32-32-32s-32 14.3-32 32v16H192V288c0-17.7-14.3-32-32-32s-32 14.3-32 32v16H0V227.9c0-12.7 5.1-24.9 14.1-33.9l51.9-51.9c9-9 21.2-14.1 33.9-14.1H128zM0 416V336H128v16c0 17.7 14.3 32 32 32s32-14.3 32-32V336H320v16c0 17.7 14.3 32 32 32s32-14.3 32-32V336H512v80c0 35.3-28.7 64-64 64H64c-35.3 0-64-28.7-64-64z\"/></svg>",
-        'Rent': "<svg xmlns=\"http://www.w3.org/2000/svg\" height=\"16\" width=\"18\" viewBox=\"0 0 576 512\"><!--!Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2023 Fonticons, Inc.--><path d=\"M575.8 255.5c0 18-15 32.1-32 32.1h-32l.7 160.2c0 2.7-.2 5.4-.5 8.1V472c0 22.1-17.9 40-40 40H456c-1.1 0-2.2 0-3.3-.1c-1.4 .1-2.8 .1-4.2 .1H416 392c-22.1 0-40-17.9-40-40V448 384c0-17.7-14.3-32-32-32H256c-17.7 0-32 14.3-32 32v64 24c0 22.1-17.9 40-40 40H160 128.1c-1.5 0-3-.1-4.5-.2c-1.2 .1-2.4 .2-3.6 .2H104c-22.1 0-40-17.9-40-40V360c0-.9 0-1.9 .1-2.8V287.6H32c-18 0-32-14-32-32.1c0-9 3-17 10-24L266.4 8c7-7 15-8 22-8s15 2 21 7L564.8 231.5c8 7 12 15 11 24z\"/></svg>",
-        'Transportation': "<svg xmlns=\"http://www.w3.org/2000/svg\" height=\"16\" width=\"16\" viewBox=\"0 0 512 512\"><!--!Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2023 Fonticons, Inc.--><path d=\"M135.2 117.4L109.1 192H402.9l-26.1-74.6C372.3 104.6 360.2 96 346.6 96H165.4c-13.6 0-25.7 8.6-30.2 21.4zM39.6 196.8L74.8 96.3C88.3 57.8 124.6 32 165.4 32H346.6c40.8 0 77.1 25.8 90.6 64.3l35.2 100.5c23.2 9.6 39.6 32.5 39.6 59.2V400v48c0 17.7-14.3 32-32 32H448c-17.7 0-32-14.3-32-32V400H96v48c0 17.7-14.3 32-32 32H32c-17.7 0-32-14.3-32-32V400 256c0-26.7 16.4-49.6 39.6-59.2zM128 288a32 32 0 1 0 -64 0 32 32 0 1 0 64 0zm288 32a32 32 0 1 0 0-64 32 32 0 1 0 0 64z\"/></svg>",
-        'Education': "<svg xmlns=\"http://www.w3.org/2000/svg\" height=\"16\" width=\"20\" viewBox=\"0 0 640 512\"><!--!Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2023 Fonticons, Inc.--><path d=\"M337.8 5.4C327-1.8 313-1.8 302.2 5.4L166.3 96H48C21.5 96 0 117.5 0 144V464c0 26.5 21.5 48 48 48H256V416c0-35.3 28.7-64 64-64s64 28.7 64 64v96H592c26.5 0 48-21.5 48-48V144c0-26.5-21.5-48-48-48H473.7L337.8 5.4zM96 192h32c8.8 0 16 7.2 16 16v64c0 8.8-7.2 16-16 16H96c-8.8 0-16-7.2-16-16V208c0-8.8 7.2-16 16-16zm400 16c0-8.8 7.2-16 16-16h32c8.8 0 16 7.2 16 16v64c0 8.8-7.2 16-16 16H512c-8.8 0-16-7.2-16-16V208zM96 320h32c8.8 0 16 7.2 16 16v64c0 8.8-7.2 16-16 16H96c-8.8 0-16-7.2-16-16V336c0-8.8 7.2-16 16-16zm400 16c0-8.8 7.2-16 16-16h32c8.8 0 16 7.2 16 16v64c0 8.8-7.2 16-16 16H512c-8.8 0-16-7.2-16-16V336zM232 176a88 88 0 1 1 176 0 88 88 0 1 1 -176 0zm88-48c-8.8 0-16 7.2-16 16v32c0 8.8 7.2 16 16 16h32c8.8 0 16-7.2 16-16s-7.2-16-16-16H336V144c0-8.8-7.2-16-16-16z\"/></svg>",
-        'Restaurants & Cafes': "<svg xmlns=\"http://www.w3.org/2000/svg\" height=\"16\" width=\"16\" viewBox=\"0 0 512 512\"><!--!Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2023 Fonticons, Inc.--><path d=\"M0 192c0-35.3 28.7-64 64-64c.5 0 1.1 0 1.6 0C73 91.5 105.3 64 144 64c15 0 29 4.1 40.9 11.2C198.2 49.6 225.1 32 256 32s57.8 17.6 71.1 43.2C339 68.1 353 64 368 64c38.7 0 71 27.5 78.4 64c.5 0 1.1 0 1.6 0c35.3 0 64 28.7 64 64c0 11.7-3.1 22.6-8.6 32H8.6C3.1 214.6 0 203.7 0 192zm0 91.4C0 268.3 12.3 256 27.4 256H484.6c15.1 0 27.4 12.3 27.4 27.4c0 70.5-44.4 130.7-106.7 154.1L403.5 452c-2 16-15.6 28-31.8 28H140.2c-16.1 0-29.8-12-31.8-28l-1.8-14.4C44.4 414.1 0 353.9 0 283.4z\"/></svg>",
-        'Home Maintenance': "<svg xmlns=\"http://www.w3.org/2000/svg\" height=\"16\" width=\"18\" viewBox=\"0 0 576 512\"><!--!Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2023 Fonticons, Inc.--><path d=\"M575.8 255.5c0 18-15 32.1-32 32.1h-32l.7 160.2c0 2.7-.2 5.4-.5 8.1V472c0 22.1-17.9 40-40 40H456c-1.1 0-2.2 0-3.3-.1c-1.4 .1-2.8 .1-4.2 .1H416 392c-22.1 0-40-17.9-40-40V448 384c0-17.7-14.3-32-32-32H256c-17.7 0-32 14.3-32 32v64 24c0 22.1-17.9 40-40 40H160 128.1c-1.5 0-3-.1-4.5-.2c-1.2 .1-2.4 .2-3.6 .2H104c-22.1 0-40-17.9-40-40V360c0-.9 0-1.9 .1-2.8V287.6H32c-18 0-32-14-32-32.1c0-9 3-17 10-24L266.4 8c7-7 15-8 22-8s15 2 21 7L564.8 231.5c8 7 12 15 11 24z\"/></svg>",
-        'Transport': "<svg xmlns=\"http://www.w3.org/2000/svg\" height=\"16\" width=\"16\" viewBox=\"0 0 512 512\"><!--!Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2023 Fonticons, Inc.--><path d=\"M135.2 117.4L109.1 192H402.9l-26.1-74.6C372.3 104.6 360.2 96 346.6 96H165.4c-13.6 0-25.7 8.6-30.2 21.4zM39.6 196.8L74.8 96.3C88.3 57.8 124.6 32 165.4 32H346.6c40.8 0 77.1 25.8 90.6 64.3l35.2 100.5c23.2 9.6 39.6 32.5 39.6 59.2V400v48c0 17.7-14.3 32-32 32H448c-17.7 0-32-14.3-32-32V400H96v48c0 17.7-14.3 32-32 32H32c-17.7 0-32-14.3-32-32V400 256c0-26.7 16.4-49.6 39.6-59.2zM128 288a32 32 0 1 0 -64 0 32 32 0 1 0 64 0zm288 32a32 32 0 1 0 0-64 32 32 0 1 0 0 64z\"/></svg>",
-        'Shopping': "<svg xmlns=\"http://www.w3.org/2000/svg\" height=\"16\" width=\"18\" viewBox=\"0 0 576 512\"><!--!Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2023 Fonticons, Inc.--><path d=\"M0 24C0 10.7 10.7 0 24 0H69.5c22 0 41.5 12.8 50.6 32h411c26.3 0 45.5 25 38.6 50.4l-41 152.3c-8.5 31.4-37 53.3-69.5 53.3H170.7l5.4 28.5c2.2 11.3 12.1 19.5 23.6 19.5H488c13.3 0 24 10.7 24 24s-10.7 24-24 24H199.7c-34.6 0-64.3-24.6-70.7-58.5L77.4 54.5c-.7-3.8-4-6.5-7.9-6.5H24C10.7 48 0 37.3 0 24zM128 464a48 48 0 1 1 96 0 48 48 0 1 1 -96 0zm336-48a48 48 0 1 1 0 96 48 48 0 1 1 0-96z\"/></svg>",
-        'Miscellaneous': "<svg xmlns=\"http://www.w3.org/2000/svg\" height=\"16\" width=\"16\" viewBox=\"0 0 512 512\"><!--!Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2023 Fonticons, Inc.--><path d=\"M403.8 34.4c12-5 25.7-2.2 34.9 6.9l64 64c6 6 9.4 14.1 9.4 22.6s-3.4 16.6-9.4 22.6l-64 64c-9.2 9.2-22.9 11.9-34.9 6.9s-19.8-16.6-19.8-29.6V160H352c-10.1 0-19.6 4.7-25.6 12.8L284 229.3 244 176l31.2-41.6C293.3 110.2 321.8 96 352 96h32V64c0-12.9 7.8-24.6 19.8-29.6zM164 282.7L204 336l-31.2 41.6C154.7 401.8 126.2 416 96 416H32c-17.7 0-32-14.3-32-32s14.3-32 32-32H96c10.1 0 19.6-4.7 25.6-12.8L164 282.7zm274.6 188c-9.2 9.2-22.9 11.9-34.9 6.9s-19.8-16.6-19.8-29.6V416H352c-30.2 0-58.7-14.2-76.8-38.4L121.6 172.8c-6-8.1-15.5-12.8-25.6-12.8H32c-17.7 0-32-14.3-32-32s14.3-32 32-32H96c30.2 0 58.7 14.2 76.8 38.4L326.4 339.2c6 8.1 15.5 12.8 25.6 12.8h32V320c0-12.9 7.8-24.6 19.8-29.6s25.7-2.2 34.9 6.9l64 64c6 6 9.4 14.1 9.4 22.6s-3.4 16.6-9.4 22.6l-64 64z\"/></svg>",
-        'Charity': "<svg xmlns=\"http://www.w3.org/2000/svg\" height=\"16\" width=\"18\" viewBox=\"0 0 576 512\"><!--!Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2023 Fonticons, Inc.--><path d=\"M163.9 136.9c-29.4-29.8-29.4-78.2 0-108s77-29.8 106.4 0l17.7 18 17.7-18c29.4-29.8 77-29.8 106.4 0s29.4 78.2 0 108L310.5 240.1c-6.2 6.3-14.3 9.4-22.5 9.4s-16.3-3.1-22.5-9.4L163.9 136.9zM568.2 336.3c13.1 17.8 9.3 42.8-8.5 55.9L433.1 485.5c-23.4 17.2-51.6 26.5-80.7 26.5H192 32c-17.7 0-32-14.3-32-32V416c0-17.7 14.3-32 32-32H68.8l44.9-36c22.7-18.2 50.9-28 80-28H272h16 64c17.7 0 32 14.3 32 32s-14.3 32-32 32H288 272c-8.8 0-16 7.2-16 16s7.2 16 16 16H392.6l119.7-88.2c17.8-13.1 42.8-9.3 55.9 8.5zM193.6 384l0 0-.9 0c.3 0 .6 0 .9 0z\"/></svg>",
-        'Legal Services': "<svg xmlns=\"http://www.w3.org/2000/svg\" height=\"16\" width=\"16\" viewBox=\"0 0 512 512\"><!--!Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2023 Fonticons, Inc.--><path d=\"M318.6 9.4c-12.5-12.5-32.8-12.5-45.3 0l-120 120c-12.5 12.5-12.5 32.8 0 45.3l16 16c12.5 12.5 32.8 12.5 45.3 0l4-4L325.4 293.4l-4 4c-12.5 12.5-12.5 32.8 0 45.3l16 16c12.5 12.5 32.8 12.5 45.3 0l120-120c12.5-12.5 12.5-32.8 0-45.3l-16-16c-12.5-12.5-32.8-12.5-45.3 0l-4 4L330.6 74.6l4-4c12.5-12.5 12.5-32.8 0-45.3l-16-16zm-152 288c-12.5-12.5-32.8-12.5-45.3 0l-112 112c-12.5 12.5-12.5 32.8 0 45.3l48 48c12.5 12.5 32.8 12.5 45.3 0l112-112c12.5-12.5 12.5-32.8 0-45.3l-1.4-1.4L272 285.3 226.7 240 168 298.7l-1.4-1.4z\"/></svg>"
+        'Groceries': "<svg fill=\"#299146\" xmlns=\"http://www.w3.org/2000/svg\" height=\"16\" width=\"18\" viewBox=\"0 0 576 512\"><!--!Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2023 Fonticons, Inc.--><path d=\"M0 24C0 10.7 10.7 0 24 0H69.5c22 0 41.5 12.8 50.6 32h411c26.3 0 45.5 25 38.6 50.4l-41 152.3c-8.5 31.4-37 53.3-69.5 53.3H170.7l5.4 28.5c2.2 11.3 12.1 19.5 23.6 19.5H488c13.3 0 24 10.7 24 24s-10.7 24-24 24H199.7c-34.6 0-64.3-24.6-70.7-58.5L77.4 54.5c-.7-3.8-4-6.5-7.9-6.5H24C10.7 48 0 37.3 0 24zM128 464a48 48 0 1 1 96 0 48 48 0 1 1 -96 0zm336-48a48 48 0 1 1 0 96 48 48 0 1 1 0-96z\"/></svg>",
+        'Utilities': "<svg fill=\"#8f0611\" xmlns=\"http://www.w3.org/2000/svg\" height=\"16\" width=\"16\" viewBox=\"0 0 512 512\"><!--!Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2023 Fonticons, Inc.--><path d=\"M176 88v40H336V88c0-4.4-3.6-8-8-8H184c-4.4 0-8 3.6-8 8zm-48 40V88c0-30.9 25.1-56 56-56H328c30.9 0 56 25.1 56 56v40h28.1c12.7 0 24.9 5.1 33.9 14.1l51.9 51.9c9 9 14.1 21.2 14.1 33.9V304H384V288c0-17.7-14.3-32-32-32s-32 14.3-32 32v16H192V288c0-17.7-14.3-32-32-32s-32 14.3-32 32v16H0V227.9c0-12.7 5.1-24.9 14.1-33.9l51.9-51.9c9-9 21.2-14.1 33.9-14.1H128zM0 416V336H128v16c0 17.7 14.3 32 32 32s32-14.3 32-32V336H320v16c0 17.7 14.3 32 32 32s32-14.3 32-32V336H512v80c0 35.3-28.7 64-64 64H64c-35.3 0-64-28.7-64-64z\"/></svg>",
+        'Rent': "<svg fill=\"#386907\" xmlns=\"http://www.w3.org/2000/svg\" height=\"16\" width=\"18\" viewBox=\"0 0 576 512\"><!--!Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2023 Fonticons, Inc.--><path d=\"M575.8 255.5c0 18-15 32.1-32 32.1h-32l.7 160.2c0 2.7-.2 5.4-.5 8.1V472c0 22.1-17.9 40-40 40H456c-1.1 0-2.2 0-3.3-.1c-1.4 .1-2.8 .1-4.2 .1H416 392c-22.1 0-40-17.9-40-40V448 384c0-17.7-14.3-32-32-32H256c-17.7 0-32 14.3-32 32v64 24c0 22.1-17.9 40-40 40H160 128.1c-1.5 0-3-.1-4.5-.2c-1.2 .1-2.4 .2-3.6 .2H104c-22.1 0-40-17.9-40-40V360c0-.9 0-1.9 .1-2.8V287.6H32c-18 0-32-14-32-32.1c0-9 3-17 10-24L266.4 8c7-7 15-8 22-8s15 2 21 7L564.8 231.5c8 7 12 15 11 24z\"/></svg>",
+        'Transportation': "<svg fill=\"#027874\" xmlns=\"http://www.w3.org/2000/svg\" height=\"16\" width=\"16\" viewBox=\"0 0 512 512\"><!--!Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2023 Fonticons, Inc.--><path d=\"M135.2 117.4L109.1 192H402.9l-26.1-74.6C372.3 104.6 360.2 96 346.6 96H165.4c-13.6 0-25.7 8.6-30.2 21.4zM39.6 196.8L74.8 96.3C88.3 57.8 124.6 32 165.4 32H346.6c40.8 0 77.1 25.8 90.6 64.3l35.2 100.5c23.2 9.6 39.6 32.5 39.6 59.2V400v48c0 17.7-14.3 32-32 32H448c-17.7 0-32-14.3-32-32V400H96v48c0 17.7-14.3 32-32 32H32c-17.7 0-32-14.3-32-32V400 256c0-26.7 16.4-49.6 39.6-59.2zM128 288a32 32 0 1 0 -64 0 32 32 0 1 0 64 0zm288 32a32 32 0 1 0 0-64 32 32 0 1 0 0 64z\"/></svg>",
+        'Education': "<svg fill=\"#091094\" xmlns=\"http://www.w3.org/2000/svg\" height=\"16\" width=\"20\" viewBox=\"0 0 640 512\"><!--!Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2023 Fonticons, Inc.--><path d=\"M337.8 5.4C327-1.8 313-1.8 302.2 5.4L166.3 96H48C21.5 96 0 117.5 0 144V464c0 26.5 21.5 48 48 48H256V416c0-35.3 28.7-64 64-64s64 28.7 64 64v96H592c26.5 0 48-21.5 48-48V144c0-26.5-21.5-48-48-48H473.7L337.8 5.4zM96 192h32c8.8 0 16 7.2 16 16v64c0 8.8-7.2 16-16 16H96c-8.8 0-16-7.2-16-16V208c0-8.8 7.2-16 16-16zm400 16c0-8.8 7.2-16 16-16h32c8.8 0 16 7.2 16 16v64c0 8.8-7.2 16-16 16H512c-8.8 0-16-7.2-16-16V208zM96 320h32c8.8 0 16 7.2 16 16v64c0 8.8-7.2 16-16 16H96c-8.8 0-16-7.2-16-16V336c0-8.8 7.2-16 16-16zm400 16c0-8.8 7.2-16 16-16h32c8.8 0 16 7.2 16 16v64c0 8.8-7.2 16-16 16H512c-8.8 0-16-7.2-16-16V336zM232 176a88 88 0 1 1 176 0 88 88 0 1 1 -176 0zm88-48c-8.8 0-16 7.2-16 16v32c0 8.8 7.2 16 16 16h32c8.8 0 16-7.2 16-16s-7.2-16-16-16H336V144c0-8.8-7.2-16-16-16z\"/></svg>",
+        'Restaurants & Cafes': "<svg fill=\"#961115\" xmlns=\"http://www.w3.org/2000/svg\" height=\"16\" width=\"16\" viewBox=\"0 0 512 512\"><!--!Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2023 Fonticons, Inc.--><path d=\"M0 192c0-35.3 28.7-64 64-64c.5 0 1.1 0 1.6 0C73 91.5 105.3 64 144 64c15 0 29 4.1 40.9 11.2C198.2 49.6 225.1 32 256 32s57.8 17.6 71.1 43.2C339 68.1 353 64 368 64c38.7 0 71 27.5 78.4 64c.5 0 1.1 0 1.6 0c35.3 0 64 28.7 64 64c0 11.7-3.1 22.6-8.6 32H8.6C3.1 214.6 0 203.7 0 192zm0 91.4C0 268.3 12.3 256 27.4 256H484.6c15.1 0 27.4 12.3 27.4 27.4c0 70.5-44.4 130.7-106.7 154.1L403.5 452c-2 16-15.6 28-31.8 28H140.2c-16.1 0-29.8-12-31.8-28l-1.8-14.4C44.4 414.1 0 353.9 0 283.4z\"/></svg>",
+        'Home Maintenance': "<svg fill=\"#386907\" xmlns=\"http://www.w3.org/2000/svg\" height=\"16\" width=\"18\" viewBox=\"0 0 576 512\"><!--!Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2023 Fonticons, Inc.--><path d=\"M575.8 255.5c0 18-15 32.1-32 32.1h-32l.7 160.2c0 2.7-.2 5.4-.5 8.1V472c0 22.1-17.9 40-40 40H456c-1.1 0-2.2 0-3.3-.1c-1.4 .1-2.8 .1-4.2 .1H416 392c-22.1 0-40-17.9-40-40V448 384c0-17.7-14.3-32-32-32H256c-17.7 0-32 14.3-32 32v64 24c0 22.1-17.9 40-40 40H160 128.1c-1.5 0-3-.1-4.5-.2c-1.2 .1-2.4 .2-3.6 .2H104c-22.1 0-40-17.9-40-40V360c0-.9 0-1.9 .1-2.8V287.6H32c-18 0-32-14-32-32.1c0-9 3-17 10-24L266.4 8c7-7 15-8 22-8s15 2 21 7L564.8 231.5c8 7 12 15 11 24z\"/></svg>",
+        'Transport': "<svg fill=\"#027874\" xmlns=\"http://www.w3.org/2000/svg\" height=\"16\" width=\"16\" viewBox=\"0 0 512 512\"><!--!Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2023 Fonticons, Inc.--><path d=\"M135.2 117.4L109.1 192H402.9l-26.1-74.6C372.3 104.6 360.2 96 346.6 96H165.4c-13.6 0-25.7 8.6-30.2 21.4zM39.6 196.8L74.8 96.3C88.3 57.8 124.6 32 165.4 32H346.6c40.8 0 77.1 25.8 90.6 64.3l35.2 100.5c23.2 9.6 39.6 32.5 39.6 59.2V400v48c0 17.7-14.3 32-32 32H448c-17.7 0-32-14.3-32-32V400H96v48c0 17.7-14.3 32-32 32H32c-17.7 0-32-14.3-32-32V400 256c0-26.7 16.4-49.6 39.6-59.2zM128 288a32 32 0 1 0 -64 0 32 32 0 1 0 64 0zm288 32a32 32 0 1 0 0-64 32 32 0 1 0 0 64z\"/></svg>",
+        'Shopping': "<svg fill=\"#2b26ad\" xmlns=\"http://www.w3.org/2000/svg\" height=\"16\" width=\"18\" viewBox=\"0 0 576 512\"><!--!Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2023 Fonticons, Inc.--><path d=\"M0 24C0 10.7 10.7 0 24 0H69.5c22 0 41.5 12.8 50.6 32h411c26.3 0 45.5 25 38.6 50.4l-41 152.3c-8.5 31.4-37 53.3-69.5 53.3H170.7l5.4 28.5c2.2 11.3 12.1 19.5 23.6 19.5H488c13.3 0 24 10.7 24 24s-10.7 24-24 24H199.7c-34.6 0-64.3-24.6-70.7-58.5L77.4 54.5c-.7-3.8-4-6.5-7.9-6.5H24C10.7 48 0 37.3 0 24zM128 464a48 48 0 1 1 96 0 48 48 0 1 1 -96 0zm336-48a48 48 0 1 1 0 96 48 48 0 1 1 0-96z\"/></svg>",
+        'Miscellaneous': "<svg fill=\"#299146\" xmlns=\"http://www.w3.org/2000/svg\" height=\"16\" width=\"16\" viewBox=\"0 0 512 512\"><!--!Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2023 Fonticons, Inc.--><path d=\"M403.8 34.4c12-5 25.7-2.2 34.9 6.9l64 64c6 6 9.4 14.1 9.4 22.6s-3.4 16.6-9.4 22.6l-64 64c-9.2 9.2-22.9 11.9-34.9 6.9s-19.8-16.6-19.8-29.6V160H352c-10.1 0-19.6 4.7-25.6 12.8L284 229.3 244 176l31.2-41.6C293.3 110.2 321.8 96 352 96h32V64c0-12.9 7.8-24.6 19.8-29.6zM164 282.7L204 336l-31.2 41.6C154.7 401.8 126.2 416 96 416H32c-17.7 0-32-14.3-32-32s14.3-32 32-32H96c10.1 0 19.6-4.7 25.6-12.8L164 282.7zm274.6 188c-9.2 9.2-22.9 11.9-34.9 6.9s-19.8-16.6-19.8-29.6V416H352c-30.2 0-58.7-14.2-76.8-38.4L121.6 172.8c-6-8.1-15.5-12.8-25.6-12.8H32c-17.7 0-32-14.3-32-32s14.3-32 32-32H96c30.2 0 58.7 14.2 76.8 38.4L326.4 339.2c6 8.1 15.5 12.8 25.6 12.8h32V320c0-12.9 7.8-24.6 19.8-29.6s25.7-2.2 34.9 6.9l64 64c6 6 9.4 14.1 9.4 22.6s-3.4 16.6-9.4 22.6l-64 64z\"/></svg>",
+        'Charity': "<svg fill=\"#961189\" xmlns=\"http://www.w3.org/2000/svg\" height=\"16\" width=\"18\" viewBox=\"0 0 576 512\"><!--!Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2023 Fonticons, Inc.--><path d=\"M163.9 136.9c-29.4-29.8-29.4-78.2 0-108s77-29.8 106.4 0l17.7 18 17.7-18c29.4-29.8 77-29.8 106.4 0s29.4 78.2 0 108L310.5 240.1c-6.2 6.3-14.3 9.4-22.5 9.4s-16.3-3.1-22.5-9.4L163.9 136.9zM568.2 336.3c13.1 17.8 9.3 42.8-8.5 55.9L433.1 485.5c-23.4 17.2-51.6 26.5-80.7 26.5H192 32c-17.7 0-32-14.3-32-32V416c0-17.7 14.3-32 32-32H68.8l44.9-36c22.7-18.2 50.9-28 80-28H272h16 64c17.7 0 32 14.3 32 32s-14.3 32-32 32H288 272c-8.8 0-16 7.2-16 16s7.2 16 16 16H392.6l119.7-88.2c17.8-13.1 42.8-9.3 55.9 8.5zM193.6 384l0 0-.9 0c.3 0 .6 0 .9 0z\"/></svg>",
+        'Legal Services': "<svg fill=\"#916129\" xmlns=\"http://www.w3.org/2000/svg\" height=\"16\" width=\"16\" viewBox=\"0 0 512 512\"><!--!Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2023 Fonticons, Inc.--><path d=\"M318.6 9.4c-12.5-12.5-32.8-12.5-45.3 0l-120 120c-12.5 12.5-12.5 32.8 0 45.3l16 16c12.5 12.5 32.8 12.5 45.3 0l4-4L325.4 293.4l-4 4c-12.5 12.5-12.5 32.8 0 45.3l16 16c12.5 12.5 32.8 12.5 45.3 0l120-120c12.5-12.5 12.5-32.8 0-45.3l-16-16c-12.5-12.5-32.8-12.5-45.3 0l-4 4L330.6 74.6l4-4c12.5-12.5 12.5-32.8 0-45.3l-16-16zm-152 288c-12.5-12.5-32.8-12.5-45.3 0l-112 112c-12.5 12.5-12.5 32.8 0 45.3l48 48c12.5 12.5 32.8 12.5 45.3 0l112-112c12.5-12.5 12.5-32.8 0-45.3l-1.4-1.4L272 285.3 226.7 240 168 298.7l-1.4-1.4z\"/></svg>"
     };
+
+    let isDateDropdownExpanded = false
+    let isCategoryDropdownExpanded = false
+    let dropdownStates = {};
+    let deleteDropdownStates = {}
+
+    $: {
+        dropdownStates = {};
+        deleteDropdownStates = {};
+        $expenseData.toReversed().forEach(data => {
+            dropdownStates[data.expenseId] = false;
+            deleteDropdownStates[data.expenseId] = false;
+        });
+    }
+
+    function clickHandlerDate() {
+        isDateDropdownExpanded = !isDateDropdownExpanded
+    }
+
+    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 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() {
+        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);
+            const response2 = await axios.get('https://trackio.online:8081/incomes/personal-incomes?date=' + currentDay, {
+                headers: {
+                    'Authorization': `Bearer ${getCookie('access_token')}`
+                }
+            });
+            incomeData.set(response2.data);
+            tempIncome.set(response2.data);
+            $dateText = "Today"
+
+            $isCategorizedExpense = false;
+            categorizedExpense.set([]);
+        } 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);
+            const response2 = await axios.get('https://trackio.online:8081/incomes/personal-incomes?date=' + yesterdayString, {
+                headers: {
+                    'Authorization': `Bearer ${getCookie('access_token')}`
+                }
+            });
+            incomeData.set(response2.data);
+            tempIncome.set(response2.data);
+            $dateText = "Yesterday"
+        } catch (error) {
+            console.error("Error fetching expenses:", error);
+        }
+    }
+
+    async function getMonth() {
+        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);
+            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);
+            $dateText = "This Month"
+
+            $isCategorizedExpense = false;
+            categorizedExpense.set([]);
+        } 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);
+            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);
+            $dateText = "Last Month"
+
+            $isCategorizedExpense = false;
+            categorizedExpense.set([]);
+        } 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);
+            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);
+            $dateText = "This Year"
+
+            $isCategorizedExpense = false;
+            categorizedExpense.set([]);
+        } catch (error) {
+            console.error("Error fetching expenses:", error);
+        }
+    }
+
+    function filterByCategory(category) {
+        $isCategorizedExpense = true;
+        console.log($isCategorizedExpense);
+        let tempArr = $tempExpense.filter(expense => expense.expenseCategory.name === category);
+        categorizedExpense.set(tempArr);
+        expenseData.set(tempArr);
+    }
+
+    function getAll() {
+        categorizedExpense.set([]);
+        $isCategorizedExpense = false;
+        console.log($isCategorizedExpense);
+        expenseData.set($tempExpense);
+    }
+
+    function doNothing() {
+
+    }
+
 </script>
 
 <div id="expenseInfo" style="background-color: {$globalStyles.mainColor}">
-    <ContentExpense />
+    <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}
+        </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>
+    </div>
     <div id="listContainer" style="color: {$globalStyles.color}">
         <ul>
-            {#each $expenseData.reverse() as item}
-                <li style="display:flex; justify-content: space-between; color: {$globalStyles.color}">
+            {#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>
                         {#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">{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="">{`${item.date}`}</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>
+                    </div>
+
+                    {#if dropdownStates[item.expenseId]}
+                        <EditEntry {item} bind:isOn={dropdownStates[item.expenseId]}/>
+                    {/if}
+
+                    {#if deleteDropdownStates[item.expenseId]}
+                        <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>
@@ -40,14 +351,107 @@
 </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;
+    }
+
+    #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%;
+        }
+
+        #expenseInfo {
+            margin: 0;
+            width: 100%;
+        }
+    }
+
+    #editBtn {
+        margin-left: 5px;
+        margin-right: 5px;
+        fill: darkblue;
+    }
+
+    .inputForm {
+        display: flex;
+        flex-direction: column;
+        margin-bottom: 10px;
+    }
+
+    #editBtn:hover {
+        cursor: pointer;
+        fill: lightseagreen;
+    }
+
+    #deleteBtn {
+        fill: red;
+    }
+
+    #deleteBtn:hover {
+        cursor: pointer;
+        fill: palevioletred;
+    }
 
     #expenseInfo {
-        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;
@@ -58,7 +462,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;
     }
@@ -67,19 +471,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;
     }
@@ -102,4 +503,87 @@
     #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;
+        position: absolute;
+        margin-top: 20px;
+        max-height: 400px;
+        overflow-y: scroll;
+        border-radius: 20px;
+        z-index: 1;
+    }
+
+    .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>
diff --git a/src/main/java/com/faf223/expensetrackerfaf/web/src/routes/dashboard/board/expenses/infolists/Modal.svelte b/src/main/java/com/faf223/expensetrackerfaf/web/src/routes/dashboard/board/expenses/infolists/Modal.svelte
deleted file mode 100644
index fca4643..0000000
--- a/src/main/java/com/faf223/expensetrackerfaf/web/src/routes/dashboard/board/expenses/infolists/Modal.svelte
+++ /dev/null
@@ -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>
diff --git 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
index c19c7e9..d09453e 100644
--- 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
@@ -30,8 +30,7 @@ import {globalStyles} from "../../../styles.js";
     #dashboardTitleWrapper {
         display: flex;
         flex-direction: column;
-        margin:20px;
-        margin-bottom: 0px;
+        margin: 20px 20px 0;
     }
 
     #dashboardTitleWrapper h5 {
diff --git a/src/main/java/com/faf223/expensetrackerfaf/web/src/routes/dashboard/board/expenses/other/DataMenu.svelte b/src/main/java/com/faf223/expensetrackerfaf/web/src/routes/dashboard/board/expenses/other/DataMenu.svelte
deleted file mode 100644
index c03fb20..0000000
--- a/src/main/java/com/faf223/expensetrackerfaf/web/src/routes/dashboard/board/expenses/other/DataMenu.svelte
+++ /dev/null
@@ -1,437 +0,0 @@
-<script>
-    import Graph2 from '../graphs/Graph2.svelte';
-    import Graph3 from '../graphs/Graph3.svelte';
-    import Expenses from "../infolists/Expenses.svelte";
-    import {globalStyles} from "../../../styles.js";
-    import { slide } from 'svelte/transition'
-    import {expenseTypes, expenseData, incomeData, dateText, tempExpense, tempIncome} from "../../../stores.js";
-    import axios from "axios";
-    import {getCookie} from "svelte-cookie";
-    import {onMount} from "svelte";
-
-    let isDateDropdownExpanded = false
-    let isCategoryDropdownExpanded = false
-    let expenseAnalysisText = "EXPENSE ANALYSIS: " + $dateText;
-
-    $ : {
-        expenseAnalysisText = "EXPENSE ANALYSIS: " + $dateText;
-    }
-
-    function clickHandlerDate() {
-        isDateDropdownExpanded = !isDateDropdownExpanded
-    }
-
-    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);
-
-        // Clean up the event listener when the component is destroyed
-        return () => {
-            document.body.removeEventListener("click", clickOutsideHandler);
-        };
-    });
-
-    async function getToday() {
-        var currentDate = new Date();
-        var currentDay = currentDate.toISOString().split('T')[0];
-        try {
-            const response1 = await axios.get('https://trackio.online:8081/expenses/personal-expenses?date=' + currentDay, {
-                headers: {
-                    'Authorization': `Bearer ${getCookie('access_token')}`
-                }
-            });
-            expenseData.set(response1.data);
-            tempExpense.set(response1.data);
-            const response2 = await axios.get('https://trackio.online:8081/incomes/personal-incomes?date=' + currentDay, {
-                headers: {
-                    'Authorization': `Bearer ${getCookie('access_token')}`
-                }
-            });
-            incomeData.set(response2.data);
-            tempIncome.set(response2.data);
-            $dateText = "Today"
-        } catch (error) {
-            console.error("Error fetching expenses:", error);
-        }
-    }
-
-    async function getYesterday() {
-        var currentDate = new Date();
-
-        var yesterday = new Date(currentDate);
-        yesterday.setDate(currentDate.getDate() - 1);
-
-        var yesterdayString = yesterday.toISOString().split('T')[0];
-
-        try {
-            const response1 = await axios.get('https://trackio.online:8081/expenses/personal-expenses?date=' + yesterdayString, {
-                headers: {
-                    'Authorization': `Bearer ${getCookie('access_token')}`
-                }
-            });
-            expenseData.set(response1.data);
-            tempExpense.set(response1.data);
-            const response2 = await axios.get('https://trackio.online:8081/incomes/personal-incomes?date=' + yesterdayString, {
-                headers: {
-                    'Authorization': `Bearer ${getCookie('access_token')}`
-                }
-            });
-            incomeData.set(response2.data);
-            tempIncome.set(response2.data);
-            $dateText = "Yesterday"
-        } catch (error) {
-            console.error("Error fetching expenses:", error);
-        }
-    }
-
-    async function getMonth() {
-        var currentDate = new Date();
-        var year = currentDate.getMonth() + 1;
-
-        try {
-            const response1 = await axios.get('https://trackio.online:8081/expenses/personal-expenses?month=' + year, {
-                headers: {
-                    'Authorization': `Bearer ${getCookie('access_token')}`
-                }
-            });
-
-            expenseData.set(response1.data);
-            tempExpense.set(response1.data);
-            const response2 = await axios.get('https://trackio.online:8081/incomes/personal-incomes?month=' + year, {
-                headers: {
-                    'Authorization': `Bearer ${getCookie('access_token')}`
-                }
-            });
-
-            incomeData.set(response2.data);
-            tempIncome.set(response2.data);
-            $dateText = "This Month"
-        } catch (error) {
-            console.error("Error fetching expenses:", error);
-        }
-    }
-
-    async function getLastMonth() {
-        var currentDate = new Date();
-        var year = currentDate.getMonth();
-
-        try {
-            const response1 = await axios.get('https://trackio.online:8081/expenses/personal-expenses?month=' + year, {
-                headers: {
-                    'Authorization': `Bearer ${getCookie('access_token')}`
-                }
-            });
-
-            expenseData.set(response1.data);
-            tempExpense.set(response1.data)
-            const response2 = await axios.get('https://trackio.online:8081/incomes/personal-incomes?month=' + year, {
-                headers: {
-                    'Authorization': `Bearer ${getCookie('access_token')}`
-                }
-            });
-
-            incomeData.set(response2.data);
-            tempIncome.set(response2.data);
-            $dateText = "Last Month"
-        } catch (error) {
-            console.error("Error fetching expenses:", error);
-        }
-    }
-
-    async function getLastYear() {
-        var currentDate = new Date();
-        var year = currentDate.getFullYear();
-
-        try {
-            const response1 = await axios.get('https://trackio.online:8081/expenses/personal-expenses?year=' + year, {
-                headers: {
-                    'Authorization': `Bearer ${getCookie('access_token')}`
-                }
-            });
-
-            expenseData.set(response1.data);
-            tempExpense.set(response1.data);
-            const response2 = await axios.get('https://trackio.online:8081/incomes/personal-incomes?year=' + year, {
-                headers: {
-                    'Authorization': `Bearer ${getCookie('access_token')}`
-                }
-            });
-
-            incomeData.set(response2.data);
-            tempIncome.set(response2.data);
-            $dateText = "This Year"
-        } catch (error) {
-            console.error("Error fetching expenses:", error);
-        }
-    }
-
-    function filterByCategory(category) {
-        let tempArr = $tempExpense.filter(expense => expense.expenseCategory.name === category);
-        expenseData.set(tempArr);
-    }
-</script>
-
-<div id="main-data" style="background-color: {$globalStyles.dashColor}; color: {$globalStyles.color}">
-    <div id="data-header" style="background-color:{$globalStyles.mainColor}; color: {$globalStyles.altColor}">
-        <span style="color: {$globalStyles.altColor}" contenteditable="false" bind:innerHTML={expenseAnalysisText}></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("Last month")}>Last month</div>-->
-<!--                    <div on:click={() => console.log("Current quarter")}>Current quarter</div>-->
-                    <div class="date-entry" on:click={() => getLastYear()}>This year</div>
-                </div>
-            {/if}
-        </div>
-
-        <div id="dropdown-category">
-            <button id="btn2" class="button" on:click={clickHandlerCategory}>Filter by Category ▼</button>
-            {#if isCategoryDropdownExpanded}
-                <div id="date-list" transition:slide>
-                    {#each $expenseTypes as expense (expense.id)}
-                        {#if expense.id !== undefined}
-                            <div class="date-entry" on:click={() => filterByCategory(expense.name)} value={expense.id}>{expense.name}</div>
-                        {/if}
-                    {/each}
-                </div>
-            {/if}
-        </div>
-    </div>
-    <div id="data-menu">
-        <div id="first-graph">
-            <Graph2 />
-        </div>
-        <div id="second-graph">
-            <Graph3 />
-        </div>
-        <Expenses />
-    </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;*/
-    /*}*/
-
-    /*.button {*/
-    /*    font-size: large;*/
-    /*    background-color: #007BFF;*/
-    /*    color: #fff;*/
-    /*    border: none;*/
-    /*    border-radius: 20px;*/
-    /*    line-height: 40px;*/
-    /*    cursor: pointer;*/
-    /*    margin: 10px;*/
-    /*}*/
-
-    /*.button:hover {*/
-    /*    background-color: #0056b3;*/
-    /*}*/
-
-
-    .button {
-        align-items: center;
-        background-color: #0A66C2;
-        border: 0;
-        border-radius: 100px;
-        box-sizing: border-box;
-        color: #ffffff;
-        cursor: pointer;
-        display: inline-flex;
-        font-family: -apple-system, system-ui, system-ui, "Segoe UI", Roboto, "Helvetica Neue", "Fira Sans", Ubuntu, Oxygen, "Oxygen Sans", Cantarell, "Droid Sans", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Lucida Grande", Helvetica, Arial, sans-serif;
-        font-size: 16px;
-        font-weight: 600;
-        justify-content: center;
-        line-height: 20px;
-        max-width: 480px;
-        min-height: 40px;
-        min-width: 0px;
-        overflow: hidden;
-        padding: 0px;
-        padding-left: 20px;
-        padding-right: 20px;
-        text-align: center;
-        touch-action: manipulation;
-        transition: background-color 0.167s cubic-bezier(0.4, 0, 0.2, 1) 0s, box-shadow 0.167s cubic-bezier(0.4, 0, 0.2, 1) 0s, color 0.167s cubic-bezier(0.4, 0, 0.2, 1) 0s;
-        user-select: none;
-        -webkit-user-select: none;
-        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: #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);
-    }
-
-    /*#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>
\ No newline at end of file
diff --git a/src/main/java/com/faf223/expensetrackerfaf/web/src/routes/dashboard/board/expenses/other/QuickInfobar.svelte b/src/main/java/com/faf223/expensetrackerfaf/web/src/routes/dashboard/board/expenses/other/QuickInfobar.svelte
index e150a09..9c64799 100644
--- a/src/main/java/com/faf223/expensetrackerfaf/web/src/routes/dashboard/board/expenses/other/QuickInfobar.svelte
+++ b/src/main/java/com/faf223/expensetrackerfaf/web/src/routes/dashboard/board/expenses/other/QuickInfobar.svelte
@@ -49,14 +49,17 @@
     #quickInfobar {
         display: flex;
         justify-content: space-between;
+        flex-wrap: wrap;
+        min-height: 0;
+        flex: 1 1 auto;
         margin: 20px;
     }
 
     .infobarElement {
         margin: 10px;
-        width: 200px;
-        min-width: 100px;
-        height: 100px;
+        min-width: 0px;
+        min-height: 0px;
+        flex: 1 1 auto;
         color: white;
         padding: 10px;
         border-radius: 10px;
diff --git a/src/main/java/com/faf223/expensetrackerfaf/web/src/routes/dashboard/board/expenses/util/EditEntry.svelte b/src/main/java/com/faf223/expensetrackerfaf/web/src/routes/dashboard/board/expenses/util/EditEntry.svelte
new file mode 100644
index 0000000..8901e74
--- /dev/null
+++ b/src/main/java/com/faf223/expensetrackerfaf/web/src/routes/dashboard/board/expenses/util/EditEntry.svelte
@@ -0,0 +1,114 @@
+<script>
+    import {expenseTypes} 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('expenseCategory').value;
+
+        console.log("tryna save: " + item.expenseId + " " + 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="expenseCategory" class="form-control">
+        {#each $expenseTypes as expense (expense.id)}
+            {#if expense.id !== undefined}
+                {#if expense.id === item.expenseCategory.id}
+                    <option value={expense.id} selected>{expense.name}</option>
+                {:else}
+                    <option value={expense.id}>{expense.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>
\ No newline at end of file
diff --git a/src/main/java/com/faf223/expensetrackerfaf/web/src/routes/dashboard/menu/SideMenu.svelte b/src/main/java/com/faf223/expensetrackerfaf/web/src/routes/dashboard/menu/SideMenu.svelte
index 69286ab..32ae702 100644
--- a/src/main/java/com/faf223/expensetrackerfaf/web/src/routes/dashboard/menu/SideMenu.svelte
+++ b/src/main/java/com/faf223/expensetrackerfaf/web/src/routes/dashboard/menu/SideMenu.svelte
@@ -6,6 +6,7 @@
     export let onTabClick;
 
     let username;
+    let isAdmin = true;
 
     onMount(async () => {
         const token = getCookie('access_token');
@@ -20,13 +21,15 @@
             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 doNothing() {
+    }
+
 </script>
 
 <div id="sideMenu">
@@ -37,33 +40,35 @@
     </div>
     
     <div id="menuSpace">
-        <div class="sideMenuItem">
-            <svg class="svgimg" xmlns="http://www.w3.org/2000/svg" height="1em" viewBox="0 0 448 512"><!--! Font Awesome Free 6.4.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --><path d="M224 256A128 128 0 1 0 224 0a128 128 0 1 0 0 256zm-45.7 48C79.8 304 0 383.8 0 482.3C0 498.7 13.3 512 29.7 512H418.3c16.4 0 29.7-13.3 29.7-29.7C448 383.8 368.2 304 269.7 304H178.3z"/></svg>
+        <div on:click={() => onTabClick('profile')} tabindex="0" role="button" class="sideMenuItem" on:keydown={doNothing}>
+            <svg class="svgimg" xmlns="http://www.w3.org/2000/svg" height="1em" viewBox="0 0 448 512"><path d="M224 256A128 128 0 1 0 224 0a128 128 0 1 0 0 256zm-45.7 48C79.8 304 0 383.8 0 482.3C0 498.7 13.3 512 29.7 512H418.3c16.4 0 29.7-13.3 29.7-29.7C448 383.8 368.2 304 269.7 304H178.3z"/></svg>
             <span class="sideMenuItemText">Profile</span>
         </div>
 
-        <div on:click={() => onTabClick('expenses')} tabindex="0" role="button" class="sideMenuItem">
-            <svg class="svgimg" xmlns="http://www.w3.org/2000/svg" height="1em" viewBox="0 0 576 512"><!--! Font Awesome Free 6.4.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) 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>
+        <div on:click={() => onTabClick('expenses')} tabindex="0" role="button" class="sideMenuItem" on:keydown={doNothing}>
+            <svg class="svgimg" xmlns="http://www.w3.org/2000/svg" height="1em" viewBox="0 0 576 512"><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>
             <span class="sideMenuItemText">Spendings</span>
         </div>
 
-        <div on:click={() => onTabClick('incomes')} tabindex="0" role="button" class="sideMenuItem">
-            <svg class="svgimg" xmlns="http://www.w3.org/2000/svg" height="1em" viewBox="0 0 576 512"><!--! Font Awesome Free 6.4.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) 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>
+        <div on:click={() => onTabClick('incomes')} tabindex="0" role="button" class="sideMenuItem" on:keydown={doNothing}>
+            <svg class="svgimg" xmlns="http://www.w3.org/2000/svg" height="1em" viewBox="0 0 576 512"><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>
             <span class="sideMenuItemText">Revenues</span>
         </div>
 
-        <div on:click={() => onTabClick('statistics')} tabindex="0" role="button" class="sideMenuItem">
-            <svg class="svgimg" xmlns="http://www.w3.org/2000/svg" height="16" width="14" viewBox="0 0 448 512"><!--!Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2023 Fonticons, Inc.--><path d="M160 80c0-26.5 21.5-48 48-48h32c26.5 0 48 21.5 48 48V432c0 26.5-21.5 48-48 48H208c-26.5 0-48-21.5-48-48V80zM0 272c0-26.5 21.5-48 48-48H80c26.5 0 48 21.5 48 48V432c0 26.5-21.5 48-48 48H48c-26.5 0-48-21.5-48-48V272zM368 96h32c26.5 0 48 21.5 48 48V432c0 26.5-21.5 48-48 48H368c-26.5 0-48-21.5-48-48V144c0-26.5 21.5-48 48-48z"/></svg>
+        <div on:click={() => onTabClick('statistics')} tabindex="0" role="button" class="sideMenuItem" on:keydown={doNothing}>
+            <svg class="svgimg" xmlns="http://www.w3.org/2000/svg" height="16" width="14" viewBox="0 0 448 512"><path d="M160 80c0-26.5 21.5-48 48-48h32c26.5 0 48 21.5 48 48V432c0 26.5-21.5 48-48 48H208c-26.5 0-48-21.5-48-48V80zM0 272c0-26.5 21.5-48 48-48H80c26.5 0 48 21.5 48 48V432c0 26.5-21.5 48-48 48H48c-26.5 0-48-21.5-48-48V272zM368 96h32c26.5 0 48 21.5 48 48V432c0 26.5-21.5 48-48 48H368c-26.5 0-48-21.5-48-48V144c0-26.5 21.5-48 48-48z"/></svg>
             <span class="sideMenuItemText">Statistics</span>
         </div>
 
-<!--        <div class="sideMenuItem">-->
-<!--            <svg class="svgimg" xmlns="http://www.w3.org/2000/svg" height="1em" viewBox="0 0 576 512">&lt;!&ndash;! Font Awesome Free 6.4.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. &ndash;&gt;<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>-->
-<!--            <span class="sideMenuItemText">General</span>-->
-<!--        </div>-->
+        {#if isAdmin}
+            <div on:click={() => onTabClick('admin')} tabindex="0" role="button" class="sideMenuItem" on:keydown={doNothing}>
+                <svg class="svgimg" xmlns="http://www.w3.org/2000/svg" height="16" width="14" viewBox="0 0 448 512"><path d="M96 128a128 128 0 1 0 256 0A128 128 0 1 0 96 128zm94.5 200.2l18.6 31L175.8 483.1l-36-146.9c-2-8.1-9.8-13.4-17.9-11.3C51.9 342.4 0 405.8 0 481.3c0 17 13.8 30.7 30.7 30.7H162.5c0 0 0 0 .1 0H168 280h5.5c0 0 0 0 .1 0H417.3c17 0 30.7-13.8 30.7-30.7c0-75.5-51.9-138.9-121.9-156.4c-8.1-2-15.9 3.3-17.9 11.3l-36 146.9L238.9 359.2l18.6-31c6.4-10.7-1.3-24.2-13.7-24.2H224 204.3c-12.4 0-20.1 13.6-13.7 24.2z"/></svg>
+                <span class="sideMenuItemText">Admin Panel</span>
+            </div>
+        {/if}
 
-        <div on:click={() => onTabClick('settings')} tabindex="0" role="button" class="sideMenuItem">
-            <svg class="svgimg" xmlns="http://www.w3.org/2000/svg" height="1em" viewBox="0 0 512 512"><!--! Font Awesome Free 6.4.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --><path d="M495.9 166.6c3.2 8.7 .5 18.4-6.4 24.6l-43.3 39.4c1.1 8.3 1.7 16.8 1.7 25.4s-.6 17.1-1.7 25.4l43.3 39.4c6.9 6.2 9.6 15.9 6.4 24.6c-4.4 11.9-9.7 23.3-15.8 34.3l-4.7 8.1c-6.6 11-14 21.4-22.1 31.2c-5.9 7.2-15.7 9.6-24.5 6.8l-55.7-17.7c-13.4 10.3-28.2 18.9-44 25.4l-12.5 57.1c-2 9.1-9 16.3-18.2 17.8c-13.8 2.3-28 3.5-42.5 3.5s-28.7-1.2-42.5-3.5c-9.2-1.5-16.2-8.7-18.2-17.8l-12.5-57.1c-15.8-6.5-30.6-15.1-44-25.4L83.1 425.9c-8.8 2.8-18.6 .3-24.5-6.8c-8.1-9.8-15.5-20.2-22.1-31.2l-4.7-8.1c-6.1-11-11.4-22.4-15.8-34.3c-3.2-8.7-.5-18.4 6.4-24.6l43.3-39.4C64.6 273.1 64 264.6 64 256s.6-17.1 1.7-25.4L22.4 191.2c-6.9-6.2-9.6-15.9-6.4-24.6c4.4-11.9 9.7-23.3 15.8-34.3l4.7-8.1c6.6-11 14-21.4 22.1-31.2c5.9-7.2 15.7-9.6 24.5-6.8l55.7 17.7c13.4-10.3 28.2-18.9 44-25.4l12.5-57.1c2-9.1 9-16.3 18.2-17.8C227.3 1.2 241.5 0 256 0s28.7 1.2 42.5 3.5c9.2 1.5 16.2 8.7 18.2 17.8l12.5 57.1c15.8 6.5 30.6 15.1 44 25.4l55.7-17.7c8.8-2.8 18.6-.3 24.5 6.8c8.1 9.8 15.5 20.2 22.1 31.2l4.7 8.1c6.1 11 11.4 22.4 15.8 34.3zM256 336a80 80 0 1 0 0-160 80 80 0 1 0 0 160z"/></svg>
+        <div on:click={() => onTabClick('settings')} tabindex="0" role="button" class="sideMenuItem" on:keydown={doNothing}>
+            <svg class="svgimg" xmlns="http://www.w3.org/2000/svg" height="1em" viewBox="0 0 512 512"><path d="M495.9 166.6c3.2 8.7 .5 18.4-6.4 24.6l-43.3 39.4c1.1 8.3 1.7 16.8 1.7 25.4s-.6 17.1-1.7 25.4l43.3 39.4c6.9 6.2 9.6 15.9 6.4 24.6c-4.4 11.9-9.7 23.3-15.8 34.3l-4.7 8.1c-6.6 11-14 21.4-22.1 31.2c-5.9 7.2-15.7 9.6-24.5 6.8l-55.7-17.7c-13.4 10.3-28.2 18.9-44 25.4l-12.5 57.1c-2 9.1-9 16.3-18.2 17.8c-13.8 2.3-28 3.5-42.5 3.5s-28.7-1.2-42.5-3.5c-9.2-1.5-16.2-8.7-18.2-17.8l-12.5-57.1c-15.8-6.5-30.6-15.1-44-25.4L83.1 425.9c-8.8 2.8-18.6 .3-24.5-6.8c-8.1-9.8-15.5-20.2-22.1-31.2l-4.7-8.1c-6.1-11-11.4-22.4-15.8-34.3c-3.2-8.7-.5-18.4 6.4-24.6l43.3-39.4C64.6 273.1 64 264.6 64 256s.6-17.1 1.7-25.4L22.4 191.2c-6.9-6.2-9.6-15.9-6.4-24.6c4.4-11.9 9.7-23.3 15.8-34.3l4.7-8.1c6.6-11 14-21.4 22.1-31.2c5.9-7.2 15.7-9.6 24.5-6.8l55.7 17.7c13.4-10.3 28.2-18.9 44-25.4l12.5-57.1c2-9.1 9-16.3 18.2-17.8C227.3 1.2 241.5 0 256 0s28.7 1.2 42.5 3.5c9.2 1.5 16.2 8.7 18.2 17.8l12.5 57.1c15.8 6.5 30.6 15.1 44 25.4l55.7-17.7c8.8-2.8 18.6-.3 24.5 6.8c8.1 9.8 15.5 20.2 22.1 31.2l4.7 8.1c6.1 11 11.4 22.4 15.8 34.3zM256 336a80 80 0 1 0 0-160 80 80 0 1 0 0 160z"/></svg>
             <span class="sideMenuItemText">Settings</span>
         </div>
     </div>
@@ -91,6 +96,7 @@
 </div>
 
 <style>
+
     #sideMenu {
         font-family: 'Source Sans Pro', sans-serif;
         display: flex;
@@ -101,6 +107,12 @@
         margin-left: 20px;
     }
 
+    @media only screen and (max-width: 900px) {
+        #sideMenu {
+            display: none;
+        }
+    }
+
     #iconSpace {
         margin-top:20px;
         display: flex;
@@ -112,7 +124,8 @@
         min-height: 50px;
         color:white;
         display: flex;
-        justify-content: center;
+        justify-content: left;
+        padding-left: 20px;
         align-items: center;
         border-radius: 20px;
         cursor: pointer;
diff --git 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
new file mode 100644
index 0000000..f744f07
--- /dev/null
+++ b/src/main/java/com/faf223/expensetrackerfaf/web/src/routes/dashboard/menu/StickyMenu.svelte
@@ -0,0 +1,177 @@
+<script>
+    import { onMount } from 'svelte';
+    import axios from 'axios';
+    import {deleteCookie, getCookie} from "svelte-cookie";
+    import { slide } from 'svelte/transition'
+
+    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;
+    }
+
+    function doNothing() {
+
+    }
+
+</script>
+
+<div id="stickyMenu">
+    <div id="stickyButton" tabindex="0" role="button" style="background-color: #191f35; color:white; padding: 10px; display: flex; align-items: center; justify-content: space-around" on:click={toggleMenu} on:keydown={doNothing}>
+        <img id="iconImg" src='./../../../src/lib/images/adidas.png' width="90px" alt="icon"/>
+        <h3>Menu ▼</h3>
+    </div>
+
+    {#if isMenuDown}
+        <div id="sideMenu" transition:slide>
+            <div on:click={() => onTabClick('profile')} tabindex="0" role="button" class="sideMenuItem" on:keydown={doNothing}>
+                <svg class="svgimg" xmlns="http://www.w3.org/2000/svg" height="1em" viewBox="0 0 448 512"><!--! Font Awesome Free 6.4.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --><path d="M224 256A128 128 0 1 0 224 0a128 128 0 1 0 0 256zm-45.7 48C79.8 304 0 383.8 0 482.3C0 498.7 13.3 512 29.7 512H418.3c16.4 0 29.7-13.3 29.7-29.7C448 383.8 368.2 304 269.7 304H178.3z"/></svg>
+                <span class="sideMenuItemText">Profile</span>
+            </div>
+
+                <div on:click={() => onTabClick('expenses')} tabindex="0" role="button" class="sideMenuItem" on:keydown={doNothing}>
+                    <svg class="svgimg" xmlns="http://www.w3.org/2000/svg" height="1em" viewBox="0 0 576 512"><!--! Font Awesome Free 6.4.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) 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>
+                    <span class="sideMenuItemText">Spendings</span>
+                </div>
+
+                <div on:click={() => onTabClick('incomes')} tabindex="0" role="button" class="sideMenuItem" on:keydown={doNothing}>
+                    <svg class="svgimg" xmlns="http://www.w3.org/2000/svg" height="1em" viewBox="0 0 576 512"><!--! Font Awesome Free 6.4.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) 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>
+                    <span class="sideMenuItemText">Revenues</span>
+                </div>
+
+                <div on:click={() => onTabClick('statistics')} tabindex="0" role="button" class="sideMenuItem" on:keydown={doNothing}>
+                    <svg class="svgimg" xmlns="http://www.w3.org/2000/svg" height="16" width="14" viewBox="0 0 448 512"><!--!Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2023 Fonticons, Inc.--><path d="M160 80c0-26.5 21.5-48 48-48h32c26.5 0 48 21.5 48 48V432c0 26.5-21.5 48-48 48H208c-26.5 0-48-21.5-48-48V80zM0 272c0-26.5 21.5-48 48-48H80c26.5 0 48 21.5 48 48V432c0 26.5-21.5 48-48 48H48c-26.5 0-48-21.5-48-48V272zM368 96h32c26.5 0 48 21.5 48 48V432c0 26.5-21.5 48-48 48H368c-26.5 0-48-21.5-48-48V144c0-26.5 21.5-48 48-48z"/></svg>
+                    <span class="sideMenuItemText">Statistics</span>
+                </div>
+
+                <div on:click={() => onTabClick('settings')} tabindex="0" role="button" class="sideMenuItem" on:keydown={doNothing}>
+                    <svg class="svgimg" xmlns="http://www.w3.org/2000/svg" height="1em" viewBox="0 0 512 512"><!--! Font Awesome Free 6.4.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --><path d="M495.9 166.6c3.2 8.7 .5 18.4-6.4 24.6l-43.3 39.4c1.1 8.3 1.7 16.8 1.7 25.4s-.6 17.1-1.7 25.4l43.3 39.4c6.9 6.2 9.6 15.9 6.4 24.6c-4.4 11.9-9.7 23.3-15.8 34.3l-4.7 8.1c-6.6 11-14 21.4-22.1 31.2c-5.9 7.2-15.7 9.6-24.5 6.8l-55.7-17.7c-13.4 10.3-28.2 18.9-44 25.4l-12.5 57.1c-2 9.1-9 16.3-18.2 17.8c-13.8 2.3-28 3.5-42.5 3.5s-28.7-1.2-42.5-3.5c-9.2-1.5-16.2-8.7-18.2-17.8l-12.5-57.1c-15.8-6.5-30.6-15.1-44-25.4L83.1 425.9c-8.8 2.8-18.6 .3-24.5-6.8c-8.1-9.8-15.5-20.2-22.1-31.2l-4.7-8.1c-6.1-11-11.4-22.4-15.8-34.3c-3.2-8.7-.5-18.4 6.4-24.6l43.3-39.4C64.6 273.1 64 264.6 64 256s.6-17.1 1.7-25.4L22.4 191.2c-6.9-6.2-9.6-15.9-6.4-24.6c4.4-11.9 9.7-23.3 15.8-34.3l4.7-8.1c6.6-11 14-21.4 22.1-31.2c5.9-7.2 15.7-9.6 24.5-6.8l55.7 17.7c13.4-10.3 28.2-18.9 44-25.4l12.5-57.1c2-9.1 9-16.3 18.2-17.8C227.3 1.2 241.5 0 256 0s28.7 1.2 42.5 3.5c9.2 1.5 16.2 8.7 18.2 17.8l12.5 57.1c15.8 6.5 30.6 15.1 44 25.4l55.7-17.7c8.8-2.8 18.6-.3 24.5 6.8c8.1 9.8 15.5 20.2 22.1 31.2l4.7 8.1c6.1 11 11.4 22.4 15.8 34.3zM256 336a80 80 0 1 0 0-160 80 80 0 1 0 0 160z"/></svg>
+                    <span class="sideMenuItemText">Settings</span>
+                </div>
+
+            {#if isAdmin}
+                <div on:click={() => onTabClick('admin')} tabindex="0" role="button" class="sideMenuItem" on:keydown={doNothing}>
+                    <svg class="svgimg" xmlns="http://www.w3.org/2000/svg" height="16" width="14" viewBox="0 0 448 512"><!--!Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2023 Fonticons, Inc.--><path d="M96 128a128 128 0 1 0 256 0A128 128 0 1 0 96 128zm94.5 200.2l18.6 31L175.8 483.1l-36-146.9c-2-8.1-9.8-13.4-17.9-11.3C51.9 342.4 0 405.8 0 481.3c0 17 13.8 30.7 30.7 30.7H162.5c0 0 0 0 .1 0H168 280h5.5c0 0 0 0 .1 0H417.3c17 0 30.7-13.8 30.7-30.7c0-75.5-51.9-138.9-121.9-156.4c-8.1-2-15.9 3.3-17.9 11.3l-36 146.9L238.9 359.2l18.6-31c6.4-10.7-1.3-24.2-13.7-24.2H224 204.3c-12.4 0-20.1 13.6-13.7 24.2z"/></svg>
+                    <span class="sideMenuItemText">Admin Panel</span>
+                </div>
+            {/if}
+
+            <div id="profileSpace">
+                <div id="profileInfo">Hello, {username}</div>
+                <div id="logout" role="button"
+                     tabindex="0"
+                     on:click={() => {
+        deleteCookie('access_token');
+        deleteCookie('refresh_token');
+        window.location.href = '/auth/login';
+    }}
+                     on:keydown={e => {
+        if (e.key === 'Enter' || e.key === ' ') {
+            deleteCookie('access_token');
+            deleteCookie('refresh_token');
+            window.location.href = '/auth/login';
+        }
+    }}>
+                    Log out
+                </div>
+
+            </div>
+        </div>
+    {/if}
+</div>
+
+
+
+<style>
+
+    #stickyMenu {
+        position:sticky;
+        top: 0;
+    }
+
+    #sideMenu {
+        font-family: 'Source Sans Pro', sans-serif;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        width: 100%;
+        margin:0;
+        justify-content: center;
+        min-width: 150px;
+        background-color: #191f35;
+        position:absolute;
+    }
+
+    .sideMenuItem {
+        min-height: 50px;
+        color:white;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        border-radius: 20px;
+        cursor: pointer;
+    }
+
+    .sideMenuItem:hover {
+        background-color: rgb(45, 60, 90);
+    }
+
+    .sideMenuItemText {
+        padding:10px;
+    }
+
+    .svgimg {
+        fill:white;
+    }
+
+    #iconImg {
+        max-width: 150px;
+    }
+
+    #profileSpace {
+        margin-bottom: 20px;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+        color: white;
+        font-weight: 900;
+        font-size: larger;
+    }
+
+    #logout {
+        background: none;
+        cursor: pointer;
+        border-radius: 10px;
+        transition: background 0.3s ease;
+        padding: 5px;
+    }
+
+    #logout:hover {
+        background: rgba(128, 128, 128, 0.5);
+    }
+</style>
\ No newline at end of file
diff --git a/src/main/java/com/faf223/expensetrackerfaf/web/src/routes/dashboard/stores.js b/src/main/java/com/faf223/expensetrackerfaf/web/src/routes/dashboard/stores.js
index 495a708..a37f92d 100644
--- a/src/main/java/com/faf223/expensetrackerfaf/web/src/routes/dashboard/stores.js
+++ b/src/main/java/com/faf223/expensetrackerfaf/web/src/routes/dashboard/stores.js
@@ -12,6 +12,18 @@ export const tempExpense = writable([])
 
 export const tempIncome = writable([]);
 
+export const monthIncome = writable([]);
+
+export const monthExpense = writable([]);
+
+export const categorizedExpense = writable([]);
+
+export const categorizedIncome = writable([]);
+
+export let isCategorizedExpense = writable(false);
+
+export let isCategorizedIncome = writable(false);
+
 export let selectedTab = writable('expenses');
 
 export let dateText = writable("This Month");
\ No newline at end of file