diff --git a/resources/css/_skeletons.css b/resources/css/_skeletons.css
index 5a29fefe4..85b5d4f9c 100644
--- a/resources/css/_skeletons.css
+++ b/resources/css/_skeletons.css
@@ -20,3 +20,29 @@
         rgb(var(--theme-color-dark-700))
     );
 }
+
+.dark .react-loading-skeleton.skeleton-primary {
+    background-color: rgb(var(--theme-color-primary-400));
+}
+
+.dark .react-loading-skeleton.skeleton-primary::after {
+    background-image: linear-gradient(
+        90deg,
+        rgb(var(--theme-color-primary-500)),
+        rgb(var(--theme-color-primary-600)),
+        rgb(var(--theme-color-primary-500))
+    );
+}
+
+.react-loading-skeleton.skeleton-primary {
+    background-color: rgb(var(--theme-color-dark-600));
+}
+
+.react-loading-skeleton.skeleton-primary::after {
+    background-image: linear-gradient(
+        90deg,
+        rgb(var(--theme-color-dark-700)),
+        rgb(var(--theme-color-dark-800)),
+        rgb(var(--theme-color-dark-700))
+    );
+}
diff --git a/resources/js/Components/Articles/Article.blocks.tsx b/resources/js/Components/Articles/Article.blocks.tsx
index 1eb5408e7..7ef060c10 100644
--- a/resources/js/Components/Articles/Article.blocks.tsx
+++ b/resources/js/Components/Articles/Article.blocks.tsx
@@ -78,7 +78,7 @@ export const FeaturedCollections = ({
                             isCircle
                             className={cn("h-6 w-6 rounded-full ring-2", {
                                 "bg-white ring-white dark:bg-theme-dark-800 dark:ring-theme-dark-800": !isLargeVariant,
-                                "bg-theme-dark-900 ring-theme-dark-900 dark:bg-theme-primary-800 dark:ring-theme-primary-800":
+                                "skeleton-primary bg-theme-dark-900 ring-theme-dark-900 dark:bg-theme-primary-800 dark:ring-theme-primary-800":
                                     isLargeVariant,
                             })}
                             errorClassName="!p-0"
diff --git a/resources/js/Components/Articles/ArticleCard/ArticleCard.tsx b/resources/js/Components/Articles/ArticleCard/ArticleCard.tsx
index d64e68de6..fee01716e 100644
--- a/resources/js/Components/Articles/ArticleCard/ArticleCard.tsx
+++ b/resources/js/Components/Articles/ArticleCard/ArticleCard.tsx
@@ -36,9 +36,11 @@ export const ArticleCard = ({
         >
             <div className="mx-2 mt-2 aspect-video overflow-hidden rounded-lg bg-theme-secondary-300">
                 <Img
-                    className="h-full w-full rounded-lg object-cover"
+                    className={cn("h-full w-full rounded-lg object-cover", {
+                        "skeleton-primary": isLargeVariant,
+                    })}
                     wrapperClassName={cn("h-full [&>span]:h-full", {
-                        "bg-white dark:bg-theme-dark-900": !isLargeVariant,
+                        "bg-white dark:bg-theme-primary-900 ": !isLargeVariant,
                         "bg-theme-dark-900 group-hover:bg-theme-primary-700 dark:bg-theme-primary-700 dark:group-hover:bg-theme-primary-600":
                             isLargeVariant,
                     })}
diff --git a/resources/js/Pages/Articles/Index.tsx b/resources/js/Pages/Articles/Index.tsx
index 62246b9e2..8dadd696e 100644
--- a/resources/js/Pages/Articles/Index.tsx
+++ b/resources/js/Pages/Articles/Index.tsx
@@ -46,7 +46,7 @@ const ArticlesIndex = ({
                     className="pb-2 text-center dark:text-theme-dark-50 sm:text-left"
                 >
                     {t("pages.articles.header_title")}{" "}
-                    <span className="text-theme-primary-600">
+                    <span className="text-theme-primary-600 dark:text-theme-primary-400">
                         {initialHighlightedArticles.length + initialArticles.paginated.meta.total}
                     </span>{" "}
                     {initialHighlightedArticles.length + initialArticles.paginated.meta.total === 1