diff --git a/src/components/employeeCard/EmployeeCard.tsx b/src/components/employeeCard/EmployeeCard.tsx
index f4d74ac36..056c5b765 100644
--- a/src/components/employeeCard/EmployeeCard.tsx
+++ b/src/components/employeeCard/EmployeeCard.tsx
@@ -24,64 +24,85 @@ export default function EmployeeCard({
     employee.name &&
     employee.email && (
       <div className={styles.employeeWrapper}>
-        <Link
-          href={`/${language}/${employeePageSlug}/${aliasFromEmail(employee.email)}`}
-        >
-          <div className={styles.employeeImage}>
-            <Image
-              src={employee.imageUrl}
-              alt={employee.name}
-              style={{ objectFit: "cover" }}
-              fill={true}
-            />
-          </div>
-        </Link>
-        <div className={styles.employeeInfoWrapper}>
-          <Text type="h4" as="h3">
-            <Link
-              href={`/${language}/${employeePageSlug}/${aliasFromEmail(employee.email)}`}
-              className={styles.employeeNameLink}
-            >
-              {employee.name}
-            </Link>
-          </Text>
-
-          <div className={styles.employeeRole}>
-            {employee.competences.map((competence) => (
-              <Text
-                className={styles.employeeRoleDot}
-                type="labelRegular"
-                key={competence}
+        <div className={styles.employeeWrapper__inner}>
+          <Link
+            href={`/${language}/${employeePageSlug}/${aliasFromEmail(employee.email)}`}
+          >
+            <div className={styles.employeeImage}>
+              <Image
+                src={employee.imageUrl}
+                alt={employee.name}
+                style={{ objectFit: "cover" }}
+                fill={true}
+              />
+            </div>
+          </Link>
+          <div className={styles.employeeInfoWrapper}>
+            <Text type="h4" as="h3">
+              <Link
+                href={`/${language}/${employeePageSlug}/${aliasFromEmail(employee.email)}`}
+                className={styles.employeeNameLink}
               >
-                {competence}
-              </Text>
-            ))}
-          </div>
+                {employee.name}
+              </Link>
+            </Text>
 
-          <Text type="bodyExtraSmall">
-            <a href={`mailto:${employee.email}`}>{employee.email}</a>
-          </Text>
-          {employee.telephone && (
-            <Text type="bodyExtraSmall">
-              <a href={`tel:${employee.telephone}`}>
-                {formatPhoneNumber(employee.telephone)}
-              </a>
+            <div className={styles.employeeRole}>
+              {employee.competences.map((competence) => (
+                <Text
+                  className={styles.employeeRoleDot}
+                  type="labelRegular"
+                  key={competence}
+                  as="span"
+                >
+                  {competence}
+                </Text>
+              ))}
+            </div>
+
+            <Text type="bodyExtraSmall" className={styles.employeeEmail}>
+              <a href={`mailto:${employee.email}`}>{employee.email}</a>
             </Text>
-          )}
+            {employee.telephone && (
+              <Text type="bodyExtraSmall" className={styles.employeePhone}>
+                <a href={`tel:${employee.telephone}`}>
+                  {formatPhoneNumber(employee.telephone)}
+                </a>
+              </Text>
+            )}
+          </div>
         </div>
       </div>
     )
   );
 }
 
-export function EmployeeCardSkeleton() {
+export function EmployeeCardSkeleton({
+  background = "light",
+}: {
+  background?: "light" | "dark";
+}) {
+  const backgroundClass =
+    background === "dark" ? styles["employeeImage--dark"] : "";
+  const backgroundClassText =
+    background === "dark"
+      ? `${styles.skeletonText} ${styles["skeletonText--dark"]}`
+      : styles.skeletonText;
   return (
-    <div className={`${styles.employeeWrapper} ${styles.skeletonCard}`}>
-      <div className={styles.employeeImage} />
-      <div className={`${styles.skeletonText} ${styles.skeletonName}`} />
-      <div className={`${styles.skeletonText} ${styles.skeletonTitle}`} />
-      <div className={`${styles.skeletonText} ${styles.skeletonContact}`} />
-      <div className={`${styles.skeletonText} ${styles.skeletonContact}`} />
+    <div className={styles.employeeWrapper}>
+      <div
+        className={`${styles.employeeWrapper__inner} ${styles.skeletonCard}`}
+      >
+        <div className={`${styles.employeeImage} ${backgroundClass}`} />
+        <div className={styles.employeeInfoWrapper}>
+          <div className={`${backgroundClassText} ${styles.skeletonName}`} />
+          <div className={`${backgroundClassText} ${styles.skeletonTitle}`} />
+          <div
+            className={`${backgroundClassText} ${styles.skeletonAutoMargin} ${styles.skeletonContact}`}
+          />
+          <div className={`${backgroundClassText} ${styles.skeletonContact}`} />
+        </div>
+      </div>
     </div>
   );
 }
diff --git a/src/components/employeeCard/employeeCard.module.css b/src/components/employeeCard/employeeCard.module.css
index c99bd84b2..920269654 100644
--- a/src/components/employeeCard/employeeCard.module.css
+++ b/src/components/employeeCard/employeeCard.module.css
@@ -4,18 +4,6 @@
   gap: 1rem;
 }
 
