diff --git a/src/components/BackButton.astro b/src/components/BackButton.astro
index 0d981d1eec..0ea9782993 100644
--- a/src/components/BackButton.astro
+++ b/src/components/BackButton.astro
@@ -2,6 +2,10 @@
 import IconChevronLeft from "@/assets/icons/IconChevronLeft.svg";
 import LinkButton from "./LinkButton.astro";
 import { SITE } from "@/config";
+import { getLang, useTranslations } from "../i18n/utils";
+
+const lang = getLang();
+const t = useTranslations(lang);
 ---
 
 {
@@ -13,7 +17,7 @@ import { SITE } from "@/config";
         class="focus-outline -ms-2 mt-8 mb-2 hover:text-foreground/75"
       >
         <IconChevronLeft class="inline-block size-6 rtl:rotate-180" />
-        <span>Go back</span>
+        <span>{t("nav.back")}</span>
       </LinkButton>
     </div>
   )
diff --git a/src/components/BackToTopButton.astro b/src/components/BackToTopButton.astro
index 88e733eee1..d5e159142a 100644
--- a/src/components/BackToTopButton.astro
+++ b/src/components/BackToTopButton.astro
@@ -1,6 +1,10 @@
 ---
 import IconChevronLeft from "@/assets/icons/IconChevronLeft.svg";
 import IconArrowNarrowUp from "@/assets/icons/IconArrowNarrowUp.svg";
+import { getLang, useTranslations } from "../i18n/utils";
+
+const lang = getLang();
+const t = useTranslations(lang);
 ---
 
 <div
@@ -27,7 +31,7 @@ import IconArrowNarrowUp from "@/assets/icons/IconArrowNarrowUp.svg";
     <IconChevronLeft class="inline-block rotate-90 md:hidden" />
     <span class="sr-only text-sm group-hover:text-accent md:not-sr-only">
       <IconArrowNarrowUp class="inline-block size-4" />
-      Back To Top
+      {t("nav.top")}
     </span>
   </button>
 </div>
diff --git a/src/components/Breadcrumb.astro b/src/components/Breadcrumb.astro
index b49fe3d754..487570284f 100644
--- a/src/components/Breadcrumb.astro
+++ b/src/components/Breadcrumb.astro
@@ -1,4 +1,9 @@
 ---
+import { getLang, useTranslations } from "../i18n/utils";
+
+const lang = getLang();
+const t = useTranslations(lang);
+
 // Remove current url path and remove trailing slash if exists
 const currentUrlPath = Astro.url.pathname.replace(/\/+$/, "");
 
