diff --git a/frontend/src/pages/ContactPage.tsx b/frontend/src/pages/ContactPage.tsx
index e1debea..4463819 100644
--- a/frontend/src/pages/ContactPage.tsx
+++ b/frontend/src/pages/ContactPage.tsx
@@ -9,13 +9,30 @@ import { AddItemButton, EditableItem } from '../admin/Editable'
 export function ContactPage() {
   const { offices } = useSite()
   const { t } = useLang()
-  
+
   return (
     <>
       <PageHero pageKey="contact" />
 
-      <section className="bg-ink py-2" aria-label={t('officesAria')}>
-      
+      <section className="bg-ink py-24" aria-label={t('officesAria')}>
+        <div className="mx-auto grid max-w-site gap-6 px-6 md:grid-cols-3 lg:px-10">
+          {offices.map((office, i) => (
+            <Reveal key={office.id} delay={0.06 * i} className="h-full">
+              <EditableItem resource="offices" item={office} className="h-full">
+              <article className="flex h-full flex-col border border-ivory/10 bg-char px-8 py-12 text-center transition-all duration-300 ease-out hover:-translate-y-2 hover:border-copper/40 hover:shadow-lift transform-gpu will-change-transform">
+                <h2 className="text-2xl font-bold text-copper">{office.city}</h2>
+                <p className="mt-6 text-sm font-light leading-9 text-ivory/70">{office.address}</p>
+                <div className="mt-auto pt-10">
+                  <p className="border-t border-ivory/10 pt-6 text-xs font-light text-ivory/50">
+                    {office.hours}
+                  </p>
+                </div>
+              </article>
+              </EditableItem>
+            </Reveal>
+          ))}
+          <AddItemButton resource="offices" />
+        </div>
       </section>
 
       <ContactSection />