diff --git a/public/fonts/rubik-doodle-shadow-latin-400-patched.woff2 b/public/fonts/rubik-doodle-shadow-latin-400-patched.woff2
new file mode 100644
index 0000000..36a4790
Binary files /dev/null and b/public/fonts/rubik-doodle-shadow-latin-400-patched.woff2 differ
diff --git a/public/fonts/rubik-patched.woff2 b/public/fonts/rubik-patched.woff2
deleted file mode 100644
index 0c09aa2..0000000
Binary files a/public/fonts/rubik-patched.woff2 and /dev/null differ
diff --git a/readme.md b/readme.md
index f847868..2abc3e6 100644
--- a/readme.md
+++ b/readme.md
@@ -1,6 +1,6 @@
 # jamerrq.dev
 
-Source code for my personal website, [jamerrq.dev](https://jamerrq.dev).
+Source code for my personal website, [jamerrq.dev](https://jamerrq.dev)
 
 ![](https://img.shields.io/badge/Made%20with-Astro%20💙-orange?style=for-the-badge&logo=astro&logoColor=orange)
 
diff --git a/src/components/badges/badge.astro b/src/components/badges/badge.astro
index f445b97..adc195e 100644
--- a/src/components/badges/badge.astro
+++ b/src/components/badges/badge.astro
@@ -1,7 +1,9 @@
 <div class='xl:absolute top-2 right-2 animate-slide-in-top'>
-  <span class='relative flex overflow-hidden rounded p-[1.25px]'>
+  <span
+    class='relative flex overflow-hidden rounded p-[1.25px] shadow shadow-black'
+  >
     <div
-      class='flex items-center h-full w-full cursor-pointer justify-center rounded px-3 py-1 text-sm font-bold text-slate-900 bg-emerald-500 backdrop-blur-3xl'
+      class='flex items-center h-full w-full cursor-pointer justify-center rounded px-3 py-1 text-sm font-bold text-slate-900 bg-emerald-500 backdrop-blur-3xl shadow shadow-black'
     >
       <slot />
     </div>
diff --git a/src/components/blog/blog-about.astro b/src/components/blog/blog-about.astro
index 91f6593..96a36d7 100644
--- a/src/components/blog/blog-about.astro
+++ b/src/components/blog/blog-about.astro
@@ -3,7 +3,7 @@ const ABOUT_STYLES = [
   'col-span-4',
   'row-span-1',
   'bg-slate-300/70',
-  'dark:bg-slate-900',
+  'dark:bg-slate-900/90',
   'dark:text-slate-300',
   'rounded-sm',
   'flex',
diff --git a/src/components/blog/last-entries.tsx b/src/components/blog/last-entries.tsx
index ddff7f1..d33063d 100644
--- a/src/components/blog/last-entries.tsx
+++ b/src/components/blog/last-entries.tsx
@@ -1,8 +1,8 @@
 const LAST_ENTRIES_STYLES = [
   'col-span-6',
   'row-span-5',
-  'bg-slate-300',
-  'dark:bg-slate-900',
+  'bg-slate-300/80',
+  'dark:bg-slate-900/90',
   'dark:text-slate-300',
   'rounded-sm',
   'flex',
@@ -87,7 +87,7 @@ export default function LastEntries({ lang = 'en' }: { lang?: string }) {
       <h1 class='dark:text-emerald-300 text-emerald-950 text-2xl xl:text-4xl text-center'>
         - {lang === 'en' ? 'Last Entries' : 'Últimas Entradas'} -
       </h1>
-      <ul class='grid grid-cols-[1fr_5fr] gap-3 w-full p-2 responsive-text-sm'>
+      <ul class='grid grid-cols-[1fr_5fr] gap-3 w-full h-full p-2 responsive-text-sm'>
         <li />
         <li class='dark:text-cyan-400 text-cyan-950 text-xl' />
         {entries
@@ -105,7 +105,7 @@ export default function LastEntries({ lang = 'en' }: { lang?: string }) {
                 <li class='font-merriweather text-sm xl:text-base text-center'>
                   {entry.date}
                 </li>
-                <li class='font-merriweather text-sm xl:text-base  py-1 px-2 rounded-sm cursor-pointer hover:scale-[1.02] transition-all ease-in-out flex flex-col gap-2'>
+                <li class='font-merriweather text-sm xl:text-base  py-1 px-2 rounded-sm cursor-pointer hover:border-2 transition-all ease-in-out flex flex-col gap-2'>
                   <a href={`${lang === 'en' ? entry.href : entry.hrefEs}`}>
                     <div class='flex flex-col xl:flex-row gap-4'>
                       <span>{lang === 'en' ? entry.title : entry.titleEs}</span>
diff --git a/src/components/boxes/box.astro b/src/components/boxes/box.astro
new file mode 100644
index 0000000..957b50e
--- /dev/null
+++ b/src/components/boxes/box.astro
@@ -0,0 +1,19 @@
+---
+interface Props {
+  ncols?: number
+  nrows?: number
+  animated?: boolean
+  delay?: number
+  title: string
+  otherStyles?: string
+}
+
+const { props }: { props: Props } = Astro
+---
+
+<article
+  data-animated={props.animated}
+  class=`bg-slate-300/70 dark:bg-slate-900/95 rounded-sm flex items-center justify-center font-bold dark:text-slate-300 font-rubik-doodle w-full h-full flex-col text-base py-3 px-2 relative data-[animated]:animate-blurred-fade-in data-[animated]:animate-delay-${(props.delay ?? 0) * 100} ${props?.otherStyles}`
+>
+  <slot />
+</article>
diff --git a/src/components/boxes/hbox.astro b/src/components/boxes/hbox.astro
new file mode 100644
index 0000000..d534337
--- /dev/null
+++ b/src/components/boxes/hbox.astro
@@ -0,0 +1,23 @@
+---
+interface Props {
+  ncols?: number
+  nrows?: number
+  animated?: boolean
+  delay?: number
+  title: string
+  href: string
+  otherStyles?: string
+}
+
+const { props }: { props: Props } = Astro
+const { href, title } = props
+---
+
+<a
+  href={href}
+  title={title}
+  data-animated={props.animated}
+  class=`bg-slate-300/70 dark:bg-slate-900/95 rounded-sm flex items-center justify-center font-bold dark:text-slate-300 font-rubik-doodle w-full h-full  text-base py-3 px-2 relative hover:border-2 hover:border-amber-500/60 [&_p]:text-amber-950 [&_p]:dark:text-amber-300 data-[animated]:animate-blurred-fade-in ${props?.otherStyles}`
+>
+  <slot />
+</a>
diff --git a/src/components/featured-and-projects/about.astro b/src/components/featured-and-projects/about.astro
index 9721ff3..8139031 100644
--- a/src/components/featured-and-projects/about.astro
+++ b/src/components/featured-and-projects/about.astro
@@ -3,7 +3,7 @@ const ABOUT_STYLES = [
   'col-span-1 xl:col-span-4',
   'row-span-1',
   'bg-slate-300/70',
-  'dark:bg-slate-900',
+  'dark:bg-slate-900/90',
   'dark:text-slate-300',
   'rounded-sm',
   'flex',
diff --git a/src/components/featured-and-projects/projects.tsx b/src/components/featured-and-projects/projects.tsx
index d602581..11ad3d5 100644
--- a/src/components/featured-and-projects/projects.tsx
+++ b/src/components/featured-and-projects/projects.tsx
@@ -12,10 +12,8 @@ const concatedData = featured.concat(notFeatured)
 const PROJECT_STYLES: string = [
   'col-span-6',
   'row-span-4',
-  'bg-emerald-300',
+  'bg-emerald-300/80',
   'rounded-sm',
-  'shadow-[0_0_0.3rem_rgb(0_0_0)]', // rgb(69, 26, 3)
-  'dark:shadow-[0_0_0.1rem_rgb(255_255_255)]', // rgb(253, 230, 138)
   'flex',
   'flex-col',
   'gap-3',
@@ -27,11 +25,9 @@ const PROJECT_STYLES: string = [
   'xl:h-[400px] h-[300px]',
   'xl:h-full',
   'transition-all',
-  // 'border-2',
-  // 'border-emerald-500',
   'text-emerald-950',
   'dark:text-emerald-300',
-  'dark:bg-emerald-900',
+  'dark:bg-emerald-900/95',
   'responsive-text-xs',
   'p-2',
   'pb-4',
diff --git a/src/components/featured-and-projects/resources.tsx b/src/components/featured-and-projects/resources.tsx
index 53fb887..3c47fe8 100644
--- a/src/components/featured-and-projects/resources.tsx
+++ b/src/components/featured-and-projects/resources.tsx
@@ -15,13 +15,10 @@ const RESOURCE_STYLES: string = [
   'w-full',
   'h-full',
   'transition-all',
-  // 'border-2',
-  // 'border-cyan-950',
-  // 'dark:border-cyan-500',
   'text-cyan-950',
   'dark:text-cyan-300',
-  'bg-slate-300',
-  'dark:bg-slate-900',
+  'bg-slate-300/70',
+  'dark:bg-slate-900/90',
   'text-base xl:text-2xl',
   'p-2',
   'relative'
diff --git a/src/components/head/scripts.astro b/src/components/head/scripts.astro
new file mode 100644
index 0000000..d83bb36
--- /dev/null
+++ b/src/components/head/scripts.astro
@@ -0,0 +1,118 @@
+---
+interface Props {
+  lang?: string
+}
+
+const { lang = 'en' } = Astro.props
+---
+
+<script defer is:inline define:vars={{ lang }}>
+  // Theme switch
+  function setTheme() {
+    const darkIcon = document.getElementById('theme-toggle-dark-icon')
+    const lightIcon = document.getElementById('theme-toggle-light-icon')
+
+    // Cambia los iconos dentro del botón en función de la configuración anterior
+    if (
+      localStorage.getItem('color-theme') === 'dark' ||
+      !('color-theme' in localStorage)
+    ) {
+      lightIcon.classList.remove('hidden')
+      // en caso que se haya configurado previamente
+      document.documentElement.classList.add('dark')
+      // remover la clase light si está presente
+      document.documentElement.classList.remove('light')
+    } else {
+      darkIcon.classList.remove('hidden')
+      // en caso que se haya configurado previamente
+      document.documentElement.classList.add('light')
+      // remover la clase dark si está presente
+      document.documentElement.classList.remove('dark')
+    }
+
+    const themeToggleBtn = document.getElementById('theme-toggle')
+
+    themeToggleBtn.addEventListener('click', () => {
+      darkIcon.classList.toggle('hidden')
+      lightIcon.classList.toggle('hidden')
+
+      // se comprueba si se ha configurado previamente
+      if (localStorage.getItem('color-theme')) {
+        if (localStorage.getItem('color-theme') === 'light') {
+          document.documentElement.classList.add('dark')
+          // remover la clase light si está presente
+          document.documentElement.classList.remove('light')
+          localStorage.setItem('color-theme', 'dark')
+        } else {
+          document.documentElement.classList.remove('dark')
+          // remover la clase dark si está presente
+          localStorage.setItem('color-theme', 'light')
+        }
+
+        // se comprueba si el sistema operativo tiene configurado el tema oscuro
+      } else if (document.documentElement.classList.contains('dark')) {
+        document.documentElement.classList.remove('dark')
+        document.documentElement.classList.add('light')
+        localStorage.setItem('color-theme', 'light')
+      } else {
+        document.documentElement.classList.add('dark')
+        document.documentElement.classList.remove('light')
+        localStorage.setItem('color-theme', 'dark')
+      }
+    })
+  }
+
+  setTheme()
+  document.addEventListener('astro:after-preparation', setTheme)
+  document.addEventListener('astro:after-swap', setTheme)
+
+  // Home & Random Place buttons
+  const setHomeRandomButton = () => {
+    const homeButton = document.getElementById('home-button')
+    const randomPlaceButton = document.getElementById('random-place-button')
+
+    // Show home button only if not in home
+    // Otherwise show random place button
+    if (
+      window.location.pathname === '/' ||
+      window.location.pathname === '/es'
+    ) {
+      homeButton.classList.add('hidden')
+      randomPlaceButton.classList.remove('hidden')
+    } else {
+      homeButton.classList.remove('hidden')
+      randomPlaceButton.classList.add('hidden')
+    }
+
+    // Add click event to home button
+    homeButton.addEventListener('click', () => {
+      // window.location.href = '/'
+      lang === 'es'
+        ? (window.location.href = '/es')
+        : (window.location.href = '/')
+    })
+
+    randomPlaceButton.addEventListener('click', () => {
+      const places = ['/blog', '/tech-stack', '/featured']
+      window.location.href = places[Math.floor(Math.random() * places.length)]
+    })
+  }
+
+  setHomeRandomButton()
+  document.addEventListener('astro:after-preparation', setHomeRandomButton)
+  document.addEventListener('astro:after-swap', setHomeRandomButton)
+</script>
+
+<script>
+  import { toast } from 'wc-toast'
+  const copyMailButton = document.getElementById('copyMailButton')
+  copyMailButton?.addEventListener('click', () => {
+    navigator.clipboard.writeText('jamerrq@gmail.com')
+    toast('email shipped into your clipboard 📬', {
+      duration: 2000,
+      theme: {
+        type: 'light'
+      }
+    })
+  })
+</script>
diff --git a/src/components/head/seo.astro b/src/components/head/seo.astro
index 8ede444..ed62ace 100644
--- a/src/components/head/seo.astro
+++ b/src/components/head/seo.astro
@@ -2,6 +2,30 @@
 import { SEO } from 'astro-seo'
 ---
 
+<meta charset='UTF-8' />
+<meta name='description' content='jamerrq.dev' />
+<meta name='viewport' content='width=device-width' />
+<link rel='icon' type='image/png' href='/favicon.png' />
+<meta name='generator' content={Astro.generator} />
+<!-- Open Graph -->
+<meta name='twitter:card' content='summary_large_image' />
+<meta name='twitter:site' content='@jamerrq' />
+<meta name='twitter:title' content='jamerrq.dev' />
+<meta name='twitter:description' content='Software Development' />
+<meta name='twitter:image' content='https://jamerrq.deno.dev/og-image2.png' />
+<meta property='og:title' content='jamerrq.dev' />
+<meta property='og:type' content='personal website' />
+<meta property='og:url' content='https://jamerrq.deno.dev' />
+<meta property='og:image' content='https://jamerrq.deno.dev/og-image2.png' />
+<meta property='og:description' content='Software Development' />
+<meta property='og:site_name' content='jamerrq.dev' />
+<meta name='theme-color' content='#10B981' />
+<!-- Robots -->
+<meta name='robots' content='index, follow' />
+<meta name='googlebot' content='index, follow' />
+<meta name='google' content='notranslate' />
+<link rel='sitemap' href='/sitemap-index.xml' />
+
 <!-- PWA Support --><!-- Favicons. --><!-- 16 -->
 <link
   rel='icon'
diff --git a/src/components/icons/icon.astro b/src/components/icons/icon.astro
new file mode 100644
index 0000000..e113584
--- /dev/null
+++ b/src/components/icons/icon.astro
@@ -0,0 +1,34 @@
+---
+interface Props {
+  svg: string
+  hex?: string
+  href?: string
+  title?: string
+}
+
+const { svg, hex = '#000', href = '', title = 'Generic Icon' } = Astro.props
+---
+
+{
+  href ? (
+    <a
+      href={href}
+      target='_blank'
+      rel='noopener noreferrer'
+      class='hover:scale-110'
+      title={title}
+    >
+      <svg
+        class='w-6 h-6 xl:w-8 xl:h-8 inline-flex fill-slate-950 dark:fill-emerald-300 drop-shadow-black drop-shadow-2xl'
+        set:html={svg}
+        fill={hex}
+      />
+    </a>
+  ) : (
+    <svg
+      class='w-6 h-6 xl:w-8 xl:h-8 inline-flex fill-slate-950 dark:fill-emerald-300'
+      set:html={svg}
+      fill={hex}
+    />
+  )
+}
diff --git a/src/components/main/about-me-card.astro b/src/components/main/about-me-card.astro
index d4198d0..d44ce9d 100644
--- a/src/components/main/about-me-card.astro
+++ b/src/components/main/about-me-card.astro
@@ -1,38 +1,13 @@
 ---
 import OpenToWork from '@components/badges/open-to-work.astro'
-
+import Box from '@components/boxes/box.astro'
 interface Props {
   lang: string
 }
 const { lang = 'en' }: Props = Astro.props
-const ABOUT_ME_STYLES = [
-  'col-span-1 xl:col-span-4',
-  'row-span-2',
-  'bg-slate-300/70',
-  'dark:bg-slate-900/95',
-  'rounded-sm',
-  'shadow-[0_0_0.5rem_rgba(0_0_0_0.5)]',
-  'flex',
-  'items-center',
-  'justify-center',
-  'font-bold',
-  'dark:text-slate-300',
-  'font-rubik-doodle',
-  'w-full',
-  'h-full',
-  // 'border-2',
-  // 'border-emerald-950',
-  // 'dark:border-emerald-300',
-  'flex-col',
-  'text-base',
-  'py-3',
-  'px-2',
-  'relative'
-  // 'animate-blurred-fade-in'
-].join(' ')
 ---
 
-<article class={ABOUT_ME_STYLES} title='Get to know me'>
+<Box title='Get to know me' otherStyles='xl:col-span-4 xl:row-span-2'>
   <header class='flex flex-col xl:flex-row gap-1 items-center'>
     <h1 class='dark:text-emerald-300 text-emerald-950 text-2xl xl:text-3xl'>
       {lang === 'en' ? 'Get To Know Me' : 'Conóceme'}
@@ -42,9 +17,9 @@ const ABOUT_ME_STYLES = [
   <div
     class='flex items-center p-3 justify-around w-full font-averia xl:text-lg text-sm relative'
   >
-    <ul class='w-full text-center p-2 gap-1.5 flex flex-col'>
+    <ul class='w-full text-center p-2 gap-1.5 flex flex-col [&_p]:text-balance'>
       <li>
-        <p class='text-balance'>
+        <p>
           {
             lang === 'en'
               ? "My name is Jamer José, I'm a Mathematical Engineer from"
@@ -60,10 +35,8 @@ const ABOUT_ME_STYLES = [
           </a>
         </p>
       </li>
-      <!-- <p class='font-fira inline'>󰜐</p> -->
       <li>
-        <!-- Currently working as part time Backend Developer at -->
-        <p class='text-balance'>
+        <p>
           {
             lang === 'en'
               ? 'Currently working as part time Backend Developer at'
@@ -80,9 +53,7 @@ const ABOUT_ME_STYLES = [
         </p>
       </li>
       <li>
-        <p class='text-balance'>
-          <!-- Big fan of the open source and the web, as well as the great
-          possibilities they offer. -->
+        <p>
           {
             lang === 'en'
               ? 'Big fan of the open source and the web, as well as the great possibilities they offer'
@@ -90,22 +61,6 @@ const ABOUT_ME_STYLES = [
           }
         </p>
       </li>
-      <li class='hidden'>
-        <p class='text-balance hidden'>
-          <!-- I strongly believe that the best way to achieve something is to start
-          it. -->
-          <!-- {
-            lang === 'en'
-              ? 'I strongly believe that the best way to achieve something is to start it'
-              : 'Creo firmemente que la mejor manera de lograr algo es comenzarlo'
-          } -->
-          <!-- {
-            lang === 'en'
-              ? 'Currently focused on web development, with a strong interest in the backend'
-              : 'Actualmente enfocado en el desarrollo web, con un fuerte interés en el backend'
-          } -->
-        </p>
-      </li>
     </ul>
   </div>
-</article>
+</Box>
diff --git a/src/components/main/bento.astro b/src/components/main/bento.astro
index fbb9798..db7c910 100644
--- a/src/components/main/bento.astro
+++ b/src/components/main/bento.astro
@@ -1,29 +1,5 @@
----
-const BENTO_STYLES = [
-  'bg-transparent',
-  'flex',
-  'flex-col',
-  'xl:grid',
-  'items-center',
-  'justify-center',
-  // 'min-w-[95dvw]',
-  'xl:h-[95dvh]',
-  'w-[95dvw]',
-  'lg:w-[75dvw]',
-  'xl:h-[95dvh]',
-  'content-center',
-  'rounded-sm',
-  'shadow-xl',
-  // 'border-2',
-  'grid-cols-1',
-  'auto-cols-auto',
-  'grid-cols-6',
-  'grid-rows-6',
-  'gap-2',
-  'p-2'
-].join(' ')
----
-
-<section class={BENTO_STYLES}>
+<section
+  class='bg-transparent flex flex-col xl:grid items-center justify-center xl:h-[95dvh] w-[95dvw] lg:w-[85dvw] rounded-sm shadow-xl auto-cols-auto grid-cols-6 grid-rows-6 gap-2 px-2 py-8 xl:py-4'
+>
   <slot />
 </section>
diff --git a/src/components/main/blog.astro b/src/components/main/blog.astro
index 6f593f9..9114bf5 100644
--- a/src/components/main/blog.astro
+++ b/src/components/main/blog.astro
@@ -1,32 +1,5 @@
 ---
-const BLOG_STYLES = [
-  'col-span-1 xl:col-span-1',
-  'row-span-2',
-  'gap-2',
-  'bg-slate-300/80',
-  'rounded-sm',
-  'flex',
-  'items-center',
-  'justify-center',
-  'xl:text-4xl text-2xl',
-  'font-bold',
-  'text-amber-950',
-  'dark:text-amber-300',
-  'font-rubik-doodle',
-  'w-full',
-  'h-full',
-  'transition-all',
-  'duration-200',
-  'dark:transition-all',
-  'dark:bg-slate-900/90',
-  'hover:scale-[1.02]',
-  'hover:duration-200',
-  'hover:ease-in-out',
-  'p-2',
-  'hover:border-2',
-  'hover:border-amber-500'
-].join(' ')
-
+import Hbox from '@components/boxes/hbox.astro'
 import { siGitbook } from 'simple-icons'
 
 interface Props {
@@ -35,15 +8,16 @@ interface Props {
 const { lang = 'en' }: Props = Astro.props
 ---
 
-<a
-  class={BLOG_STYLES}
-  title='Personal Blog'
+<Hbox
+  title='Blog'
   href={lang === 'en' ? '/blog' : '/es/blog'}
-  transition:name='blog'
+  otherStyles='xl:row-span-2 [&_p]:text-3xl'
 >
-  <p>Blog</p>
-  <svg
-    class='w-8 h-8 inline-flex dark:fill-amber-300 fill-amber-950'
-    set:html={siGitbook.svg}
-  />
-</a>
+  <div class='flex gap-2' transition:name='blog'>
+    <p>Blog</p>
+    <svg
+      class='w-8 h-8 inline-flex dark:fill-amber-300 fill-amber-950'
+      set:html={siGitbook.svg}
+    />
+  </div>
+</Hbox>
diff --git a/src/components/main/box.astro b/src/components/main/box.astro
deleted file mode 100644
index 748e7bd..0000000
--- a/src/components/main/box.astro
+++ /dev/null
@@ -1,34 +0,0 @@
----
-const BOX_STYLES: string = [
-  'col-span-1 xl:col-span-2',
-  'row-span-2',
-  'gap-2',
-  'bg-slate-300',
-  'rounded-sm',
-  'shadow-[0_0_0.5rem_rgba(0_0_0_0.5)]',
-  'flex',
-  'items-center',
-  'justify-center',
-  'text-slate-950',
-  'font-rubik-doodle',
-  'w-full',
-  'h-full',
-  'transition-all',
-  'duration-200',
-  'border-emerald-950',
-  'dark:border-emerald-300',
-  'border-2',
-  'dark:bg-slate-900',
-  'dark:text-emerald-300',
-  // 'hover:scale-[1.02]',
-  // 'hover:duration-200',
-  // 'hover:ease-in-out',
-  'grid',
-  'grid-rows-2',
-  'grid-cols-1'
-].join(' ')
----
-
-<article class={BOX_STYLES} title='My Links'>
-  <slot />
-</article>
diff --git a/src/components/main/buttons.astro b/src/components/main/buttons.astro
index b736c82..752edae 100644
--- a/src/components/main/buttons.astro
+++ b/src/components/main/buttons.astro
@@ -14,9 +14,6 @@ const BUTTONS_STYLES = [
   'flex',
   'items-center',
   'justify-around',
-  // 'border-2',
-  // 'border-emerald-950',
-  // 'dark:border-emerald-300',
   'text-slate-950',
   'font-rubik-doodle',
   'w-full',
@@ -27,15 +24,12 @@ const BUTTONS_STYLES = [
   'dark:text-slate-100',
   'bg-slate-300/80',
   'p-2'
-  // 'animate-blurred-fade-in',
-  // 'animate-delay-200'
 ].join(' ')
 
 const BUTTON_STYLES = [
   'dark:hover:text-emerald-300',
   'hover:text-emerald-900',
   'cursor-pointer'
-  // 'hover:scale-110',
 ].join(' ')
 
 import { siGithub, siGooglecardboard } from 'simple-icons'
@@ -49,7 +43,6 @@ import GoBack from '@components/icons/go-back.astro'
 
 const BOARD_BUTTON_STYLE = import.meta.env.DEV ? 'block' : 'hidden'
 
-// {SVGS_STYLES}
 const SVGS_STYLES = [
   'w-6',
   'h-6',
diff --git a/src/components/main/featured.astro b/src/components/main/featured.astro
index 6413479..245cdae 100644
--- a/src/components/main/featured.astro
+++ b/src/components/main/featured.astro
@@ -1,51 +1,23 @@
 ---
-const FEATURED_STYLES = [
-  'col-span-1',
-  'row-span-2',
-  'gap-2',
-  'bg-slate-300/80',
-  'rounded-sm',
-  'flex',
-  'flex-col',
-  'items-center',
-  'justify-center',
-  'text-2xl',
-  'font-bold',
-  'text-amber-950',
-  'dark:text-amber-300',
-  'font-rubik-doodle',
-  'w-full',
-  'h-full',
-  'transition-all',
-  'dark:transition-all',
-  'ease-in-out',
-  'duration-200',
-  'dark:bg-slate-900/80',
-  'hover:scale-[1.02]',
-  'hover:duration-200',
-  'hover:ease-in-out',
-  'p-2',
-  'hover:border-2',
-  'hover:border-amber-500'
-].join(' ')
-
 interface Props {
   lang: string
 }
 const { lang = 'en' }: Props = Astro.props
+
+import Hbox from '@components/boxes/hbox.astro'
 ---
 
-<a
-  class={FEATURED_STYLES}
-  title='Featured Resources'
+<Hbox
   href={lang === 'en' ? '/featured' : '/es/destacados-y-proyectos'}
-  transition:name='featured'
+  title={lang === 'en' ? 'Featured & Projects' : 'Proyectos y Destacados'}
+  otherStyles='xl:row-span-2 flex-col [&_p]:text-2xl'
 >
-  <p>
-    <!-- Projects -->
-    {lang === 'en' ? 'Projects &' : 'Proyectos &'}
-  </p>
-  <p>
-    {lang === 'en' ? 'Featured' : 'Destacados'}
-  </p>
-</a>
+  <div transition:name='featured'>
+    <p>
+      {lang === 'en' ? 'Projects &' : 'Proyectos &'}
+    </p>
+    <p>
+      {lang === 'en' ? 'Featured' : 'Destacados'}
+    </p>
+  </div>
+</Hbox>
diff --git a/src/components/main/footer.astro b/src/components/main/footer.astro
index 4d13c70..518f583 100644
--- a/src/components/main/footer.astro
+++ b/src/components/main/footer.astro
@@ -1,6 +1,6 @@
 ---
 import Copyright from '@components/icons/copyright.astro'
-import { siAstro, siPreact, siTailwindcss, siMdx } from 'simple-icons'
+import { siAstro, siPreact, siTailwindcss, siMdx, siBun } from 'simple-icons'
 ---
 
 <style>
@@ -17,15 +17,16 @@ import { siAstro, siPreact, siTailwindcss, siMdx } from 'simple-icons'
     text-align: center;
     align-items: center;
     display: flex;
-    justify-content: center;
+    justify-content: space-around;
     gap: 0.5rem;
-    font-size: 0.8rem;
+    font-size: 1rem;
     color: #fff;
     background-color: #000;
+    opacity: 1;
   }
 </style>
 
-<footer class='font-merriweather'>
+<footer class='font-averia'>
   <span> Powered by</span>
   <svg class='w-6 h-6 inline' set:html={siAstro.svg} fill={`#${siAstro.hex}`} />
   <svg
@@ -39,7 +40,8 @@ import { siAstro, siPreact, siTailwindcss, siMdx } from 'simple-icons'
     fill={`#${siTailwindcss.hex}`}
   />
   <svg class='w-6 h-6 inline' set:html={siMdx.svg} fill={`#fff`} />
-  <aside class=''>
+  <svg class='w-6 h-6 inline' set:html={siBun.svg} fill={`#fff`} />
+  <aside>
     <a
       href='https://github.com/jamerrq'
       target='_blank'
diff --git a/src/components/main/hbox.astro b/src/components/main/hbox.astro
deleted file mode 100644
index b84644a..0000000
--- a/src/components/main/hbox.astro
+++ /dev/null
@@ -1,36 +0,0 @@
----
-// const TECH_STACK_STYLES: string = [
-//   'col-span-2',
-//   'row-span-3',
-//   'bg-slate-300/80',
-//   'rounded-sm',
-//   'flex',
-//   'flex-col',
-//   'p-2',
-//   'items-center',
-//   'justify-around',
-//   'font-rubik-doodle',
-//   'w-full',
-//   'h-full',
-//   'transition-all',
-//   'text-amber-950',
-//   'dark:text-amber-300',
-//   'dark:bg-slate-900/95',
-//   'hover:scale-[1.02]',
-//   'hover:transition-all',
-//   'text-2xl'
-// ].join(' ')
-
-interface Props {
-  title: string
-  href: string
-  transitionName: string
-}
----
-
-<article
-  class='bg-slate-300/80 rounded-sm flex flex-col p-2 items-center justify-around font-rubik-doodle w-full h-full transition-all duration-300 dark:text-amber-300 dark:bg-slate-900/95 hover:scale-[1.02] text-2xl'
-  {...Astro.props}
->
-  <slot />
-</article>
diff --git a/src/components/main/project.astro b/src/components/main/project.astro
index 345a27f..24ba2e6 100644
--- a/src/components/main/project.astro
+++ b/src/components/main/project.astro
@@ -24,9 +24,14 @@ interface Project {
 }
 import { projects } from '@data/working-on.json'
 const project = projects.at(index) as Project
-const SVGS_STYLES = ['w-5', 'h-5', 'xl:w-6', 'xl:h-6', 'hover:scale-110'].join(
-  ' '
-)
+const SVGS_STYLES = [
+  'w-5',
+  'h-5',
+  'xl:w-7',
+  'xl:h-7',
+  'hover:scale-110',
+  'shadow bg-white/50 p-1 rounded dark:bg-slate-900/80'
+].join(' ')
 
 import { Image } from 'astro:assets'
 ---
diff --git a/src/components/main/socials.astro b/src/components/main/socials.astro
index 1fdcf44..102ae95 100644
--- a/src/components/main/socials.astro
+++ b/src/components/main/socials.astro
@@ -1,75 +1,27 @@
 ---
-const SOCIALS_STYLES: string = [
-  'z-10',
-  'col-span-2',
-  'row-span-2',
-  // 'gap-2',
-  'bg-slate-300/70',
-  'rounded-sm',
-  'shadow-[0_0_0.5rem_rgba(0_0_0_0.5)]',
-  'flex',
-  'items-center',
-  'justify-center',
-  'text-4xl',
-  // 'font-bold',
-  'text-slate-950',
-  'font-rubik-doodle',
-  'w-full',
-  'h-full',
-  'transition-all',
-  'duration-200',
-  'dark:transition-all',
-  // 'border-emerald-950',
-  // 'dark:border-emerald-300',
-  // 'border-2',
-  // 'hover:border-slate-100',
-  'dark:bg-slate-900/95',
-  'dark:text-emerald-300',
-  // 'hover:scale-[1.02]',
-  // 'hover:duration-200',
-  // 'hover:ease-in-out',
-  'grid',
-  'grid-rows-3',
-  'grid-cols-1',
-  'p-2'
-  // 'animate-blurred-fade-in',
-  // 'animate-delay-400'
-].join(' ')
-
-import {
-  siMaildotru,
-  siGithub,
-  siGmail,
-  siLichess,
-  siLinkedin,
-  siAdobeacrobatreader
-} from 'simple-icons'
+import { siMaildotru } from 'simple-icons'
 
 import Copy from '@components/icons/copy.astro'
-
-// {ICONS_STYLES}
-const ICONS_STYLES = [
-  'w-6',
-  'h-6',
-  'xl:w-8',
-  'xl:h-8',
-  'inline-flex',
-  'fill-slate-950',
-  'dark:fill-emerald-300',
-  'drop-shadow-sm',
-  'drop-shadow-black'
-].join(' ')
+import GenericIcon from '@components/icons/icon.astro'
 
 interface Props {
   lang: string
 }
+
 const { lang }: Props = Astro.props
+
+import Box from '@components/boxes/box.astro'
+
+import getIconsFn from '@data/socials.ts'
+const socials = getIconsFn(lang)
 ---
 
-<article class={SOCIALS_STYLES}>
-  <header class='flex gap-2 justify-center items-center'>
+<Box title='Contact Section' otherStyles='xl:col-span-2 xl:row-span-2 gap-6'>
+  <header
+    class='flex gap-2 justify-center items-center dark:text-emerald-300 text-slate-950'
+  >
     <p class='font-semibold text-3xl xl:text-4xl'>Contact</p>
-    <svg class={ICONS_STYLES} set:html={siMaildotru.svg} />
+    <GenericIcon svg={siMaildotru.svg} />
   </header>
   <div class='flex h-fit w-full items-center justify-center gap-2'>
     <span
@@ -83,79 +35,11 @@ const { lang }: Props = Astro.props
       />
     </button>
   </div>
-  <div class='flex justify-around [&>a]:'>
-    <!-- GitHub -->
-    <a
-      href='https://github.com/jamerrq'
-      target='_blank'
-      rel='noopener noreferrer'
-      class='hover:scale-110'
-      title='GitHub'
-    >
-      <svg class={ICONS_STYLES} set:html={siGithub.svg} fill={siGithub.hex} />
-    </a>
-    <!-- Mail -->
-    <a
-      href='mailto:jamerrq@gmail.com'
-      target='_blank'
-      rel='noopener noreferrer'
-      class='hover:scale-110'
-      title='Mail'
-    >
-      <svg class={ICONS_STYLES} set:html={siGmail.svg} fill={siGmail.hex} />
-    </a>
-    <!-- LinkedIn -->
-    <a
-      href='https://www.linkedin.com/in/jamerrq/'
-      target='_blank'
-      rel='noopener noreferrer'
-      class='hover:scale-110'
-      title='Linkedin'
-    >
-      <svg
-        class={ICONS_STYLES}
-        set:html={siLinkedin.svg}
-        fill={siLinkedin.hex}
-      />
-    </a>
-    <!-- CV -->
-    <a
-      href={lang === 'en'
-        ? '/docs/cv_Jamer_Rebolledo_en.pdf'
-        : '/docs/cv_Jamer_Rebolledo_es.pdf'}
-      target='_blank'
-      rel='noopener noreferrer'
-      class='hover:scale-110'
-      title='CV'
-    >
-      <svg
-        class={ICONS_STYLES}
-        set:html={siAdobeacrobatreader.svg}
-        fill={siAdobeacrobatreader.hex}
-      />
-    </a>
-    <!-- Lichess -->
-    <a
-      href='https://lichess.org/@/jamerrq'
-      target='_blank'
-      rel='noopener noreferrer'
-      class='hover:scale-110'
-      title='Lichess'
-    >
-      <svg class={ICONS_STYLES} set:html={siLichess.svg} fill={siLichess.hex} />
-    </a>
+  <div class='flex justify-around gap-4 w-[90%]'>
+    {
+      socials.map((s) => (
+        <GenericIcon title={s.title} href={s.href} svg={s.svg} />
+      ))
+    }
   </div>
-</article>
-<script>
-  import { toast } from 'wc-toast'
-  const copyMailButton = document.getElementById('copyMailButton')
-  copyMailButton?.addEventListener('click', () => {
-    navigator.clipboard.writeText('jamerrq@gmail.com')
-    toast('email shipped into your clipboard 📬', {
-      duration: 2000,
-      theme: {
-        type: 'light'
-      }
-    })
-  })
-</script>
+</Box>
diff --git a/src/components/main/tech-stack.astro b/src/components/main/tech-stack.astro
index 9a77aec..e1eb57a 100644
--- a/src/components/main/tech-stack.astro
+++ b/src/components/main/tech-stack.astro
@@ -1,28 +1,5 @@
 ---
-const TECH_STACK_STYLES: string = [
-  'col-span-2',
-  'row-span-3',
-  'bg-slate-300/80',
-  'rounded-sm',
-  'flex',
-  'flex-col',
-  'p-2',
-  'items-center',
-  'justify-around',
-  'font-rubik-doodle',
-  'w-full',
-  'h-full',
-  'transition-all',
-  'text-amber-950',
-  'dark:text-amber-300',
-  'dark:bg-slate-900/95',
-  'hover:scale-[1.02]',
-  'hover:border-2',
-  'hover:border-amber-500',
-  'text-2xl'
-].join(' ')
-
-// import Hbox from '@components/main/hbox.astro'
+import Hbox from '@components/boxes/hbox.astro'
 
 import {
   siNodedotjs,
@@ -44,7 +21,12 @@ const ICON_BLOCKS_STYLES = [
   'gap-2',
   '[&>img]:rounded-sm',
   'p-1',
-  'rounded-sm'
+  'rounded-sm',
+  '[&_svg]:shadow',
+  '[&_svg]:p-1',
+  '[&_svg]:bg-white/50',
+  '[&_svg]:dark:bg-slate-900/80',
+  '[&_svg]:rounded'
 ].join(' ')
 interface Props {
   lang?: string
@@ -54,21 +36,23 @@ const { lang = 'en' }: Props = Astro.props
 
 const SUBTITLE_STYLES = ['flex', 'flex-row', 'gap-2', 'text-2xl'].join(' ')
 
-const SVGS_STYLES = ['w-5', 'h-5', 'xl:w-6', 'xl:h-6', 'hover:scale-110'].join(
+const SVGS_STYLES = ['w-6', 'h-6', 'xl:w-8', 'xl:h-8', 'hover:scale-110'].join(
   ' '
 )
 ---
 
-<a
+<Hbox
   title='The tools I (love) work with'
-  class={TECH_STACK_STYLES}
   href={lang === 'en' ? 'tech-stack' : '/es/tech-stack'}
-  transition:name='tech-stack'
+  otherStyles='xl:row-span-3 xl:col-span-2 flex-col gap-4'
 >
-  <div class='gap-2 flex font-bold text-2xl xl:text-4xl'>
-    <p>
+  <div
+    class='gap-2 flex font-bold text-2xl xl:text-4xl text-amber-950 dark:text-amber-300'
+    transition:name='tech-stack'
+  >
+    <h2>
       {lang === 'en' ? 'Tech Stack' : 'Tecnologías'}
-    </p>
+    </h2>
   </div>
   <div class='grid grid-cols-2 gap-2 items-center justify-items-center'>
     <div class={SUBTITLE_STYLES}>
@@ -152,11 +136,11 @@ const SVGS_STYLES = ['w-5', 'h-5', 'xl:w-6', 'xl:h-6', 'hover:scale-110'].join(
     </div>
   </div>
   <aside class='p-2 rounded-sm flex gap-2 justify-center items-center'>
-    <p
+    <span
       class='font-bold text-sm xl:text-base dark:text-emerald-300 text-slate-900 font-averia'
     >
       <span class='-mt-5'> ❯</span>
       {lang === 'en' ? 'Tap to see more' : 'Toca para ver más'}
-    </p>
+    </span>
   </aside>
-</a>
+</Hbox>
diff --git a/src/components/main/title.astro b/src/components/main/title.astro
index 1a8b071..8b81024 100644
--- a/src/components/main/title.astro
+++ b/src/components/main/title.astro
@@ -8,7 +8,7 @@ import BitwiseLiminal from '@movies/bitwise-liminal.astro'
 ---
 
 <div
-  class='row-span-2 col-span-1 xl:col-span-2 title bg-transparent text-emerald-400 p-2 rounded-sm w-full h-full flex items-center flex-row animate-blurred-fade-in relative'
+  class='row-span-2 xl:col-span-2 title bg-transparent text-emerald-400 p-2 rounded-sm w-full h-full flex items-center flex-row animate-blurred-fade-in relative'
 >
   <div class='flex flex-col gap-1 animate-fade-in z-10'>
     <a href={lang !== 'en' ? '/' : 'es'}>
@@ -21,7 +21,7 @@ import BitwiseLiminal from '@movies/bitwise-liminal.astro'
     <span
       class='block font-averia text-sm rounded w-fit mx-auto px-1 py-0.5 text-center dark:bg-gray-500/80 bg-gray-600/80'
     >
-      {lang === 'en' ? 'Software Dev' : 'Desarrollador Backend'}
+      Backend Dev
     </span>
   </div>
   <div
diff --git a/src/components/main/working-on.astro b/src/components/main/working-on.astro
index bbf507c..8212448 100644
--- a/src/components/main/working-on.astro
+++ b/src/components/main/working-on.astro
@@ -1,33 +1,4 @@
 ---
-const EXPERIENCE_STYLES = [
-  'col-span-1 xl:col-span-2',
-  'row-span-4',
-  'gap-2',
-  'bg-slate-300/70',
-  'rounded-sm',
-  'shadow-[0_0_0.5rem_rgba(0_0_0_0.5)]',
-  'flex',
-  'items-center',
-  'justify-center',
-  'align-center',
-  'font-semibold',
-  'text-slate-950',
-  'font-rubik-doodle',
-  'w-full',
-  'h-full',
-  'dark:bg-slate-900/95',
-  'dark:text-slate-200',
-  'flex',
-  'flex-col',
-  'pt-2',
-  'px-2',
-  '[&>div>ul>li]:dark:text-slate-200',
-  '[&>div>ul>li>a]:bg-emerald-500',
-  '[&>div>ul>li>a]:dark:bg-emerald-400',
-  '[&>div>ul>li>a]:dark:text-emerald-950',
-  '[&>div>ul>li>a]:text-slate-950'
-].join(' ')
-
 import { siGitkraken } from 'simple-icons'
 
 interface Props {
@@ -36,9 +7,10 @@ interface Props {
 const { lang = 'en' }: Props = Astro.props
 
 import ProjectCard from './project.astro'
+import Box from '@components/boxes/box.astro'
 ---
 
-<article class={EXPERIENCE_STYLES} title="Projects I'm working on">
+<Box title="Projects I'm working on" otherStyles='xl:col-span-2 xl:row-span-4'>
   <header
     class='text-2xl xl:text-3xl flex gap-2 text-emerald-950 dark:text-emerald-300 items-center'
   >
@@ -47,7 +19,7 @@ import ProjectCard from './project.astro'
       {lang === 'en' ? 'Working on' : 'Trabajando en'}
     </p>
     <svg
-      class='w-6 h-6 inline-flex'
+      class='w-8 h-8 inline-flex shadow bg-white/50 p-1 rounded dark:bg-slate-900/80'
       set:html={siGitkraken.svg}
       fill={`#${siGitkraken.hex}`}
     />
@@ -60,4 +32,4 @@ import ProjectCard from './project.astro'
       <ProjectCard lang={lang} index={1} />
     </ul>
   </div>
-</article>
+</Box>
diff --git a/src/components/tech-stack/about-tech.astro b/src/components/tech-stack/about-tech.astro
index c1704e9..067891c 100644
--- a/src/components/tech-stack/about-tech.astro
+++ b/src/components/tech-stack/about-tech.astro
@@ -1,45 +1,23 @@
 ---
-const ABOUT_STYLES = [
-  'col-span-4',
-  'row-span-2',
-  'bg-slate-300/70',
-  'dark:bg-slate-900',
-  'dark:text-slate-300',
-  'rounded-sm',
-  // 'shadow-[0_0_0.5rem_rgba(0_0_0_0.5)]',
-  'flex',
-  'items-center',
-  'justify-center',
-  'font-bold',
-  'font-rubik-doodle',
-  'w-full',
-  'h-full',
-  'transition-all',
-  // 'border-2',
-  'dark:border-emerald-300',
-  'border-emerald-950',
-  'text-2xl',
-  'flex-col',
-  '[&>p]:text-base',
-  'text-slate-900',
-  'dark:text-slate-300',
-  'p-2'
-].join(' ')
+import Box from '@components/boxes/box.astro'
 interface Props {
   lang?: string
 }
 const { lang = 'en' }: Props = Astro.props
 ---
 
-<article class={ABOUT_STYLES}>
-  <h1 class='dark:text-emerald-300'>
+<Box
+  title='About my Tech Stack'
+  otherStyles='xl:row-span-2 xl:col-span-4 animate-delay-100'
+  animated
+>
+  <h1 class='dark:text-emerald-300 text-4xl'>
     {lang === 'en' ? 'About' : 'Acerca de'}
   </h1>
   <div
     class='flex flex-col items-center p-4 justify-around w-full font-merriweather text-sm xl:text-base gap-2'
   >
     <p>
-      <!-- Tools that make my work (and life) easier -->
       {
         lang === 'en'
           ? 'Tools that make my work (and life) easier'
@@ -47,8 +25,6 @@ const { lang = 'en' }: Props = Astro.props
       }
     </p>
     <quote class='italic text-cyan-900 dark:text-cyan-300 xl:text-base text-xs'>
-      <!-- "If I have seen further [than others], it is by standing on the shoulders
-      of giants" - Isaac Newton -->
       {
         lang === 'en'
           ? '"If I have seen further [than others], it is by standing on the shoulders of giants" - Isaac Newton'
@@ -56,4 +32,4 @@ const { lang = 'en' }: Props = Astro.props
       }
     </quote>
   </div>
-</article>
+</Box>
diff --git a/src/components/tech-stack/dev-tools.astro b/src/components/tech-stack/dev-tools.astro
index 6644317..f412d70 100644
--- a/src/components/tech-stack/dev-tools.astro
+++ b/src/components/tech-stack/dev-tools.astro
@@ -1,44 +1,23 @@
 ---
-const DEV_TOOLS_STYLES = [
-  'col-span-2',
-  'row-span-3',
-  'bg-slate-300/70',
-  'rounded-sm',
-  'shadow-[0_0_0.5rem_rgba(0_0_0_0.5)]',
-  'flex',
-  'flex-col',
-  'gap-2',
-  'items-center',
-  'justify-center',
-  'font-rubik-doodle',
-  'w-full',
-  'h-full',
-  'transition-all',
-  // 'border-2',
-  'border-cyan-950',
-  'dark:border-cyan-300',
-  'text-blue-950',
-  'dark:bg-slate-900',
-  'dark:text-blue-300',
-  'text-2xl',
-  'font-bold',
-  'p-2'
-].join(' ')
-
 import TechIcon from '@components/icons/tech-icon.astro'
 import TechIcons, { type IconProps } from '@data/tech-icons'
 const { ides, apis, linters, dvc, others } = TechIcons
 
+import Box from '@components/boxes/box.astro'
+
 interface Props {
   lang?: string
 }
 const { lang = 'en' }: Props = Astro.props
 ---
 
-<article title='The tools I (love) work with' class={DEV_TOOLS_STYLES}>
+<Box
+  title='The tools I (love) work with'
+  otherStyles='xl:row-span-3 xl:col-span-2 animate-delay-300'
+  animated
+>
   <header class='flex gap-2 text-2xl'>
     <h1 class=''>Dev Tools</h1>
-    <!-- <p class='font-thin'></p> -->
   </header>
   <ul
     class='text-xl w-full grid place-items-center grid-cols-2 grid-rows-3 gap-1 [&>li]:grid [&>li]:place-items-center [&>li>main>a>img]:rounded-sm [&_header]:text-amber-950 [&_header]:dark:text-amber-300'
@@ -137,4 +116,4 @@ const { lang = 'en' }: Props = Astro.props
       </section>
     </li>
   </ul>
-</article>
+</Box>
diff --git a/src/components/tech-stack/languages.astro b/src/components/tech-stack/languages.astro
index 28cdc03..aaa1ef0 100644
--- a/src/components/tech-stack/languages.astro
+++ b/src/components/tech-stack/languages.astro
@@ -1,34 +1,5 @@
 ---
-const SOCIALS_STYLES: string = [
-  'col-span-1 xl:col-span-2',
-  'row-span-2',
-  'gap-2',
-  'bg-slate-300/70',
-  'rounded-sm',
-  'shadow-[0_0_0.5rem_rgba(0_0_0_0.5)]',
-  'flex',
-  'items-center',
-  'justify-center',
-  'text-2xl xl:text-4xl',
-  'font-bold',
-  'font-rubik-doodle',
-  'w-full',
-  'h-full',
-  'transition-all',
-  'duration-200',
-  'dark:transition-all',
-  'border-indigo-950',
-  'dark:border-indigo-300',
-  // 'border-2',
-  'dark:bg-slate-900',
-  'text-indigo-950',
-  'dark:text-indigo-300',
-  'grid',
-  'grid-rows-2',
-  'grid-cols-1',
-  'p-2'
-].join(' ')
-
+import Box from '@components/boxes/box.astro'
 import {
   siPython,
   siJavascript,
@@ -51,13 +22,17 @@ const SVGS_STYLES = [
 ].join(' ')
 ---
 
-<article class={SOCIALS_STYLES} title='My Links'>
+<Box
+  title='My Social Links'
+  animated
+  otherStyles='xl:col-span-2 xl:row-span-2 gap-4 animate-delay-200'
+>
   <div class='flex gap-2 justify-center'>
-    <p>
+    <h2 class='text-3xl'>
       {lang === 'en' ? 'Languages' : 'Lenguajes'}
-    </p>
+    </h2>
   </div>
-  <div class='flex justify-around [&>a]: [&>a]:font-thin'>
+  <div class='flex justify-around w-full [&>a]: [&>a]:font-thin'>
     <!-- Python -->
     <a
       href='https://www.python.org/'
@@ -109,4 +84,4 @@ const SVGS_STYLES = [
       <svg class={SVGS_STYLES} set:html={siCsharp.svg} />
     </a>
   </div>
-</article>
+</Box>
diff --git a/src/components/tech-stack/os.astro b/src/components/tech-stack/os.astro
index dc261ee..a52a8fd 100644
--- a/src/components/tech-stack/os.astro
+++ b/src/components/tech-stack/os.astro
@@ -1,40 +1,14 @@
 ---
-const OS_STYLES = [
-  'col-span-1 xl:col-span-1',
-  'row-span-2',
-  'gap-2',
-  'bg-slate-300/70',
-  'rounded-sm',
-  'shadow-[0_0_0.5rem_rgba(0_0_0_0.5)]',
-  'flex',
-  'flex-col',
-  'items-center',
-  'justify-center',
-  'font-bold',
-  'dark:text-amber-600',
-  'text-amber-900',
-  'font-rubik-doodle',
-  'w-full',
-  'h-full',
-  'transition-all',
-  'duration-200',
-  'border-amber-950',
-  'dark:border-amber-600',
-  // 'border-2',
-  'dark:bg-slate-900',
-  'hover:scale-[1.02]',
-  'p-2'
-].join(' ')
+import Hbox from '@components/boxes/hbox.astro'
 
 import { siLinux, siUbuntu } from 'simple-icons'
 ---
 
-<a
-  class={OS_STYLES}
+<Hbox
   title='My OS'
   href='https://releases.ubuntu.com/focal/'
-  target='_blank'
-  rel='noopener noreferrer'
+  animated
+  otherStyles='xl:row-span-2 flex-col animate-delay-200'
 >
   <header class='flex gap-2 items-center text-3xl'>
     <h1>OS</h1>
@@ -53,4 +27,4 @@ import { siLinux, siUbuntu } from 'simple-icons'
     <p>Ubuntu 20.04.6 LTS</p>
     <p>Focal Fossa</p>
   </section>
-</a>
+</Hbox>
diff --git a/src/components/tech-stack/testing.astro b/src/components/tech-stack/testing.astro
index f23cef4..d8ececb 100644
--- a/src/components/tech-stack/testing.astro
+++ b/src/components/tech-stack/testing.astro
@@ -1,30 +1,5 @@
 ---
-const TESTING_STYLES = [
-  'col-span-1 xl:col-span-1',
-  'row-span-2',
-  'gap-2',
-  'bg-slate-300/70',
-  'rounded-sm',
-  'shadow-[0_0_0.5rem_rgba(0_0_0_0.5)]',
-  'flex',
-  'flex-col',
-  'items-center',
-  'justify-center',
-  'text-2xl',
-  'font-bold',
-  'dark:text-emerald-400',
-  'text-emerald-950',
-  'font-rubik-doodle',
-  'w-full',
-  'h-full',
-  'transition-all',
-  'duration-200',
-  'border-emerald-950',
-  'dark:border-emerald-300',
-  // 'border-2',
-  'dark:bg-slate-900',
-  'p-2'
-].join(' ')
+import Box from '@components/boxes/box.astro'
 
 import TechIcon from '@components/icons/tech-icon.astro'
 import TechIcons, { type IconProps } from '@data/tech-icons'
@@ -36,15 +11,19 @@ interface Props {
 const { lang = 'en' }: Props = Astro.props
 ---
 
-<article class={TESTING_STYLES}>
-  <header class='flex gap-2'>
-    <h1>
+<Box
+  title='Testing'
+  otherStyles='xl:row-span-2 gap-4 animate-delay-300'
+  animated
+>
+  <header>
+    <h1 class='text-2xl'>
       {lang === 'en' ? 'Testing' : 'Pruebas'}
     </h1>
   </header>
   <section
-    class='xl:grid flex place-items-center gap-2 grid-cols-2 grid-rows-2 [&>a>img]:rounded-sm [&>a>img]:border-2'
+    class='xl:grid flex place-content-center gap-2 grid-cols-2 grid-rows-2 [&>a>img]:rounded-sm [&>a>img]:border-2 w-full justify-items-center'
   >
     {testing.map((icon: IconProps) => <TechIcon obj={icon} />)}
   </section>
-</article>
+</Box>
diff --git a/src/components/tech-stack/title.astro b/src/components/tech-stack/title.astro
index f2f64b1..8dd6457 100644
--- a/src/components/tech-stack/title.astro
+++ b/src/components/tech-stack/title.astro
@@ -1,26 +1,5 @@
 ---
-// import TechPeep from '@components/css-peeps/tech-peep.astro'
-// import TechPeepLight from '@components/css-peeps/tech-peep-light.astro'
-const TITLE_STYLES: string = [
-  'row-span-2',
-  'col-span-2',
-  'dark:bg-emerald-900',
-  'dark:text-emerald-300',
-  'text-emerald-950',
-  'bg-emerald-300',
-  'p-4',
-  'rounded-sm',
-  'w-full',
-  'flex',
-  'h-full',
-  'items-center',
-  'justify-center',
-  'flex-row',
-  'font-rubik-doodle'
-  // 'shadow-[0_0_0.5rem_rgba(0_0_0)]'
-  // 'shadow-[0_0_0.15rem_rgb(69_26_3)]', // rgb(69, 26, 3)
-  // 'shadow-[0_0_0.25rem_rgb(253_230_138)]' // rgb(253, 230, 138)
-].join(' ')
+import Hbox from '@components/boxes/hbox.astro'
 
 interface Props {
   lang?: string
@@ -28,17 +7,19 @@ interface Props {
 const { lang = 'en' }: Props = Astro.props
 ---
 
-<a
-  class={TITLE_STYLES}
-  transition:name='tech-stack'
+<Hbox
+  title='Back Home'
+  otherStyles='xl:col-span-2 xl:row-span-2'
   href={lang === 'en' ? '/' : '/es'}
 >
-  <div class='flex flex-col font-merriweather min-w-[50%]'>
+  <div
+    class='flex flex-col font-merriweather min-w-[50%]'
+    transition:name='tech-stack'
+  >
     <p class='font-semibold text-2xl font-rubik-doodle'>
       {lang === 'en' ? 'Tech Stack' : 'Mi Stack'}
     </p>
     <p class='font-semibold text-balance text-sm xl:text-base'>
-      <!-- Painters have brushes, <br /> I got these. -->
       {
         lang === 'en'
           ? 'Painters have brushes, I got these <3'
@@ -46,6 +27,4 @@ const { lang = 'en' }: Props = Astro.props
       }
     </p>
   </div>
-  <!-- <TechPeep />
-  <TechPeepLight /> -->
-</a>
+</Hbox>
diff --git a/src/components/tech-stack/web-dev.astro b/src/components/tech-stack/web-dev.astro
index b66880b..bbfe5db 100644
--- a/src/components/tech-stack/web-dev.astro
+++ b/src/components/tech-stack/web-dev.astro
@@ -1,30 +1,5 @@
 ---
-const WEB_DEV_STYLES = [
-  'col-span-1 xl:col-span-2',
-  'row-span-4',
-  'gap-1',
-  'bg-slate-300/70',
-  'rounded-sm',
-  'shadow-[0_0_0.5rem_rgba(0_0_0_0.5)]',
-  'flex',
-  'items-center',
-  'justify-center',
-  'align-center',
-  'font-bold',
-  'text-blue-950',
-  'font-rubik-doodle',
-  'w-full',
-  'h-full',
-  'transition-all',
-  // 'border-2',
-  'border-blue-950',
-  'dark:border-blue-300',
-  'dark:bg-slate-900',
-  'dark:text-blue-300',
-  'flex',
-  'flex-col',
-  'p-2'
-].join(' ')
+import Box from '@components/boxes/box.astro'
 
 import TechIcon from '@components/icons/tech-icon.astro'
 import TechIcons from '@data/tech-icons'
@@ -36,9 +11,13 @@ interface Props {
 const { lang = 'en' }: Props = Astro.props
 ---
 
-<article class={WEB_DEV_STYLES}>
-  <header class='flex gap-2 text-2xl'>
-    <h1>
+<Box
+  title='Web Dev'
+  otherStyles='xl:row-span-4 xl:col-span-2 animate-delay-100'
+  animated
+>
+  <header>
+    <h1 class='text-3xl'>
       {
         {
           en: 'Web Development',
@@ -108,4 +87,4 @@ const { lang = 'en' }: Props = Astro.props
       </li>
     </li>
   </ul>
-</article>
+</Box>
diff --git a/src/data/projects.json b/src/data/projects.json
index 70bce49..7876bc2 100644
--- a/src/data/projects.json
+++ b/src/data/projects.json
@@ -137,7 +137,7 @@
       "repository": "https://github.com/jamerrq/html-30-days-challenge"
     },
     {
-      "title": "IDE Pinturerias Full Stack Web App",
+      "title": "IDE Pinturerías Full Stack Web App",
       "description": {
         "en": "Full stack web application for the management of a paint store, with features such as inventory management, sales, reports and blog. Official website coming soon.",
         "es": "Aplicación web full stack para la gestión de una tienda de pinturas, con características como gestión de inventario, ventas, informes y blog. Sitio web oficial próximamente."
diff --git a/src/data/socials.ts b/src/data/socials.ts
new file mode 100644
index 0000000..e76b556
--- /dev/null
+++ b/src/data/socials.ts
@@ -0,0 +1,45 @@
+import {
+  siGithub,
+  siGmail,
+  siLichess,
+  siLinkedin,
+  siAdobeacrobatreader
+} from 'simple-icons'
+
+export default function getSocialIcons(lang = 'en') {
+  return [
+    {
+      title: 'Github',
+      href: 'https://github.com/jamerrq',
+      svg: siGithub.svg,
+      hex: siGithub.hex
+    },
+    {
+      title: 'Linkedin',
+      href: 'https://www.linkedin.com/in/jamerrq/',
+      svg: siLinkedin.svg,
+      hex: siLinkedin.hex
+    },
+    {
+      title: 'Email',
+      href: 'mailto:jamerrq@gmail.com',
+      svg: siGmail.svg,
+      hex: siGmail.hex
+    },
+    {
+      title: 'Curriculum Vitae',
+      href:
+        lang === 'en'
+          ? '/docs/cv_Jamer_Rebolledo_en.pdf'
+          : '/docs/cv_Jamer_Rebolledo_es.pdf',
+      svg: siAdobeacrobatreader.svg,
+      hex: siAdobeacrobatreader.hex
+    },
+    {
+      title: 'Lichess',
+      href: 'https://lichess.org/@/jamerrq',
+      svg: siLichess.svg,
+      hex: siLichess.hex
+    }
+  ]
+}
diff --git a/src/layouts/blog-layout.astro b/src/layouts/blog-layout.astro
index 966a67e..9af790a 100644
--- a/src/layouts/blog-layout.astro
+++ b/src/layouts/blog-layout.astro
@@ -9,26 +9,44 @@ interface Props {
 }
 const { frontmatter }: Props = Astro.props
 import Buttons from '@components/main/buttons.astro'
+
+import src from '@media/background.webm'
 ---
 
 <Layout title={frontmatter.title}>
   <style>
-    html {
+    * {
       scroll-behavior: smooth;
-      scrollbar-width: none;
-      background-image: url('/noise-light.png');
+      scrollbar-width: thin;
     }
   </style>
-  <main
-    class='dark:bg-[#1b383c] bg-[#9DBC98] min-h-[95dvh] lg:w-[80dvw] md:w-[95dvw] w-[65dvw] xs:w-[95dvw] mx-auto p-4 dark:text-emerald-50 [&>*]:text-balance overflow-y-auto max-h-[100dvh] [scrollbar-color:#1b383c_#9DBC98] [scrollbar-width:thin]'
+  <div
+    class='dark:bg-[#1b383c]/95 py-8 bg-[#D6DAC8]/80 xl:h-[100dvh] h-[95dvh] lg:w-[80dvw] md:w-[95dvw] w-[65dvw] xs:w-[95dvw] mx-auto px-4 dark:text-emerald-50 [&>*]:text-balance overflow-y-auto max-h-[100dvh] [scrollbar-color:#1b383c_#9DBC98] [scrollbar-width:thin] relative'
   >
+    <div
+      class='fixed -z-10 top-0 left-0 w-full h-full opacity-5'
+      id='blog-container'
+    >
+      <video
+        src={src}
+        autoplay
+        style='width: 100%; height: 100%; opacity: 65%;'
+        muted
+        loop
+        playsinline
+        preload='auto'
+        class='object-cover w-full h-full rounded'
+        id='noise-video'
+      >
+      </video>
+    </div>
     <div class='sticky top-1'>
       <Buttons href={frontmatter.hrefLang} />
     </div>
     <br />
     <header
       transition:name='blog-title'
-      class='flex font-merriweather text-slate-950 bg-emerald-500 p-2 cursor-pointer font-bold'
+      class='flex font-averia text-slate-950 bg-[#BE7B72] dark:bg-[#FFFDD7] p-2 cursor-pointer font-bold'
       onclick='window.history.back()'
     >
       <h1>
@@ -37,10 +55,16 @@ import Buttons from '@components/main/buttons.astro'
     </header>
     <br />
     <div
-      class='[&>h1]:font-bold font-merriweather font-semibold text-sm [&_h1]:text-emerald-900 [&_h1]:dark:text-emerald-300 [&_h2]:text-emerald-900 [&_h2]:dark:text-emerald-300 [&_h3]:text-emerald-900 [&_h3]:dark:text-emerald-300 [&_h1]:text-xl [&_h1]:xl:text-3xl [&_h1]:font-bold [&_h2]:font-semibold [&_h2]:text-lg [&_h2]:xl:text-2xl [&_h3]:text-base [&_h3]:xl:text-xl [&_h3]:font-semibold [&_p]:text-pretty [&_ul]:m-4 [&_ul]:list-disc max-w-[800px] [&_a]:font-semibold [&_a]:text-cyan-700 [&_a]:dark:text-cyan-300 flex flex-col gap-2 mb-8 [&_blockquote]:[font-merriweather] [&_code]:[font-merriweather] [&_a]:underline [&_a]:[target=_blank] [&_pre]:p-2 [&_pre]:overflow-x-hidden'
+      class='[&>h1]:font-bold font-averia font-semibold text-sm [&_h1]:text-emerald-900 [&_h1]:dark:text-emerald-300 [&_h2]:text-emerald-900 [&_h2]:dark:text-emerald-300 [&_h3]:text-emerald-900 [&_h3]:dark:text-emerald-300 [&_h1]:text-xl [&_h1]:xl:text-3xl [&_h1]:font-bold [&_h2]:font-semibold [&_h2]:text-lg [&_h2]:xl:text-2xl [&_h3]:text-base [&_h3]:xl:text-xl [&_h3]:font-semibold [&_p]:text-pretty [&_ul]:m-4 [&_ul]:list-disc max-w-[800px] [&_a]:font-semibold [&_a]:text-[#5755FE] [&_a]:dark:text-cyan-300 flex flex-col gap-2 mb-8 [&_blockquote]:[font-merriweather] [&_code]:[font-merriweather] [&_a]:underline [&_a]:[target=_blank] [&_pre]:p-2 [&_pre]:overflow-x-hidden'
     >
       <slot />
     </div>
-  </main>
+  </div>
+  <script>
+    const noiseVideo = document.getElementById(
+      'noise-video'
+    ) as HTMLVideoElement
+    noiseVideo.playbackRate = 0.2
+  </script>
   <Footer />
 </Layout>
diff --git a/src/layouts/layout.astro b/src/layouts/layout.astro
index bc219ff..84cae8b 100644
--- a/src/layouts/layout.astro
+++ b/src/layouts/layout.astro
@@ -14,198 +14,26 @@ import '@fontsource/averia-serif-libre'
 // Styles
 import '@styles/index.css'
 
+// Others
 import { ViewTransitions } from 'astro:transitions'
 import Background from '@components/main/background.astro'
 import SEO from '@components/head/seo.astro'
+import Scripts from '@components/head/scripts.astro'
 ---
 
 <!doctype html>
 <html lang={lang}>
   <head>
-    <meta charset='UTF-8' />
-    <meta name='description' content='jamerrq.dev' />
-    <meta name='viewport' content='width=device-width' />
-    <link rel='icon' type='image/png' href='/favicon.png' />
-    <meta name='generator' content={Astro.generator} />
-    <!-- Open Graph -->
-    <meta name='twitter:card' content='summary_large_image' />
-    <meta name='twitter:site' content='@jamerrq' />
-    <meta name='twitter:title' content='jamerrq.dev' />
-    <meta name='twitter:description' content='Software Development' />
-    <meta
-      name='twitter:image'
-      content='https://jamerrq.deno.dev/og-image2.png'
-    />
-    <meta property='og:title' content='jamerrq.dev' />
-    <meta property='og:type' content='personal website' />
-    <meta property='og:url' content='https://jamerrq.deno.dev' />
-    <meta
-      property='og:image'
-      content='https://jamerrq.deno.dev/og-image2.png'
-    />
-    <meta property='og:description' content='Software Development' />
-    <meta property='og:site_name' content='jamerrq.dev' />
-    <meta name='theme-color' content='##10B981' />
     <SEO />
-    <!-- Robots -->
-    <meta name='robots' content='index, follow' />
-    <meta name='googlebot' content='index, follow' />
-    <meta name='google' content='notranslate' />
-    <link rel='sitemap' href='/sitemap-index.xml' />
-
-    <!-- Others -->
-    <link href='/css/prism-nord.css' rel='stylesheet' />
     <title>{title}</title>
     <ViewTransitions />
   </head>
   <body data-dev={import.meta.env.DEV} class='data-[dev]:debug-screens'>
     <wc-toast></wc-toast>
     <Background />
-    <main class='min-h-[100dvh] grid items-center justify-center'>
+    <main class='min-h-[100dvh] grid place-content-center'>
       <slot />
     </main>
-    <style is:global>
-      /* Reset by @souporserious */
-      * {
-        box-sizing: border-box;
-        /* position: relative; */
-        min-width: 0;
-      }
-
-      body {
-        min-height: 100dvh;
-      }
-
-      h1,
-      h2,
-      h3,
-      h4 {
-        text-wrap: balance;
-      }
-
-      p {
-        text-wrap: pretty;
-      }
-
-      /* @font-face {
-        src: url('/fonts/RubikDoodleShadow/RubikDoodleShadow-Regular.woff2');
-        font-family: 'Rubik Doodle Shadow';
-      } */
-
-      .responsive-text {
-        font-size: clamp(1.5rem, 8vw - 2rem, 3rem);
-      }
-    </style>
-    <script defer is:inline define:vars={{ lang }}>
-      // Theme switch
-      function setTheme() {
-        const darkIcon = document.getElementById('theme-toggle-dark-icon')
-        const lightIcon = document.getElementById('theme-toggle-light-icon')
-
-        // Cambia los iconos dentro del botón en función de la configuración anterior
-        if (
-          localStorage.getItem('color-theme') === 'dark' ||
-          !('color-theme' in localStorage)
-        ) {
-          lightIcon.classList.remove('hidden')
-          // en caso que se haya configurado previamente
-          document.documentElement.classList.add('dark')
-          // remover la clase light si está presente
-          document.documentElement.classList.remove('light')
-        } else {
-          darkIcon.classList.remove('hidden')
-          // en caso que se haya configurado previamente
-          document.documentElement.classList.add('light')
-          // remover la clase dark si está presente
-          document.documentElement.classList.remove('dark')
-        }
-
-        const themeToggleBtn = document.getElementById('theme-toggle')
-
-        themeToggleBtn.addEventListener('click', () => {
-          darkIcon.classList.toggle('hidden')
-          lightIcon.classList.toggle('hidden')
-
-          // se comprueba si se ha configurado previamente
-          if (localStorage.getItem('color-theme')) {
-            if (localStorage.getItem('color-theme') === 'light') {
-              document.documentElement.classList.add('dark')
-              // remover la clase light si está presente
-              document.documentElement.classList.remove('light')
-              localStorage.setItem('color-theme', 'dark')
-            } else {
-              document.documentElement.classList.remove('dark')
-              // remover la clase dark si está presente
-              localStorage.setItem('color-theme', 'light')
-            }
-
-            // se comprueba si el sistema operativo tiene configurado el tema oscuro
-          } else if (document.documentElement.classList.contains('dark')) {
-            document.documentElement.classList.remove('dark')
-            document.documentElement.classList.add('light')
-            localStorage.setItem('color-theme', 'light')
-          } else {
-            document.documentElement.classList.add('dark')
-            document.documentElement.classList.remove('light')
-            localStorage.setItem('color-theme', 'dark')
-          }
-        })
-      }
-
-      setTheme()
-      document.addEventListener('astro:after-preparation', setTheme)
-      document.addEventListener('astro:after-swap', setTheme)
-
-      // Home & Random Place buttons
-      const setHomeRandomButton = () => {
-        const homeButton = document.getElementById('home-button')
-        const randomPlaceButton = document.getElementById('random-place-button')
-
-        // Show home button only if not in home
-        // Otherwise show random place button
-        if (
-          window.location.pathname === '/' ||
-          window.location.pathname === '/es'
-        ) {
-          homeButton.classList.add('hidden')
-          randomPlaceButton.classList.remove('hidden')
-        } else {
-          homeButton.classList.remove('hidden')
-          randomPlaceButton.classList.add('hidden')
-        }
-
-        // Add click event to home button
-        homeButton.addEventListener('click', () => {
-          // window.location.href = '/'
-          lang === 'es'
-            ? (window.location.href = '/es')
-            : (window.location.href = '/')
-        })
-
-        randomPlaceButton.addEventListener('click', () => {
-          const places = ['/blog', '/tech-stack', '/featured']
-          window.location.href =
-            places[Math.floor(Math.random() * places.length)]
-        })
-      }
-
-      setHomeRandomButton()
-      document.addEventListener('astro:after-preparation', setHomeRandomButton)
-      document.addEventListener('astro:after-swap', setHomeRandomButton)
-    </script>
-    <script is:inline defer>
-      // if screen is too small, don't render the animation
-      const disabled = true
-      if (!disabled && window.innerWidth > 240) {
-        const x = document.createElement('canvas')
-        x.id = 'c'
-        x.setAttribute('class', 'grow')
-        x.innerHTML = `<svg id='x' loading='lazy' onload='setInterval("for(t+=.1,R=T=C=Math.cos,c.width=w=128,i=9986,V=t/9&3;Y=i--/w;c.getContext\`2d\`.fillRect(X,Y,(C(t/6)*T^V*i/1e4*T+t)%20?(R=T++,1):(T=9,19/R),5/Z))for(Z=5,X=i%w+4/R;0<(V*95+C(t/3)+Z*X/64-Z^Z|(60-Y)*Z/58)%13;Z+=.2);",t=9)'></svg>`
-        document.addEventListener('DOMContentLoaded', () => {
-          document.getElementById('animation-container').appendChild(x)
-        })
-        x.style.height = '100%'
-      }
-    </script>
+    <Scripts />
   </body>
 </html>
diff --git a/src/media/background.webm b/src/media/background.webm
new file mode 100644
index 0000000..faf7578
Binary files /dev/null and b/src/media/background.webm differ
diff --git a/src/movies/Movie.astro b/src/movies/Movie.astro
new file mode 100644
index 0000000..9d987b5
--- /dev/null
+++ b/src/movies/Movie.astro
@@ -0,0 +1,30 @@
+---
+interface Props {
+  href: string
+  title?: string
+  src: string
+}
+
+const { href, title = 'Generic Movie', src }: Props = Astro.props
+---
+
+<a
+  href={href}
+  target='_blank'
+  rel='noopener noreferrer'
+  class='w-full h-full grid place-content-center'
+  title={title}
+  aria-label={title}
+>
+  <video
+    src={src}
+    autoplay
+    style='width: 100%; height: 100%;'
+    muted
+    loop
+    playsinline
+    preload='auto'
+    class='object-cover w-full h-full rounded'
+  >
+  </video>
+</a>
diff --git a/src/movies/bitwise-liminal.astro b/src/movies/bitwise-liminal.astro
index a37b32e..04ea56d 100644
--- a/src/movies/bitwise-liminal.astro
+++ b/src/movies/bitwise-liminal.astro
@@ -1,20 +1,9 @@
-<a
-  href='https://killedbyapixel.github.io/TinyCode/256B/BitwiseLiminal/'
-  target='_blank'
-  rel='noopener noreferrer'
-  class='block w-full h-full'
-  title='Bitwise Liminal by KilledByAPixel'
->
-  <video
-    src='/movies/bitwise_liminal.webm'
-    autoplay
-    style='width: 100%; height: 100%'
-    muted
-    loop
-    playsinline
-    preload='auto'
-    class='object-cover w-full h-full'
-    id='animation'
-  >
-  </video>
-</a>
+---
+import Movie from './Movie.astro'
+
+const href = 'https://killedbyapixel.github.io/TinyCode/256B/BitwiseLiminal/'
+const title = 'Bitwise Liminal by KilledByAPixel'
+const src = '/movies/bitwise_liminal.webm'
+---
+
+<Movie href={href} title={title} src={src} />
diff --git a/src/movies/city-in-a-bottle.astro b/src/movies/city-in-a-bottle.astro
index bc119de..7ecda39 100644
--- a/src/movies/city-in-a-bottle.astro
+++ b/src/movies/city-in-a-bottle.astro
@@ -1,20 +1,9 @@
-<a
-  href='https://killedbyapixel.github.io/TinyCode/256B/CityInABottle/'
-  target='_blank'
-  rel='noopener noreferrer'
-  class='w-full h-full grid place-content-center'
-  title='City in a Bottle by KilledByAPixel'
->
-  <video
-    src='/movies/city_in_a_bottle.webm'
-    autoplay
-    style='width: 100%; height: 100%;'
-    muted
-    loop
-    playsinline
-    preload='auto'
-    class='object-cover w-full h-full rounded'
-    id='animation'
-  >
-  </video>
-</a>
+---
+import Movie from './Movie.astro'
+
+const href = 'https://killedbyapixel.github.io/TinyCode/256B/CityInABottle/'
+const title = 'City in a Bottle by KilledByAPixel'
+const src = '/movies/city_in_a_bottle.webm'
+---
+
+<Movie href={href} title={title} src={src} />
diff --git a/src/styles/index.css b/src/styles/index.css
index daa7e8f..b1b96be 100644
--- a/src/styles/index.css
+++ b/src/styles/index.css
@@ -2,9 +2,31 @@
     opacity: 0.75;
 }
 
+/* Reset by @souporserious */
+* {
+    box-sizing: border-box;
+    /* position: relative; */
+    min-width: 0;
+}
+
+body {
+    min-height: 100dvh;
+}
+
+h1,
+h2,
+h3,
+h4 {
+    text-wrap: balance;
+}
+
+p {
+    text-wrap: pretty;
+}
+
 @font-face {
     font-family: 'Rubik Doodle Subset';
-    src: url('/fonts/rubik-patched.woff2') format('woff2');
+    src: url('/fonts/rubik-doodle-shadow-latin-400-patched.woff2') format('woff2');
     font-weight: 400;
     font-style: normal;
 }
diff --git a/tailwind.config.ts b/tailwind.config.ts
index b75acfb..399c428 100644
--- a/tailwind.config.ts
+++ b/tailwind.config.ts
@@ -66,7 +66,6 @@ export default {
     'fill-[#777BB4]',
     'fill-[#1572B6]',
     'fill-[#339933]',
-    // 'indigo', 'yellow', 'amber', 'red', 'purple', 'pink',
     'bg-indigo-100',
     'bg-indigo-900',
     'text-indigo-800',
@@ -90,6 +89,8 @@ export default {
     'bg-pink-100',
     'bg-pink-900',
     'text-pink-800',
-    'text-pink-300'
+    'text-pink-300',
+    'animate-delay-100',
+    'animate-delay-200'
   ]
 }
diff --git a/tsconfig.json b/tsconfig.json
index 02819e8..06f251a 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -32,6 +32,9 @@
       ],
       "@imgs/*": [
         "src/imgs/*"
+      ],
+      "@media/*": [
+        "src/media/*"
       ]
     },
     "jsx": "preserve",