diff --git a/layouts/LayoutDefault.tsx b/layouts/LayoutDefault.tsx
index 1348eb2..a401b90 100644
--- a/layouts/LayoutDefault.tsx
+++ b/layouts/LayoutDefault.tsx
@@ -21,7 +21,7 @@ const LayoutDefault = ({
       <div className="max-w-4xl m-auto text-light">
         <div className="relative container px-5 mx-auto text-white text-base">
           <Header />
-          <div>{children}</div>
+          <div className="page-portal">{children}</div>
           <Footer />
         </div>
       </div>
diff --git a/layouts/styles.css b/layouts/styles.css
index eaed099..dc97ed3 100644
--- a/layouts/styles.css
+++ b/layouts/styles.css
@@ -4,4 +4,14 @@
 
 body {
     background-color: var(--tw-dark);
+}
+
+.page-portal {
+    opacity: 1;
+    transition: opacity 0.5s ease-in-out;
+}
+
+body.page-is-transitioning .page-portal {
+    opacity: 0;
+    transition: opacity 0.5s ease-in-out;
 }
\ No newline at end of file