-.employeeImage {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  background-color: var(--background-bg-dark);
-  border-radius: 12px;
-  height: 125px;
-  width: 50%;
-  padding: 1rem;
-  position: relative;
-}
-
 .employeeInfoWrapper {
   display: flex;
   flex-direction: column;
@@ -32,15 +20,23 @@
 
 .employeeNameLink {
   text-decoration: none;
+  color: currentColor;
+}
+
+.employeeEmail a,
+.employeePhone a {
+  color: currentColor;
 }
 
 .employeeWrapper {
+  container-type: inline-size;
+  container-name: employee;
+}
+.employeeWrapper__inner {
   display: flex;
   flex-direction: column;
-  align-items: flex-start;
-  min-width: 280px;
-  max-width: var(--Text-paragraph, 537px);
-  gap: var(--small, 6px);
+  gap: 1rem;
+  row-gap: var(--small, 6px);
 }
 
 .employeeInfoWrapper {
@@ -48,21 +44,23 @@
   text-wrap: wrap;
   flex-direction: column;
   width: 100%;
-  height: fit-content;
   gap: 0.25rem;
-  align-self: stretch;
 }
 
 .employeeImage {
   display: block;
   height: 206px;
-  min-width: 280px;
+  min-width: 206px;
+  width: 100%;
   max-width: var(--Text-paragraph, 537px);
   position: relative;
 
   background-color: var(--background-bg-dark);
   border-radius: var(--medium, 12px);
 }
+.employeeImage--dark {
+  background-color: var(--background-bg-light-primary);
+}
 
 .employeeInfo {
   color: var(--stroke-tertiary, #5e5e5e);
@@ -73,14 +71,10 @@
 }
 
 .employeeName {
-  color: var(--text-primary, #222424);
+  color: currentColor;
 }
 
 .employeeRole {
-  display: flex;
-  flex-direction: row;
-  overflow: visible;
-  align-self: stretch;
 }
 
 .employeeRoleDot::after {
@@ -101,17 +95,20 @@
   color: var(--text-tertiary, #5e5e5e);
 }
 
-/* Update the skeleton styles */
+/* Skeleton styles */
 .skeletonCard {
   animation: pulse 1.5s cubic-bezier(0.4, 0, 0.6, 1) infinite;
 }
 
 .skeletonText {
   height: 20px;
-  background-color: var(--background-bg-light-primary);
+  background-color: var(--background-bg-dark);
   border-radius: 4px;
   align-self: flex-start;
 }
+.skeletonText--dark {
+  background-color: var(--background-bg-light-primary);
+}
 
 .skeletonName {
   width: 150px;
@@ -134,3 +131,27 @@
     opacity: 0.5;
   }
 }
+
+@container employee (min-width: 380px) {
+  .employeeWrapper__inner {
+    flex-direction: row;
+  }
+  .employeeEmail {
+    margin-top: auto;
+  }
+  .employeeEmail,
+  .employeePhone,
+  .employeeRoleDot {
+    font-size: 1rem;
+  }
+  .employeePhone {
+    margin-top: 0.5rem;
+  }
+  .employeeInfoWrapper {
+    padding: 0.5rem 0;
+  }
+
+  .skeletonAutoMargin {
+    margin-top: auto;
+  }
+}
diff --git a/src/components/sections/contact-box/ContactBox.tsx b/src/components/sections/contact-box/ContactBox.tsx
new file mode 100644
index 000000000..57989e386
--- /dev/null
+++ b/src/components/sections/contact-box/ContactBox.tsx
@@ -0,0 +1,87 @@
+import { Suspense } from "react";
+
+import { EmployeeCardSkeleton } from "src/components/employeeCard/EmployeeCard";
+import Text from "src/components/text/Text";
+import { ChewbaccaEmployee } from "src/types/employees";
+import { fetchEmployeesByEmails } from "src/utils/employees";
+import { ContactBoxSection } from "studio/lib/interfaces/pages";
+import { EMPLOYEE_PAGE_SLUG_QUERY } from "studio/lib/queries/siteSettings";
+import { loadStudioQuery } from "studio/lib/store";
+
+import styles from "./contact-box.module.css";
+import ContactSelector, { EmployeeAndTag } from "./ContactSelector";
+
+export interface ContactBoxProps {
+  section: ContactBoxSection;
+  language: string;
+}
+
+export default async function ContactBox({
+  section,
+  language,
+}: ContactBoxProps) {
+  const employeesPageRes = await loadStudioQuery<{ slug: string }>(
+    EMPLOYEE_PAGE_SLUG_QUERY,
+    {
+      language,
+    },
+  );
+  const employeesPageSlug = employeesPageRes.data.slug;
+
+  const contactPoints = fetchEmployeesByEmails(
+    section.contactPoints.map((contactPoint) => contactPoint.email),
+  ).then((result) =>
+    result.ok
+      ? result.value.map((e) => employeeAndTag(e, section.contactPoints))
+      : [],
+  );
+
+  const backgroundClass =
+    section.background === "light" ? styles["contactBox__inner--light"] : "";
+
+  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={section.background} />}
+          >
+            <ContactSelector
+              employeesPageSlug={employeesPageSlug}
+              contactPoints={contactPoints}
+              language={language}
+              background={section.background}
+            />
+          </Suspense>
+        </div>
+      </div>
+    </section>
+  );
+}
+
+function employeeAndTag(
+  employee: ChewbaccaEmployee,
+  contactPoints: ContactBoxSection["contactPoints"],
+): EmployeeAndTag {
+  const tag =
+    contactPoints.find((contactPoint) => contactPoint.email === employee.email)
+      ?.tag ?? "";
+  return {
+    employee,
+    tag,
+    tagSlug: slugify(tag),
+  };
+}
+function slugify(tag: string) {
+  return tag.toLowerCase().replace(/ /g, "-");
+}
diff --git a/src/components/sections/contact-box/ContactBoxPreview.tsx b/src/components/sections/contact-box/ContactBoxPreview.tsx
new file mode 100644
index 000000000..1c2eb9e62
--- /dev/null
+++ b/src/components/sections/contact-box/ContactBoxPreview.tsx
@@ -0,0 +1,37 @@
+"use client";
+
+import { useQuery } from "@sanity/react-loader";
+import { Suspense } from "react";
+
+import { PreviewProps } from "src/types/preview";
+import { ContactBoxSection, PageBuilder } from "studio/lib/interfaces/pages";
+import { PAGE_QUERY } from "studio/lib/queries/pages";
+
+import ContactBox from "./ContactBox";
+
+export default function ContactBoxPreview({
+  initialData,
+  sectionIndex,
+}: PreviewProps) {
+  const { data: newData } = useQuery<PageBuilder | null>(
+    PAGE_QUERY,
+    { id: initialData.data._id, language: initialData.data.language },
+    { initial: initialData },
+  );
+
+  const section = newData
+    ? (newData.sections.find(
+        (section, index) =>
+          section._type === "contactBox" && index === sectionIndex,
+      ) as ContactBoxSection)
+    : (initialData.data.sections.find(
+        (section, index) =>
+          section._type === "contactBox" && index === sectionIndex,
+      ) as ContactBoxSection);
+
+  return (
+    <Suspense>
+      <ContactBox section={section} language={initialData.data.language} />
+    </Suspense>
+  );
+}
diff --git a/src/components/sections/contact-box/ContactSelector.tsx b/src/components/sections/contact-box/ContactSelector.tsx
new file mode 100644
index 000000000..e9936b78d
--- /dev/null
+++ b/src/components/sections/contact-box/ContactSelector.tsx
@@ -0,0 +1,73 @@
+"use client";
+
+import { use, useState } from "react";
+
+import EmployeeCard from "src/components/employeeCard/EmployeeCard";
+import { Tag } from "src/components/tag";
+import { ChewbaccaEmployee } from "src/types/employees";
+
+import styles from "./contact-box.module.css";
+
+export type EmployeeAndTag = {
+  employee: ChewbaccaEmployee;
+  tag: string;
+  tagSlug: string;
+};
+
+export type ContactSelectorProps = {
+  contactPoints: Promise<EmployeeAndTag[]>;
+  employeesPageSlug: string;
+  language: string;
+  background?: "dark" | "light";
+};
+
+export default function ContactSelector({
+  contactPoints: contactPointsPromise,
+  employeesPageSlug,
+  language,
+  background = "dark",
+}: ContactSelectorProps) {
+  const contactPoints = use(contactPointsPromise);
+
+  const [selectedTag, setSelectedTag] = useState<string | null>(
+    contactPoints[0].tagSlug,
+  );
+
+  return (
+    <div className={styles.contactSelector}>
+      <div className={styles.tagList} role="tablist">
+        {contactPoints.map((contactPoint) => (
+          <Tag
+            key={contactPoint.tagSlug}
+            type="button"
+            role="tab"
+            background={background}
+            aria-selected={selectedTag === contactPoint.tagSlug}
+            aria-controls={`panel-${contactPoint.tagSlug}`}
+            id={`tab-${contactPoint.tagSlug}`}
+            active={selectedTag === contactPoint.tagSlug}
+            onClick={() => setSelectedTag(contactPoint.tagSlug)}
+            text={contactPoint.tag}
+          />
+        ))}
+      </div>
+      <div className={styles.employeeCard}>
+        {contactPoints.map((contactPoint) => (
+          <div
+            key={contactPoint.tagSlug}
+            role="tabpanel"
+            id={`panel-${contactPoint.tagSlug}`}
+            aria-labelledby={`tab-${contactPoint.tagSlug}`}
+            hidden={selectedTag !== contactPoint.tagSlug}
+          >
+            <EmployeeCard
+              employee={contactPoint.employee}
+              employeePageSlug={employeesPageSlug}
+              language={language}
+            />
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}
diff --git a/src/components/sections/contact-box/contact-box.module.css b/src/components/sections/contact-box/contact-box.module.css
new file mode 100644
index 000000000..be33fa6e2
--- /dev/null
+++ b/src/components/sections/contact-box/contact-box.module.css
@@ -0,0 +1,76 @@
+.contactBox {
+  margin: 8rem auto;
+  padding: 0 1rem;
+  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-primary);
+  --_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/tag/index.tsx b/src/components/tag/index.tsx
index 18f16130e..468d3ae93 100644
--- a/src/components/tag/index.tsx
+++ b/src/components/tag/index.tsx
@@ -5,22 +5,30 @@ import Text from "src/components/text/Text";
 import styles from "./tag.module.css";
 
 type TagInner =
-  | {
+  | ({
       type: "button";
       onClick?: () => void;
-    }
-  | {
+    } & JSX.IntrinsicElements["button"])
+  | ({
       type: "link";
       href: string;
-    };
+    } & JSX.IntrinsicElements["link"]);
 
 type TagProps = {
   active?: boolean;
+  background?: "light" | "dark";
   text: string;
 } & TagInner;
 
-export const Tag = ({ text, active = false, ...props }: TagProps) => {
-  const className = `${styles.tag} ${active ? styles["tag--active"] : ""}`;
+export const Tag = ({
+  text,
+  background = "light",
+  active = false,
+  ...props
+}: TagProps) => {
+  const activeClass = active ? styles["tag--active"] : "";
+  const bgDarkClass = background === "dark" ? styles["tag--bgDark"] : "";
+  const className = `${styles.tag} ${activeClass} ${bgDarkClass}`;
   if (props.type === "button") {
     return (
       <button className={className} onClick={props.onClick}>
diff --git a/src/components/tag/tag.module.css b/src/components/tag/tag.module.css
index bb02f5306..31ab01967 100644
--- a/src/components/tag/tag.module.css
+++ b/src/components/tag/tag.module.css
@@ -1,26 +1,51 @@
 .tag {
+  --_tag-background: transparent;
+
+  /* @TODO Should be different property? */
+  --_tag-borderColor: var(--text-primary);
+  --_tag-color: var(--text-primary);
+
   display: flex;
   align-items: center;
   gap: 0.5rem;
   padding: 0.375rem 0.75rem;
-  border: 1px solid var(--text-primary, #222424);
-  background: transparent;
   border-radius: 9999px;
-}
 
+  border: 1px solid var(--_tag-borderColor);
+  background: var(--_tag-background);
+  color: var(--_tag-color);
+}
 .tag:hover {
-  background: var(--background-bg-light-secondary, #eaeaea);
+  --_tag-background: var(--background-bg-light-secondary);
 }
 .tag:active {
-  background: var(--background-bg-light-secondary, #eaeaea);
+  --_tag-borderColor: var(--background-bg-light-secondary);
 }
 .tag:focus {
   outline: 2px solid var(--surface-yellow, #ffd02f);
 }
+
+.tag--bgDark {
+  --_tag-borderColor: var(--background-bg-light-secondary);
+  --_tag-color: var(--text-primary-light);
+}
+.tag--bgDark:active {
+  --_tag-background: var(--background-bg-light-secondary);
+  --_tag-color: var(--text-primary);
+}
+.tag--bgDark:hover {
+  --_tag-color: var(--background-bg-light-secondary);
+  --_tag-background: transparent;
+}
+
 .tag--active {
-  background: var(--background-bg-dark, #2d2d2d);
-  color: var(--text-primary-light);
+  --_tag-background: var(--background-bg-dark);
+  --_tag-color: var(--text-primary-light);
 }
 .tag--active:hover {
-  background: var(--background-bg-dark, #2d2d2d);
+  --_tag-background: var(--background-bg-dark);
+}
+.tag--active.tag--bgDark {
+  --_tag-background: var(--background-bg-light-primary);
+  --_tag-color: var(--text-primary);
 }
diff --git a/src/utils/renderSection.tsx b/src/utils/renderSection.tsx
index 57a98b2d2..03e8d40ba 100644
--- a/src/utils/renderSection.tsx
+++ b/src/utils/renderSection.tsx
@@ -7,6 +7,7 @@ import Callout from "src/components/sections/callout/Callout";
 import CalloutPreview from "src/components/sections/callout/CalloutPreview";
 import CallToAction from "src/components/sections/callToAction/CallToAction";
 import CallToActionPreview from "src/components/sections/callToAction/CallToActionPreview";
+import ContactBox from "src/components/sections/contact-box/ContactBox";
 import Employees from "src/components/sections/employees/Employees";
 import Grid from "src/components/sections/grid/Grid";
 import GridPreview from "src/components/sections/grid/GridPreview";
@@ -219,6 +220,8 @@ const SectionRenderer = ({
       );
     case "grid":
       return renderGridSection(section, sectionIndex, isDraftMode, initialData);
+    case "contactBox":
+      return <ContactBox section={section} language={language} />;
     case "employees":
       return <Employees language={language} section={section} />;
     default:
diff --git a/studio/lib/interfaces/pages.ts b/studio/lib/interfaces/pages.ts
index 3121ac69f..21b745204 100644
--- a/studio/lib/interfaces/pages.ts
+++ b/studio/lib/interfaces/pages.ts
@@ -80,6 +80,19 @@ export interface GridSection {
     image: IImage;
   }[];
 }
+export interface ContactBoxSection {
+  _type: "contactBox";
+  _key: string;
+  basicTitle: string;
+  optionalSubtitle?: string;
+  background: "light" | "dark";
+  contactPoints: {
+    _key: string;
+    _type: string;
+    tag: string;
+    email: string;
+  }[];
+}
 
 export interface EmployeesSection {
   _type: "employees";
@@ -96,6 +109,7 @@ export type Section =
   | TestimonialsSection
   | ImageSection
   | GridSection
+  | ContactBoxSection
   | EmployeesSection;
 
 export interface PageBuilder {
diff --git a/studio/lib/queries/pages.ts b/studio/lib/queries/pages.ts
index 56cef8e98..08f87533f 100644
--- a/studio/lib/queries/pages.ts
+++ b/studio/lib/queries/pages.ts
@@ -36,6 +36,10 @@ const SECTIONS_FRAGMENT = groq`
     },
     _type == "employees" => {
       "basicTitle": ${translatedFieldFragment("basicTitle")}
+    },
+    _type == "contactBox" => {
+      "basicTitle": ${translatedFieldFragment("basicTitle")},
+      "optionalSubtitle": ${translatedFieldFragment("optionalSubtitle")}
     }
   }
 `;
diff --git a/studio/schemas/documents/pageBuilder.ts b/studio/schemas/documents/pageBuilder.ts
index e16cbbd83..ee416ba64 100644
--- a/studio/schemas/documents/pageBuilder.ts
+++ b/studio/schemas/documents/pageBuilder.ts
@@ -5,6 +5,7 @@ import { titleID } from "studio/schemas/fields/text";
 import article from "studio/schemas/objects/sections/article";
 import callout from "studio/schemas/objects/sections/callout";
 import callToAction from "studio/schemas/objects/sections/callToAction";
+import contactBox from "studio/schemas/objects/sections/contact-box";
 import { employees } from "studio/schemas/objects/sections/employees";
 import grid from "studio/schemas/objects/sections/grid";
 import hero from "studio/schemas/objects/sections/hero";
@@ -49,6 +50,7 @@ const pageBuilder = defineType({
         imageSection,
         grid,
         employees,
+        contactBox,
       ],
     }),
   ],
diff --git a/studio/schemas/fields/text.ts b/studio/schemas/fields/text.ts
index a2f8a243d..863ccbfb9 100644
--- a/studio/schemas/fields/text.ts
+++ b/studio/schemas/fields/text.ts
@@ -7,7 +7,7 @@ export enum titleID {
   optional = "optionalTitle",
 }
 
-enum subtitleID {
+export enum subtitleID {
   optional = "optionalSubtitle",
 }
 
diff --git a/studio/schemas/objects/sections/contact-box.ts b/studio/schemas/objects/sections/contact-box.ts
new file mode 100644
index 000000000..0cfcd1771
--- /dev/null
+++ b/studio/schemas/objects/sections/contact-box.ts
@@ -0,0 +1,111 @@
+import { defineField } from "sanity";
+
+import { StringInputWithCharacterCount } from "studio/components/stringInputWithCharacterCount/StringInputWithCharacterCount";
+import { subtitleID, titleID } from "studio/schemas/fields/text";
+import { firstTranslation } from "studio/utils/i18n";
+
+export const contactBoxID = "contactBox";
+
+export enum ContactBoxBackground {
+  Dark = "dark",
+  Light = "light",
+}
+
+const backgroundOptions = [
+  { title: "Dark", value: ContactBoxBackground.Dark },
+  { title: "Light", value: ContactBoxBackground.Light },
+];
+
+export const contactBox = defineField({
+  name: contactBoxID,
+  title: "Contact Box",
+  type: "object",
+  fields: [
+    {
+      name: titleID.basic,
+      type: "internationalizedArrayString",
+      title: "Title",
+      description:
+        "Enter the primary title that will be displayed as large text in contact box.",
+    },
+    {
+      name: subtitleID.optional,
+      type: "internationalizedArrayString",
+      title: "Subtitle",
+      description: "Extra context under the main title.",
+    },
+    {
+      name: "background",
+      title: "Background",
+      type: "string",
+      description:
+        "Select the whether the contact box should have light or dark background.",
+      options: {
+        list: backgroundOptions,
+        layout: "radio",
+      },
+      initialValue: ContactBoxBackground.Dark,
+    },
+    {
+      name: "contactPoints",
+      title: "List of people to contact",
+      description: "List of tags and people to contact within those tags.",
+      type: "array",
+      of: [
+        {
+          type: "object",
+          fields: [
+            defineField({
+              name: "tag",
+              title: "Tag",
+              type: "string",
+              description:
+                "Used button to filter contact points (e.g. Trondheim, Bergen, Oslo).",
+              validation: (rule) => rule.max(30).required(),
+              components: {
+                input: (props) =>
+                  StringInputWithCharacterCount({ ...props, maxCount: 30 }),
+              },
+            }),
+            defineField({
+              name: "email",
+              title: "Enter the email address for contact point",
+              type: "email",
+            }),
+          ],
+          preview: {
+            select: {
+              tag: "tag",
+              email: "email",
+            },
+            prepare({ tag, email }) {
+              return {
+                title: `${tag} (${email})`,
+              };
+            },
+          },
+        },
+      ],
+      validation: (rule) => rule.required(),
+    },
+  ],
+  preview: {
+    select: {
+      title: "basicTitle",
+      contactPoints: "contactPoints",
+    },
+    prepare(selection) {
+      const { title, contactPoints } = selection;
+      return {
+        title: "Contact Box: " + (firstTranslation(title) ?? undefined),
+        subtitle: contactPoints
+          .map(
+            (cp: { tag: string; email: string }) => `(${cp.tag}: ${cp.email})`,
+          )
+          .join(" - "),
+      };
+    },
+  },
+});
+
+export default contactBox;