diff --git a/src/components/Expenses/ExpenseFilterPanel.jsx b/src/components/Expenses/ExpenseFilterPanel.jsx
index 441b051e..b83202a4 100644
--- a/src/components/Expenses/ExpenseFilterPanel.jsx
+++ b/src/components/Expenses/ExpenseFilterPanel.jsx
@@ -20,15 +20,18 @@ const ExpenseFilterPanel = ({ onApply, handleGroupBy }) => {
   const selectedProjectId = useSelector((store) => store.localVariables.projectId);
   const { data, isLoading,isError,error,isFetching , isFetched} = useExpenseFilter();
 
-  const groupByList = useMemo(() => [
+const groupByList = useMemo(() => {
+  return [
     { id: "transactionDate", name: "Transaction Date" },
     { id: "status", name: "Status" },
     { id: "submittedBy", name: "Submitted By" },
     { id: "project", name: "Project" },
     { id: "paymentMode", name: "Payment Mode" },
     { id: "expensesType", name: "Expense Type" },
-    {id: "createdAt",name:"Submitted Date"}
-  ], []);
+    { id: "createdAt", name: "Submitted Date" }
+  ].sort((a, b) => a.name.localeCompare(b.name));
+}, []);
+
 
   const [selectedGroup, setSelectedGroup] = useState(groupByList[0]);
   const [resetKey, setResetKey] = useState(0);
diff --git a/src/components/Expenses/ExpenseStatusLogs.jsx b/src/components/Expenses/ExpenseStatusLogs.jsx
index 93bfac45..443b07ba 100644
--- a/src/components/Expenses/ExpenseStatusLogs.jsx
+++ b/src/components/Expenses/ExpenseStatusLogs.jsx
@@ -20,7 +20,7 @@ const ExpenseStatusLogs = ({ data }) => {
         {logsToShow.map((log, index) => (
           <div
             key={log.id}
-            className="col-12 d-flex align-items-start mb-2"
+            className="col-12 d-flex align-items-start mb-1"
           >
             <Avatar
               size="xs"