diff --git a/docker-compose.yml b/docker-compose.yml
index 65d37faca..4c1b15c5b 100644
--- a/docker-compose.yml
+++ b/docker-compose.yml
@@ -9,6 +9,12 @@ services:
     environment:
       - DATABASE_URL=postgresql://postgres:postgres@db:5432/cms?schema=public
       - NEXT_WEBPACK_USEPOLLING=1
+      - NEXT_PUBLIC_BASE_URL_LOCAL=http://localhost:3000
+      - NEXTAUTH_URL=http://localhost:3000
+      - NEXTAUTH_SECRET=NEXTAUTH_SECRET
+      - JWT_SECRET=JWT_SECRET
+      - ADMIN_SECRET=ADMIN_SECRET
+      - LOCAL_CMS_PROVIDER=true
     ports:
       - '3000:3000'
       - '5555:5555'
diff --git a/src/components/Greeting.tsx b/src/components/Greeting.tsx
index 1f7c2341d..6bd8cac43 100644
--- a/src/components/Greeting.tsx
+++ b/src/components/Greeting.tsx
@@ -1,20 +1,21 @@
 'use client';
 
-export const Greeting = () => {
-  // Get the current hour
+import { useEffect, useState } from 'react';
+
+const getGreeting = () => {
   const currentHour = new Date().getHours();
+  if (currentHour >= 4 && currentHour < 12) return 'Good Morning';
+  if (currentHour >= 12 && currentHour < 17) return 'Good Afternoon';
+  if (currentHour >= 17 && currentHour <= 20) return 'Good Evening';
+  return 'Happy to see you back!';
+};
+
+export const Greeting = () => {
+  const [greeting, setGreeting] = useState('');
 
-  // Determine the appropriate greeting based on the time of day
-  let greeting;
-  if (currentHour >= 4 && currentHour < 12) {
-    greeting = 'Good Morning';
-  } else if (currentHour >= 12 && currentHour < 17) {
-    greeting = 'Good Afternoon';
-  } else if (currentHour >= 17 && currentHour <= 20) {
-    greeting = 'Good Evening';
-  } else {
-    greeting = 'Happy to see you back!';
-  }
+  useEffect(() => {
+    setGreeting(getGreeting());
+  }, []);
 
   return greeting;
 };