diff --git a/src/components/customerCases/customerCase/contactInformation/ContactInformation.tsx b/src/components/customerCases/customerCase/contactInformation/ContactInformation.tsx
index 471a2828d..3afa9760d 100644
--- a/src/components/customerCases/customerCase/contactInformation/ContactInformation.tsx
+++ b/src/components/customerCases/customerCase/contactInformation/ContactInformation.tsx
@@ -1,83 +1,33 @@
 import { getTranslations } from "next-intl/server";
 import { Suspense } from "react";
 
-import { EmployeeCardSkeleton } from "src/components/employeeCard/EmployeeCard";
-import Text from "src/components/text/Text";
-import { fetchEmployeesByEmails } from "src/utils/employees";
-import { CompanyLocation } from "studio/lib/interfaces/companyDetails";
-import { COMPANY_LOCATIONS_QUERY } from "studio/lib/queries/admin";
-import { EMPLOYEE_PAGE_SLUG_QUERY } from "studio/lib/queries/siteSettings";
-import { loadStudioQuery } from "studio/lib/store";
+import ContactBoxContent from "src/components/sections/contact-box/ContactBoxContent";
 
-import styles from "./contactInformation.module.css";
-import ContactSelector, { ContactByLocationMap } from "./ContactSelector";
+import { fetchLocationsWithContact, getEmployeePageSlug } from "./api";
 
 interface ContactInformationProps {
   language: string;
 }
 
-async function fetchContactByLocationMap(
-  companyLocations: CompanyLocation[],
-): Promise<ContactByLocationMap> {
-  const contactByLocation: ContactByLocationMap = {};
-  for (const location of companyLocations) {
-    if (
-      location.contactPerson === undefined ||
-      location.contactPerson.length === 0
-    ) {
-      continue;
-    }
-    const contactRes = await fetchEmployeesByEmails([location.contactPerson]);
-    if (!contactRes.ok || contactRes.value.length === 0) {
-      continue;
-    }
-    contactByLocation[location._id] = contactRes.value[0];
-  }
-  return contactByLocation;
-}
-
 export default async function ContactInformation({
   language,
 }: ContactInformationProps) {
-  const employeePageSlug = (
-    await loadStudioQuery<{ slug: string } | null>(EMPLOYEE_PAGE_SLUG_QUERY, {
-      language,
-    })
-  ).data?.slug;
-  const companyLocations = (
-    await loadStudioQuery<CompanyLocation[]>(COMPANY_LOCATIONS_QUERY, {})
-  ).data;
-  const contactByLocation = await fetchContactByLocationMap(companyLocations);
-  const locationIdsWithContact = Object.keys(contactByLocation);
-  const locationsWithContact = companyLocations.filter((location) =>
-    locationIdsWithContact.includes(location._id),
-  );
+  const employeePageSlug = await getEmployeePageSlug(language);
+  const contactPoints = fetchLocationsWithContact();
+
   const t = await getTranslations("contact_information");
   return (
-    <>
-      <section className={styles.contactBox}>
-        <div
-          className={`${styles.contactBox__inner} ${styles["contactBox__inner--light"]}`}
-        >
-          <div className={styles.textContent}>
-            <Text type="h3" as="h2">
-              {t("help")}
-            </Text>
-            <Text type="bodyBig">{t("contact_sale")} </Text>
-          </div>
-          <div className={styles.contactSelectorWrapper}>
-            <Suspense fallback={<EmployeeCardSkeleton background={"light"} />}>
-              <ContactSelector
-                language={language}
-                locations={locationsWithContact}
-                contactByLocation={contactByLocation}
-                employeePageSlug={employeePageSlug}
-                background={"light"}
-              />
-            </Suspense>
-          </div>
-        </div>
-      </section>
-    </>
+    <Suspense fallback={<div>Loading...</div>}>
+      <ContactBoxContent
+        data={{
+          basicTitle: t("help"),
+          optionalSubtitle: t("contact_sale"),
+          background: "light",
+        }}
+        language={language}
+        employeesPageSlug={employeePageSlug}
+        contactPoints={contactPoints}
+      />
+    </Suspense>
   );
 }
