diff --git a/astro.config.ts b/astro.config.ts
index 291ae1e..8e4b9ec 100644
--- a/astro.config.ts
+++ b/astro.config.ts
@@ -38,15 +38,11 @@ export default defineConfig({
       workbox: {
         globDirectory: 'dist/client',
         globPatterns: [
-          '**/*.{woff2}',
-          'img/working_on/*.webp',
-          'pizarra.webp',
-          'img/this_is_fine.webp',
-          'movies/bitwise_liminal_compressed_240p.webm',
-          '_astro/*.module.*.js',
-          '_astro/client.*.js',
-          '_astro/hoisted.*.js',
-          '_astro/*icons.*.js'
+          // '**/*.{woff2}',
+          // '_astro/*.module.*.js',
+          // '_astro/client.*.js',
+          // '_astro/hoisted.*.js',
+          // '_astro/*icons.*.js'
         ],
         // Don't fallback on document based (e.g. `/some-page`) requests
         // This removes an errant console.log message from showing up.
diff --git a/package.json b/package.json
index cb0946d..95029d2 100644
--- a/package.json
+++ b/package.json
@@ -39,6 +39,8 @@
   },
   "type": "module",
   "devDependencies": {
+    "@fontsource/calistoga": "^5.0.19",
+    "@fontsource/fira-sans": "^5.0.19",
     "@midudev/tailwind-animations": "^0.0.7",
     "@typescript-eslint/eslint-plugin": "latest",
     "@typescript-eslint/parser": "latest",
diff --git a/public/img/desktop.webp b/public/img/desktop.webp
new file mode 100644
index 0000000..cc5c38d
Binary files /dev/null and b/public/img/desktop.webp differ
diff --git a/public/songs/strad.mp3 b/public/songs/strad.mp3
new file mode 100644
index 0000000..04830eb
Binary files /dev/null and b/public/songs/strad.mp3 differ
diff --git a/src/components/blog/blog-about.astro b/src/components/blog/blog-about.astro
index 384fc58..050e8cc 100644
--- a/src/components/blog/blog-about.astro
+++ b/src/components/blog/blog-about.astro
@@ -5,13 +5,13 @@ const ABOUT_STYLES = [
   'bg-slate-300/70',
   'dark:bg-slate-900/90',
   'dark:text-slate-300',
-  'rounded-sm',
+  'rounded-[10px]',
   'flex',
   'items-center',
   'justify-center',
   'font-bold',
   'text-black',
-  'font-rubik-doodle',
+  'font-primary',
   'w-full',
   'xl:h-full',
   'transition-all',
diff --git a/src/components/blog/last-entries.tsx b/src/components/blog/last-entries.tsx
index 7c9e7ed..5a73cfd 100644
--- a/src/components/blog/last-entries.tsx
+++ b/src/components/blog/last-entries.tsx
@@ -4,12 +4,12 @@ const LAST_ENTRIES_STYLES = [
   'bg-slate-300/80',
   'dark:bg-slate-900/90',
   'dark:text-slate-300',
-  'rounded-sm',
+  'rounded-[10px]',
   'flex',
   'flex-col',
   'p-2',
   'font-bold',
-  'font-rubik-doodle',
+  'font-primary',
   'w-full',
   'h-full',
   'transition-all',
@@ -19,7 +19,8 @@ const LAST_ENTRIES_STYLES = [
   'text-slate-900',
   'dark:text-slate-300',
   'py-4',
-  'px-2'
+  'px-2',
+  'min-h-[25rem]'
 ].join(' ')
 
 import { entries } from '@data/blog.json'
@@ -85,7 +86,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='xl:grid xl:grid-cols-[1fr_5fr] flex flex-col gap-5 w-full h-full p-2'>
+      <ul class='flex flex-col gap-5 w-full h-full p-2'>
         {entries
           .filter(
             (entry) => entry.active !== 'false' && entry.date !== 'Coming soon'
@@ -100,12 +101,12 @@ export default function LastEntries({ lang = 'en' }: { lang?: string }) {
           .map((entry, index) => {
             return (
               <Fragment key={index}>
-                <li class='font-averia uppercase text-sm xl:text-base text-center rounded-sm xl:h-full dark:text-emerald-100 text-emerald-950 items-center flex w-full'>
+                {/* <li class='font-secondary uppercase text-sm xl:text-base text-center rounded-[10px] xl:h-full dark:text-emerald-100 text-emerald-950 items-center flex w-full'>
                   <span class='grow dark:bg-emerald-300/60 bg-emerald-800/60 p-2 rounded'>
                     {entry.date}
                   </span>
-                </li>
-                <li class='font-averia uppercase text-sm xl:text-base py-2 px-2 rounded-sm cursor-pointer hover:bg-emerald-300/40 border-emerald-200 transition-all ease-in-out flex flex-col gap-2'>
+                </li> */}
+                <li class='font-secondary uppercase text-sm xl:text-base py-2 px-2 rounded-[10px] cursor-pointer hover:bg-emerald-300/40 border-emerald-200 transition-all ease-in-out flex flex-col gap-2'>
                   <a
                     href={`${lang === 'en' ? entry.href : entry.hrefEs}`}
                     class='h-full'
@@ -121,6 +122,9 @@ export default function LastEntries({ lang = 'en' }: { lang?: string }) {
                     </div>
                     <Badges badges={entry.tags} />
                   </a>
+                  <span class='grow dark:bg-emerald-300/60 bg-emerald-800/60 p-2 rounded'>
+                    {entry.date}
+                  </span>
                 </li>
               </Fragment>
             )
diff --git a/src/components/boxes/box.astro b/src/components/boxes/box.astro
index 957b50e..341fbe1 100644
--- a/src/components/boxes/box.astro
+++ b/src/components/boxes/box.astro
@@ -13,7 +13,7 @@ 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}`
+  class=`bg-slate-400/90 dark:bg-slate-900/95 rounded-[10px] flex items-center justify-center font-bold dark:text-slate-300 font-primary 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
index d534337..aca111a 100644
--- a/src/components/boxes/hbox.astro
+++ b/src/components/boxes/hbox.astro
@@ -17,7 +17,8 @@ const { href, title } = props
   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}`
+  id='card'
+  class=`card bg-slate-400/90 dark:bg-slate-900/95 rounded-[10px] flex items-center justify-center font-bold dark:text-slate-300 font-primary 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 da79fa8..2169f23 100644
--- a/src/components/featured-and-projects/about.astro
+++ b/src/components/featured-and-projects/about.astro
@@ -5,13 +5,13 @@ const ABOUT_STYLES = [
   'bg-slate-300/70',
   'dark:bg-slate-900/90',
   'dark:text-slate-300',
-  'rounded-sm',
+  'rounded-[10px]',
   'flex',
   'items-center',
   'justify-center',
   'font-bold',
   'text-black',
-  'font-rubik-doodle',
+  'font-primary',
   'w-full',
   'xl:h-full',
   'transition-all',
diff --git a/src/components/featured-and-projects/icons.tsx b/src/components/featured-and-projects/icons.tsx
index f71871d..f168a1d 100644
--- a/src/components/featured-and-projects/icons.tsx
+++ b/src/components/featured-and-projects/icons.tsx
@@ -261,3 +261,22 @@ export function DiscordColorLogo() {
     </svg>
   )
 }
+
+export function SimpleLeft({ extraClasses = '' }: { extraClasses?: string }) {
+  return (
+    <svg
+      viewBox='0 0 512 512'
+      xmlns='http://www.w3.org/2000/svg'
+      class={`w-4 h-4 ${extraClasses}`}
+    >
+      <title />
+      <g data-name='1' id='_1'>
+        <path d='M353,450a15,15,0,0,1-10.61-4.39L157.5,260.71a15,15,0,0,1,0-21.21L342.39,54.6a15,15,0,1,1,21.22,21.21L189.32,250.1,363.61,424.39A15,15,0,0,1,353,450Z' />
+      </g>
+    </svg>
+  )
+}
+
+export function SimpleRight() {
+  return <SimpleLeft extraClasses='rotate-180' />
+}
diff --git a/src/components/featured-and-projects/projects.tsx b/src/components/featured-and-projects/projects.tsx
index f96249c..e5caf4e 100644
--- a/src/components/featured-and-projects/projects.tsx
+++ b/src/components/featured-and-projects/projects.tsx
@@ -16,14 +16,14 @@ const PROJECT_STYLES: string = [
   'col-span-6',
   'row-span-4',
   'bg-emerald-300/80',
-  'rounded-sm',
+  'rounded-[10px]',
   'flex',
   'xl:flex-row ',
   'gap-3',
   'items-center',
   'justify-center',
   'font-bold',
-  'font-rubik-doodle',
+  'font-primary',
   'w-full',
   'h-72',
   'xl:h-full',
@@ -48,7 +48,7 @@ type ResourcesProps = {
   lang?: string
 }
 
-import { DoubleLeft, DoubleRight } from './icons'
+// import { SimpleLeft, SimpleRight } from './icons'
 
 import simpleIcons, { type toExportType } from '@components/icons/simple-icon'
 
@@ -64,7 +64,7 @@ function SimpleIcon(key: string) {
     return (
       <div className='flex flex-col items-center gap-1 mx-2'>
         <Icon />
-        <span className='text-xs font-averia font-bold lowercase'>
+        <span className='text-xs font-secondary font-bold lowercase'>
           {key.split(' ').at(0)}
         </span>
       </div>
@@ -73,15 +73,16 @@ function SimpleIcon(key: string) {
   return h('fragment', {})
 }
 
-const BUTTONS_STYLES = [
-  'absolute',
-  'bg-cyan-300',
-  'rounded-md',
-  'hidden xl:flex',
-  'items-center',
-  'p-1',
-  'shadow-md shadow-black/90'
-].join(' ')
+// const BUTTONS_STYLES = [
+//   'absolute',
+//   'bg-cyan-300',
+//   'rounded-full',
+//   'hidden xl:flex',
+//   'items-center',
+//   'px-2',
+//   'py-1',
+//   'shadow-md shadow-black/90'
+// ].join(' ')
 
 function IndexPicker({ n, reference }: { n: number; reference: any }) {
   function goToIndex(i: number) {
@@ -124,60 +125,58 @@ function ImageCarousel({ images }: { images: string[] }) {
   )
 }
 
-const DoubleLeftButton = ({ _f }: { _f: () => void }) => (
-  <div className={`bottom-1 left-1 ${BUTTONS_STYLES}`}>
-    <button onClick={_f} title={'iterate over'}>
-      <DoubleLeft />
-    </button>
-  </div>
-)
+// const DoubleLeftButton = ({ _f }: { _f: () => void }) => (
+//   <div className={`bottom-1 left-1 ${BUTTONS_STYLES}`}>
+//     <button onClick={_f} title={'iterate over'}>
+//       <SimpleLeft />
+//     </button>
+//   </div>
+// )
 
-const DoubleRightButton = ({ _f }: { _f: () => void }) => (
-  <div className={`bottom-1 right-1 ${BUTTONS_STYLES}`}>
-    <button onClick={_f} title={'iterate over'}>
-      <DoubleRight />
-    </button>
-  </div>
-)
+// const DoubleRightButton = ({ _f }: { _f: () => void }) => (
+//   <div className={`bottom-1 right-1 ${BUTTONS_STYLES}`}>
+//     <button onClick={_f} title={'iterate over'}>
+//       <SimpleRight />
+//     </button>
+//   </div>
+// )
 
 function ResourceCard({
   project,
   lang,
-  i,
-  n
+  i
 }: {
   project: (typeof data)[number] | undefined
   lang: string
   i: number
-  n: number
 }) {
-  const goRight = () => {
-    index.value++
-    if (index.value > data.length - 1) index.value = 0
-    // insert the 'xl:animate-fade-in-left' class
-    const el = document.querySelector('#project-card')
-    el?.classList.add('xl:animate-fade-in-left')
-    el?.addEventListener('animationend', () => {
-      el?.classList.remove('xl:animate-fade-in-left')
-    })
-    imagesIndex.value = 0
-    cooldown.value = COOLDOWN_TIME
-  }
-  const goLeft = () => {
-    index.value--
-    if (index.value < 0) index.value = data.length - 1
-    // insert the 'xl:animate-fade-in-left' class
-    const el = document.querySelector('#project-card')
-    el?.classList.add('xl:animate-fade-in-left')
-    el?.addEventListener('animationend', () => {
-      el?.classList.remove('xl:animate-fade-in-left')
-    })
-    imagesIndex.value = 0
-    cooldown.value = COOLDOWN_TIME
-  }
+  // const goRight = () => {
+  //   index.value++
+  //   if (index.value > data.length - 1) index.value = 0
+  //   // insert the 'xl:animate-fade-in-left' class
+  //   const el = document.querySelector('#project-card')
+  //   el?.classList.add('xl:animate-fade-in-left')
+  //   el?.addEventListener('animationend', () => {
+  //     el?.classList.remove('xl:animate-fade-in-left')
+  //   })
+  //   imagesIndex.value = 0
+  //   cooldown.value = COOLDOWN_TIME
+  // }
+  // const goLeft = () => {
+  //   index.value--
+  //   if (index.value < 0) index.value = data.length - 1
+  //   // insert the 'xl:animate-fade-in-left' class
+  //   const el = document.querySelector('#project-card')
+  //   el?.classList.add('xl:animate-fade-in-left')
+  //   el?.addEventListener('animationend', () => {
+  //     el?.classList.remove('xl:animate-fade-in-left')
+  //   })
+  //   imagesIndex.value = 0
+  //   cooldown.value = COOLDOWN_TIME
+  // }
   return (
     <article className={PROJECT_STYLES} key={i} id='project-card'>
-      {i === 0 && <DoubleLeftButton _f={goLeft} />}
+      {/* {i === 0 && <DoubleLeftButton _f={goLeft} />} */}
       <div className='lg:w-1/2 xl:w-1/2 h-full grid place-content-center justify-items-center gap-4'>
         <div
           className='absolute top-2 left-2'
@@ -194,10 +193,10 @@ function ResourceCard({
             {lang === 'es' ? 'Destacado' : 'Featured'}
           </span>
         )}
-        <p className='font-bold font-averia dark:text-slate-200 text-xs xl:text-base max-w-[400px] text-balance'>
+        <p className='font-bold font-secondary dark:text-slate-200 text-xs xl:text-base max-w-[400px] text-balance'>
           {project?.description[lang as 'es' | 'en']}
         </p>
-        <ul className='flex gap-1 [&>li]:font-thin [&>li>a>img]:border-2 [&>li>a>img]:dark:border-amber-300 [&>li>a>img]:border-amber-950 [&>li>a>img]:rounded-sm flex-wrap'>
+        <ul className='flex gap-1 [&>li]:font-thin [&>li>a>img]:border-2 [&>li>a>img]:dark:border-amber-300 [&>li>a>img]:border-amber-950 [&>li>a>img]:rounded-[10px] flex-wrap'>
           {project?.stack?.map((tech, index) => (
             <li key={index}>{SimpleIcon(tech)}</li>
           ))}
@@ -206,7 +205,7 @@ function ResourceCard({
           {project?.repository && (
             <a
               href={project.repository}
-              className='border-b-2 font-averia text-sm xl:text-base'
+              className='border-b-2 font-secondary text-sm xl:text-base'
               target='_blank'
               rel='noopener noreferrer'
             >
@@ -216,7 +215,7 @@ function ResourceCard({
           {project?.demo && (
             <a
               href={project.demo}
-              className='border-b-2 font-averia text-sm xl:text-base'
+              className='border-b-2 font-secondary text-sm xl:text-base'
               target='_blank'
               rel='noopener noreferrer'
             >
@@ -231,7 +230,7 @@ function ResourceCard({
           {project?.images && <ImageCarousel images={project.images} />}
         </div>
       )}
-      {i === n - 1 && <DoubleRightButton _f={goRight} />}
+      {/* {i === n - 1 && <DoubleRightButton _f={goRight} />} */}
       <IndexPicker n={concatedData.length} reference={index} />
     </article>
   )
@@ -300,9 +299,7 @@ export default function Resources({ n = 1, lang = 'en' }: ResourcesProps) {
     <>
       {Array.from(Array(n).keys()).map((i) => {
         const project = concatedData.at((i + index.value) % data.length)
-        return (
-          <ResourceCard project={project} lang={lang} i={i} n={n} key={i} />
-        )
+        return <ResourceCard project={project} lang={lang} i={i} key={i} />
       })}
     </>
   )
diff --git a/src/components/featured-and-projects/resources.tsx b/src/components/featured-and-projects/resources.tsx
index f369bed..f79459d 100644
--- a/src/components/featured-and-projects/resources.tsx
+++ b/src/components/featured-and-projects/resources.tsx
@@ -3,7 +3,7 @@ import { data } from '@data/resources.json'
 const RESOURCE_STYLES: string = [
   'col-span-2',
   'row-span-4',
-  'rounded-sm',
+  'rounded-[10px]',
   'shadow-[0_0_0.1rem_rgb(8_51_68)]', // rgb(8, 51, 68)
   'flex',
   'xl:flex-col',
@@ -11,7 +11,7 @@ const RESOURCE_STYLES: string = [
   'items-center',
   'justify-center',
   'font-bold',
-  'font-rubik-doodle',
+  'font-primary',
   'w-full',
   'xl:h-full',
   'h-16',
@@ -40,8 +40,8 @@ import { DoubleUp, DoubleDown, DoubleLeft, DoubleRight } from './icons'
 
 const BUTTONS_STYLES = [
   'absolute',
-  'bg-cyan-300',
-  'rounded-md',
+  'bg-white',
+  'rounded-full',
   'flex',
   'flex-wrap',
   'items-center',
diff --git a/src/components/icons/icon.astro b/src/components/icons/icon.astro
index c550777..9181941 100644
--- a/src/components/icons/icon.astro
+++ b/src/components/icons/icon.astro
@@ -23,7 +23,7 @@ const { svg, hex = '#000', href = '', title = 'Generic Icon' } = Astro.props
         set:html={svg}
         fill={hex}
       />
-      <span class='text-xs font-averia ml-2'>
+      <span class='text-xs font-secondary ml-2'>
         {title === 'Curriculum Vitae' ? 'CV' : title}
       </span>
     </a>
diff --git a/src/components/loaders/ThreeDots.astro b/src/components/loaders/ThreeDots.astro
new file mode 100644
index 0000000..e5cd68f
--- /dev/null
+++ b/src/components/loaders/ThreeDots.astro
@@ -0,0 +1,54 @@
+<style>
+  .loader {
+    --s: 25px;
+    --g: 5px;
+
+    width: calc(3 * (1.353 * var(--s) + var(--g)));
+    display: grid;
+    justify-items: end;
+    aspect-ratio: 3;
+    overflow: hidden;
+    --_m: linear-gradient(90deg, #0000, #000 15px calc(100% - 15px), #0000);
+    -webkit-mask: var(--_m);
+    mask: var(--_m);
+  }
+  .loader:before {
+    content: '';
+    width: 200%;
+    background: linear-gradient(90deg, #ff1818 50%, #0000 0),
+      conic-gradient(
+        from -90deg at var(--s) calc(0.353 * var(--s)),
+        #fff 135deg,
+        #666 0 270deg,
+        #aaa 0
+      );
+    background-blend-mode: multiply;
+    --_m: linear-gradient(
+        to bottom right,
+        #0000 calc(0.25 * var(--s)),
+        #000 0 calc(100% - calc(0.25 * var(--s)) - 1.414 * var(--g)),
+        #0000 0
+      ),
+      conic-gradient(
+        from -90deg at right var(--g) bottom var(--g),
+        #000 90deg,
+        #0000 0
+      );
+    -webkit-mask: var(--_m);
+    mask: var(--_m);
+    background-size:
+      calc(100% / 3) 100%,
+      calc(100% / 6) 100%;
+    -webkit-mask-size: calc(100% / 6) 100%;
+    mask-size: calc(100% / 6) 100%;
+    -webkit-mask-composite: source-in;
+    mask-composite: intersect;
+    animation: l10 1s infinite linear;
+  }
+  @keyframes l10 {
+    to {
+      transform: translate(calc(100% / 3));
+    }
+  }
+</style>
+<div class='loader'></div>
diff --git a/src/components/main/ReloadPrompt.astro b/src/components/main/ReloadPrompt.astro
index d972afb..b855a9c 100644
--- a/src/components/main/ReloadPrompt.astro
+++ b/src/components/main/ReloadPrompt.astro
@@ -3,8 +3,8 @@
   <div class='message'>
     <span id='toast-message'></span>
   </div>
-  <button id='pwa-refresh'> Reload</button>
-  <button id='pwa-close'> Close</button>
+  <button id='pwa-refresh'>Reload</button>
+  <button id='pwa-close'>Close</button>
 </div>
 
 <style>
@@ -21,6 +21,7 @@
     text-align: left;
     box-shadow: 3px 4px 5px 0 #8885;
     background-color: #f1f1f1;
+    font-family: 'Fira Sans', sans-serif;
   }
   #pwa-toast .message {
     margin-bottom: 8px;
diff --git a/src/components/main/about-me-card.astro b/src/components/main/about-me-card.astro
index b20302e..fc82aff 100644
--- a/src/components/main/about-me-card.astro
+++ b/src/components/main/about-me-card.astro
@@ -22,13 +22,15 @@ const { lang = 'en' }: Props = Astro.props
     }
   </style>
   <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'>
+    <h1
+      class='dark:text-emerald-300 text-emerald-950 text-2xl xl:text-3xl uppercase'
+    >
       {lang === 'en' ? 'Get To Know Me' : 'Conóceme'}
     </h1>
     <OpenToWork lang={lang} />
   </header>
   <div
-    class='flex items-center p-3 justify-around w-full font-averia xl:text-lg text-sm relative'
+    class='flex items-center p-3 justify-around w-full font-secondary xl:text-lg text-sm relative'
   >
     <ul class='w-full text-center p-2 gap-1.5 flex flex-col [&_p]:text-balance'>
       <li>
@@ -42,7 +44,7 @@ const { lang = 'en' }: Props = Astro.props
             href='https://www.eafit.edu.co/'
             rel='noopener noreferrer'
             target='_blank'
-            class='text-slate-50 dark:text-slate-800 inline dark:bg-blue-100 bg-blue-800 px-1 rounded-sm w-fit'
+            class='text-slate-50 dark:text-slate-800 inline dark:bg-blue-100 bg-blue-800 px-1.5 py-0.5 rounded-[10px] w-fit'
           >
             {lang === 'en' ? 'EAFIT University' : 'la Universidad EAFIT'}
           </a>
@@ -52,14 +54,14 @@ const { lang = 'en' }: Props = Astro.props
         <p>
           {
             lang === 'en'
-              ? 'Currently working as part time Backend Developer at'
-              : 'Actualmente trabajo como Desarrollador Backend de medio tiempo en'
+              ? 'Currently building my experience as part time Backend Developer at'
+              : 'Actualmente construyo mi experiencia como Desarrollador Backend de tiempo parcial en'
           }
           <a
             href='https://www.linkedin.com/showcase/dium-team/about/'
             rel='noopener noreferrer'
             target='_blank'
-            class='text-slate-50 dark:text-slate-800 inline dark:bg-emerald-100 bg-emerald-800 px-1 rounded-sm w-fit'
+            class='text-slate-50 dark:text-slate-800 inline dark:bg-emerald-100 bg-emerald-800 px-1.5 py-0.5 rounded-[10px] w-fit'
           >
             Dium
           </a>
diff --git a/src/components/main/background.astro b/src/components/main/background.astro
index eb52cc6..518ef35 100644
--- a/src/components/main/background.astro
+++ b/src/components/main/background.astro
@@ -1,6 +1,7 @@
 <style>
   .background {
-    background-image: url('/pizarra.webp');
+    /* background-image: url('/pizarra.webp'); */
+    background-color: #222831;
     min-height: 100%;
     width: 100vw;
     background-position: center;
@@ -13,4 +14,4 @@
   }
 </style>
 
-<div class='background blur-sm dark:blur-[1.5px]'></div>
+<div class='background'></div>
diff --git a/src/components/main/bento.astro b/src/components/main/bento.astro
index f984b4e..82d4e34 100644
--- a/src/components/main/bento.astro
+++ b/src/components/main/bento.astro
@@ -1,5 +1,5 @@
 <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 min-h-[90dvh]'
+  class='flex flex-col xl:grid items-center justify-center xl:h-[95dvh] w-[95dvw] lg:w-[85dvw] rounded-[10px] auto-cols-auto grid-cols-6 grid-rows-6 gap-2 px-2 py-8 xl:px-0 xl:py-0 min-h-[90dvh]'
 >
   <slot />
 </section>
diff --git a/src/components/main/buttons.astro b/src/components/main/buttons.astro
index 62e49b3..3b59971 100644
--- a/src/components/main/buttons.astro
+++ b/src/components/main/buttons.astro
@@ -1,21 +1,22 @@
 ---
 interface Props {
   href?: string
+  rounded?: boolean
 }
 
-const { href }: Props = Astro.props
+const { href, rounded = true }: Props = Astro.props
 
 const BUTTONS_STYLES = [
   'col-span-1 xl:col-span-2',
   'row-span-1',
   'gap-2',
-  'rounded-sm',
+  rounded && 'rounded-[10px]',
   'shadow-[0_0_0.15rem_rgb(8_51_68)]',
   'flex',
   'items-center',
   'justify-around',
   'text-slate-950',
-  'font-rubik-doodle',
+  'font-primary',
   'w-full',
   'xl:h-full',
   'transition-all',
@@ -24,12 +25,16 @@ const BUTTONS_STYLES = [
   'dark:text-slate-100',
   'bg-slate-300/80',
   'p-2'
+  // 'card'
 ].join(' ')
 
 const BUTTON_STYLES = [
   'dark:hover:text-emerald-300',
   'hover:text-emerald-900',
-  'cursor-pointer'
+  'cursor-pointer',
+  'flex',
+  'flex-col',
+  'items-center'
 ].join(' ')
 
 import { siGithub, siGooglecardboard } from 'simple-icons'
@@ -38,8 +43,8 @@ import Home from '@components/icons/home.astro'
 import Moon from '@components/icons/moon.astro'
 import Sun from '@components/icons/sun.astro'
 import Translator from '@components/icons/translator.astro'
-import Shuffle from '@components/icons/shuffle.astro'
-import GoBack from '@components/icons/go-back.astro'
+// import Shuffle from '@components/icons/shuffle.astro'
+// import GoBack from '@components/icons/go-back.astro'
 
 const BOARD_BUTTON_STYLE = import.meta.env.DEV ? 'block' : 'hidden'
 
@@ -56,9 +61,15 @@ const SVGS_STYLES = [
 
 <article class={BUTTONS_STYLES}>
   <!-- THEME SWITCH -->
-  <button id='theme-toggle' type='button' title='Switch dark/light theme'>
+  <button
+    id='theme-toggle'
+    type='button'
+    title='Switch dark/light theme'
+    class='flex flex-col items-center group'
+  >
     <Moon class={`${SVGS_STYLES} hidden`} id='theme-toggle-dark-icon' />
     <Sun class={`${SVGS_STYLES} hidden`} id='theme-toggle-light-icon' />
+    <span class='text-xs group-hover:text-emerald-300'> switch theme</span>
   </button>
   <!-- LANGUAGE SWITCH -->
   <a
@@ -68,36 +79,23 @@ const SVGS_STYLES = [
     href={href}
   >
     <Translator class={SVGS_STYLES} />
+    <span class='text-xs'>en/es</span>
   </a>
   <!-- HOME OR RANDOM PLACE -->
   <button class={`${BUTTON_STYLES} hidden`} title='go home' id='home-button'>
     <Home class={SVGS_STYLES} />
-  </button>
-  <button
-    class={`${BUTTON_STYLES} hidden`}
-    title='Go to a random page'
-    id='random-place-button'
-  >
-    <Shuffle class={SVGS_STYLES} />
-  </button>
-  <!-- GO BACK -->
-  <button
-    class={`${BUTTON_STYLES}`}
-    title='Go back'
-    id='go-back-button'
-    onclick='window.history.back()'
-  >
-    <GoBack class={SVGS_STYLES} />
+    <span class='text-xs'>home</span>
   </button>
   <!-- SOURCE CODE -->
   <a
     href='https://github.com/jamerrq/jamerrq.dev'
     target='_blank'
     rel='noopener noreferrer'
-    class='dark:hover:text-emerald-300 hover:text-emerald-900'
+    class='dark:hover:text-emerald-300 hover:text-emerald-900 flex flex-col gap-1 items-center cursor-pointer'
     title='Source code on GitHub'
   >
     <svg class={SVGS_STYLES} set:html={siGithub.svg} />
+    <span class='text-xs'>source code</span>
   </a>
   <!-- BOARD -->
   <a
@@ -106,5 +104,6 @@ const SVGS_STYLES = [
     title='Go to the board'
   >
     <svg class={SVGS_STYLES} set:html={siGooglecardboard.svg} />
+    <span class='text-xs'>board</span>
   </a>
 </article>
diff --git a/src/components/main/footer.astro b/src/components/main/footer.astro
index a0c3960..e98475f 100644
--- a/src/components/main/footer.astro
+++ b/src/components/main/footer.astro
@@ -25,7 +25,7 @@ import { siAstro, siPreact, siTailwindcss, siMdx, siBun } from 'simple-icons'
   }
 </style>
 
-<footer class='font-averia'>
+<footer class='font-secondary'>
   <span class='text-xs xl:text-xl'>Powered by</span>
   <svg
     class='w-4 h-4 md:w-6 md:h-6 xl:w-8 xl:h-8 inline'
diff --git a/src/components/main/project.astro b/src/components/main/project.astro
index f7482ba..2f186ac 100644
--- a/src/components/main/project.astro
+++ b/src/components/main/project.astro
@@ -36,15 +36,15 @@ import { Image } from 'astro:assets'
 ---
 
 <li
-  class='grid justify-items-center items-center gap-1 [&>*]:text-center relative [&>*]:rounded-sm [&>span]:text-sm [&>span]:xl:text-base'
+  class='grid justify-items-center items-center gap-1 [&>*]:text-center relative [&>*]:rounded-[10px] [&>span]:text-sm [&>span]:xl:text-base'
 >
   <div
-    class='absolute bottom-0 right-2 font-averia text-xs dark:bg-emerald-700 bg-emerald-500 dark:text-emerald-100 text-emerald-950 px-1 shadow shadow-black/90'
+    class='absolute bottom-0 right-2 font-secondary text-xs dark:bg-emerald-700 bg-emerald-500 dark:text-emerald-100 text-emerald-950 px-1 shadow shadow-black/90'
   >
     <!-- {project?.time}+ {lang === 'en' ? 'months' : 'meses'} -->
   </div>
   <h1
-    class='text-sm xl:text-base font-rubik-doodle dark:text-emerald-100 text-emerald-950 bg-emerald-400 dark:bg-emerald-900 px-2 py-1 shadow shadow-black/90'
+    class='text-sm xl:text-base font-primary dark:text-emerald-100 text-emerald-950 bg-emerald-400 dark:bg-emerald-900 px-2 py-1 shadow shadow-black/90'
   >
     {lang === 'en' ? project?.title.en : project?.title.es}
   </h1>
@@ -74,7 +74,7 @@ import { Image } from 'astro:assets'
           })
         }
       </div>
-      <span class='font-averia'>
+      <span class='font-secondary'>
         Demo: {
           project?.preview ? '' : lang === 'en' ? 'Coming soon' : 'Próximamente'
         }
diff --git a/src/components/main/responsive-container.astro b/src/components/main/responsive-container.astro
index 36d50d0..45a92ba 100644
--- a/src/components/main/responsive-container.astro
+++ b/src/components/main/responsive-container.astro
@@ -17,7 +17,7 @@ import BlurBackground from './blur-background.astro'
         face='smile-big'
         clothesColor='#34d399'
       />
-      <p class='text-base font-averia'>
+      <p class='text-base font-secondary'>
         The responsive design for this page is still in progress.
         <br />
         I invite you to visit it from a computer or a tablet to get the best experience.
diff --git a/src/components/main/socials.astro b/src/components/main/socials.astro
index 5677e0d..277b50f 100644
--- a/src/components/main/socials.astro
+++ b/src/components/main/socials.astro
@@ -18,7 +18,7 @@ const socials = getIconsFn(lang)
 
 <Box
   title='Contact Section'
-  otherStyles='xl:col-span-2 xl:row-span-2 justify-between min-h-48'
+  otherStyles='xl:col-span-2 xl:row-span-2 justify-around'
 >
   <header class='flex gap-2 dark:text-emerald-300 text-slate-950'>
     <p class='font-semibold text-3xl xl:text-4xl'>Contact Links</p>
@@ -26,13 +26,13 @@ const socials = getIconsFn(lang)
   </header>
   <div class='flex h-fit w-full items-center justify-center gap-2'>
     <span
-      class='font-bold font-averia text-sm xl:text-base text-center dark:text-cyan-100 text-cyan-950 dark:bg-emerald-950 bg-emerald-500 p-2 rounded shadow-sm shadow-black'
+      class='font-bold font-secondary text-sm xl:text-base text-center dark:text-cyan-100 text-cyan-950 dark:bg-emerald-950 bg-emerald-500 p-2 rounded shadow-sm shadow-black'
     >
       jamerrq@gmail.com
     </span>
     <button id='copyMailButton' aria-label='copy mail button' title='copy mail'>
       <Copy
-        class='w-8 h-8 dark:bg-emerald-300 bg-slate-900 fill-slate-300 dark:fill-slate-950 p-1 rounded cursor-pointer hover:scale-110 transition-all shadow-sm shadow-black'
+        class='w-8 h-8 dark:bg-emerald-300 bg-slate-900 fill-slate-300 dark:fill-slate-950 px-2 py-1 rounded cursor-pointer hover:scale-110 transition-all shadow-sm shadow-black'
       />
     </button>
   </div>
diff --git a/src/components/main/tech-stack.astro b/src/components/main/tech-stack.astro
index 2ea201e..2ebd1bc 100644
--- a/src/components/main/tech-stack.astro
+++ b/src/components/main/tech-stack.astro
@@ -19,9 +19,9 @@ import {
 const ICON_BLOCKS_STYLES = [
   'flex',
   'gap-2',
-  '[&>img]:rounded-sm',
+  '[&>img]:rounded-[10px]',
   'p-1',
-  'rounded-sm',
+  'rounded-[10px]',
   '[&_svg]:shadow',
   '[&_svg]:p-1',
   '[&_svg]:bg-white/50',
@@ -135,12 +135,11 @@ const SVGS_STYLES = ['w-6', 'h-6', 'xl:w-8', 'xl:h-8', 'hover:scale-110'].join(
       <svg class={SVGS_STYLES} set:html={siLinux.svg} fill={`#FE7A36`} />
     </div>
   </div>
-  <aside class='p-2 rounded-sm flex gap-2 justify-center items-center'>
+  <aside class='p-2 rounded-[10px] flex gap-2 justify-center items-center'>
     <span
-      class='font-bold text-sm xl:text-base dark:text-emerald-300 text-slate-900 font-averia'
+      class='font-bold text-sm xl:text-base dark:text-emerald-300 text-slate-900 font-secondary'
     >
-      <span class='-mt-5'> ❯</span>
-      {lang === 'en' ? 'Tap to see more' : 'Presiona para ver más'}
+      - {lang === 'en' ? 'Tap to see more' : 'Presiona para ver más'} -
     </span>
   </aside>
 </Hbox>
diff --git a/src/components/main/title.astro b/src/components/main/title.astro
index c5eb05b..b7f00b1 100644
--- a/src/components/main/title.astro
+++ b/src/components/main/title.astro
@@ -4,22 +4,36 @@ interface Props {
 }
 const { lang = 'en' }: Props = Astro.props
 
-import BitwiseLiminal from '@movies/bitwise-liminal.astro'
+// import BitwiseLiminal from '@movies/bitwise-liminal.astro'
 ---
 
+<style>
+  .title {
+    /* background: rgba(15, 23, 42, 0.25); */
+    box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
+    backdrop-filter: blur(5px);
+    -webkit-backdrop-filter: blur(5px);
+    border-radius: 10px;
+    border: 1px solid rgba(255, 255, 255, 0.18);
+
+    @media (prefers-color-scheme: light) {
+      background: rgb(255, 255, 255, 0.25);
+    }
+  }
+</style>
 <div
-  class='row-span-2 xl:col-span-2 title bg-transparent text-emerald-400 p-2 rounded w-full h-full flex items-center flex-row animate-blurred-fade-in relative'
+  class='bg-slate-500/70 dark:bg-slate-900/95 row-span-2 xl:col-span-2 title text-emerald-400 p-2 rounded w-full h-full flex items-center flex-row animate-blurred-fade-in relative card'
 >
   <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 dark:bg-gray-500/90 bg-gray-600/80 px-2 py-1 rounded'
+        class='font-primary font-semibold text-2xl xl:text-4xl px-2 py-1 rounded'
       >
         @jamerrq.dev
       </p>
     </a>
     <span
-      class='block font-averia text-sm rounded w-fit mx-auto px-1 py-0.5 text-center dark:bg-gray-500/90 bg-gray-600/80'
+      class='block font-secondary uppercase text-sm rounded w-fit mx-auto px-1 py-0.5 text-center'
     >
       Backend Dev
     </span>
@@ -28,7 +42,7 @@ import BitwiseLiminal from '@movies/bitwise-liminal.astro'
     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 rounded'
     id='animation-container'
   >
-    <BitwiseLiminal />
+    <!-- <BitwiseLiminal /> -->
   </div>
 </div>
 
diff --git a/src/components/main/working-on.astro b/src/components/main/working-on.astro
index b5276ac..07f0b16 100644
--- a/src/components/main/working-on.astro
+++ b/src/components/main/working-on.astro
@@ -7,16 +7,21 @@ interface Props {
 const { lang = 'en' }: Props = Astro.props
 
 import Box from '@components/boxes/box.astro'
-import WorkingOnTsx from './working-on.tsx'
+// import WorkingOnTsx from './working-on.tsx'
+
+import ThreeDots from '@components/loaders/ThreeDots.astro'
 ---
 
-<Box title="Projects I'm working on" otherStyles='xl:col-span-2 xl:row-span-4'>
+<Box
+  title="Projects I'm working on"
+  otherStyles='xl:col-span-2 xl:row-span-4 gap-4'
+>
   <header
     class='text-2xl xl:text-3xl flex gap-2 text-emerald-950 dark:text-emerald-300 items-center'
   >
     <p>
       <!-- Working on -->
-      {lang === 'en' ? 'Working on' : 'Trabajando en'}
+      {lang === 'en' ? 'Working On' : 'Trabajando En'}
     </p>
     <svg
       class='w-8 h-8 inline-flex shadow bg-white/50 p-1 rounded dark:bg-slate-900/80'
@@ -24,5 +29,46 @@ import WorkingOnTsx from './working-on.tsx'
       fill={`#${siGitkraken.hex}`}
     />
   </header>
-  <WorkingOnTsx lang={lang} client:only='preact' />
+  <!-- <WorkingOnTsx lang={lang} client:only='preact' /> -->
+  <span class='text-center px-3 [&_a]:text-emerald-300'>
+    <!-- Currently working on my presentation for the <a
+      href='https://holamundo.day/#speakers'
+      target='_blank'
+      rel='noopener noreferrer'>#HolaMundoDay</a
+    > event by <a
+      href='https://www.twitch.tv/mouredev'
+      target='_blank'
+      rel='noopener noreferrer'>@mouredev</a
+    > on May 7th, 2024. -->
+    {lang === 'en' ? '#HolaMundoDay Workshop' : 'Taller #HolaMundoDay'}
+  </span>
+  <span class='text-center'>
+    {
+      lang === 'en'
+        ? 'Open Source Contributions for beginners'
+        : 'Contribuciones al Código Libre para principiantes'
+    }
+  </span>
+  <span class='text-center'>
+    <!-- <a
+      href='https://holamundo.day/#speakers'
+      target='_blank'
+      rel='noopener noreferrer'
+      class='text-emerald-500 dark:text-emerald-300'
+    >
+      More info
+    </a> -->
+    <a
+      href='https://holamundo.day/#speakers'
+      target='_blank'
+      rel='noopener noreferrer'
+      class='text-emerald-500 dark:text-emerald-300 bg-gray-600 px-2 py-1 rounded dark:bg-slate-900/80 hover:bg-gray-700 dark:hover:bg-slate-900/70 transition-colors'
+    >
+      {lang === 'en' ? 'More info' : 'Más información'}
+    </a>
+  </span>
+  <ThreeDots />
+  <a href='/board'>
+    {lang === 'en' ? 'Preview (?)' : 'Vistazo (?)'}
+  </a>
 </Box>
diff --git a/src/components/main/working-on.tsx b/src/components/main/working-on.tsx
index 550f653..824cea0 100644
--- a/src/components/main/working-on.tsx
+++ b/src/components/main/working-on.tsx
@@ -17,17 +17,9 @@ import {
   siAmazondocumentdb
 } from 'simple-icons'
 
+// to have a better contrast with the background
 siMicrosoft.hex = siMicrosoftazure.hex
 
-const SVGS_STYLES = [
-  'w-7',
-  'h-7',
-  'xl:w-8',
-  'xl:h-8',
-  'hover:scale-110',
-  'shadow bg-white/80 p-1 rounded'
-].join(' ')
-
 interface ProjectCardProps {
   lang?: string
   project: {
@@ -52,12 +44,12 @@ function ProjectCard({ lang = 'en', project }: ProjectCardProps) {
   // get number of days since the project started
   const days = Math.floor((Date.now() - date.getTime()) / (1000 * 60 * 60 * 24))
   return (
-    <li class='grid justify-items-center items-center gap-1 [&>*]:text-center relative [&>*]:rounded-sm [&>span]:text-sm [&>span]:xl:text-base'>
-      <div class='absolute bottom-0 right-2 font-averia text-xs dark:bg-emerald-700 bg-emerald-500 dark:text-emerald-100 text-emerald-950 px-1 shadow shadow-black/90'>
+    <li class='grid justify-items-center items-center gap-1 [&>*]:text-center relative [&>*]:rounded-[10px] [&>span]:text-sm [&>span]:xl:text-base'>
+      <div class='absolute bottom-0 right-2 font-secondary text-xs dark:bg-emerald-700 bg-emerald-500 dark:text-emerald-100 text-emerald-950 px-1 shadow shadow-black/90'>
         {days}+ {lang === 'en' ? 'days' : 'días'}
       </div>
 
-      <h1 class='text-sm xl:text-base font-rubik-doodle dark:text-emerald-100 text-emerald-950 bg-emerald-500 dark:bg-emerald-900 px-2 py-1 shadow shadow-black/90'>
+      <h1 class='text-sm xl:text-base font-primary dark:text-emerald-100 text-emerald-950 bg-emerald-500 dark:bg-emerald-900 px-2 py-1 shadow shadow-black/90'>
         {lang === 'en' ? project?.title.en : project?.title.es}
       </h1>
       <section class='bg-transparent w-full flex'>
@@ -91,7 +83,7 @@ function ProjectCard({ lang = 'en', project }: ProjectCardProps) {
               return (
                 <svg
                   key={t}
-                  class={SVGS_STYLES}
+                  class='w-7 h-7 xl:w-8 xl:h-8 hover:scale-110 shadow bg-white/80 p-1 rounded'
                   // eslint-disable-next-line react/no-danger
                   dangerouslySetInnerHTML={{ __html: a.svg }}
                   fill={`#${a.hex}`}
@@ -101,7 +93,7 @@ function ProjectCard({ lang = 'en', project }: ProjectCardProps) {
             })}
           </div>
           {project.preview && (
-            <span class='font-averia hover:scale-105 ease-in-out transition-transform text-emerald-950 bg-white/50 dark:bg-white/10 px-2 py-1 rounded dark:text-emerald-300'>
+            <span class='font-secondary hover:scale-105 ease-in-out transition-transform text-emerald-950 bg-white/50 dark:bg-white/10 px-2 py-1 rounded dark:text-emerald-300'>
               {project?.preview ? (
                 <a
                   href={project.preview}
@@ -137,7 +129,7 @@ effect(() => {
 export default function WorkingOn({ lang = 'en' }) {
   return (
     <div class='h-full w-full gap-2' id='working-on-client'>
-      <ul class='flex gap-2 text-base flex-col justify-around h-full font-averia font-bold py-2'>
+      <ul class='flex gap-2 text-base flex-col justify-around h-full font-secondary font-bold py-2'>
         {Array.from({ length: 2 }, (_, i) => i + index.value).map((i) => (
           <ProjectCard
             lang={lang}
diff --git a/src/components/tech-stack/about-tech.astro b/src/components/tech-stack/about-tech.astro
index a57361f..dbab74d 100644
--- a/src/components/tech-stack/about-tech.astro
+++ b/src/components/tech-stack/about-tech.astro
@@ -15,7 +15,7 @@ const { lang = 'en' }: Props = Astro.props
     {lang === 'en' ? 'About' : 'Acerca de'}
   </h1>
   <div
-    class='flex flex-col items-center p-4 justify-around w-full font-averia text-sm xl:text-base gap-2'
+    class='flex flex-col items-center p-4 justify-around w-full font-secondary text-sm xl:text-base gap-2'
   >
     <p>
       {
diff --git a/src/components/tech-stack/dev-tools.astro b/src/components/tech-stack/dev-tools.astro
index f412d70..7e794ae 100644
--- a/src/components/tech-stack/dev-tools.astro
+++ b/src/components/tech-stack/dev-tools.astro
@@ -20,7 +20,7 @@ const { lang = 'en' }: Props = Astro.props
     <h1 class=''>Dev Tools</h1>
   </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'
+    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-[10px] [&_header]:text-amber-950 [&_header]:dark:text-amber-300'
   >
     <li>
       <header class='flex gap-2'>
@@ -28,7 +28,7 @@ const { lang = 'en' }: Props = Astro.props
         <!-- <p class='font-thin'>󰨞</p> -->
       </header>
       <section>
-        <ul class='flex gap-1 w-full flex-wrap p-1 rounded-sm'>
+        <ul class='flex gap-1 w-full flex-wrap p-1 rounded-[10px]'>
           {
             ides.map((tech: IconProps) => (
               <li>
@@ -46,7 +46,7 @@ const { lang = 'en' }: Props = Astro.props
       </header>
       <section class='flex'>
         <ul
-          class='flex gap-1 w-full flex-wrap [&>li>a>img]:border-2 p-1 rounded-sm'
+          class='flex gap-1 w-full flex-wrap [&>li>a>img]:border-2 p-1 rounded-[10px]'
         >
           {
             apis.map((tech: IconProps) => (
@@ -64,7 +64,7 @@ const { lang = 'en' }: Props = Astro.props
       </header>
       <section>
         <ul
-          class='flex gap-1 w-full flex-wrap [&>li>a>img]:border-2 p-1 rounded-sm'
+          class='flex gap-1 w-full flex-wrap [&>li>a>img]:border-2 p-1 rounded-[10px]'
         >
           {
             linters.map((tech: IconProps) => (
@@ -82,7 +82,7 @@ const { lang = 'en' }: Props = Astro.props
       </header>
       <section>
         <ul
-          class='flex gap-1 w-full flex-wrap [&>li>a>img]:border-2 p-1 rounded-sm'
+          class='flex gap-1 w-full flex-wrap [&>li>a>img]:border-2 p-1 rounded-[10px]'
         >
           {
             dvc.map((tech: IconProps) => (
@@ -103,7 +103,7 @@ const { lang = 'en' }: Props = Astro.props
       </header>
       <section class='flex gap-1'>
         <ul
-          class='flex gap-1 w-full flex-wrap [&>li>a>img]:border-2 p-1 rounded-sm'
+          class='flex gap-1 w-full flex-wrap [&>li>a>img]:border-2 p-1 rounded-[10px]'
         >
           {
             others.map((tech: IconProps) => (
diff --git a/src/components/tech-stack/os.astro b/src/components/tech-stack/os.astro
index 0fb7ffa..369fcfc 100644
--- a/src/components/tech-stack/os.astro
+++ b/src/components/tech-stack/os.astro
@@ -8,8 +8,9 @@ import { siLinux, siUbuntu } from 'simple-icons'
   title='My OS'
   href='https://releases.ubuntu.com/focal/'
   animated
-  otherStyles='xl:row-span-2 flex-col animate-delay-200'
+  otherStyles='xl:row-span-2 flex-col animate-delay-200 gap-1'
 >
+  <img src='/img/desktop.webp' alt='my desktop' class='w-2/3 rounded border' />
   <header class='flex gap-2 items-center text-3xl'>
     <h1>OS</h1>
     <svg
@@ -22,7 +23,7 @@ import { siLinux, siUbuntu } from 'simple-icons'
     />
   </header>
   <section
-    class='text-base font-averia flex flex-col justify-center items-center'
+    class='text-base font-secondary flex flex-col justify-center items-center'
   >
     <p>Ubuntu 20.04.6 LTS</p>
     <p>Focal Fossa</p>
diff --git a/src/components/tech-stack/testing.astro b/src/components/tech-stack/testing.astro
index d8ececb..f283689 100644
--- a/src/components/tech-stack/testing.astro
+++ b/src/components/tech-stack/testing.astro
@@ -22,7 +22,7 @@ const { lang = 'en' }: Props = Astro.props
     </h1>
   </header>
   <section
-    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'
+    class='xl:grid flex place-content-center gap-2 grid-cols-2 grid-rows-2 [&>a>img]:rounded-[10px] [&>a>img]:border-2 w-full justify-items-center'
   >
     {testing.map((icon: IconProps) => <TechIcon obj={icon} />)}
   </section>
diff --git a/src/components/tech-stack/title.astro b/src/components/tech-stack/title.astro
index be23e4e..f063910 100644
--- a/src/components/tech-stack/title.astro
+++ b/src/components/tech-stack/title.astro
@@ -13,10 +13,10 @@ const { lang = 'en' }: Props = Astro.props
   href={lang === 'en' ? '/' : '/es'}
 >
   <div
-    class='flex flex-col font-averia min-w-[50%]'
+    class='flex flex-col font-secondary min-w-[50%]'
     transition:name='tech-stack'
   >
-    <p class='font-semibold text-2xl font-rubik-doodle'>
+    <p class='font-semibold text-2xl font-primary'>
       {lang === 'en' ? 'Tech Stack' : 'Mi Stack'}
     </p>
     <p class='font-semibold text-balance text-sm xl:text-base'>
diff --git a/src/components/tech-stack/web-dev.astro b/src/components/tech-stack/web-dev.astro
index bbfe5db..304f6a9 100644
--- a/src/components/tech-stack/web-dev.astro
+++ b/src/components/tech-stack/web-dev.astro
@@ -34,7 +34,7 @@ const { lang = 'en' }: Props = Astro.props
         <h2>Backend</h2>
       </header>
       <section>
-        <ul class='flex gap-1 w-full flex-wrap p-1 rounded-sm'>
+        <ul class='flex gap-1 w-full flex-wrap p-1 rounded-[10px]'>
           {
             backend.map((tech) => (
               <li>
diff --git a/src/data/socials.ts b/src/data/socials.ts
index e76b556..4fa5bba 100644
--- a/src/data/socials.ts
+++ b/src/data/socials.ts
@@ -15,7 +15,7 @@ export default function getSocialIcons(lang = 'en') {
       hex: siGithub.hex
     },
     {
-      title: 'Linkedin',
+      title: 'LinkedIn',
       href: 'https://www.linkedin.com/in/jamerrq/',
       svg: siLinkedin.svg,
       hex: siLinkedin.hex
diff --git a/src/layouts/blog-layout.astro b/src/layouts/blog-layout.astro
index 77f4b44..82e8ce3 100644
--- a/src/layouts/blog-layout.astro
+++ b/src/layouts/blog-layout.astro
@@ -27,7 +27,7 @@ import Buttons from '@components/main/buttons.astro'
     <br />
     <header
       transition:name='blog-title'
-      class='flex font-averia text-slate-950 bg-[#BE7B72] dark:bg-[#FFFDD7] p-2 cursor-pointer font-bold'
+      class='flex font-secondary text-slate-950 bg-[#BE7B72] dark:bg-[#FFFDD7] p-2 cursor-pointer font-bold'
       onclick='window.history.back()'
     >
       <h1 class='-z-10'>
@@ -36,7 +36,7 @@ import Buttons from '@components/main/buttons.astro'
     </header>
     <br />
     <div
-      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-averia] [&_code]:[font-mono] [&_a]:underline [&_a]:[target=_blank] [&_pre]:p-2 [&_pre]:overflow-x-hidden'
+      class='[&>h1]:font-bold font-secondary 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-secondary] [&_code]:[font-mono] [&_a]:underline [&_a]:[target=_blank] [&_pre]:p-2 [&_pre]:overflow-x-hidden'
     >
       <slot />
     </div>
diff --git a/src/layouts/layout.astro b/src/layouts/layout.astro
index b194fc4..cbc74da 100644
--- a/src/layouts/layout.astro
+++ b/src/layouts/layout.astro
@@ -8,6 +8,8 @@ const { title, lang = 'en' }: Props = Astro.props
 
 // Fonts
 import '@fontsource/averia-serif-libre'
+import '@fontsource/calistoga'
+import '@fontsource/fira-sans'
 
 // Styles
 import '@styles/index.css'
@@ -25,18 +27,6 @@ import ReloadPrompt from '@components/main/ReloadPrompt.astro'
   <head>
     <SEO />
     <title>{title}</title>
-    <!-- Analytics by Umami -->
-    {
-      !import.meta.env.DEV && (
-        <script
-          is:inline
-          async
-          defer
-          data-website-id='69d89d94-e4e2-42cc-a3c7-c40048915156'
-          src='https://analytics.us.umami.is/umami.js'
-        />
-      )
-    }
     <ViewTransitions />
   </head>
   <body data-dev={import.meta.env.DEV} class='data-[dev]:debug-screens'>
@@ -45,6 +35,20 @@ import ReloadPrompt from '@components/main/ReloadPrompt.astro'
     <main class='min-h-[100dvh] grid place-content-center'>
       <slot />
     </main>
+    <script>
+      window.onmousemove = (e) => {
+        for (const card of document.getElementsByClassName(
+          'card'
+        ) as any as HTMLElement[]) {
+          const rect = card.getBoundingClientRect(),
+            x = e.clientX - rect.left,
+            y = e.clientY - rect.top
+
+          card.style.setProperty('--mouse-x', `${x}px`)
+          card.style.setProperty('--mouse-y', `${y}px`)
+        }
+      }
+    </script>
     <Scripts />
     <ReloadPrompt />
   </body>
diff --git a/src/pages/404.astro b/src/pages/404.astro
index 4d882ad..479ff59 100644
--- a/src/pages/404.astro
+++ b/src/pages/404.astro
@@ -59,10 +59,10 @@ import Container from '@components/main/container.astro'
   <main class='grid place-content-center bg-black [&>div>p]:text-balance'>
     <Container>
       <h1 class='text-emerald-300 text-2xl'>Page Not Found!</h1>
-      <p class='text-sm xl:text-base font-averia'>
+      <p class='text-sm xl:text-base font-secondary'>
         Sorry, the resource you are looking for does not exist (yet?).
       </p>
-      <p class='text-sm xl:text-base font-averia'>
+      <p class='text-sm xl:text-base font-secondary'>
         Please check the URL and try again or go back.
       </p>
       <div class='flex gap-2 text-emerald-300'>
diff --git a/src/pages/board.astro b/src/pages/board.astro
index c9d98c5..f6670cf 100644
--- a/src/pages/board.astro
+++ b/src/pages/board.astro
@@ -1,107 +1,155 @@
 ---
 import Layout from '@layouts/layout.astro'
+import Buttons from '@components/main/buttons.astro'
+
+import Page1 from '@slides/oss/page1.astro'
+
+// const dev = !import.meta.env.DEV
 ---
 
 <Layout title='Board - jamerrq.dev'>
   <style>
-    *,
-    *::before,
-    *::after {
-      box-sizing: border-box;
-      font-family: inherit;
+    .background {
+      --s: 100px; /* control the size */
+      --c1: #c3ccaf;
+      --c2: #67434f;
+
+      --_s: calc(2 * var(--s)) calc(2 * var(--s));
+      --_g: var(--_s) conic-gradient(at 40% 40%, #0000 75%, var(--c1) 0);
+      --_p: var(--_s) conic-gradient(at 20% 20%, #0000 75%, var(--c2) 0);
+      background:
+        calc(0.9 * var(--s)) calc(0.9 * var(--s)) / var(--_p),
+        calc(-0.1 * var(--s)) calc(-0.1 * var(--s)) / var(--_p),
+        calc(0.7 * var(--s)) calc(0.7 * var(--s)) / var(--_g),
+        calc(-0.3 * var(--s)) calc(-0.3 * var(--s)) / var(--_g),
+        conic-gradient(from 90deg at 20% 20%, var(--c2) 25%, var(--c1) 0) 0 0 /
+          var(--s) var(--s);
+      animation: m 3s infinite;
+      opacity: 0.9;
+    }
+    @keyframes m {
+      0% {
+        background-position:
+          calc(0.9 * var(--s)) calc(0.9 * var(--s)),
+          calc(-0.1 * var(--s)) calc(-0.1 * var(--s)),
+          calc(0.7 * var(--s)) calc(0.7 * var(--s)),
+          calc(-0.3 * var(--s)) calc(-0.3 * var(--s)),
+          0 0;
+      }
+      25% {
+        background-position:
+          calc(1.9 * var(--s)) calc(0.9 * var(--s)),
+          calc(-1.1 * var(--s)) calc(-0.1 * var(--s)),
+          calc(1.7 * var(--s)) calc(0.7 * var(--s)),
+          calc(-1.3 * var(--s)) calc(-0.3 * var(--s)),
+          0 0;
+      }
+      50% {
+        background-position:
+          calc(1.9 * var(--s)) calc(-0.1 * var(--s)),
+          calc(-1.1 * var(--s)) calc(0.9 * var(--s)),
+          calc(1.7 * var(--s)) calc(-0.3 * var(--s)),
+          calc(-1.3 * var(--s)) calc(0.7 * var(--s)),
+          0 0;
+      }
+      75% {
+        background-position:
+          calc(2.9 * var(--s)) calc(-0.1 * var(--s)),
+          calc(-2.1 * var(--s)) calc(0.9 * var(--s)),
+          calc(2.7 * var(--s)) calc(-0.3 * var(--s)),
+          calc(-2.3 * var(--s)) calc(0.7 * var(--s)),
+          0 0;
+      }
+      100% {
+        background-position:
+          calc(2.9 * var(--s)) calc(-1.1 * var(--s)),
+          calc(-2.1 * var(--s)) calc(1.9 * var(--s)),
+          calc(2.7 * var(--s)) calc(-1.3 * var(--s)),
+          calc(-2.3 * var(--s)) calc(1.7 * var(--s)),
+          0 0;
+      }
     }
 
-    body {
-      display: grid;
-      place-items: center;
-      height: 100vh;
-      margin: 0;
-      font-family: 'Rubik Subset', sans-serif;
-      color: #6ee7b7;
-      font-size: 5rem;
+    :root {
+      --bg-color: #020617;
+      --card-color: #1e293b;
     }
 
-    .background {
-      background-image: url('/pizarra.webp');
-      min-height: 100%;
-      width: 100vw;
-      background-position: center;
-      background-repeat: repeat;
-      position: fixed;
-      top: 0;
-      left: 0;
-      z-index: -50;
-      inset: 0;
-      filter: blur(10px);
+    .card {
+      background-color: rgba(255, 255, 255, 0.1);
+      border-radius: 10px;
+      cursor: pointer;
+      display: flex;
+      height: 260px;
+      flex-direction: column;
+      position: relative;
+      width: 300px;
     }
 
-    @font-face {
-      font-family: 'Rubik Subset';
-      src: url('/fonts/rubik-doodle-shadow-latin-400-patched.woff2')
-        format('woff2');
+    .card:hover::before {
+      opacity: 1;
     }
 
-    /* HTML: <div class="loader"></div> */
-    .loader {
-      width: fit-content;
-      font-weight: bold;
-      font-size: 20px;
-      background: radial-gradient(circle closest-side, #000 94%, #0000)
-        right/calc(200% - 1em) 100%;
-      animation: l24 1s infinite alternate linear;
-      background-color: #34d399;
-      border-radius: 0.5em;
-      padding: 0.25em 0.5em;
+    .card::before,
+    .card::after {
+      border-radius: inherit;
+      content: '';
+      height: 100%;
+      left: 0px;
+      opacity: 0;
+      position: absolute;
+      top: 0px;
+      transition: opacity 500ms;
+      width: 100%;
     }
 
-    .loader::before {
-      content: 'Checking your internet connection...';
-      color: #0000;
-      line-height: 1em;
-      background: inherit;
-      background-image: radial-gradient(circle closest-side, #fff 94%, #000);
-      -webkit-background-clip: text;
-      background-clip: text;
+    .card::before {
+      background: radial-gradient(
+        800px circle at var(--mouse-x) var(--mouse-y),
+        rgba(255, 255, 255, 0.06),
+        transparent 40%
+      );
+      z-index: 3;
     }
 
-    @keyframes l24 {
-      100% {
-        background-position: left;
-      }
+    .card::after {
+      background: radial-gradient(
+        600px circle at var(--mouse-x) var(--mouse-y),
+        rgba(255, 255, 255, 0.4),
+        transparent 40%
+      );
+      z-index: 1;
+    }
+
+    .card > .card-content {
+      background-color: var(--card-color);
+      border-radius: inherit;
+      display: flex;
+      flex-direction: column;
+      flex-grow: 1;
+      inset: 1px;
+      padding: 10px;
+      position: absolute;
+      z-index: 2;
     }
   </style>
   <body class='dark'>
-    <!-- <div class='background'></div> -->
-    <main>
-      <h1>You're offline</h1>
-      <a
-        href='https://killedbyapixel.github.io/TinyCode/256B/BitwiseLiminal/'
-        target='_blank'
-        rel='noopener noreferrer'
-        class='grid place-content-center'
-        title='Bitwise Liminal by KilledByAPixel'
-        aria-label='Bitwise Liminal by KilledByAPixel'
-      >
-        <video
-          src='/movies/bitwise_liminal_compressed_240p.webm'
-          autoplay
-          style='width: 100%; height: 100%;'
-          muted
-          loop
-          playsinline
-          preload='auto'
-          class='object-cover rounded'
+    <div class='background w-[100dvw] h-[100dvh] fixed top-0 left-0'></div>
+    <main class='w-[100dvw] h-[100dvh] grid place-content-center'>
+      <header class='data-[dev]:flex hidden'>
+        <h1
+          class='text-xl font-bold absolute top-0 left-0 bg-gray-800/80 text-white w-full text-center font-secondary'
         >
-        </video>
-      </a>
+          Board
+        </h1>
+      </header>
+      <Page1 />
 
-      <script>
-        window.addEventListener('online', () => {
-          alert('You are back online')
-          window.location.href = '/'
-        })
-      </script>
-      <div class='loader'></div>
+      <footer
+        class='absolute bottom-0 left-0 w-full h-10 data-[dev]:flex hidden'
+      >
+        <Buttons rounded={false} />
+      </footer>
     </main>
   </body>
 </Layout>
diff --git a/src/pages/es/404.astro b/src/pages/es/404.astro
index 4d882ad..479ff59 100644
--- a/src/pages/es/404.astro
+++ b/src/pages/es/404.astro
@@ -59,10 +59,10 @@ import Container from '@components/main/container.astro'
   <main class='grid place-content-center bg-black [&>div>p]:text-balance'>
     <Container>
       <h1 class='text-emerald-300 text-2xl'>Page Not Found!</h1>
-      <p class='text-sm xl:text-base font-averia'>
+      <p class='text-sm xl:text-base font-secondary'>
         Sorry, the resource you are looking for does not exist (yet?).
       </p>
-      <p class='text-sm xl:text-base font-averia'>
+      <p class='text-sm xl:text-base font-secondary'>
         Please check the URL and try again or go back.
       </p>
       <div class='flex gap-2 text-emerald-300'>
diff --git a/src/slides/oss/page1.astro b/src/slides/oss/page1.astro
new file mode 100644
index 0000000..899d06b
--- /dev/null
+++ b/src/slides/oss/page1.astro
@@ -0,0 +1,120 @@
+<article class='text-black font-primary flex gap-2 flex-col items-center'>
+  <style>
+    .wave {
+      animation-name: wave-animation; /* Refers to the name of your @keyframes element below */
+      animation-duration: 2.5s; /* Change to speed up or slow down */
+      animation-iteration-count: infinite; /* Never stop waving :) */
+      transform-origin: 70% 70%; /* Pivot around the bottom-left palm */
+      display: inline-block;
+    }
+
+    @keyframes wave-animation {
+      0% {
+        transform: rotate(0deg);
+      }
+      10% {
+        transform: rotate(14deg);
+      } /* The following five values can be played with to make the waving more or less extreme */
+      20% {
+        transform: rotate(-8deg);
+      }
+      30% {
+        transform: rotate(14deg);
+      }
+      40% {
+        transform: rotate(-4deg);
+      }
+      50% {
+        transform: rotate(10deg);
+      }
+      60% {
+        transform: rotate(0deg);
+      } /* Reset for the last half to pause */
+      100% {
+        transform: rotate(0deg);
+      }
+    }
+
+    @keyframes rotate {
+      0% {
+        transform: rotate(0deg);
+      }
+      100% {
+        transform: rotate(360deg);
+      }
+    }
+  </style>
+  <span
+    class='px-2 py-1 rounded text-center font-primary font-bold animate-slide-in-top text-xl bg-[#FFC470] w-fit'
+  >
+    ¡Hola! <span class='wave'>👋🏾</span><br /> Bienvenidos a
+  </span>
+  <img
+    src='https://www.bes.au/wp-content/uploads/2022/01/Open-source.png'
+    alt='open source illustration'
+    class='animate-fade-in-right animate-delay-500 w-24 drop-shadow-lg'
+  />
+  <h1
+    class='text-5xl font-bold animate-slide-in-bottom text-black bg-gradient-to-r from-green-500 to-emerald-500 rounded px-2 py-1'
+    id='slide-title'
+  >
+    Open Source Para Principiantes
+  </h1>
+  <h2
+    class='text-base text-center font-semibold font-secondary animate-fade-in-left animate-delay-500 bg-gradient-to-r from-orange-500 to-red-500 rounded px-2 py-1'
+  >
+    Aprendamos acerca del mundo del código abierto, cómo contribuir y colaborar
+    en proyectos de software libre
+  </h2>
+  <h3
+    class='text-base text-center font-semibold font-secondary animate-fade-in-right animate-delay-800 bg-gradient-to-r from-green-500 to-emerald-500 rounded px-2 py-1'
+  >
+    ¿Conoces el código Konami? 🎮👾
+  </h3>
+</article>
+<script>
+  const h1 = document.querySelector('#slide-title')!
+  // add the class animate-blink after 2 seconds
+  // and also remove the class animate-slide-in-bottom while
+  // adding the class animate-iteration-count-thrice
+  setTimeout(() => {
+    h1.classList.add('animate-blink')
+    h1.classList.remove('animate-slide-in-bottom')
+    h1.classList.add('animate-iteration-count-thrice')
+  }, 1000)
+
+  // every 5 seconds, recreate the blinking effect
+  setInterval(() => {
+    h1.classList.add('animate-blink')
+  }, 5000)
+
+  // konami code will play a sound
+  const konamiCode = [
+    'ArrowUp',
+    'ArrowUp',
+    'ArrowDown',
+    'ArrowDown',
+    'ArrowLeft',
+    'ArrowRight',
+    'ArrowLeft',
+    'ArrowRight',
+    'b',
+    'a'
+  ]
+  let konamiCodePosition = 0
+  document.addEventListener('keydown', (e) => {
+    if (e.key === konamiCode[konamiCodePosition]) {
+      konamiCodePosition++
+      if (konamiCodePosition === konamiCode.length) {
+        playKonamiSound()
+        konamiCodePosition = 0
+      }
+    } else {
+      konamiCodePosition = 0
+    }
+  })
+  const playKonamiSound = () => {
+    const audio = new Audio('/songs/strad.mp3')
+    audio.play()
+  }
+</script>
diff --git a/src/styles/index.css b/src/styles/index.css
index efbfd6b..560ba45 100644
--- a/src/styles/index.css
+++ b/src/styles/index.css
@@ -6,6 +6,7 @@
 * {
     box-sizing: border-box;
     min-width: 0;
+    font-family: inherit;
 }
 
 body {
@@ -28,11 +29,76 @@ p {
     scrollbar-color: gray black;
 }
 
-@font-face {
+/* @font-face {
     font-family: 'Rubik Doodle Subset';
     src: url('/fonts/rubik-doodle-shadow-latin-400-patched.woff2') format('woff2');
     font-weight: 400;
     font-style: normal;
+} */
+
+* {
+    --wc-toast-font-family: 'Fira Sans', sans-serif;
 }
 
-.text * {top: calc(1em + 2.0em)}
+:root {
+    --bg-color: #020617;
+    --card-color: #1e293b;
+}
+
+.card {
+    /* background-color: var(--bg-color); */
+    border-radius: 10px;
+    cursor: pointer;
+    display: flex;
+    /* height: 260px; */
+    /* flex-direction: column; */
+    position: relative;
+    /* width: 300px; */
+}
+
+.card:hover::before {
+    opacity: 1;
+}
+
+.card::before,
+.card::after {
+    border-radius: inherit;
+    content: '';
+    height: 100%;
+    left: 0px;
+    opacity: 0;
+    position: absolute;
+    top: 0px;
+    transition: opacity 500ms;
+    width: 100%;
+}
+
+.card::before {
+    background: radial-gradient(800px circle at var(--mouse-x) var(--mouse-y),
+            rgba(255, 255, 255, 0.06),
+            transparent 40%);
+    z-index: 3;
+}
+
+.card::after {
+    background: radial-gradient(600px circle at var(--mouse-x) var(--mouse-y),
+            rgba(255, 255, 255, 0.4),
+            transparent 40%);
+    z-index: 1;
+}
+
+.card>.card-content {
+    background-color: var(--card-color);
+    border-radius: inherit;
+    display: flex;
+    flex-direction: column;
+    flex-grow: 1;
+    inset: 1px;
+    padding: 10px;
+    position: absolute;
+    z-index: 2;
+}
+
+.text * {
+    top: calc(1em + 2.0em)
+}
diff --git a/tailwind.config.ts b/tailwind.config.ts
index 68502e3..5537118 100644
--- a/tailwind.config.ts
+++ b/tailwind.config.ts
@@ -36,9 +36,13 @@ export default {
     },
     extend: {
       fontFamily: {
-        'rubik-doodle': ['Rubik Doodle Subset', 'system-ui'],
+        calistoga: ['Calistoga', 'system-ui'],
+        rubikDoodle: ['Rubik Doodle Subset', 'system - ui'],
         merriweather: ['Merriweather', 'serif'],
-        averia: ['Averia Serif Libre', 'system-ui']
+        averia: ['Averia Serif Libre', 'system-ui'],
+        firaSans: ['Fira Sans', 'sans-serif'],
+        primary: ['Fira Sans', 'sans-serif'], // <- primary font
+        secondary: ['Fira Sans', 'system-ui'] // <- secondary font
       }
     }
   },
diff --git a/tsconfig.json b/tsconfig.json
index 1059215..f2911df 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -43,6 +43,9 @@
       "@scripts/*": [
         "src/scripts/*"
       ],
+      "@slides/*": [
+        "src/slides/*"
+      ]
     },
     "jsx": "preserve",
     "jsxImportSource": "preact",