diff --git a/.gitignore b/.gitignore
index 7014096..85dea10 100644
--- a/.gitignore
+++ b/.gitignore
@@ -27,3 +27,6 @@ tmp.json
 
 # action file (for now)
 _studio.yml
+
+# ignored files
+ignored/
diff --git a/public/fonts/RobotoSlab/RobotoSlab-VariableFont_wght.woff2 b/public/fonts/RobotoSlab/RobotoSlab-VariableFont_wght.woff2
deleted file mode 100644
index 8484d4f..0000000
Binary files a/public/fonts/RobotoSlab/RobotoSlab-VariableFont_wght.woff2 and /dev/null differ
diff --git a/public/fonts/RubikDoodleShadow/RubikDoodleShadow-Regular.woff2 b/public/fonts/RubikDoodleShadow/RubikDoodleShadow-Regular.woff2
deleted file mode 100644
index e6917f0..0000000
Binary files a/public/fonts/RubikDoodleShadow/RubikDoodleShadow-Regular.woff2 and /dev/null differ
diff --git a/public/img/movies/lost_loop_comp.webm b/public/img/movies/lost_loop_comp.webm
new file mode 100644
index 0000000..f585dad
Binary files /dev/null and b/public/img/movies/lost_loop_comp.webm differ
diff --git a/src/components/main/title.astro b/src/components/main/title.astro
index 16a5c50..39eaa70 100644
--- a/src/components/main/title.astro
+++ b/src/components/main/title.astro
@@ -6,22 +6,36 @@ const { lang = 'en' }: Props = Astro.props
 ---
 
 <div
-  class='row-span-2 col-span-1 xl:col-span-2 title dark:bg-emerald-900/80 text-emerald-300 bg-emerald-400/50 p-2 rounded-sm w-full flex items-center flex-row animate-blurred-fade-in relative'
+  class='row-span-2 col-span-1 xl:col-span-2 title dark:bg-slate-900/80 text-emerald-400 bg-slate-400/50 p-2 rounded-sm w-full flex items-center flex-row animate-blurred-fade-in relative'
 >
-  <div class='flex flex-col animate-fade-in z-10'>
+  <div class='flex flex-col gap-1 animate-fade-in z-10'>
     <a href={lang !== 'en' ? '/' : 'es'}>
-      <p class='font-rubik-doodle font-semibold text-2xl xl:text-4xl'>
+      <p
+        class='font-rubik-doodle font-semibold text-2xl xl:text-4xl dark:bg-gray-500/70 bg-gray-600/80 px-2 py-1 rounded'
+      >
         @jamerrq.dev
       </p>
     </a>
-    <span class='block font-averia text-sm text-center'>
+    <span
+      class='block font-averia text-sm rounded w-fit mx-auto px-1 py-0.5 text-center dark:bg-gray-500/70 bg-gray-600/80'
+    >
       {lang === 'en' ? 'Software Dev' : 'Desarrollador Backend'}
     </span>
   </div>
   <div
-    class='fixed -z-10 top-0 left-0 origin-top-left w-full xl:flex place-content-center flex overflow-hidden h-[200%]'
+    class='fixed -z-10 top-0 left-0 origin-top-left w-full xl:flex place-content-center flex overflow-hidden h-full bg-opacity-10'
     id='animation-container'
   >
+    <video
+      src='/img/movies/lost_loop_comp.webm'
+      autoplay
+      style='width: 100%; height: 100%'
+      muted
+      loop
+      playsinline
+      preload='auto'
+      class='object-cover w-full h-full'
+      id='animation'></video>
   </div>
 </div>
 
diff --git a/src/layouts/layout.astro b/src/layouts/layout.astro
index 1f95e80..60980fc 100644
--- a/src/layouts/layout.astro
+++ b/src/layouts/layout.astro
@@ -11,6 +11,9 @@ import '@fontsource/merriweather'
 import '@fontsource/rubik-doodle-shadow'
 import '@fontsource/averia-serif-libre'
 
+// Styles
+import '@styles/index.css'
+
 import { ViewTransitions } from 'astro:transitions'
 import Background from '@components/main/background.astro'
 import SEO from '@components/head/seo.astro'
@@ -205,7 +208,8 @@ import { Image } from 'astro:assets'
     </a>
     <script is:inline defer>
       // if screen is too small, don't render the animation
-      if (window.innerWidth > 1) {
+      const disabled = true
+      if (!disabled && window.innerWidth > 240) {
         const x = document.createElement('canvas')
         x.id = 'c'
         x.setAttribute('class', 'grow')
diff --git a/src/styles/index.css b/src/styles/index.css
new file mode 100644
index 0000000..194ee9f
--- /dev/null
+++ b/src/styles/index.css
@@ -0,0 +1,3 @@
+#title-movie {
+    opacity: 0.75;
+}
diff --git a/tsconfig.json b/tsconfig.json
index 25443bd..e6450f6 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -27,6 +27,9 @@
       "@movies/*": [
         "src/movies/*"
       ],
+      "@styles/*": [
+        "src/styles/*"
+      ],
     },
     "jsx": "preserve",
     "jsxImportSource": "preact",