diff --git a/web/src/pages/Archived.tsx b/web/src/pages/Archived.tsx
index 1a2f0ce8..2f56bd4d 100644
--- a/web/src/pages/Archived.tsx
+++ b/web/src/pages/Archived.tsx
@@ -35,7 +35,7 @@ const Archived = () => {
   }, [memos, textQuery]);
 
   return (
-    <section className="w-full max-w-3xl min-h-full flex flex-col justify-start items-start px-4 sm:px-2 sm:pt-4 pb-8 bg-zinc-100 dark:bg-zinc-800">
+    <section className="@container w-full max-w-3xl min-h-full flex flex-col justify-start items-start px-4 sm:px-2 sm:pt-4 pb-8 bg-zinc-100 dark:bg-zinc-800">
       <MobileHeader showSearch={false} />
       <MemoFilter />
       {loadingState.isLoading ? (
diff --git a/web/src/pages/DailyReview.tsx b/web/src/pages/DailyReview.tsx
index 9be2b7f4..47cce441 100644
--- a/web/src/pages/DailyReview.tsx
+++ b/web/src/pages/DailyReview.tsx
@@ -94,7 +94,7 @@ const DailyReview = () => {
   const isFutureDateDisabled = isFutureDate(currentDateStamp + DAILY_TIMESTAMP);
 
   return (
-    <section className="w-full max-w-3xl min-h-full flex flex-col justify-start items-center px-4 sm:px-2 sm:pt-4 pb-8 bg-zinc-100 dark:bg-zinc-800">
+    <section className="@container w-full max-w-3xl min-h-full flex flex-col justify-start items-center px-4 sm:px-2 sm:pt-4 pb-8 bg-zinc-100 dark:bg-zinc-800">
       <MobileHeader showSearch={false} />
       <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="relative w-full flex flex-row justify-between items-center">
diff --git a/web/src/pages/Explore.tsx b/web/src/pages/Explore.tsx
index 37555421..22d15ffe 100644
--- a/web/src/pages/Explore.tsx
+++ b/web/src/pages/Explore.tsx
@@ -87,7 +87,7 @@ const Explore = () => {
   };
 
   return (
-    <section className="w-full max-w-3xl min-h-full flex flex-col justify-start items-center px-4 sm:px-2 sm:pt-4 pb-8 bg-zinc-100 dark:bg-zinc-800">
+    <section className="@container w-full max-w-3xl min-h-full flex flex-col justify-start items-center px-4 sm:px-2 sm:pt-4 pb-8 bg-zinc-100 dark:bg-zinc-800">
       <MobileHeader showSearch={false} />
       {!loadingState.isLoading && (
         <div className="relative w-full h-auto flex flex-col justify-start items-start">
diff --git a/web/src/pages/Resources.tsx b/web/src/pages/Resources.tsx
index f2092ce7..a5c4763a 100644
--- a/web/src/pages/Resources.tsx
+++ b/web/src/pages/Resources.tsx
@@ -8,6 +8,7 @@ import MobileHeader from "@/components/MobileHeader";
 import ResourceIcon from "@/components/ResourceIcon";
 import { resourceServiceClient } from "@/grpcweb";
 import useLoading from "@/hooks/useLoading";
+import i18n from "@/i18n";
 import { Resource } from "@/types/proto/api/v2/resource_service";
 import { useTranslate } from "@/utils/i18n";
 
@@ -61,7 +62,7 @@ const Resources = () => {
   };
 
   return (
-    <section className="w-full max-w-3xl min-h-full flex flex-col justify-start items-center px-4 sm:px-2 sm:pt-4 pb-8 bg-zinc-100 dark:bg-zinc-800">
+    <section className="@container w-full max-w-3xl min-h-full flex flex-col justify-start items-center px-4 sm:px-2 sm:pt-4 pb-8 bg-zinc-100 dark:bg-zinc-800">
       <MobileHeader showSearch={false} />
       <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="relative w-full flex flex-row justify-between items-center">
@@ -89,7 +90,7 @@ const Resources = () => {
                       <div key={timestamp} className="w-full flex flex-row justify-start items-start">
                         <div className="w-16 sm:w-24 pt-4 sm:pl-4 flex flex-col justify-start items-start">
                           <span className="text-sm opacity-60">{date.getFullYear()}</span>
-                          <span className="font-medium text-xl">{date.toLocaleString("default", { month: "short" })}</span>
+                          <span className="font-medium text-xl">{date.toLocaleString(i18n.language, { month: "short" })}</span>
                         </div>
                         <div className="w-full max-w-[calc(100%-4rem)] sm:max-w-[calc(100%-6rem)] flex flex-row justify-start items-start gap-4 flex-wrap">
                           {resources.map((resource) => {
diff --git a/web/src/pages/Setting.tsx b/web/src/pages/Setting.tsx
index c2cec571..dc8819cb 100644
--- a/web/src/pages/Setting.tsx
+++ b/web/src/pages/Setting.tsx
@@ -43,7 +43,7 @@ const Setting = () => {
   };
 
   return (
-    <section className="w-full max-w-3xl min-h-full flex flex-col justify-start items-start px-4 sm:px-2 sm:pt-4 pb-8 bg-zinc-100 dark:bg-zinc-800">
+    <section className="@container w-full max-w-3xl min-h-full flex flex-col justify-start items-start px-4 sm:px-2 sm:pt-4 pb-8 bg-zinc-100 dark:bg-zinc-800">
       <MobileHeader showSearch={false} />
       <div className="setting-page-wrapper">
         <div className="section-selector-container">