diff --git a/src/components/customerCases/customerCase/contactInformation/ContactSelector.tsx b/src/components/customerCases/customerCase/contactInformation/ContactSelector.tsx
deleted file mode 100644
index 507db68d1..000000000
--- a/src/components/customerCases/customerCase/contactInformation/ContactSelector.tsx
+++ /dev/null
@@ -1,74 +0,0 @@
-"use client";
-
-import { useState } from "react";
-
-import EmployeeCard from "src/components/employeeCard/EmployeeCard";
-import { Tag } from "src/components/tag";
-import { ChewbaccaEmployee } from "src/types/employees";
-import { CompanyLocation } from "studio/lib/interfaces/companyDetails";
-
-import styles from "./contactInformation.module.css";
-
-export type ContactByLocationMap = {
-  [locationId: string]: ChewbaccaEmployee;
-};
-
-export interface ContactSelectorProps {
-  language: string;
-  locations: CompanyLocation[];
-  contactByLocation: ContactByLocationMap;
-  employeePageSlug?: string;
-  background: "dark" | "light";
-}
-
-export default function ContactSelector({
-  language,
-  locations,
-  contactByLocation,
-  employeePageSlug,
-  background = "light",
-}: ContactSelectorProps) {
-  const locationIds = Object.keys(contactByLocation);
-
-  const [selectedLocationId, setSelectedLocationId] = useState<string | null>(
-    locationIds[0],
-  );
-
-  if (locationIds.length === 0) {
-    return;
-  }
-
-  const selectedOrDefaultLocationId = selectedLocationId ?? locationIds[0];
-
-  return (
-    <>
-      <div className={styles.contactSelector}>
-        <div className={styles.tagList} role="tablist">
-          {locations.map((location) => (
-            <Tag
-              key={location._id}
-              type="button"
-              role="tab"
-              background={background}
-              aria-selected={selectedLocationId === location._id}
-              aria-controls={`panel-${location._id}`}
-              id={`tab-${location._id}`}
-              active={selectedLocationId === location._id}
-              onClick={() => setSelectedLocationId(location._id)}
-              text={location.companyLocationName}
-            />
-          ))}
-        </div>
-        <div className={styles.employeeCard}>
-          <div>
-            <EmployeeCard
-              language={language}
-              employee={contactByLocation[selectedOrDefaultLocationId]}
-              employeePageSlug={employeePageSlug}
-            />
-          </div>
-        </div>
-      </div>
-    </>
-  );
-}
diff --git a/src/components/customerCases/customerCase/contactInformation/api.ts b/src/components/customerCases/customerCase/contactInformation/api.ts
new file mode 100644
index 000000000..9d8264c20
--- /dev/null
+++ b/src/components/customerCases/customerCase/contactInformation/api.ts
@@ -0,0 +1,65 @@
+import { EmployeeAndMetadata } from "src/components/sections/contact-box/types";
+import { fetchEmployeesByEmails } from "src/utils/employees";
+import { CompanyLocation } from "studio/lib/interfaces/companyDetails";
+import { COMPANY_LOCATIONS_QUERY } from "studio/lib/queries/admin";
+import { EMPLOYEE_PAGE_SLUG_QUERY } from "studio/lib/queries/siteSettings";
+import { loadStudioQuery } from "studio/lib/store";
+
+export async function getEmployeePageSlug(language: string) {
+  const employeePageSlug =
+    (
+      await loadStudioQuery<{ slug: string } | null>(EMPLOYEE_PAGE_SLUG_QUERY, {
+        language,
+      })
+    ).data?.slug ?? "";
+
+  return employeePageSlug;
+}
+
+export async function fetchLocationsWithContact(): Promise<
+  EmployeeAndMetadata[]
+> {
+  const companyLocations = (
+    await loadStudioQuery<CompanyLocation[]>(COMPANY_LOCATIONS_QUERY, {})
+  ).data;
+  const contactByLocation = await fetchContactByLocationMap(companyLocations);
+
+  return contactByLocation;
+}
+
+async function fetchContactByLocationMap(
+  companyLocations: CompanyLocation[],
+): Promise<EmployeeAndMetadata[]> {
+  const uniqueEmails = Array.from(
+    new Set(
+      companyLocations
+        .map((location) => location.contactPerson)
+        .filter((contactPerson) => contactPerson !== undefined),
+    ),
+  );
+
+  const contactRes = await fetchEmployeesByEmails(uniqueEmails);
+
+  if (!contactRes.ok) {
+    return [];
+  }
+
+  const contactByLocation: EmployeeAndMetadata[] = [];
+
+  for (const location of companyLocations) {
+    const employee = contactRes.value.find(
+      (employee) => employee.email === location.contactPerson,
+    );
+
+    if (!employee || !location?.companyLocationName) {
+      continue;
+    }
+
+    contactByLocation.push({
+      employee,
+      tag: location.companyLocationName,
+      tagSlug: location._id,
+    });
+  }
+  return contactByLocation;
+}
diff --git a/src/components/customerCases/customerCase/contactInformation/contactInformation.module.css b/src/components/customerCases/customerCase/contactInformation/contactInformation.module.css
deleted file mode 100644
index c79175a9d..000000000
--- a/src/components/customerCases/customerCase/contactInformation/contactInformation.module.css
+++ /dev/null
@@ -1,74 +0,0 @@
-.contactBox {
-  max-width: var(--max-content-width-large);
-}
-
-.contactBox__inner {
-  --_contactBox__background: var(--background-bg-dark);
-  --_contactBox__color: var(--text-primary-light);
-
-  display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
-
-  padding: 1.5rem 3rem;
-  flex-direction: column;
-  justify-content: flex-end;
-  align-items: flex-start;
-  gap: var(--Padding-l, 48px);
-  align-self: stretch;
-
-  border-radius: var(--radius-small);
-  background: var(--_contactBox__background);
-  color: var(--_contactBox__color);
-}
-.contactBox__inner--light {
-  --_contactBox__background: var(--background-bg-light-secondary);
-  --_contactBox__color: var(--text-primary);
-}
-
-.textContent {
-  height: 100%;
-  display: flex;
-  flex-direction: column;
-  gap: 1rem;
-
-  justify-content: flex-end;
-}
-
-.contactSelectorWrapper {
-  container-type: inline-size;
-  container-name: contactSelectorWrapper;
-}
-
-.contactSelector {
-  display: flex;
-  gap: 1rem;
-}
-
-.tagList {
-  display: flex;
-  flex-direction: column;
-  gap: 0.75rem;
-
-  align-items: flex-start;
-  min-width: 120px;
-}
-
-.employeeCard {
-  flex: 1;
-}
-
-@media (max-width: 400px) {
-  .contactBox__inner {
-    padding: 1rem 1rem;
-  }
-}
-
-@container contactSelectorWrapper (max-width: 350px) {
-  .contactSelector {
-    flex-direction: column;
-  }
-
-  .tagList {
-    flex-direction: row;
-  }
-}
diff --git a/src/components/sections/contact-box/ContactBox.tsx b/src/components/sections/contact-box/ContactBox.tsx
index 5928ed432..d319832a8 100644
--- a/src/components/sections/contact-box/ContactBox.tsx
+++ b/src/components/sections/contact-box/ContactBox.tsx
@@ -1,12 +1,7 @@
-import { Suspense } from "react";
-
-import { EmployeeCardSkeleton } from "src/components/employeeCard/EmployeeCard";
-import Text from "src/components/text/Text";
 import { ContactBoxSection } from "studio/lib/interfaces/pages";
 
 import { fetchEmployeesWithTags, getEmployeesPageSlug } from "./api";
