diff --git a/src/components/PreLoader/PreLoader.jsx b/src/components/PreLoader/PreLoader.jsx
new file mode 100644
index 0000000..5ee6e98
--- /dev/null
+++ b/src/components/PreLoader/PreLoader.jsx
@@ -0,0 +1,36 @@
+import Image from 'next/image'
+
+import styles from './PreLoader.module.css'
+import Logo from 'public/images/logo.svg'
+
+export function PreLoader() {
+  return (
+    <div className={`${styles.container}`}>
+      <div className={styles.cube}>
+        <div className={styles.top} />
+
+        <div className={styles.cubeFacesWrapper}>
+          <div className={styles.face} />
+          <div className={styles.face} />
+          <div className={styles.face} />
+          <div className={styles.face} />
+        </div>
+
+        <div className={styles.bottom} />
+      </div>
+
+      {/* JORDI LOGO */}
+      <div className="absolute top-20 flex justify-center lg:top-10">
+        <Image
+          className="aspect-video w-36 animate-horizontal-slide text-slate-900 md:w-80"
+          src={Logo}
+          alt="JORDI"
+        />
+      </div>
+
+      <h1 className="absolute bottom-20 animate-horizontal-slide-reverse text-xl font-medium text-secondary md:text-4xl md:text-black">
+        Jornadas de Direito Informático
+      </h1>
+    </div>
+  )
+}
diff --git a/src/components/PreLoader/PreLoader.module.css b/src/components/PreLoader/PreLoader.module.css
new file mode 100644
index 0000000..9710a93
--- /dev/null
+++ b/src/components/PreLoader/PreLoader.module.css
@@ -0,0 +1,114 @@
+.container {
+  display: flex;
+  align-items: center;
+
+  justify-content: center;
+  background-color: white;
+  background-image: url('../../../public/images/background.jpg');
+
+  position: fixed;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  z-index: 9999;
+
+  animation: page-down 0.4s ease-in-out 2.6s;
+  animation-fill-mode: forwards;
+}
+
+.cube {
+  position: relative;
+  height: 40vw;
+  width: 40vw;
+
+  transform-style: preserve-3d;
+  animation: spin-cube 4s linear infinite;
+}
+
+.cube .cubeFacesWrapper {
+  position: relative;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  transform-style: preserve-3d;
+}
+
+.cube .face {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+
+  background: linear-gradient(#f3f3f3, #104194);
+
+  transform-style: preserve-3d;
+  transform: rotateY(0deg) translateZ(20vw);
+}
+
+.cube .face:nth-child(1) {
+  transform: rotateY(90deg) translateZ(20vw);
+}
+.cube .face:nth-child(2) {
+  transform: rotateY(180deg) translateZ(20vw);
+}
+.cube .face:nth-child(3) {
+  transform: rotateY(270deg) translateZ(20vw);
+}
+
+.cube > .top {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background: #f3f3f3;
+  transform: rotateX(90deg) translateZ(20vw);
+}
+
+.bottom {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 40vw;
+  height: 40vw;
+  background: #104194;
+  transform: rotateX(90deg) translateZ(-40vw);
+  filter: blur(24px);
+  box-shadow: 0 0 120px rgba(16, 65, 148, 0.2), 0 0 200px rgba(16, 65, 148, 0.4),
+    0 0 300px rgba(16, 65, 148, 0.6), 0 0 400px rgba(16, 65, 148, 0.8),
+    0 0 500px rgba(16, 65, 148, 1);
+}
+
+@media screen and (min-width: 720px) {
+  .cube {
+    scale: 0.6;
+  }
+}
+
+@media (min-width: 1536px) {
+  .cube {
+    scale: 0.4;
+  }
+}
+
+@keyframes spin-cube {
+  0% {
+    transform: rotateX(-30deg) rotateY(0deg);
+  }
+
+  100% {
+    transform: rotateX(-30deg) rotateY(350deg);
+  }
+}
+
+@keyframes page-down {
+  0% {
+    transform: translateY(0);
+  }
+  100% {
+    transform: translateY(100vh);
+  }
+}
diff --git a/src/components/PreLoader/index.jsx b/src/components/PreLoader/index.jsx
new file mode 100644
index 0000000..507615b
--- /dev/null
+++ b/src/components/PreLoader/index.jsx
@@ -0,0 +1 @@
+export { PreLoader } from './PreLoader'
diff --git a/src/pages/index.jsx b/src/pages/index.jsx
index f97705e..0a5655f 100644
--- a/src/pages/index.jsx
+++ b/src/pages/index.jsx
@@ -8,20 +8,24 @@ import { Speakers } from '@/components/Speakers'
 import { Sponsors } from '@/components/Sponsors'
 import { Organization } from '@/components/Organization'
 import { Papers } from '@/components/Papers'
+import { PreLoader } from '@/components/PreLoader'
 
 export default function Home() {
   return (
     <>
       <Head>
         <title>Jordi</title>
-        <meta name="description"/>
+        <meta name="description" />
       </Head>
       <Header />
+
+      <PreLoader />
+
       <main>
         <Hero />
         <Speakers />
         <Schedule />
-        <Papers/>
+        <Papers />
         <Sponsors />
         <Organization />
       </main>
diff --git a/tailwind.config.js b/tailwind.config.js
index 6ae9f75..e189e86 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -31,10 +31,23 @@ module.exports = {
       maxWidth: {
         '2xl': '40rem',
       },
-      colors:{
-        primary: "#1B69EE",
-        secondary: "#104194",
-      }
+      colors: {
+        primary: '#1B69EE',
+        secondary: '#104194',
+      },
+    },
+    keyframes: {
+      slide: {
+        '0%': { transform: 'translateX(100vw)' },
+        '10%': { transform: 'translateX(60px)' },
+        '50%': { transform: 'translateX(0)' },
+        '90%': { transform: 'translateX(-60px)' },
+        '100%': { transform: 'translateX(-100vw)' },
+      },
+    },
+    animation: {
+      'horizontal-slide': 'slide 3s linear',
+      'horizontal-slide-reverse': 'slide 3s linear reverse',
     },
   },
   plugins: [],