diff --git a/web/pages/about.tsx b/web/pages/about.tsx
index 0c969893..068dc5c1 100644
--- a/web/pages/about.tsx
+++ b/web/pages/about.tsx
@@ -3,6 +3,7 @@ import {ReactNode} from "react";
 import Link from "next/link";
 import {discordLink, formLink, githubRepo} from "common/constants";
 import {SEO} from "web/components/SEO";
+import {useT} from "web/lib/locale";
 
 
 export const AboutBlock = (props: {
@@ -17,21 +18,22 @@ export const AboutBlock = (props: {
 }
 
 export default function About() {
+  const t = useT()
   return (
     <PageBase trackPageView={'about'}>
       <SEO
-        title={'About'}
-        description={'About Compass'}
+        title={t('about.seo.title','About')}
+        description={t('about.seo.description','About Compass')}
         url={`/about`}
       />
       <div className="text-gray-600 dark:text-white min-h-screen p-6">
         <div className="w-full">
           <div className="relative py-8 mb-8 overflow-hidden">
             <div className="relative z-10 max-w-3xl mx-auto px-4">
-              <h1 className="text-3xl font-bold mb-4 text-center">Why Choose Compass?</h1>
+              <h1 className="text-3xl font-bold mb-4 text-center">{t('about.title','Why Choose Compass?')}</h1>
               <div className="flex flex-col md:flex-row items-center justify-center mb-8 gap-8">
                 <div className="w-full text-center">
-                  <h3 className="text-3xl mb-2">To find your people with ease.</h3>
+                  <h3 className="text-3xl mb-2">{t('about.subtitle','To find your people with ease.')}</h3>
                 </div>
               </div>
             </div>
@@ -40,86 +42,88 @@ export default function About() {
             <div className="max-w-3xl mx-auto mt-20 mb-8 ">
               <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
                 <AboutBlock
-                  title="Keyword Search the Database"
-                  text={`"Meditation", "Hiking", "Neuroscience", "Nietzsche". Access any profile and get niche.`}
+                  title={t('about.block.keyword.title','Keyword Search the Database')}
+                  text={t('about.block.keyword.text','"Meditation", "Hiking", "Neuroscience", "Nietzsche". Access any profile and get niche.')}
                 />
 
                 <AboutBlock
-                  title="Get Notified About Searches"
-                  text="No need to constantly check the app! We'll contact you when new users fit your searches."
+                  title={t('about.block.notify.title','Get Notified About Searches')}
+                  text={t('about.block.notify.text',"No need to constantly check the app! We'll contact you when new users fit your searches.")}
                 />
 
                 <AboutBlock
-                  title="Free"
-                  text="Subscription-free. Paywall-free. Ad-free."
+                  title={t('about.block.free.title','Free')}
+                  text={t('about.block.free.text','Subscription-free. Paywall-free. Ad-free.')}
                 />
 
                 <AboutBlock
-                  title="Personality-Centered"
-                  text="Values and interests first, photos are secondary."
+                  title={t('about.block.personality.title','Personality-Centered')}
+                  text={t('about.block.personality.text','Values and interests first, photos are secondary.')}
                 />
 
                 <AboutBlock
-                  title="Transparent"
-                  text="Open source code and community designed."
+                  title={t('about.block.transparent.title','Transparent')}
+                  text={t('about.block.transparent.text','Open source code and community designed.')}
                 />
 
                 <AboutBlock
-                  title="Democratic"
-                  text={<span
-                    className="custom-link">Governed and <Link href="/vote">voted</Link> by the community, while ensuring no drift through our <Link
-                    href="/constitution">constitution</Link>.</span>}
+                  title={t('about.block.democratic.title','Democratic')}
+                  text={<span className="custom-link">
+                    {t('about.block.democratic.prefix','Governed and ')}
+                    <Link href="/vote">{t('about.block.democratic.link_voted','voted')}</Link>
+                    {t('about.block.democratic.middle',' by the community, while ensuring no drift through our ')}
+                    <Link href="/constitution">{t('about.block.democratic.link_constitution','constitution')}</Link>
+                    {t('about.block.democratic.suffix','.')}
+                  </span>}
                 />
 
                 <AboutBlock
-                  title='One Mission'
-                  text='Our only mission is to create more genuine human connections, and every decision must serve that goal.'
+                  title={t('about.block.mission.title','One Mission')}
+                  text={t('about.block.mission.text',"Our only mission is to create more genuine human connections, and every decision must serve that goal.")}
                 />
 
                 <AboutBlock
-                  title='Vision'
-                  text='Compass is to human connection what Linux, Wikipedia, and Firefox are to software and knowledge: a public good built by the people who use it, for the benefit of everyone.'
+                  title={t('about.block.vision.title','Vision')}
+                  text={t('about.block.vision.text','Compass is to human connection what Linux, Wikipedia, and Firefox are to software and knowledge: a public good built by the people who use it, for the benefit of everyone.')}
                 />
               </div>
             </div>
           </div>
           <div className="relative py-8 mt-12 overflow-hidden">
             <div className="relative z-10 max-w-3xl mx-auto px-4">
-              <h3 className="text-4xl font-bold text-center mt-8 mb-8">Help Compass</h3>
+              <h3 className="text-4xl font-bold text-center mt-8 mb-8">{t('about.help.title','Help Compass')}</h3>
               <div className="grid grid-cols-1 md:grid-cols-2 gap-8 mb-8">
                 <div className="rounded-xl shadow p-6 flex flex-col items-center">
-                  <h5 id="give-suggestions-or-contribute" className="font-bold mb-4 text-xl text-center">Give
-                    Suggestions or Contribute</h5>
-                  <p className="mb-4 text-center">Give suggestions or let us know you want to help through this
-                    form!</p>
+                  <h5 id="give-suggestions-or-contribute" className="font-bold mb-4 text-xl text-center">{t('about.suggestions.title','Give Suggestions or Contribute')}</h5>
+                  <p className="mb-4 text-center">{t('about.suggestions.text','Give suggestions or let us know you want to help through this form!')}</p>
                   <a
                     href={formLink}
                     className="px-6 py-2 rounded-full bg-gray-200 text-gray-800 font-semibold text-lg shadow hover:bg-gray-300 dark:bg-gray-700 dark:text-white dark:hover:bg-gray-600 transition"
                     target="_blank" rel="noopener noreferrer"
                   >
-                    Suggest Here
+                    {t('about.suggestions.button','Suggest Here')}
                   </a>
                 </div>
                 <div className="rounded-xl shadow p-6 flex flex-col items-center">
-                  <h5 id="share" className="font-bold mb-4 text-xl text-center">Develop the App</h5>
-                  <p className="mb-4 text-center">The full source code and instructions are available on GitHub.</p>
+                  <h5 id="share" className="font-bold mb-4 text-xl text-center">{t('about.dev.title','Develop the App')}</h5>
+                  <p className="mb-4 text-center">{t('about.dev.text','The full source code and instructions are available on GitHub.')}</p>
                   <a
                     href={githubRepo}
                     className="px-6 py-2 rounded-full bg-gray-200 text-gray-800 font-semibold text-lg shadow hover:bg-gray-300 dark:bg-gray-700 dark:text-white dark:hover:bg-gray-600 transition"
                     target="_blank" rel="noopener noreferrer">
-                    View Code
+                    {t('about.dev.button','View Code')}
                   </a>
                 </div>
                 <div className="rounded-xl shadow p-6 flex flex-col items-center">
-                  <h5 id="join-chats" className="font-bold mb-4 text-xl text-center">Join the Community</h5>
-                  <p className="mb-4 text-center">Let's shape the platform together.</p>
+                  <h5 id="join-chats" className="font-bold mb-4 text-xl text-center">{t('about.join.title','Join the Community')}</h5>
+                  <p className="mb-4 text-center">{t('about.join.text',"Let's shape the platform together.")}</p>
                   <div className="flex flex-col gap-4 w-full items-center">
                     <a
                       href={discordLink}
                       className="px-6 py-2 rounded-full bg-gray-200 text-gray-800 font-semibold text-lg shadow hover:bg-gray-300 dark:bg-gray-700 dark:text-white dark:hover:bg-gray-600 transition"
                       target="_blank" rel="noopener noreferrer"
                     >
-                      Join the Discord
+                      {t('about.join.button','Join the Discord')}
                     </a>
                     {/*<a*/}
                     {/*  href={stoatLink}*/}
@@ -131,14 +135,14 @@ export default function About() {
                   </div>
                 </div>
                 <div className="rounded-xl shadow p-6 flex flex-col items-center">
-                  <h5 id="donate" className="font-bold mb-4 text-xl text-center">Donate</h5>
-                  <p className="mb-4 text-center custom-link">Support our not-for-profit infrastructure.</p>
+                  <h5 id="donate" className="font-bold mb-4 text-xl text-center">{t('about.donate.title','Donate')}</h5>
+                  <p className="mb-4 text-center custom-link">{t('about.donate.text','Support our not-for-profit infrastructure.')}</p>
                   <div className="flex flex-col gap-4 w-full items-center">
                     <Link
                       href="/support"
                       className="px-6 py-2 rounded-full bg-gray-200 text-gray-800 font-semibold text-lg shadow hover:bg-gray-300 dark:bg-gray-700 dark:text-white dark:hover:bg-gray-600 transition text-center"
                     >
-                      Donation Options
+                      {t('about.donate.button','Donation Options')}
                     </Link>
                     {/*<a*/}
                     {/*  href="https://patreon.com/CompassMeet"*/}
@@ -174,8 +178,8 @@ export default function About() {
                   </div>
                 </div>
                 <div className="rounded-xl shadow p-6 flex flex-col items-center md:col-span-2">
-                  <h5 id="github-repo" className="font-bold mb-4 text-xl text-center">Tell Your Friends and Family</h5>
-                  <p className="mb-4 text-center">Thank you for supporting our mission!</p>
+                  <h5 id="github-repo" className="font-bold mb-4 text-xl text-center">{t('about.final.title','Tell Your Friends and Family')}</h5>
+                  <p className="mb-4 text-center">{t('about.final.text','Thank you for supporting our mission!')}</p>
                 </div>
               </div>
             </div>