diff --git a/messages/en.json b/messages/en.json
index 2e56ddb0d..f3d6e18ae 100644
--- a/messages/en.json
+++ b/messages/en.json
@@ -55,5 +55,12 @@
   "job_posting": {
     "office": "Office",
     "all": "All"
+  },
+  "footer": {
+    "text": "We have multiple offices in Norway and Sweden. Feel free to drop by for a cup of coffee or just a friendly chat.",
+    "mainMenu": "Main menu",
+    "other": "Other",
+    "socialMedia": "Follow us",
+    "contact": "General contact"
   }
 }
diff --git a/messages/no.json b/messages/no.json
index 1a142a983..de209c877 100644
--- a/messages/no.json
+++ b/messages/no.json
@@ -54,5 +54,12 @@
   "job_posting": {
     "office": "Kontor",
     "all": "Alle"
+  },
+  "footer": {
+    "text": "Vi har flere kontorer i Norge og Sverige. Kom gjerne innom for en kopp kaffe eller bare en hyggelig prat.",
+    "mainMenu": "Hovedmeny",
+    "other": "Annet",
+    "socialMedia": "Følg oss",
+    "contact": "Generell kontakt"
   }
 }
diff --git a/messages/se.json b/messages/se.json
index e88f3a4b3..600f47d2c 100644
--- a/messages/se.json
+++ b/messages/se.json
@@ -54,5 +54,12 @@
   "job_posting": {
     "office": "Kontor",
     "all": "Alla"
+  },
+  "footer": {
+    "text": "Vi har flera kontor i Sverige och Norge. Du är välkommen att komma förbi för en kopp kaffe eller bara en trevlig pratstund.",
+    "mainMenu": "Huvudmeny",
+    "other": "Övrigt",
+    "socialMedia": "Följ oss",
+    "contact": "Kontakt"
   }
 }
diff --git a/src/app/(main)/[locale]/layout.tsx b/src/app/(main)/[locale]/layout.tsx
index 61d2842a8..38e274c82 100644
--- a/src/app/(main)/[locale]/layout.tsx
+++ b/src/app/(main)/[locale]/layout.tsx
@@ -10,13 +10,17 @@ import SkipToMain from "src/components/skipToMain/SkipToMain";
 import { Locale, routing } from "src/i18n/routing";
 import { getDraftModeInfo } from "src/utils/draftmode";
 import { BrandAssets } from "studio/lib/interfaces/brandAssets";
