diff --git a/src/components/Expenses/ExpenseFilterPanel.jsx b/src/components/Expenses/ExpenseFilterPanel.jsx
index db5d5c0a..44a03780 100644
--- a/src/components/Expenses/ExpenseFilterPanel.jsx
+++ b/src/components/Expenses/ExpenseFilterPanel.jsx
@@ -18,7 +18,7 @@ import { ExpenseFilterSkeleton } from "./ExpenseSkeleton";
 
 const ExpenseFilterPanel = ({ onApply, handleGroupBy }) => {
   const selectedProjectId = useSelector((store) => store.localVariables.projectId);
-  const { data, isLoading } = useExpenseFilter();
+  const { data, isLoading,isError,error,isFetching , isFetched} = useExpenseFilter();
 
   const groupByList = useMemo(() => [
     { id: "transactionDate", name: "Transaction Date" },
@@ -69,8 +69,8 @@ const ExpenseFilterPanel = ({ onApply, handleGroupBy }) => {
     closePanel();
   };
 
-  if (isLoading) return <ExpenseFilterSkeleton />;
-
+  if (isLoading || isFetching) return <ExpenseFilterSkeleton />;
+  if(isError && isFetched) return <div>Something went wrong Here- {error.message} </div>
   return (
     <>