diff --git a/web/src/components/ViewSetting.tsx b/web/src/components/ViewSetting.tsx
index d2f4745..5deb504 100644
--- a/web/src/components/ViewSetting.tsx
+++ b/web/src/components/ViewSetting.tsx
@@ -1,5 +1,4 @@
-import { Button, Divider, Option, Select } from "@mui/joy";
-import { toast } from "react-hot-toast";
+import { Divider, Option, Select, Switch } from "@mui/joy";
 import useViewStore from "../stores/v1/view";
 import Icon from "./Icon";
 import Dropdown from "./common/Dropdown";
@@ -10,11 +9,6 @@ const ViewSetting = () => {
   const { field, direction } = order;
   const displayStyle = viewStore.displayStyle || "full";
 
-  const handleReset = () => {
-    viewStore.setOrder({ field: "name", direction: "asc" });
-    toast.success("Order reset");
-  };
-
   return (
     <Dropdown
       trigger={
@@ -24,13 +18,16 @@ const ViewSetting = () => {
       }
       actionsClassName="!mt-3 !-right-2"
       actions={
-        <div className="w-52 p-2 pt-0 gap-2 flex flex-col justify-start items-start" onClick={(e) => e.stopPropagation()}>
-          <div className="w-full flex flex-row justify-between items-center mt-1">
-            <span className="text-sm font-medium">View order</span>
-            <Button size="sm" variant="plain" color="neutral" onClick={handleReset}>
-              <Icon.RefreshCw className="w-4 h-auto text-gray-500" />
-            </Button>
+        <div className="w-52 p-2 gap-2 flex flex-col justify-start items-start" onClick={(e) => e.stopPropagation()}>
+          <div className="w-full flex flex-row justify-between items-center">
+            <span className="text-sm shrink-0 mr-2">Compact mode</span>
+            <Switch
+              size="sm"
+              checked={displayStyle === "compact"}
+              onChange={(event) => viewStore.setDisplayStyle(event.target.checked ? "compact" : "full")}
+            />
           </div>
+          <Divider className="!my-1" />
           <div className="w-full flex flex-row justify-between items-center">
             <span className="text-sm shrink-0 mr-2">Order by</span>
             <Select size="sm" value={field} onChange={(_, value) => viewStore.setOrder({ field: value as any })}>
@@ -47,14 +44,6 @@ const ViewSetting = () => {
               <Option value={"desc"}>DESC</Option>
             </Select>
           </div>
-          <Divider />
-          <div className="w-full flex flex-row justify-between items-center">
-            <span className="text-sm shrink-0 mr-2">Display</span>
-            <Select size="sm" value={displayStyle} onChange={(_, value) => viewStore.setDisplayStyle(value as any)}>
-              <Option value={"full"}>Full</Option>
-              <Option value={"compact"}>Compact</Option>
-            </Select>
-          </div>
         </div>
       }
     ></Dropdown>