diff --git a/layouts/DashLayout.tsx b/layouts/DashLayout.tsx
index d212598..3d6536f 100644
--- a/layouts/DashLayout.tsx
+++ b/layouts/DashLayout.tsx
@@ -18,7 +18,13 @@ function DashLayout(props: DashLayoutProps) {
   // get the current route for animation purposes
   const router = useRouter();
   return (
-    <>
+    <m.div
+      className="bg-gradient-to-t from-zinc-900 to-[#202737b6]"
+      initial="initial"
+      animate="animate"
+      exit="exit"
+      variants={containerVariants}
+    >
       <Head>
         <title>Dashboard - InvestBot</title>
         <meta name="description" content="Dashboard statistics for InvestBot" />
@@ -57,7 +63,7 @@ function DashLayout(props: DashLayoutProps) {
           </AnimatePresence>
         </LazyMotion>
       </div>
-    </>
+    </m.div>
   );
 }
 
diff --git a/layouts/HomeLayout.tsx b/layouts/HomeLayout.tsx
index 8273c0f..da130f1 100644
--- a/layouts/HomeLayout.tsx
+++ b/layouts/HomeLayout.tsx
@@ -23,7 +23,12 @@ function HomeLayout(props: HomeLayoutProps) {
   // get the current route for animation purposes
   const router = useRouter();
   return (
-    <>
+    <m.div
+      initial="initial"
+      animate="animate"
+      exit="exit"
+      variants={containerVariants}
+    >
       <Head>
         <title>InvestBot</title>
         <meta name="description" content="Serving anny's community est. 2022" />
@@ -59,7 +64,7 @@ function HomeLayout(props: HomeLayoutProps) {
           </m.div>
         </AnimatePresence>
       </LazyMotion>
-    </>
+    </m.div>
   );
 }
 
diff --git a/pages/_app.tsx b/pages/_app.tsx
index c6d8054..d9d8111 100644
--- a/pages/_app.tsx
+++ b/pages/_app.tsx
@@ -2,6 +2,7 @@ import "../styles/globals.css";
 import type { ReactElement, ReactNode } from "react";
 import type { NextPage } from "next";
 import type { AppProps } from "next/app";
+import { AnimatePresence, domAnimation, LazyMotion } from "framer-motion";
 
 export type NextPageWithLayout<P = {}, IP = P> = NextPage<P, IP> & {
   getLayout?: (page: ReactElement) => ReactNode;
@@ -15,5 +16,11 @@ export default function App({ Component, pageProps }: AppPropsWithLayout) {
   // Use the layout defined at the page level, if available
   const getLayout = Component.getLayout ?? ((page) => page);
 
-  return getLayout(<Component {...pageProps} />);
+  return (
+    <LazyMotion features={domAnimation}>
+      <AnimatePresence mode="wait" initial={false}>
+        {getLayout(<Component {...pageProps} />)}
+      </AnimatePresence>
+    </LazyMotion>
+  );
 }
