diff --git a/resources/js/Components/Articles/ArticleCard/ArticleCard.tsx b/resources/js/Components/Articles/ArticleCard/ArticleCard.tsx
index d64e68de6..27059bf7c 100644
--- a/resources/js/Components/Articles/ArticleCard/ArticleCard.tsx
+++ b/resources/js/Components/Articles/ArticleCard/ArticleCard.tsx
@@ -11,9 +11,11 @@ export type ArticleCardVariant = "normal" | "large";
 export const ArticleCard = ({
     article,
     variant,
+    className,
 }: {
     article: App.Data.Articles.ArticleData;
     variant?: ArticleCardVariant;
+    className?: string;
 }): JSX.Element => {
     const { t } = useTranslation();
     const { user } = useActiveUser();
@@ -27,11 +29,12 @@ export const ArticleCard = ({
             className={cn(
                 "transition-default group flex h-full w-full flex-col overflow-hidden rounded-xl border border-theme-secondary-300",
                 {
-                    "bg-white ring-inset ring-theme-primary-100 hover:ring dark:border-theme-dark-700 dark:bg-theme-dark-900 dark:hover:ring-theme-dark-500":
+                    "bg-white ring-theme-primary-100 hover:ring dark:border-theme-dark-700 dark:bg-theme-dark-900 dark:hover:ring-theme-dark-500":
                         !isLargeVariant,
                     "bg-theme-dark-900 hover:bg-theme-primary-700 dark:border-none dark:bg-theme-primary-700 dark:hover:bg-theme-primary-600":
                         isLargeVariant,
                 },
+                className,
             )}
         >
             <div className="mx-2 mt-2 aspect-video overflow-hidden rounded-lg bg-theme-secondary-300">
@@ -75,8 +78,7 @@ export const ArticleCard = ({
 
             <div
                 className={cn("transition-default flex items-center rounded-b-lg px-6 py-3", {
-                    "bg-theme-secondary-50 group-hover:mx-[3px] group-hover:mb-[3px] group-hover:px-[21px] group-hover:pb-[9px] dark:bg-theme-dark-800":
-                        !isLargeVariant,
+                    "bg-theme-secondary-50 dark:bg-theme-dark-800": !isLargeVariant,
                     "bg-theme-dark-950 group-hover:bg-theme-primary-800 dark:bg-theme-primary-800 dark:group-hover:bg-theme-primary-700":
                         isLargeVariant,
                 })}
diff --git a/resources/js/Pages/Collections/Components/Articles/ArticlesScroll.tsx b/resources/js/Pages/Collections/Components/Articles/ArticlesScroll.tsx
index fa6fd01d4..635f8a4f3 100644
--- a/resources/js/Pages/Collections/Components/Articles/ArticlesScroll.tsx
+++ b/resources/js/Pages/Collections/Components/Articles/ArticlesScroll.tsx
@@ -14,8 +14,8 @@ export const ArticlesScroll = ({ articles }: { articles: App.Data.Articles.Artic
             <Carousel
                 horizontalOffset={horizontalOffset}
                 headerClassName="mx-6 sm:mx-8 2xl:mx-0"
-                swiperClassName="m-0 lg:mx-8 2xl:m-0"
-                spaceBetween={8}
+                swiperClassName="-m-1 lg:-my-1 2xl:-m-1 lg:mx-7"
+                spaceBetween={0}
                 slidesPerView={slidesPerView}
                 title={
                     <>
@@ -32,7 +32,9 @@ export const ArticlesScroll = ({ articles }: { articles: App.Data.Articles.Artic
             >
                 {articles.map((article) => (
                     <CarouselItem key={article.id}>
-                        <ArticleCard article={article} />
+                        <div className="h-full p-1">
+                            <ArticleCard article={article} />
+                        </div>
                     </CarouselItem>
                 ))}
             </Carousel>