diff --git a/src/Client/src/index.css b/src/Client/src/index.css
index bd6213e..7c8243d 100644
--- a/src/Client/src/index.css
+++ b/src/Client/src/index.css
@@ -1,3 +1,18 @@
 @tailwind base;
 @tailwind components;
-@tailwind utilities;
\ No newline at end of file
+@tailwind utilities;
+
+.fade-in {
+  animation: fadeInAnimation ease 1s;
+  animation-iteration-count: 1;
+  animation-fill-mode: forwards;
+}
+
+@keyframes fadeInAnimation {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
diff --git a/src/Client/src/pages/Layout.tsx b/src/Client/src/pages/Layout.tsx
index 3de92b2..d7b33e5 100644
--- a/src/Client/src/pages/Layout.tsx
+++ b/src/Client/src/pages/Layout.tsx
@@ -5,7 +5,7 @@ import Footer from "../components/Footer";
 export default function Layout() {
   return (
     <div className="bg-black font-mono text-slate-50 antialiased px-6 lg:px-8">
-      <div className="flex flex-col min-h-screen mx-auto max-w-7xl fade-in ">
+      <div className="flex flex-col min-h-screen mx-auto max-w-7xl fade-in">
         <NavBar />
         <div className="flex-1 py-8">
           <Outlet />