diff --git a/compiler/forget/packages/playground/app/index.tsx b/compiler/forget/packages/playground/app/index.tsx
index 9d5c57ee44..e8db4bce33 100644
--- a/compiler/forget/packages/playground/app/index.tsx
+++ b/compiler/forget/packages/playground/app/index.tsx
@@ -15,7 +15,11 @@ const Home: NextPage = () => {
   return (
     <div className="flex flex-col w-screen h-screen font-light">
       <Head>
-        <title>React Forget Playground</title>
+        <title>
+          {process.env.NODE_ENV === "development"
+            ? "[DEV] React Forget Playground"
+            : "React Forget Playground"}
+        </title>
         <meta
           name="viewport"
           content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0"
diff --git a/compiler/forget/packages/playground/app/layout.tsx b/compiler/forget/packages/playground/app/layout.tsx
index 187bbc8c79..9d134ded2a 100644
--- a/compiler/forget/packages/playground/app/layout.tsx
+++ b/compiler/forget/packages/playground/app/layout.tsx
@@ -15,7 +15,11 @@ export default function RootLayout({
   return (
     <html lang="en">
       <head>
-        <title>React Forget Playground</title>
+        <title>
+          {process.env.NODE_ENV === "development"
+            ? "[DEV] React Forget Playground"
+            : "React Forget Playground"}
+        </title>
         <meta
           name="viewport"
           content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0"
diff --git a/compiler/forget/packages/playground/components/Header.tsx b/compiler/forget/packages/playground/components/Header.tsx
index 82c9dba56a..8d6383b9ac 100644
--- a/compiler/forget/packages/playground/components/Header.tsx
+++ b/compiler/forget/packages/playground/components/Header.tsx
@@ -4,6 +4,7 @@
 
 import { RefreshIcon, ShareIcon, TrashIcon } from "@heroicons/react/outline";
 import { CheckIcon } from "@heroicons/react/solid";
+import clsx from "clsx";
 import { useSnackbar } from "notistack";
 import { useState } from "react";
 import { defaultStore, minimalStore } from "../lib/defaultStore";
@@ -47,13 +48,23 @@ export default function Header() {
   return (
     <div className="flex items-center justify-between w-screen px-5 py-3 border-b border-gray-200">
       <div className="flex items-center flex-none h-full gap-2 text-lg">
-        <Logo className="w-8 h-8 text-link" />
+        <Logo
+          className={clsx(
+            "w-8 h-8 text-link",
+            process.env.NODE_ENV === "development" && "text-yellow-600"
+          )}
+        />
         <p className="hidden select-none sm:block">React Forget Playground</p>
         <div
           title="Do not share this outside of Meta"
-          className="px-1 mb-px text-sm font-bold tracking-wide text-red-600 uppercase rounded bg-highlight dark:bg-highlight-dark whitespace-nowrap"
+          className={clsx(
+            "px-1 mb-px text-sm font-bold tracking-wide uppercase rounded bg-highlight dark:bg-highlight-dark whitespace-nowrap",
+            process.env.NODE_ENV === "development"
+              ? "text-yellow-600"
+              : "text-red-600"
+          )}
         >
-          Private
+          {process.env.NODE_ENV === "development" ? "DEV" : "Private"}
         </div>
       </div>
       <div className="flex items-center text-[15px] gap-4">
diff --git a/compiler/forget/packages/playground/package.json b/compiler/forget/packages/playground/package.json
index 53c6697dfe..5e5274083e 100644
--- a/compiler/forget/packages/playground/package.json
+++ b/compiler/forget/packages/playground/package.json
@@ -4,7 +4,7 @@
   "private": true,
   "scripts": {
     "preinstall": "./scripts/setup.sh",
-    "dev": "next dev",
+    "dev": "NODE_ENV=development && next dev",
     "build": "next build && node ./scripts/downloadFonts.js",
     "start": "next start",
     "lint": "next lint"
