diff --git a/src/pages/Accounts.tsx b/src/pages/Accounts.tsx
index baaec73..b87c8ca 100644
--- a/src/pages/Accounts.tsx
+++ b/src/pages/Accounts.tsx
@@ -2,11 +2,15 @@ import { useEffect, useState } from 'react'
 import { getDate, getDay } from '../hooks/Functions'
 import { LoadingComponent } from '../components/LoadingComponent'
 import { Link } from 'react-router-dom'
+import { DateFilter } from '../hooks/DateFilter.tsx'
 
 export const Accounts = () => {
     const [data, setData] = useState<any>([])
     const [account, setAccount] = useState<any>(localStorage.getItem('accountName') || '')
 
+    const [year, setYear] = useState('')
+    const [month, setMonth] = useState('')
+
     useEffect(() => {
         const theData = localStorage.getItem('theData') || ''
         if (theData !== '') setData(JSON.parse(theData))
@@ -19,7 +23,9 @@ export const Accounts = () => {
         )
     }
 
-    const currentData = data.transactions.filter((item: any) => item.type !== "TRANSFER")
+    const currentData1 = data.transactions.filter((item: any) => item.type !== "TRANSFER")
+    const currentData = currentData1.filter((item: any) => item.transactionMonth.toString() === month.toString() &&
+        item.transactionYear.toString() === year.toString())
 
     // show all accounts
     const accounts = data.accounts
@@ -37,17 +43,20 @@ export const Accounts = () => {
 
     return (
         <div className="container mb-32 mx-auto justify-center items-center">
-            <div className='flex flex-wrap flex-row'>
-                {sum === 0 ? (
-                    <div className="text-4xl font-bold text-center my-10">
-                        No transactions found
-                    </div>
-                ) : (
+            <DateFilter yearC={year} setYearC={setYear}
+                monthC={month} setMonthC={setMonth} />
 
-                    <div className="text-4xl font-bold text-center my-10">
-                        Total: {sum} {currentData[0].accountCurrency}
-                    </div>
-                )}
+            {sum === 0 ? (
+                <div className="text-4xl font-bold text-center my-10">
+                    No transactions found
+                </div>
+            ) : (
+
+                <div className="text-4xl font-bold text-center my-10">
+                    Total: {sum} {data.settings[0].currency}
+                </div>
+            )}
+            <div className='flex flex-wrap flex-row'>
                 {
                     accounts.map((item: any) => (
                         <div className="p-5 lg:w-48 md:w-72 m-1 bg-slate-100 dark:bg-slate-800 rounded-2xl hover:shadow-lg cursor-pointer hover:brightness-110 transition duration-300 ease-in-out"
@@ -63,7 +72,7 @@ export const Accounts = () => {
                             <p
                                 key={item.id + 'day'}
                                 className="text-slate-500 dark:text-slate-300 text-sm font-medium">
-                                {item.currency}
+                                {data.settings[0].currency}
                             </p>
                             <p
                                 key={item.id + 'day'}
@@ -94,7 +103,7 @@ export const Accounts = () => {
 
                                 <div className="flex flex-row flex-wrap justify-around text-lg font-bold my-5">
                                     <Link to={`/Category/`}
-                                        onClick={() => localStorage.setItem('category', item.categoryName)}>
+                                        onClick={() => localStorage.setItem('categoryName', item.categoryName)}>
                                         <p key={item.id + 'categoryName'}
                                             className="bg-green-100 dark:bg-green-800 p-2 px-10 m-1 rounded-full hover:shadow-md cursor-pointer">
                                             {/* {item.categoryIcon} */}
@@ -103,7 +112,7 @@ export const Accounts = () => {
                                         </p>
                                     </Link>
                                     <Link to={`/Accounts/`}
-                                        onClick={() => localStorage.setItem('account', item.accountName)}>
+                                        onClick={() => localStorage.setItem('accountName', item.accountName)}>
                                         <p key={item.id + 'account name'}
                                             className="bg-white p-2 dark:bg-gray-900 px-10 m-1 rounded-full hover:shadow-md cursor-pointer">
                                             {/* {item.accountIcon} */}
diff --git a/src/pages/Category.tsx b/src/pages/Category.tsx
index a3aa074..865a8a7 100644
--- a/src/pages/Category.tsx
+++ b/src/pages/Category.tsx
@@ -2,11 +2,15 @@ import { useEffect, useState } from 'react'
 import { getDate, getDay } from '../hooks/Functions'
 import { LoadingComponent } from '../components/LoadingComponent'
 import { Link } from 'react-router-dom'
+import { DateFilter } from '../hooks/DateFilter.tsx'
 
 export const Category = () => {
     const [data, setData] = useState<any>([])
     const [group, setGroup] = useState<any>(localStorage.getItem('categoryName') || '')
 
+    const [year, setYear] = useState('')
+    const [month, setMonth] = useState('')
+
     useEffect(() => {
         const theData = localStorage.getItem('theData') || ''
         if (theData !== '') setData(JSON.parse(theData))
@@ -20,7 +24,9 @@ export const Category = () => {
         )
     }
 
-    const currentData = data.transactions.filter((item: any) => item.type !== "TRANSFER")
+    const currentData1 = data.transactions.filter((item: any) => item.type !== "TRANSFER")
+    const currentData = currentData1.filter((item: any) => item.transactionMonth.toString() === month.toString() &&
+        item.transactionYear.toString() === year.toString())
 
     // show all categories
     const categories = data.categories
@@ -39,17 +45,19 @@ export const Category = () => {
 
     return (
         <div className="container mb-32 mx-auto justify-center items-center">
+            <DateFilter yearC={year} setYearC={setYear}
+                monthC={month} setMonthC={setMonth} />
+
+            {group === '' ? (
+                <div className="text-4xl font-bold text-center my-10">
+                    No transactions found
+                </div>
+            ) : (
+                <div className="text-4xl font-bold text-center my-10">
+                    Total: {sum} {data.settings[0].currency}
+                </div>
+            )}
             <div className='flex flex-wrap flex-row'>
-                {sum === 0 ? (
-                    <div className="text-4xl font-bold text-center my-10">
-                        No transactions found
-                    </div>
-                ) : (
-
-                    <div className="text-4xl font-bold text-center my-10">
-                        Total: {sum} {currentData[0].accountCurrency}
-                    </div>
-                )}
                 {
                     categories.map((item: any) => (
                         <div className="p-5 lg:w-48 md:w-72 m-1 bg-slate-100 dark:bg-slate-800 rounded-2xl hover:shadow-lg cursor-pointer hover:brightness-110 transition duration-300 ease-in-out"
@@ -63,7 +71,7 @@ export const Category = () => {
                             <p
                                 key={item.id + 'day'}
                                 className="text-slate-500 dark:text-slate-300 text-sm font-medium">
-                                {item.currency}
+                                {data.settings[0].currency}
                             </p>
                             <p
                                 key={item.id + 'day'}
@@ -95,7 +103,7 @@ export const Category = () => {
 
                                 <div className="flex flex-row flex-wrap justify-around text-lg font-bold my-5">
                                     <Link to={`/Category/`}
-                                        onClick={() => localStorage.setItem('category', item.categoryName)}>
+                                        onClick={() => localStorage.setItem('categoryName', item.categoryName)}>
                                         <p key={item.id + 'categoryName'}
                                             className="bg-green-100 dark:bg-green-800 p-2 px-10 m-1 rounded-full hover:shadow-md cursor-pointer">
                                             {/* {item.categoryIcon} */}
@@ -104,7 +112,7 @@ export const Category = () => {
                                         </p>
                                     </Link>
                                     <Link to={`/Accounts/`}
-                                        onClick={() => localStorage.setItem('account', item.accountName)}>
+                                        onClick={() => localStorage.setItem('accountName', item.accountName)}>
                                         <p key={item.id + 'account name'}
                                             className="bg-white p-2 dark:bg-gray-900 px-10 m-1 rounded-full hover:shadow-md cursor-pointer">
                                             {/* {item.accountIcon} */}
diff --git a/src/pages/Dashboard.tsx b/src/pages/Dashboard.tsx
index 3aeb938..60f1d60 100644
--- a/src/pages/Dashboard.tsx
+++ b/src/pages/Dashboard.tsx
@@ -2,10 +2,14 @@ import { useEffect, useState } from 'react'
 import { getDate, getDay } from '../hooks/Functions'
 import { LoadingComponent } from '../components/LoadingComponent'
 import { Link } from 'react-router-dom'
+import { DateFilter } from '../hooks/DateFilter.tsx'
 
 export const Dashboard = () => {
     const [data, setData] = useState<any>([])
+    const [year, setYear] = useState('')
+    const [month, setMonth] = useState('')
 
+    // FETCH THE LOCALLY SAVED DATA 
     useEffect(() => {
         const theData = localStorage.getItem('theData') || ''
         if (theData !== '') setData(JSON.parse(theData))
@@ -18,11 +22,13 @@ export const Dashboard = () => {
         )
     }
 
-    // only show 100 transactions
-    const currentData = data.transactions.slice(0, 100)
+    const currentData = data.transactions.filter((item: any) => item.transactionMonth.toString() === month.toString() &&
+        item.transactionYear.toString() === year.toString())
 
     return (
         <div className="container mb-32 flex flex-wrap flex-col mx-auto justify-center items-center">
+            <DateFilter yearC={year} setYearC={setYear}
+                monthC={month} setMonthC={setMonth} />
             <div className="flex flex-wrap flex-row mx-auto justify-center items-center">
                 {currentData.map((item: any) => (
                     <div className="flex justify-center slide-r">