diff --git a/apps/web/app/(app)/environments/[environmentId]/settings/api-keys/ApiKeyList.tsx b/apps/web/app/(app)/environments/[environmentId]/settings/api-keys/ApiKeyList.tsx
index 48b71ae500..9a11e48e91 100644
--- a/apps/web/app/(app)/environments/[environmentId]/settings/api-keys/ApiKeyList.tsx
+++ b/apps/web/app/(app)/environments/[environmentId]/settings/api-keys/ApiKeyList.tsx
@@ -25,6 +25,11 @@ export default async function ApiKeyList({
   const apiKeys = await getApiKeys(environmentTypeId);
 
   return (
-    <EditApiKeys environmentTypeId={environmentTypeId} environmentType={environmentType} apiKeys={apiKeys} environmentId={environmentId}/>
+    <EditApiKeys
+      environmentTypeId={environmentTypeId}
+      environmentType={environmentType}
+      apiKeys={apiKeys}
+      environmentId={environmentId}
+    />
   );
 }
diff --git a/apps/web/app/(app)/environments/[environmentId]/settings/api-keys/EditApiKeys.tsx b/apps/web/app/(app)/environments/[environmentId]/settings/api-keys/EditApiKeys.tsx
index ecc4b557d5..c8fd9f4670 100644
--- a/apps/web/app/(app)/environments/[environmentId]/settings/api-keys/EditApiKeys.tsx
+++ b/apps/web/app/(app)/environments/[environmentId]/settings/api-keys/EditApiKeys.tsx
@@ -15,12 +15,12 @@ export default function EditAPIKeys({
   environmentTypeId,
   environmentType,
   apiKeys,
-  environmentId
+  environmentId,
 }: {
   environmentTypeId: string;
   environmentType: string;
   apiKeys: TApiKey[];
-  environmentId: string
+  environmentId: string;
 }) {
   const [isAddAPIKeyModalOpen, setOpenAddAPIKeyModal] = useState(false);
   const [isDeleteKeyModalOpen, setOpenDeleteKeyModal] = useState(false);
@@ -54,7 +54,7 @@ export default function EditAPIKeys({
       <div className="mb-6 text-right">
         <Button
           variant="darkCTA"
-          disabled={environmentId!==environmentTypeId}
+          disabled={environmentId !== environmentTypeId}
           onClick={() => {
             setOpenAddAPIKeyModal(true);
           }}>
diff --git a/apps/web/app/(app)/environments/[environmentId]/settings/api-keys/page.tsx b/apps/web/app/(app)/environments/[environmentId]/settings/api-keys/page.tsx
index 3923be96ba..5f8a220b7f 100644
--- a/apps/web/app/(app)/environments/[environmentId]/settings/api-keys/page.tsx
+++ b/apps/web/app/(app)/environments/[environmentId]/settings/api-keys/page.tsx
@@ -4,18 +4,18 @@ import { REVALIDATION_INTERVAL } from "@formbricks/lib/constants";
 import SettingsCard from "../SettingsCard";
 import SettingsTitle from "../SettingsTitle";
 import ApiKeyList from "./ApiKeyList";
-import EnvironmentNotice from "@/app/(app)/environments/[environmentId]/settings/setup/EnvironmentNotice";
+import EnvironmentNotice from "@/components/shared/EnvironmentNotice";
 
 export default async function ProfileSettingsPage({ params }) {
   return (
     <div>
       <SettingsTitle title="API Keys" />
+      <EnvironmentNotice environmentId={params.environmentId} pageType="apiSettings" />
       <SettingsCard
         title="Development Env Keys"
         description="Add and remove API keys for your Development environment.">
         <ApiKeyList environmentId={params.environmentId} environmentType="development" />
       </SettingsCard>
-      <EnvironmentNotice environmentId={params.environmentId} pageType="apiSettings"/>
       <SettingsCard
         title="Production Env Keys"
         description="Add and remove API keys for your Production environment.">
diff --git a/apps/web/app/(app)/environments/[environmentId]/settings/setup/EnvironmentNotice.tsx b/apps/web/app/(app)/environments/[environmentId]/settings/setup/EnvironmentNotice.tsx
deleted file mode 100644
index c09bc6f518..0000000000
--- a/apps/web/app/(app)/environments/[environmentId]/settings/setup/EnvironmentNotice.tsx
+++ /dev/null
@@ -1,52 +0,0 @@
-"use client";
-
-import LoadingSpinner from "@/components/shared/LoadingSpinner";
-import { useEnvironment } from "@/lib/environments/environments";
-import { ErrorComponent } from "@formbricks/ui";
-import { LightBulbIcon } from "@heroicons/react/24/solid";
-import { useRouter } from "next/navigation";
-
-export default function EnvironmentNotice({ environmentId,pageType }: { environmentId: string, pageType:string }) {
-  const { environment, isErrorEnvironment, isLoadingEnvironment } = useEnvironment(environmentId);
-  const router = useRouter();
-
-  const changeEnvironment = (environmentType: string) => {
-    const newEnvironmentId = environment.product.environments.find((e) => e.type === environmentType)?.id;
-    router.push(`/environments/${newEnvironmentId}/`);
-  };
-
-  if (isLoadingEnvironment) {
-    return <LoadingSpinner />;
-  }
-
-  if (isErrorEnvironment) {
-    return <ErrorComponent />;
-  }
-  if(pageType==="apiSettings"){
-    return (<div>
-        <div className="flex items-center space-y-3 rounded-lg border border-blue-100 bg-blue-50 p-4 text-sm text-blue-900 shadow-sm md:space-y-0 md:text-base">
-          <LightBulbIcon className="mr-3 h-8 w-8 text-blue-400" />
-          <p>
-            Production environment API keys can exclusively be generated and utilized within the production environment, and similarly, development API keys follow the same pattern.
-          </p>
-        </div>
-    </div>)
-  }
-
-if(pageType==="setupChecklist")
-  return (
-    <div>
-      {environment.type === "production" && !environment.widgetSetupCompleted && (
-        <div className="flex items-center space-y-3 rounded-lg border border-blue-100 bg-blue-50 p-4 text-sm text-blue-900 shadow-sm md:space-y-0 md:text-base">
-          <LightBulbIcon className="mr-3 h-6 w-6 text-blue-400" />
-          <p>
-            You&apos;re currently in the Production environment.
-            <a onClick={() => changeEnvironment("development")} className="ml-1 cursor-pointer underline">
-              Switch to Development environment.
-            </a>
-          </p>
-        </div>
-      )}
-    </div>
-  );
-}
diff --git a/apps/web/app/(app)/environments/[environmentId]/settings/setup/page.tsx b/apps/web/app/(app)/environments/[environmentId]/settings/setup/page.tsx
index fddd3ff0e8..815b6009bb 100644
--- a/apps/web/app/(app)/environments/[environmentId]/settings/setup/page.tsx
+++ b/apps/web/app/(app)/environments/[environmentId]/settings/setup/page.tsx
@@ -1,7 +1,7 @@
 import WidgetStatusIndicator from "@/components/shared/WidgetStatusIndicator";
 import SettingsCard from "../SettingsCard";
 import SettingsTitle from "../SettingsTitle";
-import EnvironmentNotice from "./EnvironmentNotice";
+import EnvironmentNotice from "../../../../../../components/shared/EnvironmentNotice";
 import SetupInstructions from "./SetupInstructions";
 
 export default function ProfileSettingsPage({ params }) {
@@ -12,7 +12,7 @@ export default function ProfileSettingsPage({ params }) {
         <WidgetStatusIndicator environmentId={params.environmentId} type="large" />
       </SettingsCard>
 
-      <EnvironmentNotice environmentId={params.environmentId} pageType="setupChecklist"/>
+      <EnvironmentNotice environmentId={params.environmentId} pageType="setupChecklist" />
       <SettingsCard
         title="How to setup"
         description="Follow these steps to setup the Formbricks widget within your app"
diff --git a/apps/web/components/shared/EnvironmentNotice.tsx b/apps/web/components/shared/EnvironmentNotice.tsx
new file mode 100644
index 0000000000..b1ac546463
--- /dev/null
+++ b/apps/web/components/shared/EnvironmentNotice.tsx
@@ -0,0 +1,65 @@
+"use client";
+
+import LoadingSpinner from "@/components/shared/LoadingSpinner";
+import { useEnvironment } from "@/lib/environments/environments";
+import { ErrorComponent } from "@formbricks/ui";
+import { LightBulbIcon } from "@heroicons/react/24/solid";
+import { useRouter } from "next/navigation";
+
+export default function EnvironmentNotice({
+  environmentId,
+  pageType,
+}: {
+  environmentId: string;
+  pageType: string;
+}) {
+  const { environment, isErrorEnvironment, isLoadingEnvironment } = useEnvironment(environmentId);
+  const router = useRouter();
+
+  const changeEnvironment = (environmentType: string) => {
+    const newEnvironmentId = environment.product.environments.find((e) => e.type === environmentType)?.id;
+    router.push(`/environments/${newEnvironmentId}/`);
+  };
+
+  if (isLoadingEnvironment) {
+    return <LoadingSpinner />;
+  }
+
+  if (isErrorEnvironment) {
+    return <ErrorComponent />;
+  }
+  if (pageType === "apiSettings") {
+    return (
+      <div>
+        {environment.type === "production" && (
+          <div className="flex items-center space-y-3 rounded-lg border border-blue-100 bg-blue-50 p-4 text-sm text-blue-900 shadow-sm md:space-y-0 md:text-base">
+            <LightBulbIcon className="mr-3 h-8 w-8 text-blue-400" />
+            <p>
+              You&apos;re currently in the production environment, so you can only create production API keys.
+              <a onClick={() => changeEnvironment("development")} className="ml-1 cursor-pointer underline">
+                Switch to Development now.
+              </a>
+            </p>
+          </div>
+        )}
+      </div>
+    );
+  }
+
+  if (pageType === "setupChecklist")
+    return (
+      <div>
+        {environment.type === "production" && !environment.widgetSetupCompleted && (
+          <div className="flex items-center space-y-3 rounded-lg border border-blue-100 bg-blue-50 p-4 text-sm text-blue-900 shadow-sm md:space-y-0 md:text-base">
+            <LightBulbIcon className="mr-3 h-6 w-6 text-blue-400" />
+            <p>
+              You&apos;re currently in the Production environment.
+              <a onClick={() => changeEnvironment("development")} className="ml-1 cursor-pointer underline">
+                Switch to Development environment.
+              </a>
+            </p>
+          </div>
+        )}
+      </div>
+    );
+}