diff --git a/app/layout.tsx b/app/layout.tsx
index c1aaec2..3a121ab 100644
--- a/app/layout.tsx
+++ b/app/layout.tsx
@@ -1,21 +1,21 @@
-
 import type { Metadata } from "next";
 import "./globals.css";
-import { IBM_Plex_Sans, IBM_Plex_Mono } from 'next/font/google';
+import { IBM_Plex_Sans, IBM_Plex_Mono } from "next/font/google";
 import { Provider } from "@/components/ui/provider";
 import { Flex } from "@chakra-ui/react";
 import { Toaster } from "@/components/ui/toaster";
+import { Suspense } from "react";
 
 const ibmPlexSans = IBM_Plex_Sans({
-  subsets: ['latin'],
-  variable: '--font-ibm'
+  subsets: ["latin"],
+  variable: "--font-ibm",
 });
 
 const ibmPlexMono = IBM_Plex_Mono({
-  subsets: ['latin'],
-  weight: '600',
-  variable: '--font-ibm-mono'
-})
+  subsets: ["latin"],
+  weight: "600",
+  variable: "--font-ibm-mono",
+});
 
 export const metadata: Metadata = {
   title: "LMGCITFY",
@@ -31,9 +31,18 @@ export default function RootLayout({
     <html lang="en" suppressHydrationWarning={true}>
       <body className={`${ibmPlexSans.variable} ${ibmPlexMono.variable}`}>
         <Provider>
-          <Flex backgroundImage={'url(/background.gif)'} backgroundRepeat={'repeat'} minH={'100vh'} minW={'full'} justify={'center'} align={'center'}>
-            {children}
-          </Flex>
+          <Suspense>
+            <Flex
+              backgroundImage={"url(/background.gif)"}
+              backgroundRepeat={"repeat"}
+              minH={"100vh"}
+              minW={"full"}
+              justify={"center"}
+              align={"center"}
+            >
+              {children}
+            </Flex>
+          </Suspense>
           <Toaster />
         </Provider>
       </body>
diff --git a/app/page.tsx b/app/page.tsx
index 2ad8fe9..261c9f7 100644
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -12,7 +12,7 @@ import {
   Box,
   Separator,
 } from "@chakra-ui/react";
-import { useEffect, useState, useRef } from "react";
+import { useEffect, useState, useRef, Suspense } from "react";
 import { useSearchParams } from "next/navigation";
 import { toaster } from "@/components/ui/toaster";
 import { getRandomResultFromGCI, lmgcitfy } from "@/actions";
