diff --git a/web/src/components/MemoContent/index.tsx b/web/src/components/MemoContent/index.tsx
index 9a6c849b3301d..1bc107b1017b7 100644
--- a/web/src/components/MemoContent/index.tsx
+++ b/web/src/components/MemoContent/index.tsx
@@ -41,17 +41,16 @@ const MemoContent: React.FC<Props> = (props: Props) => {
 
   // Initial compact mode.
   useEffect(() => {
-    if (!props.compact) {
-      return;
-    }
     if (!memoContentContainerRef.current) {
       return;
     }
 
-    if ((memoContentContainerRef.current as HTMLDivElement).getBoundingClientRect().height > MAX_DISPLAY_HEIGHT) {
+    if (props.compact && (memoContentContainerRef.current as HTMLDivElement).getBoundingClientRect().height > MAX_DISPLAY_HEIGHT) {
       setShowCompactMode("ALL");
+    } else if (showCompactMode !== undefined) {
+      setShowCompactMode("SNIPPET");
     }
-  }, []);
+  }, [props.compact]);
 
   const onMemoContentClick = async (e: React.MouseEvent) => {
     if (onClick) {
diff --git a/web/src/components/MemoDisplaySettingMenu.tsx b/web/src/components/MemoDisplaySettingMenu.tsx
index d1da8d5fe5b87..34b9f33e32710 100644
--- a/web/src/components/MemoDisplaySettingMenu.tsx
+++ b/web/src/components/MemoDisplaySettingMenu.tsx
@@ -12,7 +12,7 @@ interface Props {
 
 const MemoDisplaySettingMenu = observer(({ className }: Props) => {
   const t = useTranslate();
-  const isApplying = viewStore.state.orderByTimeAsc !== false || viewStore.state.layout !== "LIST";
+  const isApplying = viewStore.state.orderByTimeAsc !== false || viewStore.state.layout !== "LIST" || viewStore.state.compact !== true;
 
   return (
     <Popover>
@@ -51,6 +51,20 @@ const MemoDisplaySettingMenu = observer(({ className }: Props) => {
               <Option value={"MASONRY"}>{t("memo.masonry")}</Option>
             </Select>
           </div>
+          <div className="w-full flex flex-row justify-between items-center">
+            <span className="text-sm shrink-0 mr-3">{t("memo.compact")}</span>
+            <Select
+              value={viewStore.state.compact}
+              onChange={(_, value) =>
+                viewStore.state.setPartial({
+                  compact: Boolean(value),
+                })
+              }
+            >
+              <Option value={false}>{t("memo.disable")}</Option>
+              <Option value={true}>{t("memo.enable")}</Option>
+            </Select>
+          </div>
         </div>
       </PopoverContent>
     </Popover>
diff --git a/web/src/locales/en.json b/web/src/locales/en.json
index c457cecaf73da..75c9140dc3c41 100644
--- a/web/src/locales/en.json
+++ b/web/src/locales/en.json
@@ -143,6 +143,9 @@
     "direction": "Direction",
     "direction-asc": "Ascending",
     "direction-desc": "Descending",
+    "compact": "Compact View",
+    "enable": "Enable",
+    "disable": "Disable",
     "display-time": "Display Time",
     "filters": "Filters",
     "links": "Links",
diff --git a/web/src/pages/Home.tsx b/web/src/pages/Home.tsx
index 54d3e19e9cdde..83e3b0b66a2b1 100644
--- a/web/src/pages/Home.tsx
+++ b/web/src/pages/Home.tsx
@@ -46,11 +46,13 @@ const Home = observer(() => {
       conditions.push(`tag_search == [${tagSearch.join(", ")}]`);
     }
     return conditions.join(" && ");
-  }, [user, memoFilterStore.filters, viewStore.state.orderByTimeAsc]);
+  }, [user, memoFilterStore.filters, viewStore.state.compact, viewStore.state.orderByTimeAsc]);
 
   return (
     <PagedMemoList
-      renderer={(memo: Memo) => <MemoView key={`${memo.name}-${memo.displayTime}`} memo={memo} showVisibility showPinned compact />}
+      renderer={(memo: Memo) => (
+        <MemoView key={`${memo.name}-${memo.displayTime}`} memo={memo} showVisibility showPinned compact={viewStore.state.compact} />
+      )}
       listSort={(memos: Memo[]) =>
         memos
           .filter((memo) => memo.state === State.NORMAL)
diff --git a/web/src/store/v2/view.ts b/web/src/store/v2/view.ts
index a8535ad1ea54b..8f9f2b4beafbf 100644
--- a/web/src/store/v2/view.ts
+++ b/web/src/store/v2/view.ts
@@ -5,6 +5,7 @@ const LOCAL_STORAGE_KEY = "memos-view-setting";
 class LocalState {
   orderByTimeAsc: boolean = false;
   layout: "LIST" | "MASONRY" = "LIST";
+  compact: boolean = true;
 
   constructor() {
     makeAutoObservable(this);
@@ -36,6 +37,9 @@ const viewStore = (() => {
     if (Object.hasOwn(cache, "orderByTimeAsc")) {
       viewStore.state.setPartial({ orderByTimeAsc: Boolean(cache.orderByTimeAsc) });
     }
+    if (Object.hasOwn(cache, "compact")) {
+      viewStore.state.setPartial({ compact: Boolean(cache.compact) });
+    }
     if (Object.hasOwn(cache, "layout")) {
       if (["LIST", "MASONRY"].includes(cache.layout)) {
         viewStore.state.setPartial({ layout: cache.layout });