diff --git a/web/src/components/Inbox/MemoCommentMessage.tsx b/web/src/components/Inbox/MemoCommentMessage.tsx
index 4dfb92e53..7a1b1e1e0 100644
--- a/web/src/components/Inbox/MemoCommentMessage.tsx
+++ b/web/src/components/Inbox/MemoCommentMessage.tsx
@@ -76,7 +76,7 @@ const MemoCommentMessage = observer(({ inbox }: Props) => {
           "shrink-0 mt-2 p-2 rounded-full border",
           inbox.status === Inbox_Status.UNREAD
             ? "border-primary text-primary bg-primary/10"
-            : "border-muted-foreground text-muted-foreground bg-secondary",
+            : "border-muted-foreground text-muted-foreground bg-popover",
         )}
       >
         <TooltipProvider>
@@ -92,7 +92,7 @@ const MemoCommentMessage = observer(({ inbox }: Props) => {
       </div>
       <div
         className={cn(
-          "border w-full p-2 px-3 rounded-lg flex flex-col justify-start items-start gap-1 border-border hover:bg-secondary",
+          "border w-full p-2 px-3 rounded-lg flex flex-col justify-start items-start gap-1 border-border hover:bg-background",
           inbox.status !== Inbox_Status.UNREAD && "opacity-60",
         )}
       >
diff --git a/web/src/components/MemoAttachmentListView.tsx b/web/src/components/MemoAttachmentListView.tsx
index 67ac5b4a7..9bf75d798 100644
--- a/web/src/components/MemoAttachmentListView.tsx
+++ b/web/src/components/MemoAttachmentListView.tsx
@@ -34,10 +34,7 @@ const MemoAttachmentListView = ({ attachments = [] }: { attachments: Attachment[
     if (type === "image/*") {
       return (
         <img
-          className={cn(
-            "cursor-pointer h-full w-auto rounded-lg border border-border object-contain hover:opacity-80",
-            className,
-          )}
+          className={cn("cursor-pointer h-full w-auto rounded-lg border border-border object-contain hover:opacity-80", className)}
           src={attachment.externalLink ? attachmentUrl : attachmentUrl + "?thumbnail=true"}
           onClick={() => handleImageClick(attachmentUrl)}
           decoding="async"
@@ -47,10 +44,7 @@ const MemoAttachmentListView = ({ attachments = [] }: { attachments: Attachment[
     } else if (type === "video/*") {
       return (
         <video
-          className={cn(
-            "cursor-pointer h-full w-auto rounded-lg border border-border object-contain bg-secondary",
-            className,
-          )}
+          className={cn("cursor-pointer h-full w-auto rounded-lg border border-border object-contain bg-popover", className)}
           preload="metadata"
           crossOrigin="anonymous"
           src={attachmentUrl}
diff --git a/web/src/components/MemoContent/CodeBlock.tsx b/web/src/components/MemoContent/CodeBlock.tsx
index 68cc5fa7c..3f8bf48de 100644
--- a/web/src/components/MemoContent/CodeBlock.tsx
+++ b/web/src/components/MemoContent/CodeBlock.tsx
@@ -59,7 +59,7 @@ const CodeBlock: React.FC<Props> = ({ language, content }: Props) => {
   }, [content]);
 
   return (
-    <div className="w-full my-1 bg-background border-2 border-l-4 border-secondary rounded-md relative">
+    <div className="w-full my-1 bg-background border-2 border-l-4 border-popover rounded-md relative">
       <div className="w-full px-2 mt-1 flex flex-row justify-between items-center text-accent-foreground/60">
         <span className="text-sm font-mono">{formatedLanguage}</span>
         <CopyIcon className="w-4 h-auto cursor-pointer hover:opacity-80" onClick={handleCopyButtonClick} />
diff --git a/web/src/components/MemoContent/EmbeddedContent/EmbeddedMemo.tsx b/web/src/components/MemoContent/EmbeddedContent/EmbeddedMemo.tsx
index b71fb70c5..64fcdf9e6 100644
--- a/web/src/components/MemoContent/EmbeddedContent/EmbeddedMemo.tsx
+++ b/web/src/components/MemoContent/EmbeddedContent/EmbeddedMemo.tsx
@@ -67,7 +67,7 @@ const EmbeddedMemo = observer(({ resourceId: uid, params: paramsStr }: Props) =>
   };
 
   return (
-    <div className="relative flex flex-col justify-start items-start w-full px-3 py-2 bg-secondary rounded-lg border border-border hover:shadow">
+    <div className="relative flex flex-col justify-start items-start w-full px-3 py-2 bg-popover rounded-lg border border-border hover:shadow">
       <div className="w-full mb-1 flex flex-row justify-between items-center text-muted-foreground">
         <div className="text-sm leading-5 select-none">
           <relative-time datetime={memo.displayTime?.toISOString()} format="datetime"></relative-time>
diff --git a/web/src/components/MemoDetailSidebar/MemoDetailSidebarDrawer.tsx b/web/src/components/MemoDetailSidebar/MemoDetailSidebarDrawer.tsx
index 228cbdbed..a6de33ec2 100644
--- a/web/src/components/MemoDetailSidebar/MemoDetailSidebarDrawer.tsx
+++ b/web/src/components/MemoDetailSidebar/MemoDetailSidebarDrawer.tsx
@@ -26,7 +26,7 @@ const MemoDetailSidebarDrawer = ({ memo, parentPage }: Props) => {
           <GanttChartIcon className="w-5 h-auto text-muted-foreground" />
         </Button>
       </SheetTrigger>
-      <SheetContent side="right" className="w-full sm:w-80 px-4 bg-secondary">
+      <SheetContent side="right" className="w-full sm:w-80 px-4 bg-popover">
         <MemoDetailSidebar className="py-4" memo={memo} parentPage={parentPage} />
       </SheetContent>
     </Sheet>
diff --git a/web/src/components/MemoEditor/ActionButton/MarkdownMenu.tsx b/web/src/components/MemoEditor/ActionButton/MarkdownMenu.tsx
index 970e6ff0a..6645439a2 100644
--- a/web/src/components/MemoEditor/ActionButton/MarkdownMenu.tsx
+++ b/web/src/components/MemoEditor/ActionButton/MarkdownMenu.tsx
@@ -70,14 +70,14 @@ const MarkdownMenu = (props: Props) => {
         <div className="flex flex-col text-sm gap-0.5">
           <button
             onClick={handleCodeBlockClick}
-            className="flex items-center gap-2 px-2 py-1 text-left text-foreground hover:bg-secondary outline-none rounded"
+            className="flex items-center gap-2 px-2 py-1 text-left text-foreground hover:bg-background outline-none rounded"
           >
             <Code2Icon className="w-4 h-auto" />
             <span>{t("markdown.code-block")}</span>
           </button>
           <button
             onClick={handleCheckboxClick}
-            className="flex items-center gap-2 px-2 py-1 text-left text-foreground hover:bg-secondary outline-none rounded"
+            className="flex items-center gap-2 px-2 py-1 text-left text-foreground hover:bg-background outline-none rounded"
           >
             <CheckSquareIcon className="w-4 h-auto" />
             <span>{t("markdown.checkbox")}</span>
diff --git a/web/src/components/MemoEditor/AttachmentListView.tsx b/web/src/components/MemoEditor/AttachmentListView.tsx
index 297dbf848..94450d19d 100644
--- a/web/src/components/MemoEditor/AttachmentListView.tsx
+++ b/web/src/components/MemoEditor/AttachmentListView.tsx
@@ -38,7 +38,7 @@ const AttachmentListView = (props: Props) => {
               return (
                 <div
                   key={attachment.name}
-                  className="max-w-full w-auto flex flex-row justify-start items-center flex-nowrap gap-x-1 bg-secondary px-2 py-1 rounded hover:shadow-sm text-muted-foreground"
+                  className="max-w-full w-auto flex flex-row justify-start items-center flex-nowrap gap-x-1 bg-popover px-2 py-1 rounded hover:shadow-sm text-muted-foreground"
                 >
                   <SortableItem id={attachment.name} className="flex flex-row justify-start items-center gap-x-1">
                     <AttachmentIcon attachment={attachment} className="w-4! h-4! opacity-100!" />
diff --git a/web/src/components/MemoEditor/RelationListView.tsx b/web/src/components/MemoEditor/RelationListView.tsx
index 9172fe871..8b977e4c4 100644
--- a/web/src/components/MemoEditor/RelationListView.tsx
+++ b/web/src/components/MemoEditor/RelationListView.tsx
@@ -37,7 +37,7 @@ const RelationListView = observer((props: Props) => {
             return (
               <div
                 key={memo.name}
-                className="w-auto max-w-xs overflow-hidden flex flex-row justify-start items-center bg-secondary hover:opacity-80 rounded-md text-sm p-1 px-2 text-muted-foreground cursor-pointer hover:line-through"
+                className="w-auto max-w-xs overflow-hidden flex flex-row justify-start items-center bg-popover hover:opacity-80 rounded-md text-sm p-1 px-2 text-muted-foreground cursor-pointer hover:line-through"
                 onClick={() => handleDeleteRelation(memo)}
               >
                 <LinkIcon className="w-4 h-auto shrink-0 opacity-80" />
diff --git a/web/src/components/MemoRelationListView.tsx b/web/src/components/MemoRelationListView.tsx
index f81bfc91f..c1c123533 100644
--- a/web/src/components/MemoRelationListView.tsx
+++ b/web/src/components/MemoRelationListView.tsx
@@ -30,7 +30,7 @@ const MemoRelationListView = (props: Props) => {
   }
 
   return (
-    <div className="relative flex flex-col justify-start items-start w-full px-2 pt-2 pb-1.5 bg-secondary rounded-lg border border-border">
+    <div className="relative flex flex-col justify-start items-start w-full px-2 pt-2 pb-1.5 bg-popover rounded-lg border border-border">
       <div className="w-full flex flex-row justify-start items-center mb-1 gap-3 opacity-60">
         {referencingMemoList.length > 0 && (
           <button
diff --git a/web/src/components/Navigation.tsx b/web/src/components/Navigation.tsx
index c865b339f..2bad0d5d6 100644
--- a/web/src/components/Navigation.tsx
+++ b/web/src/components/Navigation.tsx
@@ -78,9 +78,9 @@ const Navigation = observer((props: Props) => {
           <NavLink
             className={({ isActive }) =>
               cn(
-                "px-2 py-2 rounded-2xl border flex flex-row items-center text-lg text-foreground hover:border-border",
+                "px-2 py-2 rounded-2xl border flex flex-row items-center text-lg text-sidebar-foreground hover:border-border",
                 collapsed ? "" : "w-full px-4",
-                isActive ? "bg-background border-border" : "border-transparent",
+                isActive ? "bg-sidebar-primary text-sidebar-primary-foreground border-border" : "border-transparent",
               )
             }
             key={navLink.id}
diff --git a/web/src/components/ReactionView.tsx b/web/src/components/ReactionView.tsx
index d072db29f..720f450d9 100644
--- a/web/src/components/ReactionView.tsx
+++ b/web/src/components/ReactionView.tsx
@@ -73,7 +73,7 @@ const ReactionView = observer((props: Props) => {
               "h-7 border px-2 py-0.5 rounded-full flex flex-row justify-center items-center gap-1",
               "text-sm text-muted-foreground",
               currentUser && !readonly && "cursor-pointer",
-              hasReaction && "bg-secondary border-border",
+              hasReaction && "bg-popover border-border",
             )}
             onClick={handleReactionClick}
           >
diff --git a/web/src/components/SearchBar.tsx b/web/src/components/SearchBar.tsx
index 0e20c032a..a00598007 100644
--- a/web/src/components/SearchBar.tsx
+++ b/web/src/components/SearchBar.tsx
@@ -35,7 +35,7 @@ const SearchBar = observer(() => {
     <div className="relative w-full h-auto flex flex-row justify-start items-center">
       <SearchIcon className="absolute left-2 w-4 h-auto opacity-40 text-muted-foreground" />
       <input
-        className={cn("w-full text-muted-foreground leading-6 bg-secondary border border-border text-sm rounded-xl p-1 pl-8 outline-0")}
+        className={cn("w-full text-muted-foreground leading-6 bg-popover border border-border text-sm rounded-xl p-1 pl-8 outline-0")}
         placeholder={t("memo.search-placeholder")}
         value={queryText}
         onChange={onTextChange}
diff --git a/web/src/components/Settings/SSOSection.tsx b/web/src/components/Settings/SSOSection.tsx
index 0a7184737..ed9505357 100644
--- a/web/src/components/Settings/SSOSection.tsx
+++ b/web/src/components/Settings/SSOSection.tsx
@@ -63,7 +63,7 @@ const SSOSection = () => {
           <div className="flex flex-row items-center">
             <Popover>
               <PopoverTrigger asChild>
-                <button className="flex items-center justify-center p-1 hover:bg-secondary rounded">
+                <button className="flex items-center justify-center p-1 hover:bg-popover rounded">
                   <MoreVerticalIcon className="w-4 h-auto" />
                 </button>
               </PopoverTrigger>
@@ -71,13 +71,13 @@ const SSOSection = () => {
                 <div className="flex flex-col gap-0.5 text-sm">
                   <button
                     onClick={() => showCreateIdentityProviderDialog(identityProvider, fetchIdentityProviderList)}
-                    className="flex items-center gap-2 px-2 py-1 text-left text-foreground hover:bg-secondary outline-none rounded"
+                    className="flex items-center gap-2 px-2 py-1 text-left text-foreground hover:bg-popover outline-none rounded"
                   >
                     {t("common.edit")}
                   </button>
                   <button
                     onClick={() => handleDeleteIdentityProvider(identityProvider)}
-                    className="flex items-center gap-2 px-2 py-1 text-left text-destructive hover:bg-secondary outline-none rounded"
+                    className="flex items-center gap-2 px-2 py-1 text-left text-destructive hover:bg-popover outline-none rounded"
                   >
                     {t("common.delete")}
                   </button>
diff --git a/web/src/components/Settings/SectionMenuItem.tsx b/web/src/components/Settings/SectionMenuItem.tsx
index b2ab575f6..c40f304d5 100644
--- a/web/src/components/Settings/SectionMenuItem.tsx
+++ b/web/src/components/Settings/SectionMenuItem.tsx
@@ -13,7 +13,7 @@ const SectionMenuItem: React.FC<SettingMenuItemProps> = ({ text, icon: IconCompo
     <div
       onClick={onClick}
       className={`w-auto max-w-full px-3 leading-8 flex flex-row justify-start items-center cursor-pointer rounded-lg select-none hover:opacity-80 ${
-        isSelected ? "bg-secondary shadow" : ""
+        isSelected ? "bg-accent shadow" : ""
       }`}
     >
       <IconComponent className="w-4 h-auto mr-2 opacity-80 shrink-0" />
diff --git a/web/src/layouts/RootLayout.tsx b/web/src/layouts/RootLayout.tsx
index a091d0b49..1c4dde4b8 100644
--- a/web/src/layouts/RootLayout.tsx
+++ b/web/src/layouts/RootLayout.tsx
@@ -48,9 +48,7 @@ const RootLayout = observer(() => {
   ) : (
     <div className="w-full min-h-full flex flex-row justify-center items-start sm:pl-16">
       {sm && (
-        <div
-          className={cn("group flex flex-col justify-start items-start fixed top-0 left-0 select-none h-full bg-secondary", "w-16 px-2")}
-        >
+        <div className={cn("group flex flex-col justify-start items-start fixed top-0 left-0 select-none h-full bg-sidebar", "w-16 px-2")}>
           <Navigation collapsed={true} />
         </div>
       )}