@@ -28,7 +33,7 @@ if (breadcrumbList[0] === "tags" && !isNaN(Number(breadcrumbList[2]))) {
     class="font-light [&>li]:inline [&>li:not(:last-child)>a]:hover:opacity-100"
   >
     <li>
-      <a href="/" class="opacity-80">Home</a>
+      <a href="/" class="opacity-80">{t("nav.home")}</a>
       <span aria-hidden="true" class="opacity-80">&raquo;</span>
     </li>
     {
diff --git a/src/components/Datetime.astro b/src/components/Datetime.astro
index e16834ff45..6c61ad040e 100644
--- a/src/components/Datetime.astro
+++ b/src/components/Datetime.astro
@@ -4,6 +4,10 @@ import utc from "dayjs/plugin/utc";
 import timezone from "dayjs/plugin/timezone";
 import IconCalendar from "@/assets/icons/IconCalendar.svg";
 import { SITE } from "@/config";
+import { getLang, useTranslations } from "../i18n/utils";
+
+const lang = getLang();
+const t = useTranslations(lang);
 
 dayjs.extend(utc);
 dayjs.extend(timezone);
@@ -44,7 +48,7 @@ const date = datetime.format("D MMM, YYYY"); // e.g., '22 Mar, 2025'
   {
     isModified && (
       <span class:list={["text-sm", { "sm:text-base": size === "lg" }]}>
-        Updated:
+        {t("post.updated")}
       </span>
     )
   }
diff --git a/src/components/Footer.astro b/src/components/Footer.astro
index 2283c7fac1..7a9bb2dc26 100644
--- a/src/components/Footer.astro
+++ b/src/components/Footer.astro
@@ -1,6 +1,10 @@
 ---
 import type { HTMLAttributes } from "astro/types";
 import Socials from "./Socials.astro";
+import { getLang, useTranslations } from "../i18n/utils";
+
+const lang = getLang();
+const t = useTranslations(lang);
 
 const currentYear = new Date().getFullYear();
 
@@ -26,7 +30,7 @@ const { noMarginTop = false, class: className, ...attrs } = Astro.props;
     <div class="my-2 flex flex-col items-center whitespace-nowrap sm:flex-row">
       <span>Copyright &#169; {currentYear}</span>
       <span class="hidden sm:inline">&nbsp;|&nbsp;</span>
-      <span>All rights reserved.</span>
+      <span>{t("footer.rights")}.</span>
     </div>
   </div>
 </footer>
diff --git a/src/components/Header.astro b/src/components/Header.astro
index 5120467dd8..e6bd69a84a 100644
--- a/src/components/Header.astro
+++ b/src/components/Header.astro
@@ -7,6 +7,10 @@ import IconSunHigh from "@/assets/icons/IconSunHigh.svg";
 import IconMenuDeep from "@/assets/icons/IconMenuDeep.svg";
 import LinkButton from "./LinkButton.astro";
 import { SITE } from "@/config";
+import { getLang, useTranslations } from "../i18n/utils";
+
+const lang = getLang();
+const t = useTranslations(lang);
 
 const { pathname } = Astro.url;
 
@@ -73,17 +77,17 @@ const isActive = (path: string) => {
       >
         <li class="col-span-2">
           <a href="/posts" class:list={{ "active-nav": isActive("/posts") }}>
-            Posts
+            {t("posts.title")}
           </a>
         </li>
         <li class="col-span-2">
           <a href="/tags" class:list={{ "active-nav": isActive("/tags") }}>
-            Tags
+            {t("tags.title")}
           </a>
         </li>
         <li class="col-span-2">
           <a href="/about" class:list={{ "active-nav": isActive("/about") }}>
-            About
+            {t("about.title")}
           </a>
         </li>
         {
@@ -97,11 +101,11 @@ const isActive = (path: string) => {
                     "active-nav [&>svg]:stroke-accent": isActive("/archives"),
                   },
                 ]}
-                title="Archives"
+                title={t("archives.title")}
                 aria-label="archives"
               >
                 <IconArchive class="hidden sm:inline-block" />
-                <span class="sm:sr-only">Archives</span>
+                <span class="sm:sr-only">{t("archives.title")}</span>
               </LinkButton>
             </li>
           )
@@ -113,11 +117,11 @@ const isActive = (path: string) => {
               "focus-outline flex p-3 sm:p-1",
               { "[&>svg]:stroke-accent": isActive("/search") },
             ]}
-            title="Search"
+            title={t("search.title")}
             aria-label="search"
           >
             <IconSearch />
