diff --git a/.env.example b/.env.example
index c6e1930fc..f29228442 100644
--- a/.env.example
+++ b/.env.example
@@ -3,3 +3,4 @@ SITE_NAME="Demo Commerce"
 SHOPIFY_REVALIDATION_SECRET=""
 SHOPIFY_STOREFRONT_ACCESS_TOKEN=""
 SHOPIFY_STORE_DOMAIN="[your-shopify-store-subdomain].myshopify.com"
+ENVIRONMENT="development"
diff --git a/app/layout.tsx b/app/layout.tsx
index 5e3355ce9..f720c0309 100644
--- a/app/layout.tsx
+++ b/app/layout.tsx
@@ -3,10 +3,10 @@ import { Navbar } from 'components/layout/navbar';
 import { WelcomeToast } from 'components/welcome-toast';
 import { GeistSans } from 'geist/font/sans';
 import { getCart } from 'lib/shopify';
+import { baseUrl } from 'lib/utils';
 import { ReactNode } from 'react';
 import { Toaster } from 'sonner';
 import './globals.css';
-import { baseUrl } from 'lib/utils';
 
 const { SITE_NAME } = process.env;
 
@@ -27,6 +27,21 @@ export default async function RootLayout({
 }: {
   children: ReactNode;
 }) {
+  if (process.env.ENVIRONMENT === 'production') {
+    return (
+      <html lang="en" className={GeistSans.variable}>
+        <body className="bg-neutral-50 text-black selection:bg-teal-300 dark:bg-neutral-900 dark:text-white dark:selection:bg-pink-500 dark:selection:text-white">
+          <div className="min-h-screen flex flex-col items-center justify-center bg-gray-100">
+          <div className="text-center p-8 bg-white rounded-lg shadow-lg">
+            <h1 className="text-4xl font-bold text-gray-800 mb-4">Under Construction</h1>
+            <p className="text-gray-600">We're working on something awesome. Please check back soon!</p>
+          </div>
+        </div>
+        </body>
+      </html>
+    );
+  }
+
   // Don't await the fetch, pass the Promise to the context provider
   const cart = getCart();
 
