diff --git a/apps/app/components/core/spreadsheet-view/single-issue.tsx b/apps/app/components/core/spreadsheet-view/single-issue.tsx
index d3086e254..f763e706c 100644
--- a/apps/app/components/core/spreadsheet-view/single-issue.tsx
+++ b/apps/app/components/core/spreadsheet-view/single-issue.tsx
@@ -128,15 +128,15 @@ export const SingleSpreadsheetIssue: React.FC<Props> = ({
       className="relative group grid auto-rows-[minmax(44px,1fr)] hover:rounded-sm hover:bg-brand-surface-2 border-b border-brand-base w-full min-w-max"
       style={{ gridTemplateColumns }}
     >
-      <div className="flex gap-1.5 items-center px-4 sticky left-0 z-10 text-brand-secondary bg-brand-base group-hover:text-brand-base group-hover:bg-brand-surface-2 border-brand-base w-full">
+      <div className="flex gap-1.5 items-center px-4 sticky left-0 z-[1] text-brand-secondary bg-brand-base group-hover:text-brand-base group-hover:bg-brand-surface-2 border-brand-base w-full">
         <span className="flex gap-1 items-center" style={issue.parent ? { paddingLeft } : {}}>
-          {properties.key && (
-            <>
-              <div className="flex items-center cursor-pointer text-xs text-center hover:text-brand-base w-14 ">
+          <div className="flex items-center cursor-pointer text-xs text-center hover:text-brand-base w-14  opacity-100 group-hover:opacity-0">
+            {properties.key && (
+              <span>
                 {issue.project_detail?.identifier}-{issue.sequence_id}
-              </div>
-            </>
-          )}
+              </span>
+            )}
+          </div>
 
           <div className="h-5 w-5">
             {issue.sub_issues_count > 0 && (
@@ -237,9 +237,14 @@ export const SingleSpreadsheetIssue: React.FC<Props> = ({
           />
         </div>
       )}
-      <div className="absolute top-2.5 right-2.5 z-30 cursor-pointer opacity-0 group-hover:opacity-100">
+      <div
+        className="absolute top-2.5 z-10 cursor-pointer opacity-0 group-hover:opacity-100"
+        style={{
+          left: `${nestingLevel * 68 + 24}px`,
+        }}
+      >
         {!isNotAllowed && (
-          <CustomMenu width="auto" ellipsis>
+          <CustomMenu width="auto" position="left" ellipsis>
             <CustomMenu.MenuItem onClick={handleEditIssue}>
               <div className="flex items-center justify-start gap-2">
                 <PencilIcon className="h-4 w-4" />
diff --git a/apps/app/components/core/spreadsheet-view/spreadsheet-columns.tsx b/apps/app/components/core/spreadsheet-view/spreadsheet-columns.tsx
index 9f615f165..85d05a288 100644
--- a/apps/app/components/core/spreadsheet-view/spreadsheet-columns.tsx
+++ b/apps/app/components/core/spreadsheet-view/spreadsheet-columns.tsx
@@ -19,13 +19,17 @@ export const SpreadsheetColumns: React.FC<Props> = ({ columnData, gridTemplateCo
     "spreadsheetViewSorting",
     ""
   );
+  const { storedValue: activeSortingProperty, setValue: setActiveSortingProperty } =
+    useLocalStorage("spreadsheetViewActiveSortingProperty", "");
 
   const { orderBy, setOrderBy } = useSpreadsheetIssuesView();
 
   const handleOrderBy = (order: TIssueOrderByOptions, itemKey: string) => {
     setOrderBy(order);
     setSelectedMenuItem(`${order}_${itemKey}`);
+    setActiveSortingProperty(order === "-created_at" ? "" : itemKey);
   };
+
   return (
     <div
       className={`grid auto-rows-[minmax(36px,1fr)] w-full min-w-max`}
@@ -35,39 +39,34 @@ export const SpreadsheetColumns: React.FC<Props> = ({ columnData, gridTemplateCo
         if (col.isActive) {
           return (
             <div
-              className={`bg-brand-surface-2 ${
-                col.propertyName === "title" ? "sticky left-0 z-20 bg-brand-surface-2 pl-24" : ""
+              className={`bg-brand-surface-1 w-full ${
+                col.propertyName === "title" ? "sticky left-0 z-[2] bg-brand-surface-1 pl-24" : ""
               }`}
             >
-              {col.propertyName === "title" || col.propertyName === "priority" ? (
+              {col.propertyName === "title" ? (
                 <div
-                  className={`flex items-center justify-start gap-1.5 cursor-default text-sm text-brand-secondary text-current py-2.5 px-2`}
+                  className={`flex items-center justify-start gap-1.5 cursor-default text-sm text-brand-secondary text-current w-full py-2.5 px-2`}
                 >
-                  {col.icon ? (
-                    <col.icon
-                      className={`text-brand-secondary ${
-                        col.propertyName === "estimate" ? "-rotate-90" : ""
-                      }`}
-                      aria-hidden="true"
-                      height="14"
-                      width="14"
-                    />
-                  ) : col.propertyName === "priority" ? (
-                    <span className="text-sm material-symbols-rounded text-brand-secondary">
-                      signal_cellular_alt
-                    </span>
-                  ) : (
-                    ""
-                  )}
-
                   {col.colName}
                 </div>
               ) : (
                 <CustomMenu
+                  className="!w-full"
                   customButton={
                     <div
-                      className={`group flex items-center justify-start gap-1.5 cursor-pointer text-sm text-brand-secondary text-current hover:text-brand-base py-2.5 px-2`}
+                      className={`relative group flex items-center justify-start gap-1.5 cursor-pointer text-sm text-brand-secondary text-current hover:text-brand-base w-full py-3 px-2 ${
+                        activeSortingProperty === col.propertyName ? "bg-brand-surface-2" : ""
+                      }`}
                     >
+                      {activeSortingProperty === col.propertyName && (
+                        <div className="absolute top-1 right-1.5">
+                          <Icon
+                            iconName="filter_list"
+                            className="flex items-center justify-center h-3.5 w-3.5 rounded-full bg-brand-accent text-xs text-white"
+                          />
+                        </div>
+                      )}
+
                       {col.icon ? (
                         <col.icon
                           className={`text-brand-secondary group-hover:text-brand-base ${
@@ -110,25 +109,42 @@ export const SpreadsheetColumns: React.FC<Props> = ({ columnData, gridTemplateCo
                           : "text-brand-secondary hover:text-brand-base"
                       }`}
                     >
-                      <div className="flex gap-1.5 items-center">
+                      <div className="flex gap-2 items-center">
                         {col.propertyName === "assignee" || col.propertyName === "labels" ? (
                           <>
-                            <span>A-Z</span>
-                            <span>Ascending</span>
+                            <span className="relative flex items-center h-6 w-6">
+                              <Icon
+                                iconName="east"
+                                className="absolute left-0 rotate-90 text-xs leading-3"
+                              />
+                              <Icon iconName="sort" className="absolute right-0 text-sm" />
+                            </span>
+                            <span>A</span>
+                            <Icon iconName="east" className="text-sm" />
+                            <span>Z</span>
                           </>
                         ) : col.propertyName === "due_date" ? (
                           <>
-                            <span>1-9</span>
-                            <span>Ascending</span>
-                          </>
-                        ) : col.propertyName === "estimate" ? (
-                          <>
-                            <span>0</span>
+                            <span className="relative flex items-center h-6 w-6">
+                              <Icon
+                                iconName="east"
+                                className="absolute left-0 rotate-90 text-xs leading-3"
+                              />
+                              <Icon iconName="sort" className="absolute right-0 text-sm" />
+                            </span>
+                            <span>New</span>
                             <Icon iconName="east" className="text-sm" />
-                            <span>10</span>
+                            <span>Old</span>
                           </>
                         ) : (
                           <>
+                            <span className="relative flex items-center h-6 w-6">
+                              <Icon
+                                iconName="east"
+                                className="absolute left-0 rotate-90 text-xs leading-3"
+                              />
+                              <Icon iconName="sort" className="absolute right-0 text-sm" />
+                            </span>
                             <span>First</span>
                             <Icon iconName="east" className="text-sm" />
                             <span>Last</span>
@@ -146,7 +162,7 @@ export const SpreadsheetColumns: React.FC<Props> = ({ columnData, gridTemplateCo
                     </div>
                   </CustomMenu.MenuItem>
                   <CustomMenu.MenuItem
-                    className={`${
+                    className={`mt-0.5 ${
                       selectedMenuItem === `${col.descendingOrder}_${col.propertyName}`
                         ? "bg-brand-surface-2"
                         : ""
@@ -163,25 +179,51 @@ export const SpreadsheetColumns: React.FC<Props> = ({ columnData, gridTemplateCo
                           : "text-brand-secondary hover:text-brand-base"
                       }`}
                     >
-                      <div className="flex gap-1.5 items-center">
+                      <div className="flex gap-2 items-center">
                         {col.propertyName === "assignee" || col.propertyName === "labels" ? (
                           <>
-                            <span>Z-A</span>
-                            <span>Descending</span>
+                            <span className="relative flex items-center h-6 w-6">
+                              <Icon
+                                iconName="east"
+                                className="absolute left-0 -rotate-90 text-xs leading-3"
+                              />
+                              <Icon
+                                iconName="sort"
+                                className="absolute rotate-180 transform scale-x-[-1] right-0 text-sm"
+                              />
+                            </span>
+                            <span>Z</span>
+                            <Icon iconName="east" className="text-sm" />
+                            <span>A</span>
                           </>
                         ) : col.propertyName === "due_date" ? (
                           <>
-                            <span>9-1</span>
-                            <span>Descending</span>
-                          </>
-                        ) : col.propertyName === "estimate" ? (
-                          <>
-                            <span>10</span>
+                            <span className="relative flex items-center h-6 w-6">
+                              <Icon
+                                iconName="east"
+                                className="absolute left-0 -rotate-90 text-xs leading-3"
+                              />
+                              <Icon
+                                iconName="sort"
+                                className="absolute rotate-180 transform scale-x-[-1] right-0 text-sm"
+                              />
+                            </span>
+                            <span>Old</span>
                             <Icon iconName="east" className="text-sm" />
-                            <span>0</span>
+                            <span>New</span>
                           </>
                         ) : (
                           <>
+                            <span className="relative flex items-center h-6 w-6">
+                              <Icon
+                                iconName="east"
+                                className="absolute left-0 -rotate-90 text-xs leading-3"
+                              />
+                              <Icon
+                                iconName="sort"
+                                className="absolute rotate-180 transform scale-x-[-1] right-0 text-sm"
+                              />
+                            </span>
                             <span>Last</span>
                             <Icon iconName="east" className="text-sm" />
                             <span>First</span>
@@ -198,38 +240,32 @@ export const SpreadsheetColumns: React.FC<Props> = ({ columnData, gridTemplateCo
                       />
                     </div>
                   </CustomMenu.MenuItem>
-                  <CustomMenu.MenuItem
-                    className={`${
-                      selectedMenuItem === `-created_at_${col.propertyName}`
-                        ? "bg-brand-surface-2"
-                        : ""
-                    }`}
-                    key={col.property}
-                    onClick={() => {
-                      handleOrderBy("-created_at", col.propertyName);
-                    }}
-                  >
-                    <div
-                      className={`group flex gap-1.5 px-1 items-center justify-between ${
-                        selectedMenuItem === `-created_at_${col.propertyName}`
-                          ? "text-brand-base"
-                          : "text-brand-secondary hover:text-brand-base"
-                      }`}
-                    >
-                      <div className="flex gap-1.5 items-center">
-                        <Icon iconName="block" className="text-sm" />
-                        <span>None</span>
-                      </div>
-
-                      <CheckIcon
-                        className={`h-3.5 w-3.5 opacity-0 group-hover:opacity-100 ${
+                  {selectedMenuItem &&
+                    selectedMenuItem !== "" &&
+                    orderBy !== "-created_at" &&
+                    selectedMenuItem.includes(col.propertyName) && (
+                      <CustomMenu.MenuItem
+                        className={`mt-0.5${
                           selectedMenuItem === `-created_at_${col.propertyName}`
-                            ? "opacity-100"
+                            ? "bg-brand-surface-2"
                             : ""
                         }`}
-                      />
-                    </div>
-                  </CustomMenu.MenuItem>
+                        key={col.property}
+                        onClick={() => {
+                          handleOrderBy("-created_at", col.propertyName);
+                        }}
+                      >
+                        <div className={`group flex gap-1.5 px-1 items-center justify-between `}>
+                          <div className="flex gap-1.5 items-center">
+                            <span className="relative flex items-center justify-center h-6 w-6">
+                              <Icon iconName="ink_eraser" className="text-sm" />
+                            </span>
+
+                            <span>Clear sorting</span>
+                          </div>
+                        </div>
+                      </CustomMenu.MenuItem>
+                    )}
                 </CustomMenu>
               )}
             </div>
diff --git a/apps/app/components/core/spreadsheet-view/spreadsheet-view.tsx b/apps/app/components/core/spreadsheet-view/spreadsheet-view.tsx
index 6f36b2dbb..c47ddd805 100644
--- a/apps/app/components/core/spreadsheet-view/spreadsheet-view.tsx
+++ b/apps/app/components/core/spreadsheet-view/spreadsheet-view.tsx
@@ -56,7 +56,7 @@ export const SpreadsheetView: React.FC<Props> = ({
 
   return (
     <div className="h-full rounded-lg text-brand-secondary overflow-x-auto whitespace-nowrap bg-brand-base">
-      <div className="sticky z-20 top-0 border-b border-brand-base bg-brand-surface-2 w-full min-w-max">
+      <div className="sticky z-[2] top-0 border-b border-brand-base bg-brand-surface-1 w-full min-w-max">
         <SpreadsheetColumns columnData={columnData} gridTemplateColumns={gridTemplateColumns} />
       </div>
       {spreadsheetIssues ? (
diff --git a/apps/app/constants/spreadsheet.ts b/apps/app/constants/spreadsheet.ts
index 5ef60f40d..8e4bdb21d 100644
--- a/apps/app/constants/spreadsheet.ts
+++ b/apps/app/constants/spreadsheet.ts
@@ -24,6 +24,8 @@ export const SPREADSHEET_COLUMN = [
     propertyName: "priority",
     colName: "Priority",
     colSize: "128px",
+    ascendingOrder: "priority",
+    descendingOrder: "-priority",
   },
   {
     propertyName: "assignee",