diff --git a/app/page.tsx b/app/page.tsx
index f22f5c9..3c505f2 100644
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -1,9 +1,13 @@
 import Search from "@/components/Search";
 import DataTable from "./DataTable";
 import { SettingsProvider } from "@/context/settings";
+import MaintananceContent from "@/components/maintanance/maintanance";
 
 export default async function Home() {
 
+  if (process.env.NEXT_PUBLIC_MAINTANANCE == String(true))
+    return <MaintananceContent />
+
   return (
     <SettingsProvider>
       <main className="w-full py-5 px-6 xl:px-0 h-full flex flex-col flex-1">
diff --git a/components/cardContainer.tsx b/components/cardContainer.tsx
new file mode 100644
index 0000000..f097550
--- /dev/null
+++ b/components/cardContainer.tsx
@@ -0,0 +1,10 @@
+export default function CardContainer(props:any) {
+    return (<div {...props}>
+        <div className="bg-secondary-900 shadow-card rounded-lg w-full mt-10 overflow-hidden relative">
+            <div className="relative overflow-hidden h-1 flex rounded-t-lg bg-secondary-500"></div>
+            <div className="p-2">
+                {props.children}
+            </div>
+        </div>
+    </div>);
+}
\ No newline at end of file
diff --git a/components/icons/spinIcon.tsx b/components/icons/spinIcon.tsx
new file mode 100644
index 0000000..809ad35
--- /dev/null
+++ b/components/icons/spinIcon.tsx
@@ -0,0 +1,10 @@
+import * as React from 'react'
+const SpinIcon = (props:any) => (
+  <svg {...props} xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={4}>
+    <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor"></circle>
+    <path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
+  </svg>
+)
+
+export default SpinIcon;
+
diff --git a/components/maintanance/maintanance.tsx b/components/maintanance/maintanance.tsx
new file mode 100644
index 0000000..166bd68
--- /dev/null
+++ b/components/maintanance/maintanance.tsx
@@ -0,0 +1,26 @@
+import LayerswapExplorerLogo from "../icons/layerswapExplorer";
+import CardContainer from "../cardContainer";
+
+function MaintananceContent(props: any) {
+
+    return (
+        <div className="flex items-stretch flex-col">
+            <LayerswapExplorerLogo className="block md:hidden h-8 w-auto text-primary-text mt-5"></LayerswapExplorerLogo>
+            <CardContainer {...props} >
+                <div className="flex flex-col justify-center space-y-12 p-10 text-primary-text md:min-h-fit min-h-[400px]">
+                    <h1 className="text-xl tracking-tight text-gray-200">
+                        <p className="mb-4 text-primary-text">
+                            We&apos;re upgrading our systems and infrastructure to give you the best experience yet.
+                        </p>
+                        <span className="block font-bold text-3xl xl:inline">We&apos;ll be back at 15:00 UTC</span>
+                        <p className="mt-4 text-primary-text">
+                            Any pending swaps will be completed after maintenance.
+                        </p>
+                    </h1>
+                </div>
+            </CardContainer>
+        </div>
+    );
+}
+
+export default MaintananceContent;