diff --git a/web/src/components/DailyReviewDialog.tsx b/web/src/components/DailyReviewDialog.tsx
index ee169d58..ccc7f1ac 100644
--- a/web/src/components/DailyReviewDialog.tsx
+++ b/web/src/components/DailyReviewDialog.tsx
@@ -1,6 +1,7 @@
 import { useRef, useState } from "react";
 import { useAppSelector } from "../store";
 import toImage from "../labs/html2image";
+import useI18n from "../hooks/useI18n";
 import useToggle from "../hooks/useToggle";
 import { DAILY_TIMESTAMP } from "../helpers/consts";
 import * as utils from "../helpers/utils";
@@ -19,6 +20,7 @@ const monthChineseStrArray = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "
 const weekdayChineseStrArray = ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"];
 
 const DailyReviewDialog: React.FC<Props> = (props: Props) => {
+  const { t } = useI18n();
   const memos = useAppSelector((state) => state.memo.memos);
   const [currentDateStamp, setCurrentDateStamp] = useState(utils.getDateStampByDate(utils.getDateString(props.currentDateStamp)));
   const [showDatePicker, toggleShowDatePicker] = useToggle(false);
@@ -61,7 +63,7 @@ const DailyReviewDialog: React.FC<Props> = (props: Props) => {
     <>
       <div className="dialog-header-container">
         <p className="title-text" onClick={() => toggleShowDatePicker()}>
-          <span className="icon-text">📅</span> Daily Review
+          <span className="icon-text">📅</span> {t("sidebar.daily-review")}
         </p>
         <div className="btns-container">
           <button className="btn-text" onClick={() => setCurrentDateStamp(currentDateStamp - DAILY_TIMESTAMP)}>
diff --git a/web/src/components/ResourcesDialog.tsx b/web/src/components/ResourcesDialog.tsx
index c0553992..b6aa94e6 100644
--- a/web/src/components/ResourcesDialog.tsx
+++ b/web/src/components/ResourcesDialog.tsx
@@ -1,5 +1,6 @@
 import { useEffect, useState } from "react";
 import * as utils from "../helpers/utils";
+import useI18n from "../hooks/useI18n";
 import useLoading from "../hooks/useLoading";
 import { resourceService } from "../services";
 import Dropdown from "./common/Dropdown";
@@ -18,6 +19,7 @@ interface State {
 
 const ResourcesDialog: React.FC<Props> = (props: Props) => {
   const { destroy } = props;
+  const { t } = useI18n();
   const loadingState = useLoading();
   const [state, setState] = useState<State>({
     resources: [],
@@ -99,7 +101,7 @@ const ResourcesDialog: React.FC<Props> = (props: Props) => {
       <div className="dialog-header-container">
         <p className="title-text">
           <span className="icon-text">🌄</span>
-          Resources
+          {t("sidebar.resources")}
         </p>
         <button className="btn close-btn" onClick={destroy}>
           <Icon.X className="icon-img" />
diff --git a/web/src/locales/zh.json b/web/src/locales/zh.json
index ecb3c7e2..828d1dbd 100644
--- a/web/src/locales/zh.json
+++ b/web/src/locales/zh.json
@@ -33,7 +33,7 @@
   },
   "sidebar": {
     "daily-review": "每日回顾",
-    "resources": "资源",
+    "resources": "资源库",
     "setting": "设置",
     "archived": "已归档"
   },