diff --git a/web/src/app/admin/api-key/page.tsx b/web/src/app/admin/api-key/page.tsx
index 88ed047703d3..22c03546b30b 100644
--- a/web/src/app/admin/api-key/page.tsx
+++ b/web/src/app/admin/api-key/page.tsx
@@ -112,7 +112,10 @@ function Main() {
   }
 
   const newApiKeyButton = (
-    <CreateButton href="/admin/api-key/new" text="Create API Key" />
+    <CreateButton
+      onClick={() => setShowCreateUpdateForm(true)}
+      text="Create API Key"
+    />
   );
 
   if (apiKeys.length === 0) {
diff --git a/web/src/app/admin/token-rate-limits/page.tsx b/web/src/app/admin/token-rate-limits/page.tsx
index 17947065ed92..656e5b5911d7 100644
--- a/web/src/app/admin/token-rate-limits/page.tsx
+++ b/web/src/app/admin/token-rate-limits/page.tsx
@@ -140,7 +140,7 @@ function Main() {
       </ul>
 
       <CreateButton
-        href="/admin/token-rate-limits/new"
+        onClick={() => setModalIsOpen(true)}
         text="Create a Token Rate Limit"
       />
       {isPaidEnterpriseFeaturesEnabled && (
diff --git a/web/src/app/ee/admin/groups/page.tsx b/web/src/app/ee/admin/groups/page.tsx
index a4d322a6a629..24795a12d953 100644
--- a/web/src/app/ee/admin/groups/page.tsx
+++ b/web/src/app/ee/admin/groups/page.tsx
@@ -53,7 +53,10 @@ const Main = () => {
     <>
       {popup}
       {isAdmin && (
-        <CreateButton href="/admin/groups/new" text="Create New User Group" />
+        <CreateButton
+          onClick={() => setShowForm(true)}
+          text="Create New User Group"
+        />
       )}
       {data.length > 0 && (
         <div className="mt-2">
diff --git a/web/src/app/layout.tsx b/web/src/app/layout.tsx
index 8c38d5f044f2..b0059650fe89 100644
--- a/web/src/app/layout.tsx
+++ b/web/src/app/layout.tsx
@@ -8,6 +8,7 @@ import {
   CUSTOM_ANALYTICS_ENABLED,
   GTM_ENABLED,
   SERVER_SIDE_ONLY__PAID_ENTERPRISE_FEATURES_ENABLED,
+  NEXT_PUBLIC_CLOUD_ENABLED,
 } from "@/lib/constants";
 import { Metadata } from "next";
 import { buildClientUrl } from "@/lib/utilsSS";
@@ -25,6 +26,8 @@ import { LogoType } from "@/components/logo/Logo";
 import { Hanken_Grotesk } from "next/font/google";
 import { WebVitals } from "./web-vitals";
 import { ThemeProvider } from "next-themes";
+import CloudError from "@/components/errorPages/CloudErrorPage";
+import Error from "@/components/errorPages/ErrorPage";
 
 const inter = Inter({
   subsets: ["latin"],
@@ -129,47 +132,7 @@ export default async function RootLayout({
 
   if (!combinedSettings) {
     return getPageContent(
-      <div className="flex flex-col items-center justify-center min-h-screen">
-        <div className="mb-2 flex items-center max-w-[175px]">
-          <LogoType />
-        </div>
-
-        <CardSection className="max-w-md">
-          <h1 className="text-2xl font-bold mb-4 text-error">Error</h1>
-          <p className="text-text-500">
-            Your Onyx instance was not configured properly and your settings
-            could not be loaded. This could be due to an admin configuration
-            issue, an incomplete setup, or backend services that may not be up
-            and running yet.
-          </p>
-          <p className="mt-4">
-            If you&apos;re an admin, please check{" "}
-            <a
-              className="text-link"
-              href="https://docs.onyx.app/introduction?utm_source=app&utm_medium=error_page&utm_campaign=config_error"
-              target="_blank"
-              rel="noopener noreferrer"
-            >
-              our docs
-            </a>{" "}
-            to see how to configure Onyx properly. If you&apos;re a user, please
-            contact your admin to fix this error.
-          </p>
-          <p className="mt-4">
-            For additional support and guidance, you can reach out to our
-            community on{" "}
-            <a
-              className="text-link"
-              href="https://join.slack.com/t/danswer/shared_invite/zt-1w76msxmd-HJHLe3KNFIAIzk_0dSOKaQ"
-              target="_blank"
-              rel="noopener noreferrer"
-            >
-              Slack
-            </a>
-            .
-          </p>
-        </CardSection>
-      </div>
+      NEXT_PUBLIC_CLOUD_ENABLED ? <CloudError /> : <Error />
     );
   }
 
diff --git a/web/src/components/errorPages/CloudErrorPage.tsx b/web/src/components/errorPages/CloudErrorPage.tsx
new file mode 100644
index 000000000000..a50475458234
--- /dev/null
+++ b/web/src/components/errorPages/CloudErrorPage.tsx
@@ -0,0 +1,22 @@
+"use client";
+import ErrorPageLayout from "./ErrorPageLayout";
+
+export default function CloudError() {
+  return (
+    <ErrorPageLayout>
+      <h1 className="text-2xl font-semibold mb-4 text-gray-800 dark:text-gray-200">
+        Maintenance in Progress
+      </h1>
+      <div className="space-y-4 text-gray-600 dark:text-gray-300">
+        <p>
+          Onyx is currently in a maintenance window. Please check back in a
+          couple of minutes.
+        </p>
+        <p>
+          We apologize for any inconvenience this may cause and appreciate your
+          patience.
+        </p>
+      </div>
+    </ErrorPageLayout>
+  );
+}
diff --git a/web/src/components/errorPages/ErrorPage.tsx b/web/src/components/errorPages/ErrorPage.tsx
new file mode 100644
index 000000000000..3821129178b7
--- /dev/null
+++ b/web/src/components/errorPages/ErrorPage.tsx
@@ -0,0 +1,44 @@
+import { FiAlertCircle } from "react-icons/fi";
+import ErrorPageLayout from "./ErrorPageLayout";
+
+export default function Error() {
+  return (
+    <ErrorPageLayout>
+      <h1 className="text-2xl font-semibold flex items-center gap-2 mb-4 text-gray-800 dark:text-gray-200">
+        <p className=""> We encountered an issue</p>
+        <FiAlertCircle className="text-error inline-block" />
+      </h1>
+      <div className="space-y-4 text-gray-600 dark:text-gray-300">
+        <p>
+          It seems there was a problem loading your Onyx settings. This could be
+          due to a configuration issue or incomplete setup.
+        </p>
+        <p>
+          If you&apos;re an admin, please review our{" "}
+          <a
+            className="text-blue-500 hover:text-blue-700 dark:text-blue-400 dark:hover:text-blue-300"
+            href="https://docs.onyx.app/introduction?utm_source=app&utm_medium=error_page&utm_campaign=config_error"
+            target="_blank"
+            rel="noopener noreferrer"
+          >
+            documentation
+          </a>{" "}
+          for proper configuration steps. If you&apos;re a user, please contact
+          your admin for assistance.
+        </p>
+        <p>
+          Need help? Join our{" "}
+          <a
+            className="text-blue-500 hover:text-blue-700 dark:text-blue-400 dark:hover:text-blue-300"
+            href="https://join.slack.com/t/danswer/shared_invite/zt-1w76msxmd-HJHLe3KNFIAIzk_0dSOKaQ"
+            target="_blank"
+            rel="noopener noreferrer"
+          >
+            Slack community
+          </a>{" "}
+          for support.
+        </p>
+      </div>
+    </ErrorPageLayout>
+  );
+}
diff --git a/web/src/components/errorPages/ErrorPageLayout.tsx b/web/src/components/errorPages/ErrorPageLayout.tsx
new file mode 100644
index 000000000000..ff470b6af25b
--- /dev/null
+++ b/web/src/components/errorPages/ErrorPageLayout.tsx
@@ -0,0 +1,19 @@
+import React from "react";
+import { LogoType } from "../logo/Logo";
+
+interface ErrorPageLayoutProps {
+  children: React.ReactNode;
+}
+
+export default function ErrorPageLayout({ children }: ErrorPageLayoutProps) {
+  return (
+    <div className="flex flex-col items-center justify-center min-h-screen">
+      <div className="mb-4 flex items-center max-w-[220px]">
+        <LogoType size="large" />
+      </div>
+      <div className="max-w-xl border border-border w-full bg-white shadow-md rounded-lg overflow-hidden">
+        <div className="p-6 sm:p-8">{children}</div>
+      </div>
+    </div>
+  );
+}
diff --git a/web/src/components/logo/Logo.tsx b/web/src/components/logo/Logo.tsx
index e147b822ae4d..a6ab58f01ecb 100644
--- a/web/src/components/logo/Logo.tsx
+++ b/web/src/components/logo/Logo.tsx
@@ -9,15 +9,24 @@ export function Logo({
   height,
   width,
   className,
+  size = "default",
 }: {
   height?: number;
   width?: number;
   className?: string;
+  size?: "small" | "default" | "large";
 }) {
   const settings = useContext(SettingsContext);
 
-  height = height || 32;
-  width = width || 30;
+  const sizeMap = {
+    small: { height: 24, width: 22 },
+    default: { height: 32, width: 30 },
+    large: { height: 48, width: 45 },
+  };
+
+  const { height: defaultHeight, width: defaultWidth } = sizeMap[size];
+  height = height || defaultHeight;
+  width = width || defaultWidth;
 
   if (
     !settings ||
@@ -49,7 +58,11 @@ export function Logo({
   );
 }
 
-export function LogoType() {
+export function LogoType({
+  size = "default",
+}: {
+  size?: "small" | "default" | "large";
+}) {
   return (
     <OnyxLogoTypeIcon
       size={115}
diff --git a/web/src/components/ui/createButton.tsx b/web/src/components/ui/createButton.tsx
index b7b5efb067da..4683f5e06460 100644
--- a/web/src/components/ui/createButton.tsx
+++ b/web/src/components/ui/createButton.tsx
@@ -1,22 +1,27 @@
 import Link from "next/link";
 import { Button } from "@/components/ui/button";
 import { FiPlusCircle } from "react-icons/fi";
-
 interface CreateButtonProps {
-  href: string;
+  href?: string;
+  onClick?: () => void;
   text?: string;
 }
 
 export default function CreateButton({
   href,
+  onClick,
   text = "Create",
 }: CreateButtonProps) {
-  return (
-    <Link href={href}>
-      <Button className="font-normal mt-2" variant="create">
-        <FiPlusCircle />
-        {text}
-      </Button>
-    </Link>
+  const content = (
+    <Button className="font-normal mt-2" variant="create" onClick={onClick}>
+      <FiPlusCircle />
+      {text}
+    </Button>
   );
+
+  if (href) {
+    return <Link href={href}>{content}</Link>;
+  }
+
+  return content;
 }