diff --git a/CHANGELOG.md b/CHANGELOG.md
index 53666774..5b75da35 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -184,6 +184,7 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.
   - Layout
   - RelatedPosts
   - Footer
+  - CardsColumns
   - Nav
 - Extracted :root from themes.scss to globals.scss
 - Updated ContactUsForm's checkbox wrapper from div to label to enhance its accessibility
diff --git a/components/ContactUs/ContactUsCards/index.js b/components/ContactUs/ContactUsCards/index.js
index d198833b..dd84da5e 100644
--- a/components/ContactUs/ContactUsCards/index.js
+++ b/components/ContactUs/ContactUsCards/index.js
@@ -1,4 +1,5 @@
-import { ContactCardsColumns } from '../../containers/CardColumns/ContactCardsColumns';
+import { CardsColumns } from '@/components/containers/CardsColumns';
+import { ContactUsCard } from '@/components/containers/Card/ContactUsCard';
 import RevealContentContainer from '../../containers/RevealContentContainer';
 import styles from './ContactUsCards.module.scss';
 
@@ -34,7 +35,7 @@ export default function ContactUsCards() {
   return (
     <article className={styles.contactCards}>
       <RevealContentContainer>
-        <ContactCardsColumns cards={cards} />
+        <CardsColumns cards={cards} cardComponent={ContactUsCard} />
       </RevealContentContainer>
     </article>
   );
diff --git a/components/blog/BlogPostsContainer/index.js b/components/blog/BlogPostsContainer/index.js
index 5c51ce91..d8248f63 100644
--- a/components/blog/BlogPostsContainer/index.js
+++ b/components/blog/BlogPostsContainer/index.js
@@ -1,6 +1,6 @@
 import Link from 'next/link';
-import { BlogCardsColumns } from '@/components/containers/CardColumns/BlogCardsColumns';
 import { BlogCard } from '@/components/containers/Card/BlogCard';
+import { CardsColumns } from '@/components/containers/CardsColumns';
 import RevealContentContainer from '@/components/containers/RevealContentContainer';
 import { tagToHeading } from '@/utils/blogCategories';
 import Container from '@/components/containers/Container';
@@ -37,7 +37,12 @@ const BlogPostsContainer = ({
         {swipe ? (
           <>
             {[posts.slice(0, 6)].map((p, index) => (
-              <BlogCardsColumns key={index} cards={p} />
+              <CardsColumns
+                key={index}
+                cards={p}
+                cardComponent={BlogCard}
+                customClass='blog'
+              />
             ))}
           </>
         ) : (
diff --git a/components/containers/CardColumns/BlogCardsColumns.js b/components/containers/CardColumns/BlogCardsColumns.js
deleted file mode 100644
index 416fdb7b..00000000
--- a/components/containers/CardColumns/BlogCardsColumns.js
+++ /dev/null
@@ -1,12 +0,0 @@
-import { CardsColumnsInterface } from './CardColumnsInterface';
-import { BlogCard } from '@/components/containers/Card/BlogCard';
-
-export function BlogCardsColumns({ cards }) {
-  return (
-    <CardsColumnsInterface
-      cards={cards}
-      cardComponent={BlogCard}
-      customClass='blog'
-    />
-  );
-}
diff --git a/components/containers/CardColumns/CardColumnsInterface.js b/components/containers/CardColumns/CardColumnsInterface.js
deleted file mode 100644
index dd977507..00000000
--- a/components/containers/CardColumns/CardColumnsInterface.js
+++ /dev/null
@@ -1,49 +0,0 @@
-import { SwiperSlide } from 'swiper/react';
-import { Pagination } from 'swiper/modules';
-import 'swiper/css';
-import 'swiper/css/pagination';
-import 'swiper/css/navigation';
-import Container from '@/components/containers/Container';
-import * as S from './styles';
-
-export function CardsColumnsInterface({ cards, customClass, cardComponent }) {
-  const Card = cardComponent;
-  return (
-    <Container>
-      <div>
-        <S.Swiper
-          mousewheel={true}
-          grabCursor={true}
-          modules={[Pagination]}
-          pagination
-          centerInsufficientSlides={false}
-          slidesPerView={1}
-          breakpoints={{
-            768: {
-              slidesPerView: 2,
-              spaceBetween: 20,
-            },
-            1334:
-              customClass === 'blog'
-                ? {
-                    slidesPerView: 3,
-                    spaceBetween: 20,
-                  }
-                : {
-                    slidesPerView: cards.length,
-                    spaceBetween: cards.length < 3 ? 75 : 20,
-                  },
-          }}
-        >
-          {cards.map((card, index) => (
-            <SwiperSlide key={index}>
-              <S.InnerContent>
-                <Card key={index} card={card} $cardType={customClass} />
-              </S.InnerContent>
-            </SwiperSlide>
-          ))}
-        </S.Swiper>
-      </div>
-    </Container>
-  );
-}
diff --git a/components/containers/CardColumns/ContactCardsColumns.js b/components/containers/CardColumns/ContactCardsColumns.js
deleted file mode 100644
index 93786b0f..00000000
--- a/components/containers/CardColumns/ContactCardsColumns.js
+++ /dev/null
@@ -1,6 +0,0 @@
-import { CardsColumnsInterface } from './CardColumnsInterface';
-import { ContactUsCard } from '@/components/containers/Card/ContactUsCard';
-
-export function ContactCardsColumns({ cards }) {
-  return <CardsColumnsInterface cards={cards} cardComponent={ContactUsCard} />;
-}
diff --git a/components/containers/CardColumns/OurGoalsCardsColumns.js b/components/containers/CardColumns/OurGoalsCardsColumns.js
deleted file mode 100644
index 45eb6d9e..00000000
--- a/components/containers/CardColumns/OurGoalsCardsColumns.js
+++ /dev/null
@@ -1,6 +0,0 @@
-import { CardsColumnsInterface } from './CardColumnsInterface';
-import { AboutUsCard } from '@/components/containers/Card/AboutUsCard';
-
-export function OurGoalsCardsColumns({ cards }) {
-  return <CardsColumnsInterface cards={cards} cardComponent={AboutUsCard} />;
-}
diff --git a/components/containers/CardColumns/index.js b/components/containers/CardColumns/index.js
deleted file mode 100644
index 537181ca..00000000
--- a/components/containers/CardColumns/index.js
+++ /dev/null
@@ -1,6 +0,0 @@
-import { CardsColumnsInterface } from './CardColumnsInterface';
-import { Card } from '@/components/containers/Card';
-
-export function CardsColumns({ cards }) {
-  return <CardsColumnsInterface cards={cards} cardComponent={Card} />;
-}
diff --git a/components/containers/CardColumns/styles.js b/components/containers/CardColumns/styles.js
deleted file mode 100644
index 04b1685a..00000000
--- a/components/containers/CardColumns/styles.js
+++ /dev/null
@@ -1,24 +0,0 @@
-import styled, { css } from 'styled-components';
-import { Swiper } from 'swiper/react';
-
-const InnerContent = styled.div`
-  margin: 0 auto;
-  padding-bottom: 4rem;
-  justify-content: center;
-
-  ${props => css`
-    @media (min-width: ${props.theme.breakpoints.desktopPlus}) {
-      display: flex;
-    }
-  `}
-`;
-
-const CardColumnSwiper = styled(Swiper)`
-  margin-bottom: 5rem;
-
-  & .swiper-pagination-bullet-active {
-    background-color: ${({ theme }) => theme.colors.darkBg};
-  }
-`;
-
-export { CardColumnSwiper as Swiper, InnerContent };
diff --git a/components/containers/CardsColumns/CardsColumns.module.scss b/components/containers/CardsColumns/CardsColumns.module.scss
new file mode 100644
index 00000000..d715e8f4
--- /dev/null
+++ b/components/containers/CardsColumns/CardsColumns.module.scss
@@ -0,0 +1,11 @@
+.innerContent {
+  padding-bottom: 4rem;
+}
+
+.cardColumnSwiper {
+  margin-bottom: 5rem;
+
+  :global(.swiper-pagination-bullet-active) {
+    background-color: var(--dark-bg);
+  }
+}
diff --git a/components/containers/CardsColumns/index.js b/components/containers/CardsColumns/index.js
new file mode 100644
index 00000000..2a9e0006
--- /dev/null
+++ b/components/containers/CardsColumns/index.js
@@ -0,0 +1,48 @@
+import { Swiper, SwiperSlide } from 'swiper/react';
+import { Pagination } from 'swiper/modules';
+import 'swiper/css';
+import 'swiper/css/pagination';
+import 'swiper/css/navigation';
+import Container from '@/components/containers/Container';
+import styles from './CardsColumns.module.scss';
+
+export function CardsColumns({ cards, customClass, cardComponent }) {
+  const Card = cardComponent;
+  return (
+    <Container>
+      <Swiper
+        className={styles.cardColumnSwiper}
+        mousewheel={true}
+        grabCursor={true}
+        modules={[Pagination]}
+        pagination
+        centerInsufficientSlides={false}
+        slidesPerView={1}
+        breakpoints={{
+          768: {
+            slidesPerView: 2,
+            spaceBetween: 20,
+          },
+          1334:
+            customClass === 'blog'
+              ? {
+                  slidesPerView: 3,
+                  spaceBetween: 20,
+                }
+              : {
+                  slidesPerView: cards.length,
+                  spaceBetween: cards.length < 3 ? 75 : 20,
+                },
+        }}
+      >
+        {cards.map((card, index) => (
+          <SwiperSlide key={index}>
+            <div className={styles.innerContent}>
+              <Card key={index} card={card} $cardType={customClass} />
+            </div>
+          </SwiperSlide>
+        ))}
+      </Swiper>
+    </Container>
+  );
+}
diff --git a/pages/about.js b/pages/about.js
index dfd396c5..d1f6bde9 100644
--- a/pages/about.js
+++ b/pages/about.js
@@ -1,6 +1,7 @@
 import RevealContentContainer from '@/components/containers/RevealContentContainer';
 import TwoColumn from '@/components/containers/TwoColumn';
-import { OurGoalsCardsColumns } from '@/components/containers/CardColumns/OurGoalsCardsColumns';
+import { AboutUsCard } from '@/components/containers/Card/AboutUsCard';
+import { CardsColumns } from '@/components/containers/CardsColumns';
 import Wrapper from '@/components/containers/Wrapper';
 import Container from '@/components/containers/Container';
 import { Row } from '@/components/containers/Row';
@@ -95,7 +96,7 @@ export default function AboutUs() {
         <Container>
           <h2>Our goals</h2>
         </Container>
-        <OurGoalsCardsColumns
+        <CardsColumns
           cards={[
             {
               title: '1',
@@ -108,6 +109,7 @@ export default function AboutUs() {
                 'To offer more detailed tasks (GitHub issues) and help the developer assimilate the logical mindset required in a structured project, under guidance following the industry’s best practices throughout the entire process.',
             },
           ]}
+          cardComponent={AboutUsCard}
         />
       </RevealContentContainer>
       <RevealContentContainer>
diff --git a/pages/index.js b/pages/index.js
index 3baa8192..3e13f167 100644
--- a/pages/index.js
+++ b/pages/index.js
@@ -1,5 +1,6 @@
 import TwoColumn from '@/components/containers/TwoColumn';
-import { CardsColumns } from '@/components/containers/CardColumns';
+import { CardsColumns } from '@/components/containers/CardsColumns';
+import { Card } from '@/components/containers/Card';
 import Bracket from '@/components/decorations/Bracket';
 import bracketStyles from '@/components/decorations/Bracket/Bracket.module.scss';
 import Stick from '@/components/decorations/Stick';
@@ -63,6 +64,7 @@ export default function Home() {
               linkText: 'Learn more',
             },
           ]}
+          cardComponent={Card}
         />
       </RevealContentContainer>