diff --git a/web/src/components/general/Icon.tsx b/web/src/components/general/Icon.tsx
index 5a1838b..d2e2d9e 100644
--- a/web/src/components/general/Icon.tsx
+++ b/web/src/components/general/Icon.tsx
@@ -318,6 +318,12 @@ export function DecorativeIcon ({
           <path d="M271.35 281.16C271.68 277.97 272.05 276.11 272.57 276.99C272.86 277.49 273.18 276.92 273.48 276.94C275.53 277.04 277.58 277.21 279.63 277.27C280.51 277.3 281.39 277.12 282.27 277.05C283.76 276.94 285.25 276.8 286.73 276.78C287.49 276.77 288.25 277.09 289.01 277.09C290.53 277.09 292.06 276.89 293.58 276.89C294.36 276.89 295.14 277.19 295.91 277.27C296.2 277.3 296.48 277.04 296.77 276.98C296.89 276.96 297.01 276.94 297.12 277.26C297.43 278.14 297.53 280.9 297.34 283.41C297.2 285.33 297.01 286.62 296.74 286.61C295.48 286.54 294.23 286.5 292.97 286.53C292.46 286.54 291.96 286.86 291.45 286.86C290.65 286.86 289.86 286.67 289.06 286.59C287.89 286.48 286.72 286.32 285.56 286.35C284.22 286.38 282.88 286.58 281.54 286.7C281.12 286.74 280.7 286.76 280.27 286.76C278.95 286.78 277.62 286.78 276.3 286.82C274.93 286.87 273.55 286.96 272.18 287.02C272.08 287.02 271.98 287.03 271.87 286.92C271.46 286.46 271.41 285.87 271.32 281.15L271.35 281.16Z" fill="currentColor"/>
         </svg>
       )}
+
+      {type === "email" && (
+        <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+          <path d="M6.79833 18.8515C6.39828 18.9115 6.03892 18.8236 5.72025 18.5879C5.40157 18.3523 5.21228 18.0344 5.15237 17.6344L3.80227 8.61883C3.74237 8.21879 3.83024 7.85943 4.0659 7.54075C4.30157 7.22207 4.61942 7.03278 5.01947 6.97287L17.2026 5.14841C17.6027 5.0885 17.962 5.17638 18.2807 5.41204C18.5994 5.64771 18.7887 5.96556 18.8486 6.36561L20.1987 15.3811C20.2586 15.7812 20.1707 16.1405 19.9351 16.4592C19.6994 16.7779 19.3815 16.9672 18.9815 17.0271L6.79833 18.8515ZM12.0666 12.4417L5.12468 9.33937L6.34024 17.4565C6.35089 17.5276 6.38247 17.5826 6.43498 17.6214C6.48748 17.6602 6.54931 17.6743 6.62045 17.6637L18.8036 15.8392C18.8748 15.8286 18.9297 15.797 18.9686 15.7445C19.0074 15.692 19.0215 15.6302 19.0108 15.559L17.7953 7.44192L12.0666 12.4417ZM11.8819 11.2081L17.5025 6.31802L5.0754 8.179L11.8819 11.2081ZM5.12468 9.33937L4.95364 8.19724L6.34024 17.4565C6.35089 17.5276 6.38247 17.5826 6.43498 17.6214C6.48748 17.6602 6.54931 17.6743 6.62045 17.6637L6.37674 17.7002L5.12468 9.33937Z" fill="currentColor"/>
+        </svg>
+      )}
     </div>
   );
 }
diff --git a/web/src/components/general/Newsletter.tsx b/web/src/components/general/Newsletter.tsx
new file mode 100644
index 0000000..b7411b9
--- /dev/null
+++ b/web/src/components/general/Newsletter.tsx
@@ -0,0 +1,23 @@
+import { DecorativeIcon, Icon } from "./Icon";
+import styles from "./newsletter.module.scss";
+
+export const Newsletter = ({ url }: { url?: string }) => {
+  const link = url ?? "https://pub.dialogapi.no/s/MjQ0NTc6MmQyZjNjY2MtOGMzYy00NWQ0LThkY2MtZmUxYWQyODNhN2Vi";
+  return (
+    <div className={styles.newsletterWrapper}>
+      <div className={styles.newsletter}>
+        <div className={styles.textWrapper}>
+          <div className={styles.icon}>
+            <DecorativeIcon type="email" />
+          </div>
+            <h2>Nyhetsbrev</h2>
+            <p>Meld deg på vårt nyhetsbrev og hold deg oppdatert på program og nyheter!</p>
+        </div>
+        <a href={link} target="_blank" className="button primary">
+          Meld deg på
+          <Icon type="arrowRight" />
+        </a>
+      </div>
+    </div>
+  );
+};
diff --git a/web/src/components/general/newsletter.module.scss b/web/src/components/general/newsletter.module.scss
new file mode 100644
index 0000000..692c6c9
--- /dev/null
+++ b/web/src/components/general/newsletter.module.scss
@@ -0,0 +1,64 @@
+.newsletterWrapper {
+  padding: var(--spacing-sitepadding-block) var(--spacing-sitepadding-inline);
+}
+
+.newsletter {
+  width: 100%;
+  background: var(--color-background-secondary);
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  gap: 4rem;
+  padding: var(--spacing-l);
+
+  a {
+    white-space: nowrap;
+  }
+}
+
+.textWrapper {
+  display: grid;
+  grid-template-columns: auto 1fr;
+  column-gap: calc(var(--spacing-l)*0.9);
+  align-items: center;
+
+  h2 {
+    margin-bottom: .5rem;
+  }
+}
+
+.icon {
+  grid-column: 1;
+  grid-row: span 2;
+  flex: none;
+  width: var(--size-icon-large);
+  height: var(--size-icon-large);
+  background: var(--color-goldenBeige);
+  border-radius: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  img, svg {
+    width: 100%;
+  }
+}
+
+@media (max-width: 800px) {
+  .newsletter {
+    padding: var(--spacing-m);
+    flex-wrap: wrap;
+    gap: 1rem;
+    justify-content: flex-end;
+  }
+  .icon {
+    grid-row: span 1;
+  }
+  .textWrapper {
+    column-gap: 1rem;
+    row-gap: 1rem;
+    p {
+      grid-column: span 2;
+    }
+  }
+}
\ No newline at end of file
diff --git a/web/src/components/layout/Footer.tsx b/web/src/components/layout/Footer.tsx
index a76581c..255f3ae 100644
--- a/web/src/components/layout/Footer.tsx
+++ b/web/src/components/layout/Footer.tsx
@@ -7,6 +7,7 @@ import {
   getOpeningHours,
   getTodaysOpeningHoursForFunction,
 } from "@/lib/openinghours";
+import { Newsletter } from "../general/Newsletter";
 
 async function OpeningHoursTable() {
   const allOpeningHours = await getOpeningHours();
@@ -37,6 +38,7 @@ async function OpeningHoursTable() {
 export const Footer = () => {
   return (
     <>
+      <Newsletter />
       <footer className={styles.footer}>
         <div className={styles.social}>
           <h2>Følg oss</h2>