diff --git a/web/src/components/AttachmentIcon.tsx b/web/src/components/AttachmentIcon.tsx
index 1469f643e..a28259e14 100644
--- a/web/src/components/AttachmentIcon.tsx
+++ b/web/src/components/AttachmentIcon.tsx
@@ -13,7 +13,7 @@ import React, { useState } from "react";
 import { cn } from "@/lib/utils";
 import { Attachment } from "@/types/proto/api/v1/attachment_service";
 import { getAttachmentType, getAttachmentUrl } from "@/utils/attachment";
-import { PreviewImageDialog } from "./PreviewImageDialog";
+import PreviewImageDialog from "./PreviewImageDialog";
 import SquareDiv from "./kit/SquareDiv";
 
 interface Props {
diff --git a/web/src/components/ChangeMemberPasswordDialog.tsx b/web/src/components/ChangeMemberPasswordDialog.tsx
index c4537f67e..1fd43b6e3 100644
--- a/web/src/components/ChangeMemberPasswordDialog.tsx
+++ b/web/src/components/ChangeMemberPasswordDialog.tsx
@@ -8,14 +8,14 @@ import { userStore } from "@/store";
 import { User } from "@/types/proto/api/v1/user_service";
 import { useTranslate } from "@/utils/i18n";
 
-interface ChangeMemberPasswordDialogProps {
+interface Props {
   open: boolean;
   onOpenChange: (open: boolean) => void;
   user?: User;
   onSuccess?: () => void;
 }
 
-export function ChangeMemberPasswordDialog({ open, onOpenChange, user, onSuccess }: ChangeMemberPasswordDialogProps) {
+function ChangeMemberPasswordDialog({ open, onOpenChange, user, onSuccess }: Props) {
   const t = useTranslate();
   const [newPassword, setNewPassword] = useState("");
   const [newPasswordAgain, setNewPasswordAgain] = useState("");
diff --git a/web/src/components/CreateAccessTokenDialog.tsx b/web/src/components/CreateAccessTokenDialog.tsx
index 0c139c145..2e8d22dcb 100644
--- a/web/src/components/CreateAccessTokenDialog.tsx
+++ b/web/src/components/CreateAccessTokenDialog.tsx
@@ -10,7 +10,7 @@ import useCurrentUser from "@/hooks/useCurrentUser";
 import useLoading from "@/hooks/useLoading";
 import { useTranslate } from "@/utils/i18n";
 
-interface CreateAccessTokenDialogProps {
+interface Props {
   open: boolean;
   onOpenChange: (open: boolean) => void;
   onSuccess: () => void;
@@ -21,7 +21,7 @@ interface State {
   expiration: number;
 }
 
-export function CreateAccessTokenDialog({ open, onOpenChange, onSuccess }: CreateAccessTokenDialogProps) {
+function CreateAccessTokenDialog({ open, onOpenChange, onSuccess }: Props) {
   const t = useTranslate();
   const currentUser = useCurrentUser();
   const [state, setState] = useState({
diff --git a/web/src/components/CreateIdentityProviderDialog.tsx b/web/src/components/CreateIdentityProviderDialog.tsx
index 2d2b2e14e..a50d0cc85 100644
--- a/web/src/components/CreateIdentityProviderDialog.tsx
+++ b/web/src/components/CreateIdentityProviderDialog.tsx
@@ -97,14 +97,14 @@ const templateList: IdentityProvider[] = [
   },
 ];
 
-interface CreateIdentityProviderDialogProps {
+interface Props {
   open: boolean;
   onOpenChange: (open: boolean) => void;
   identityProvider?: IdentityProvider;
   onSuccess?: () => void;
 }
 
-export function CreateIdentityProviderDialog({ open, onOpenChange, identityProvider, onSuccess }: CreateIdentityProviderDialogProps) {
+function CreateIdentityProviderDialog({ open, onOpenChange, identityProvider, onSuccess }: Props) {
   const t = useTranslate();
   const identityProviderTypes = [...new Set(templateList.map((t) => t.type))];
   const [basicInfo, setBasicInfo] = useState({
diff --git a/web/src/components/CreateShortcutDialog.tsx b/web/src/components/CreateShortcutDialog.tsx
index 92e3daacc..da2127b82 100644
--- a/web/src/components/CreateShortcutDialog.tsx
+++ b/web/src/components/CreateShortcutDialog.tsx
@@ -12,14 +12,14 @@ import { userStore } from "@/store";
 import { Shortcut } from "@/types/proto/api/v1/shortcut_service";
 import { useTranslate } from "@/utils/i18n";
 
-interface CreateShortcutDialogProps {
+interface Props {
   open: boolean;
   onOpenChange: (open: boolean) => void;
   shortcut?: Shortcut;
   onSuccess?: () => void;
 }
 
-export function CreateShortcutDialog({ open, onOpenChange, shortcut: initialShortcut, onSuccess }: CreateShortcutDialogProps) {
+function CreateShortcutDialog({ open, onOpenChange, shortcut: initialShortcut, onSuccess }: Props) {
   const t = useTranslate();
   const user = useCurrentUser();
   const [shortcut, setShortcut] = useState<Shortcut>({
diff --git a/web/src/components/CreateUserDialog.tsx b/web/src/components/CreateUserDialog.tsx
index f3536325e..e1d9c8329 100644
--- a/web/src/components/CreateUserDialog.tsx
+++ b/web/src/components/CreateUserDialog.tsx
@@ -10,14 +10,14 @@ import useLoading from "@/hooks/useLoading";
 import { User, User_Role } from "@/types/proto/api/v1/user_service";
 import { useTranslate } from "@/utils/i18n";
 
-interface CreateUserDialogProps {
+interface Props {
   open: boolean;
   onOpenChange: (open: boolean) => void;
   user?: User;
   onSuccess?: () => void;
 }
 
-export function CreateUserDialog({ open, onOpenChange, user: initialUser, onSuccess }: CreateUserDialogProps) {
+function CreateUserDialog({ open, onOpenChange, user: initialUser, onSuccess }: Props) {
   const t = useTranslate();
   const [user, setUser] = useState(User.fromPartial({ ...initialUser }));
   const requestState = useLoading(false);
diff --git a/web/src/components/CreateWebhookDialog.tsx b/web/src/components/CreateWebhookDialog.tsx
index 021ddc8a4..7117a72e7 100644
--- a/web/src/components/CreateWebhookDialog.tsx
+++ b/web/src/components/CreateWebhookDialog.tsx
@@ -9,7 +9,7 @@ import useCurrentUser from "@/hooks/useCurrentUser";
 import useLoading from "@/hooks/useLoading";
 import { useTranslate } from "@/utils/i18n";
 
-interface CreateWebhookDialogProps {
+interface Props {
   open: boolean;
   onOpenChange: (open: boolean) => void;
   webhookName?: string;
@@ -21,7 +21,7 @@ interface State {
   url: string;
 }
 
-export function CreateWebhookDialog({ open, onOpenChange, webhookName, onSuccess }: CreateWebhookDialogProps) {
+function CreateWebhookDialog({ open, onOpenChange, webhookName, onSuccess }: Props) {
   const t = useTranslate();
   const currentUser = useCurrentUser();
   const [state, setState] = useState<State>({
diff --git a/web/src/components/MemoAttachmentListView.tsx b/web/src/components/MemoAttachmentListView.tsx
index 868314bb8..a2837f44c 100644
--- a/web/src/components/MemoAttachmentListView.tsx
+++ b/web/src/components/MemoAttachmentListView.tsx
@@ -3,7 +3,7 @@ import { cn } from "@/lib/utils";
 import { Attachment } from "@/types/proto/api/v1/attachment_service";
 import { getAttachmentType, getAttachmentUrl } from "@/utils/attachment";
 import MemoAttachment from "./MemoAttachment";
-import { PreviewImageDialog } from "./PreviewImageDialog";
+import PreviewImageDialog from "./PreviewImageDialog";
 
 const MemoAttachmentListView = ({ attachments = [] }: { attachments: Attachment[] }) => {
   const [previewImage, setPreviewImage] = useState<{ open: boolean; urls: string[]; index: number }>({
diff --git a/web/src/components/MemoView.tsx b/web/src/components/MemoView.tsx
index 6c5f0c930..d2bfc4931 100644
--- a/web/src/components/MemoView.tsx
+++ b/web/src/components/MemoView.tsx
@@ -20,7 +20,7 @@ import MemoEditor from "./MemoEditor";
 import MemoLocationView from "./MemoLocationView";
 import MemoReactionistView from "./MemoReactionListView";
 import MemoRelationListView from "./MemoRelationListView";
-import { PreviewImageDialog } from "./PreviewImageDialog";
+import PreviewImageDialog from "./PreviewImageDialog";
 import ReactionSelector from "./ReactionSelector";
 import UserAvatar from "./UserAvatar";
 import VisibilityIcon from "./VisibilityIcon";
diff --git a/web/src/components/PreviewImageDialog.tsx b/web/src/components/PreviewImageDialog.tsx
index 01ac346a7..c3aa17417 100644
--- a/web/src/components/PreviewImageDialog.tsx
+++ b/web/src/components/PreviewImageDialog.tsx
@@ -3,14 +3,14 @@ import React, { useEffect, useState } from "react";
 import { Button } from "@/components/ui/button";
 import { Dialog, DialogContent } from "@/components/ui/dialog";
 
-interface PreviewImageDialogProps {
+interface Props {
   open: boolean;
   onOpenChange: (open: boolean) => void;
   imgUrls: string[];
   initialIndex?: number;
 }
 
-export function PreviewImageDialog({ open, onOpenChange, imgUrls, initialIndex = 0 }: PreviewImageDialogProps) {
+function PreviewImageDialog({ open, onOpenChange, imgUrls, initialIndex = 0 }: Props) {
   const [currentIndex, setCurrentIndex] = useState(initialIndex);
 
   // Update current index when initialIndex prop changes
@@ -91,3 +91,5 @@ export function PreviewImageDialog({ open, onOpenChange, imgUrls, initialIndex =
     </Dialog>
   );
 }
+
+export default PreviewImageDialog;
diff --git a/web/src/components/ReactionSelector.tsx b/web/src/components/ReactionSelector.tsx
index 3698d477b..cc3fbec73 100644
--- a/web/src/components/ReactionSelector.tsx
+++ b/web/src/components/ReactionSelector.tsx
@@ -59,23 +59,23 @@ const ReactionSelector = observer((props: Props) => {
       <PopoverTrigger asChild>
         <span
           className={cn(
-            "h-7 w-7 flex justify-center items-center rounded-full border hover:bg-accent hover:text-accent-foreground cursor-pointer transition-colors",
+            "h-7 w-7 flex justify-center items-center rounded-full border cursor-pointer transition-colors hover:opacity-80",
             className,
           )}
         >
           <SmilePlusIcon className="w-4 h-4 mx-auto text-muted-foreground" />
         </span>
       </PopoverTrigger>
-      <PopoverContent align="start" sideOffset={2}>
+      <PopoverContent align="center">
         <div ref={containerRef}>
-          <div className="flex flex-row flex-wrap py-0.5 px-2 h-auto gap-1 max-w-56">
+          <div className="grid grid-cols-4 sm:grid-cols-6 h-auto gap-1 max-w-56">
             {workspaceMemoRelatedSetting.reactions.map((reactionType) => {
               return (
                 <span
                   key={reactionType}
                   className={cn(
-                    "inline-flex w-auto text-base cursor-pointer rounded px-1 text-muted-foreground hover:bg-accent hover:text-accent-foreground transition-colors",
-                    hasReacted(reactionType) && "bg-primary text-primary-foreground",
+                    "inline-flex w-auto text-base cursor-pointer rounded px-1 text-muted-foreground hover:opacity-80 transition-colors",
+                    hasReacted(reactionType) && "bg-secondary text-secondary-foreground",
                   )}
                   onClick={() => handleReactionClick(reactionType)}
                 >
diff --git a/web/src/components/RenameTagDialog.tsx b/web/src/components/RenameTagDialog.tsx
index 7fe7e75e5..97f08734a 100644
--- a/web/src/components/RenameTagDialog.tsx
+++ b/web/src/components/RenameTagDialog.tsx
@@ -8,14 +8,14 @@ import { memoServiceClient } from "@/grpcweb";
 import useLoading from "@/hooks/useLoading";
 import { useTranslate } from "@/utils/i18n";
 
-interface RenameTagDialogProps {
+interface Props {
   open: boolean;
   onOpenChange: (open: boolean) => void;
   tag: string;
   onSuccess?: () => void;
 }
 
-export function RenameTagDialog({ open, onOpenChange, tag, onSuccess }: RenameTagDialogProps) {
+function RenameTagDialog({ open, onOpenChange, tag, onSuccess }: Props) {
   const t = useTranslate();
   const [newName, setNewName] = useState(tag);
   const requestState = useLoading(false);
diff --git a/web/src/components/UpdateAccountDialog.tsx b/web/src/components/UpdateAccountDialog.tsx
index 9db072d8c..d6be49696 100644
--- a/web/src/components/UpdateAccountDialog.tsx
+++ b/web/src/components/UpdateAccountDialog.tsx
@@ -14,7 +14,7 @@ import { User as UserPb } from "@/types/proto/api/v1/user_service";
 import { useTranslate } from "@/utils/i18n";
 import UserAvatar from "./UserAvatar";
 
-interface UpdateAccountDialogProps {
+interface Props {
   open: boolean;
   onOpenChange: (open: boolean) => void;
   onSuccess?: () => void;
@@ -28,7 +28,7 @@ interface State {
   description: string;
 }
 
-export function UpdateAccountDialog({ open, onOpenChange, onSuccess }: UpdateAccountDialogProps) {
+function UpdateAccountDialog({ open, onOpenChange, onSuccess }: Props) {
   const t = useTranslate();
   const currentUser = useCurrentUser();
   const [state, setState] = useState<State>({
diff --git a/web/src/components/UpdateCustomizedProfileDialog.new.tsx b/web/src/components/UpdateCustomizedProfileDialog.new.tsx
deleted file mode 100644
index e69de29bb..000000000
diff --git a/web/src/components/UpdateCustomizedProfileDialog.tsx b/web/src/components/UpdateCustomizedProfileDialog.tsx
index 261d97571..c0b0dceb9 100644
--- a/web/src/components/UpdateCustomizedProfileDialog.tsx
+++ b/web/src/components/UpdateCustomizedProfileDialog.tsx
@@ -13,13 +13,13 @@ import { useTranslate } from "@/utils/i18n";
 import AppearanceSelect from "./AppearanceSelect";
 import LocaleSelect from "./LocaleSelect";
 
-interface UpdateCustomizedProfileDialogProps {
+interface Props {
   open: boolean;
   onOpenChange: (open: boolean) => void;
   onSuccess?: () => void;
 }
 
-export function UpdateCustomizedProfileDialog({ open, onOpenChange, onSuccess }: UpdateCustomizedProfileDialogProps) {
+function UpdateCustomizedProfileDialog({ open, onOpenChange, onSuccess }: Props) {
   const t = useTranslate();
   const workspaceGeneralSetting = workspaceStore.state.generalSetting;
   const [customProfile, setCustomProfile] = useState<WorkspaceCustomProfile>(
diff --git a/web/src/components/examples/WorkspaceSection.example.tsx b/web/src/components/examples/WorkspaceSection.example.tsx
deleted file mode 100644
index e69de29bb..000000000