diff --git a/frontend/src/components/charts/StatusDonutChart.tsx b/frontend/src/components/charts/StatusDonutChart.tsx
index fe431de..b53c8dd 100644
--- a/frontend/src/components/charts/StatusDonutChart.tsx
+++ b/frontend/src/components/charts/StatusDonutChart.tsx
@@ -39,7 +39,6 @@ const chartConfig = {
 } satisfies ChartConfig
 
 export const StatusDonutChart = ({ data }: any) => {
-    console.log(data)
     const totalQuickdos = data.reduce((acc: any, curr: any) => acc + curr.quickdo, 0)
 
     return (
diff --git a/frontend/src/components/layout/filters.tsx b/frontend/src/components/layout/filters.tsx
index 3a33755..fc7b136 100644
--- a/frontend/src/components/layout/filters.tsx
+++ b/frontend/src/components/layout/filters.tsx
@@ -1,9 +1,13 @@
-import React from "react";
+"use client"
+
+import type React from "react"
+import { useState } from "react"
 import {
     DropdownMenu,
     DropdownMenuCheckboxItem,
     DropdownMenuContent,
     DropdownMenuGroup,
+    DropdownMenuItem,
     DropdownMenuLabel,
     DropdownMenuPortal,
     DropdownMenuSeparator,
@@ -11,113 +15,237 @@ import {
     DropdownMenuSubContent,
     DropdownMenuSubTrigger,
     DropdownMenuTrigger,
-    DropdownMenuItem
 } from "@/components/ui/dropdown-menu"
-import { IoClose } from "react-icons/io5";
-import { Button } from "../ui/button";
+import { Calendar } from "@/components/ui/calendar"
+import { X, Check } from "lucide-react"
+import { Button } from "@/components/ui/button"
+
+// ? IMPORT ALL UTILITY FUNCTIONS FROM SINGLE FILE
+import {
+    getSelectedDate,
+    getFormattedDate,
+    isSameDay,
+    isDateFilterActive,
+    isStatusFilterActive,
+    isCategoryFilterActive,
+    isImportanceFilterActive,
+    isReminderFilterActive,
+    type useStatusFiltersItems,
+} from "@/utils/filter-utils"
 
 interface FiltersProps {
-    filters: any[];
-    useStatusFilterData: any[];
-    getAllCategories: any[];
-    defaultFilter: any[];
-    handleFilters: (type: string, value: string, label?: string) => void;
-    handleClearFilters: () => void;
-    setRefreshState: (state: boolean) => void;
+    filters: any[]
+    useStatusFilterData: useStatusFiltersItems[]
+    getAllCategories: any[]
+    defaultFilter?: any[]
+    handleFilters: (key: string, value: string, filter_type?: "single" | "multi", child_table?: string) => void
+    handleClearFilters: () => void
+    setRefreshState: (state: boolean) => void
 }
 
-const Filters: React.FC<FiltersProps> = ({ filters, useStatusFilterData, getAllCategories, handleFilters, handleClearFilters, setRefreshState, defaultFilter = null }) => {
+const Filters: React.FC<FiltersProps> = ({
+    filters,
+    useStatusFilterData,
+    getAllCategories,
+    handleFilters,
+    handleClearFilters,
+    setRefreshState,
+    defaultFilter = [],
+}) => {
+    const [dropdownOpen, setDropdownOpen] = useState<boolean>(false)
+
+    // ? HANDLE DATE SELECTION - SINGLE DATE ONLY WITH PROPER HIGHLIGHTING
+    const handleDateSelect = (selectedDate: Date | undefined) => {
+        const currentSelectedDate = getSelectedDate(filters)
+
+        // ? If clicking on the same date that's already selected, remove the filter
+        if (selectedDate && currentSelectedDate && isSameDay(selectedDate, currentSelectedDate)) {
+            handleFilters("date", "", "single")
+            setDropdownOpen(false)
+            return
+        }
+
+        // ? If no date selected, remove filter
+        if (!selectedDate) {
+            handleFilters("date", "", "single")
+            setDropdownOpen(false)
+            return
+        }
+
+        // ? Apply filter for the selected date only
+        const formattedDate = getFormattedDate(selectedDate)
+        handleFilters("date", formattedDate, "single")
+
+        // ? Close dropdown after selection
+        setTimeout(() => {
+            setDropdownOpen(false)
+        }, 150)
+    }
+
+    // ? HANDLE IMPORTANCE FILTER WITH DROPDOWN CLOSE
+    const handleImportanceFilter = () => {
+        handleFilters("is_important", "1", "single")
+        setTimeout(() => {
+            setDropdownOpen(false)
+        }, 150)
+    }
+
+    // ? HANDLE REMINDER FILTER WITH DROPDOWN CLOSE
+    const handleReminderFilter = () => {
+        handleFilters("send_reminder", "1", "single")
+        setTimeout(() => {
+            setDropdownOpen(false)
+        }, 150)
+    }
 
     return (
         <div className="filters-quickdo flex border-neutral-200 border rounded-md w-fit shadow-sm sm:order-2">
-            <DropdownMenu>
+            <DropdownMenu open={dropdownOpen} onOpenChange={setDropdownOpen}>
                 <DropdownMenuTrigger asChild>
-                    <Button variant="outline" className="font-normal">Filters</Button>
+                    <Button variant="outline" className="font-normal bg-transparent">
+                        Filters
+                        {/* // ? ALWAYS SHOW COUNTER BADGE - EMPTY SPACE WHEN NO FILTERS */}
+                        <span
+                            className={`ml-2 rounded-full px-2 py-0.5 text-xs min-w-[20px] text-center ${filters.length > 0 ? "bg-primary text-primary-foreground" : "bg-transparent text-transparent"
+                                }`}
+                        >
+                            {filters.length > 0 ? filters.length : "0"}
+                        </span>
+                    </Button>
                 </DropdownMenuTrigger>
                 <DropdownMenuContent align="start" className="w-56">
                     <DropdownMenuLabel>Filters</DropdownMenuLabel>
                     <DropdownMenuSeparator />
-
                     <DropdownMenuGroup>
-                        {/* STATUS FILTERS */}
+                        {/* // ? STATUS FILTERS - MULTI-VALUE WITH RIGHT-SIDE CHECKBOX */}
                         <DropdownMenuSub>
-                            <DropdownMenuSubTrigger>Status</DropdownMenuSubTrigger>
+                            <DropdownMenuSubTrigger className={isStatusFilterActive(filters) ? "bg-accent" : ""}>
+                                <div className="flex items-center justify-between w-full">
+                                    <span>Status</span>
+                                    <div className="flex items-center gap-1">
+                                        {isStatusFilterActive(filters) && <Check className="h-4 w-4 text-primary" />}
+                                    </div>
+                                </div>
+                            </DropdownMenuSubTrigger>
                             <DropdownMenuPortal>
                                 <DropdownMenuSubContent>
-                                    {useStatusFilterData.length > 0 && useStatusFilterData.map((data, index) => (
-                                        <DropdownMenuCheckboxItem
-                                            key={index}
-                                            checked={filters.some(filter => filter[0] === "status" && filter[2]?.includes(data.name))}
-                                            onCheckedChange={() => handleFilters("status", data.name)}
-                                        >
-                                            {data.name}
-                                        </DropdownMenuCheckboxItem>
-                                    ))}
+                                    {useStatusFilterData.length > 0 &&
+                                        useStatusFilterData.map((data, index) => (
+                                            <DropdownMenuCheckboxItem
+                                                key={index}
+                                                checked={filters.some((filter) => filter[0] === "status" && filter[2]?.includes(data.name))}
+                                                onCheckedChange={() => handleFilters("status", data.name, "multi")}
+                                            >
+                                                {data.name}
+                                            </DropdownMenuCheckboxItem>
+                                        ))}
                                 </DropdownMenuSubContent>
                             </DropdownMenuPortal>
                         </DropdownMenuSub>
 
-                        {/* CATEGORY FILTERS */}
+                        {/* // ? CATEGORY FILTERS - MULTI-VALUE WITH RIGHT-SIDE CHECKBOX */}
                         <DropdownMenuSub>
-                            <DropdownMenuSubTrigger>
-                                Category
+                            <DropdownMenuSubTrigger className={isCategoryFilterActive(filters) ? "bg-accent" : ""}>
+                                <div className="flex items-center justify-between w-full">
+                                    <span>Category</span>
+                                    <div className="flex items-center gap-1">
+                                        {isCategoryFilterActive(filters) && <Check className="h-4 w-4 text-primary" />}
+                                    </div>
+                                </div>
                             </DropdownMenuSubTrigger>
                             <DropdownMenuPortal>
                                 <DropdownMenuSubContent className="categories-items max-h-[240px] w-[200px] overflow-x-hidden whitespace-nowrap text-ellipsis overflow-y-auto">
-                                    {getAllCategories.length > 0 && getAllCategories.map((data, index) => (
-                                        <DropdownMenuCheckboxItem
-                                            key={index}
-                                            title={data.category}
-                                            checked={filters.some(filter => filter[0] === "QuickDo Categories" && filter[3]?.includes(data.category))}
-                                            onCheckedChange={() => handleFilters("category", data.category, "QuickDo Categories")}
-                                        >
-                                            {data.category}
-                                        </DropdownMenuCheckboxItem>
-                                    ))}
+                                    {getAllCategories.length > 0 &&
+                                        getAllCategories.map((data, index) => (
+                                            <DropdownMenuCheckboxItem
+                                                key={index}
+                                                title={data.category}
+                                                checked={filters.some(
+                                                    (filter) => filter[0] === "QuickDo Categories" && filter[3]?.includes(data.category),
+                                                )}
+                                                onCheckedChange={() => handleFilters("category", data.category, "multi", "QuickDo Categories")}
+                                            >
+                                                {data.category}
+                                            </DropdownMenuCheckboxItem>
+                                        ))}
                                 </DropdownMenuSubContent>
                             </DropdownMenuPortal>
                         </DropdownMenuSub>
 
-                        {/* DUE DATE FILTER */}
-                        <DropdownMenuItem>
-                            Due Date
-                        </DropdownMenuItem>
+                        {/* // ? DUE DATE FILTER - SINGLE DATE SELECTION WITH RIGHT-SIDE CHECKBOX */}
+                        <DropdownMenuSub>
+                            <DropdownMenuSubTrigger className={isDateFilterActive(filters) ? "bg-accent" : ""}>
+                                <div className="flex items-center justify-between w-full">
+                                    <span>Due Date</span>
+                                    <div className="flex items-center gap-1">
+                                        {isDateFilterActive(filters) && <Check className="h-4 w-4 text-primary" />}
+                                    </div>
+                                </div>
+                            </DropdownMenuSubTrigger>
+                            <DropdownMenuPortal>
+                                <DropdownMenuSubContent className="w-auto p-0">
+                                    <Calendar
+                                        mode="single"
+                                        selected={getSelectedDate(filters)}
+                                        onSelect={handleDateSelect}
+                                        initialFocus
+                                        className="rounded-md border-0"
+                                    />
+                                </DropdownMenuSubContent>
+                            </DropdownMenuPortal>
+                        </DropdownMenuSub>
                     </DropdownMenuGroup>
 
                     <DropdownMenuSeparator />
 
                     <DropdownMenuGroup>
-                        {/* IMPORTANCE FILTER */}
-                        <DropdownMenuCheckboxItem
-                            checked={filters.some(filter => filter[0] === "is_important" && filter[2]?.includes("1"))}
-                            onCheckedChange={() => handleFilters("is_important", "1")}
+                        {/* // ? IMPORTANCE FILTER - SINGLE-VALUE WITH RIGHT-SIDE CHECKBOX AND DROPDOWN CLOSE */}
+                        <DropdownMenuItem
+                            className={`flex items-center justify-between w-full ${isImportanceFilterActive(filters) ? "bg-accent" : ""}`}
+                            onClick={handleImportanceFilter}
                         >
-                            Importance
-                        </DropdownMenuCheckboxItem>
+                            <span>Importance</span>
+                            <div className="flex items-center gap-1">
+                                {isImportanceFilterActive(filters) && <Check className="h-4 w-4 text-primary" />}
+                            </div>
+                        </DropdownMenuItem>
 
-                        {/* REMINDER FILTER */}
-                        <DropdownMenuCheckboxItem
-                            checked={filters.some(filter => filter[0] === "send_reminder" && filter[2]?.includes("1"))}
-                            onCheckedChange={() => handleFilters("send_reminder", "1")}
+                        {/* // ? REMINDER FILTER - SINGLE-VALUE WITH RIGHT-SIDE CHECKBOX AND DROPDOWN CLOSE */}
+                        <DropdownMenuItem
+                            className={`flex items-center justify-between w-full ${isReminderFilterActive(filters) ? "bg-accent" : ""}`}
+                            onClick={handleReminderFilter}
                         >
-                            Reminder
-                        </DropdownMenuCheckboxItem>
+                            <span>Reminder</span>
+                            <div className="flex items-center gap-1">
+                                {isReminderFilterActive(filters) && <Check className="h-4 w-4 text-primary" />}
+                            </div>
+                        </DropdownMenuItem>
                     </DropdownMenuGroup>
                 </DropdownMenuContent>
             </DropdownMenu>
 
-            {/* CLEAR FILTERS */}
+            {/* // ? CLEAR FILTERS */}
             <button
-                className="clear-filters px-3 py-2 text-[20px]"
+                className="clear-filters px-3 py-2 text-[20px] hover:bg-accent rounded-r-md transition-colors"
                 onClick={() => {
-                    handleClearFilters();
-                    setRefreshState(true);
+                    handleClearFilters()
+                    setRefreshState(true)
                 }}
+                title="Clear Filters"
             >
-                <IoClose title="Clear Filters" className={`text-xl transition-transform duration-300 ${defaultFilter ? filters.length == defaultFilter.length ? "rotate-45" : "rotate-180" : filters.length === 0 ? "rotate-45" : "rotate-180"}`} />
+                <X
+                    className={`h-5 w-5 transition-transform duration-300 ${defaultFilter
+                        ? filters.length === defaultFilter.length
+                            ? "rotate-45"
+                            : "rotate-180"
+                        : filters.length === 0
+                            ? "rotate-45"
+                            : "rotate-180"
+                        }`}
+                />
             </button>
         </div>
-    );
-};
+    )
+}
 
-export default Filters;
+export default Filters
diff --git a/frontend/src/components/layout/quickdo-item.tsx b/frontend/src/components/layout/quickdo-item.tsx
index cbff222..2323e9b 100644
--- a/frontend/src/components/layout/quickdo-item.tsx
+++ b/frontend/src/components/layout/quickdo-item.tsx
@@ -29,6 +29,7 @@ const QuickDoItem = (props: ListItemProps) => {
     const [categories, setCategories] = useState<useAllCategories[]>(props.todoData.categories);
     const [showCategories, setShowCategories] = useState<boolean>(false);
     const [allCategories, setAllCategories] = useState<useAllCategories[]>(props.allCategories);
+    const [datePopupOpen, setDatePopupOpen] = useState<boolean>(false);
 
 
     //? STATUS HANDLER
@@ -170,7 +171,7 @@ const QuickDoItem = (props: ListItemProps) => {
                 {/* DUE DATE */}
                 <div className="item hidden lg:block lg:col-span-2 justify-self-center">
 
-                    <Popover>
+                    <Popover open={datePopupOpen} onOpenChange={setDatePopupOpen}>
                         <PopoverTrigger asChild>
                             <Button
                                 variant={"transparent"}
@@ -195,7 +196,10 @@ const QuickDoItem = (props: ListItemProps) => {
                             <Calendar
                                 mode="single"
                                 selected={(new Date(date))}
-                                onSelect={handleSetDate}
+                                onSelect={(e) => {
+                                    handleSetDate(e);
+                                    setDatePopupOpen(false);
+                                }}
                                 initialFocus
                             />
                         </PopoverContent>
diff --git a/frontend/src/components/layout/sort.tsx b/frontend/src/components/layout/sort.tsx
index bda10d2..3d87738 100644
--- a/frontend/src/components/layout/sort.tsx
+++ b/frontend/src/components/layout/sort.tsx
@@ -1,17 +1,29 @@
 import React from "react";
 import { Select, SelectTrigger, SelectContent, SelectValue, SelectItem } from "@/components/ui/select";
 import { BsSortDownAlt, BsSortUp } from "react-icons/bs";
+import { useSortDataItems } from "@/types/Common";
 
 interface SortProps {
     currentSort: string;
     currentSortDirection: string;
-    useSortData: { name: string; sort: string }[];
+    // useSortData: { name: string; sort: string }[];
     setCurrentSort: (sort: string) => void;
     setCurrentSortDirection: (direction: string) => void;
     setRefreshState: (state: boolean) => void;
 }
 
-const Sort: React.FC<SortProps> = ({ currentSort, currentSortDirection, useSortData, setCurrentSort, setCurrentSortDirection, setRefreshState }) => {
+// ? DEFINE SORTING DATA
+const useSortData: useSortDataItems[] = [
+    { name: "Created", sort: "creation" },
+    { name: "Modified", sort: "modified" },
+    { name: "Importance", sort: "is_important" },
+    { name: "Due Date", sort: "date" },
+    { name: "Reminder", sort: "send_reminder" },
+    { name: "Status", sort: "status" },
+    { name: "Description", sort: "description" },
+]
+
+const Sort: React.FC<SortProps> = ({ currentSort, currentSortDirection, setCurrentSort, setCurrentSortDirection, setRefreshState }) => {
     return (
         <div className="sort-quickdo flex border-neutral-200 border rounded-md w-fit shadow-sm sm:order-1">
             <Select onValueChange={(e) => { setCurrentSort(e); setRefreshState(true); }}>
diff --git a/frontend/src/pages/quickdo/group-by-view.tsx b/frontend/src/pages/quickdo/group-by-view.tsx
index 51ba9e6..b068733 100644
--- a/frontend/src/pages/quickdo/group-by-view.tsx
+++ b/frontend/src/pages/quickdo/group-by-view.tsx
@@ -3,9 +3,7 @@ import CreateQuickDo from "@/components/ui/create-quickdo";
 import QuickDoItem from "@/components/layout/quickdo-item";
 import {
     useAllQuickDoData,
-    useSortDataItems,
     DashboardProps,
-    useStatusFiltersItems,
 } from "@/types/Common";
 import { toast } from 'sonner'
 import {
@@ -21,24 +19,12 @@ import Filters from "@/components/layout/filters";
 import Sort from "@/components/layout/sort";
 import Navbar from "@/components/layout/navbar";
 import Sidebar from "@/components/layout/sidebar";
+import {
+    useStatusFilterData,
+    createFilterHandler,
+    createClearFiltersHandler,
+} from "@/utils/filter-utils"
 
-// ? DEFINE STATUS DROPDOWN DATA
-const useStatusFilterData: useStatusFiltersItems[] = [
-    { name: "Open" },
-    { name: "Completed" },
-    { name: "Cancelled" },
-]
-
-// ? DEFINE SORTING DATA
-const useSortData: useSortDataItems[] = [
-    { name: "Created", sort: "creation" },
-    { name: "Modified", sort: "modified" },
-    { name: "Importance", sort: "is_important" },
-    { name: "Due Date", sort: "date" },
-    { name: "Reminder", sort: "send_reminder" },
-    { name: "Status", sort: "status" },
-    { name: "Description", sort: "description" },
-];
 
 const GroupByView = (props: DashboardProps) => {
 
@@ -59,50 +45,11 @@ const GroupByView = (props: DashboardProps) => {
     const [completedQuickDoData, setCompletedQuickDoData] = useState<useAllQuickDoData[]>([]);
     const [cancelledQuickDoData, setCancelledQuickDoData] = useState<useAllQuickDoData[]>([]);
 
-
-    // ? HANDLE FILTERS DATA
-    const handleFilters = (key: string, value: string, child_table = "") => {
-        setFilters((prevFilters) => {
-            // ? FIND THE INDEX OF EXISTING FILTER BASED ON KEY OR CHILD TABLE
-            const index = prevFilters.findIndex(
-                (filter: any) => filter[0] === (child_table || key)
-            );
-
-            const updatedFilters = [...prevFilters];
-            const fieldIndex = child_table ? 3 : 2; // ? DETERMINE FIELD BASED ON CHILD TABLE
-
-            if (index !== -1) {
-                const values = updatedFilters[index][fieldIndex] || [];
-
-                // ? REMOVE VALUE IF IT EXISTS
-                if (values.includes(value)) {
-                    updatedFilters[index][fieldIndex] = values.filter(
-                        (item: string) => item !== value
-                    );
-
-                    // ? REMOVE FILTER COMPLETELY IF EMPTY
-                    if (updatedFilters[index][fieldIndex].length === 0) {
-                        updatedFilters.splice(index, 1);
-                    }
-                } else {
-                    // ? ADD VALUE IF NOT EXISTS
-                    updatedFilters[index][fieldIndex] = [...values, value];
-                }
-            } else {
-                // ? ADD NEW FILTER IF NOT EXISTS
-                updatedFilters.push(
-                    child_table
-                        ? [child_table, key, "in", [value]]
-                        : [key, "in", [value]]
-                );
-            }
-
-            return updatedFilters;
-        });
-    };
+    // ? DYNAMIC HANDLE FILTERS FUNCTION
+    const handleFilters = createFilterHandler(setFilters);
 
     // ? HANDLE CLEAR FILTERS
-    const handleClearFilters = () => setFilters([]);
+    const handleClearFilters = createClearFiltersHandler(setFilters);
 
     // ? USE EFFECT ON FILTERS AND SORT CHANGES
     useEffect(() => {
@@ -219,7 +166,6 @@ const GroupByView = (props: DashboardProps) => {
                         <Sort
                             currentSort={currentSort}
                             currentSortDirection={currentSortDirection}
-                            useSortData={useSortData}
                             setCurrentSort={setCurrentSort}
                             setCurrentSortDirection={setCurrentSortDirection}
                             setRefreshState={setRefreshState}
diff --git a/frontend/src/pages/quickdo/inbox-view.tsx b/frontend/src/pages/quickdo/inbox-view.tsx
index da3d94b..373e20c 100644
--- a/frontend/src/pages/quickdo/inbox-view.tsx
+++ b/frontend/src/pages/quickdo/inbox-view.tsx
@@ -1,10 +1,6 @@
 import { useEffect, useState } from "react";
 import CreateQuickDo from "../../components/ui/create-quickdo";
-import {
-    useSortDataItems,
-    DashboardProps,
-    useStatusFiltersItems,
-} from "../../types/Common";
+import { DashboardProps } from "../../types/Common";
 import { toast } from 'sonner'
 import { addQuickDo, deleteQuickDo, fetchQuickDos, updateQuickDo } from "@/utils/quickdo";
 import { fetchCategoryList } from "@/utils/quickdo-category";
@@ -13,24 +9,12 @@ import Sort from "@/components/layout/sort";
 import QuickdoList from "@/components/layout/quickdo-list";
 import Navbar from "@/components/layout/navbar";
 import Sidebar from "@/components/layout/sidebar";
+import {
+    useStatusFilterData,
+    createFilterHandler,
+    createClearFiltersHandler,
+} from "@/utils/filter-utils"
 
-// ? DEFINE STATUS DROPDOWN DATA
-const useStatusFilterData: useStatusFiltersItems[] = [
-    { name: "Open" },
-    { name: "Completed" },
-    { name: "Cancelled" },
-]
-
-// ? DEFINE SORTING DATA
-const useSortData: useSortDataItems[] = [
-    { name: "Created", sort: "creation" },
-    { name: "Modified", sort: "modified" },
-    { name: "Importance", sort: "is_important" },
-    { name: "Due Date", sort: "date" },
-    { name: "Reminder", sort: "send_reminder" },
-    { name: "Status", sort: "status" },
-    { name: "Description", sort: "description" },
-];
 
 const InboxView = (props: DashboardProps) => {
 
@@ -43,49 +27,11 @@ const InboxView = (props: DashboardProps) => {
     const [getAllCategories, setGetAllCategories] = useState<any[]>([]);
     const [allTodoData, setAllTodoData] = useState<any[]>([]);
 
-    // ? HANDLE FILTERS DATA
-    const handleFilters = (key: string, value: string, child_table = "") => {
-        setFilters((prevFilters) => {
-            // ? FIND THE INDEX OF EXISTING FILTER BASED ON KEY OR CHILD TABLE
-            const index = prevFilters.findIndex(
-                (filter: any) => filter[0] === (child_table || key)
-            );
-
-            const updatedFilters = [...prevFilters];
-            const fieldIndex = child_table ? 3 : 2; // ? DETERMINE FIELD BASED ON CHILD TABLE
-
-            if (index !== -1) {
-                const values = updatedFilters[index][fieldIndex] || [];
-
-                // ? REMOVE VALUE IF IT EXISTS
-                if (values.includes(value)) {
-                    updatedFilters[index][fieldIndex] = values.filter(
-                        (item: string) => item !== value
-                    );
-
-                    // ? REMOVE FILTER COMPLETELY IF EMPTY
-                    if (updatedFilters[index][fieldIndex].length === 0) {
-                        updatedFilters.splice(index, 1);
-                    }
-                } else {
-                    // ? ADD VALUE IF NOT EXISTS
-                    updatedFilters[index][fieldIndex] = [...values, value];
-                }
-            } else {
-                // ? ADD NEW FILTER IF NOT EXISTS
-                updatedFilters.push(
-                    child_table
-                        ? [child_table, key, "in", [value]]
-                        : [key, "in", [value]]
-                );
-            }
-
-            return updatedFilters;
-        });
-    };
+    // ? DYNAMIC HANDLE FILTERS FUNCTION
+    const handleFilters = createFilterHandler(setFilters);
 
     // ? HANDLE CLEAR FILTERS
-    const handleClearFilters = () => setFilters([]);
+    const handleClearFilters = createClearFiltersHandler(setFilters);
 
     // ? USE EFFECT ON FILTERS AND SORT CHANGES
     useEffect(() => {
@@ -155,7 +101,6 @@ const InboxView = (props: DashboardProps) => {
     // ? UPDATE REFRESH STATE
     const handleRefreshState = (state: boolean) => setRefreshState(state);
 
-
     return (
         <>
 
@@ -193,7 +138,6 @@ const InboxView = (props: DashboardProps) => {
                         <Sort
                             currentSort={currentSort}
                             currentSortDirection={currentSortDirection}
-                            useSortData={useSortData}
                             setCurrentSort={setCurrentSort}
                             setCurrentSortDirection={setCurrentSortDirection}
                             setRefreshState={setRefreshState}
diff --git a/frontend/src/pages/quickdo/my-day-view.tsx b/frontend/src/pages/quickdo/my-day-view.tsx
index 9420436..3f1f7cb 100644
--- a/frontend/src/pages/quickdo/my-day-view.tsx
+++ b/frontend/src/pages/quickdo/my-day-view.tsx
@@ -1,99 +1,47 @@
-import { useEffect, useState } from "react";
-import CreateQuickDo from "../../components/ui/create-quickdo";
+"use client"
+
+import { useEffect, useState } from "react"
+import CreateQuickDo from "@/components/ui/create-quickdo"
+import type { DashboardProps } from "@/types/Common"
+import { toast } from "sonner"
+import { addQuickDo, deleteQuickDo, fetchQuickDos, updateQuickDo } from "@/utils/quickdo"
+import { fetchCategoryList } from "@/utils/quickdo-category"
+import Filters from "@/components/layout/filters"
+import Sort from "@/components/layout/sort"
+import QuickdoList from "@/components/layout/quickdo-list"
+import Navbar from "@/components/layout/navbar"
+import Sidebar from "@/components/layout/sidebar"
 import {
-    useSortDataItems,
-    DashboardProps,
-    useStatusFiltersItems,
-} from "../../types/Common";
-import { toast } from 'sonner'
-import { addQuickDo, deleteQuickDo, fetchQuickDos, updateQuickDo } from "@/utils/quickdo";
-import { fetchCategoryList } from "@/utils/quickdo-category";
-import Filters from "@/components/layout/filters";
-import Sort from "@/components/layout/sort";
-import QuickdoList from "@/components/layout/quickdo-list";
-import Navbar from "@/components/layout/navbar";
-import Sidebar from "@/components/layout/sidebar";
+    useStatusFilterData,
+    createFilterHandler,
+    createClearFiltersHandler,
+    getFormattedDate, // Import getFormattedDate
+} from "@/utils/filter-utils"
 
-// ? DEFINE STATUS DROPDOWN DATA
-const useStatusFilterData: useStatusFiltersItems[] = [
-    { name: "Open" },
-    { name: "Completed" },
-    { name: "Cancelled" },
-]
-
-// ? DEFINE SORTING DATA
-const useSortData: useSortDataItems[] = [
-    { name: "Created", sort: "creation" },
-    { name: "Modified", sort: "modified" },
-    { name: "Importance", sort: "is_important" },
-    { name: "Due Date", sort: "date" },
-    { name: "Reminder", sort: "send_reminder" },
-    { name: "Status", sort: "status" },
-    { name: "Description", sort: "description" },
-];
 
 const MyDayView = (props: DashboardProps) => {
-
     // ? HOOKS
-    const jsDate = new Date();
-    const todayDate = jsDate.toLocaleDateString('en-CA');
-    const defaultFilter = [["date", "in", [todayDate, ""]]];
-    const [currentSort, setCurrentSort] = useState("creation");
-    const [currentSortDirection, setCurrentSortDirection] = useState("desc");
-    const [filters, setFilters] = useState<any[]>(defaultFilter);
-    const [initialLoading, setInitialLoading] = useState(true);
-    const [refreshState, setRefreshState] = useState(true);
-    const [getAllCategories, setGetAllCategories] = useState<any[]>([]);
-    const [allTodoData, setAllTodoData] = useState<any[]>([]);
-
-    // ? HANDLE FILTERS DATA
-    const handleFilters = (key: string, value: string, child_table = "") => {
-        setFilters((prevFilters) => {
-            // ? FIND THE INDEX OF EXISTING FILTER BASED ON KEY OR CHILD TABLE
-            const index = prevFilters.findIndex(
-                (filter: any) => filter[0] === (child_table || key)
-            );
-
-            const updatedFilters = [...prevFilters];
-            const fieldIndex = child_table ? 3 : 2; // ? DETERMINE FIELD BASED ON CHILD TABLE
-
-            if (index !== -1) {
-                const values = updatedFilters[index][fieldIndex] || [];
-
-                // ? REMOVE VALUE IF IT EXISTS
-                if (values.includes(value)) {
-                    updatedFilters[index][fieldIndex] = values.filter(
-                        (item: string) => item !== value
-                    );
-
-                    // ? REMOVE FILTER COMPLETELY IF EMPTY
-                    if (updatedFilters[index][fieldIndex].length === 0) {
-                        updatedFilters.splice(index, 1);
-                    }
-                } else {
-                    // ? ADD VALUE IF NOT EXISTS
-                    updatedFilters[index][fieldIndex] = [...values, value];
-                }
-            } else {
-                // ? ADD NEW FILTER IF NOT EXISTS
-                updatedFilters.push(
-                    child_table
-                        ? [child_table, key, "in", [value]]
-                        : [key, "in", [value]]
-                );
-            }
-
-            return updatedFilters;
-        });
-    };
-
+    const jsDate = new Date()
+    // ? Use getFormattedDate for consistency with filter-utils
+    const todayDate = getFormattedDate(jsDate)
+    const defaultFilter = [["date", "=", todayDate]]
+    const [currentSort, setCurrentSort] = useState("creation")
+    const [currentSortDirection, setCurrentSortDirection] = useState("desc")
+    const [filters, setFilters] = useState<any[]>(defaultFilter)
+    const [initialLoading, setInitialLoading] = useState(true)
+    const [refreshState, setRefreshState] = useState(true)
+    const [getAllCategories, setGetAllCategories] = useState<any[]>([])
+    const [allTodoData, setAllTodoData] = useState<any[]>([])
+
+    // ? DYNAMIC HANDLE FILTERS FUNCTION - PASS DEFAULT FILTER
+    const handleFilters = createFilterHandler(setFilters, defaultFilter)
     // ? HANDLE CLEAR FILTERS
-    const handleClearFilters = () => setFilters(defaultFilter);
+    const handleClearFilters = createClearFiltersHandler(setFilters, defaultFilter)
 
     // ? USE EFFECT ON FILTERS AND SORT CHANGES
     useEffect(() => {
-        setRefreshState(true);
-    }, [filters, currentSort, currentSortDirection]);
+        setRefreshState(true)
+    }, [filters, currentSort, currentSortDirection])
 
     // ? FETCH DATA ON REFRESH STATE CHANGES
     useEffect(() => {
@@ -102,86 +50,77 @@ const MyDayView = (props: DashboardProps) => {
                 const [quickDos, categories] = await Promise.all([
                     fetchQuickDos(filters, currentSort, currentSortDirection),
                     fetchCategoryList(),
-                ]);
-                setAllTodoData(quickDos);
-                setGetAllCategories(categories);
+                ])
+                setAllTodoData(quickDos)
+                setGetAllCategories(categories)
             } catch (error) {
-                console.error(error);
-                toast.error("There Was A Problem Loading Data!");
+                console.error(error)
+                toast.error("There Was A Problem Loading Data!")
             } finally {
-                setInitialLoading(false);
-                handleRefreshState(false);
+                setInitialLoading(false)
+                handleRefreshState(false)
             }
-        };
-
+        }
         if (refreshState) {
-            fetchData();
+            fetchData()
         }
-    }, [refreshState]);
+    }, [refreshState])
 
     // ? UPDATE AN EXISTING QUICKDO HANDLER
     const handleUpdateQuickDo = async (data: any) => {
         try {
-            await updateQuickDo({ ...data, doctype: "QuickDo" });
-            handleRefreshState(true);
-            toast.success("QuickDo Updated!");
+            await updateQuickDo({ ...data, doctype: "QuickDo" })
+            handleRefreshState(true)
+            toast.success("QuickDo Updated!")
         } catch (error) {
-            console.error("Error Updating QuickDo:", error);
-            toast.error("Problem Updating QuickDo!");
+            console.error("Error Updating QuickDo:", error)
+            toast.error("Problem Updating QuickDo!")
         }
-    };
+    }
 
     // ? ADD A NEW QUICKDO HANDLER
     const handleAddQuickDo = async (data: any) => {
         try {
-            await addQuickDo({ ...data, doctype: "QuickDo" });
-            handleRefreshState(true);
-            toast.success("QuickDo Created!");
+            await addQuickDo({ ...data, doctype: "QuickDo" })
+            handleRefreshState(true)
+            toast.success("QuickDo Created!")
         } catch (error) {
-            console.error("Error Adding QuickDo:", error);
-            toast.error("Problem Adding QuickDo!");
+            console.error("Error Adding QuickDo:", error)
+            toast.error("Problem Adding QuickDo!")
         }
-    };
+    }
 
     // ? DELETE TODO HANDLER
     const handleDeleteTodo = async (id: string) => {
         try {
-            await deleteQuickDo(id);
-            handleRefreshState(true);
-            toast.success("QuickDo Deleted!");
+            await deleteQuickDo(id)
+            handleRefreshState(true)
+            toast.success("QuickDo Deleted!")
         } catch (error) {
-            console.error("Error Deleting QuickDo:", error);
-            toast.error("Problem Deleting QuickDo!");
+            console.error("Error Deleting QuickDo:", error)
+            toast.error("Problem Deleting QuickDo!")
         }
-    };
+    }
 
     // ? UPDATE REFRESH STATE
-    const handleRefreshState = (state: boolean) => setRefreshState(state);
-
+    const handleRefreshState = (state: boolean) => setRefreshState(state)
 
     return (
         <>
-
             {/* NAVBAR */}
             <Navbar />
-
             {/* SIDEBAR */}
             <Sidebar />
-
             {/* DASHBOARD CONTAINER */}
             <div className="dashboard-container sm:ml-[60px] w-full sm:w-[calc(100dvw_-_60px)] mt-[134px] sm:mt-0 sm:h-[calc(100dvh_-_61px)] overflow-y-scroll">
-
                 {/* CREATE TODO */}
                 <div className="create-todo-container">
                     <CreateQuickDo handleNewToDo={handleAddQuickDo} allCategories={getAllCategories} />
                 </div>
-
                 {/* DASHBOARD */}
                 <div className="dashboard-list-view-container">
-
                     {/* UTILS BAR */}
                     <div className="utils-container flex justify-start gap-5 py-1 px-4 sm:px-5">
-
                         {/* FILTERS */}
                         <Filters
                             filters={filters}
@@ -192,18 +131,15 @@ const MyDayView = (props: DashboardProps) => {
                             setRefreshState={setRefreshState}
                             defaultFilter={defaultFilter}
                         />
-
                         {/* SORT */}
                         <Sort
                             currentSort={currentSort}
                             currentSortDirection={currentSortDirection}
-                            useSortData={useSortData}
                             setCurrentSort={setCurrentSort}
                             setCurrentSortDirection={setCurrentSortDirection}
                             setRefreshState={setRefreshState}
                         />
                     </div>
-
                     {/* LIST VIEW */}
                     <QuickdoList
                         allTodoData={allTodoData}
@@ -213,7 +149,6 @@ const MyDayView = (props: DashboardProps) => {
                         handleDeleteTodo={handleDeleteTodo}
                     />
                 </div>
-
                 {/* LOADING ANIMATION */}
                 {initialLoading && (
                     <div className="loader-container absolute w-[100dvw] h-[100dvh] left-0 top-0 flex justify-center items-center">
@@ -222,7 +157,7 @@ const MyDayView = (props: DashboardProps) => {
                 )}
             </div>
         </>
-    );
-};
+    )
+}
 
-export default MyDayView;
+export default MyDayView
diff --git a/frontend/src/utils/filter-utils.ts b/frontend/src/utils/filter-utils.ts
new file mode 100644
index 0000000..36bcab1
--- /dev/null
+++ b/frontend/src/utils/filter-utils.ts
@@ -0,0 +1,310 @@
+import type React from "react"
+
+// ? ================================
+// ? TYPE DEFINITIONS
+// ? ================================
+
+export interface useStatusFiltersItems {
+    name: string
+}
+
+export interface useSortDataItems {
+    name: string
+    sort: string
+}
+
+export type DashboardProps = {}
+
+// ? ================================
+// ? STATIC DATA - REUSABLE ACROSS PAGES
+// ? ================================
+
+// ? STATUS FILTER DATA
+export const useStatusFilterData: useStatusFiltersItems[] = [
+    { name: "Open" },
+    { name: "Completed" },
+    { name: "Cancelled" },
+]
+
+// ? SORT DATA
+export const useSortData: useSortDataItems[] = [
+    { name: "Created", sort: "creation" },
+    { name: "Modified", sort: "modified" },
+    { name: "Importance", sort: "is_important" },
+    { name: "Due Date", sort: "date" },
+    { name: "Reminder", sort: "send_reminder" },
+    { name: "Status", sort: "status" },
+    { name: "Description", sort: "description" },
+]
+
+// ? ================================
+// ? FILTER HANDLER FUNCTIONS
+// ? ================================
+
+// ? DYNAMIC HANDLE FILTERS FUNCTION - REUSABLE ACROSS PAGES
+export const createFilterHandler = (
+    setFilters: React.Dispatch<React.SetStateAction<any[]>>,
+    defaultFilter: any[] = [],
+) => {
+    return (key: string, value: string, filter_type: "single" | "multi" = "multi", child_table = "") => {
+        setFilters((prevFilters) => {
+            // ? GET DEFAULT FILTER KEYS TO PRESERVE
+            const defaultFilterKeys = defaultFilter.map((filter) => filter[0])
+
+            let updatedNonDefaultFilters = prevFilters.filter((f) => !defaultFilterKeys.includes(f[0])) // Start with non-default filters from previous state
+
+            const filterKeyForAction = child_table || key
+
+            // ? APPLY USER ACTION ONLY TO NON-DEFAULT FILTERS
+            // ? If the action is on a default filter key, we only allow it if it's a multi-value filter
+            // ? and the action is to add a new value, not remove a default value or change a single default value.
+            if (!defaultFilterKeys.includes(filterKeyForAction)) {
+                // This block handles non-default filters normally
+                if (filter_type === "single") {
+                    if (value === "" || value === null) {
+                        updatedNonDefaultFilters = updatedNonDefaultFilters.filter(
+                            (filter: any) => filter[0] !== filterKeyForAction,
+                        )
+                    } else {
+                        const existingIndex = updatedNonDefaultFilters.findIndex((filter: any) => filter[0] === filterKeyForAction)
+                        if (existingIndex !== -1) {
+                            if (
+                                updatedNonDefaultFilters[existingIndex][2] === value ||
+                                updatedNonDefaultFilters[existingIndex][1] === value
+                            ) {
+                                updatedNonDefaultFilters.splice(existingIndex, 1)
+                            } else {
+                                updatedNonDefaultFilters[existingIndex] = child_table
+                                    ? [child_table, key, "=", value]
+                                    : [key, "=", value]
+                            }
+                        } else {
+                            updatedNonDefaultFilters.push(child_table ? [child_table, key, "=", value] : [key, "=", value])
+                        }
+                    }
+                } else {
+                    // Multi-value
+                    const index = updatedNonDefaultFilters.findIndex((filter: any) => filter[0] === filterKeyForAction)
+                    const fieldIndex = child_table ? 3 : 2
+
+                    if (index !== -1) {
+                        const values = updatedNonDefaultFilters[index][fieldIndex] || []
+                        if (values.includes(value)) {
+                            updatedNonDefaultFilters[index][fieldIndex] = values.filter((item: string) => item !== value)
+                            if (updatedNonDefaultFilters[index][fieldIndex].length === 0) {
+                                updatedNonDefaultFilters.splice(index, 1)
+                            }
+                        } else {
+                            updatedNonDefaultFilters[index][fieldIndex] = [...values, value]
+                        }
+                    } else {
+                        updatedNonDefaultFilters.push(child_table ? [child_table, key, "in", [value]] : [key, "in", [value]])
+                    }
+                }
+            }
+            // ? If the action was on a default filter key, we do nothing to the non-default filters.
+            // ? The default filters will be added back in the final step.
+
+            // ? COMBINE UPDATED NON-DEFAULT FILTERS WITH THE ORIGINAL DEFAULT FILTERS
+            const finalFilters = [...updatedNonDefaultFilters, ...defaultFilter]
+            return finalFilters
+        })
+    }
+}
+
+// ? HANDLE CLEAR FILTERS FUNCTION - REUSABLE ACROSS PAGES
+export const createClearFiltersHandler = (
+    setFilters: React.Dispatch<React.SetStateAction<any[]>>,
+    defaultFilter: any[] = [],
+) => {
+    return () => {
+        setFilters(defaultFilter)
+    }
+}
+
+// ? ================================
+// ? DATE FILTER UTILITY FUNCTIONS
+// ? ================================
+
+// ? GET CURRENT DATE FILTER FROM FILTERS ARRAY
+export const getCurrentDateFilter = (filters: any[]) => {
+    const dateFilter = filters.find((filter) => filter[0] === "date")
+    if (!dateFilter) return null
+
+    // Handle different filter structures
+    if (dateFilter[1] === "in" && Array.isArray(dateFilter[2]) && dateFilter[2].length > 0) {
+        return dateFilter[2][0] // Return first date from array
+    }
+    if (dateFilter[1] === "=" && dateFilter[2]) {
+        return dateFilter[2] // Return direct value
+    }
+    return dateFilter[1] // Return direct value (fallback)
+}
+
+// ? CONVERT DATE STRING BACK TO DATE OBJECT
+export const getDateFromString = (dateString: string | null) => {
+    if (!dateString) return undefined
+    try {
+        // Parse YYYY-MM-DD format
+        const [year, month, day] = dateString.split("-").map(Number)
+        return new Date(year, month - 1, day) // month is 0-indexed
+    } catch {
+        return undefined
+    }
+}
+
+// ? GET CURRENT SELECTED DATE FROM FILTERS (FOR CALENDAR COMPONENT)
+export const getSelectedDate = (filters: any[]) => {
+    const currentDateFilter = getCurrentDateFilter(filters)
+    return getDateFromString(currentDateFilter)
+}
+
+// ? GET THE FORMATTED DATE STRING (YYYY-MM-DD)
+export const getFormattedDate = (date: Date | undefined) => {
+    if (!date) return ""
+    const year = date.getFullYear()
+    const month = String(date.getMonth() + 1).padStart(2, "0")
+    const day = String(date.getDate()).padStart(2, "0")
+    return `${year}-${month}-${day}`
+}
+
+// ? CHECK IF TWO DATES ARE THE SAME DAY
+export const isSameDay = (date1: Date | undefined, date2: Date | undefined) => {
+    if (!date1 || !date2) return false
+    return (
+        date1.getFullYear() === date2.getFullYear() &&
+        date1.getMonth() === date2.getMonth() &&
+        date1.getDate() === date2.getDate()
+    )
+}
+
+// ? ================================
+// ? FILTER STATE CHECKER FUNCTIONS
+// ? ================================
+
+// ? CHECK IF DATE FILTER IS ACTIVE
+export const isDateFilterActive = (filters: any[]) => {
+    return filters.some((filter) => filter[0] === "date")
+}
+
+// ? CHECK IF STATUS FILTER IS ACTIVE
+export const isStatusFilterActive = (filters: any[]) => {
+    return filters.some((filter) => filter[0] === "status")
+}
+
+// ? CHECK IF CATEGORY FILTER IS ACTIVE
+export const isCategoryFilterActive = (filters: any[]) => {
+    return filters.some((filter) => filter[0] === "QuickDo Categories")
+}
+
+// ? CHECK IF IMPORTANCE FILTER IS ACTIVE
+export const isImportanceFilterActive = (filters: any[]) => {
+    return filters.some((filter) => filter[0] === "is_important" && (filter[2] === "1" || filter[2]?.includes("1")))
+}
+
+// ? CHECK IF REMINDER FILTER IS ACTIVE
+export const isReminderFilterActive = (filters: any[]) => {
+    return filters.some((filter) => filter[0] === "send_reminder" && (filter[2] === "1" || filter[2]?.includes("1")))
+}
+
+// ? GET FILTER COUNT BY TYPE
+export const getFilterCount = (filters: any[], filterType: string) => {
+    const filter = filters.find((f) => f[0] === filterType)
+    if (!filter) return 0
+
+    // For array-based filters (multi-value)
+    if (Array.isArray(filter[2])) return filter[2].length
+    if (Array.isArray(filter[3])) return filter[3].length
+
+    // For single-value filters
+    return filter[2] ? 1 : 0
+}
+
+// ? ================================
+// ? ADDITIONAL UTILITY FUNCTIONS
+// ? ================================
+
+// ? CHECK IF FILTER IS A DEFAULT FILTER (DEEP COMPARISON)
+export const isDefaultFilter = (filter: any[], defaultFilters: any[]) => {
+    const filterString = JSON.stringify(filter)
+    return defaultFilters.some((defaultF) => JSON.stringify(defaultF) === filterString)
+}
+
+// ? GET NON-DEFAULT FILTERS ONLY
+export const getNonDefaultFilters = (filters: any[], defaultFilters: any[]) => {
+    const defaultFilterStrings = defaultFilters.map((filter) => JSON.stringify(filter))
+    return filters.filter((filter) => !defaultFilterStrings.includes(JSON.stringify(filter)))
+}
+
+// ? GET DEFAULT FILTERS ONLY
+export const getDefaultFilters = (filters: any[], defaultFilters: any[]) => {
+    const defaultFilterStrings = defaultFilters.map((filter) => JSON.stringify(filter))
+    return filters.filter((filter) => defaultFilterStrings.includes(JSON.stringify(filter)))
+}
+
+// ? GET ALL ACTIVE FILTER TYPES
+export const getActiveFilterTypes = (filters: any[]) => {
+    return filters.map((filter) => filter[0])
+}
+
+// ? CHECK IF ANY FILTERS ARE ACTIVE
+export const hasActiveFilters = (filters: any[]) => {
+    return filters.length > 0
+}
+
+// ? GET FILTER SUMMARY FOR DISPLAY
+export const getFilterSummary = (filters: any[]) => {
+    const summary: { [key: string]: any } = {}
+
+    filters.forEach((filter) => {
+        const filterType = filter[0]
+
+        if (filter[2] && Array.isArray(filter[2])) {
+            // Multi-value filter
+            summary[filterType] = filter[2]
+        } else if (filter[3] && Array.isArray(filter[3])) {
+            // Child table multi-value filter
+            summary[filterType] = filter[3]
+        } else {
+            // Single-value filter
+            summary[filterType] = filter[2] || filter[1]
+        }
+    })
+
+    return summary
+}
+
+// ? RESET SPECIFIC FILTER TYPE
+export const createResetFilterHandler = (setFilters: React.Dispatch<React.SetStateAction<any[]>>) => {
+    return (filterType: string) => {
+        setFilters((prevFilters) => {
+            return prevFilters.filter((filter) => filter[0] !== filterType)
+        })
+    }
+}
+
+// ? VALIDATE FILTER STRUCTURE
+export const validateFilter = (filter: any[]) => {
+    if (!Array.isArray(filter) || filter.length < 2) {
+        return false
+    }
+
+    const [filterType, operator, value] = filter
+
+    if (!filterType || !operator) {
+        return false
+    }
+
+    // Check for valid operators
+    const validOperators = ["=", "in", "!=", ">", "<", ">=", "<=", "like"]
+    if (!validOperators.includes(operator)) {
+        return false
+    }
+
+    return true
+}
+
+// ? SANITIZE FILTERS ARRAY
+export const sanitizeFilters = (filters: any[]) => {
+    return filters.filter(validateFilter)
+}