-import { CompanyInfo } from "studio/lib/interfaces/companyDetails";
+import {
+  CompanyInfo,
+  CompanyLocation,
+} from "studio/lib/interfaces/companyDetails";
 import { LegalDocument } from "studio/lib/interfaces/legalDocuments";
 import { Navigation } from "studio/lib/interfaces/navigation";
 import { SocialMediaProfiles } from "studio/lib/interfaces/socialMedia";
 import LiveVisualEditing from "studio/lib/loaders/AutomaticVisualEditing";
 import {
   COMPANY_INFO_QUERY,
+  COMPANY_LOCATIONS_QUERY,
   LEGAL_DOCUMENTS_BY_LANG_QUERY,
 } from "studio/lib/queries/admin";
 import {
@@ -57,6 +61,7 @@ export default async function Layout({
     initialSoMe,
     initialLegal,
     initialBrandAssets,
+    initialCompanyLocations,
   ] = await Promise.all([
     loadStudioQuery<Navigation>(
       NAV_QUERY,
@@ -75,6 +80,11 @@ export default async function Layout({
       { perspective },
     ),
     loadStudioQuery<BrandAssets>(BRAND_ASSETS_QUERY, {}, { perspective }),
+    loadStudioQuery<CompanyLocation[]>(
+      COMPANY_LOCATIONS_QUERY,
+      {},
+      { perspective },
+    ),
   ]);
 
   const hasNavData = hasValidData(initialNav.data);
@@ -95,13 +105,15 @@ export default async function Layout({
               initialSoMe={initialSoMe}
               initialLegal={initialLegal}
               language={params.locale}
+              initialCompanyLocations={initialCompanyLocations}
             />
           ) : (
             <Footer
               navigationData={initialNav.data}
               legalData={initialLegal.data}
               companyInfo={initialCompanyInfo.data}
-              brandAssets={initialBrandAssets.data}
+              companyLocations={initialCompanyLocations.data}
+              /* brandAssets={initialBrandAssets.data} */
               soMeData={initialSoMe.data}
             />
           )}
diff --git a/src/components/link/CustomLink.tsx b/src/components/link/CustomLink.tsx
index d30fb9dfb..81a6c02b1 100644
--- a/src/components/link/CustomLink.tsx
+++ b/src/components/link/CustomLink.tsx
@@ -6,7 +6,12 @@ import { ILink } from "studio/lib/interfaces/navigation";
 
 import styles from "./link.module.css";
 
-type ComponentLinkType = "link" | "headerLink" | "footerLink";
+type ComponentLinkType =
+  | "link"
+  | "headerLink"
+  | "footerLink"
+  | "footerLinkNew"
+  | "footerLinkGrey";
 
 interface ICustomLink {
   type?: ComponentLinkType;
@@ -80,7 +85,20 @@ const CustomLink = ({
             rel={rel}
             aria-label={link.ariaLabel}
           >
-            <span className={styles.dot}></span>
+            {link.linkTitle}
+          </Link>
+        )
+      );
+    case "footerLinkGrey":
+      return (
+        link.linkTitle && (
+          <Link
+            className={styles.footerLinkGrey}
+            href={href}
+            target={target}
+            rel={rel}
+            aria-label={link.ariaLabel}
+          >
             {link.linkTitle}
           </Link>
         )
diff --git a/src/components/link/link.module.css b/src/components/link/link.module.css
index 43eff49b1..f9058b97e 100644
--- a/src/components/link/link.module.css
+++ b/src/components/link/link.module.css
@@ -175,19 +175,30 @@
 }
 
 .footerLink {
-  color: var(--text-primary-light);
+  color: var(--stroke-primary);
   cursor: pointer;
   text-decoration: none;
-  font-family: var(--font-britti-sans);
-  font-size: 2rem;
-  font-weight: 400;
+  font-size: 1.125rem;
+  font-style: normal;
+  font-weight: 500;
+  line-height: 120%;
 
   &:hover {
-    font-weight: 500;
+    text-decoration: underline;
   }
+}
 
-  &:active {
-    color: var(--background-bg-light-secondary);
+.footerLinkGrey {
+  color: var(--text-tertiary);
+  cursor: pointer;
+  font-family: var(--font-britti-sans);
+  font-size: 0.875rem;
+  font-weight: 400;
+  text-decoration-line: underline;
+  text-decoration-style: solid;
+
+  &:hover {
+    color: var(--text-primary);
   }
 }
 
diff --git a/src/components/navigation/footer/Footer.tsx b/src/components/navigation/footer/Footer.tsx
index 17303cad5..04ac21268 100644
--- a/src/components/navigation/footer/Footer.tsx
+++ b/src/components/navigation/footer/Footer.tsx
@@ -1,90 +1,156 @@
-"use client";
-
+import Image from "next/image";
+import Link from "next/link";
+import { useTranslations } from "next-intl";
 import { ReactNode } from "react";
 
-import { SanityImage } from "src/components/image/SanityImage";
 import CustomLink from "src/components/link/CustomLink";
 import SoMeLink from "src/components/link/SoMeLink";
-import Text from "src/components/text/Text";
-import { BrandAssets } from "studio/lib/interfaces/brandAssets";
-import { CompanyInfo } from "studio/lib/interfaces/companyDetails";
+import {
+  CompanyInfo,
+  CompanyLocation,
+} from "studio/lib/interfaces/companyDetails";
 import { LegalDocument } from "studio/lib/interfaces/legalDocuments";
-import { ILink, LinkType, Navigation } from "studio/lib/interfaces/navigation";
+import { ILink, Navigation } from "studio/lib/interfaces/navigation";
 import {
   SocialMediaLink,
   SocialMediaProfiles,
 } from "studio/lib/interfaces/socialMedia";
 
 import styles from "./footer.module.css";
+import { FooterIllustration } from "./footerIllustration/FooterIllustration";
+import { FooterSection } from "./footerSection/FooterSection";
+import { TextTertiary } from "./textTertiary/TextTertiary";
 
 export interface IFooter {
   navigationData: Navigation;
-  companyInfo: CompanyInfo;
-  brandAssets: BrandAssets;
   soMeData: SocialMediaProfiles | null;
   legalData: LegalDocument[];
+  companyInfo: CompanyInfo;
+  companyLocations: CompanyLocation[];
 }
 
 const Footer = ({
   navigationData,
-  companyInfo,
-  brandAssets,
   soMeData,
-  legalData,
+  /* legalData, */
+  companyInfo,
+  companyLocations,
 }: IFooter) => {
-  const currentYear = new Date().getFullYear();
+  const t = useTranslations("footer");
 
   return (
     <footer className={styles.footer}>
-      {brandAssets?.secondaryLogo && (
-        <div className={styles.logo}>
-          <SanityImage image={brandAssets.secondaryLogo} />
-        </div>
-      )}
-      <nav className={styles.nav}>
-        {renderLinks(navigationData)}
-        {soMeData && renderSoMe(navigationData, soMeData)}
-      </nav>
-      <ul className={styles.credits}>
-        <li key="credit-legal-key-1">
-          <Text className={styles.whiteColor}>
-            {`© ${currentYear} ${companyInfo.companyName}`}
-          </Text>
-        </li>
-        {legalData?.map((legal) => {
-          const link: ILink = {
-            _key: legal._id,
-            _type: legal._type,
-            linkTitle: legal.basicTitle,
-            linkType: LinkType.Internal,
-            internalLink: {
-              _ref: legal.slug.current,
-            },
-            language: legal.language,
-          };
-          return (
-            <li key={legal._id}>
-              <CustomLink link={link} type="footerLink" />
+      <FooterIllustration color={"#FFD02F"} />
+      <div className={styles.footerContent}>
+        <nav className={styles.nav}>
+          <div className={styles.flex_container_left}>
+            <div>
+              <TextTertiary>{t("text")}</TextTertiary>
+              {/*  TODO:: Get offices and map through. Should these link to something?  */}
+              <ul className={styles.offices}>
+                {companyLocations.map((location) => (
+                  <li
+                    key={location.companyLocationName}
+                    className={styles.dotSeparator}
+                  >
+                    {location.companyLocationName}
+                  </li>
+                ))}
+              </ul>
+            </div>
+            <div>
+              <FooterSection title={t("contact")}>
+                <Link
+                  href={`mailto:${companyInfo.companyEmail}`}
+                  className={styles.contactInfo}
+                >
+                  {companyInfo.companyEmail}
+                </Link>
+              </FooterSection>
+            </div>
+          </div>
+          <div className={styles.flex_container_right}>
+            {navigationData.main && (
+              <FooterSection title={t("mainMenu")}>
+                {renderPageLinks(navigationData)}
+              </FooterSection>
+            )}
+            {navigationData.footer && (
+              <FooterSection title={t("other")}>
+                {renderOtherLinks(navigationData)}
+              </FooterSection>
+            )}
+
+            {soMeData && (
+              <FooterSection title={t("socialMedia")}>
+                {renderSoMe(navigationData, soMeData)}
+              </FooterSection>
+            )}
+          </div>
+        </nav>
+        <Image
+          className={styles.logo}
+          src={"/_assets/variant-logo.svg"}
+          alt={"variant logo"}
+          width={310}
+          height={74}
+        />
+
+        <div className={styles.grey_links}>
+          {/* <ul className={styles.grey_links__language}>
+            <li>
+              <CustomLink link={dummyLink("English")} type="footerLink" />
             </li>
-          );
-        })}
-      </ul>
+          </ul> */}
+          {/* THERE ARE NO LEGAL DOCUMENTS FOR LAUNCH, REINSTATE WHEN WE HAVE LEGAL DOCUMENTS TO SHOW */}
+          {/* <ul className={styles.credits}>
+            {legalData?.map((legal) => {
+              const link: ILink = {
+                _key: legal._id,
+                _type: legal._type,
+                linkTitle: legal.basicTitle,
+                linkType: LinkType.Internal,
+                internalLink: {
+                  _ref: legal.slug.current,
+                },
+                language: legal.language,
+              };
+              return (
+                <li key={legal._id}>
+                  <CustomLink link={link} type="footerLink" />
+                </li>
+              );
+            })}
+          </ul> */}
+
+          <span className={styles.organisationNumber}>
+            Org. nr. {companyInfo.organizationNumber}
+          </span>
+        </div>
+      </div>
     </footer>
   );
 };
 
-const renderLinks = (data: Navigation) => {
-  const contentSections = filterSectionsByType(data, "content");
-  const links = contentSections?.[0]?.linksAndContent;
-  return (
-    links &&
-    renderList(
-      links.map((link: ILink) => (
+const renderOtherLinks = (data: Navigation) => {
+  return renderList(
+    data.footer?.map((footer) =>
+      footer.linksAndContent?.map((link: ILink) => (
         <li key={link._key}>
           <CustomLink link={link} type="footerLink" />
         </li>
       )),
-    )
+    ),
+  );
+};
+
+const renderPageLinks = (data: Navigation) => {
+  return renderList(
+    data.main.map((p: ILink) => (
+      <li key={p._key}>
+        <CustomLink link={p} type="footerLink" />
+      </li>
+    )),
   );
 };
 
diff --git a/src/components/navigation/footer/FooterPreview.tsx b/src/components/navigation/footer/FooterPreview.tsx
index 5a2c044da..3928c80dc 100644
--- a/src/components/navigation/footer/FooterPreview.tsx
+++ b/src/components/navigation/footer/FooterPreview.tsx
@@ -1,13 +1,18 @@
 "use client";
 import { QueryResponseInitial, useQuery } from "@sanity/react-loader";
 
+import Footer from "src/components/navigation/footer/Footer";
 import { BrandAssets } from "studio/lib/interfaces/brandAssets";
-import { CompanyInfo } from "studio/lib/interfaces/companyDetails";
+import {
+  CompanyInfo,
+  CompanyLocation,
+} from "studio/lib/interfaces/companyDetails";
 import { LegalDocument } from "studio/lib/interfaces/legalDocuments";
 import { Navigation } from "studio/lib/interfaces/navigation";
 import { SocialMediaProfiles } from "studio/lib/interfaces/socialMedia";
 import {
   COMPANY_INFO_QUERY,
+  COMPANY_LOCATIONS_QUERY,
   LEGAL_DOCUMENTS_BY_LANG_QUERY,
 } from "studio/lib/queries/admin";
 import {
@@ -16,8 +21,6 @@ import {
   SOME_PROFILES_QUERY,
 } from "studio/lib/queries/siteSettings";
 
-import Footer from "./Footer";
-
 function useInitialData<T>(
   query: string,
   initialData: QueryResponseInitial<T>,
@@ -33,6 +36,7 @@ export default function FooterPreview({
   initialSoMe,
   initialLegal,
   language,
+  initialCompanyLocations,
 }: {
   initialNav: QueryResponseInitial<Navigation>;
   initialCompanyInfo: QueryResponseInitial<CompanyInfo>;
@@ -40,6 +44,7 @@ export default function FooterPreview({
   initialSoMe: QueryResponseInitial<SocialMediaProfiles | null>;
   initialLegal: QueryResponseInitial<LegalDocument[] | null>;
   language: string;
+  initialCompanyLocations: QueryResponseInitial<CompanyLocation[]>;
 }) {
   const { data: newNav } = useQuery(
     NAV_QUERY,
@@ -49,6 +54,11 @@ export default function FooterPreview({
   const newCompanyInfo = useInitialData(COMPANY_INFO_QUERY, initialCompanyInfo);
   const newBrandAssets = useInitialData(BRAND_ASSETS_QUERY, initialBrandAssets);
   const newSoMedata = useInitialData(SOME_PROFILES_QUERY, initialSoMe);
+  const newCompanyLocations = useInitialData(
+    COMPANY_LOCATIONS_QUERY,
+    initialCompanyLocations,
+  );
+
   const { data: newLegal } = useQuery(
     LEGAL_DOCUMENTS_BY_LANG_QUERY,
     { language },
@@ -59,11 +69,13 @@ export default function FooterPreview({
     newCompanyInfo &&
     newBrandAssets &&
     newSoMedata &&
-    newLegal && (
+    newLegal &&
+    newCompanyLocations && (
       <Footer
         navigationData={newNav}
         companyInfo={newCompanyInfo}
-        brandAssets={newBrandAssets}
+        companyLocations={newCompanyLocations}
+        /* brandAssets={newBrandAssets} */
         soMeData={newSoMedata}
         legalData={newLegal}
       />
diff --git a/src/components/navigation/footer/footer.module.css b/src/components/navigation/footer/footer.module.css
index 01e3d9790..a2f110b71 100644
--- a/src/components/navigation/footer/footer.module.css
+++ b/src/components/navigation/footer/footer.module.css
@@ -1,32 +1,25 @@
 .footer {
-  color: var(--background-bg-light-primary);
   display: flex;
-  padding: 3rem;
   flex-direction: column;
-  align-items: flex-start;
-  gap: 2.5rem;
+  justify-content: center;
+  padding: 1rem;
 
-  @media (min-width: 1024px) {
-    padding: 5rem 5rem 2.5rem 5rem;
-    gap: 3rem;
+  @media (max-width: 425px) {
+    padding: 0;
   }
 }
 
-.logo {
-  height: 1.8125rem;
-}
-
-.nav {
-  display: flex;
-
-  @media (max-width: 1024px) {
-    flex-direction: column;
-    gap: 2rem;
+.footerContent {
+  background-color: var(--background-bg-light-secondary);
+  border-radius: 0.75rem;
+  padding: 1.5rem;
+  padding-bottom: 2.25rem;
+  @media (min-width: 802px) {
+    padding: 2.25rem;
   }
 
-  @media (min-width: 1024px) {
-    width: -webkit-fill-available;
-    justify-content: flex-end;
+  @media (min-width: 1408px) {
+    padding: 3rem;
   }
 }
 
@@ -50,10 +43,91 @@
   }
 }
 
+.nav {
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  gap: 3rem;
+  flex-wrap: wrap;
+
+  @media (min-width: 1408px) {
+    flex-direction: row;
+    justify-content: space-between;
+  }
+}
+
+.flex_container_left {
+  max-width: 350px;
+  display: flex;
+  flex-direction: column;
+  gap: 1.25rem;
+}
+
+.flex_container_right {
+  display: flex;
+  flex-direction: column;
+  gap: 1.25rem;
+
+  @media (min-width: 802px) {
+    flex-direction: row;
+    flex-wrap: wrap;
+    justify-content: space-between;
+  }
+
+  @media (min-width: 1408px) {
+  }
+}
+
+.contactInfo {
+  color: var(--stroke-primary);
+  font-size: 1.125rem;
+  font-style: normal;
+  font-weight: 500;
+  line-height: 120%;
+  &:hover {
+    text-decoration: underline;
+  }
+}
+
+.logo {
+  padding: 1.5rem 0;
+  width: 100%;
+  height: auto;
+
+  @media (min-width: 802px) {
+    width: 70%;
+    padding-top: 2rem;
+  }
+
+  @media (min-width: 1408px) {
+    width: 80%;
+    padding-top: 7.5rem;
+    padding-bottom: 3rem;
+  }
+}
+
+.grey_links {
+  display: flex;
+  flex-direction: column;
+  gap: 2rem;
+
+  @media (min-width: 1408px) {
+    flex-direction: row;
+    justify-content: space-between;
+    width: 100%;
+  }
+}
+
+.grey_links__language {
+  composes: list;
+  display: flex;
+  gap: 1rem;
+}
+
 .credits {
   composes: list;
   display: flex;
-  flex-direction: row;
+  flex-direction: column;
   gap: 1rem;
   flex-wrap: wrap;
 
@@ -61,15 +135,34 @@
     text-wrap: nowrap;
   }
 
-  @media (min-width: 1024px) {
+  @media (min-width: 1408px) {
+    flex-direction: row;
     gap: 2.5rem;
   }
 }
 
-.whiteColor {
-  color: var(--background-bg-light-primary) !important;
-  font-family: var(--font-britti-sans) !important;
-  font-size: 2rem !important;
-  font-weight: 400 !important;
-  white-space: normal;
+.organisationNumber {
+  font-size: 1.0625rem;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 120%;
+  color: var(--text-tertiary);
+}
+
+.offices {
+  display: flex;
+  flex-direction: row;
+  align-items: flex-start;
+  align-self: stretch;
+  list-style: none;
+  font-size: 1.125rem;
+  font-style: normal;
+  font-weight: 500;
+  line-height: 120%;
+  padding: 0;
+}
+
+.dotSeparator:not(:last-child)::after {
+  content: "·";
+  margin: 0.5rem;
 }
diff --git a/src/components/navigation/footer/footerIllustration/FooterIllustration.tsx b/src/components/navigation/footer/footerIllustration/FooterIllustration.tsx
new file mode 100644
index 000000000..ee9e02485
--- /dev/null
+++ b/src/components/navigation/footer/footerIllustration/FooterIllustration.tsx
@@ -0,0 +1,70 @@
+import React from "react";
+
+import styles from "./footerIllustration.module.css";
+
+interface FooterIllustrationProps {
+  color: string;
+}
+
+export const FooterIllustration = ({ color }: FooterIllustrationProps) => {
+  return (
+    <div className={styles.footerIllustrations}>
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        width="147"
+        height="71"
+        viewBox="0 0 147 71"
+        fill="none"
+      >
+        <path
+          fillRule="evenodd"
+          clipRule="evenodd"
+          d="M13.0377 70.0255C8.6983 46.6608 24.1213 24.2022 47.4859 19.8628L83.8554 13.108C107.22 8.76858 129.679 24.1916 134.018 47.5562V47.5562C138.358 70.9209 122.935 93.3795 99.5699 97.7189L63.2004 104.474C39.8358 108.813 17.3772 93.3902 13.0377 70.0255V70.0255ZM125.428 1.30714V1.30714C127.606 0.90263 129.7 2.34033 130.105 4.51833V4.51833L145.819 89.1293V89.1293C146.224 91.3073 144.786 93.4008 142.608 93.8053V93.8053L21.6274 116.275V116.275C19.4494 116.679 17.3559 115.241 16.9513 113.063V113.063L1.23687 28.4525V28.4525C0.832353 26.2745 2.27005 24.1809 4.44805 23.7764V23.7764L125.428 1.30714Z"
+          fill={color}
+        />
+        <circle
+          cx="2.00553"
+          cy="2.00553"
+          r="2.00553"
+          transform="matrix(-0.983187 0.182604 0.182604 0.983187 106.894 21.4552)"
+          fill="#282828"
+        />
+        <circle
+          cx="2.00553"
+          cy="2.00553"
+          r="2.00553"
+          transform="matrix(-0.983187 0.182604 0.182604 0.983187 90.3052 24.5361)"
+          fill="#282828"
+        />
+        <path
+          d="M92.7176 33.0633C93.1221 35.2413 95.9219 36.5478 98.9711 35.9815C102.02 35.4152 104.164 33.1905 103.76 31.0125"
+          stroke="#282828"
+          strokeWidth="1.60443"
+          strokeLinecap="round"
+        />
+      </svg>
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        width="215"
+        height="84"
+        viewBox="0 0 215 84"
+        fill="none"
+      >
+        <path
+          fillRule="evenodd"
+          clipRule="evenodd"
+          d="M48.0316 167.754C71.2346 190.957 108.854 190.957 132.057 167.754L167.296 132.516C190.499 109.313 190.499 71.6932 167.296 48.4902V48.4902C144.093 25.2872 106.473 25.2872 83.2701 48.4902L48.0315 83.7288C24.8286 106.932 24.8286 144.551 48.0316 167.754V167.754ZM212.107 93.3012V93.3012C213.652 91.7557 213.652 89.2501 212.107 87.7047V87.7047L128.081 3.67923V3.67923C126.536 2.13381 124.03 2.13381 122.485 3.67923V3.67923L3.2206 122.943V122.943C1.67518 124.489 1.67518 126.994 3.2206 128.54V128.54L87.2461 212.565V212.565C88.7915 214.111 91.2971 214.111 92.8425 212.565V212.565L212.107 93.3012Z"
+          fill={color}
+        />
+        <circle cx="119.025" cy="38.9881" r="1.97865" fill="#282828" />
+        <circle cx="131.138" cy="38.9881" r="1.97865" fill="#282828" />
+        <path
+          d="M130.622 45.7156C130.622 47.9011 128.142 49.6729 125.082 49.6729C122.022 49.6729 119.542 47.9011 119.542 45.7156"
+          stroke="#282828"
+          strokeWidth="1.58292"
+          strokeLinecap="round"
+        />
+      </svg>
+    </div>
+  );
+};
diff --git a/src/components/navigation/footer/footerIllustration/footerIllustration.module.css b/src/components/navigation/footer/footerIllustration/footerIllustration.module.css
new file mode 100644
index 000000000..5ea2e9bf8
--- /dev/null
+++ b/src/components/navigation/footer/footerIllustration/footerIllustration.module.css
@@ -0,0 +1,11 @@
+.footerIllustrations {
+  background-color: transparent;
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-around;
+
+  & > svg {
+    width: 20%;
+    height: auto;
+  }
+}
diff --git a/src/components/navigation/footer/footerSection/FooterSection.tsx b/src/components/navigation/footer/footerSection/FooterSection.tsx
new file mode 100644
index 000000000..2c8709528
--- /dev/null
+++ b/src/components/navigation/footer/footerSection/FooterSection.tsx
@@ -0,0 +1,25 @@
+import React, { Children } from "react";
+
+import { TextTertiary } from "src/components/navigation/footer/textTertiary/TextTertiary";
+
+import styles from "./footerSection.module.css";
+
+interface IFooterSection {
+  title: string;
+  children: React.ReactNode;
+}
+
+export const FooterSection = ({ title, children }: IFooterSection) => {
+  const childrenArray = Children.toArray(children);
+
+  return (
+    <div className={styles.footerSection}>
+      <TextTertiary>{title}</TextTertiary>
+      <ul className={styles.footerSectionLinks}>
+        {childrenArray.map((child, index) => (
+          <li key={index}>{child}</li>
+        ))}
+      </ul>
+    </div>
+  );
+};
diff --git a/src/components/navigation/footer/footerSection/footerSection.module.css b/src/components/navigation/footer/footerSection/footerSection.module.css
new file mode 100644
index 000000000..cd20f4805
--- /dev/null
+++ b/src/components/navigation/footer/footerSection/footerSection.module.css
@@ -0,0 +1,23 @@
+.footerSection {
+  /* NOTE: Padding top might be removed(Was in figma sketches) */
+  padding-top: 1rem;
+  display: flex;
+  flex-direction: column;
+  gap: 1.12rem;
+
+  @media (min-width: 802px) {
+    padding-top: 0;
+  }
+}
+
+.footerSectionLinks {
+  display: flex;
+  flex-direction: column;
+  gap: 0.75rem;
+  padding: 0;
+  margin: 0;
+
+  & > li {
+    list-style: none;
+  }
+}
diff --git a/src/components/navigation/footer/textTertiary/TextTertiary.tsx b/src/components/navigation/footer/textTertiary/TextTertiary.tsx
new file mode 100644
index 000000000..02ac14a75
--- /dev/null
+++ b/src/components/navigation/footer/textTertiary/TextTertiary.tsx
@@ -0,0 +1,15 @@
+import Text from "src/components/text/Text";
+
+import styles from "./textTertiary.module.css";
+
+interface IText {
+  children: React.ReactNode;
+}
+
+export const TextTertiary = ({ children }: IText) => {
+  return (
+    <Text type="bodySmall" className={styles.text_tertiary}>
+      {children}
+    </Text>
+  );
+};
diff --git a/src/components/navigation/footer/textTertiary/textTertiary.module.css b/src/components/navigation/footer/textTertiary/textTertiary.module.css
new file mode 100644
index 000000000..4dfc24e22
--- /dev/null
+++ b/src/components/navigation/footer/textTertiary/textTertiary.module.css
@@ -0,0 +1,3 @@
+.text_tertiary {
+  color: var(--text-tertiary);
+}
diff --git a/src/components/navigation/header/Header.tsx b/src/components/navigation/header/Header.tsx
index a8561a441..ff40317e2 100644
--- a/src/components/navigation/header/Header.tsx
+++ b/src/components/navigation/header/Header.tsx
@@ -10,7 +10,6 @@ import { defaultLanguage } from "i18n/supportedLanguages";
 import LanguageSwitcher from "src/components/languageSwitcher/LanguageSwitcher";
 import CustomLink from "src/components/link/CustomLink";
 import LinkButton from "src/components/linkButton/LinkButton";
-import Text from "src/components/text/Text";
 import useScrollDirection from "src/utils/hooks/useScrollDirection";
 import { getHref } from "src/utils/link";
 import { Announcement } from "studio/lib/interfaces/announcement";
diff --git a/src/styles/global.css b/src/styles/global.css
index 8dc52e95c..df7128021 100644
--- a/src/styles/global.css
+++ b/src/styles/global.css
@@ -2,6 +2,7 @@ html {
   scroll-behavior: smooth;
   box-sizing: border-box;
 }
+
 *,
 *:before,
 *:after {
diff --git a/studio/schemas/documents/admin/companyInfo.ts b/studio/schemas/documents/admin/companyInfo.ts
index 4f8642e0b..a70292ef3 100644
--- a/studio/schemas/documents/admin/companyInfo.ts
+++ b/studio/schemas/documents/admin/companyInfo.ts
@@ -25,7 +25,8 @@ const companyInfo = defineType({
       name: "organizationNumber",
       type: "string",
       title: "Organization Number",
-      description: "Enter the organization number",
+      description:
+        "Enter the organization number, with formatting according to your country's standards e.g. in Norway: xxx xxx xxx, or Sweden: xxxxxx-xxxx",
     }),
     defineField({
       name: "companyPhone",