diff --git a/.yarn/install-state.gz b/.yarn/install-state.gz
index 9126feb6..318f4537 100644
Binary files a/.yarn/install-state.gz and b/.yarn/install-state.gz differ
diff --git a/package.json b/package.json
index 828967f4..fd323bad 100644
--- a/package.json
+++ b/package.json
@@ -44,16 +44,16 @@
         "@astrojs/sitemap": "^3.0.5",
         "@fontsource-variable/nunito-sans": "^5.0.9",
         "@fontsource/baskervville": "^5.0.18",
-        "@types/node": "^20.11.16",
+        "@types/node": "^20.11.17",
         "@types/react": "^18.2.55",
         "@types/react-dom": "^18.2.19",
         "astro": "^4.3.5",
         "gsap": "^3.12.5",
         "markdown-it": "^14.0.0",
-        "million": "^3.0.2",
+        "million": "^3.0.3",
         "react": "^18.2.0",
         "react-dom": "^18.2.0",
-        "react-globe.gl": "^2.27.1",
+        "react-globe.gl": "^2.27.2",
         "react-router-dom": "^6.22.0",
         "swiper": "^11.0.6",
         "three": "^0.161.0",
diff --git a/src/ui/components/molecules/aboutLatestArticlesSlider/AboutLatestArticlesSlider.tsx b/src/ui/components/molecules/aboutLatestArticlesSlider/AboutLatestArticlesSlider.tsx
index f858736b..10924818 100644
--- a/src/ui/components/molecules/aboutLatestArticlesSlider/AboutLatestArticlesSlider.tsx
+++ b/src/ui/components/molecules/aboutLatestArticlesSlider/AboutLatestArticlesSlider.tsx
@@ -3,111 +3,102 @@ import { Swiper, SwiperSlide } from 'swiper/react';
 import { A11y, Keyboard, Navigation, Virtual } from 'swiper/modules';
 import { type SwiperOptions } from 'swiper/types';
 import { AboutLatestArticlesSliderNavigation } from '@components/molecules/aboutLatestArticlesSlider/components/aboutLatestArticlesSliderNavigation';
-import { getCollection } from 'astro:content';
 import { createExcerpt } from '@shared/utils/createExcerpt';
 import { DEFAULT_DATE_OPTIONS } from 'src/consts.ts';
 import MarkdownIt from 'markdown-it';
 import { slugify } from '@shared/utils/slugify';
 import './about-latest-articles-slider.css';
