diff --git a/apps/official/components/CovMapFeatureInfo.tsx b/apps/official/components/CovMapFeatureInfo.tsx
index 299e2a3d..5c5ee017 100644
--- a/apps/official/components/CovMapFeatureInfo.tsx
+++ b/apps/official/components/CovMapFeatureInfo.tsx
@@ -2,7 +2,6 @@ import React from "react";
 import { FeatureInfoProps } from "../../../src/app-config.types";
 import { Link as RouterLink, useLocation } from "react-router-dom";
 import {
-  Button,
   Card,
   CardContent,
   CardHeader,
@@ -10,6 +9,7 @@ import {
   Drawer,
   Grid,
   IconButton,
+  Paper,
   Theme,
   Typography,
   useTheme,
@@ -46,18 +46,19 @@ const useStyles = makeStyles<Theme, { fullScreen: boolean }>((theme) => ({
   },
   card: {
     // TODO: Extract into theme
-    "backgroundColor": "#FCFCFC",
-    "position": "relative",
-    "padding": theme.spacing(4, 2),
-    "overflow": "visible",
-    "&:last-child": {
-      paddingBottom: theme.spacing(4, 2), // make the cards symmetric by removing the huge padding bottom
-    },
+    backgroundColor: "#FCFCFC",
+    position: "relative",
+    padding: theme.spacing(2, 2),
+    overflow: "visible",
+  },
+  bluePaper: {
+    backgroundColor: "#2979ff",
+    color: "white",
+    padding: theme.spacing(2),
   },
-
   drawerPaper: {
     width: (props) => (props.fullScreen ? "100%" : "450px"),
-    maxHeight: "100%",
+    maxHeight: "calc(100% - 100px)",
     overflow: "hidden",
   },
   drawerRoot: {
@@ -73,17 +74,6 @@ const useStyles = makeStyles<Theme, { fullScreen: boolean }>((theme) => ({
     width: "100%",
     overflow: "auto",
   },
-  recommendationsLink: {
-    "textAlign": "center",
-    "& p": {
-      fontWeight: "bold",
-      margin: theme.spacing(1, 0),
-    },
-    "& a": {
-      padding: theme.spacing(1.4, 8),
-      borderRadius: theme.shape.borderRadius * 2,
-    },
-  },
   centerIcon: {
     margin: "0 auto",
     display: "block",
@@ -97,9 +87,12 @@ const useStyles = makeStyles<Theme, { fullScreen: boolean }>((theme) => ({
     position: "absolute",
     top: -12, // half height of the badge
   },
+  chipLabel: {
+    overflow: "visible",
+  },
 }));
 
-const titleByRiskScore = {
+export const titleByRiskScore = {
   [RiskScore.Low]: "Normales Risiko",
   [RiskScore.Medium]: "Mittleres Risiko",
   [RiskScore.High]: "Hohes Risiko",
@@ -109,7 +102,6 @@ export const CovMapFeatureInfo = ({ rawData }: FeatureInfoProps) => {
   const theme = useTheme();
   const fullScreen = useMediaQuery(theme.breakpoints.down("sm"));
   const {
-    recommendationsLink,
     action,
     card,
     container,
@@ -121,7 +113,9 @@ export const CovMapFeatureInfo = ({ rawData }: FeatureInfoProps) => {
     drawerScrollContainer,
     centerIcon,
     chipTop,
+    chipLabel,
     center,
+    bluePaper,
   } = useStyles({
     fullScreen,
   });
@@ -177,7 +171,7 @@ export const CovMapFeatureInfo = ({ rawData }: FeatureInfoProps) => {
   const ContactBehaviorCategory = (): JSX.Element => (
     <RouterLink to="/contact-behavior" style={{ textDecoration: "none" }} aria-label="go to contacts explanation">
       <Card variant="outlined" className={card}>
-        <Chip size="small" label="beta" className={chipTop} />
+        <Chip size="small" label="beta" classes={{ root: chipTop, label: chipLabel }} />
         <Grid container direction="row" alignItems="center" spacing={2}>
           <Grid item xs={8}>
             <Typography variant="h3">Kontaktverhalten der Bevölkerung</Typography>
@@ -193,18 +187,33 @@ export const CovMapFeatureInfo = ({ rawData }: FeatureInfoProps) => {
     </RouterLink>
   );
 
+  const link = `/recommendations?IdDistrict=${IdDistrict}`;
+  const HowShouldIBehave = (): JSX.Element => (
+    <RouterLink to={link} style={{ textDecoration: "none" }} aria-label="go to recommendations">
+      <Paper elevation={1} className={bluePaper}>
+        <Grid container direction="row" spacing={2}>
+          <Grid item xs={10}>
+            <Typography variant="h3">Wie kann ich mich verhalten?</Typography>
+          </Grid>
+          <Grid item xs={2}>
+            <ArrowForwardIosIcon className={centerIcon} fontSize="small" />
+          </Grid>
+        </Grid>
+      </Paper>
+    </RouterLink>
+  );
+
   const SymptomLoadCategory = (): JSX.Element => (
     <RouterLink to="/symptom-level" style={{ textDecoration: "none" }} aria-label="go to symptoms explanation">
       <Card variant="outlined" className={card}>
-        <Chip size="small" label="coming soon" className={chipTop} />
-        <Grid container direction="row" alignItems="center" spacing={2}>
+        <Chip size="small" label="bald verfügbar" classes={{ root: chipTop, label: chipLabel }} />
+        <Grid container direction="row" alignItems="center" spacing={2} style={{ color: "#828282" }}>
           <Grid item xs={8}>
             <Typography variant="h3">Symptomlast der Bevölkerung</Typography>
           </Grid>
           <Grid item xs={2}>
             <div className={center}>
               <SymptomsLowIcon />
-              <Typography variant="body2">normal</Typography>
             </div>
           </Grid>
           <Grid item xs={2}>
@@ -239,17 +248,15 @@ export const CovMapFeatureInfo = ({ rawData }: FeatureInfoProps) => {
     );
   };
 
-  const link = `/recommendations?IdDistrict=${IdDistrict}`;
   const cardContent = (
     <CardContent>
       <Grid container direction="column" spacing={2}>
-        {/* TODO: Comment this back in once the risk descriptions are updated */}
-        {/*<Grid item>*/}
-        {/*  <Typography>{riskDescription}</Typography>*/}
-        {/*</Grid>*/}
         <Grid item xs={12}>
           <RiskRecommendation contactScore={contactScore} incidence={incidence} />
         </Grid>
+        <Grid item xs={12}>
+          <HowShouldIBehave />
+        </Grid>
         <Grid item xs={12}>
           <ContactBehaviorCategory />
         </Grid>
@@ -259,12 +266,6 @@ export const CovMapFeatureInfo = ({ rawData }: FeatureInfoProps) => {
         <Grid item xs={12}>
           <CaseNumbersCategory />
         </Grid>
-        <Grid item className={recommendationsLink}>
-          <Typography>Wie kann ich mich verhalten?</Typography>
-          <Button component={RouterLink} to={link} variant="contained" color="secondary">
-            Weiter
-          </Button>
-        </Grid>
       </Grid>
     </CardContent>
   );
diff --git a/apps/official/components/RiskBadge.tsx b/apps/official/components/RiskBadge.tsx
index 649f4453..b900892e 100644
--- a/apps/official/components/RiskBadge.tsx
+++ b/apps/official/components/RiskBadge.tsx
@@ -1,6 +1,7 @@
 import { makeStyles, Theme } from "@material-ui/core/styles";
 import React, { FunctionComponent } from "react";
 import { RiskScore } from "app-config/models";
+import { Typography } from "@material-ui/core";
 
 const boxColorsByRiskScore = (theme: Theme) => ({
   [RiskScore.Low]: theme.palette.lowRisk.main,
@@ -20,8 +21,6 @@ const useStyles = makeStyles<Theme, Props, string>((theme) => {
       borderRadius: "2px",
       height: "46px",
       width: "27px",
-      fontSize: "17px",
-      lineHeight: "20px",
       display: "flex",
       alignItems: "center",
       justifyContent: "center",
@@ -36,6 +35,10 @@ export interface Props {
 }
 
 export const RiskBadge: FunctionComponent<Props> = ({ riskScore }) => {
-  const { box, medium } = useStyles({ riskScore });
-  return <div className={`${box} ${medium}`}>{riskNumberByRiskScore[riskScore]}</div>;
+  const classes = useStyles({ riskScore });
+  return (
+    <div className={classes.box}>
+      <Typography variant="h3">{riskNumberByRiskScore[riskScore]}</Typography>
+    </div>
+  );
 };
diff --git a/apps/official/components/risk-levels-page/RiskLevelsPage.tsx b/apps/official/components/risk-levels-page/RiskLevelsPage.tsx
deleted file mode 100644
index d46193af..00000000
--- a/apps/official/components/risk-levels-page/RiskLevelsPage.tsx
+++ /dev/null
@@ -1,77 +0,0 @@
-import React from "react";
-import { makeStyles } from "@material-ui/core/styles";
-import { Grid, Typography } from "@material-ui/core";
-import { RiskTexts } from "../../static/texts/RiskTexts";
-import RiskScoreNormalIcon from "../../static/images/risk-score-1.svg";
-import RiskScoreMediumIcon from "../../static/images/risk-score-2.svg";
-import RiskScoreHighIcon from "../../static/images/risk-score-3.svg";
-import { NavigationTitle } from "app-config/components/NavigationTitle";
-import ContactsMediumBackgroundIcon from "../../static/images/contacts-medium-background.svg";
-
-const useStyles = makeStyles({
-  leftText: {
-    textAlign: "left",
-  },
-});
-
-export const RiskLevelsPage = () => {
-  const classes = useStyles();
-
-  return (
-    <>
-      <main className="sections">
-        <section>
-          <NavigationTitle title="Risikostufen" backToExpandedFeatureInfo={true} />
-        </section>
-
-        <section>
-          <Grid container direction="row">
-            <Grid item xs={9}>
-              <Typography variant="h2" className={classes.leftText}>
-                Normales Risiko
-              </Typography>
-            </Grid>
-            <Grid item xs={3}>
-              <RiskScoreNormalIcon />
-            </Grid>
-          </Grid>
-          <Typography variant="body1" className={classes.leftText}>
-            {RiskTexts.NORMAL}
-          </Typography>
-        </section>
-
-        <section>
-          <Grid container direction="row">
-            <Grid item xs={9}>
-              <Typography variant="h2" className={classes.leftText}>
-                Mittleres Risiko
-              </Typography>
-            </Grid>
-            <Grid item xs={3}>
-              <RiskScoreMediumIcon />
-            </Grid>
-          </Grid>
-          <Typography variant="body1" className={classes.leftText}>
-            {RiskTexts.MEDIUM}
-          </Typography>
-        </section>
-
-        <section>
-          <Grid container direction="row">
-            <Grid item xs={9}>
-              <Typography variant="h2" className={classes.leftText}>
-                Hohes Risiko
-              </Typography>
-            </Grid>
-            <Grid item xs={3}>
-              <RiskScoreHighIcon />
-            </Grid>
-          </Grid>
-          <Typography variant="body1" className={classes.leftText}>
-            {RiskTexts.HIGH}
-          </Typography>
-        </section>
-      </main>
-    </>
-  );
-};
diff --git a/apps/official/components/risk-recommendation/RiskRecommendation.tsx b/apps/official/components/risk-recommendation/RiskRecommendation.tsx
index e4ae9396..0681178f 100644
--- a/apps/official/components/risk-recommendation/RiskRecommendation.tsx
+++ b/apps/official/components/risk-recommendation/RiskRecommendation.tsx
@@ -1,11 +1,7 @@
 import React from "react";
 import { makeStyles } from "@material-ui/core/styles";
-import { Card, Grid } from "@material-ui/core";
-import ArrowForwardIosIcon from "@material-ui/icons/ArrowForwardIos";
-
+import { Paper } from "@material-ui/core";
 import Typography from "@material-ui/core/Typography";
-import { Link } from "react-router-dom";
-
 import { ContactScore } from "../../models";
 
 function riscExplanation(contactScore: number, incidence: number): string {
@@ -37,20 +33,9 @@ function riscExplanation(contactScore: number, incidence: number): string {
 }
 
 const useStyles = makeStyles((theme) => ({
-  teaser: {
-    "border": 0,
-    "background": "#2979ff",
-    "color": "white",
-    "textTransform": "none",
-    "padding": theme.spacing(4, 2),
-    "&:last-child": {
-      paddingBottom: theme.spacing(4, 2), // make the cards symmetric by removing the huge padding bottom
-    },
-  },
-
-  centerIcon: {
-    margin: "0 auto",
-    display: "block",
+  paper: {
+    background: "#F2F2F2",
+    padding: theme.spacing(2),
   },
 }));
 
@@ -61,17 +46,8 @@ export const RiskRecommendation: React.FC<{ contactScore: ContactScore; incidenc
   const classes = useStyles();
 
   return (
-    <Link to="/risk-levels" style={{ textDecoration: "none" }} aria-label="go to explanation">
-      <Card className={classes.teaser}>
-        <Grid container direction="row" alignItems="center" spacing={2}>
-          <Grid item xs={10}>
-            <Typography variant="body2">{riscExplanation(contactScore, incidence)}</Typography>
-          </Grid>
-          <Grid item xs={2}>
-            <ArrowForwardIosIcon className={classes.centerIcon} fontSize="small" />
-          </Grid>
-        </Grid>
-      </Card>
-    </Link>
+    <Paper className={classes.paper} elevation={0}>
+      <Typography>{riscExplanation(contactScore, incidence)}</Typography>
+    </Paper>
   );
 };
diff --git a/apps/official/index.ts b/apps/official/index.ts
index c745a1f7..31b80bba 100644
--- a/apps/official/index.ts
+++ b/apps/official/index.ts
@@ -12,7 +12,6 @@ import ContactBehavior from "./components/pages/ContactBehavior";
 import SymptomLevel from "./components/pages/SymptomLevel";
 import { BasicRecommendations } from "./components/basic-recommendations/BasicRecommendations";
 import { CovMapFeatureInfo } from "./components/CovMapFeatureInfo";
-import { RiskLevelsPage } from "./components/risk-levels-page/RiskLevelsPage";
 // TODO: Integrate CovQuestions
 // import { Questions } from './components/pages/Questions'
 
@@ -93,13 +92,6 @@ export const config: AppConfig = {
         Component: BasicRecommendations,
         hidden: true, // dont show this page in the navbar
       },
-      {
-        id: "risk-levels-page",
-        title: "Risikostufen",
-        route: "/risk-levels",
-        Component: RiskLevelsPage,
-        hidden: true,
-      },
       {
         id: "rki-page",
         title: "RKI",
diff --git a/apps/official/static/texts/RiskTexts.ts b/apps/official/static/texts/RiskTexts.ts
deleted file mode 100644
index fdaacd23..00000000
--- a/apps/official/static/texts/RiskTexts.ts
+++ /dev/null
@@ -1,5 +0,0 @@
-export enum RiskTexts {
-  NORMAL = "Die Zahl der Neuinfektionen ist niedrig, das Kontaktverhalten ist ausreichend reduziert und die Symptomlast ist normal. Ein normales Risiko bedeutet allerdings nicht, dass gar keine Infektionen in der Region möglich sind",
-  MEDIUM = "Die Zahl der Neuinfektionen oder das Kontaktverhalten bzw. die Symptomlast der Bevölkerung ist erhöht, so dass die Zahl der Neuinfektionen demnächst weiter ansteigen könnte. Wir rufen dazu auf, die Anzahl der Kontakte freiwillig zu reduzieren.",
-  HIGH = "Die Zahl der Neuinfektionen ist stark erhöht. Wir rufen dazu auf, die Anzahl der Kontakte freiwillig weitestgehend zu reduzieren.",
-}