-            <span class="sr-only">Search</span>
+            <span class="sr-only">{t("search.title")}</span>
           </LinkButton>
         </li>
         {
@@ -126,7 +130,7 @@ const isActive = (path: string) => {
               <button
                 id="theme-btn"
                 class="focus-outline relative size-12 p-4 sm:size-8 hover:[&>svg]:stroke-accent"
-                title="Toggles light & dark"
+                title={t("nav.toggle")}
                 aria-label="auto"
                 aria-live="polite"
               >
diff --git a/src/components/Pagination.astro b/src/components/Pagination.astro
index 1f6f3671ef..9c52e99f8a 100644
--- a/src/components/Pagination.astro
+++ b/src/components/Pagination.astro
@@ -4,7 +4,10 @@ import type { CollectionEntry } from "astro:content";
 import IconArrowLeft from "@/assets/icons/IconArrowLeft.svg";
 import IconArrowRight from "@/assets/icons/IconArrowRight.svg";
 import LinkButton from "./LinkButton.astro";
+import { getLang, useTranslations } from "../i18n/utils";
 
+const lang = getLang();
+const t = useTranslations(lang);
 type Props = {
   page: Page<CollectionEntry<"blog">>;
 };
@@ -26,7 +29,7 @@ const { page } = Astro.props;
         aria-label="Goto Previous Page"
       >
         <IconArrowLeft class="inline-block rtl:rotate-180" />
-        Prev
+        {t("nav.prev")}
       </LinkButton>
       {page.currentPage} / {page.lastPage}
       <LinkButton
@@ -35,7 +38,7 @@ const { page } = Astro.props;
         class:list={["ms-4 select-none", { "opacity-50": !page.url.next }]}
         aria-label="Goto Next Page"
       >
-        Next
+        {t("nav.next")}
         <IconArrowRight class="inline-block rtl:rotate-180" />
       </LinkButton>
     </nav>
diff --git a/src/components/ShareLinks.astro b/src/components/ShareLinks.astro
index d65a0de1ea..e4c2bea4b8 100644
--- a/src/components/ShareLinks.astro
+++ b/src/components/ShareLinks.astro
@@ -1,6 +1,10 @@
 ---
 import { SHARE_LINKS } from "@/constants";
 import LinkButton from "./LinkButton.astro";
+import { getLang, useTranslations } from "../i18n/utils";
+
+const lang = getLang();
+const t = useTranslations(lang);
 
 const URL = Astro.url;
 ---
@@ -8,7 +12,7 @@ const URL = Astro.url;
 {
   SHARE_LINKS.length > 0 && (
     <div class="flex flex-none flex-col items-center justify-center gap-1 md:items-start">
-      <span class="italic">Share this post on:</span>
+      <span class="italic">{t("post.share")}</span>
       <div class="text-center">
         {SHARE_LINKS.map(social => (
           <LinkButton
diff --git a/src/i18n/ui.ts b/src/i18n/ui.ts
new file mode 100644
index 0000000000..9592b6c857
--- /dev/null
+++ b/src/i18n/ui.ts
@@ -0,0 +1,113 @@
+import { SITE } from "@/config";
+
+export const languages = {
+  en: "English",
+  fr: "Français",
+};
+
+export const defaultLang = "en";
+// Use 'lang' in config.ts file
+export const lang = SITE.lang;
+
+export const ui = {
+  en: {
+    "nav.home": "Home",
+    "nav.back": "Go back",
+    "nav.top": "Back To Top",
+    "nav.prev": "Prev",
+    "nav.next": "Next",
+    "nav.toggle": "Toggles light & dark",
+    "nav.prevPost": "Previous Post",
+    "nav.nextPost": "Next Post",
+
+    "months.january": "January",
+    "months.february": "February",
+    "months.march": "March",
+    "months.april": "April",
+    "months.may": "May",
+    "months.june": "June",
+    "months.july": "July",
+    "months.august": "August",
+    "months.september": "September",
+    "months.october": "October",
+    "months.november": "November",
+    "months.december": "Decembrer",
+
+    "footer.rights": "All rights reserved",
+
+    "posts.title": "Posts",
+    "post.updated": "Updated:",
+    "post.share": "Share this post on:",
+    "posts.subtitle": "All the articles I've posted.",
+
+    "archives.title": "Archives",
+    "archives.subtitle": "All the articles I've archived.",
+
+    "search.title": "Search",
+    "search.subtitle": "Search any article ...",
+
+    "tags.title": "tags",
+    "tags.desc": "All the tags used in posts.",
+
+    "about.title": "About",
+
+    "error.back": "Go back home",
+    "error.notFound": "Page not found",
+
+    "home.social": "Social Links:",
+    "home.featured": "Featured",
+    "home.recent": "Recent Posts",
+    "home.all": "All posts",
+    "home.rss": "RSS feed",
+  },
+  fr: {
+    "nav.home": "Accueil",
+    "nav.back": "retour",
+    "nav.top": "Remonter",
+    "nav.prev": "Précédent",
+    "nav.next": "Suivant",
+    "nav.toggle": "Thème clair / Thème sombre",
+    "nav.prevPost": "Article Précédent",
+    "nav.nextPost": "Article Suivant",
+
+    "months.january": "Janvier",
+    "months.february": "Février",
+    "months.march": "Mars",
+    "months.april": "Avril",
+    "months.may": "Mai",
+    "months.june": "Juin",
+    "months.july": "Juillet",
+    "months.august": "Août",
+    "months.september": "Septembre",
+    "months.october": "Octobre",
+    "months.november": "Novembre",
+    "months.december": "Décembre",
+
+    "footer.rights": "tous droits réservés",
+
+    "posts.title": "Articles",
+    "post.updated": "Modifié le:",
+    "post.share": "Partager sur:",
+    "posts.subtitle": "Tous les articles postés",
+
+    "archives.title": "Archives",
+    "archives.subtitle": "Tous les articles archivés.",
+
+    "search.title": "Rechercher",
+    "search.subtitle": "Rechercher un article...",
+
+    "tags.title": "tags",
+    "tags.desc": "Tous les tags utilisés.",
+
+    "about.title": "À propos",
+
+    "error.back": "Retourner à l'accueil",
+    "error.notFound": "Page non trouvée",
+
+    "home.social": "Réseaux sociaux:",
+    "home.featured": "A la une",
+    "home.recent": "Articles récents",
+    "home.all": "Tous les articles",
+    "home.rss": "Flux RSS",
+  },
+} as const;
diff --git a/src/i18n/utils.ts b/src/i18n/utils.ts
new file mode 100644
index 0000000000..d5d434f01f
--- /dev/null
+++ b/src/i18n/utils.ts
@@ -0,0 +1,13 @@
+import { ui, defaultLang, lang } from "./ui";
+
+//Return lang constant from ui.ts, if exist in translated ui. Return default lang if not
+export function getLang() {
+  if (lang in ui) return lang as keyof typeof ui;
+  return defaultLang;
+}
+
+export function useTranslations(lang: keyof typeof ui) {
+  return function t(key: keyof (typeof ui)[typeof defaultLang]) {
+    return ui[lang][key] || ui[defaultLang][key];
+  };
+}
diff --git a/src/layouts/PostDetails.astro b/src/layouts/PostDetails.astro
index cb21908041..ed983c0d0c 100644
--- a/src/layouts/PostDetails.astro
+++ b/src/layouts/PostDetails.astro
@@ -14,6 +14,10 @@ import { slugifyStr } from "@/utils/slugify";
 import IconChevronLeft from "@/assets/icons/IconChevronLeft.svg";
 import IconChevronRight from "@/assets/icons/IconChevronRight.svg";
 import { SITE } from "@/config";
+import { getLang, useTranslations } from "../i18n/utils";
+
+const lang = getLang();
+const t = useTranslations(lang);
 
 type Props = {
   post: CollectionEntry<"blog">;
@@ -138,7 +142,7 @@ const nextPost =
           >
             <IconChevronLeft class="inline-block flex-none rtl:rotate-180" />
             <div>
-              <span>Previous Post</span>
+              <span>{t("nav.prevPost")}</span>
               <div class="text-sm text-accent/85">{prevPost.title}</div>
             </div>
           </a>
@@ -151,7 +155,7 @@ const nextPost =
             class="flex w-full justify-end gap-1 text-end hover:opacity-75 sm:col-start-2"
           >
             <div>
-              <span>Next Post</span>
+              <span>{t("nav.nextPost")}</span>
               <div class="text-sm text-accent/85">{nextPost.title}</div>
             </div>
             <IconChevronRight class="inline-block flex-none rtl:rotate-180" />
diff --git a/src/pages/404.astro b/src/pages/404.astro
index b1ee585baa..53440bcc9f 100644
--- a/src/pages/404.astro
+++ b/src/pages/404.astro
@@ -4,6 +4,10 @@ import Header from "@/components/Header.astro";
 import Footer from "@/components/Footer.astro";
 import LinkButton from "@/components/LinkButton.astro";
 import { SITE } from "@/config";
+import { getLang, useTranslations } from "../i18n/utils";
+
+const lang = getLang();
+const t = useTranslations(lang);
 ---
 
 <Layout title={`404 Not Found | ${SITE.title}`}>
@@ -16,12 +20,12 @@ import { SITE } from "@/config";
     <div class="mb-14 flex flex-col items-center justify-center">
       <h1 class="text-9xl font-bold text-accent">404</h1>
       <span aria-hidden="true">¯\_(ツ)_/¯</span>
-      <p class="mt-4 text-2xl sm:text-3xl">Page Not Found</p>
+      <p class="mt-4 text-2xl sm:text-3xl">{t("error.notFound")}</p>
       <LinkButton
         href="/"
         class="my-6 text-lg underline decoration-dashed underline-offset-8"
       >
-        Go back home
+        {t("error.back")}
       </LinkButton>
     </div>
   </main>
diff --git a/src/pages/archives/index.astro b/src/pages/archives/index.astro
index 030d671a36..47cec23fbe 100644
--- a/src/pages/archives/index.astro
+++ b/src/pages/archives/index.astro
@@ -7,6 +7,10 @@ import Footer from "@/components/Footer.astro";
 import Card from "@/components/Card.astro";
 import getPostsByGroupCondition from "@/utils/getPostsByGroupCondition";
 import { SITE } from "@/config";
+import { getLang, useTranslations } from "../../i18n/utils";
+
+const lang = getLang();
+const t = useTranslations(lang);
 
 // Redirect to 404 page if `showArchives` config is false
 if (!SITE.showArchives) {
@@ -16,24 +20,24 @@ if (!SITE.showArchives) {
 const posts = await getCollection("blog", ({ data }) => !data.draft);
 
 const months = [
-  "January",
-  "February",
-  "March",
-  "April",
-  "May",
-  "June",
-  "July",
-  "August",
-  "September",
-  "October",
-  "November",
-  "December",
+  t("months.january"),
+  t("months.february"),
+  t("months.march"),
+  t("months.april"),
+  t("months.may"),
+  t("months.june"),
+  t("months.july"),
+  t("months.august"),
+  t("months.september"),
+  t("months.october"),
+  t("months.november"),
+  t("months.december"),
 ];
 ---
 
-<Layout title={`Archives | ${SITE.title}`}>
+<Layout title={`${t("archives.title")} | ${SITE.title}`}>
   <Header />
-  <Main pageTitle="Archives" pageDesc="All the articles I've archived.">
+  <Main pageTitle={t("archives.title")} pageDesc={t("archives.subtitle")}>
     {
       Object.entries(
         getPostsByGroupCondition(posts, post =>
diff --git a/src/pages/index.astro b/src/pages/index.astro
index e7091584d5..089d08bf0b 100644
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -11,6 +11,10 @@ import IconRss from "@/assets/icons/IconRss.svg";
 import IconArrowRight from "@/assets/icons/IconArrowRight.svg";
 import { SITE } from "@/config";
 import { SOCIALS } from "@/constants";
+import { getLang, useTranslations } from "../i18n/utils";
+
+const lang = getLang();
+const t = useTranslations(lang);
 
 const posts = await getCollection("blog");
 
@@ -31,14 +35,14 @@ const recentPosts = sortedPosts.filter(({ data }) => !data.featured);
         href="/rss.xml"
         class="inline-block"
         aria-label="rss feed"
-        title="RSS Feed"
+        title={t("home.rss")}
       >
         <IconRss
           width={20}
           height={20}
           class="scale-125 stroke-accent stroke-3 rtl:-rotate-90"
         />
-        <span class="sr-only">RSS Feed</span>
+        <span class="sr-only">{t("home.rss")}</span>
       </a>
 
       <p>
@@ -60,7 +64,9 @@ const recentPosts = sortedPosts.filter(({ data }) => !data.featured);
         // only display if at least one social link is enabled
         SOCIALS.length > 0 && (
           <div class="mt-4 flex max-sm:flex-col sm:items-center">
-            <div class="me-2 mb-1 whitespace-nowrap sm:mb-0">Social Links:</div>
+            <div class="me-2 mb-1 whitespace-nowrap sm:mb-0">
+              {t("home.social")}
+            </div>
             <Socials />
           </div>
         )
@@ -76,7 +82,9 @@ const recentPosts = sortedPosts.filter(({ data }) => !data.featured);
             { "border-b border-border": recentPosts.length > 0 },
           ]}
         >
-          <h2 class="text-2xl font-semibold tracking-wide">Featured</h2>
+          <h2 class="text-2xl font-semibold tracking-wide">
+            {t("home.featured")}
+          </h2>
           <ul>
             {featuredPosts.map(data => (
               <Card variant="h3" {...data} />
@@ -89,7 +97,9 @@ const recentPosts = sortedPosts.filter(({ data }) => !data.featured);
     {
       recentPosts.length > 0 && (
         <section id="recent-posts" class="pt-12 pb-6">
-          <h2 class="text-2xl font-semibold tracking-wide">Recent Posts</h2>
+          <h2 class="text-2xl font-semibold tracking-wide">
+            {t("home.recent")}
+          </h2>
           <ul>
             {recentPosts.map(
               (data, index) =>
@@ -102,7 +112,7 @@ const recentPosts = sortedPosts.filter(({ data }) => !data.featured);
 
     <div class="my-8 text-center">
       <LinkButton href="/posts/">
-        All Posts
+        {t("home.all")}
         <IconArrowRight class="inline-block rtl:-rotate-180" />
       </LinkButton>
     </div>
diff --git a/src/pages/posts/[...page].astro b/src/pages/posts/[...page].astro
index 2c554aaa7f..a94387de04 100644
--- a/src/pages/posts/[...page].astro
+++ b/src/pages/posts/[...page].astro
@@ -9,6 +9,10 @@ import Card from "@/components/Card.astro";
 import Pagination from "@/components/Pagination.astro";
 import getSortedPosts from "@/utils/getSortedPosts";
 import { SITE } from "@/config";
+import { getLang, useTranslations } from "../../i18n/utils";
+
+const lang = getLang();
+const t = useTranslations(lang);
 
 export const getStaticPaths = (async ({ paginate }) => {
   const posts = await getCollection("blog", ({ data }) => !data.draft);
@@ -18,9 +22,9 @@ export const getStaticPaths = (async ({ paginate }) => {
 const { page } = Astro.props;
 ---
 
-<Layout title={`Posts | ${SITE.title}`}>
+<Layout title={`${t("posts.title")} | ${SITE.title}`}>
   <Header />
-  <Main pageTitle="Posts" pageDesc="All the articles I've posted.">
+  <Main pageTitle={t("posts.title")} pageDesc={t("posts.subtitle")}>
     <ul>
       {page.data.map(data => <Card {...data} />)}
     </ul>
diff --git a/src/pages/search.astro b/src/pages/search.astro
index 2b9b468ad6..b8b3bcd6bf 100644
--- a/src/pages/search.astro
+++ b/src/pages/search.astro
@@ -5,13 +5,17 @@ import Layout from "@/layouts/Layout.astro";
 import Header from "@/components/Header.astro";
 import Footer from "@/components/Footer.astro";
 import { SITE } from "@/config";
+import { getLang, useTranslations } from "../i18n/utils";
+
+const lang = getLang();
+const t = useTranslations(lang);
 
 const backUrl = SITE.showBackButton ? `${Astro.url.pathname}` : "/";
 ---
 
-<Layout title={`Search | ${SITE.title}`}>
+<Layout title={`${t("search.title")} | ${SITE.title}`}>
   <Header />
-  <Main pageTitle="Search" pageDesc="Search any article ...">
+  <Main pageTitle={t("search.title")} pageDesc={t("search.subtitle")}>
     <div id="pagefind-search" transition:persist data-backurl={backUrl}></div>
   </Main>
   <Footer />
diff --git a/src/pages/tags/index.astro b/src/pages/tags/index.astro
index 2b0968ed42..e8e9da48d4 100644
--- a/src/pages/tags/index.astro
+++ b/src/pages/tags/index.astro
@@ -7,15 +7,19 @@ import Header from "@/components/Header.astro";
 import Footer from "@/components/Footer.astro";
 import getUniqueTags from "@/utils/getUniqueTags";
 import { SITE } from "@/config";
+import { getLang, useTranslations } from "../../i18n/utils";
+
+const lang = getLang();
+const t = useTranslations(lang);
 
 const posts = await getCollection("blog");
 
 let tags = getUniqueTags(posts);
 ---
 
-<Layout title={`Tags | ${SITE.title}`}>
+<Layout title={`${t("tags.title")} | ${SITE.title}`}>
   <Header />
-  <Main pageTitle="Tags" pageDesc="All the tags used in posts.">
+  <Main pageTitle={t("tags.title")} pageDesc={t("tags.desc")}>
     <ul class="flex flex-wrap gap-6">
       {tags.map(({ tag, tagName }) => <Tag {tag} {tagName} />)}
     </ul>