diff --git a/apps/official/components/CovMapFeatureInfo.tsx b/apps/official/components/CovMapFeatureInfo.tsx
index 5c5ee017..d01d6f57 100644
--- a/apps/official/components/CovMapFeatureInfo.tsx
+++ b/apps/official/components/CovMapFeatureInfo.tsx
@@ -24,6 +24,7 @@ import ContactsLowIcon from "../static/images/contacts-low.svg";
 import ContactsMediumIcon from "../static/images/contacts-medium.svg";
 import SymptomsLowIcon from "../static/images/symptoms-low.svg";
 import { usePathPreservingQueryChange } from "app-config/components/customHistoryHooks";
+import { useTranslation } from "react-i18next";
 
 const useStyles = makeStyles<Theme, { fullScreen: boolean }>((theme) => ({
   action: {
@@ -148,19 +149,21 @@ export const CovMapFeatureInfo = ({ rawData }: FeatureInfoProps) => {
   );
 
   const ContactsIcon = ({ score }: { score: ContactScore }) => {
+    const { t } = useTranslation("translation");
+
     switch (score) {
       case ContactScore.Low:
         return (
           <div className={center}>
             <ContactsLowIcon />
-            <Typography variant="body2">reduziert</Typography>
+            <Typography variant="body2">{t("contacts-indicator.reduced")}</Typography>
           </div>
         );
       case ContactScore.Medium:
         return (
           <div className={center}>
             <ContactsMediumIcon />
-            <Typography variant="body2">erhöht</Typography>
+            <Typography variant="body2">{t("contacts-indicator.increased")}</Typography>
           </div>
         );
       default:
diff --git a/apps/official/components/basic-recommendations/BasicRecommendations.tsx b/apps/official/components/basic-recommendations/BasicRecommendations.tsx
index 33d45dde..df6dd7e7 100644
--- a/apps/official/components/basic-recommendations/BasicRecommendations.tsx
+++ b/apps/official/components/basic-recommendations/BasicRecommendations.tsx
@@ -13,8 +13,8 @@ import HygieneIcon from "../../static/images/hand-washing.svg";
 import MaskIcon from "../../static/images/mask.svg";
 import VentilationIcon from "../../static/images/fresh-air.svg";
 import RegionalIcon from "../../static/images/checklist.svg";
-import { ActionTexts } from "../../static/texts/ActionTexts";
 import { NavigationTitle } from "app-config/components/NavigationTitle";
+import { useTranslation } from "react-i18next";
 
 const useStyles = makeStyles({
   teaser: {
@@ -35,11 +35,14 @@ const useStyles = makeStyles({
     textAlign: "left",
     fontWeight: "bold",
   },
+  multiLineText: {
+    whiteSpace: "break-spaces",
+  },
 });
 
 const CountyTeaser = ({ county, url }: { county: string; url: string }): JSX.Element => {
   const classes = useStyles();
-  const teaser = `${ActionTexts.COUNTY_TEASER_1}${county}${ActionTexts.COUNTY_TEASER_2}`;
+  const { t } = useTranslation("translation");
 
   return (
     <Button href={url} target="_blank" disableRipple>
@@ -48,7 +51,7 @@ const CountyTeaser = ({ county, url }: { county: string; url: string }): JSX.Ele
           <Grid container direction="row" alignItems="center" spacing={2}>
             <Grid item xs={10}>
               <Typography variant="body1" className={classes.leftText}>
-                {teaser}
+                {t("basic-recommendations.county-teaser", { county })}
               </Typography>
             </Grid>
             <Grid item xs={2}>
@@ -63,11 +66,13 @@ const CountyTeaser = ({ county, url }: { county: string; url: string }): JSX.Ele
 
 const FinalTeaser = (): JSX.Element => {
   const classes = useStyles();
+  const { t } = useTranslation("translation");
+
   return (
     <Card className={classes.teaser}>
       <CardContent>
-        <Typography variant="body1" className={classes.leftText}>
-          {ActionTexts.FINAL_TEASER}
+        <Typography variant="body1" className={`${classes.leftText} ${classes.multiLineText}`}>
+          {t("basic-recommendations.final-teaser")}
         </Typography>
       </CardContent>
     </Card>
@@ -76,16 +81,18 @@ const FinalTeaser = (): JSX.Element => {
 
 const Intro = (): JSX.Element => {
   const classes = useStyles();
+  const { t } = useTranslation("translation");
+
   return (
     <Grid container direction="column" spacing={4}>
       <Grid item>
         <Typography variant="body1" className={classes.leftText}>
-          {ActionTexts.INTRO_TEASER_1}
+          {t("basic-recommendations.intro-teaser-1")}
         </Typography>
       </Grid>
       <Grid item>
         <Typography variant="body1" className={classes.subHeader}>
-          {ActionTexts.INTRO_TEASER_2}
+          {t("basic-recommendations.intro-teaser-2")}
         </Typography>
       </Grid>
     </Grid>
@@ -94,6 +101,8 @@ const Intro = (): JSX.Element => {
 
 const ContactSection = (): JSX.Element => {
   const classes = useStyles();
+  const { t } = useTranslation("translation");
+
   return (
     <div>
       <Grid container direction="row">
@@ -102,12 +111,12 @@ const ContactSection = (): JSX.Element => {
         </Grid>
         <Grid item xs={9}>
           <Typography variant="h1" className={classes.leftText}>
-            {ActionTexts.CONTACT_HEADLINE}
+            {t("basic-recommendations.contact.headline")}
           </Typography>
         </Grid>
       </Grid>
-      <Typography variant="body1" className={classes.leftText}>
-        {ActionTexts.CONTACT_TEXT}
+      <Typography variant="body1" className={`${classes.leftText} ${classes.multiLineText}`}>
+        {t("basic-recommendations.contact.text")}
       </Typography>
     </div>
   );
@@ -115,6 +124,8 @@ const ContactSection = (): JSX.Element => {
 
 const DistanceSection = (): JSX.Element => {
   const classes = useStyles();
+  const { t } = useTranslation("translation");
+
   return (
     <div>
       <Grid container direction="row">
@@ -123,12 +134,12 @@ const DistanceSection = (): JSX.Element => {
         </Grid>
         <Grid item xs={9}>
           <Typography variant="h1" className={classes.leftText}>
-            {ActionTexts.DISTANCE_HEADLINE}
+            {t("basic-recommendations.distance.headline")}
           </Typography>
         </Grid>
       </Grid>
-      <Typography variant="body1" className={classes.leftText}>
-        {ActionTexts.DISTANCE_TEXT}
+      <Typography variant="body1" className={`${classes.leftText} ${classes.multiLineText}`}>
+        {t("basic-recommendations.distance.text")}
       </Typography>
     </div>
   );
@@ -136,6 +147,8 @@ const DistanceSection = (): JSX.Element => {
 
 const MaskSection = (): JSX.Element => {
   const classes = useStyles();
+  const { t } = useTranslation("translation");
+
   return (
     <div>
       <Grid container direction="row">
@@ -144,12 +157,12 @@ const MaskSection = (): JSX.Element => {
         </Grid>
         <Grid item xs={9}>
           <Typography variant="h1" className={classes.leftText}>
-            {ActionTexts.MASK_HEADLINE}
+            {t("basic-recommendations.mask.headline")}
           </Typography>
         </Grid>
       </Grid>
-      <Typography variant="body1" className={classes.leftText}>
-        {ActionTexts.MASK_TEXT}
+      <Typography variant="body1" className={`${classes.leftText} ${classes.multiLineText}`}>
+        {t("basic-recommendations.mask.text")}
       </Typography>
     </div>
   );
@@ -157,6 +170,8 @@ const MaskSection = (): JSX.Element => {
 
 const VentilationSection = (): JSX.Element => {
   const classes = useStyles();
+  const { t } = useTranslation();
+
   return (
     <div>
       <Grid container direction="row">
@@ -165,12 +180,12 @@ const VentilationSection = (): JSX.Element => {
         </Grid>
         <Grid item xs={9}>
           <Typography variant="h1" className={classes.leftText}>
-            {ActionTexts.VENTILATION_HEADLINE}
+            {t("basic-recommendations.ventilation.headline")}
           </Typography>
         </Grid>
       </Grid>
-      <Typography variant="body1" className={classes.leftText}>
-        {ActionTexts.VENTILATION_TEXT}
+      <Typography variant="body1" className={`${classes.leftText} ${classes.multiLineText}`}>
+        {t("basic-recommendations.ventilation.text")}
       </Typography>
     </div>
   );
@@ -178,6 +193,8 @@ const VentilationSection = (): JSX.Element => {
 
 const HygieneSection = (): JSX.Element => {
   const classes = useStyles();
+  const { t } = useTranslation();
+
   return (
     <div>
       <Grid container direction="row">
@@ -186,12 +203,12 @@ const HygieneSection = (): JSX.Element => {
         </Grid>
         <Grid item xs={9}>
           <Typography variant="h1" className={classes.leftText}>
-            {ActionTexts.HYGIENE_HEADLINE}
+            {t("basic-recommendations.hygiene.headline")}
           </Typography>
         </Grid>
       </Grid>
-      <Typography variant="body1" className={classes.leftText}>
-        {ActionTexts.HYGIENE_TEXT}
+      <Typography variant="body1" className={`${classes.leftText} ${classes.multiLineText}`}>
+        {t("basic-recommendations.hygiene.text")}
       </Typography>
     </div>
   );
@@ -199,6 +216,7 @@ const HygieneSection = (): JSX.Element => {
 
 const RegionalSection = (): JSX.Element => {
   const classes = useStyles();
+  const { t } = useTranslation();
   return (
     <div>
       <Grid container direction="row">
@@ -207,12 +225,12 @@ const RegionalSection = (): JSX.Element => {
         </Grid>
         <Grid item xs={9}>
           <Typography variant="h1" className={classes.leftText}>
-            {ActionTexts.REGIONAL_HEADLINE}
+            {t("basic-recommendations.regional.headline")}
           </Typography>
         </Grid>
       </Grid>
-      <Typography variant="body1" className={classes.leftText}>
-        {ActionTexts.REGIONAL_TEXT}
+      <Typography variant="body1" className={`${classes.leftText} ${classes.multiLineText}`}>
+        {t("basic-recommendations.regional.text")}
       </Typography>
     </div>
   );
@@ -245,12 +263,13 @@ function loadDistrictData(location): DistrictData | undefined {
 export const BasicRecommendations = (): JSX.Element => {
   const location = useLocation();
   const districtData = loadDistrictData(location);
+  const { t } = useTranslation("translation");
 
   return (
     <>
       <main className="sections">
         <section>
-          <NavigationTitle title={ActionTexts.TITLE} backToExpandedFeatureInfo={true} />
+          <NavigationTitle title={t("basic-recommendations.title")} backToExpandedFeatureInfo={true} />
         </section>
         <section>
           {districtData !== undefined ? (
diff --git a/apps/official/components/pages/Charts.tsx b/apps/official/components/pages/Charts.tsx
index df6ffac5..4e9410c0 100644
--- a/apps/official/components/pages/Charts.tsx
+++ b/apps/official/components/pages/Charts.tsx
@@ -7,9 +7,11 @@ import { AppApi } from "../../../../src/state/app";
 
 import { formatUTCDate } from "../../../../src/lib/formatUTCDate";
 import { NavigationTitle } from "app-config/components/NavigationTitle";
+import { useTranslation } from "react-i18next";
 
 export const Charts = () => {
   const dispatch = useThunkDispatch();
+  const { t } = useTranslation("translation");
   const currentDate = useSelector((state: State) => state.app.currentDate);
   const dateKey = formatUTCDate(currentDate);
   const dataUrl =
@@ -43,7 +45,7 @@ export const Charts = () => {
         justifyContent: "center",
       }}
     >
-      <NavigationTitle title={"Deutschlandweite Graphen"} />
+      <NavigationTitle title={t("pages.charts")} />
       <div style={{ width: "100%", height: "calc(100vh - 150px)" }}>
         <ResponsiveContainer>
           <LineChart
@@ -67,7 +69,7 @@ export const Charts = () => {
               dataKey={"CI"}
               stroke="#8884d8"
               strokeWidth="4px"
-              name="Kontaktindex C"
+              name={t("charts.contact-index") as string}
             />
             <Line
               yAxisId="right"
@@ -75,7 +77,7 @@ export const Charts = () => {
               dataKey={"R"}
               stroke="#f01a8d"
               strokeWidth="4px"
-              name="Reproduktionszahl R"
+              name={t("charts.reproduction-rate") as string}
             />
           </LineChart>
         </ResponsiveContainer>
diff --git a/apps/official/components/pages/ContactBehavior.tsx b/apps/official/components/pages/ContactBehavior.tsx
index 9de94c4d..978aff20 100644
--- a/apps/official/components/pages/ContactBehavior.tsx
+++ b/apps/official/components/pages/ContactBehavior.tsx
@@ -1,56 +1,40 @@
 import React from "react";
 import Typography from "@material-ui/core/Typography";
 import { NavigationTitle } from "app-config/components/NavigationTitle";
+import { Trans, useTranslation } from "react-i18next";
 
 const ContactBehavior = () => {
+  const { t } = useTranslation("translation");
+
   return (
     <main className="sections">
       <section>
-        <NavigationTitle title="Kontaktverhalten" backToExpandedFeatureInfo={true} />
+        <NavigationTitle title={t("pages.contact-behavior")} backToExpandedFeatureInfo={true} />
       </section>
 
       <section>
-        <Typography>Was ist das Kontaktverhalten und warum ist es wichtig?</Typography>
-        <Typography>
-          Das Virus wird von Mensch zu Mensch übertragen. Indem wir Kontakte reduzieren, können wir es dem Virus
-          erschweren, sich in der Bevölkerung zu verbreiten. Dabei ist der{" "}
-          <a href="https://www.rki.de/DE/Content/InfAZ/N/Neuartiges_Coronavirus/Projekte_RKI/R-Wert-Erlaeuterung.pdf?__blob=publicationFile">
-            R-Wert
-          </a>{" "}
-          ist eine wichtige Maßzahl, mit der wir beurteilen können, ob wir es dem Virus schwer genug gemacht haben.
-        </Typography>
-        <Typography>
-          Der R-Wert besagt, wie viele Personen von einer infizierten Person im Durchschnitt angesteckt werden. Wenn der
-          R-Wert 1 beträgt, bedeutet dies, dass eine infizierte Person im Schnitt nur eine weitere ansteckt. Ziel ist
-          es, durch Maßnahmen einen R Wert unter 1 zu erreichen, d.h., dass eine infizierte Person im Durchschnitt
-          weniger als eine weitere Person ansteckt. Ein R-Wert oberhalb von 1 führt dagegen zu einer Kettenreaktion mit
-          einem unkontrollierten Anstieg der Fallzahlen. Der R-Wert hängt einerseits von der Biologie des Virus ab ("wie
-          ansteckungsfähig ist das Virus?"), andererseits von unserem Kontaktverhalten ("auf wie viele Personen treffe
-          ich?"). Während wir die Biologie des Virus nicht ändern können, können wir durch unser Kontaktverhalten einen
-          großen Einfluss auf das Infektionsgeschehen nehmen. Indem wir unsere Kontakte reduzieren, können wir es auch
-          einem hoch ansteckenden Virus so schwer machen, eine weitere Person zu infizieren, dass der R-Wert unter 1
-          sinkt.
-        </Typography>
-        <Typography>
-          Das Problem des R-Werts ist es, dass er das Infektionsgeschehen mit mehreren Tage Verzögerung abbildet, da er
-          aus der Zahl der bestätigten Infektionen berechnet wird. Dies erscheint auch logisch, wenn man bedenkt, dass
-          man nach einer Ansteckung mit dem Coronavirus nicht sofort Symptome entwickelt und auch das Ergebnis eines
-          Labortests mit mehreren Tagen Verzögerung dem Robert-Koch-Institut mitgeteilt wird. Der R-Wert ist somit immer
-          ein Blick in die Vergangenheit.
-        </Typography>
+        <Typography>{t("contact-behavior.intro")}</Typography>
         <Typography>
-          Unsere Gruppe hat ein{" "}
-          <a href="https://www.medrxiv.org/content/10.1101/2020.10.02.20188136v2">
-            Modell für das Kontaktverhalten auf Basis von GPS Daten
-          </a>{" "}
-          entwickelt. Über die Berechnung eines sogenannten Kontakt-Index können wir den R-Wert vorhersagen. Der Vorteil
-          vom Kontakt-Index ist nun, dass er fast ohne Verzögerung berechnet werden kann.
+          <Trans i18nKey="contact-behavior.text-1">
+            part-0
+            <a href={t("contact-behavior.external-explanation-reproduction-rate")} target="_blank" rel="noopener">
+              link-title
+            </a>
+            part-2
+          </Trans>
         </Typography>
+        <Typography>{t("contact-behavior.text-2")}</Typography>
+        <Typography>{t("contact-behavior.text-3")}</Typography>
         <Typography>
-          Von einem erhöhten Kontaktverhalten sprechen wir, wenn unser Modell voraussagt, dass in einer Region so viele
-          Kontakte vorhanden sind, dass sich das Virus leicht ausbreiten kann und wir davon ausgehen, dass der R-Wert
-          über 1 liegen wird.
+          <Trans i18nKey="contact-behavior.text-4">
+            part-0
+            <a href="https://www.medrxiv.org/content/10.1101/2020.10.02.20188136v2" target="_blank" rel="noopener">
+              Modell für das Kontaktverhalten auf Basis von GPS Daten
+            </a>
+            part-2
+          </Trans>
         </Typography>
+        <Typography>{t("contact-behavior.text-5")}</Typography>
       </section>
     </main>
   );
diff --git a/apps/official/components/pages/Credits.tsx b/apps/official/components/pages/Credits.tsx
index 87848f0f..fafd26f5 100644
--- a/apps/official/components/pages/Credits.tsx
+++ b/apps/official/components/pages/Credits.tsx
@@ -2,6 +2,7 @@ import React from "react";
 import Typography from "@material-ui/core/Typography";
 import { Grid, makeStyles } from "@material-ui/core";
 import { NavigationTitle } from "app-config/components/NavigationTitle";
+import { useTranslation } from "react-i18next";
 const contributors = require("json-loader!./../../../../.all-contributorsrc");
 const useStyles = makeStyles((theme) => ({
   root: {
@@ -39,12 +40,13 @@ const useStyles = makeStyles((theme) => ({
 }));
 export const Credits = () => {
   const classes = useStyles();
+  const { t } = useTranslation("translation");
 
   return (
     <>
       <main className="sections">
         <section>
-          <NavigationTitle title={"Über die CovMap"} />
+          <NavigationTitle title={t("pages.about")} />
 
           <div className={(classes.root, classes.logobar)}>
             <Grid container spacing={3}>
@@ -59,58 +61,41 @@ export const Credits = () => {
               </Grid>
             </Grid>
           </div>
-          <Typography variant="body1">
-            CovMap ist ein Gemeinschaftsprojekt der Charité - Universitätsmedizin Berlin, des Hasso-Plattner-Instituts
-            (HPI) und der Firma NET CHECK.
-          </Typography>
-          <Typography variant="h2">Projektleitung:</Typography>
-          <Typography variant="body1">
-            Charité: Dr. med. Alexander H. Thieme, M. Sc. <br />
-            Gesamtkonzept, CovMap, Datenanalyse Symptome
-            <br />
-            <br />
-            HPI: Prof. Dr. Christoph Lippert
-            <br />
-            Datenanalyse, Modellerstellung, Prognosen
-            <br />
-            <br />
-            NET CHECK: PD. Dr. Sten Rüdiger <br />
-            Datenanalyse GPS-Daten, Kontakt-Index
+          <Typography variant="body1">{t("credits.project-description")}</Typography>
+          <Typography variant="h2">{t("credits.project-management.title")}:</Typography>
+          <Typography variant="body1" style={{ whiteSpace: "break-spaces" }}>
+            {t("credits.project-management.text")}
           </Typography>
           <Typography variant="h2">
             <br />
-            Die CovMap App wurde mit der Unterstützung von zahlreichen Personen und Unternehmen entwickelt. Wir möchten
-            an dieser Stelle unseren großen Dank aussprechen.
+            {t("credits.appreciation.title")}
             <br />
           </Typography>
-          <Typography variant="body1">Wir danken den Unternehmen:</Typography>
+          <Typography variant="body1">{t("credits.appreciation.intro")}:</Typography>
           <Grid container spacing={3}>
             <Grid item xs={12} sm={3} className={classes.logo_container}>
               <img className={classes.logo_small} src="images/credits/portbluesky.png"></img>
             </Grid>
             <Grid item xs={12} sm={9}>
-              <Typography variant="body1">
-                Port Blue Sky: für die technische Unterstüzung der App durch Ihre Mitarbeiter sowie das Organisieren von
-                weiterer Unterstützung aus der Node.js Community.
-              </Typography>
+              <Typography variant="body1">{t("credits.appreciation.port-blue-sky")}</Typography>
             </Grid>
             <Grid item xs={12} sm={3} className={classes.logo_container}>
               <img className={classes.logo_small} src="images/credits/pwc.png"></img>
             </Grid>
             <Grid item xs={12} sm={9}>
-              <Typography variant="body1">PWC: für Lob, Kritik und Rat bei der Umsetzung der CovMap.</Typography>
+              <Typography variant="body1">{t("credits.appreciation.pwc")}</Typography>
             </Grid>
             <Grid item xs={12} sm={3} className={classes.logo_container}>
               <img className={classes.logo_small} src="images/credits/maptiler.png"></img>
             </Grid>
             <Grid item xs={12} sm={9}>
-              <Typography variant="body1">Maptiler: für die Unterstützung in Form von Kartendaten.</Typography>
+              <Typography variant="body1">{t("credits.appreciation.maptiler")}</Typography>
             </Grid>
           </Grid>
         </section>
         <section>
           <Typography variant="body1">
-            Ganz besonders möchten wir folgenden Personen danken:
+            {t("credits.appreciation.contributors-intro")}:
             <br />
           </Typography>
           <Typography variant="body1">
diff --git a/apps/official/components/pages/Faq.tsx b/apps/official/components/pages/Faq.tsx
index f872acd6..acfd6740 100644
--- a/apps/official/components/pages/Faq.tsx
+++ b/apps/official/components/pages/Faq.tsx
@@ -6,6 +6,7 @@ import { makeStyles } from "@material-ui/core/styles";
 import { RiskBadge } from "../RiskBadge";
 import { NavigationTitle } from "app-config/components/NavigationTitle";
 import ContactsMediumBackgroundIcon from "../../static/images/contacts-medium-background.svg";
+import { Trans, useTranslation } from "react-i18next";
 
 const useStyles = makeStyles(() => ({
   textBlock: {
@@ -45,95 +46,67 @@ const RiskHeading: React.FC<{ risk: 1 | 2 | 3 }> = ({ risk = 1 }) => {
 
 export const Faq: React.FC = () => {
   const classes = useStyles();
+  const { t } = useTranslation("translation");
 
   return (
     <main className="sections">
       <section>
-        <NavigationTitle title={"Fragen und Antworten zur CovMap!"} />
+        <NavigationTitle title={t("faq.title")} />
       </section>
 
       <section>
-        <FaqAccordion title="Was ist die CovMap?">
+        <FaqAccordion title={t("faq.what-is-covmap.title")}>
           <Typography style={{ width: "100%" }}>
             <div style={{ display: "flex", flexDirection: "column" }}>
-              <div className={classes.textBlock}>
-                Die CovMap visualisiert eine regionale Risikoeinschätzung auf einer Deutschlandkarte. Die
-                Risikoeinschätzung beruht auf täglich aktualisierten Fallzahlstatistiken des Robert-Koch-Instituts und
-                Vorhersagen von selbst entwickelten Modellen basierend auf dem Kontaktverhalten und berichteten
-                Symptomen der Bevölkerung. Mit der CovMap möchten wir folgende Fragen zum Coronavirus adressieren:
-              </div>
+              <div className={classes.textBlock}>{t("faq.what-is-covmap.text")}</div>
               <div className={classes.textBlock}>
                 <ul style={{ listStyle: "inside" }}>
-                  <li>Wie hoch ist das regionale Risiko?</li>
-                  <li>Wie kann ich mich schützen?</li>
-                  <li>Welche Verhaltensregeln gelten im Landkreis?</li>
+                  <li>{t("faq.what-is-covmap.regional-risk")}</li>
+                  <li>{t("faq.what-is-covmap.how-to-protect")}</li>
+                  <li>{t("faq.what-is-covmap.current-rules-in-county")}</li>
                 </ul>
               </div>
-              <div className={classes.textBlock}>
-                Mit der CovMap möchten wir zu einer freiwilligen Reduzierung von Kontakten aufrufen und aufzeigen, wo
-                dies besonders notwendig ist.
-              </div>
+              <div className={classes.textBlock}>{t("faq.what-is-covmap.outro")}</div>
             </div>
           </Typography>
         </FaqAccordion>
 
-        <FaqAccordion title="Wie kann ich die CovMap erreichen?">
+        <FaqAccordion title={t("faq.how-to-access.title")}>
           <Typography style={{ width: "100%" }}>
-            Die CovMap ist als WebApp über <a href="https://www.covmap.de">www.covmap.de</a> und{" "}
-            <a href="https://covmap.charite.de">covmap.charite.de</a> und als Android App über den Play Store (bald
-            verfügbar) erreichbar.
+            <Trans i18nKey="faq.how-to-access.text">
+              part-0
+              <a href="https://www.covmap.de" target="_blank" rel="noopener">
+                part-1
+              </a>
+              part-2
+              <a href="https://covmap.charite.de" target="_blank" rel="noopener">
+                part-3
+              </a>
+              part-4
+            </Trans>
           </Typography>
         </FaqAccordion>
 
-        <FaqAccordion title="Was macht die CovMap besonders?">
-          <Typography style={{ width: "100%" }}>
-            Die CovMap wertet zur regionalen Risikobestimmung neben den offiziellen Fallzahlstatistiken des
-            Robert-Koch-Instituts große Sätze an GPS- und Symptom-Daten aus. Diese Daten entstammen aus anderen Apps,
-            bei denen die Nutzer der Auswertung ihrer GPS Daten zugestimmt haben. Diese Daten sind die Basis für ein von
-            uns entwickeltes Modell, welches den Kontakt-Index berechnet. Zudem werden aktuelle Symptome abgefragt,
-            ausgewertet und fließen zusätzlich in die Risikoeinschätzung mit ein (bald verfügbar). Der Kontakt-Index und
-            die Symptome spiegeln frühzeitig das Infektionsgeschehen wider und ermöglichen so eine zeitnahe Anpassung.
-            Im Gegensatz dazu sind die Zahlen der Neuinfektionen, die vom Robert-Koch-Institut veröffentlicht werden,
-            der Stand der Neuinfektionen von vor circa einer Woche. Dieser Verzug kommt dadurch Zustande, dass eine
-            Person, die neu mit dem Virus infiziert wurde, nach wenigen Tagen Symptome entwickelt (es gibt auch
-            symptomlose Verläufe), sich erst dann testen lässt, der Test Zeit benötigt und auch die Meldung an das
-            Gesundeitsamt Zeit in Anspruch nimmt.
-          </Typography>
+        <FaqAccordion title={t("faq.what-is-special.title")}>
+          <Typography style={{ width: "100%" }}>{t("faq.what-is-special.text")}</Typography>
         </FaqAccordion>
 
-        <FaqAccordion title="Handelt es sich um offizielle Risikoeinschätzungen?">
-          <Typography style={{ width: "100%" }}>
-            Nein, bei der CovMap Risikoeinschätzung handelt es sich nicht um eine offizielle Risikoeinschätzung einer
-            nationalen Behörde oder Institution. Die CovMap Risikoeinschätzung wurde von Forschenden der Charité, des
-            Hasso-Plattner-Instituts und Datenspezialisten der Firma NET CHECK entwickelt. Das von uns entwickelte
-            Modell zur Risikoeinschätzung wurde erst kürzlich entwickelt und wird deswegen laufend evaluiert.
-          </Typography>
+        <FaqAccordion title={t("faq.is-it-official.title")}>
+          <Typography style={{ width: "100%" }}>{t("faq.is-it-official.text")}</Typography>
         </FaqAccordion>
 
-        <FaqAccordion title="Welche Risikostufen gibt es?">
+        <FaqAccordion title={t("faq.which-risk-levels.title")}>
           <Box display="flex" flexDirection="column">
-            <Typography>Auf der Karte stellen wir ein normales, mittleres und hohes Risiko dar.</Typography>
+            <Typography>{t("faq.which-risk-levels.intro")}</Typography>
             <RiskHeading risk={1} />
 
-            <Typography>
-              Ein normales Risiko liegt vor, wenn die 7-Tages-Inzidenz des Robert-Koch-Instituts geringer als 20
-              Neuinfektionen pro 100.000 Einwohner ist und unser Vorhersagemodell keinen Anstieg vermuten lässt. Bitte
-              beachte, dass das Virus derzeit überall in Deutschland zirkuliert und daher eine Ansteckung auch in einer
-              Region mit einem normalen Risiko möglich ist.
-            </Typography>
+            <Typography>{t("faq.which-risk-levels.level-1")}</Typography>
 
             <RiskHeading risk={2} />
 
-            <Typography>
-              Von einem mittleren Risiko gehen wir aus, wenn die 7-Tages-Inzidenz zwischen 20 und 50 Neuinfektionen pro
-              100.000 Einwohnern liegt oder unser Vorhersagemodell auf einen Anstieg der Neuinfektionen hindeutet. Eine
-              Region mit mittlerem Risiko kann in Zukunft eine Region mit hohem Risiko werden.
-            </Typography>
+            <Typography>{t("faq.which-risk-levels.level-2")}</Typography>
             <RiskHeading risk={3} />
-            <Typography>
-              Ein hohes Risiko leiten wir von der 7-Tages-Inzidenz ab, wenn die Schwelle von 50 Neuinfektionen pro
-              100.000 Einwohner überschritten wurde.
-            </Typography>
+            <Typography>{t("faq.which-risk-levels.level-3")}</Typography>
 
             <div
               style={{
@@ -145,160 +118,119 @@ export const Faq: React.FC = () => {
                 <ContactsMediumBackgroundIcon />
               </div>
               <Typography variant="h3" style={{ margin: "0 1rem" }}>
-                Erhöhtes Kontaktverhalten in der Bevölkerung
+                {t("faq.which-risk-levels.increased-contact-behavior.title")}
               </Typography>
             </div>
-            <Typography>
-              In dieser Region registrieren wir viele Kontakte, weshalb sich das Virus leichter ausbreiten kann. Unser
-              Vorhersagemodell sagt einen Anstieg der 7-Tages-Inzidenz voraus.
-            </Typography>
+            <Typography>{t("faq.which-risk-levels.increased-contact-behavior.text")}</Typography>
           </Box>
         </FaqAccordion>
 
-        <FaqAccordion title="Welche Konsequenzen ergeben sich aus der Risikoeinschätzung?">
-          <Typography style={{ width: "100%" }}>
-            Wir möchten mit diesem Projekt zu einer freiwilligen Reduktion von Kontakten aufrufen, insbesondere in
-            Gebieten mit mittlerem und hohem Risiko. Falls sich Kontakte nicht vermeiden lassen, findest Du auf unserer
-            Seite Informationen über allgemeine Schutzmaßnahmen, mit denen sich das Übertragungsrisiko verringern lässt.
-            Zusätzlich verlinken wir zu den Webseiten der Landkreise, so dass Du Dich über die aktuellen und offiziellen
-            Verhaltensregeln in Deiner Region informieren kannst.
-          </Typography>
+        <FaqAccordion title={t("faq.consequences-of-risk-evaluation.title")}>
+          <Typography style={{ width: "100%" }}>{t("faq.consequences-of-risk-evaluation.text")}</Typography>
         </FaqAccordion>
 
-        <FaqAccordion title="Wie aktuell ist die CovMap?">
-          <Typography style={{ width: "100%" }}>
-            Die CovMap wird einmal täglich aktualisiert. Der Datenstand ist in der Kartendarstellung oben rechts mit
-            Datum erkenntlich.
-          </Typography>
+        <FaqAccordion title={t("faq.how-up-to-date.title")}>
+          <Typography style={{ width: "100%" }}>{t("faq.how-up-to-date.text")}</Typography>
         </FaqAccordion>
 
-        <FaqAccordion title="Welche Daten verwendet die CovMap?">
-          <Typography style={{ width: "100%" }}>
-            Die CovMap greift auf drei Datenquellen zurück, um die regionalen Risikobewertung durchzuführen: 1.)
-            Fallzahlstatistiken vom Robert-Koch-Institut, 2.) ein geschätztes Kontaktverhalten (Kontakt-Index),
-            ermittelt aus GPS Daten von der Firma NET CHECK, 3.) Symptomdaten von der Chartié CovApp (
-            <a href="https://covapp.charite.de">https://covapp.charite.de</a>)
+        <FaqAccordion title={t("faq.which-data.title")}>
+          <Typography style={{ width: "100%", whiteSpace: "break-spaces" }}>
+            <Trans i18nKey="faq.which-data.text">
+              part-0
+              <a href="https://covapp.charite.de" target="_blank" rel="noopener">
+                part-1
+              </a>
+              part-2
+            </Trans>
           </Typography>
         </FaqAccordion>
 
-        <FaqAccordion title="Welche Vorteile ergeben sich durch die Auswertung von Kontakten und Symptomen der Bevölkerung?">
+        <FaqAccordion title={t("faq.advantages.title")}>
           <Typography style={{ width: "100%" }}>
             <div style={{ display: "flex", flexDirection: "column" }}>
+              <div className={classes.textBlock}>{t("faq.advantages.text-1")}</div>
+              <div className={classes.textBlock}>{t("faq.advantages.text-2")}</div>
               <div className={classes.textBlock}>
-                Damit das Virus übertragen werden kann, müssen sich Menschen begegnen. Wenige Tage nach der Infektion
-                berichten viele infizierte Personen über Symptome. Damit stellen der Kontakt zwischen Menschen und das
-                Bemerken von Symptomen die zwei frühesten beobachtbaren Ereignisse einer Infektion dar. Hier setzt die
-                CovMap an.
-              </div>
-              <div className={classes.textBlock}>
-                Wir charakterisieren aus anonymisierten GPS-Daten das Kontaktverhalten. Zusätzlich werten wir
-                selbstberichtete Symptome aus. Naturlich führt nicht jeder Kontakt zu einer Virusübertragung und
-                Symptome allein beweisen keine Infektion mit dem Coronavirus. Wertet man jedoch die Daten von vielen
-                Personen aus, dann kann eine Prognose der zukünftigen Fallzahlen erstellt werden. Wir haben dieses
-                Modell erst kürzlich entwickelt und evaulieren und verbessern es kontinuierlich.
-              </div>
-              <div className={classes.textBlock}>
-                Die vom Robert Koch-Institut gemeldete 7-Tages-Inzidenz spiegelt das Infektionsgeschehen wider, das
-                bereits vor einiger Zeit stattgefunden hat, und ist deshalb ein Blick in die Vergangenheit. Der von uns
-                entwickelte Kontakt-Index ist ein Maß für die Anzahl der Kontakte pro Person und Region und kann
-                schneller ausgewertet werden. In{" "}
-                <a href="https://www.medrxiv.org/content/10.1101/2020.10.02.20188136v2">ersten Analysen</a> konnten wir
-                zeigen, dass ein hoher Kontakt-Index mit einem vermehrten Infektionsgeschehen korreliert. Der
-                Kontakt-Index erlaubt insofern einen vorsichtigen Blick in die Zukunft und kann als eine Art
-                Frühwarnsystem angesehen werden. Wichtig ist, dass es sich bei dem hinterlegten Algorithmus um ein
-                rechnerisches Modell handelt. Das tatsächliche Infektionsgeschehen kann deshalb von der Vorhersage auf
-                Basis des Kontakt-Index abweichen.
-              </div>
-              <div className={classes.textBlock}>
-                Man weiß inzwischen, dass die Auswertung von Symptomen zur Vorhersage von lokalen Ausbrüchen verwendet
-                werden kann. Zeitlich ist die Symptomlast als Variable für die Vorhersage des Infektionsgeschehens
-                zwischen Kontakt-Index und 7-Tages-Inzidenz einzuordnen. Über die CovApp der Charité geben viele
-                Nutzerinnen und Nutzern ihre Symptome an. Wir planen, diese Angaben anonymisiert in ein verbessertes
-                Modell einfließen zu lassen.
-              </div>
-              <div className={classes.textBlock}>
-                Der große Vorteil der Auswertung von Kontakten und Symptomen liegt darin, dass die Daten fast ohne
-                Verzögerung analysiert werden können und daher ohne den Meldeverzug der offiziellen Fallzahlen des
-                Robert Koch-Instituts zur Verfügung stehen. Dadurch können wir die Bevölkerung schneller auf die
-                Möglichkeit eines erhöhten regionalen Risikos hinweisen.
-              </div>
-              <div className={classes.textBlock}>
-                Das CovMap Projekt wird zurzeit aktiv weiterentwickelt und verbessert.
+                <Trans i18nKey="faq.advantages.text-3">
+                  part-0
+                  <a
+                    href="https://www.medrxiv.org/content/10.1101/2020.10.02.20188136v2"
+                    target="_blank"
+                    rel="noopener"
+                  >
+                    part-1
+                  </a>
+                  part-2
+                </Trans>
               </div>
+              <div className={classes.textBlock}>{t("faq.advantages.text-4")}</div>
+              <div className={classes.textBlock}>{t("faq.advantages.text-5")}</div>
+              <div className={classes.textBlock}>{t("faq.advantages.text-6")}</div>
             </div>
           </Typography>
         </FaqAccordion>
 
-        <FaqAccordion title="Wie funktioniert die Vorhersage, ob in einer Region mit vermehrten Neuinfektionen zu rechnen ist?">
-          <Typography style={{ width: "100%" }}>
-            Unsere Arbeiten beruhen auf einem etablierten theoretischen Modell für die Vorhersage der Reproduktionszahl
-            (R-Wert). Der R-Wert gibt an, wie viele Personen sich innerhalb eines bestimmten Zeitraumes typischerweise
-            an einer erkrankten Person anstecken. Diese Ansteckungen hängen unter anderem von der Zahl der Kontakte pro
-            Person ab und ein mathematischer Zusammenhang kann für die Bestimmung genutzt werden. Der Kontakt zwischen
-            zwei Personen kann zu einer Übertragung des Coronavirus führen. Bei unserer Methode müssen wir nicht wissen,
-            ob eine Person tatsächlich infiziert ist und können dennoch eine Vorhersage darüber treffen, wie sich die
-            Zahl der Neuinfektionen entwickeln wird. Da ein Kontakt und die potentielle Virusübertragung das früheste
-            Ereignis einer Infektion mit dem Coronavirus darstellt, gewinnen wir einen Zeitvorteil von bis zu 3 Wochen
-            gegen über den offiziellen Fallzahlstatistiken mit bestätigten Infektionen. Statistisch gesehen ist übrigens
-            nicht die Zahl der Kontakte pro Person entscheidend, sondern eine spezielle Metrik, welche die Verteilung
-            der Anzahl der Kontakte berücksichtigt. Diese Metrik wurde von uns unter dem Namen Kontakt-Index berechnet
-            und wird für die Prognose verwendet, ob es zu einem Anstieg von Neuinfektionen kommen kann.
-          </Typography>
+        <FaqAccordion title={t("faq.how-does-it-work.title")}>
+          <Typography style={{ width: "100%" }}>{t("faq.how-does-it-work.text")}</Typography>
         </FaqAccordion>
 
-        <FaqAccordion title="Was ist der Kontakt-Index?">
+        <FaqAccordion title={t("faq.what-is-contact-index.title")}>
           <Typography style={{ width: "100%" }}>
-            Der Kontakt-Index wurde von unserer Gruppe entwickelt und in einer wissenschaftlichen Arbeit (
-            <a href="https://www.medrxiv.org/content/10.1101/2020.10.02.20188136v2">Preprint</a>) beschrieben.
-            Grundlegend ist die Beobachtung, dass nicht jede Person die gleiche Zahl von Kontakten pro Tag hat, sondern
-            es dabei sehr große Unterschiede gibt. Da Personen mit sehr vielen Kontakten („Superkontakter“) eine höhere
-            Wahrscheinlichkeit haben, das Coronavirus weiterzugeben, spielt diese Beobachtung eine wichtige Rolle für
-            die Ausbreitung des Coronavirus (siehe auch Freundschaftsparadox). Anders gesagt, ist nicht nur die reine
-            Zahl an Kontakten für die Virusausbreitung entscheidend, sondern auch die Unterschiedlichkeit der
-            Kontaktzahlen (Heterogenität). Der Kontakt-Index zeigt nun sowohl die Gesamtzahl der Kontakte als auch die
-            Heterogenität an. Wir konnten zeigen, dass der Kontakt-Index sehr gut mit der Ausbreitung des Coronavirus in
-            Deutschland korrelierte.
+            <Trans i18nKey="faq.what-is-contact-index.text">
+              part-0
+              <a href="https://www.medrxiv.org/content/10.1101/2020.10.02.20188136v2" target="_blank" rel="noopener">
+                part-1
+              </a>
+              part-2
+            </Trans>
           </Typography>
         </FaqAccordion>
 
-        <FaqAccordion title="Warum hilft es Kontakte zu reduzieren?">
+        <FaqAccordion title={t("faq.why-reduce-contacts.title")}>
           <Typography style={{ width: "100%" }}>
-            Das Coronaviurs überträgt sich von Mensch zu Mensch. Es wird hauptsächlich über die sogenannte
-            Tröpfcheninfektion und über Aerosole übertragen. Je weniger Kontakte jemand hat, desto schwerer ist es für
-            das Virus, sich weiter zu verbreiten. Weitere Informationen zum Coronavirus findest Du auf der{" "}
-            <a href="https://www.rki.de/DE/Content/InfAZ/N/Neuartiges_Coronavirus/Steckbrief.html">
-              Webpage des Robert-Koch-Instituts
-            </a>
-            .
+            <Trans i18nKey="faq.why-reduce-contacts.text">
+              part-0
+              <a
+                href="https://www.rki.de/DE/Content/InfAZ/N/Neuartiges_Coronavirus/Steckbrief.html"
+                target="_blank"
+                rel="noopener"
+              >
+                part-1
+              </a>
+              part-2
+            </Trans>
           </Typography>
         </FaqAccordion>
 
-        <FaqAccordion title="Was kann ich konkret tun, um die Ausbreitung des Coronavirus zu verringern?">
+        <FaqAccordion title={t("faq.what-can-i-do.title")}>
           <Typography style={{ width: "100%" }}>
-            Das Coronaviurs überträgt sich von Mensch zu Mensch, deswegen ist es wichtig, dass wir Kontakte reduzieren
-            und uns zusätzlich an Infektionsschutzmaßnahmen halten und diese umzusetzen. Die{" "}
-            <a href="https://www.infektionsschutz.de/coronavirus/alltag-in-zeiten-von-corona.html">
-              AHA + L + A Formel
-            </a>{" "}
-            fast die wichtigsten Infektionsschutzmaßnahmen zusammen: Abstand halten, Hygiene beachten (Händewaschen, in
-            die Ellenbeuge niesen), Alltagsmaske (Mund-Nasen-Bedeckung) tragen und regelmäßiges Lüften sind sehr
-            wichtig. Das weitere A steht für die
-            <a href="https://www.bundesregierung.de/breg-de/themen/corona-warn-app">Corona-Warn-App</a>, welche
-            Nutzerinnen und Nutzer der App über Kontakte zu infizierten Personen informiert.
+            <Trans i18nKey="faq.what-can-i-do.text">
+              part-0
+              <a
+                href="https://www.infektionsschutz.de/coronavirus/alltag-in-zeiten-von-corona.html"
+                target="_blank"
+                rel="noopener"
+              >
+                part-1
+              </a>
+              part-2
+              <a href="https://www.bundesregierung.de/breg-de/themen/corona-warn-app" target="_blank" rel="noopener">
+                part-3
+              </a>
+              part-4
+            </Trans>
           </Typography>
         </FaqAccordion>
 
-        <FaqAccordion title="Was ist das Freundschaftsparadox?">
+        <FaqAccordion title={t("faq.friendship-paradoxon.title")}>
           <Typography style={{ width: "100%" }}>
-            Der Kontakt-Index ist anschaulich mit dem sogenannten{" "}
-            <a href="https://de.wikipedia.org/wiki/Freundschaftsparadox">Freundschaftsparadox</a> verbunden. Danach gilt
-            für die meisten Menschen - z.B. in Facebook - dass ihre Freunde im Durchschnitt mehr Freunde haben als sie
-            selbst. Das wiederum liegt daran, dass Personen mit vielen Freunden eine höhere Wahrscheinlichkeit haben,
-            mit einer beliebigen Person X verbunden zu sein, als Personen, die wenige Freunde haben. Daher sind
-            vereinfacht gesagt viele Freunde oder Kontakte von X Superkontakter. Diese Beobachtung macht sich auch in
-            der Ausbreitung von Infektionskrankheiten bemerkbar. D.h. wenn ich jemanden anstecke, wird diese Person
-            wahrscheinlich jemand mit vielen Kontakten sein. Also wird im Mittel nicht die mittlere Zahl der Kontakte
-            angesteckt, sondern mehr als diese Zahl. Der Kontakt-Index übernimmt diese Abweichung.
+            <Trans i18nKey="faq.friendship-paradoxon.text">
+              part-0
+              <a href="https://de.wikipedia.org/wiki/Freundschaftsparadox" target="_blank" rel="noopener">
+                part-1
+              </a>
+              part-2
+            </Trans>
           </Typography>
         </FaqAccordion>
       </section>
diff --git a/apps/official/components/pages/Imprint.tsx b/apps/official/components/pages/Imprint.tsx
index 25e7b422..7fc8b140 100644
--- a/apps/official/components/pages/Imprint.tsx
+++ b/apps/official/components/pages/Imprint.tsx
@@ -1,70 +1,70 @@
 import React from "react";
 import Typography from "@material-ui/core/Typography";
 import { NavigationTitle } from "app-config/components/NavigationTitle";
+import { Trans, useTranslation } from "react-i18next";
 
 export const Imprint = () => {
+  const { t } = useTranslation("translation");
+
   return (
     <>
       <main className="sections">
         <section>
-          <NavigationTitle title={"Impressum"} />
+          <NavigationTitle title={t("pages.copyright")} />
         </section>
         <section>
-          <Typography variant="h2">Anbieter</Typography>
-          <Typography variant="body1">Charité – Universitätsmedizin Berlin</Typography>
-          <Typography variant="body1">Zentrale Postanschrift: Charitéplatz 1, 10117 Berlin</Typography>
-          <Typography variant="body1">
-            Die Charité – Universitätsmedizin Berlin ist eine Körperschaft des Öffentlichen Rechts. Sie wird durch den
-            Vorstandsvorsitzenden gesetzlich vertreten.
-          </Typography>
+          <Typography variant="h2">{t("copyright.provider.title")}</Typography>
+          <Typography variant="body1">{t("copyright.provider.text-1")}</Typography>
+          <Typography variant="body1">{t("copyright.provider.text-2")}</Typography>
+          <Typography variant="body1">{t("copyright.provider.text-3")}</Typography>
         </section>
         <section>
-          <Typography variant="h2">Kontakt</Typography>
+          <Typography variant="h2">{t("copyright.contact.title")}</Typography>
           <Typography variant="body1">
-            Für Hinweise, Lob und Kritik schreiben Sie uns bitte eine E-Mail an:{" "}
-            <a href="mailto:covmap@charite.de">covmap@charite.de</a>
+            <Trans i18nKey="copyright.contact.text-1">
+              part-0<a href="mailto:covmap@charite.de">part-1</a>
+            </Trans>
           </Typography>
           <Typography variant="body1">
-            Internet:{" "}
-            <a href="https://www.charite.de" target="_blank" rel="noreferrer">
-              https://www.charite.de
-            </a>
+            <Trans i18nKey="copyright.contact.text-2">
+              part-0
+              <a href="https://www.charite.de" target="_blank" rel="noreferrer">
+                part-1
+              </a>
+            </Trans>
           </Typography>
         </section>
 
         <section>
-          <Typography variant="h2">Verantwortlicher im Sinne des Medienrechts</Typography>
-          <Typography variant="body1">
-            Prof. Dr. Heyo K. Kroemer, der Vorstandsvorsitzende der Charité – Universitätsmedizin Berlin
-          </Typography>
-          <Typography variant="body1">Verantwortlich für Inhalte:</Typography>
-          <Typography variant="body1">Projektleitung CovMap: Dr. med. Alexander H. Thieme, M.Sc.</Typography>
-          <Typography variant="body1">Das gesamte Team:</Typography>
-          <Typography variant="body1">
-            Dr. Thieme (Charité), Dr. Mittermaier (Charité), Dr. Gertler (Charité), Prof. Dr. Lippert (HPI), Dr.
-            Konigorski (HPI), Dr. Edelmann (HPI), PD. Dr. Rüdiger (NET CHECK), Hr. Zernick (NET CHECK)
-          </Typography>
+          <Typography variant="h2">{t("copyright.responsible-media-law.title")}</Typography>
+          <Typography variant="body1">{t("copyright.responsible-media-law.text-1")}</Typography>
+          <Typography variant="body1">{t("copyright.responsible-media-law.text-2")}</Typography>
+          <Typography variant="body1">{t("copyright.responsible-media-law.text-3")}</Typography>
+          <Typography variant="body1">{t("copyright.responsible-media-law.text-4")}</Typography>
+          <Typography variant="body1">{t("copyright.responsible-media-law.text-5")}</Typography>
         </section>
 
         <section>
-          <Typography variant="h2">Zuständige Aufsichtsbehörde</Typography>
-          <Typography variant="body1">
-            Der Regierende Bürgermeister von Berlin – inkl. Wissenschaft und Forschung
-          </Typography>
+          <Typography variant="h2">{t("copyright.competent-supervisory-authority.title")}</Typography>
+          <Typography variant="body1">{t("copyright.competent-supervisory-authority.text-1")}</Typography>
           <Typography variant="body1">
-            Kontakt:{" "}
-            <a href="https://www.berlin.de/rbmskzl/" target="_blank" rel="noreferrer">
-              https://www.berlin.de/rbmskzl/
-            </a>
+            <Trans i18nKey="copyright.competent-supervisory-authority.text-2">
+              part-0
+              <a href="https://www.berlin.de/rbmskzl/" target="_blank" rel="noreferrer">
+                part-1
+              </a>
+            </Trans>
           </Typography>
-          <Typography variant="body1">Senatsverwaltung für Gesundheit, Pflege und Gleichstellung</Typography>
+          <Typography variant="body1">{t("copyright.competent-supervisory-authority.text-3")}</Typography>
           <Typography variant="body1">
-            Kontakt:{" "}
-            <a href="https://www.berlin.de/sen/gpg/" target="_blank" rel="noreferrer">
-              https://www.berlin.de/sen/gpg/
-            </a>
+            <Trans i18nKey="copyright.competent-supervisory-authority.text-4">
+              part-0
+              <a href="https://www.berlin.de/sen/gpg/" target="_blank" rel="noreferrer">
+                part-1
+              </a>
+            </Trans>
           </Typography>
-          <Typography variant="body1">Umsatzsteuer-Identifikationsnummer: DE 228847810</Typography>
+          <Typography variant="body1">{t("copyright.competent-supervisory-authority.text-5")}</Typography>
         </section>
       </main>
     </>
diff --git a/apps/official/components/pages/Legal.tsx b/apps/official/components/pages/Legal.tsx
index 033b02f0..c1c5b10f 100644
--- a/apps/official/components/pages/Legal.tsx
+++ b/apps/official/components/pages/Legal.tsx
@@ -1,57 +1,39 @@
 import React from "react";
 import Typography from "@material-ui/core/Typography";
 import { NavigationTitle } from "app-config/components/NavigationTitle";
+import { useTranslation } from "react-i18next";
 
 export const Legal = () => {
+  const { t } = useTranslation("translation");
+
   return (
     <>
       <main className="sections">
         <section>
-          <NavigationTitle title={"Rechtliches"} />
+          <NavigationTitle title={t("pages.legal")} />
         </section>
         <section>
-          <Typography variant="h2">Rechtliche Hinweise</Typography>
-          <Typography variant="body1">Haftungsausschluss (Disclaimer)</Typography>
+          <Typography variant="h2">{t("legal.legal-info.title")}</Typography>
+          <Typography variant="body1">{t("legal.legal-info.text")}</Typography>
         </section>
         <section>
-          <Typography variant="h2">Allgemeiner Hinweis</Typography>
-          <Typography variant="body1">
-            Die Nutzung dieser App ersetzt keine ärztliche Behandlung. Wenn Sie sich aktuell schwer krank fühlen, suchen
-            Sie bitte umgehend medizinische Hilfe.
-          </Typography>
+          <Typography variant="h2">{t("legal.general-info.title")}</Typography>
+          <Typography variant="body1">{t("legal.general-info.text")}</Typography>
         </section>
 
         <section>
-          <Typography variant="h2">Haftung für Inhalte</Typography>
-          <Typography variant="body1">
-            Als Dienstanbieter sind wir gemäß § 7 Abs.1 TMG für eigene Inhalte nach den allgemeinen Gesetzen
-            verantwortlich. Nach §§ 8 bis 10 TMG sind wir als Dienstanbieter jedoch nicht verpflichtet, übermittelte
-            oder gespeicherte fremde Informationen zu überwachen. Verpflichtungen zur Entfernung oder Sperrung der
-            Nutzung von Informationen nach den allgemeinen Gesetzen bleiben hiervon unberührt.
-          </Typography>
+          <Typography variant="h2">{t("legal.liability-for-contents.title")}</Typography>
+          <Typography variant="body1">{t("legal.liability-for-contents.text")}</Typography>
         </section>
 
         <section>
-          <Typography variant="h2">Haftung für Links</Typography>
-          <Typography variant="body1">
-            Unser Angebot enthält Links zu externen Webseiten Dritter, auf deren Inhalte wir keinen Einfluss haben.
-            Deshalb können wir für diese fremden Inhalte auch keine Gewähr übernehmen. Für die Inhalte der verlinkten
-            Seiten ist stets der jeweilige Anbieter oder Betreiber der Seiten verantwortlich.
-          </Typography>
+          <Typography variant="h2">{t("legal.liability-for-links.title")}</Typography>
+          <Typography variant="body1">{t("legal.liability-for-links.text")}</Typography>
         </section>
 
         <section>
-          <Typography variant="h2">Urheberrecht</Typography>
-          <Typography variant="body1">
-            Die durch den Dienstanbieter erstellten Inhalte und Werke auf diesen Seiten unterliegen dem deutschen
-            Urheberrecht. Die Vervielfältigung, Bearbeitung, Verbreitung und jede Art der Verwertung außerhalb der
-            Grenzen des Urheberrechtes bedürfen der schriftlichen Zustimmung des jeweiligen Autors bzw. Erstellers.
-            Downloads und Kopien dieser Seite sind nur für den privaten, nicht kommerziellen Gebrauch gestattet. Soweit
-            die Inhalte auf dieser Seite nicht vom Betreiber erstellt wurden, werden die Urheberrechte Dritter beachtet.
-            Insbesondere werden Inhalte Dritter als solche gekennzeichnet. Sollten Sie trotzdem auf eine
-            Urheberrechtsverletzung aufmerksam werden, bitten wir um einen entsprechenden Hinweis. Bei Bekanntwerden von
-            Rechtsverletzungen werden wir derartige Inhalte umgehend entfernen.
-          </Typography>
+          <Typography variant="h2">{t("legal.copyright.title")}</Typography>
+          <Typography variant="body1">{t("legal.copyright.text")}</Typography>
         </section>
       </main>
     </>
diff --git a/apps/official/components/pages/Privacy.tsx b/apps/official/components/pages/Privacy.tsx
index 23c84f35..2556cdb8 100644
--- a/apps/official/components/pages/Privacy.tsx
+++ b/apps/official/components/pages/Privacy.tsx
@@ -1,201 +1,75 @@
 import React from "react";
 import Typography from "@material-ui/core/Typography";
 import { NavigationTitle } from "app-config/components/NavigationTitle";
+import { Trans, useTranslation } from "react-i18next";
 
 export const Privacy = () => {
+  const { t } = useTranslation("translation");
+
   return (
     <>
       <main className="sections">
         <section>
-          <NavigationTitle title={"Datenschutzrechtliche Informationen gemäß Art. 13 DS-GVO "} />
+          <NavigationTitle title={t("privacy.title")} />
         </section>
         <section>
-          <Typography variant="h2">1. Datenschutzrechtliche Verantwortlichkeit</Typography>
-          <Typography variant="body1">
-            <p>
-              Die CovMap ist ein Projekt der Charité – Universitätsmedizin Berlin, die für die Verarbeitung
-              personenbezogener Daten auf dieser Website verantwortlich ist. Die Kontaktdaten lauten wie folgt:
-            </p>
-            Charité – Universitätsmedizin Berlin Charitéplatz 1<br />
-            10117 Berlin
-            <br />
-            Deutschland
-            <br />
-            <br />
-            Tel: +49 (0) 30 450 50
-            <br />
-            Website:{" "}
-            <a href="http://www.charite.de" target="_blank" rel="noreferrer">
-              www.charite.de
-            </a>
-            <br />
-            <p>
-              Für die Datenverarbeitung auf Ihrem Endgerät, auf das Sie die CovMap laden, sind Sie selbst
-              verantwortlich. Das gilt auch für die Eingabe der Postleitzahl (siehe unter 5 c)).
-            </p>
-            <p>
-              Grundlage der für den Nutzer der Website visualisierten Darstellung sind Daten, die von der Firma NET
-              CHECK GmbH zusammengestellt und verarbeitet werden. Die Charité übernimmt mit diesem Webangebot die reine
-              Visualisierung in Form einer Deutschlandkarte der insoweit von der NET CHECK GmbH zur Verfügung gestellten
-              Information. Die Charité haftet nur für eigene Inhalte; als Diensteanbieter ist die Charité nicht
-              verpflichtet, übermittelte fremde Informationen zu prüfen oder zu überwachen.
-            </p>
+          <Typography variant="h2">1. {t("privacy.responsible.title")}</Typography>
+          <Typography variant="body1" style={{ whiteSpace: "break-spaces" }}>
+            <Trans i18nKey="privacy.responsible.text">
+              <p>part-0</p>
+              <p>part-1</p>
+              <p>
+                part-2
+                <a href="http://www.charite.de" target="_blank" rel="noreferrer">
+                  nested-part-1
+                </a>
+              </p>
+              <p>part-4</p>
+              <p>part-5</p>
+            </Trans>
           </Typography>
         </section>
 
         <section>
-          <Typography variant="h2">2. Datenschutzbeauftragte</Typography>
-          <Typography variant="body1">
-            Bei Fragen zur Verarbeitung Ihrer personenbezogenen Daten sowie zu Ihren Rechten rund um den Datenschutz,
-            die sich auf die Charité beziehen, wenden Sie sich bitte an unsere Datenschutzbeauftragte:
-            <br />
-            <br />
-            t: +49 30 450 580 016
-            <br />
-            E-Mail: datenschutz(at)charite.de
+          <Typography variant="h2">2. {t("privacy.data-protection-officer.title")}</Typography>
+          <Typography variant="body1" style={{ whiteSpace: "break-spaces" }}>
+            {t("privacy.data-protection-officer.text")}
           </Typography>
         </section>
 
         <section>
-          <Typography variant="h2">3. Personenbezogene Daten, Art. 4 Nr. 1 DS-GVO</Typography>
-          <Typography variant="body1">
-            Personenbezogene Daten sind alle Informationen, die sich auf eine identifizierte oder identifizierbare
-            natürliche Person beziehen. Als identifizierbar wird eine natürliche Person angesehen, die direkt oder
-            indirekt identifiziert werden kann - insbesondere mittels Zuordnung zu einer Kennung wie einem Namen, zu
-            einer Kennnummer, zu Standortdaten oder zu einer Online-Kennung (IP-Adresse).
-          </Typography>
+          <Typography variant="h2">3. {t("privacy.personal-data.title")}</Typography>
+          <Typography variant="body1">{t("privacy.personal-data.text")}</Typography>
         </section>
 
         <section>
-          <Typography variant="h2">4. Installation der CovMap</Typography>
-          <Typography variant="body1">
-            Bei der CovMap handelt es sich sowohl um eine Web-App als auch um eine App, die über eine von Dritten
-            betriebene Vertriebsplattform erhältlich ist, sogenannter App-Store (hier Google Play). Ihr Download setzt
-            gegebenenfalls eine vorherige Registrierung beim jeweiligen App-Store und die Installation der
-            App-Store-Software voraus. Wir haben keinen Einfluss auf die Verarbeitung von personenbezogenen Daten im
-            Zusammenhang mit Ihrer Registrierung und der Bereitstellung von Downloads in dem jeweiligen App-Store und
-            der App-Store-Software. Verantwortliche Stelle ist insoweit allein der Betreiber des jeweiligen App-Stores.
-          </Typography>
+          <Typography variant="h2">4. {t("privacy.installation.title")}</Typography>
+          <Typography variant="body1">{t("privacy.installation.text")}</Typography>
         </section>
 
         <section>
-          <Typography variant="h2">5. Aufruf der CovMap</Typography>
-          <Typography variant="body1">
-            a. Log-Dateien (sog. Log Files)
-            <br />
-            Bei jedem Zugriff auf die CovMap werden Daten über diesen Vorgang vorübergehend in einer Protokolldatei
-            verarbeitet. Im Einzelnen werden folgende Daten gespeichert:
-            <br />
-            • das Datum und die Uhrzeit des Aufrufs der CovMap
-            <br />
-            • verwendete Webbrowser und verwendetes Betriebssystem
-            <br />
-            • die vollständige IP-Adresse des anfordernden Endgeräts <br />
-            • der Name und die URL der abgerufenen Datei
-            <br />
-            • im Fall des Aufrufs der Web-App auch die Webseite, von der aus der Zugriff erfolgt
-            <br />
-            <br />
-            Diese Datenverarbeitung durch unser System dient dem Zweck und unserem Interesse, die Auslieferung der
-            CovMap an das Endgerät des Nutzers/der Nutzerin zu ermöglichen. Hierfür muss die IP-Adresse der Nutzenden
-            für die Dauer der Sitzung gespeichert bleiben. Ihre IP-Adresse löschen wir nach Ablauf von 20 Tagen. Wir
-            speichern sie 20 Tage lang, damit wir im Fall von Datensicherheitsmängeln oder Problemen von Eingriffen der
-            Nutzenden Rechtsverstöße verfolgen können. Nach Ende der Aufbewahrung werden die IP-Adressen unverzüglich
-            gelöscht. Im Übrigen werden die Daten in unserem System gelöscht, wenn die jeweilige Sitzung beendet ist.
-            <br />
-            Die Erfassung der Daten zur Bereitstellung CovMap ist für den Betrieb der Applikation zwingend erforderlich.
-            Rechtsgrundlage hierfür ist Art. 6 Abs. 1 S. 1 lit. f DS-GVO.
-            <br />
-            <br />
-            b. Session-Cookies
-            <br />
-            Beim Aufruf der CovMap erheben wir während einer laufenden Verbindung über Ihren Internet-browser und mit
-            Hilfe von technisch notwendigen sog. Session-Cookies Daten. Diese Daten beziehen sich lediglich auf Ihre
-            IP-Adresse (siehe nachstehende Bullet Points). Session-Cookies ermöglichen die Funktionalität dieser
-            Anwendungen. Sie verfallen nach 24 Stunden. Die meisten Browser sind so eingestellt, dass sie Cookies
-            automatisch akzeptieren. Sie können das Speichern von Cookies jedoch deaktivieren oder Ihren Browser so
-            einstellen, dass er Sie benachrichtigt, sobald Cookies gesendet werden. Durch den Einsatz von Cookies
-            fließen der Stelle, die den Cookie setzt (hier der durch uns eingesetzte Auftragsverarbeiter KeyCDN, siehe
-            dazu unter 6.) folgende Informationen zu:
-            <br />
-            • Datum und Uhrzeit des Aufrufs der Website
-            <br />
-            • verwendete Webbrowser und verwendetes Betriebssystem
-            <br />
-            • vollständige IP-Adresse des anfordernden Endgeräts
-            <br />
-            • übertragene Datenmenge
-            <br />
-            • Name des verwendeten Internet-Providers.
-            <br />
-            Die Verarbeitung erfolgt ebenfalls auf der Rechtsgrundlage des Art. 6 Abs. 1 lit. f DS-GVO. Unser
-            berechtigtes Interesse bei der Verwendung von technischen Cookies liegt in der Ermöglichung der Nutzung und
-            Bereitstellung der CovMap. Bei den Cookies handelt es sich um für die Nutzung von CovMap technisch zwingend
-            notwendige Cookies. <br />
-            <br />
-            c. Eingabe der Postleitzahl
-            <br />
-            Bei Aufruf der App besteht die Möglichkeit, dass Sie die Postleitzahl Ihrer Heimatadresse eingeben. Sofern
-            Sie Ihre Postleitzahl eingeben, wird Ihnen bei der anschließenden Darstellung der Deutschlandkarte auf den
-            ersten Blick der Bereich Ihrer Heimatadresse und der unmittelbaren Umgebung angezeigt. Geben Sie keine
-            Postleitzahl ein, können Sie den Fokus auf den Sie interessierenden Kartenabschnitt selbstständig manuell
-            einstellen. <br />
-            Dies ist eine freiwillige Option und keine Voraussetzung zur Nutzung der CovMap. Die Eingabe der
-            Postleitzahl findet ausschließlich auf Ihrem lokalen Endgerät statt. Es erfolgt keine Verknüpfung mit
-            personenbezogenen Daten durch uns. Bei der Postleitzahl handelt es sich insoweit nicht um ein
-            personenbezogenes Datum.
+          <Typography variant="h2">5. {t("privacy.calling-covmap.title")}</Typography>
+          <Typography variant="body1" style={{ whiteSpace: "break-spaces" }}>
+            {t("privacy.calling-covmap.text")}
           </Typography>
         </section>
 
         <section>
-          <Typography variant="h2">6. Empfänger von personenbezogenen Daten</Typography>
-          <Typography variant="body1">
-            Die Verarbeitung der IP-Adresse der Nutzerinnen und Nutzer der CovMap erfolgt mit den entsprechend
-            vereinbarten Sicherheitsanforderungen im Rahmen einer Auftragsverarbeitung nach Art. 28 Abs. 3 DS-GVO durch
-            den Technologiedienstleister proinity LLC, Rümikerstrasse 60, 8409 Winterthur, Schweiz ("KeyCDN").
-            Verantwortlich für die Datenverarbeitung bleiben wir.
-            <br />
-            Mit oder ohne Eingabe Ihrer Postleitzahl zeigt Ihnen die CovMap im Anschluss an den Aufruf der Seite bzw.
-            App eine Karte an, auf der tagesaktuell visualisiert wird, in welchen Gebieten ein lokaler Ausbruch von
-            Covid-19 zu erwarten ist. Zur Darstellung der Karte setzen wir ebenfalls den Dienst von KeyCDN ein. Die
-            IP-Adresse wird nicht gespeichert. <br />
-            Ansonsten werden im Rahmen der Nutzung der CovMap keine personenbezogenen Daten von Ihnen an Dritte
-            übermittelt, es sei denn, wir sind von Gesetzes wegen dazu verpflichtet oder Sie haben Ihre Einwilligung
-            erklärt.
-            <br />
+          <Typography variant="h2">6. {t("privacy.recipient-of-personal-data.title")}</Typography>
+          <Typography variant="body1" style={{ whiteSpace: "break-spaces" }}>
+            {t("privacy.recipient-of-personal-data.text")}
           </Typography>
         </section>
 
         <section>
-          <Typography variant="h2">
-            7. Keine Pflicht zur Bereitstellung; keine automatisierte Entscheidungsfindung einschl. Profiling
-          </Typography>
-          <Typography variant="body1">
-            Eine Pflicht zur Bereitstellung der personenbezogenen Daten besteht nicht. Eine automatisierte
-            Entscheidungsfindung findet nicht statt.
-          </Typography>
+          <Typography variant="h2">7. {t("privacy.no-obligation-to-provide.title")}</Typography>
+          <Typography variant="body1">{t("privacy.no-obligation-to-provide.text")}</Typography>
         </section>
 
         <section>
-          <Typography variant="h2">8. Ihre Rechte</Typography>
-          <Typography variant="body1">
-            Sie haben grundsätzlich folgende Rechte hinsichtlich der Sie betreffenden personenbezogenen Daten: <br />
-            - Recht auf Auskunft (Art. 15 DS-GVO) <br />
-            - Recht auf Berichtigung (Art. 16 DS-GVO) <br />
-            - Recht auf Löschung (Art. 17 DS-GVO; “Recht auf Vergessenwerden”)
-            <br />
-            - Recht auf Einschränkung der Verarbeitung (Art. 18 DS-GVO)
-            <br />
-            - Recht auf Widerspruch gegen die Verarbeitung (Art. 21 DS-GVO)
-            <br />
-            - Recht auf Datenübertragbarkeit (Art. 20 DS-GVO) <br />
-            Soweit Sie uns eine Einwilligung in die Verarbeitung Ihrer Daten erteilt haben, können Sie diese jederzeit
-            mit Wirkung für die Zukunft widerrufen. Die Rechtmäßigkeit der Verarbeitung Ihrer Daten bis zum Widerruf
-            bleibt hiervon unberührt. Sie haben zudem das Recht, sich bei einer Datenschutz-Aufsichtsbehörde in dem
-            Mitgliedstaat Ihres Aufenthaltsorts, Ihres Arbeitsplatzes oder des Orts des mutmaßlichen Verstoßes über die
-            Verarbeitung Ihrer personenbezogenen Daten durch uns zu beschweren, wenn Sie der Ansicht sind, dass die
-            Verarbeitung der Sie betreffenden personenbezogenen Daten rechtswidrig erfolgt.
-            <br />
+          <Typography variant="h2">8. {t("privacy.your-rights.title")}</Typography>
+          <Typography variant="body1" style={{ whiteSpace: "break-spaces" }}>
+            {t("privacy.your-rights.text")}
           </Typography>
         </section>
       </main>
diff --git a/apps/official/components/pages/RKI.tsx b/apps/official/components/pages/RKI.tsx
index 1d2078ef..07a73bf0 100644
--- a/apps/official/components/pages/RKI.tsx
+++ b/apps/official/components/pages/RKI.tsx
@@ -1,26 +1,20 @@
 import React from "react";
 import Typography from "@material-ui/core/Typography";
 import { NavigationTitle } from "app-config/components/NavigationTitle";
+import { useTranslation } from "react-i18next";
 
 const RKI = () => {
+  const { t } = useTranslation("translation");
+
   return (
     <main className="sections">
       <section>
-        <NavigationTitle title="7-Tages-Inzidenz (RKI)" backToExpandedFeatureInfo={true} />
+        <NavigationTitle title={t("rki.title")} backToExpandedFeatureInfo={true} />
       </section>
 
       <section>
-        <Typography>
-          Wie berechnet sich die 7-Tages-Inzidenz (Anzahl der Neuinfektionen pro 100.000 Einwohner der letzten 7 Tage)?
-        </Typography>
-        <Typography>
-          Es werden alle gemeldeten Neuinfektionen der jeweils zurückliegenden sieben Tage innerhalb eines Landkreises
-          addiert. Diese Summe wird durch die Einwohnerzahl des jeweiligen Landkreises geteilt. Danach wird dieser Wert
-          mit 100.000 multipliziert. Die 7-Tages-Inzidenz stellt eine etablierte Größe dar, um aktuelle Hotspots der
-          Coronavirus-Epidemie zu identifizieren. Man muss jedoch davon ausgehen, dass nicht alle Fälle gemeldet werden.
-          Darüber hinaus gibt es einen Meldeverzug, da zwischen der Infektion und der Bestätigung durch einen Labortest
-          und Meldung des Ergebnisses an das Robert-Koch-Instituts Zeit vergeht.
-        </Typography>
+        <Typography>{t("rki.intro")}</Typography>
+        <Typography>{t("rki.text")}</Typography>
       </section>
     </main>
   );
diff --git a/apps/official/components/pages/SymptomLevel.tsx b/apps/official/components/pages/SymptomLevel.tsx
index 2afed6b5..53686d45 100644
--- a/apps/official/components/pages/SymptomLevel.tsx
+++ b/apps/official/components/pages/SymptomLevel.tsx
@@ -1,29 +1,26 @@
 import React from "react";
 import Typography from "@material-ui/core/Typography";
 import { NavigationTitle } from "app-config/components/NavigationTitle";
+import { Trans, useTranslation } from "react-i18next";
 
 const SymptomLevel = () => {
+  const { t } = useTranslation("translation");
+
   return (
     <main className="sections">
       <section>
-        <NavigationTitle title="Symptomlast" backToExpandedFeatureInfo={true} />
+        <NavigationTitle title={t("symptom-level.title")} backToExpandedFeatureInfo={true} />
       </section>
 
       <section>
         <Typography>
-          Wenige Tage nach einer Coronavirusinfektion entwickelt ein Teil der Personen Symptome wie zum Beispiel Husten,
-          Fieber oder einen Verlust des Geschmacks. Diese Symptome gehören zu den frühesten beobachtbaren Ereignissen
-          einer Infektion, sind jedoch nicht spezifisch für das Coronavirus und können beispielsweise auch bei einer
-          harmlosen Erkältung auftreten. Falls man jedoch eine große Menschenmenge nach Symptomen befragt, kann man
-          Hotspots des Coronavirus früher detektieren. Wir verwenden die Charité{" "}
-          <a target="_blank" href="http://www.covapp.de" rel="noreferrer">
-            CovApp
-          </a>
-          , um die Antworten nach Symptomen von einer großen Anzahl von Menschen auszuwerten, und können daher indirekt
-          auf eine Aktivität des Coronavirus in einer Region Rückschlüsse ziehen.
-          <br />
-          <br />
-          Wir bereiten diese Funktion gerade vor und werden sie Dir bald zur Verfügung stellen können.
+          <Trans i18nKey="symptom-level.text">
+            part-0
+            <a target="_blank" href="http://www.covapp.de" rel="noreferrer">
+              part-1
+            </a>
+            part-2
+          </Trans>
         </Typography>
       </section>
     </main>
diff --git a/apps/official/components/risk-recommendation/RiskRecommendation.tsx b/apps/official/components/risk-recommendation/RiskRecommendation.tsx
index ab57f2e4..eafd9c8d 100644
--- a/apps/official/components/risk-recommendation/RiskRecommendation.tsx
+++ b/apps/official/components/risk-recommendation/RiskRecommendation.tsx
@@ -3,32 +3,32 @@ import { makeStyles } from "@material-ui/core/styles";
 import { Paper } from "@material-ui/core";
 import Typography from "@material-ui/core/Typography";
 import { ContactScore } from "../../models";
+import { useTranslation } from "react-i18next";
+import { TFunction } from "i18next";
 
-function riscExplanation(contactScore: number, incidence: number): string {
+function riscExplanation(t: TFunction, contactScore: number, incidence: number): string {
   if (incidence < 20 && contactScore <= 0) {
-    return "Die Zahl der Neuinfektionen ist niedrig und das Kontaktverhalten ist ausreichend reduziert. Ein normales Risiko bedeutet nicht, dass keine Neuinfektionen in der Region möglich sind.";
+    return t("risk-recommendation.low");
   }
 
   let explanation = "";
 
   if (incidence >= 50) {
-    explanation = "Die Zahl der Neuinfektionen ist stark erhöht. ";
+    explanation = t("risk-recommendation.high.intro");
     if (contactScore == 1) {
-      explanation +=
-        "Aufgrund eines erhöhten Kontaktverhalten kann sich das Coronavirus leicht weiter verbreiten und unser Modell sagt einen weiteren Anstieg der Neuinfektionen voraus. ";
+      explanation += t("risk-recommendation.contact-score-info");
     }
-    explanation += "Wir rufen dazu auf, Kontakte freiwillig auf das Allernötigste zu reduzieren.";
+    explanation += t("risk-recommendation.high.outro");
     return explanation;
   }
 
   if (incidence >= 20) {
-    explanation = "Die Zahl der Neuinfektionen ist mäßig erhöht. ";
+    explanation = t("risk-recommendation.medium.intro");
   }
   if (contactScore == 1) {
-    explanation +=
-      "Aufgrund eines erhöhten Kontaktverhalten kann sich das Coronavirus leicht weiter verbreiten und unser Modell sagt einen weiteren Anstieg der Neuinfektionen voraus. ";
+    explanation += t("risk-recommendation.contact-score-info");
   }
-  explanation += "Wir rufen dazu auf, Kontakte freiwillig zu reduzieren.";
+  explanation += t("risk-recommendation.high.outro");
   return explanation;
 }
 
@@ -44,10 +44,11 @@ export const RiskRecommendation: React.FC<{ contactScore: ContactScore; incidenc
   incidence,
 }): JSX.Element => {
   const classes = useStyles();
+  const { t } = useTranslation("translation");
 
   return (
     <Paper className={classes.paper} elevation={0}>
-      <Typography>{riscExplanation(contactScore, incidence)}</Typography>
+      <Typography>{riscExplanation(t, contactScore, incidence)}</Typography>
     </Paper>
   );
 };
diff --git a/apps/official/static/locales/de/translation.json b/apps/official/static/locales/de/translation.json
index 1948c7c9..7cf90b66 100644
--- a/apps/official/static/locales/de/translation.json
+++ b/apps/official/static/locales/de/translation.json
@@ -6,11 +6,257 @@
     "about": "Über die CovMap",
     "legal": "Rechtliches",
     "copyright": "Impressum",
-    "privacy-policy": "Datenschutz"
+    "privacy-policy": "Datenschutz",
+    "contact-behavior": "Kontaktverhalten"
   },
   "formats": {
     "date": "{{ date, dddd, Do MMMM YYYY}}"
   },
   "risk-score": "Risikoeinschätzung",
-  "search-placeholder": "PLZ oder Landkreis"
+  "search-placeholder": "PLZ oder Landkreis",
+  "basic-recommendations": {
+    "title": "Wie kann ich mich verhalten?",
+    "county-teaser": "Informiere Dich über aktuelle Verhaltensregeln für {{county}} hier.",
+    "intro-teaser-1": "Die Pandemie ist noch nicht vorbei und wir alle haben das Ziel die Pandemie soweit es geht einzudämmen und natürlich Risikogruppen zu schützen. Besonders die bevorstehende kalte Jahreszeit, in der wir uns überwiegend in geschlossen Räumen aufhalten, stellt eine Herausforderung dar. Es kommt jetzt auf Dich, auf uns, auf jeden Einzelnen an!",
+    "intro-teaser-2": "In den letzten Monaten konnte immer wieder gezeigt werden, dass ganz einfache Maßnahmen, die von jedem umgesetzt werden können, sehr viel Wirkung haben.",
+    "contact": {
+      "headline": "Kontakte reduzieren",
+      "text": "Kontakte reduzieren ist eine der wirkungsvollsten Maßnahmen.\nDas Virus wird von Mensch-zu-Mensch übertragen. Wenn man sich nicht trifft, kann das Virus also nicht übertragen werden. Greife zum Telefonhörer, halte eine Videokonferenz und arbeite von zu Hause, wann immer dies möglich ist. So schwer es auch fällt, Kontakte minimieren schützt und hilft uns allen, vor allem in Risikogebieten. Seid dabei und helft mit!"
+    },
+    "distance": {
+      "headline": "Abstand halten",
+      "text": "Falls Du Kontakt zu einer Person hast, dann halte einen Abstand von mindestens 1.5 Metern. Je mehr Abstand, umso besser."
+    },
+    "mask": {
+      "headline": "Maske tragen",
+      "text": "Wenn Du infiziert bist und Du eine Alltagsmaske trägst, verringert sich das Risiko, dass Du andere Personen ansteckst. Sind Kontakte nicht vermeidbar, kann das Tragen einer Maske also sowohl Dich, als auch Dein Gegenüber schützen."
+    },
+    "ventilation": {
+      "headline": "Regelmäßig lüften",
+      "text": "Das Virus kann über die Luft übertragen werden.\nWenn Du Dich mit anderen Personen triffst, dann tue dies am besten an der frischen Luft.\nFalls Du Dich doch in einen geschlossenen Raum begeben musst, dann sorge für eine gute Luftzirkulation, indem Du Fenster öffnest und gut lüftest."
+    },
+    "hygiene": {
+      "headline": "Hygienemaßnahmen",
+      "text": "Hygienemaßnahmen können Infektionen verringern.\nDas Verwenden von Desinfektionsmitteln und das Händewaschen können dazu beitragen, Infektionen zu verhindern, wenn Du Dinge angefasst hast, die potentiell mit dem Virus kontaminiert sind."
+    },
+    "regional": {
+      "headline": "Lokale Regeln",
+      "text": "Informiere Dich über lokale Regeln und Maßnahmen in Deiner Region."
+    },
+    "final-teaser": "Zusammen können wir es schaffen!\nGegenseitige Rücksichtnahme, Verständnis und Geduld sind die Gebote dieser Stunde."
+  },
+  "charts": {
+    "contact-index": "Kontaktindex C",
+    "reproduction-rate": "Reproduktionszahl R"
+  },
+  "contact-behavior": {
+    "intro": "Was ist das Kontaktverhalten und warum ist es wichtig?",
+    "text-1": "Das Virus wird von Mensch zu Mensch übertragen. Indem wir Kontakte reduzieren, können wir es dem Virus erschweren, sich in der Bevölkerung zu verbreiten. Dabei ist der <1>R-Wert</1> ist eine wichtige Maßzahl, mit der wir beurteilen können, ob wir es dem Virus schwer genug gemacht haben.",
+    "text-2": "Der R-Wert besagt, wie viele Personen von einer infizierten Person im Durchschnitt angesteckt werden. Wenn der R-Wert 1 beträgt, bedeutet dies, dass eine infizierte Person im Schnitt nur eine weitere ansteckt. Ziel ist es, durch Maßnahmen einen R Wert unter 1 zu erreichen, d.h., dass eine infizierte Person im Durchschnitt weniger als eine weitere Person ansteckt. Ein R-Wert oberhalb von 1 führt dagegen zu einer Kettenreaktion mit einem unkontrollierten Anstieg der Fallzahlen. Der R-Wert hängt einerseits von der Biologie des Virus ab (\"wie ansteckungsfähig ist das Virus?\"), andererseits von unserem Kontaktverhalten (\"auf wie viele Personen treffe ich?\"). Während wir die Biologie des Virus nicht ändern können, können wir durch unser Kontaktverhalten einen großen Einfluss auf das Infektionsgeschehen nehmen. Indem wir unsere Kontakte reduzieren, können wir es auch einem hoch ansteckenden Virus so schwer machen, eine weitere Person zu infizieren, dass der R-Wert unter 1 sinkt.",
+    "text-3": "Das Problem des R-Werts ist es, dass er das Infektionsgeschehen mit mehreren Tage Verzögerung abbildet, da er aus der Zahl der bestätigten Infektionen berechnet wird. Dies erscheint auch logisch, wenn man bedenkt, dass man nach einer Ansteckung mit dem Coronavirus nicht sofort Symptome entwickelt und auch das Ergebnis eines Labortests mit mehreren Tagen Verzögerung dem Robert-Koch-Institut mitgeteilt wird. Der R-Wert ist somit immer ein Blick in die Vergangenheit.",
+    "text-4": "Unsere Gruppe hat ein <1>Modell für das Kontaktverhalten auf Basis von GPS Daten</1> entwickelt. Über die Berechnung eines sogenannten Kontakt-Index können wir den R-Wert vorhersagen. Der Vorteil vom Kontakt-Index ist nun, dass er fast ohne Verzögerung berechnet werden kann.",
+    "text-5": "Von einem erhöhten Kontaktverhalten sprechen wir, wenn unser Modell voraussagt, dass in einer Region so viele Kontakte vorhanden sind, dass sich das Virus leicht ausbreiten kann und wir davon ausgehen, dass der R-Wert über 1 liegen wird.",
+    "external-explanation-reproduction-rate": "https://www.rki.de/DE/Content/InfAZ/N/Neuartiges_Coronavirus/Projekte_RKI/R-Wert-Erlaeuterung.pdf?__blob=publicationFile"
+  },
+  "credits": {
+    "project-description": "CovMap ist ein Gemeinschaftsprojekt der Charité - Universitätsmedizin Berlin, des Hasso-Plattner-Instituts (HPI) und der Firma NET CHECK.",
+    "project-management": {
+      "title": "Projektleitung",
+      "text": "Charité: Dr. med. Alexander H. Thieme, M. Sc.\nGesamtkonzept, CovMap, Datenanalyse Symptome\n\nHPI: Prof. Dr. Christoph Lippert\nDatenanalyse, Modellerstellung, Prognosen\n\nNET CHECK: PD. Dr. Sten Rüdiger\nDatenanalyse GPS-Daten, Kontakt-Index"
+    },
+    "appreciation": {
+      "title": "Die CovMap App wurde mit der Unterstützung von zahlreichen Personen und Unternehmen entwickelt. Wir möchten an dieser Stelle unseren großen Dank aussprechen.",
+      "intro": "Wir danken den Unternehmen",
+      "port-blue-sky": "Port Blue Sky: für die technische Unterstüzung der App durch Ihre Mitarbeiter sowie das Organisieren von weiterer Unterstützung aus der Node.js Community.",
+      "pwc": "PWC: für Lob, Kritik und Rat bei der Umsetzung der CovMap.",
+      "maptiler": "Maptiler: für die Unterstützung in Form von Kartendaten.",
+      "contributors-intro": "Ganz besonders möchten wir folgenden Personen danken"
+    }
+  },
+  "faq": {
+    "title": "Fragen und Antworten zur CovMap!",
+    "what-is-covmap": {
+      "title": "Was ist die CovMap?",
+      "text": "Die CovMap visualisiert eine regionale Risikoeinschätzung auf einer Deutschlandkarte. Die Risikoeinschätzung beruht auf täglich aktualisierten Fallzahlstatistiken des Robert-Koch-Instituts und Vorhersagen von selbst entwickelten Modellen basierend auf dem Kontaktverhalten und berichteten Symptomen der Bevölkerung. Mit der CovMap möchten wir folgende Fragen zum Coronavirus adressieren:",
+      "regional-risk": "Wie hoch ist das regionale Risiko?",
+      "how-to-protect": "Wie kann ich mich schützen?",
+      "current-rules-in-county": "Welche Verhaltensregeln gelten im Landkreis?",
+      "outro": "Mit der CovMap möchten wir zu einer freiwilligen Reduzierung von Kontakten aufrufen und aufzeigen, wo dies besonders notwendig ist."
+    },
+    "how-to-access": {
+      "title": "Wie kann ich die CovMap erreichen?",
+      "text": "Die CovMap ist als WebApp über <1>www.covmap.de</1> und <3>covmap.charite.de</3> und als Android App über den Play Store (bald verfügbar) erreichbar."
+    },
+    "what-is-special": {
+      "title": "Was macht die CovMap besonders?",
+      "text": "Die CovMap wertet zur regionalen Risikobestimmung neben den offiziellen Fallzahlstatistiken des Robert-Koch-Instituts große Sätze an GPS- und Symptom-Daten aus. Diese Daten entstammen aus anderen Apps, bei denen die Nutzer der Auswertung ihrer GPS Daten zugestimmt haben. Diese Daten sind die Basis für ein von uns entwickeltes Modell, welches den Kontakt-Index berechnet. Zudem werden aktuelle Symptome abgefragt, ausgewertet und fließen zusätzlich in die Risikoeinschätzung mit ein (bald verfügbar). Der Kontakt-Index und die Symptome spiegeln frühzeitig das Infektionsgeschehen wider und ermöglichen so eine zeitnahe Anpassung. Im Gegensatz dazu sind die Zahlen der Neuinfektionen, die vom Robert-Koch-Institut veröffentlicht werden, der Stand der Neuinfektionen von vor circa einer Woche. Dieser Verzug kommt dadurch Zustande, dass eine Person, die neu mit dem Virus infiziert wurde, nach wenigen Tagen Symptome entwickelt (es gibt auch symptomlose Verläufe), sich erst dann testen lässt, der Test Zeit benötigt und auch die Meldung an das Gesundeitsamt Zeit in Anspruch nimmt."
+    },
+    "is-it-official": {
+      "title": "Handelt es sich um offizielle Risikoeinschätzungen?",
+      "text": "Nein, bei der CovMap Risikoeinschätzung handelt es sich nicht um eine offizielle Risikoeinschätzung einer nationalen Behörde oder Institution. Die CovMap Risikoeinschätzung wurde von Forschenden der Charité, des Hasso-Plattner-Instituts und Datenspezialisten der Firma NET CHECK entwickelt. Das von uns entwickelte Modell zur Risikoeinschätzung wurde erst kürzlich entwickelt und wird deswegen laufend evaluiert."
+    },
+    "which-risk-levels": {
+      "title": "Welche Risikostufen gibt es?",
+      "intro": "Auf der Karte stellen wir ein normales, mittleres und hohes Risiko dar.",
+      "level-1": "Ein normales Risiko liegt vor, wenn die 7-Tages-Inzidenz des Robert-Koch-Instituts geringer als 20 Neuinfektionen pro 100.000 Einwohner ist und unser Vorhersagemodell keinen Anstieg vermuten lässt. Bitte beachte, dass das Virus derzeit überall in Deutschland zirkuliert und daher eine Ansteckung auch in einer Region mit einem normalen Risiko möglich ist.",
+      "level-2": "Von einem mittleren Risiko gehen wir aus, wenn die 7-Tages-Inzidenz zwischen 20 und 50 Neuinfektionen pro 100.000 Einwohnern liegt oder unser Vorhersagemodell auf einen Anstieg der Neuinfektionen hindeutet. Eine Region mit mittlerem Risiko kann in Zukunft eine Region mit hohem Risiko werden.",
+      "level-3": "Ein hohes Risiko leiten wir von der 7-Tages-Inzidenz ab, wenn die Schwelle von 50 Neuinfektionen pro 100.000 Einwohner überschritten wurde.",
+      "increased-contact-behavior": {
+        "title": "Erhöhtes Kontaktverhalten in der Bevölkerung",
+        "text": "In dieser Region registrieren wir viele Kontakte, weshalb sich das Virus leichter ausbreiten kann. Unser Vorhersagemodell sagt einen Anstieg der 7-Tages-Inzidenz voraus."
+      }
+    },
+    "consequences-of-risk-evaluation": {
+      "title": "Welche Konsequenzen ergeben sich aus der Risikoeinschätzung?",
+      "text": "Wir möchten mit diesem Projekt zu einer freiwilligen Reduktion von Kontakten aufrufen, insbesondere in Gebieten mit mittlerem und hohem Risiko. Falls sich Kontakte nicht vermeiden lassen, findest Du auf unserer Seite Informationen über allgemeine Schutzmaßnahmen, mit denen sich das Übertragungsrisiko verringern lässt. Zusätzlich verlinken wir zu den Webseiten der Landkreise, so dass Du Dich über die aktuellen und offiziellen Verhaltensregeln in Deiner Region informieren kannst."
+    },
+    "how-up-to-date": {
+      "title": "Wie aktuell ist die CovMap?",
+      "text": "Die CovMap wird einmal täglich aktualisiert. Der Datenstand ist in der Kartendarstellung oben rechts mit Datum erkenntlich."
+    },
+    "which-data": {
+      "title": "Welche Daten verwendet die CovMap?",
+      "text": "Die CovMap greift auf drei Datenquellen zurück, um die regionalen Risikobewertung durchzuführen:\n1.) Fallzahlstatistiken vom Robert-Koch-Institut,\n2.) ein geschätztes Kontaktverhalten (Kontakt-Index), ermittelt aus GPS Daten von der Firma NET CHECK,\n3.) Symptomdaten von der Chartié CovApp (<1>https://covapp.charite.de</1>)"
+    },
+    "advantages": {
+      "title": "Welche Vorteile ergeben sich durch die Auswertung von Kontakten und Symptomen der Bevölkerung?",
+      "text-1": "Damit das Virus übertragen werden kann, müssen sich Menschen begegnen. Wenige Tage nach der Infektion berichten viele infizierte Personen über Symptome. Damit stellen der Kontakt zwischen Menschen und das Bemerken von Symptomen die zwei frühesten beobachtbaren Ereignisse einer Infektion dar. Hier setzt die CovMap an.",
+      "text-2": "Wir charakterisieren aus anonymisierten GPS-Daten das Kontaktverhalten. Zusätzlich werten wir selbstberichtete Symptome aus. Naturlich führt nicht jeder Kontakt zu einer Virusübertragung und Symptome allein beweisen keine Infektion mit dem Coronavirus. Wertet man jedoch die Daten von vielen Personen aus, dann kann eine Prognose der zukünftigen Fallzahlen erstellt werden. Wir haben dieses Modell erst kürzlich entwickelt und evaulieren und verbessern es kontinuierlich.",
+      "text-3": "Die vom Robert Koch-Institut gemeldete 7-Tages-Inzidenz spiegelt das Infektionsgeschehen wider, das bereits vor einiger Zeit stattgefunden hat, und ist deshalb ein Blick in die Vergangenheit. Der von uns entwickelte Kontakt-Index ist ein Maß für die Anzahl der Kontakte pro Person und Region und kann schneller ausgewertet werden. In <1>ersten Analysen</1> konnten wir zeigen, dass ein hoher Kontakt-Index mit einem vermehrten Infektionsgeschehen korreliert. Der Kontakt-Index erlaubt insofern einen vorsichtigen Blick in die Zukunft und kann als eine Art Frühwarnsystem angesehen werden. Wichtig ist, dass es sich bei dem hinterlegten Algorithmus um ein rechnerisches Modell handelt. Das tatsächliche Infektionsgeschehen kann deshalb von der Vorhersage auf Basis des Kontakt-Index abweichen.",
+      "text-4": "Man weiß inzwischen, dass die Auswertung von Symptomen zur Vorhersage von lokalen Ausbrüchen verwendet werden kann. Zeitlich ist die Symptomlast als Variable für die Vorhersage des Infektionsgeschehens zwischen Kontakt-Index und 7-Tages-Inzidenz einzuordnen. Über die CovApp der Charité geben viele Nutzerinnen und Nutzern ihre Symptome an. Wir planen, diese Angaben anonymisiert in ein verbessertes Modell einfließen zu lassen.",
+      "text-5": "Der große Vorteil der Auswertung von Kontakten und Symptomen liegt darin, dass die Daten fast ohne Verzögerung analysiert werden können und daher ohne den Meldeverzug der offiziellen Fallzahlen des Robert Koch-Instituts zur Verfügung stehen. Dadurch können wir die Bevölkerung schneller auf die Möglichkeit eines erhöhten regionalen Risikos hinweisen.",
+      "text-6": "Das CovMap Projekt wird zurzeit aktiv weiterentwickelt und verbessert."
+    },
+    "how-does-it-work": {
+      "title": "Wie funktioniert die Vorhersage, ob in einer Region mit vermehrten Neuinfektionen zu rechnen ist?",
+      "text": "Unsere Arbeiten beruhen auf einem etablierten theoretischen Modell für die Vorhersage der Reproduktionszahl (R-Wert). Der R-Wert gibt an, wie viele Personen sich innerhalb eines bestimmten Zeitraumes typischerweise an einer erkrankten Person anstecken. Diese Ansteckungen hängen unter anderem von der Zahl der Kontakte pro Person ab und ein mathematischer Zusammenhang kann für die Bestimmung genutzt werden. Der Kontakt zwischen zwei Personen kann zu einer Übertragung des Coronavirus führen. Bei unserer Methode müssen wir nicht wissen, ob eine Person tatsächlich infiziert ist und können dennoch eine Vorhersage darüber treffen, wie sich die Zahl der Neuinfektionen entwickeln wird. Da ein Kontakt und die potentielle Virusübertragung das früheste Ereignis einer Infektion mit dem Coronavirus darstellt, gewinnen wir einen Zeitvorteil von bis zu 3 Wochen gegen über den offiziellen Fallzahlstatistiken mit bestätigten Infektionen. Statistisch gesehen ist übrigens nicht die Zahl der Kontakte pro Person entscheidend, sondern eine spezielle Metrik, welche die Verteilung der Anzahl der Kontakte berücksichtigt. Diese Metrik wurde von uns unter dem Namen Kontakt-Index berechnet und wird für die Prognose verwendet, ob es zu einem Anstieg von Neuinfektionen kommen kann."
+    },
+    "what-is-contact-index": {
+      "title": "Was ist der Kontakt-Index?",
+      "text": "Der Kontakt-Index wurde von unserer Gruppe entwickelt und in einer wissenschaftlichen Arbeit (<1>Preprint</1>) beschrieben. Grundlegend ist die Beobachtung, dass nicht jede Person die gleiche Zahl von Kontakten pro Tag hat, sondern es dabei sehr große Unterschiede gibt. Da Personen mit sehr vielen Kontakten („Superkontakter“) eine höhere Wahrscheinlichkeit haben, das Coronavirus weiterzugeben, spielt diese Beobachtung eine wichtige Rolle für die Ausbreitung des Coronavirus (siehe auch Freundschaftsparadox). Anders gesagt, ist nicht nur die reine Zahl an Kontakten für die Virusausbreitung entscheidend, sondern auch die Unterschiedlichkeit der Kontaktzahlen (Heterogenität). Der Kontakt-Index zeigt nun sowohl die Gesamtzahl der Kontakte als auch die Heterogenität an. Wir konnten zeigen, dass der Kontakt-Index sehr gut mit der Ausbreitung des Coronavirus in Deutschland korrelierte."
+    },
+    "why-reduce-contacts": {
+      "title": "Warum hilft es Kontakte zu reduzieren?",
+      "text": "Das Coronaviurs überträgt sich von Mensch zu Mensch. Es wird hauptsächlich über die sogenannte Tröpfcheninfektion und über Aerosole übertragen. Je weniger Kontakte jemand hat, desto schwerer ist es für das Virus, sich weiter zu verbreiten. Weitere Informationen zum Coronavirus findest Du auf der <1>Webpage des Robert-Koch-Instituts</1>."
+    },
+    "what-can-i-do": {
+      "title": "Was kann ich konkret tun, um die Ausbreitung des Coronavirus zu verringern?",
+      "text": "Das Coronaviurs überträgt sich von Mensch zu Mensch, deswegen ist es wichtig, dass wir Kontakte reduzieren und uns zusätzlich an Infektionsschutzmaßnahmen halten und diese umzusetzen. Die <1>AHA + L + A Formel</1> fast die wichtigsten Infektionsschutzmaßnahmen zusammen: Abstand halten, Hygiene beachten (Händewaschen, in die Ellenbeuge niesen), Alltagsmaske (Mund-Nasen-Bedeckung) tragen und regelmäßiges Lüften sind sehr wichtig. Das weitere A steht für die <3>Corona-Warn-App</3>, welche Nutzerinnen und Nutzer der App über Kontakte zu infizierten Personen informiert."
+    },
+    "friendship-paradoxon": {
+      "title": "Was ist das Freundschaftsparadox?",
+      "text": "Der Kontakt-Index ist anschaulich mit dem sogenannten <1>Freundschaftsparadox</1> verbunden. Danach gilt für die meisten Menschen - z.B. in Facebook - dass ihre Freunde im Durchschnitt mehr Freunde haben als sie selbst. Das wiederum liegt daran, dass Personen mit vielen Freunden eine höhere Wahrscheinlichkeit haben, mit einer beliebigen Person X verbunden zu sein, als Personen, die wenige Freunde haben. Daher sind vereinfacht gesagt viele Freunde oder Kontakte von X Superkontakter. Diese Beobachtung macht sich auch in der Ausbreitung von Infektionskrankheiten bemerkbar. D.h. wenn ich jemanden anstecke, wird diese Person wahrscheinlich jemand mit vielen Kontakten sein. Also wird im Mittel nicht die mittlere Zahl der Kontakte angesteckt, sondern mehr als diese Zahl. Der Kontakt-Index übernimmt diese Abweichung."
+    }
+  },
+  "copyright": {
+    "provider": {
+      "title": "Anbieter",
+      "text-1": "Charité – Universitätsmedizin Berlin",
+      "text-2": "Zentrale Postanschrift: Charitéplatz 1, 10117 Berlin",
+      "text-3": "Die Charité – Universitätsmedizin Berlin ist eine Körperschaft des Öffentlichen Rechts. Sie wird durch den Vorstandsvorsitzenden gesetzlich vertreten."
+    },
+    "contact": {
+      "title": "Kontakt",
+      "text-1": "Für Hinweise, Lob und Kritik schreiben Sie uns bitte eine E-Mail an: <1>covmap@charite.de</1>",
+      "text-2": "Internet: <1>https://www.charite.de</1>"
+    },
+    "responsible-media-law": {
+      "title": "Verantwortlicher im Sinne des Medienrechts",
+      "text-1": "Prof. Dr. Heyo K. Kroemer, der Vorstandsvorsitzende der Charité – Universitätsmedizin Berlin",
+      "text-2": "Verantwortlich für Inhalte:",
+      "text-3": "Projektleitung CovMap: Dr. med. Alexander H. Thieme, M.Sc.",
+      "text-4": "Das gesamte Team:",
+      "text-5": "Dr. Thieme (Charité), Dr. Mittermaier (Charité), Dr. Gertler (Charité), Prof. Dr. Lippert (HPI), Dr. Konigorski (HPI), Dr. Edelmann (HPI), PD. Dr. Rüdiger (NET CHECK), Hr. Zernick (NET CHECK)"
+    },
+    "competent-supervisory-authority": {
+      "title": "Zuständige Aufsichtsbehörde",
+      "text-1": "Der Regierende Bürgermeister von Berlin – inkl. Wissenschaft und Forschung",
+      "text-2": "Kontakt: <1>https://www.berlin.de/rbmskzl/</1>",
+      "text-3": "Senatsverwaltung für Gesundheit, Pflege und Gleichstellung",
+      "text-4": "Kontakt: <1>https://www.berlin.de/sen/gpg/</1>",
+      "text-5": "Umsatzsteuer-Identifikationsnummer: DE 228847810"
+    }
+  },
+  "legal": {
+    "legal-info": {
+      "title": "Rechtliche Hinweise",
+      "text": "Haftungsausschluss (Disclaimer)"
+    },
+    "general-info": {
+      "title": "Allgemeiner Hinweis",
+      "text": "Die Nutzung dieser App ersetzt keine ärztliche Behandlung. Wenn Sie sich aktuell schwer krank fühlen, suchen Sie bitte umgehend medizinische Hilfe."
+    },
+    "liability-for-contents": {
+      "title": "Haftung für Inhalte",
+      "text": "Als Dienstanbieter sind wir gemäß § 7 Abs.1 TMG für eigene Inhalte nach den allgemeinen Gesetzen verantwortlich. Nach §§ 8 bis 10 TMG sind wir als Dienstanbieter jedoch nicht verpflichtet, übermittelte oder gespeicherte fremde Informationen zu überwachen. Verpflichtungen zur Entfernung oder Sperrung der Nutzung von Informationen nach den allgemeinen Gesetzen bleiben hiervon unberührt."
+    },
+    "liability-for-links": {
+      "title": "Haftung für Links",
+      "text": "Unser Angebot enthält Links zu externen Webseiten Dritter, auf deren Inhalte wir keinen Einfluss haben. Deshalb können wir für diese fremden Inhalte auch keine Gewähr übernehmen. Für die Inhalte der verlinkten Seiten ist stets der jeweilige Anbieter oder Betreiber der Seiten verantwortlich."
+    },
+    "copyright": {
+      "title": "Urheberrecht",
+      "text": "Die durch den Dienstanbieter erstellten Inhalte und Werke auf diesen Seiten unterliegen dem deutschen Urheberrecht. Die Vervielfältigung, Bearbeitung, Verbreitung und jede Art der Verwertung außerhalb der Grenzen des Urheberrechtes bedürfen der schriftlichen Zustimmung des jeweiligen Autors bzw. Erstellers. Downloads und Kopien dieser Seite sind nur für den privaten, nicht kommerziellen Gebrauch gestattet. Soweit die Inhalte auf dieser Seite nicht vom Betreiber erstellt wurden, werden die Urheberrechte Dritter beachtet. Insbesondere werden Inhalte Dritter als solche gekennzeichnet. Sollten Sie trotzdem auf eine Urheberrechtsverletzung aufmerksam werden, bitten wir um einen entsprechenden Hinweis. Bei Bekanntwerden von Rechtsverletzungen werden wir derartige Inhalte umgehend entfernen."
+    }
+  },
+  "privacy": {
+    "title": "Datenschutzrechtliche Informationen gemäß Art. 13 DS-GVO",
+    "responsible": {
+      "title": "Datenschutzrechtliche Verantwortlichkeit",
+      "text": "<0>Die CovMap ist ein Projekt der Charité – Universitätsmedizin Berlin, die für die Verarbeitungpersonenbezogener Daten auf dieser Website verantwortlich ist. Die Kontaktdaten lauten wie folgt:</0><1>Charité – Universitätsmedizin Berlin Charitéplatz 1\n10117 Berlin\nDeutschland</1><2>Tel: +49 (0) 30 450 50\nWebsite: <1>www.charite.de</1></2><4>Für die Datenverarbeitung auf Ihrem Endgerät, auf das Sie die CovMap laden, sind Sie selbst verantwortlich. Das gilt auch für die Eingabe der Postleitzahl (siehe unter 5 c)).</4><5>Grundlage der für den Nutzer der Website visualisierten Darstellung sind Daten, die von der Firma NET CHECK GmbH zusammengestellt und verarbeitet werden. Die Charité übernimmt mit diesem Webangebot die reine Visualisierung in Form einer Deutschlandkarte der insoweit von der NET CHECK GmbH zur Verfügung gestellten Information. Die Charité haftet nur für eigene Inhalte; als Diensteanbieter ist die Charité nicht verpflichtet, übermittelte fremde Informationen zu prüfen oder zu überwachen.</5>"
+    },
+    "data-protection-officer": {
+      "title": "Datenschutzbeauftragte",
+      "text": "Bei Fragen zur Verarbeitung Ihrer personenbezogenen Daten sowie zu Ihren Rechten rund um den Datenschutz,die sich auf die Charité beziehen, wenden Sie sich bitte an unsere Datenschutzbeauftragte:\n\nt: +49 30 450 580 016\nE-Mail: datenschutz(at)charite.de"
+    },
+    "personal-data": {
+      "title": "Personenbezogene Daten, Art. 4 Nr. 1 DS-GVO",
+      "text": "Personenbezogene Daten sind alle Informationen, die sich auf eine identifizierte oder identifizierbare natürliche Person beziehen. Als identifizierbar wird eine natürliche Person angesehen, die direkt oder indirekt identifiziert werden kann - insbesondere mittels Zuordnung zu einer Kennung wie einem Namen, zu einer Kennnummer, zu Standortdaten oder zu einer Online-Kennung (IP-Adresse)."
+    },
+    "installation": {
+      "title": "Installation der CovMap",
+      "text": "Bei der CovMap handelt es sich sowohl um eine Web-App als auch um eine App, die über eine von Dritten betriebene Vertriebsplattform erhältlich ist, sogenannter App-Store (hier Google Play). Ihr Download setzt gegebenenfalls eine vorherige Registrierung beim jeweiligen App-Store und die Installation der App-Store-Software voraus. Wir haben keinen Einfluss auf die Verarbeitung von personenbezogenen Daten im Zusammenhang mit Ihrer Registrierung und der Bereitstellung von Downloads in dem jeweiligen App-Store und der App-Store-Software. Verantwortliche Stelle ist insoweit allein der Betreiber des jeweiligen App-Stores."
+    },
+    "calling-covmap": {
+      "title": "Aufruf der CovMap",
+      "text": "a. Log-Dateien (sog. Log Files)\nBei jedem Zugriff auf die CovMap werden Daten über diesen Vorgang vorübergehend in einer Protokolldatei verarbeitet. Im Einzelnen werden folgende Daten gespeichert:\n• das Datum und die Uhrzeit des Aufrufs der CovMap\n• verwendete Webbrowser und verwendetes Betriebssystem\n• die vollständige IP-Adresse des anfordernden Endgeräts \n• der Name und die URL der abgerufenen Datei\n• im Fall des Aufrufs der Web-App auch die Webseite, von der aus der Zugriff erfolgt\n\nDiese Datenverarbeitung durch unser System dient dem Zweck und unserem Interesse, die Auslieferung der CovMap an das Endgerät des Nutzers/der Nutzerin zu ermöglichen. Hierfür muss die IP-Adresse der Nutzenden für die Dauer der Sitzung gespeichert bleiben. Ihre IP-Adresse löschen wir nach Ablauf von 20 Tagen. Wir speichern sie 20 Tage lang, damit wir im Fall von Datensicherheitsmängeln oder Problemen von Eingriffen der Nutzenden Rechtsverstöße verfolgen können. Nach Ende der Aufbewahrung werden die IP-Adressen unverzüglich gelöscht. Im Übrigen werden die Daten in unserem System gelöscht, wenn die jeweilige Sitzung beendet ist.\nDie Erfassung der Daten zur Bereitstellung CovMap ist für den Betrieb der Applikation zwingend erforderlich. Rechtsgrundlage hierfür ist Art. 6 Abs. 1 S. 1 lit. f DS-GVO.\n\nb. Session-Cookies\nBeim Aufruf der CovMap erheben wir während einer laufenden Verbindung über Ihren Internet-browser und mit Hilfe von technisch notwendigen sog. Session-Cookies Daten. Diese Daten beziehen sich lediglich auf Ihre IP-Adresse (siehe nachstehende Bullet Points). Session-Cookies ermöglichen die Funktionalität dieser Anwendungen. Sie verfallen nach 24 Stunden. Die meisten Browser sind so eingestellt, dass sie Cookies automatisch akzeptieren. Sie können das Speichern von Cookies jedoch deaktivieren oder Ihren Browser so einstellen, dass er Sie benachrichtigt, sobald Cookies gesendet werden. Durch den Einsatz von Cookies fließen der Stelle, die den Cookie setzt (hier der durch uns eingesetzte Auftragsverarbeiter KeyCDN, siehe dazu unter 6.) folgende Informationen zu:\n• Datum und Uhrzeit des Aufrufs der Website\n• verwendete Webbrowser und verwendetes Betriebssystem\n• vollständige IP-Adresse des anfordernden Endgeräts\n• übertragene Datenmenge\n• Name des verwendeten Internet-Providers.\nDie Verarbeitung erfolgt ebenfalls auf der Rechtsgrundlage des Art. 6 Abs. 1 lit. f DS-GVO. Unser berechtigtes Interesse bei der Verwendung von technischen Cookies liegt in der Ermöglichung der Nutzung und Bereitstellung der CovMap. Bei den Cookies handelt es sich um für die Nutzung von CovMap technisch zwingend notwendige Cookies. \n\nc. Eingabe der Postleitzahl\nBei Aufruf der App besteht die Möglichkeit, dass Sie die Postleitzahl Ihrer Heimatadresse eingeben. Sofern Sie Ihre Postleitzahl eingeben, wird Ihnen bei der anschließenden Darstellung der Deutschlandkarte auf den ersten Blick der Bereich Ihrer Heimatadresse und der unmittelbaren Umgebung angezeigt. Geben Sie keine Postleitzahl ein, können Sie den Fokus auf den Sie interessierenden Kartenabschnitt selbstständig manuell einstellen. \nDies ist eine freiwillige Option und keine Voraussetzung zur Nutzung der CovMap. Die Eingabe der Postleitzahl findet ausschließlich auf Ihrem lokalen Endgerät statt. Es erfolgt keine Verknüpfung mit personenbezogenen Daten durch uns. Bei der Postleitzahl handelt es sich insoweit nicht um ein personenbezogenes Datum."
+    },
+    "recipient-of-personal-data": {
+      "title": "Empfänger von personenbezogenen Daten",
+      "text": "Die Verarbeitung der IP-Adresse der Nutzerinnen und Nutzer der CovMap erfolgt mit den entsprechend vereinbarten Sicherheitsanforderungen im Rahmen einer Auftragsverarbeitung nach Art. 28 Abs. 3 DS-GVO durch den Technologiedienstleister proinity LLC, Rümikerstrasse 60, 8409 Winterthur, Schweiz (\"KeyCDN\"). Verantwortlich für die Datenverarbeitung bleiben wir.\nMit oder ohne Eingabe Ihrer Postleitzahl zeigt Ihnen die CovMap im Anschluss an den Aufruf der Seite bzw. App eine Karte an, auf der tagesaktuell visualisiert wird, in welchen Gebieten ein lokaler Ausbruch von Covid-19 zu erwarten ist. Zur Darstellung der Karte setzen wir ebenfalls den Dienst von KeyCDN ein. Die IP-Adresse wird nicht gespeichert.\nAnsonsten werden im Rahmen der Nutzung der CovMap keine personenbezogenen Daten von Ihnen an Dritteübermittelt, es sei denn, wir sind von Gesetzes wegen dazu verpflichtet oder Sie haben Ihre Einwilligung erklärt.\n"
+    },
+    "no-obligation-to-provide": {
+      "title": "Keine Pflicht zur Bereitstellung; keine automatisierte Entscheidungsfindung einschl. Profiling",
+      "text": "Eine Pflicht zur Bereitstellung der personenbezogenen Daten besteht nicht. Eine automatisierte Entscheidungsfindung findet nicht statt."
+    },
+    "your-rights": {
+      "title": "Ihre Rechte",
+      "text": "Sie haben grundsätzlich folgende Rechte hinsichtlich der Sie betreffenden personenbezogenen Daten:\n- Recht auf Auskunft (Art. 15 DS-GVO)\n- Recht auf Berichtigung (Art. 16 DS-GVO)\n- Recht auf Löschung (Art. 17 DS-GVO; “Recht auf Vergessenwerden”)\n- Recht auf Einschränkung der Verarbeitung (Art. 18 DS-GVO)\n- Recht auf Widerspruch gegen die Verarbeitung (Art. 21 DS-GVO)\n- Recht auf Datenübertragbarkeit (Art. 20 DS-GVO)\nSoweit Sie uns eine Einwilligung in die Verarbeitung Ihrer Daten erteilt haben, können Sie diese jederzeit mit Wirkung für die Zukunft widerrufen. Die Rechtmäßigkeit der Verarbeitung Ihrer Daten bis zum Widerruf bleibt hiervon unberührt. Sie haben zudem das Recht, sich bei einer Datenschutz-Aufsichtsbehörde in dem Mitgliedstaat Ihres Aufenthaltsorts, Ihres Arbeitsplatzes oder des Orts des mutmaßlichen Verstoßes über die Verarbeitung Ihrer personenbezogenen Daten durch uns zu beschweren, wenn Sie der Ansicht sind, dass die Verarbeitung der Sie betreffenden personenbezogenen Daten rechtswidrig erfolgt.\n"
+    }
+  },
+  "rki": {
+    "title": "7-Tages-Inzidenz (RKI)",
+    "intro": "Wie berechnet sich die 7-Tages-Inzidenz (Anzahl der Neuinfektionen pro 100.000 Einwohner der letzten 7 Tage)?",
+    "text": "Es werden alle gemeldeten Neuinfektionen der jeweils zurückliegenden sieben Tage innerhalb eines Landkreises addiert. Diese Summe wird durch die Einwohnerzahl des jeweiligen Landkreises geteilt. Danach wird dieser Wert mit 100.000 multipliziert. Die 7-Tages-Inzidenz stellt eine etablierte Größe dar, um aktuelle Hotspots der Coronavirus-Epidemie zu identifizieren. Man muss jedoch davon ausgehen, dass nicht alle Fälle gemeldet werden. Darüber hinaus gibt es einen Meldeverzug, da zwischen der Infektion und der Bestätigung durch einen Labortest und Meldung des Ergebnisses an das Robert-Koch-Instituts Zeit vergeht."
+  },
+  "symptom-level": {
+    "title": "Symptomlast",
+    "text": "Wenige Tage nach einer Coronavirusinfektion entwickelt ein Teil der Personen Symptome wie zum Beispiel Husten, Fieber oder einen Verlust des Geschmacks. Diese Symptome gehören zu den frühesten beobachtbaren Ereignissen einer Infektion, sind jedoch nicht spezifisch für das Coronavirus und können beispielsweise auch bei einer harmlosen Erkältung auftreten. Falls man jedoch eine große Menschenmenge nach Symptomen befragt, kann man Hotspots des Coronavirus früher detektieren. Wir verwenden die Charité <1>CovApp</1>, um die Antworten nach Symptomen von einer großen Anzahl von Menschen auszuwerten, und können daher indirekt auf eine Aktivität des Coronavirus in einer Region Rückschlüsse ziehen.\n\nWir bereiten diese Funktion gerade vor und werden sie Dir bald zur Verfügung stellen können."
+  },
+  "risk-recommendation": {
+    "low": "Die Zahl der Neuinfektionen ist niedrig und das Kontaktverhalten ist ausreichend reduziert. Ein normales Risiko bedeutet nicht, dass keine Neuinfektionen in der Region möglich sind.",
+    "medium": {
+      "intro": "Die Zahl der Neuinfektionen ist mäßig erhöht. ",
+      "outro": "Wir rufen dazu auf, Kontakte freiwillig zu reduzieren."
+    },
+    "high": {
+      "intro": "Die Zahl der Neuinfektionen ist stark erhöht. ",
+      "outro": "Wir rufen dazu auf, Kontakte freiwillig auf das Allernötigste zu reduzieren."
+    },
+    "contact-score-info": "Aufgrund eines erhöhten Kontaktverhalten kann sich das Coronavirus leicht weiter verbreiten und unser Modell sagt einen weiteren Anstieg der Neuinfektionen voraus. "
+  },
+  "contacts-indicator": {
+    "reduced": "reduziert",
+    "increased": "erhöht"
+  }
 }
diff --git a/apps/official/static/texts/ActionTexts.ts b/apps/official/static/texts/ActionTexts.ts
deleted file mode 100644
index 6b23f6cf..00000000
--- a/apps/official/static/texts/ActionTexts.ts
+++ /dev/null
@@ -1,20 +0,0 @@
-export enum ActionTexts {
-  TITLE = "Wie kann ich mich verhalten?",
-  COUNTY_TEASER_1 = "Informiere Dich über aktuelle Verhaltensregeln für ",
-  COUNTY_TEASER_2 = " hier.",
-  INTRO_TEASER_1 = "Die Pandemie ist noch nicht vorbei und wir alle haben das Ziel die Pandemie soweit es geht einzudämmen und natürlich Risikogruppen zu schützen. Besonders die bevorstehende kalte Jahreszeit, in der wir uns überwiegend in geschlossen Räumen aufhalten, stellt eine Herausforderung dar. Es kommt jetzt auf Dich, auf uns, auf jeden Einzelnen an!",
-  INTRO_TEASER_2 = "In den letzten Monaten konnte immer wieder gezeigt werden, dass ganz einfache Maßnahmen, die von jedem umgesetzt werden können, sehr viel Wirkung haben. ",
-  CONTACT_HEADLINE = "Kontakte reduzieren",
-  CONTACT_TEXT = "Kontakte reduzieren ist eine der wirkungsvollsten Maßnahmen.\n Das Virus wird von Mensch-zu-Mensch übertragen. Wenn man sich nicht trifft, kann das Virus also nicht übertragen werden. Greife zum Telefonhörer, halte eine Videokonferenz und arbeite von zu Hause, wann immer dies möglich ist. So schwer es auch fällt, Kontakte minimieren schützt und hilft uns allen, vor allem in Risikogebieten. Seid dabei und helft mit!",
-  DISTANCE_HEADLINE = "Abstand halten",
-  DISTANCE_TEXT = "Falls Du Kontakt zu einer Person hast, dann halte einen Abstand von mindestens 1.5 Metern. Je mehr Abstand, umso besser.",
-  MASK_HEADLINE = "Maske tragen",
-  MASK_TEXT = "Wenn Du infiziert bist und Du eine Alltagsmaske trägst, verringert sich das Risiko, dass Du andere Personen ansteckst. Sind Kontakte nicht vermeidbar, kann das Tragen einer Maske also sowohl Dich, als auch Dein Gegenüber schützen.",
-  VENTILATION_HEADLINE = "Regelmäßig lüften",
-  VENTILATION_TEXT = "Das Virus kann über die Luft übertragen werden.\nWenn Du Dich mit anderen Personen triffst, dann tue dies am besten an der frischen Luft.\nFalls Du Dich doch in einen geschlossenen Raum begeben musst, dann sorge für eine gute Luftzirkulation, indem Du Fenster öffnest und gut lüftest.",
-  HYGIENE_HEADLINE = "Hygienemaßnahmen",
-  HYGIENE_TEXT = "Hygienemaßnahmen können Infektionen verringern.\nDas Verwenden von Desinfektionsmitteln und das Händewaschen können dazu beitragen, Infektionen zu verhindern, wenn Du Dinge angefasst hast, die potentiell mit dem Virus kontaminiert sind.",
-  REGIONAL_HEADLINE = "Lokale Regeln",
-  REGIONAL_TEXT = "Informiere Dich über lokale Regeln und Maßnahmen in Deiner Region.",
-  FINAL_TEASER = "Zusammen können wir es schaffen!\nGegenseitige Rücksichtnahme, Verständnis und Geduld sind die Gebote dieser Stunde.",
-}
diff --git a/src/App.tsx b/src/App.tsx
index a1396aaf..129276a2 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -41,7 +41,9 @@ export const App = () => {
       <Router>
         <AutoProgressDate />
         <ServiceWorker />
-        <InstallPrompt shouldShow={showInstallPrompt} />
+        <Suspense fallback={getFallbackComponent()}>
+          <InstallPrompt shouldShow={showInstallPrompt} />
+        </Suspense>
         <Container
           disableGutters
           maxWidth={false}
@@ -52,7 +54,9 @@ export const App = () => {
           </Suspense>
           <IntermediateProgress />
           {config.content?.pages.map((page, id) => (
-            <RenderPageRoute key={id} page={page} />
+            <Suspense key={id} fallback={getFallbackComponent()}>
+              <RenderPageRoute page={page} />
+            </Suspense>
           ))}
           <Suspense fallback={getFallbackComponent()}>
             <Route key="map" path="/:subPage?" component={CovMap} />
diff --git a/src/EmbedApp.tsx b/src/EmbedApp.tsx
index 6ba8f9b0..3402a13b 100644
--- a/src/EmbedApp.tsx
+++ b/src/EmbedApp.tsx
@@ -39,7 +39,9 @@ export const EmbedApp = () => {
         >
           <IntermediateProgress />
           {config.content?.pages.map((page, id) => (
-            <RenderPageRoute key={id} page={page} />
+            <Suspense fallback={getFallbackComponent()}>
+              <RenderPageRoute key={id} page={page} />
+            </Suspense>
           ))}
           <Suspense fallback={getFallbackComponent()}>
             <Route key="map" path="/:subPage?" component={CovMap} />
diff --git a/src/components/InstallPrompt.tsx b/src/components/InstallPrompt.tsx
index 2acde6ad..ea33a16b 100644
--- a/src/components/InstallPrompt.tsx
+++ b/src/components/InstallPrompt.tsx
@@ -6,6 +6,7 @@ import { useThunkDispatch } from "src/useThunkDispatch";
 import { useSelector } from "react-redux";
 import { State } from "../state";
 import { triggerInstallPrompt } from "../state/thunks/triggerInstallPrompt";
+import { useTranslation } from "react-i18next";
 
 const useStyles = makeStyles((theme) => ({
   root: {
@@ -32,6 +33,7 @@ type NoThanksState = boolean;
 
 export const InstallPrompt = ({ shouldShow }: InstallPromptProps) => {
   const dispatch = useThunkDispatch();
+  const { t } = useTranslation("common");
   const prompt = useSelector((state: State) => state.app.installPrompt);
   const installed = useSelector((state: State) => state.app.isInstalled);
   const [noThanks, setNoThanks] = useState<NoThanksState>(() => false);
@@ -59,18 +61,18 @@ export const InstallPrompt = ({ shouldShow }: InstallPromptProps) => {
 
   const dialog = (
     <div className={classes.root}>
-      <p className={classes.item}>Diese App kann auf deinem Geraet installiert werden.</p>
-      <p>Tappe den Button unten um dich zu entscheiden!</p>
+      <p className={classes.item}>{t("install-promt.text-1")}</p>
+      <p>{t("install-promt.text-2")}</p>
       <Button
         className={classes.item}
         variant="contained"
         color="primary"
         onClick={() => dispatch(triggerInstallPrompt(handleResult))}
       >
-        Alles klar!
+        {t("install-promt.confirm")}
       </Button>
       <Button className={classes.item} variant="contained" color="primary" onClick={cancelInstallPrompt}>
-        Nee danke.
+        {t("install-promt.cancel")}
       </Button>
     </div>
   );
diff --git a/src/components/LazyError.tsx b/src/components/LazyError.tsx
index 26641bed..d250ecc5 100644
--- a/src/components/LazyError.tsx
+++ b/src/components/LazyError.tsx
@@ -1,14 +1,16 @@
 import { useEffect } from "react";
+import { useTranslation } from "react-i18next";
 import { AppApi } from "src/state/app";
 import { useThunkDispatch } from "src/useThunkDispatch";
 
 export const LazyError = () => {
   const dispatch = useThunkDispatch();
+  const { t } = useTranslation("common");
 
   useEffect(() => {
     dispatch(
       AppApi.setSnackbarMessage({
-        text: "Check you network connection and refresh the app/page.",
+        text: t("lazy-error"),
         type: "error",
         duration: 30000,
       }),
diff --git a/src/components/NavBar.tsx b/src/components/NavBar.tsx
index 39524f69..1a408996 100644
--- a/src/components/NavBar.tsx
+++ b/src/components/NavBar.tsx
@@ -141,7 +141,7 @@ export const NavBar = () => {
       });
     } catch (err) {
       clipboard.writeText("https://" + window.location.hostname);
-      dispatch(AppApi.setSnackbarMessage({ text: "Link in Zwischenablage kopiert", type: "info" }));
+      dispatch(AppApi.setSnackbarMessage({ text: t("common:copied-to-clipboard"), type: "info" }));
     }
   };
 
diff --git a/src/components/WelcomeInfo.tsx b/src/components/WelcomeInfo.tsx
index 787eb0b1..67de5ff9 100644
--- a/src/components/WelcomeInfo.tsx
+++ b/src/components/WelcomeInfo.tsx
@@ -8,9 +8,11 @@ import { AppApi } from "../state/app";
 import { State } from "../state";
 import { useThunkDispatch } from "../useThunkDispatch";
 import { config } from "app-config/index";
+import { useTranslation } from "react-i18next";
 
 export const WelcomeInfo = () => {
   const dispatch = useThunkDispatch();
+  const { t } = useTranslation("common");
   const currentVisual = useSelector((state: State) => state.app.currentVisual);
   const infoDialogs = useSelector((state: State) => state.app.infoDialogs);
   const InfoComponent = config.visuals[currentVisual].InfoComponent;
@@ -32,7 +34,7 @@ export const WelcomeInfo = () => {
         {InfoComponent && <InfoComponent />}
         <DialogActions>
           <Button onClick={handleClose} color="secondary">
-            Schließen.
+            {t("close")}
           </Button>
         </DialogActions>
       </Dialog>
diff --git a/src/components/WelcomeStepsModal/WelcomeModal1.tsx b/src/components/WelcomeStepsModal/WelcomeModal1.tsx
index 50e9cb76..a7bfff4f 100644
--- a/src/components/WelcomeStepsModal/WelcomeModal1.tsx
+++ b/src/components/WelcomeStepsModal/WelcomeModal1.tsx
@@ -3,6 +3,7 @@ import { Typography } from "@material-ui/core";
 import { makeStyles } from "@material-ui/core/styles";
 import { useCommonWelcomeModalStyles } from "./useCommonWelcomeModalStyles";
 import { FullWidthFixedAspectImage } from "./FullWidthFixedAspectImage";
+import { useTranslation } from "react-i18next";
 
 const useStyles = makeStyles(() => ({
   listItemDiv: {
@@ -17,6 +18,7 @@ export const WelcomeModal1: React.FC = () => {
     ...useCommonWelcomeModalStyles(),
     ...useStyles(),
   };
+  const { t } = useTranslation("common");
 
   const listIcon = (
     <img
@@ -28,30 +30,28 @@ export const WelcomeModal1: React.FC = () => {
 
   return (
     <>
-      <Typography className={classes.title}>Willkommen bei der CovMap</Typography>
+      <Typography className={classes.title}>{t("welcome.title")}</Typography>
 
       <FullWidthFixedAspectImage aspect={62.1} src="/images/WelcomeModalImage1.svg" alt="Welcome" />
 
       <div className={classes.infoTextDiv}>
         <div className={classes.listItemDiv}>
           {listIcon}
-          <Typography className={classes.largeText}>
-            Entwickelt von Ärzten der Charité - Universitätsmedizin Berlin
-          </Typography>
+          <Typography className={classes.largeText}>{t("welcome.info-1")}</Typography>
         </div>
         <div className={classes.listItemDiv}>
           {listIcon}
-          <Typography className={classes.largeText}>Regionale Risikoeinschätzung zum Coronavirus</Typography>
+          <Typography className={classes.largeText}>{t("welcome.info-2")}</Typography>
         </div>
 
         <div className={classes.listItemDiv}>
           {listIcon}
-          <Typography className={classes.largeText}>Informationen zu allgemeinen Schutzmaßnahmen</Typography>
+          <Typography className={classes.largeText}>{t("welcome.info-3")}</Typography>
         </div>
 
         <div className={classes.listItemDiv}>
           {listIcon}
-          <Typography className={classes.largeText}>Links zu aktuellen Verhaltensregeln aller Landkreise</Typography>
+          <Typography className={classes.largeText}>{t("welcome.info-4")}</Typography>
         </div>
       </div>
       <img src={"/images/Logo_Charite.svg"} alt="Charité Berlin" width="100" style={{ marginBottom: "24px" }} />
diff --git a/src/components/WelcomeStepsModal/WelcomeModal2.tsx b/src/components/WelcomeStepsModal/WelcomeModal2.tsx
index 25d7f8c0..fb99e6ca 100644
--- a/src/components/WelcomeStepsModal/WelcomeModal2.tsx
+++ b/src/components/WelcomeStepsModal/WelcomeModal2.tsx
@@ -2,23 +2,22 @@ import React from "react";
 import { Typography } from "@material-ui/core";
 import { useCommonWelcomeModalStyles } from "./useCommonWelcomeModalStyles";
 import { FullWidthFixedAspectImage } from "./FullWidthFixedAspectImage";
+import { useTranslation } from "react-i18next";
 
 export const WelcomeModal2: React.FC = () => {
   const classes = useCommonWelcomeModalStyles();
+  const { t } = useTranslation("common");
 
   return (
     <>
-      <Typography className={classes.title}>Was ist die CovMap?</Typography>
+      <Typography className={classes.title}>{t("welcome.what-is-it.title")}</Typography>
 
       <FullWidthFixedAspectImage aspect={62.1} src="/images/WelcomeModalImage2.svg" alt="Welcome" />
       <div>
         <img src={"/images/WelcomeModalImage2_sub.svg"} alt="Welcome" width="124px" height="36px" />
       </div>
       <div className={classes.infoTextDiv}>
-        <Typography className={classes.largeText}>
-          Die CovMap möchte Risikogebiete so zeitnah wie möglich erkennen. Dazu ziehen wir die offiziellen Fallzahlen,
-          sowie ein von uns entwickeltes Vorhersagemodell basierend auf Kontakten und Symptomen heran.
-        </Typography>
+        <Typography className={classes.largeText}>{t("welcome.what-is-it.text")}</Typography>
       </div>
     </>
   );
diff --git a/src/components/WelcomeStepsModal/WelcomeModal3.tsx b/src/components/WelcomeStepsModal/WelcomeModal3.tsx
index 8f7c00fc..0c767c02 100644
--- a/src/components/WelcomeStepsModal/WelcomeModal3.tsx
+++ b/src/components/WelcomeStepsModal/WelcomeModal3.tsx
@@ -2,28 +2,27 @@ import React from "react";
 import { Typography } from "@material-ui/core";
 import { useCommonWelcomeModalStyles } from "./useCommonWelcomeModalStyles";
 import { FullWidthFixedAspectImage } from "./FullWidthFixedAspectImage";
+import { useTranslation } from "react-i18next";
 
 export const WelcomeModal3: React.FC = () => {
   const classes = useCommonWelcomeModalStyles();
+  const { t } = useTranslation("common");
 
   return (
     <>
-      <Typography className={classes.title}>Was zeigt mir die CovMap an?</Typography>
+      <Typography className={classes.title}>{t("welcome.what-does-it-show.title")}</Typography>
 
       <FullWidthFixedAspectImage aspect={62.1} src="/images/WelcomeModalImage3.svg" alt="Welcome" />
       <div>
         <img src={"/images/WelcomeModalImage3_sub.svg"} alt="Welcome" width="113px" height="46px" />
       </div>
       <div className={classes.infoTextDiv}>
-        <Typography className={classes.largeText}>
-          Auf der Karte kannst du ganz einfach erkennen, wo sich momentane Risikogebiete in Deutschland und in Deiner
-          Region befinden.
-        </Typography>
+        <Typography className={classes.largeText}>{t("welcome.what-does-it-show.text")}</Typography>
         <Typography className={classes.smallText} style={{ marginTop: "20px" }}>
-          Grün = normales Risiko
+          {t("welcome.what-does-it-show.normal-risk")}
         </Typography>
-        <Typography className={classes.smallText}>Orange = mittleres Risiko</Typography>
-        <Typography className={classes.smallText}>Rot = hohes Risiko</Typography>
+        <Typography className={classes.smallText}>{t("welcome.what-does-it-show.medium-risk")}</Typography>
+        <Typography className={classes.smallText}>{t("welcome.what-does-it-show.high-risk")}</Typography>
       </div>
     </>
   );
diff --git a/src/components/WelcomeStepsModal/WelcomeModalPostalCode.tsx b/src/components/WelcomeStepsModal/WelcomeModalPostalCode.tsx
index c77d4df8..c8bc0902 100644
--- a/src/components/WelcomeStepsModal/WelcomeModalPostalCode.tsx
+++ b/src/components/WelcomeStepsModal/WelcomeModalPostalCode.tsx
@@ -10,6 +10,7 @@ import { Link, useHistory } from "react-router-dom";
 import { WelcomeModalStep } from "./welcomeStepsConfig";
 import { useSelector } from "react-redux";
 import { State } from "src/state";
+import { Trans, useTranslation } from "react-i18next";
 
 function isValidPostalCode(text: string) {
   return /^[0-9]{5}$/.test(text);
@@ -33,6 +34,7 @@ const useStyles = makeStyles(() => ({
 
 export const WelcomeModalPostalCode: React.FC = () => {
   const classes = { ...useCommonWelcomeModalStyles(), ...useStyles() };
+  const { t } = useTranslation("common");
   const dispatch = useThunkDispatch();
   const history = useHistory();
   const postCode = useSelector((state: State) => state.app.intro.postCode);
@@ -74,15 +76,13 @@ export const WelcomeModalPostalCode: React.FC = () => {
 
   return (
     <>
-      <Typography className={classes.title}>
-        Für Dein regionales Risiko brauchen wir noch die Postleitzahl Deines Wohnortes
-      </Typography>
+      <Typography className={classes.title}>{t("welcome.regional-risk.title")}</Typography>
 
       <TextField
         className={classes.input}
         autoFocus
         error={isPostCodeError}
-        helperText={isPostCodeError ? "Bitte valide PLZ eingeben" : null}
+        helperText={isPostCodeError ? t("welcome.regional-risk.invalid-post-code") : null}
         variant="outlined"
         type="number"
         value={postCode}
@@ -96,8 +96,9 @@ export const WelcomeModalPostalCode: React.FC = () => {
       <div style={{ display: "flex", flexDirection: "row", alignItems: "center", marginBottom: "10px" }}>
         <Checkbox value={checked} checked={checked} onChange={handleCheckedChange} />
         <Typography className={classes.smallText} style={isCheckboxError ? { color: "red" } : {}}>
-          Ja, ich habe die <Link to={WelcomeModalStep.StepPostalCodeDataPrivacy}>Datenschutzerklärung</Link> zur
-          Kenntnis genommen und willige ein.
+          <Trans t={t} i18nKey="welcome.regional-risk.accept-privacy">
+            part-0 <Link to={WelcomeModalStep.StepPostalCodeDataPrivacy}>part-1</Link> part-2
+          </Trans>
         </Typography>
       </div>
 
@@ -108,7 +109,7 @@ export const WelcomeModalPostalCode: React.FC = () => {
           color="primary"
           onClick={submit}
         >
-          Jetzt starten
+          {t("welcome.regional-risk.start")}
         </Button>
       </div>
 
@@ -119,7 +120,7 @@ export const WelcomeModalPostalCode: React.FC = () => {
           variant="contained"
           onClick={onSkip}
         >
-          Ohne Postleitzahl weiter
+          {t("welcome.regional-risk.continue-without-post-code")}
         </Button>
       </div>
     </>
diff --git a/src/components/WelcomeStepsModal/WelcomeStepsModal.tsx b/src/components/WelcomeStepsModal/WelcomeStepsModal.tsx
index e4b93c13..159e52c5 100644
--- a/src/components/WelcomeStepsModal/WelcomeStepsModal.tsx
+++ b/src/components/WelcomeStepsModal/WelcomeStepsModal.tsx
@@ -9,6 +9,7 @@ import { State } from "../../state";
 import { StepConfig, welcomeStepsConfig } from "./welcomeStepsConfig";
 import { MobileDotsStepper } from "./MobileDotsStepper";
 import { useCommonWelcomeModalStyles } from "./useCommonWelcomeModalStyles";
+import { useTranslation } from "react-i18next";
 
 function getStepConfig(stepName?: string): StepConfig | undefined {
   return welcomeStepsConfig.find(({ name }) => name === stepName);
@@ -19,6 +20,7 @@ export const WelcomeStepsModal: React.FC<{ subPage?: string }> = (props) => {
   const theme = useTheme();
   const fullScreen = useMediaQuery(theme.breakpoints.down("sm"));
   const history = useHistory();
+  const { t } = useTranslation("common");
 
   const userPostalCode = useSelector((state: State) => state.app.userPostalCode);
 
@@ -38,7 +40,7 @@ export const WelcomeStepsModal: React.FC<{ subPage?: string }> = (props) => {
           component={Link}
           to={currentStepConfig.next}
         >
-          Weiter
+          {t("welcome.continue")}
         </Button>
       </div>
     ) : null;
@@ -52,7 +54,7 @@ export const WelcomeStepsModal: React.FC<{ subPage?: string }> = (props) => {
           component={Link}
           to={currentStepConfig.skip}
         >
-          Überspringen
+          {t("welcome.skip")}
         </Button>
       </div>
     ) : null;
diff --git a/static/locales/de/common.json b/static/locales/de/common.json
index 88c2299e..c95b8a95 100644
--- a/static/locales/de/common.json
+++ b/static/locales/de/common.json
@@ -12,5 +12,41 @@
     "share-button-twitter": "Auf Twitter teilen",
     "share-description-error-details": "Klicke hier für Fehlerdetails"
   },
-  "no data for selected timeframe": "Keine Daten für den ausgewählten Zeitraum."
+  "no data for selected timeframe": "Keine Daten für den ausgewählten Zeitraum.",
+  "welcome": {
+    "title": "Willkommen bei der CovMap",
+    "info-1": "Entwickelt von Ärzten der Charité - Universitätsmedizin Berlin",
+    "info-2": "Regionale Risikoeinschätzung zum Coronavirus",
+    "info-3": "Informationen zu allgemeinen Schutzmaßnahmen",
+    "info-4": "Links zu aktuellen Verhaltensregeln aller Landkreise",
+    "what-is-it": {
+      "title": "Was ist die CovMap?",
+      "text": "Die CovMap möchte Risikogebiete so zeitnah wie möglich erkennen. Dazu ziehen wir die offiziellen Fallzahlen, sowie ein von uns entwickeltes Vorhersagemodell basierend auf Kontakten und Symptomen heran."
+    },
+    "what-does-it-show": {
+      "title": "Was zeigt mir die CovMap an?",
+      "text": "Auf der Karte kannst du ganz einfach erkennen, wo sich momentane Risikogebiete in Deutschland und in Deiner Region befinden.",
+      "normal-risk": "Grün = normales Risiko",
+      "medium-risk": "Orange = mittleres Risiko",
+      "high-risk": "Rot = hohes Risiko"
+    },
+    "regional-risk": {
+      "title": "Für Dein regionales Risiko brauchen wir noch die Postleitzahl Deines Wohnortes",
+      "invalid-post-code": "Bitte valide PLZ eingeben",
+      "accept-privacy": "Ja, ich habe die <1>Datenschutzerklärung</1> zur Kenntnis genommen und willige ein.",
+      "start": "Jetzt starten",
+      "continue-without-post-code": "Ohne Postleitzahl weiter"
+    },
+    "continue": "Weiter",
+    "skip": "Überspringen"
+  },
+  "install-promt": {
+    "text-1": "Diese App kann auf deinem Geraet installiert werden.",
+    "text-2": "Tappe den Button unten um dich zu entscheiden!",
+    "confirm": "Alles klar!",
+    "cancel": "Nee danke."
+  },
+  "lazy-error": "Überprüfe Deine Netzwerkverbindung und aktualisiere die App.",
+  "copied-to-clipboard": "Link in Zwischenablage kopiert",
+  "close": "Schließen"
 }
diff --git a/static/locales/en/common.json b/static/locales/en/common.json
index 15b46189..68dd67aa 100644
--- a/static/locales/en/common.json
+++ b/static/locales/en/common.json
@@ -12,5 +12,6 @@
     "share-button-twitter": "Share on Twitter",
     "share-description-error-details": "Click for error details"
   },
-  "no data for selected timeframe": "No data available for the selected date."
+  "no data for selected timeframe": "No data available for the selected date.",
+  "lazy-error": "Check you network connection and refresh the app/page."
 }