diff --git a/web/src/components/CreateMemoRelationDialog.tsx b/web/src/components/CreateMemoRelationDialog.tsx
index a491dfed..8fa169c5 100644
--- a/web/src/components/CreateMemoRelationDialog.tsx
+++ b/web/src/components/CreateMemoRelationDialog.tsx
@@ -96,7 +96,7 @@ const CreateMemoRelationDialog: React.FC<Props> = (props: Props) => {
             <div className="w-full flex flex-row justify-start items-start flex-wrap gap-2 mt-1">
               {memoList.map((memo) => (
                 <div
-                  className="max-w-[50%] text-sm px-3 py-1 flex flex-row justify-start items-center border rounded-md cursor-pointer truncate opacity-80 dark:text-gray-300 hover:opacity-60 hover:line-through"
+                  className="max-w-[50%] text-sm px-3 py-1 flex flex-row justify-start items-center border rounded-md cursor-pointer truncate opacity-80 dark:text-gray-300 dark:border-zinc-700 hover:opacity-60 hover:line-through"
                   key={memo.id}
                   onClick={() => handleDeleteMemoRelation(memo)}
                 >
diff --git a/web/src/components/MemoContent/Code.tsx b/web/src/components/MemoContent/Code.tsx
index 59a115f1..502ccd9e 100644
--- a/web/src/components/MemoContent/Code.tsx
+++ b/web/src/components/MemoContent/Code.tsx
@@ -3,7 +3,7 @@ interface Props {
 }
 
 const Code: React.FC<Props> = ({ content }: Props) => {
-  return <code>{content}</code>;
+  return <code className="text-sm">`{content}`</code>;
 };
 
 export default Code;
diff --git a/web/src/components/MemoContent/CodeBlock.tsx b/web/src/components/MemoContent/CodeBlock.tsx
index 4f25bda1..cb734764 100644
--- a/web/src/components/MemoContent/CodeBlock.tsx
+++ b/web/src/components/MemoContent/CodeBlock.tsx
@@ -29,7 +29,7 @@ const CodeBlock: React.FC<Props> = ({ language, content }: Props) => {
   };
 
   return (
-    <pre className="w-full my-1 p-3 rounded bg-gray-100 dark:bg-zinc-600 whitespace-pre-wrap relative">
+    <pre className="w-full my-1 p-3 rounded bg-gray-100 dark:bg-zinc-700 whitespace-pre-wrap relative">
       <IconButton
         size="sm"
         className="!absolute top-0.5 right-0.5 opacity-50"
diff --git a/web/src/components/MemoEditor/ActionButton/TagSelector.tsx b/web/src/components/MemoEditor/ActionButton/TagSelector.tsx
index f9cbbd97..94c9d103 100644
--- a/web/src/components/MemoEditor/ActionButton/TagSelector.tsx
+++ b/web/src/components/MemoEditor/ActionButton/TagSelector.tsx
@@ -24,14 +24,17 @@ const TagSelector = (props: Props) => {
   }, []);
 
   return (
-    <IconButton className="relative group flex flex-row justify-center items-center p-1 w-auto h-auto mr-1 select-none rounded cursor-pointer text-gray-600 dark:text-gray-400 hover:bg-gray-300 dark:hover:bg-zinc-800 hover:shadow">
+    <IconButton
+      className="relative group flex flex-row justify-center items-center p-1 w-auto h-auto mr-1 select-none rounded cursor-pointer text-gray-600 dark:!text-gray-400 hover:bg-gray-300 hover:shadow"
+      size="sm"
+    >
       <Icon.Hash className="w-5 h-5 mx-auto" />
-      <div className="hidden flex-row justify-start items-start flex-wrap absolute top-8 left-0 mt-1 p-1 z-1 rounded w-52 h-auto max-h-48 overflow-y-auto font-mono shadow bg-zinc-200 dark:bg-zinc-600 group-hover:flex">
+      <div className="hidden flex-row justify-start items-start flex-wrap absolute top-8 left-0 mt-1 p-1 z-1 rounded w-52 h-auto max-h-48 overflow-y-auto font-mono shadow bg-zinc-100 dark:bg-zinc-700 group-hover:flex">
         {tags.length > 0 ? (
           tags.map((tag) => {
             return (
               <div
-                className="w-auto max-w-full text-black dark:text-gray-300 cursor-pointer rounded text-sm leading-6 px-2 hover:bg-zinc-300 dark:hover:bg-zinc-700 shrink-0"
+                className="w-auto max-w-full text-black dark:text-gray-300 cursor-pointer rounded text-sm leading-6 px-2 hover:bg-zinc-200 dark:hover:bg-zinc-800 shrink-0"
                 onClick={() => onTagSelectorClick(tag)}
                 key={tag}
               >
diff --git a/web/src/components/MemoEditor/Editor/TagSuggestions.tsx b/web/src/components/MemoEditor/Editor/TagSuggestions.tsx
index 7ba64b14..9d9d3b75 100644
--- a/web/src/components/MemoEditor/Editor/TagSuggestions.tsx
+++ b/web/src/components/MemoEditor/Editor/TagSuggestions.tsx
@@ -114,7 +114,7 @@ const TagSuggestions = ({ editorRef, editorActions }: Props) => {
   if (!isVisibleRef.current || !position) return null;
   return (
     <div
-      className="z-20 p-1 mt-1 -ml-2 absolute max-w-[12rem] gap-px rounded font-mono flex flex-col justify-start items-start overflow-auto shadow bg-zinc-200 dark:bg-zinc-600"
+      className="z-20 p-1 mt-1 -ml-2 absolute max-w-[12rem] gap-px rounded font-mono flex flex-col justify-start items-start overflow-auto shadow bg-zinc-100 dark:bg-zinc-700"
       style={{ left: position.left, top: position.top + position.height }}
     >
       {suggestionsRef.current.map((tag, i) => (
@@ -122,7 +122,7 @@ const TagSuggestions = ({ editorRef, editorActions }: Props) => {
           key={tag}
           onMouseDown={() => autocomplete(tag)}
           className={classNames(
-            "rounded p-1 px-2 w-full truncate text-sm dark:text-gray-300 cursor-pointer hover:bg-zinc-300 dark:hover:bg-zinc-700",
+            "rounded p-1 px-2 w-full truncate text-sm dark:text-gray-300 cursor-pointer hover:bg-zinc-200 dark:hover:bg-zinc-800",
             i === selected ? "bg-zinc-300 dark:bg-zinc-700" : ""
           )}
         >
diff --git a/web/src/components/MemoEditor/Editor/index.tsx b/web/src/components/MemoEditor/Editor/index.tsx
index 41fa11eb..1cbec902 100644
--- a/web/src/components/MemoEditor/Editor/index.tsx
+++ b/web/src/components/MemoEditor/Editor/index.tsx
@@ -145,7 +145,7 @@ const Editor = forwardRef(function Editor(props: Props, ref: React.ForwardedRef<
   }, []);
 
   return (
-    <div className={classNames("flex flex-col justify-start items-start relative w-full h-auto bg-inherit dark:text-gray-200", className)}>
+    <div className={classNames("flex flex-col justify-start items-start relative w-full h-auto bg-inherit dark:text-gray-300", className)}>
       <textarea
         className="w-full h-full max-h-[300px] my-1 text-base resize-none overflow-x-hidden overflow-y-auto bg-transparent outline-none whitespace-pre-wrap word-break"
         rows={1}
diff --git a/web/src/components/MemoEditor/MemoEditorDialog.tsx b/web/src/components/MemoEditor/MemoEditorDialog.tsx
index 74b6c479..ae517f8d 100644
--- a/web/src/components/MemoEditor/MemoEditorDialog.tsx
+++ b/web/src/components/MemoEditor/MemoEditorDialog.tsx
@@ -52,7 +52,7 @@ export default function showMemoEditorDialog(props: Pick<Props, "memoId" | "rela
     {
       className: "memo-editor-dialog",
       dialogName: "memo-editor-dialog",
-      containerClassName: "dark:!bg-zinc-700",
+      containerClassName: "dark:!bg-zinc-800",
     },
     MemoEditorDialog,
     props
diff --git a/web/src/components/MemoEditor/RelationListView.tsx b/web/src/components/MemoEditor/RelationListView.tsx
index be697fb2..92668e7b 100644
--- a/web/src/components/MemoEditor/RelationListView.tsx
+++ b/web/src/components/MemoEditor/RelationListView.tsx
@@ -38,13 +38,13 @@ const RelationListView = (props: Props) => {
             return (
               <div
                 key={memo.id}
-                className="w-auto max-w-xs overflow-hidden flex flex-row justify-start items-center bg-gray-100 dark:bg-zinc-800 hover:opacity-80 rounded-md text-sm p-1 px-2 text-gray-500 cursor-pointer hover:line-through"
+                className="w-auto max-w-xs overflow-hidden flex flex-row justify-start items-center bg-zinc-100 dark:bg-zinc-900 hover:opacity-80 rounded-md text-sm p-1 px-2 text-gray-500 dark:text-gray-400 cursor-pointer hover:line-through"
                 onClick={() => handleDeleteRelation(memo)}
               >
                 <Icon.Link className="w-4 h-auto shrink-0 opacity-80" />
                 <span className="px-1 shrink-0 opacity-80">#{memo.id}</span>
                 <span className="max-w-full text-ellipsis whitespace-nowrap overflow-hidden">{memo.content}</span>
-                <Icon.X className="w-4 h-auto hover:opacity-80 shrink-0 ml-1" />
+                <Icon.X className="w-4 h-auto cursor-pointer opacity-60 hover:opacity-100" />
               </div>
             );
           })}
diff --git a/web/src/components/MemoEditor/ResourceListView.tsx b/web/src/components/MemoEditor/ResourceListView.tsx
index be9af089..092f4b2b 100644
--- a/web/src/components/MemoEditor/ResourceListView.tsx
+++ b/web/src/components/MemoEditor/ResourceListView.tsx
@@ -22,7 +22,7 @@ const ResourceListView = (props: Props) => {
             return (
               <div
                 key={resource.id}
-                className="max-w-full flex flex-row justify-start items-center flex-nowrap gap-x-1 bg-gray-100 dark:bg-zinc-800 px-2 py-1 rounded text-gray-500"
+                className="max-w-full flex flex-row justify-start items-center flex-nowrap gap-x-1 bg-zinc-100 dark:bg-zinc-900 px-2 py-1 rounded text-gray-500 dark:text-gray-400"
               >
                 <ResourceIcon resource={resource} className="!w-4 !h-4 !opacity-100" />
                 <span className="text-sm max-w-[8rem] truncate">{resource.filename}</span>
diff --git a/web/src/components/MemoEditor/index.tsx b/web/src/components/MemoEditor/index.tsx
index 65457cb1..b024ff8c 100644
--- a/web/src/components/MemoEditor/index.tsx
+++ b/web/src/components/MemoEditor/index.tsx
@@ -357,7 +357,7 @@ const MemoEditor = (props: Props) => {
     <div
       className={`${
         className ?? ""
-      } relative w-full flex flex-col justify-start items-start bg-white dark:bg-zinc-700 px-4 pt-4 rounded-lg border border-gray-200 dark:border-zinc-600`}
+      } relative w-full flex flex-col justify-start items-start bg-white dark:bg-zinc-800 px-4 pt-4 rounded-lg border border-gray-200 dark:border-zinc-700`}
       tabIndex={0}
       onKeyDown={handleKeyDown}
       onDrop={handleDropEvent}
@@ -368,13 +368,15 @@ const MemoEditor = (props: Props) => {
         <div className="flex flex-row justify-start items-center">
           <TagSelector onTagSelectorClick={(tag) => handleTagSelectorClick(tag)} />
           <IconButton
-            className="flex flex-row justify-center items-center p-1 w-auto h-auto mr-1 select-none rounded cursor-pointer text-gray-600 dark:text-gray-400 hover:bg-gray-300 dark:hover:bg-zinc-800 hover:shadow"
+            className="flex flex-row justify-center items-center p-1 w-auto h-auto mr-1 select-none rounded cursor-pointer text-gray-600 dark:!text-gray-400 hover:bg-gray-300 dark:hover:bg-zinc-800 hover:shadow"
+            size="sm"
             onClick={handleUploadFileBtnClick}
           >
             <Icon.Image className="w-5 h-5 mx-auto" />
           </IconButton>
           <IconButton
-            className="flex flex-row justify-center items-center p-1 w-auto h-auto mr-1 select-none rounded cursor-pointer text-gray-600 dark:text-gray-400 hover:bg-gray-300 dark:hover:bg-zinc-800 hover:shadow"
+            className="flex flex-row justify-center items-center p-1 w-auto h-auto mr-1 select-none rounded cursor-pointer text-gray-600 dark:!text-gray-400 hover:bg-gray-300 dark:hover:bg-zinc-800 hover:shadow"
+            size="sm"
             onClick={handleAddMemoRelationBtnClick}
           >
             <Icon.Link className="w-5 h-5 mx-auto" />
diff --git a/web/src/components/MemoFilter.tsx b/web/src/components/MemoFilter.tsx
index cc22e536..63869db4 100644
--- a/web/src/components/MemoFilter.tsx
+++ b/web/src/components/MemoFilter.tsx
@@ -18,14 +18,14 @@ const MemoFilter = () => {
 
   return (
     <div
-      className={`flex flex-row justify-start items-start w-full flex-wrap px-2 pb-2 text-sm font-mono leading-7 dark:text-gray-300 ${
+      className={`flex flex-row justify-start items-start w-full flex-wrap px-2 pb-2 text-sm font-mono leading-7 dark:text-gray-400 ${
         showFilter ? "" : "!hidden"
       }`}
     >
       <span className="mx-2 text-gray-400">{t("common.filter")}:</span>
       <div
         className={
-          "max-w-xs flex flex-row justify-start items-center px-2 mr-2 cursor-pointer dark:text-gray-300 bg-gray-200 dark:bg-zinc-700 rounded whitespace-nowrap truncate hover:line-through " +
+          "max-w-xs flex flex-row justify-start items-center px-2 mr-2 cursor-pointer dark:text-gray-400 bg-gray-200 dark:bg-zinc-800 rounded whitespace-nowrap truncate hover:line-through " +
           (tagQuery ? "" : "!hidden")
         }
         onClick={() => {
@@ -37,7 +37,7 @@ const MemoFilter = () => {
       </div>
       <div
         className={
-          "max-w-xs flex flex-row justify-start items-center px-2 mr-2 cursor-pointer dark:text-gray-300 bg-gray-200 dark:bg-zinc-700 rounded whitespace-nowrap truncate hover:line-through " +
+          "max-w-xs flex flex-row justify-start items-center px-2 mr-2 cursor-pointer dark:text-gray-400 bg-gray-200 dark:bg-zinc-800 rounded whitespace-nowrap truncate hover:line-through " +
           (visibility ? "" : "!hidden")
         }
         onClick={() => {
@@ -49,7 +49,7 @@ const MemoFilter = () => {
       </div>
       <div
         className={
-          "max-w-xs flex flex-row justify-start items-center px-2 mr-2 cursor-pointer dark:text-gray-300 bg-gray-200 dark:bg-zinc-700 rounded whitespace-nowrap truncate hover:line-through " +
+          "max-w-xs flex flex-row justify-start items-center px-2 mr-2 cursor-pointer dark:text-gray-400 bg-gray-200 dark:bg-zinc-800 rounded whitespace-nowrap truncate hover:line-through " +
           (textQuery ? "" : "!hidden")
         }
         onClick={() => {
diff --git a/web/src/components/MemoRelationListView.tsx b/web/src/components/MemoRelationListView.tsx
index a9f7c965..24231068 100644
--- a/web/src/components/MemoRelationListView.tsx
+++ b/web/src/components/MemoRelationListView.tsx
@@ -42,7 +42,7 @@ const MemoRelationListView = (props: Props) => {
             return (
               <div key={memo.id} className="block w-auto max-w-[50%]">
                 <Link
-                  className="px-2 border rounded-md w-auto text-sm leading-6 flex flex-row justify-start items-center flex-nowrap text-gray-600 dark:text-gray-300 dark:border-gray-600 hover:shadow hover:opacity-80"
+                  className="px-2 border rounded-md w-auto text-sm leading-6 flex flex-row justify-start items-center flex-nowrap text-gray-600 dark:text-gray-400 dark:border-zinc-700 dark:bg-zinc-900 hover:shadow hover:opacity-80"
                   to={`/m/${memo.id}`}
                   unstable_viewTransition
                 >
diff --git a/web/src/components/MobileHeader.tsx b/web/src/components/MobileHeader.tsx
index 567df707..a4701fa5 100644
--- a/web/src/components/MobileHeader.tsx
+++ b/web/src/components/MobileHeader.tsx
@@ -17,7 +17,7 @@ const MobileHeader = (props: Props) => {
   return (
     <div
       className={classNames(
-        "sticky top-0 pt-3 pb-2 sm:pt-2 px-4 sm:px-6 sm:mb-1 bg-zinc-100 dark:bg-zinc-800 bg-opacity-80 backdrop-blur-lg flex md:hidden flex-row justify-between items-center w-full h-auto flex-nowrap shrink-0 z-1",
+        "sticky top-0 pt-3 pb-2 sm:pt-2 px-4 sm:px-6 sm:mb-1 bg-zinc-100 dark:bg-zinc-900 bg-opacity-80 backdrop-blur-lg flex md:hidden flex-row justify-between items-center w-full h-auto flex-nowrap shrink-0 z-1",
         offsetTop > 0 && "shadow-md"
       )}
     >
diff --git a/web/src/components/PersonalStatistics.tsx b/web/src/components/PersonalStatistics.tsx
index a8f38906..17c2ab55 100644
--- a/web/src/components/PersonalStatistics.tsx
+++ b/web/src/components/PersonalStatistics.tsx
@@ -35,32 +35,28 @@ const PersonalStatistics = (props: Props) => {
   }, [memos.length, user.name]);
 
   return (
-    <div className="w-full border mt-2 py-2 px-3 rounded-md space-y-0.5 bg-zinc-50 dark:bg-zinc-900 dark:border-zinc-800">
-      <p className="text-sm font-medium text-gray-500">Statistics</p>
+    <div className="w-full border mt-2 py-2 px-3 rounded-md space-y-0.5 text-gray-500 dark:text-gray-400 bg-zinc-50 dark:bg-zinc-900 dark:border-zinc-800">
+      <p className="text-sm font-medium">Statistics</p>
       <div className="w-full flex justify-between items-center">
-        <div className="w-full flex justify-start items-center text-gray-500">
+        <div className="w-full flex justify-start items-center">
           <Icon.CalendarDays className="w-4 h-auto mr-1" />
           <span className="block text-base sm:text-sm">Days</span>
         </div>
-        <span className="text-gray-500 font-mono">{days}</span>
+        <span className="font-mono">{days}</span>
       </div>
       <div className="w-full flex justify-between items-center">
-        <div className="w-full flex justify-start items-center text-gray-500">
+        <div className="w-full flex justify-start items-center">
           <Icon.PencilLine className="w-4 h-auto mr-1" />
           <span className="block text-base sm:text-sm">Memos</span>
         </div>
-        {isRequesting ? (
-          <Icon.Loader className="animate-spin w-4 h-auto text-gray-400" />
-        ) : (
-          <span className="text-gray-500 font-mono">{memoAmount}</span>
-        )}
+        {isRequesting ? <Icon.Loader className="animate-spin w-4 h-auto text-gray-400" /> : <span className="font-mono">{memoAmount}</span>}
       </div>
       <div className="w-full flex justify-between items-center">
-        <div className="w-full flex justify-start items-center text-gray-500">
+        <div className="w-full flex justify-start items-center">
           <Icon.Hash className="w-4 h-auto mr-1" />
           <span className="block text-base sm:text-sm">Tags</span>
         </div>
-        <span className="text-gray-500 font-mono">{tags}</span>
+        <span className="font-mono">{tags}</span>
       </div>
     </div>
   );
diff --git a/web/src/components/ResourceIcon.tsx b/web/src/components/ResourceIcon.tsx
index 12184051..9e56f7d9 100644
--- a/web/src/components/ResourceIcon.tsx
+++ b/web/src/components/ResourceIcon.tsx
@@ -27,7 +27,7 @@ const ResourceIcon = (props: Props) => {
     return (
       <SquareDiv className={classNames(className, "flex items-center justify-center overflow-clip")}>
         <img
-          className="min-w-full min-h-full object-cover shadow"
+          className="min-w-full min-h-full object-cover border rounded dark:border-none"
           src={resource.externalLink ? resourceUrl : resourceUrl + "?thumbnail=1"}
           onClick={() => showPreviewImageDialog(resourceUrl)}
         />
diff --git a/web/src/components/SearchBar.tsx b/web/src/components/SearchBar.tsx
index f3c3be5b..e6d0acc9 100644
--- a/web/src/components/SearchBar.tsx
+++ b/web/src/components/SearchBar.tsx
@@ -30,7 +30,7 @@ const SearchBar = () => {
   return (
     <div className="w-full h-9 flex flex-row justify-start items-center">
       <Input
-        className="w-full !shadow-none !border-gray-200 dark:!border-zinc-800"
+        className="w-full !text-sm !shadow-none !border-gray-200 dark:!border-zinc-800"
         size="md"
         startDecorator={<Icon.Search className="w-4 h-auto opacity-30" />}
         placeholder={t("memo.search-placeholder")}
diff --git a/web/src/components/ShareMemoDialog.tsx b/web/src/components/ShareMemoDialog.tsx
index 7ac4eb00..4514cf8f 100644
--- a/web/src/components/ShareMemoDialog.tsx
+++ b/web/src/components/ShareMemoDialog.tsx
@@ -103,7 +103,7 @@ const ShareMemoDialog: React.FC<Props> = (props: Props) => {
               <MemoContent nodes={memo.nodes} />
               <MemoResourceListView resourceList={memo.resources} />
             </div>
-            <div className="flex flex-row justify-between items-center w-full bg-gray-100 dark:bg-zinc-700 py-4 px-6">
+            <div className="flex flex-row justify-between items-center w-full bg-gray-100 dark:bg-zinc-900 py-4 px-6">
               <div className="flex flex-row justify-start items-center">
                 <UserAvatar className="mr-2" avatarUrl={user.avatarUrl} />
                 <div className="w-auto grow truncate flex mr-2 flex-col justify-center items-start">
diff --git a/web/src/components/TagList.tsx b/web/src/components/TagList.tsx
index ad7cb23e..6ad64139 100644
--- a/web/src/components/TagList.tsx
+++ b/web/src/components/TagList.tsx
@@ -75,7 +75,7 @@ const TagList = () => {
         <span className="text-sm leading-6 font-mono text-gray-400">{t("common.tags")}</span>
         <button
           onClick={() => showCreateTagDialog()}
-          className="flex flex-col justify-center items-center w-5 h-5 bg-gray-200 dark:bg-zinc-700 rounded ml-2 hover:shadow"
+          className="flex flex-col justify-center items-center w-5 h-5 bg-gray-200 dark:bg-zinc-800 rounded ml-2 hover:shadow"
         >
           <Icon.Plus className="w-4 h-4 text-gray-400" />
         </button>
@@ -141,7 +141,7 @@ const TagItemContainer: React.FC<TagItemContainerProps> = (props: TagItemContain
       </div>
       {hasSubTags ? (
         <div
-          className={`w-[calc(100%-0.5rem)] flex flex-col justify-start items-start h-auto ml-2 pl-2 border-l-2 border-l-gray-200 dark:border-l-gray-400 ${
+          className={`w-[calc(100%-0.5rem)] flex flex-col justify-start items-start h-auto ml-2 pl-2 border-l-2 border-l-gray-200 dark:border-l-zinc-800 ${
             !showSubTags && "!hidden"
           }`}
         >
diff --git a/web/src/css/global.css b/web/src/css/global.css
index 9910a823..6602bbab 100644
--- a/web/src/css/global.css
+++ b/web/src/css/global.css
@@ -1,5 +1,5 @@
 body {
-  @apply text-base w-full min-h-[100svh] p-0 m-0 bg-zinc-100 dark:bg-zinc-800;
+  @apply text-base w-full min-h-[100svh] p-0 m-0 bg-zinc-100 dark:bg-zinc-900;
 }
 
 #root {
diff --git a/web/src/layouts/Root.tsx b/web/src/layouts/Root.tsx
index 1e59cdf5..cebf9fb1 100644
--- a/web/src/layouts/Root.tsx
+++ b/web/src/layouts/Root.tsx
@@ -11,7 +11,7 @@ function Root() {
     <div className="w-full min-h-full">
       <div className="w-full sm:pl-56 md:pl-64 mx-auto flex flex-row justify-center items-start">
         {sm && (
-          <div className="hidden sm:block fixed top-0 left-0 w-56 md:w-64 px-4 border-r dark:border-zinc-800 h-full bg-zinc-50 dark:bg-zinc-700 dark:bg-opacity-40 transition-all hover:shadow-xl z-2">
+          <div className="hidden sm:block fixed top-0 left-0 w-56 md:w-64 px-4 border-r dark:border-zinc-800 h-full bg-zinc-50 dark:bg-zinc-800 dark:bg-opacity-60 transition-all hover:shadow-xl z-2">
             <Navigation />
           </div>
         )}
diff --git a/web/src/less/base-dialog.less b/web/src/less/base-dialog.less
index 724591f0..a005d09b 100644
--- a/web/src/less/base-dialog.less
+++ b/web/src/less/base-dialog.less
@@ -10,14 +10,14 @@
   }
 
   > .dialog-container {
-    @apply max-w-full shadow flex flex-col justify-start items-start bg-white dark:bg-zinc-800 dark:text-gray-200 p-4 rounded-lg;
+    @apply max-w-full shadow flex flex-col justify-start items-start bg-white dark:bg-zinc-800 dark:text-gray-300 p-4 rounded-lg;
 
     > .dialog-header-container {
       @apply flex flex-row justify-between items-center w-full mb-4;
 
       > .title-text {
         > .icon-text {
-          @apply mr-2 text-base;
+          @apply mr-2 text-base dark:text-gray-300;
         }
       }
 
diff --git a/web/src/less/memo.less b/web/src/less/memo.less
index 0cdf85e9..e15ab9eb 100644
--- a/web/src/less/memo.less
+++ b/web/src/less/memo.less
@@ -1,8 +1,8 @@
 .memo-wrapper {
-  @apply relative flex flex-col justify-start items-start w-full p-4 pt-3 mb-2 bg-white dark:bg-zinc-700 rounded-lg border border-white dark:border-zinc-600 hover:border-gray-200 dark:hover:border-zinc-600;
+  @apply relative flex flex-col justify-start items-start w-full p-4 pt-3 mb-2 bg-white dark:bg-zinc-800 rounded-lg border border-white dark:border-zinc-800 hover:border-gray-200 dark:hover:border-zinc-700;
 
   &.pinned {
-    @apply border-gray-200 border dark:border-zinc-600;
+    @apply border-gray-200 border dark:border-zinc-700;
   }
 
   > .memo-top-wrapper {
@@ -15,7 +15,7 @@
         @apply hidden flex-col justify-start items-center absolute top-2 -right-4 flex-nowrap hover:flex p-3;
 
         > .more-action-btns-container {
-          @apply w-auto h-auto p-1 z-1 whitespace-nowrap rounded-lg bg-white dark:bg-zinc-800;
+          @apply w-auto h-auto p-1 z-1 whitespace-nowrap rounded-lg bg-white dark:bg-zinc-700;
           box-shadow: 0 0 8px 0 rgb(0 0 0 / 20%);
 
           > .btn {
diff --git a/web/src/less/setting.less b/web/src/less/setting.less
index b0e6f8f1..ba26528a 100644
--- a/web/src/less/setting.less
+++ b/web/src/less/setting.less
@@ -1,5 +1,5 @@
 .setting-page-wrapper {
-  @apply flex flex-row justify-start items-start relative w-full h-full shadow p-4 rounded-lg bg-white dark:bg-zinc-700 dark:text-gray-200 sm:gap-x-4;
+  @apply flex flex-row justify-start items-start relative w-full h-full shadow p-4 rounded-lg bg-white dark:bg-zinc-800 dark:text-gray-300 sm:gap-x-4;
 
   > .section-selector-container {
     @apply hidden sm:flex flex-col justify-start items-start sm:w-40 h-auto sm:h-full shrink-0 pb-2 border-r dark:border-r-zinc-600;
diff --git a/web/src/pages/Archived.tsx b/web/src/pages/Archived.tsx
index 6126b7df..4562ebb6 100644
--- a/web/src/pages/Archived.tsx
+++ b/web/src/pages/Archived.tsx
@@ -86,7 +86,7 @@ const Archived = () => {
             {archivedMemos.map((memo) => (
               <div
                 key={memo.id}
-                className="relative flex flex-col justify-start items-start w-full p-4 pt-3 mb-2 bg-white dark:bg-zinc-700 rounded-lg"
+                className="relative flex flex-col justify-start items-start w-full p-4 pt-3 mb-2 bg-white dark:bg-zinc-800 rounded-lg"
               >
                 <div className="w-full mb-1 flex flex-row justify-between items-center">
                   <div className="w-full max-w-[calc(100%-20px)] flex flex-row justify-start items-center mr-1">
diff --git a/web/src/pages/Inboxes.tsx b/web/src/pages/Inboxes.tsx
index 8f231464..d3ec68a4 100644
--- a/web/src/pages/Inboxes.tsx
+++ b/web/src/pages/Inboxes.tsx
@@ -23,13 +23,13 @@ const Inboxes = () => {
     <section className="@container w-full max-w-5xl min-h-full flex flex-col justify-start items-center sm:pt-3 md:pt-6 pb-8">
       <MobileHeader />
       <div className="w-full px-4 sm:px-6">
-        <div className="w-full shadow flex flex-col justify-start items-start px-4 py-3 rounded-xl bg-white dark:bg-zinc-700 text-black dark:text-gray-300">
+        <div className="w-full shadow flex flex-col justify-start items-start px-4 py-3 rounded-xl bg-white dark:bg-zinc-800 text-black dark:text-gray-300">
           <div className="relative w-full flex flex-row justify-between items-center">
             <p className="px-2 py-1 flex flex-row justify-start items-center select-none opacity-80">
               <Icon.Bell className="w-5 h-auto mr-1" /> {t("common.inbox")}
             </p>
           </div>
-          <div className="w-full h-auto flex flex-col justify-start items-start px-2 pb-4 bg-white dark:bg-zinc-700">
+          <div className="w-full h-auto flex flex-col justify-start items-start px-2 pb-4">
             {inboxes.length === 0 && (
               <div className="w-full mt-4 mb-8 flex flex-col justify-center items-center italic">
                 <Empty />
diff --git a/web/src/pages/MemoDetail.tsx b/web/src/pages/MemoDetail.tsx
index 5dbfbbbc..21b59e58 100644
--- a/web/src/pages/MemoDetail.tsx
+++ b/web/src/pages/MemoDetail.tsx
@@ -115,7 +115,7 @@ const MemoDetail = () => {
     <section className="@container w-full max-w-5xl min-h-full flex flex-col justify-start items-center sm:pt-3 md:pt-6 pb-8">
       <MobileHeader />
       <div className="w-full px-4 sm:px-6">
-        <div className="relative flex-grow w-full min-h-full flex flex-col justify-start items-start border dark:border-zinc-700 bg-white dark:bg-zinc-700 shadow hover:shadow-xl transition-all p-4 pb-3 rounded-lg">
+        <div className="relative flex-grow w-full min-h-full flex flex-col justify-start items-start border dark:border-zinc-700 bg-white dark:bg-zinc-800 shadow hover:shadow-xl transition-all p-4 pb-3 rounded-lg">
           <div className="mb-3">
             <Link to={`/u/${encodeURIComponent(extractUsernameFromName(memo.creator))}`} unstable_viewTransition>
               <span className="w-full flex flex-row justify-start items-center">
diff --git a/web/src/pages/Resources.tsx b/web/src/pages/Resources.tsx
index 910ca6d7..aaa0f8ff 100644
--- a/web/src/pages/Resources.tsx
+++ b/web/src/pages/Resources.tsx
@@ -69,7 +69,7 @@ const Resources = () => {
     <section className="@container w-full max-w-5xl min-h-full flex flex-col justify-start items-center sm:pt-3 md:pt-6 pb-8">
       <MobileHeader />
       <div className="w-full px-4 sm:px-6">
-        <div className="w-full shadow flex flex-col justify-start items-start px-4 py-3 rounded-xl bg-white dark:bg-zinc-700 text-black dark:text-gray-300">
+        <div className="w-full shadow flex flex-col justify-start items-start px-4 py-3 rounded-xl bg-white dark:bg-zinc-800 text-black dark:text-gray-300">
           <div className="relative w-full flex flex-row justify-between items-center">
             <p className="px-2 py-1 flex flex-row justify-start items-center select-none opacity-80">
               <Icon.Paperclip className="w-5 h-auto mr-1" /> {t("common.resources")}
diff --git a/web/src/pages/SignIn.tsx b/web/src/pages/SignIn.tsx
index fb295472..0d9e7128 100644
--- a/web/src/pages/SignIn.tsx
+++ b/web/src/pages/SignIn.tsx
@@ -142,7 +142,12 @@ const SignIn = () => {
                 </div>
               </div>
               <div className="flex flex-row justify-start items-center w-full mt-6">
-                <Checkbox label={t("common.remember-me")} checked={remember} onChange={(e) => setRemember(e.target.checked)} />
+                <Checkbox
+                  className="dark:!text-gray-400"
+                  label={t("common.remember-me")}
+                  checked={remember}
+                  onChange={(e) => setRemember(e.target.checked)}
+                />
               </div>
               <div className="flex flex-row justify-end items-center w-full mt-6">
                 <Button
diff --git a/web/src/pages/Timeline.tsx b/web/src/pages/Timeline.tsx
index a3d16e81..f3b3e4af 100644
--- a/web/src/pages/Timeline.tsx
+++ b/web/src/pages/Timeline.tsx
@@ -61,7 +61,7 @@ const Timeline = () => {
     <section className="@container w-full max-w-5xl min-h-full flex flex-col justify-start items-center sm:pt-3 md:pt-6 pb-8">
       <MobileHeader />
       <div className="w-full px-4 sm:px-6">
-        <div className="w-full shadow flex flex-col justify-start items-start px-4 py-3 rounded-xl bg-white dark:bg-zinc-700 text-black dark:text-gray-300">
+        <div className="w-full shadow flex flex-col justify-start items-start px-4 py-3 rounded-xl bg-white dark:bg-zinc-800 text-black dark:text-gray-300">
           <div className="relative w-full flex flex-row justify-start items-center">
             <p
               className="px-2 py-1 mr-2 flex flex-row justify-start items-center cursor-pointer select-none rounded opacity-80 hover:bg-gray-100 dark:hover:bg-zinc-700"
@@ -89,7 +89,7 @@ const Timeline = () => {
               handleClickAway={() => toggleShowDatePicker(false)}
             />
           </div>
-          <div className="w-full h-auto flex flex-col justify-start items-start px-2 pb-4 bg-white dark:bg-zinc-700">
+          <div className="w-full h-auto flex flex-col justify-start items-start px-2 pb-4 bg-white dark:bg-zinc-800">
             <div className="flex flex-col justify-start items-start w-full mt-2">
               {sortedMemos.map((memo, index) => (
                 <div
@@ -101,7 +101,7 @@ const Timeline = () => {
                     {index !== sortedMemos.length - 1 && (
                       <div className="absolute top-2 left-[7px] h-full w-0.5 bg-gray-400 dark:bg-gray-500 block"></div>
                     )}
-                    <div className="border-4 rounded-full border-white relative dark:border-zinc-700">
+                    <div className="border-4 rounded-full border-white relative dark:border-zinc-800">
                       <Icon.Circle className="w-2 h-auto bg-gray-400 text-gray-400 dark:bg-gray-500 dark:text-gray-500 rounded-full" />
                     </div>
                   </div>