diff --git a/next.config.js b/next.config.js
index 7dd3c9480..e59ad33be 100644
--- a/next.config.js
+++ b/next.config.js
@@ -22,6 +22,7 @@ function setupLocalDevelopmentMode(config, env) {
   env.REACT_APP_API_URL = "http://localhost:3000/graphql";
   env.APPSYNC_URL = process.env.REACT_APP_API_URL;
   env.SEARCH_DOMAIN = process.env.SEARCH_DOMAIN;
+  env.VERSION = process.env.VERSION;
 
   /**
    * @type {import("next").NextConfig}
diff --git a/package.json b/package.json
index 9c5b3468c..fe40f06b5 100644
--- a/package.json
+++ b/package.json
@@ -163,7 +163,7 @@
     "clean": "rimraf .cdk-* .next .nyc_output .report .serverless .serverless_nextjs build cdk.out out schema.graphql common/graphql/*",
     "cdk": "cdk",
     "prepare": "husky install",
-    "dev": "next dev",
+    "dev": "VERSION=`git rev-parse --abbrev-ref HEAD` next dev",
     "build": "next build",
     "start": "next start",
     "cypress": "cypress",
diff --git a/src/components/layout/layout.tsx b/src/components/layout/layout.tsx
index 663db9807..315fc512c 100644
--- a/src/components/layout/layout.tsx
+++ b/src/components/layout/layout.tsx
@@ -3,6 +3,7 @@ import Breadcrumbs, { RouteLabels } from "./Breadcrumbs";
 import Header from "./header/header";
 import { Footer } from "./footer";
 import { Container } from "@mui/material";
+import NotificationBar from "@components/notification/NotificationBar";
 
 interface Props {
   children: ReactNode;
@@ -25,6 +26,7 @@ export default function Layout({ children, routeLabels }: Props): ReactElement {
 
   return (
     <div className="min-h-screen relative flex flex-col">
+      {process.env.NODE_ENV !== "production" && <NotificationBar />}
       <Header scrolledPastOffset={toTopEnabled} />
       <Breadcrumbs routeLabels={routeLabels} />
       <Container sx={{ marginBottom: "110px" }}>
diff --git a/src/components/notification/NotificationBar.tsx b/src/components/notification/NotificationBar.tsx
new file mode 100644
index 000000000..99e6e60fa
--- /dev/null
+++ b/src/components/notification/NotificationBar.tsx
@@ -0,0 +1,17 @@
+import { Container } from "@mui/material";
+import React, { ReactElement } from "react";
+
+export interface HeaderProps {
+  scrolledPastOffset: boolean;
+}
+
+export default function NotificationBar(): ReactElement {
+  return (
+    <Container className="sticky bg-green z-20 w-full transition-all" >
+      <div style={{ width: "100%", textAlign: "center" }} className="">
+        <span>YMPÄRISTÖ: {process.env.ENVIRONMENT} </span>
+        <span>VERSIO: {process.env.VERSION} </span>
+      </div>
+    </Container>
+  );
+}
diff --git a/src/components/projekti/nahtavillaolo/kuulutuksentiedot/Lukunakyma.tsx b/src/components/projekti/nahtavillaolo/kuulutuksentiedot/Lukunakyma.tsx
index 2aa9d2cde..adfdfdd96 100644
--- a/src/components/projekti/nahtavillaolo/kuulutuksentiedot/Lukunakyma.tsx
+++ b/src/components/projekti/nahtavillaolo/kuulutuksentiedot/Lukunakyma.tsx
@@ -12,6 +12,7 @@ import ExtLink from "@components/ExtLink";
 import { Link } from "@mui/material";
 import { ProjektiLisatiedolla } from "src/hooks/useProjekti";
 import { splitFilePath } from "../../../../util/fileUtil";
+import ButtonFlatWithIcon from "@components/button/ButtonFlat";
 interface Props {
   nahtavillaoloVaiheJulkaisu?: NahtavillaoloVaiheJulkaisu | null;
   projekti: ProjektiLisatiedolla;
@@ -25,8 +26,7 @@ export default function NahtavillaoloLukunakyma({ nahtavillaoloVaiheJulkaisu, pr
   let { kuulutusPaiva, published } = examineKuulutusPaiva(nahtavillaoloVaiheJulkaisu.kuulutusPaiva);
   let nahtavillaoloVaiheHref: string | undefined;
   if (published) {
-    nahtavillaoloVaiheHref =
-      window.location.protocol + "//" + window.location.host + "/suunnitelma/" + projekti.oid + "/nahtavillaolo";
+    nahtavillaoloVaiheHref = window.location.protocol + "//" + window.location.host + "/suunnitelma/" + projekti.oid + "/nahtavillaolo";
   }
   const vuorovaikutusYhteysHenkilot: ProjektiKayttaja[] = nahtavillaoloVaiheJulkaisu.kuulutusYhteysHenkilot
     ? nahtavillaoloVaiheJulkaisu.kuulutusYhteysHenkilot
@@ -59,9 +59,20 @@ export default function NahtavillaoloLukunakyma({ nahtavillaoloVaiheJulkaisu, pr
           <p className="vayla-label md:col-span-1">Kuulutuspäivä</p>
           <p className="vayla-label md:col-span-3">Kuulutusvaihe päättyy</p>
           <p className="md:col-span-1 mb-0">{kuulutusPaiva}</p>
-          <p className="md:col-span-3 mb-0">
+          <p className="md:col-span-1 mb-0">
             <FormatDate date={nahtavillaoloVaiheJulkaisu.kuulutusVaihePaattyyPaiva} />
           </p>
+          {process.env.NODE_ENV != "production" && (
+            <ButtonFlatWithIcon
+              icon="history"
+              className="md:col-span-2 mb-0"
+              onClick={() => {
+                window.location.assign(`/api/test/${projekti.oid}/nahtavillaolomenneisyyteen`);
+              }}
+            >
+              Siirrä menneisyyteen (TESTAAJILLE)
+            </ButtonFlatWithIcon>
+          )}
         </div>
         <div>
           <p className="vayla-label">
@@ -94,30 +105,24 @@ export default function NahtavillaoloLukunakyma({ nahtavillaoloVaiheJulkaisu, pr
           {nahtavillaoloVaiheJulkaisu.kuulutusYhteystiedot?.map((yhteystieto, index) => (
             <p style={{ margin: 0 }} key={index}>
               {capitalize(yhteystieto.etunimi)} {capitalize(yhteystieto.sukunimi)}, puh. {yhteystieto.puhelinnumero},{" "}
-              {yhteystieto?.sahkoposti ? replace(yhteystieto?.sahkoposti, "@", "[at]") : ""} ({yhteystieto.organisaatio}
-              )
+              {yhteystieto?.sahkoposti ? replace(yhteystieto?.sahkoposti, "@", "[at]") : ""} ({yhteystieto.organisaatio})
             </p>
           ))}
           {vuorovaikutusYhteysHenkilot.map((yhteystieto, index) => (
             <p style={{ margin: 0 }} key={index}>
-              {yhteystieto.nimi}, puh. {yhteystieto.puhelinnumero},{" "}
-              {yhteystieto.email ? replace(yhteystieto.email, "@", "[at]") : ""} ({yhteystieto.organisaatio})
+              {yhteystieto.nimi}, puh. {yhteystieto.puhelinnumero}, {yhteystieto.email ? replace(yhteystieto.email, "@", "[at]") : ""} (
+              {yhteystieto.organisaatio})
             </p>
           ))}
         </SectionContent>
         <SectionContent>
           <p className="vayla-label mb-5">Kuulutuksen yhteyshenkilöt</p>
-          {!published && (
-            <p>Linkki julkiselle puolelle muodostetaan kuulutuspäivänä. Kuulutuspäivä on {kuulutusPaiva}.</p>
-          )}
+          {!published && <p>Linkki julkiselle puolelle muodostetaan kuulutuspäivänä. Kuulutuspäivä on {kuulutusPaiva}.</p>}
           {published && <ExtLink href={nahtavillaoloVaiheHref}>Kuulutus palvelun julkisella puolella</ExtLink>}
         </SectionContent>
         <SectionContent>
           <p className="vayla-label">Ladattavat kuulutukset ja ilmoitukset</p>
-          <p>
-            Kuulutus ja ilmoitus ensisijaisella kielellä (
-            {lowerCase(nahtavillaoloVaiheJulkaisu.kielitiedot?.ensisijainenKieli)})
-          </p>
+          <p>Kuulutus ja ilmoitus ensisijaisella kielellä ({lowerCase(nahtavillaoloVaiheJulkaisu.kielitiedot?.ensisijainenKieli)})</p>
           {ensisijaisetPDFt && (
             <div className="flex flex-col mb-4">
               <div>
@@ -131,11 +136,7 @@ export default function NahtavillaoloLukunakyma({ nahtavillaoloVaiheJulkaisu, pr
                 </Link>
               </div>
               <div>
-                <Link
-                  underline="none"
-                  href={ensisijaisetPDFt.nahtavillaoloIlmoitusKiinteistonOmistajallePDFPath}
-                  target="_blank"
-                >
+                <Link underline="none" href={ensisijaisetPDFt.nahtavillaoloIlmoitusKiinteistonOmistajallePDFPath} target="_blank">
                   {splitFilePath(ensisijaisetPDFt.nahtavillaoloIlmoitusKiinteistonOmistajallePDFPath).fileName}
                 </Link>
               </div>
@@ -144,10 +145,7 @@ export default function NahtavillaoloLukunakyma({ nahtavillaoloVaiheJulkaisu, pr
 
           {nahtavillaoloVaiheJulkaisu.kielitiedot?.toissijainenKieli && (
             <div className="content mb-4">
-              <p>
-                Kuulutus ja ilmoitus toissijaisella kielellä (
-                {lowerCase(nahtavillaoloVaiheJulkaisu.kielitiedot?.toissijainenKieli)})
-              </p>
+              <p>Kuulutus ja ilmoitus toissijaisella kielellä ({lowerCase(nahtavillaoloVaiheJulkaisu.kielitiedot?.toissijainenKieli)})</p>
               {toissijaisetPDFt && (
                 <div className="flex flex-col">
                   <div>
@@ -161,11 +159,7 @@ export default function NahtavillaoloLukunakyma({ nahtavillaoloVaiheJulkaisu, pr
                     </Link>
                   </div>
                   <div>
-                    <Link
-                      underline="none"
-                      href={toissijaisetPDFt.nahtavillaoloIlmoitusKiinteistonOmistajallePDFPath}
-                      target="_blank"
-                    >
+                    <Link underline="none" href={toissijaisetPDFt.nahtavillaoloIlmoitusKiinteistonOmistajallePDFPath} target="_blank">
                       {splitFilePath(toissijaisetPDFt.nahtavillaoloIlmoitusKiinteistonOmistajallePDFPath).fileName}
                     </Link>
                   </div>
diff --git a/src/font-awesome-init.js b/src/font-awesome-init.js
index ff0a16ea7..383f40eba 100644
--- a/src/font-awesome-init.js
+++ b/src/font-awesome-init.js
@@ -31,6 +31,7 @@ import {
   faChevronDown,
   faWindowClose,
   faCopy,
+  faHistory
 } from "@fortawesome/free-solid-svg-icons";
 library.add(
   faAngleDown,
@@ -63,7 +64,8 @@ library.add(
   faSearch,
   faTrash,
   faWindowClose,
-  faCopy
+  faCopy,
+  faHistory
 );
 
 import {