-import styles from "./contact-box.module.css";
-import ContactSelector from "./ContactSelector";
+import ContactBoxContent from "./ContactBoxContent";
 
 export interface ContactBoxProps {
   section: ContactBoxSection;
@@ -25,38 +20,12 @@ export default async function ContactBox({
 
   const contactPoints = fetchEmployeesWithTags(section.contactPoints);
 
-  const backgroundClass = styles[`contactBox__inner--${section.background}`];
-  const employeeCardBackground =
-    section.background === "transparent" ? "light" : section.background;
-
   return (
-    <section className={styles.contactBox}>
-      <div className={`${styles.contactBox__inner} ${backgroundClass}`}>
-        <div className={styles.textContent}>
-          <Text type="h3" as="h2">
-            {section.basicTitle}
-          </Text>
-
-          {section.optionalSubtitle && (
-            <Text type="bodyBig">{section.optionalSubtitle}</Text>
-          )}
-        </div>
-
-        <div className={styles.contactSelectorWrapper}>
-          <Suspense
-            fallback={
-              <EmployeeCardSkeleton background={employeeCardBackground} />
-            }
-          >
-            <ContactSelector
-              employeesPageSlug={employeesPageSlug}
-              contactPoints={contactPoints}
-              language={language}
-              background={employeeCardBackground}
-            />
-          </Suspense>
-        </div>
-      </div>
-    </section>
+    <ContactBoxContent
+      data={section}
+      language={language}
+      employeesPageSlug={employeesPageSlug}
+      contactPoints={contactPoints}
+    />
   );
 }
diff --git a/src/components/sections/contact-box/ContactBoxContent.tsx b/src/components/sections/contact-box/ContactBoxContent.tsx
new file mode 100644
index 000000000..45cd64548
--- /dev/null
+++ b/src/components/sections/contact-box/ContactBoxContent.tsx
@@ -0,0 +1,61 @@
+import { Suspense } from "react";
+
+import { EmployeeCardSkeleton } from "src/components/employeeCard/EmployeeCard";
+import Text from "src/components/text/Text";
+
+import styles from "./contact-box.module.css";
+import ContactSelector from "./ContactSelector";
+import { EmployeeAndMetadata } from "./types";
+
+export interface ContactBoxProps {
+  data: {
+    basicTitle: string;
+    optionalSubtitle?: string;
+    background: "light" | "dark" | "transparent";
+  };
+  language: string;
+  employeesPageSlug: string;
+  contactPoints: Promise<EmployeeAndMetadata[]>;
+}
+
+export default async function ContactBoxContent({
+  data,
+  language,
+  employeesPageSlug,
+  contactPoints,
+}: ContactBoxProps) {
+  const backgroundClass = styles[`contactBox__inner--${data.background}`];
+  const employeeCardBackground =
+    data.background === "transparent" ? "light" : data.background;
+
+  return (
+    <section className={styles.contactBox}>
+      <div className={`${styles.contactBox__inner} ${backgroundClass}`}>
+        <div className={styles.textContent}>
+          <Text type="h3" as="h2">
+            {data.basicTitle}
+          </Text>
+
+          {data.optionalSubtitle && (
+            <Text type="bodyBig">{data.optionalSubtitle}</Text>
+          )}
+        </div>
+
+        <div className={styles.contactSelectorWrapper}>
+          <Suspense
+            fallback={
+              <EmployeeCardSkeleton background={employeeCardBackground} />
+            }
+          >
+            <ContactSelector
+              employeesPageSlug={employeesPageSlug}
+              contactPoints={contactPoints}
+              language={language}
+              background={employeeCardBackground}
+            />
+          </Suspense>
+        </div>
+      </div>
+    </section>
+  );
+}
diff --git a/src/components/sections/contact-box/contact-box.module.css b/src/components/sections/contact-box/contact-box.module.css
index 1c6650e8e..66d069bb6 100644
--- a/src/components/sections/contact-box/contact-box.module.css
+++ b/src/components/sections/contact-box/contact-box.module.css
@@ -1,6 +1,7 @@
 .contactBox {
   margin: 1rem auto;
   padding: 0;
+  width: 100%;
   max-width: var(--max-content-width-large);
 }
 
@@ -36,8 +37,6 @@
   display: flex;
   flex-direction: column;
   gap: 1rem;
-
-  justify-content: flex-end;
 }
 
 .contactSelectorWrapper {
diff --git a/src/components/sections/contact-box/types.ts b/src/components/sections/contact-box/types.ts
index bf454fc68..815b6dc48 100644
--- a/src/components/sections/contact-box/types.ts
+++ b/src/components/sections/contact-box/types.ts
@@ -4,5 +4,5 @@ export type EmployeeAndMetadata = {
   employee: ChewbaccaEmployee;
   tag: string;
   tagSlug: string;
-  overrideTitle: string;
+  overrideTitle?: string;
 };