diff --git a/src/app/global.scss b/src/app/global.scss
index d622491..fcc10f3 100644
--- a/src/app/global.scss
+++ b/src/app/global.scss
@@ -15,4 +15,10 @@
     flex-direction: column;
     justify-content: space-between;
     align-items: center;
-}
\ No newline at end of file
+}
+
+@keyframes fade {
+  0% {
+    opacity: 0;
+  }
+}
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
index f952ee6..68efaf6 100644
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -5,14 +5,19 @@ import "@/app/global.scss";
 export default function Layout({ children }: { children: React.ReactNode }) {
   return (
     <div className="container">
-      <Navbar></Navbar>
-      <main style={{
-        backgroundColor: "red",
-        width: "100%",
-        height: "auto",
-        position: "relative",
-        marginTop: "70px",
-      }}>{children}</main>
+      <Navbar />
+      <main
+        style={{
+          backgroundColor: "red",
+          width: "100%",
+          height: "auto",
+          position: "relative",
+          marginTop: "70px",
+          animation: "fade 0.9s ease-in"
+        }}
+      >
+        {children}
+      </main>
       <Footer></Footer>
     </div>
   );
diff --git a/src/components/Navbar.tsx b/src/components/Navbar.tsx
index 1fd9555..3d124cd 100644
--- a/src/components/Navbar.tsx
+++ b/src/components/Navbar.tsx
@@ -4,7 +4,6 @@ import React, { useState, useEffect } from "react";
 import Link from "next/link";
 import Modal from "react-modal";
 import "@/stylesheets/navbar.scss";
-import index from "@/pages";
 
 const Navbar = () => {
   const [modal, setModal] = useState(false);