+import type { CollectionEntry } from 'astro:content';
+
+interface AboutLatestArticlesSLiderProps {
+  articles: CollectionEntry<'articles'>[];
+}
 
 const enum ArticleType {
-    DEFAULT = 'default',
-    NO_IMAGE = 'no_image',
+  DEFAULT = 'default',
+  NO_IMAGE = 'no_image',
 }
 
 const SLIDER_CONFIG: SwiperOptions = {
-    modules: [Navigation, Keyboard, Virtual, A11y],
-    loop: true,
-    slidesPerView: 2,
-    autoplay: {
-        delay: 3000,
-        pauseOnMouseEnter: true,
-    },
-    pagination: {
-        clickable: true,
-    },
-    keyboard: {
-        enabled: true,
+  modules: [Navigation, Keyboard, Virtual, A11y],
+  loop: true,
+  slidesPerView: 2,
+  autoplay: {
+    delay: 3000,
+    pauseOnMouseEnter: true,
+  },
+  pagination: {
+    clickable: true,
+  },
+  keyboard: {
+    enabled: true,
+  },
+  breakpoints: {
+    1024: {
+      slidesPerView: 2,
+      spaceBetween: 32,
     },
-    breakpoints: {
-        1024: {
-            slidesPerView: 2,
-            spaceBetween: 32,
-        },
-        320: {
-            slidesPerView: 1,
-        },
+    320: {
+      slidesPerView: 1,
     },
-    containerModifierClass: 'latest-articles-',
+  },
+  containerModifierClass: 'latest-articles-',
 };
 const parser: MarkdownIt = MarkdownIt('default', {});
-const articles = await getCollection('articles');
-articles.sort((a, b) => new Date(b.data.publishDate).valueOf() - new Date(a.data.publishDate).valueOf()).splice(4);
 
 // todo: isolate and use composition
-export const AboutLatestArticlesSlider = () => {
-    return (
-        <div className="about__latest-articles__slider">
-            <Swiper {...SLIDER_CONFIG}>
-                <ul>
-                    {articles.map(({ slug, data: article, ...content }) => {
-                        const { excerpt } = createExcerpt({ parser, content: content.body });
-                        const variant: ArticleType = article.featuredImage ? ArticleType.DEFAULT : ArticleType.NO_IMAGE;
-                        const publishedDate = article.publishDate.toLocaleDateString('en', DEFAULT_DATE_OPTIONS);
-                        const href = `/articles/${slug}`;
+export const AboutLatestArticlesSlider = ({ articles }: AboutLatestArticlesSLiderProps) => {
+  return (
+    <div className="about__latest-articles__slider">
+      <Swiper {...SLIDER_CONFIG}>
+        <ul>
+          {articles.map(({ slug, data: article, ...content }) => {
+            const { excerpt } = createExcerpt({ parser, content: content.body });
+            const variant: ArticleType = article.featuredImage ? ArticleType.DEFAULT : ArticleType.NO_IMAGE;
+            const publishedDate = article.publishDate.toLocaleDateString('en', DEFAULT_DATE_OPTIONS);
+            const href = `/articles/${slug}`;
 
-                        return (
-                            <li key={slug} className="about__latest-article__item__wrapper clickable">
-                                <SwiperSlide key={slug}>
-                                    <a
-                                        className="about__latest-article__link-card"
-                                        href={href}
-                                        aria-label={article.title}
-                                    />
-                                    <article
-                                        className={`about__latest-article__item ${
-                                            variant === ArticleType.DEFAULT ? '--default-variant' : '--no-image-variant'
-                                        }`}
-                                    >
-                                        {article.featuredImage && (
-                                            <img
-                                                className="about__latest-article__item__featured-image"
-                                                src={article.featuredImage}
-                                                alt={article.title}
-                                                loading="lazy"
-                                                decoding="async"
-                                            />
-                                        )}
-                                        <time
-                                            className="about__latest-article__item__publish-date"
-                                            dateTime={publishedDate}
-                                        >
-                                            {publishedDate}
-                                        </time>
-                                        <h3 className="about__latest-article__title font-serif">{article.title}</h3>
-                                        <p className="about__latest-article__author">
-                                            by <a href={`/tags/${slugify(article.author)}`}>{article.author}</a>
-                                        </p>
-                                        <p className="about__latest-article__excerpt">{excerpt}</p>
-                                        <ul className="about__latest-article__item__tags__list">
-                                            {article.tags?.map((tag) => (
-                                                <a
-                                                    className="about__latest-article__item__tag"
-                                                    href={`/tags/${slugify(tag)}`}
-                                                    key={tag}
-                                                >
-                                                    #{tag}
-                                                </a>
-                                            ))}
-                                        </ul>
-                                    </article>
-                                </SwiperSlide>
-                            </li>
-                        );
-                    })}
-                </ul>
-                <AboutLatestArticlesSliderNavigation />
-            </Swiper>
-        </div>
-    );
+            return (
+              <li key={slug} className="about__latest-article__item__wrapper clickable">
+                <SwiperSlide key={slug}>
+                  <a className="about__latest-article__link-card" href={href} aria-label={article.title} />
+                  <article
+                    className={`about__latest-article__item ${
+                      variant === ArticleType.DEFAULT ? '--default-variant' : '--no-image-variant'
+                    }`}
+                  >
+                    {article.featuredImage && (
+                      <img
+                        className="about__latest-article__item__featured-image"
+                        src={article.featuredImage}
+                        alt={article.title}
+                        loading="lazy"
+                        decoding="async"
+                      />
+                    )}
+                    <time className="about__latest-article__item__publish-date" dateTime={publishedDate}>
+                      {publishedDate}
+                    </time>
+                    <h3 className="about__latest-article__title font-serif">{article.title}</h3>
+                    <p className="about__latest-article__author">
+                      by <a href={`/tags/${slugify(article.author)}`}>{article.author}</a>
+                    </p>
+                    <p className="about__latest-article__excerpt">{excerpt}</p>
+                    <ul className="about__latest-article__item__tags__list">
+                      {article.tags?.map((tag) => (
+                        <a className="about__latest-article__item__tag" href={`/tags/${slugify(tag)}`} key={tag}>
+                          #{tag}
+                        </a>
+                      ))}
+                    </ul>
+                  </article>
+                </SwiperSlide>
+              </li>
+            );
+          })}
+        </ul>
+        <AboutLatestArticlesSliderNavigation />
+      </Swiper>
+    </div>
+  );
 };
diff --git a/src/ui/components/organisms/AboutLatestArticles/AboutLatestArticles.astro b/src/ui/components/organisms/AboutLatestArticles/AboutLatestArticles.astro
index 80fdeb7a..15bc9015 100644
--- a/src/ui/components/organisms/AboutLatestArticles/AboutLatestArticles.astro
+++ b/src/ui/components/organisms/AboutLatestArticles/AboutLatestArticles.astro
@@ -1,17 +1,21 @@
 ---
+import { getCollection } from 'astro:content';
+
 import './about-latest-articles.css';
 import { AboutLatestArticlesSlider } from '@components/molecules/aboutLatestArticlesSlider';
+const articles = await getCollection('articles');
+articles.sort((a, b) => new Date(b.data.publishDate).valueOf() - new Date(a.data.publishDate).valueOf()).splice(4);
 ---
 
 <section class="about-latest-articles__wrapper common-wrapper">
-    <h3 class="about-latest-articles__title section-title">
-        Fresh from <a class="clickable" href="/articles">the blog</a>
-    </h3>
-    <div class="about-latest-articles__inner">
-        <div class="about-latest-articles__quote__wrapper">
-            <h3 class="about-latest-articles__quote">Lorem ipsum dolir sit Amet. Dolor sit amet.</h3>
-            <h6 class="about-latest-articles__quote__author">Ferran Buireu</h6>
-        </div>
-        <AboutLatestArticlesSlider client:load />
+  <h3 class="about-latest-articles__title section-title">
+    Fresh from <a class="clickable" href="/articles">the blog</a>
+  </h3>
+  <div class="about-latest-articles__inner">
+    <div class="about-latest-articles__quote__wrapper">
+      <h3 class="about-latest-articles__quote">Lorem ipsum dolir sit Amet. Dolor sit amet.</h3>
+      <h6 class="about-latest-articles__quote__author">Ferran Buireu</h6>
     </div>
+    <AboutLatestArticlesSlider client:load articles={articles} />
+  </div>
 </section>
diff --git a/yarn.lock b/yarn.lock
index c6c64532..96f55088 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1639,12 +1639,12 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@types/node@npm:^20.11.16":
-  version: 20.11.16
-  resolution: "@types/node@npm:20.11.16"
+"@types/node@npm:^20.11.17":
+  version: 20.11.17
+  resolution: "@types/node@npm:20.11.17"
   dependencies:
     undici-types: "npm:~5.26.4"
-  checksum: 4886b90278e9c877a84efd3edd4667cd990e032d77268d2a798b99ebc1901ea336fa7dfbe9eaf4ad6ad1da9ce2ec31baf300038a3905838692362eb19904ebde
+  checksum: 1f30dae80b416cbf38f133a619ffb0e9fb9e7bc58f82d900bf73816ae5781740c4640892bf5971dd9c12570d5d05241646be3e7540bb4e059322ec6af4e51e15
   languageName: node
   linkType: hard
 
@@ -2549,7 +2549,7 @@ __metadata:
     "@testing-library/react-hooks": "npm:^8.0.1"
     "@types/eslint": "npm:^8.56.2"
     "@types/markdown-it": "npm:^13.0.7"
-    "@types/node": "npm:^20.11.16"
+    "@types/node": "npm:^20.11.17"
     "@types/react": "npm:^18.2.55"
     "@types/react-dom": "npm:^18.2.19"
     "@types/three": "npm:^0.161.2"
@@ -2567,12 +2567,12 @@ __metadata:
     husky: "npm:^9.0.10"
     lint-staged: "npm:^15.2.2"
     markdown-it: "npm:^14.0.0"
-    million: "npm:^3.0.2"
+    million: "npm:^3.0.3"
     prettier: "npm:3.2.5"
     prettier-plugin-astro: "npm:^0.13.0"
     react: "npm:^18.2.0"
     react-dom: "npm:^18.2.0"
-    react-globe.gl: "npm:^2.27.1"
+    react-globe.gl: "npm:^2.27.2"
     react-router-dom: "npm:^6.22.0"
     stylelint: "npm:^16.2.1"
     stylelint-config-recommended: "npm:^14.0.0"
@@ -7181,9 +7181,9 @@ __metadata:
   languageName: node
   linkType: hard
 
-"million@npm:^3.0.2":
-  version: 3.0.2
-  resolution: "million@npm:3.0.2"
+"million@npm:^3.0.3":
+  version: 3.0.3
+  resolution: "million@npm:3.0.3"
   dependencies:
     "@babel/core": "npm:^7.23.7"
     "@babel/types": "npm:^7.23.6"
@@ -7193,7 +7193,7 @@ __metadata:
     unplugin: "npm:^1.6.0"
   bin:
     million: packages/cli/dist/index.js
-  checksum: 570295e589a790bef3386a9c2354cce7d071e363f6047c57965c279d7c383d9fb514ef2760681a442f4bacb88b4e632943c277d41c93b6be4356010b1a19c245
+  checksum: 3f222a717cd9b10ef8c3d3fd8560407d0663c34c2abfb480225c6167b2df25b2f1cf500e1cf978b2b27a0d216e16285419835f23115ec6f09e77b3eccfc34ce0
   languageName: node
   linkType: hard
 
@@ -8328,16 +8328,16 @@ __metadata:
   languageName: node
   linkType: hard
 
-"react-globe.gl@npm:^2.27.1":
-  version: 2.27.1
-  resolution: "react-globe.gl@npm:2.27.1"
+"react-globe.gl@npm:^2.27.2":
+  version: 2.27.2
+  resolution: "react-globe.gl@npm:2.27.2"
   dependencies:
     globe.gl: "npm:^2.32"
     prop-types: "npm:15"
     react-kapsule: "npm:2"
   peerDependencies:
     react: "*"
-  checksum: 6960574b73d858251b20561cbad58b7e0c8a73871a43f79fdf07614255e74795fff4d5c62c2d88383902d8b0263a4043f34b6c87107b1a1617719b019492c922
+  checksum: 1386868826a6fcfb2a4622ad277f6e9ebf714496929c4f1a4c423acb02cc19e7d4facf6d8ab50e23828d8b4fc880d5f800f55f7907042ab6fad1a764bad8f452
   languageName: node
   linkType: hard