diff --git a/src/client/web/src/components/__test__/pane_login.test.tsx b/src/client/web/src/components/__test__/pane_login.test.tsx
index 97ea8ae..5cde0af 100644
--- a/src/client/web/src/components/__test__/pane_login.test.tsx
+++ b/src/client/web/src/components/__test__/pane_login.test.tsx
@@ -63,7 +63,7 @@ describe("Login", () => {
               filePath: info.realFilePath,
               size: info.size,
               uploaded: info.uploaded,
-              state: UploadState.Ready,
+              state: UploadState.Stopped,
               err: "",
             };
           }
diff --git a/src/client/web/src/components/__test__/state_mgr.test.tsx b/src/client/web/src/components/__test__/state_mgr.test.tsx
index 142d341..b32648b 100644
--- a/src/client/web/src/components/__test__/state_mgr.test.tsx
+++ b/src/client/web/src/components/__test__/state_mgr.test.tsx
@@ -61,7 +61,7 @@ describe("State Manager", () => {
               filePath: info.realFilePath,
               size: info.size,
               uploaded: info.uploaded,
-              state: UploadState.Ready,
+              state: UploadState.Stopped,
               err: "",
             };
           }
diff --git a/src/client/web/src/components/layout/rows.tsx b/src/client/web/src/components/layout/rows.tsx
index e7b24b9..aee273c 100644
--- a/src/client/web/src/components/layout/rows.tsx
+++ b/src/client/web/src/components/layout/rows.tsx
@@ -1,11 +1,6 @@
 import * as React from "react";
 import { List } from "immutable";
 
-import { BiSortUp } from "@react-icons/all-files/bi/BiSortUp";
-
-import { Flexbox } from "./flexbox";
-import { sortRows } from "../../common/utils";
-
 export interface Row {
   elem: React.ReactNode; // element to display
   val: Object; // original object value
@@ -13,94 +8,32 @@ export interface Row {
 }
 
 export interface Props {
-  // sortKeys: List<string>; // display names in order for sorting
   rows: List<React.ReactNode>;
   id?: string;
   style?: React.CSSProperties;
   className?: string;
-  // updateRows?: (rows: Object) => void; // this is a callback which update state with re-sorted rows
 }
 
 export interface State {}
-//   // orders: List<boolean>; // asc = true, desc = false
-// }
 
 export class Rows extends React.Component<Props, State, {}> {
   constructor(p: Props) {
     super(p);
-    // this.state = {
-    //   orders: p.sortKeys.map((_: string, i: number) => {
-    //     return false;
-    //   }),
-    // };
   }
 
-  // sortRows = (key: number) => {
-  //   if (this.props.updateRows == null) {
-  //     return;
-  //   }
-  //   const sortOption = this.props.sortKeys.get(key);
-  //   if (sortOption == null) {
-  //     return;
-  //   }
-  //   const currentOrder = this.state.orders.get(key);
-  //   if (currentOrder == null) {
-  //     return;
-  //   }
-  //   const expectedOrder = !currentOrder;
-
-  //   const sortedRows = sortRows(this.props.rows, key, expectedOrder);
-  //   const sortedItems = sortedRows.map((row: Row): Object => {
-  //     return row.val;
-  //   });
-  //   const newOrders = this.state.orders.set(key, !currentOrder);
-  //   this.setState({ orders: newOrders });
-  //   this.props.updateRows(sortedItems);
-  // };
-
   render() {
-    // const sortBtns = this.props.sortKeys.map(
-    //   (displayName: string, i: number): React.ReactNode => {
-    //     return (
-    //       <button
-    //         key={`rows-${i}`}
-    //         className="float"
-    //         onClick={() => {
-    //           this.sortRows(i);
-    //         }}
-    //       >
-    //         {displayName}
-    //       </button>
-    //     );
-    //   }
-    // );
-
     const bodyRows = this.props.rows.map(
       (row: React.ReactNode, i: number): React.ReactNode => {
         return <div key={`rows-r-${i}`}>{row}</div>;
       }
     );
 
-    // const orderByList =
-    //   sortBtns.size > 0 ? (
-    //     <div className="margin-b-l">
-    //       <Flexbox
-    //         children={List([
-    //           <BiSortUp size="3rem" className="black-font margin-r-m" />,
-    //           <span>{sortBtns}</span>,
-    //         ])}
-    //         childrenStyles={List([{ flex: "0 0 auto" }, { flex: "0 0 auto" }])}
-    //       />
-    //     </div>
-    //   ) : null;
-
     return (
       <div
         id={this.props.id}
         style={this.props.style}
         className={this.props.className}
       >
-        {/* {orderByList} */}
         {bodyRows}
       </div>
     );
diff --git a/src/client/web/src/components/state_updater.ts b/src/client/web/src/components/state_updater.ts
index a450f68..0a6fbde 100644
--- a/src/client/web/src/components/state_updater.ts
+++ b/src/client/web/src/components/state_updater.ts
@@ -97,6 +97,11 @@ export class Updater {
         return entry;
       })
     );
+
+    this.sortUploadings(
+      this.props.uploadingsInfo.orderBy,
+      this.props.uploadingsInfo.order
+    );
   };
 
   addSharing = async (): Promise<string> => {
@@ -163,7 +168,7 @@ export class Updater {
           filePath: remoteInfo.realFilePath,
           size: remoteInfo.size,
           uploaded: remoteInfo.uploaded,
-          state: UploadState.Ready,
+          state: UploadState.Stopped,
           err: "",
         });
       } else {
@@ -179,6 +184,10 @@ export class Updater {
     });
 
     this.props.uploadingsInfo.uploadings = updatedUploads;
+    this.sortUploadings(
+      this.props.uploadingsInfo.orderBy,
+      this.props.uploadingsInfo.order
+    );
     return "";
   };