diff --git a/src/components/Blog/BlogArticleCard/ActionButtons/cmp.tsx b/src/components/Blog/BlogArticleCard/ActionButtons/cmp.tsx
new file mode 100644
index 0000000..94f58c4
--- /dev/null
+++ b/src/components/Blog/BlogArticleCard/ActionButtons/cmp.tsx
@@ -0,0 +1,67 @@
+import LoadingBlinkBox from "@/components/LoadingBlinkBox";
+import { BlogCategoryProps } from "@/types/blog/BlogCategoryProps";
+import { Button, Icon } from "@aleph-front/core";
+
+export const ActionButtons = ({
+  blogArticleUrl,
+  category,
+  loading,
+  size,
+}: {
+  blogArticleUrl?: string;
+  category?: BlogCategoryProps;
+  size: string;
+  loading: boolean;
+}) => {
+  if (size === "highlighted")
+    return (
+      <div tw="flex gap-6">
+        <LoadingBlinkBox
+          loading={loading}
+          loadingHeight="3rem"
+          loadingWidth="50%"
+        >
+          <Button
+            as="a"
+            variant="primary"
+            size="lg"
+            kind="gradient"
+            href={blogArticleUrl}
+          >
+            Read the article
+          </Button>
+          <Button
+            as="a"
+            href={`/blog/categories/${category?.id}`}
+            target="_self"
+            size="sm"
+            variant="textOnly"
+            color="main0"
+          >
+            All {category?.displayName}
+            <Icon name="arrow-right" size="sm" />
+          </Button>
+        </LoadingBlinkBox>
+      </div>
+    );
+  else
+    return (
+      <LoadingBlinkBox
+        loading={loading}
+        loadingHeight="3rem"
+        loadingWidth="66%"
+      >
+        <Button
+          as="a"
+          variant="secondary"
+          size="lg"
+          kind="gradient"
+          href={blogArticleUrl}
+        >
+          Read me
+        </Button>
+      </LoadingBlinkBox>
+    );
+};
+
+export default ActionButtons;
diff --git a/src/components/Blog/BlogArticleCard/ActionButtons/index.tsx b/src/components/Blog/BlogArticleCard/ActionButtons/index.tsx
new file mode 100644
index 0000000..a05ebc5
--- /dev/null
+++ b/src/components/Blog/BlogArticleCard/ActionButtons/index.tsx
@@ -0,0 +1 @@
+export { default } from "./cmp";
diff --git a/src/components/Blog/BlogArticleCard/Category/cmp.tsx b/src/components/Blog/BlogArticleCard/Category/cmp.tsx
new file mode 100644
index 0000000..311bc6d
--- /dev/null
+++ b/src/components/Blog/BlogArticleCard/Category/cmp.tsx
@@ -0,0 +1,17 @@
+import LoadingBlinkBox from "@/components/LoadingBlinkBox";
+
+export const Category = ({
+  children,
+  loading,
+}: {
+  children: React.ReactNode;
+  loading: boolean;
+}) => {
+  return (
+    <LoadingBlinkBox loading={loading} loadingHeight="1rem" loadingWidth="25%">
+      <p className="tp-info text-base3">{children}</p>
+    </LoadingBlinkBox>
+  );
+};
+
+export default Category;
diff --git a/src/components/Blog/BlogArticleCard/Category/index.tsx b/src/components/Blog/BlogArticleCard/Category/index.tsx
new file mode 100644
index 0000000..a05ebc5
--- /dev/null
+++ b/src/components/Blog/BlogArticleCard/Category/index.tsx
@@ -0,0 +1 @@
+export { default } from "./cmp";
diff --git a/src/components/Blog/BlogArticleCard/Description/cmp.tsx b/src/components/Blog/BlogArticleCard/Description/cmp.tsx
new file mode 100644
index 0000000..7a5b397
--- /dev/null
+++ b/src/components/Blog/BlogArticleCard/Description/cmp.tsx
@@ -0,0 +1,20 @@
+import LoadingBlinkBox from "@/components/LoadingBlinkBox";
+import { StyledDescription } from "./styles";
+
+export const Description = ({
+  children,
+  size,
+  loading,
+}: {
+  children: React.ReactNode;
+  size: string;
+  loading: boolean;
+}) => {
+  return (
+    <LoadingBlinkBox loading={loading} loadingHeight="6rem" loadingWidth="100%">
+      <StyledDescription size={size}>{children}</StyledDescription>
+    </LoadingBlinkBox>
+  );
+};
+
+export default Description;
diff --git a/src/components/Blog/BlogArticleCard/Description/index.tsx b/src/components/Blog/BlogArticleCard/Description/index.tsx
new file mode 100644
index 0000000..a05ebc5
--- /dev/null
+++ b/src/components/Blog/BlogArticleCard/Description/index.tsx
@@ -0,0 +1 @@
+export { default } from "./cmp";
diff --git a/src/components/Blog/BlogArticleCard/Description/styles.tsx b/src/components/Blog/BlogArticleCard/Description/styles.tsx
new file mode 100644
index 0000000..b82499e
--- /dev/null
+++ b/src/components/Blog/BlogArticleCard/Description/styles.tsx
@@ -0,0 +1,24 @@
+import styled, { css } from "styled-components";
+import tw from "twin.macro";
+import { getResponsiveCss } from "@aleph-front/core";
+
+export const StyledDescription = styled.p<{ size: string }>`
+  ${tw`line-clamp-3 whitespace-pre-wrap`}
+  ${({ size }) => {
+    if (size === "lg")
+      return css`
+        margin-bottom: 1.5rem;
+        ${getResponsiveCss("lg", "max-width: 77%;")}
+      `;
+    else if (size === "xl" || size === "full")
+      return css`
+        margin-bottom: 3rem;
+        ${getResponsiveCss("lg", "max-width: 77%;")}
+      `;
+    else if (size === "highlighted") return;
+    else
+      return css`
+        margin-bottom: 1.5rem;
+      `;
+  }}
+`;
diff --git a/src/components/Blog/BlogArticleCard/FeatureImage/cmp.tsx b/src/components/Blog/BlogArticleCard/FeatureImage/cmp.tsx
new file mode 100644
index 0000000..4cdf83c
--- /dev/null
+++ b/src/components/Blog/BlogArticleCard/FeatureImage/cmp.tsx
@@ -0,0 +1,20 @@
+import LoadingBlinkBox from "@/components/LoadingBlinkBox";
+import Image from "next/image";
+
+export const FeatureImage = ({
+  src,
+  loading,
+}: {
+  src: string;
+  loading: boolean;
+}) => {
+  return (
+    <LoadingBlinkBox loading={loading} loadingHeight="100%" loadingWidth="100%">
+      <div tw="relative w-full h-full flex justify-center">
+        <Image src={src} alt="Feature Image" fill />
+      </div>
+    </LoadingBlinkBox>
+  );
+};
+
+export default FeatureImage;
diff --git a/src/components/Blog/BlogArticleCard/FeatureImage/index.tsx b/src/components/Blog/BlogArticleCard/FeatureImage/index.tsx
new file mode 100644
index 0000000..a05ebc5
--- /dev/null
+++ b/src/components/Blog/BlogArticleCard/FeatureImage/index.tsx
@@ -0,0 +1 @@
+export { default } from "./cmp";
diff --git a/src/components/Blog/BlogArticleCard/Headline/cmp.tsx b/src/components/Blog/BlogArticleCard/Headline/cmp.tsx
new file mode 100644
index 0000000..9e99c49
--- /dev/null
+++ b/src/components/Blog/BlogArticleCard/Headline/cmp.tsx
@@ -0,0 +1,20 @@
+import LoadingBlinkBox from "@/components/LoadingBlinkBox";
+import { StyledHeadline } from "./styles";
+
+export const Headline = ({
+  children,
+  size,
+  loading,
+}: {
+  children: React.ReactNode;
+  size: string;
+  loading: boolean;
+}) => {
+  return (
+    <LoadingBlinkBox loading={loading} loadingHeight="3rem" loadingWidth="100%">
+      <StyledHeadline size={size}>{children}</StyledHeadline>
+    </LoadingBlinkBox>
+  );
+};
+
+export default Headline;
diff --git a/src/components/Blog/BlogArticleCard/Headline/index.tsx b/src/components/Blog/BlogArticleCard/Headline/index.tsx
new file mode 100644
index 0000000..a05ebc5
--- /dev/null
+++ b/src/components/Blog/BlogArticleCard/Headline/index.tsx
@@ -0,0 +1 @@
+export { default } from "./cmp";
diff --git a/src/components/Blog/BlogArticleCard/Headline/styles.tsx b/src/components/Blog/BlogArticleCard/Headline/styles.tsx
new file mode 100644
index 0000000..ea40a93
--- /dev/null
+++ b/src/components/Blog/BlogArticleCard/Headline/styles.tsx
@@ -0,0 +1,14 @@
+import styled from "styled-components";
+import tw from "twin.macro";
+
+export const StyledHeadline = styled(
+  ({ children, size: string, className: styledClassName }) => {
+    return <p className={`tp-h7 text-base2 ${styledClassName}`}>{children}</p>;
+  }
+)`
+  ${tw`line-clamp-2 whitespace-pre-wrap`}
+  ${({ size }) => {
+    console.log(size);
+    if (size === "full") return tw`mb-4`;
+  }}
+`;
diff --git a/src/components/Blog/BlogArticleCard/ThumbnailImage/cmp.tsx b/src/components/Blog/BlogArticleCard/ThumbnailImage/cmp.tsx
new file mode 100644
index 0000000..01f65aa
--- /dev/null
+++ b/src/components/Blog/BlogArticleCard/ThumbnailImage/cmp.tsx
@@ -0,0 +1,20 @@
+import LoadingBlinkBox from "@/components/LoadingBlinkBox";
+import Image from "next/image";
+
+export const ThumbnailImage = ({
+  src,
+  loading,
+}: {
+  src: string;
+  loading: boolean;
+}) => {
+  return (
+    <LoadingBlinkBox loading={loading} loadingHeight="100%" loadingWidth="100%">
+      <div className="fx-grain-5" tw="w-full h-full">
+        <Image src={src} alt="Thumbnail Image" fill tw="object-cover" />
+      </div>
+    </LoadingBlinkBox>
+  );
+};
+
+export default ThumbnailImage;
diff --git a/src/components/Blog/BlogArticleCard/ThumbnailImage/index.tsx b/src/components/Blog/BlogArticleCard/ThumbnailImage/index.tsx
new file mode 100644
index 0000000..a05ebc5
--- /dev/null
+++ b/src/components/Blog/BlogArticleCard/ThumbnailImage/index.tsx
@@ -0,0 +1 @@
+export { default } from "./cmp";
diff --git a/src/components/Blog/BlogArticleCard/Title/cmp.tsx b/src/components/Blog/BlogArticleCard/Title/cmp.tsx
new file mode 100644
index 0000000..94f2f89
--- /dev/null
+++ b/src/components/Blog/BlogArticleCard/Title/cmp.tsx
@@ -0,0 +1,30 @@
+import LoadingBlinkBox from "@/components/LoadingBlinkBox";
+import { StyledTitle } from "./styles";
+
+export const Title = ({
+  children,
+  size,
+  loading,
+}: {
+  children: React.ReactNode;
+  size: string;
+  loading: boolean;
+}) => {
+  const loadingHeight = () => {
+    if (size === "highlighted" || size === "full") return "6rem";
+    if (size === "xl") return "4rem";
+    else return "2rem";
+  };
+
+  return (
+    <LoadingBlinkBox
+      loading={loading}
+      loadingHeight={loadingHeight()}
+      loadingWidth="100%"
+    >
+      <StyledTitle size={size}>{children}</StyledTitle>
+    </LoadingBlinkBox>
+  );
+};
+
+export default Title;
diff --git a/src/components/Blog/BlogArticleCard/Title/index.tsx b/src/components/Blog/BlogArticleCard/Title/index.tsx
new file mode 100644
index 0000000..a05ebc5
--- /dev/null
+++ b/src/components/Blog/BlogArticleCard/Title/index.tsx
@@ -0,0 +1 @@
+export { default } from "./cmp";
diff --git a/src/components/Blog/BlogArticleCard/Title/styles.tsx b/src/components/Blog/BlogArticleCard/Title/styles.tsx
new file mode 100644
index 0000000..2f750a0
--- /dev/null
+++ b/src/components/Blog/BlogArticleCard/Title/styles.tsx
@@ -0,0 +1,43 @@
+import { TextGradient } from "@aleph-front/core";
+import styled from "styled-components";
+import tw from "twin.macro";
+
+export const StyledTitle = styled(
+  ({ children, size, className: styledClassName }) => {
+    switch (size) {
+      case "xl":
+        return (
+          <TextGradient
+            type="h2"
+            className={`xs:tp-h4 xl:tp-h2 ${styledClassName}`}
+          >
+            {children}
+          </TextGradient>
+        );
+      case "full":
+        return (
+          <TextGradient type="h2" className={styledClassName}>
+            {children}
+          </TextGradient>
+        );
+      case "highlighted":
+        return (
+          <TextGradient
+            type="h2"
+            className={`tp-h1 lg:tp-header ${styledClassName}`}
+          >
+            {children}
+          </TextGradient>
+        );
+      default:
+        return (
+          <p className={`tp-h6 text-base2 ${styledClassName} `}>{children}</p>
+        );
+    }
+  }
+)`
+  ${tw`line-clamp-3 whitespace-pre-wrap w-fit`}
+  ${({ size }) => {
+    if (size === "xl" || size == "highlighted") return tw`mb-0`;
+  }}
+`;
diff --git a/src/components/Blog/BlogArticleCard/cmp.tsx b/src/components/Blog/BlogArticleCard/cmp.tsx
index 441aada..6f04f17 100644
--- a/src/components/Blog/BlogArticleCard/cmp.tsx
+++ b/src/components/Blog/BlogArticleCard/cmp.tsx
@@ -1,10 +1,15 @@
 import React from "react";
+import { Col, Row } from "@aleph-front/core";
 import { BlogArticleCardProps } from "./types";
-import Image from "next/image";
-import { Button, Col, Icon, Row, TextGradient } from "@aleph-front/core";
-import LoadingBlinkBox from "@/components/LoadingBlinkBox";
+import Title from "./Title";
+import Description from "./Description";
+import Headline from "./Headline";
+import ThumbnailImage from "./ThumbnailImage";
+import FeatureImage from "./FeatureImage";
+import Category from "./Category";
+import ActionButtons from "./ActionButtons";
+import { CardWrapper, HeaderWrapper, ThumbnailImageWrapper } from "./styles";
 
-// TODO: Refactor to use styled components
 // TODO: Move to front-core (probably)
 export const BlogArticleCard = ({
   title,
@@ -18,394 +23,107 @@ export const BlogArticleCard = ({
   loading = false,
 }: BlogArticleCardProps) => {
   switch (size) {
-    case "md":
-      return (
-        <div className="bg-white" tw="w-full h-fit p-3">
-          <div tw="relative w-full h-20 mb-2">
-            <LoadingBlinkBox
-              loading={loading}
-              loadingHeight="100%"
-              loadingWidth="100%"
-            >
-              <div className="fx-grain-5" tw="w-full h-full">
-                <Image
-                  src={thumbnailImage}
-                  alt="Article Image"
-                  fill
-                  tw="object-cover"
-                />
-              </div>
-            </LoadingBlinkBox>
-          </div>
-          <div tw="mb-2">
-            <LoadingBlinkBox
-              loading={loading}
-              loadingHeight="1rem"
-              loadingWidth="25%"
-            >
-              <p className="tp-info text-base3">{category}</p>
-            </LoadingBlinkBox>
-            <LoadingBlinkBox
-              loading={loading}
-              loadingHeight="2rem"
-              loadingWidth="100%"
-            >
-              <p
-                className="tp-h6 text-base2"
-                tw="line-clamp-3 whitespace-pre-wrap"
-              >
-                {title}
-              </p>
-            </LoadingBlinkBox>
-          </div>
-          <LoadingBlinkBox
-            loading={loading}
-            loadingHeight="6rem"
-            loadingWidth="100%"
-          >
-            <p
-              className="tp-body"
-              tw="mb-6 text-ellipsis line-clamp-3 whitespace-pre-wrap"
-            >
-              {description}
-            </p>
-          </LoadingBlinkBox>
-          <LoadingBlinkBox
-            loading={loading}
-            loadingHeight="3rem"
-            loadingWidth="66%"
-          >
-            <Button
-              as="a"
-              variant="secondary"
-              size="lg"
-              kind="gradient"
-              href={blogArticleUrl}
-            >
-              Read me
-            </Button>
-          </LoadingBlinkBox>
-        </div>
-      );
-    case "lg":
-      return (
-        <div className="bg-white" tw="w-full h-fit p-3">
-          <div tw="relative w-full h-48 mb-2">
-            <LoadingBlinkBox
-              loading={loading}
-              loadingHeight="100%"
-              loadingWidth="100%"
-            >
-              <div className="fx-grain-5" tw="w-full h-full">
-                <Image src={thumbnailImage} alt="Article Image" fill />
-              </div>
-            </LoadingBlinkBox>
-          </div>
-
-          <div tw="mb-2 md:max-w-[75%]">
-            <LoadingBlinkBox
-              loading={loading}
-              loadingHeight="1rem"
-              loadingWidth="25%"
-            >
-              <p className="tp-info text-base3">{category}</p>
-            </LoadingBlinkBox>
-            <LoadingBlinkBox
-              loading={loading}
-              loadingHeight="2rem"
-              loadingWidth="100%"
-            >
-              <p
-                className="tp-h6 text-base2"
-                tw="line-clamp-3 whitespace-pre-wrap"
-              >
-                {title}
-              </p>
-            </LoadingBlinkBox>
-          </div>
-          <LoadingBlinkBox
-            loading={loading}
-            loadingHeight="6rem"
-            loadingWidth="100%"
-          >
-            <p
-              className="tp-body"
-              tw="md:max-w-[66%] mb-6 text-ellipsis line-clamp-3 whitespace-pre-wrap"
-            >
-              {description}
-            </p>
-          </LoadingBlinkBox>
-          <LoadingBlinkBox
-            loading={loading}
-            loadingHeight="3rem"
-            loadingWidth="66%"
-          >
-            <Button
-              as="a"
-              variant="secondary"
-              size="lg"
-              kind="gradient"
-              href={blogArticleUrl}
-            >
-              Read me
-            </Button>
-          </LoadingBlinkBox>
-        </div>
-      );
-    case "xl":
-      return (
-        <div className="bg-white" tw="w-full h-fit p-6">
-          <div tw="relative w-full h-48 mb-6">
-            <LoadingBlinkBox
-              loading={loading}
-              loadingHeight="100%"
-              loadingWidth="100%"
-            >
-              <div className="fx-grain-5" tw="w-full h-full">
-                <Image src={thumbnailImage} alt="Article Image" fill />
-              </div>
-            </LoadingBlinkBox>
-          </div>
-          <div tw="mb-4">
-            <LoadingBlinkBox
-              loading={loading}
-              loadingHeight="1rem"
-              loadingWidth="25%"
-            >
-              <p className="tp-info text-base3">{category}</p>
-            </LoadingBlinkBox>
-            <LoadingBlinkBox
-              loading={loading}
-              loadingHeight="4rem"
-              loadingWidth="100%"
-            >
-              <TextGradient
-                type="h2"
-                className="xs:tp-h4 xl:tp-h2"
-                tw="mb-0 line-clamp-3 w-fit"
-              >
-                {title}
-              </TextGradient>
-              <p
-                className="tp-h7 text-base2"
-                tw="text-ellipsis line-clamp-2 whitespace-pre-wrap"
-              >
-                {headline}
-              </p>
-            </LoadingBlinkBox>
-          </div>
-          <LoadingBlinkBox
-            loading={loading}
-            loadingHeight="6rem"
-            loadingWidth="100%"
-          >
-            <p
-              className="tp-body"
-              tw="md:max-w-[33%] mb-12 text-ellipsis line-clamp-3 whitespace-pre-wrap"
-            >
-              {description}
-            </p>
-          </LoadingBlinkBox>
-          <LoadingBlinkBox
-            loading={loading}
-            loadingHeight="3rem"
-            loadingWidth="66%"
-          >
-            <Button
-              as="a"
-              variant="secondary"
-              size="lg"
-              kind="gradient"
-              href={blogArticleUrl}
-            >
-              Read me
-            </Button>
-          </LoadingBlinkBox>
-        </div>
-      );
     case "full":
-      const imageCmpFull = (
-        <LoadingBlinkBox
-          loading={loading}
-          loadingHeight="100%"
-          loadingWidth="100%"
-        >
-          <div tw="relative w-full h-full flex justify-center">
-            <Image src={"/blog/feature-image.svg"} alt="Article Image" fill />
-          </div>
-        </LoadingBlinkBox>
-      );
-
       return (
-        <div className="fx-grain-2" tw="w-full h-fit p-12">
+        <CardWrapper size={size} className="fx-grain-2">
           <div tw="mb-2">
-            <LoadingBlinkBox
-              loading={loading}
-              loadingHeight="1rem"
-              loadingWidth="25%"
-            >
-              <p className="tp-info text-base3">{category}</p>
-            </LoadingBlinkBox>
-            <LoadingBlinkBox
-              loading={loading}
-              loadingHeight="6rem"
-              loadingWidth="100%"
-            >
-              <TextGradient type="h2" tw="line-clamp-3 w-fit">
-                {title}
-              </TextGradient>
-            </LoadingBlinkBox>
+            <Category loading={loading}>{category?.displayName}</Category>
+            <Title size={size} loading={loading}>
+              {title}
+            </Title>
           </div>
           <Row xs={1} lg={2} gap="1.5rem">
             <Col>
               <div tw="flex flex-col justify-between h-full">
                 <div>
-                  <LoadingBlinkBox
-                    loading={loading}
-                    loadingHeight="4rem"
-                    loadingWidth="100%"
-                  >
-                    <p
-                      className="tp-h7 text-base2"
-                      tw="mb-4 text-ellipsis line-clamp-2"
-                    >
-                      {headline}
-                    </p>
-                  </LoadingBlinkBox>
-                  <div tw="lg:hidden w-full h-96 mb-12">{imageCmpFull}</div>
-                  <LoadingBlinkBox
-                    loading={loading}
-                    loadingHeight="6rem"
-                    loadingWidth="66%"
-                  >
-                    <p
-                      className="tp-body"
-                      tw="md:max-w-[66%] mb-12 text-ellipsis line-clamp-3"
-                    >
-                      {description}
-                    </p>
-                  </LoadingBlinkBox>
+                  <Headline size={size} loading={loading}>
+                    {headline}
+                  </Headline>
+                  <div tw="lg:hidden w-full h-96 mb-12">
+                    <FeatureImage src={featureImage} loading={loading} />
+                  </div>
+                  <Description size={size} loading={loading}>
+                    {description}
+                  </Description>
                 </div>
                 <div>
-                  <LoadingBlinkBox
+                  <ActionButtons
+                    size={size}
+                    blogArticleUrl={blogArticleUrl}
+                    category={category}
                     loading={loading}
-                    loadingHeight="3rem"
-                    loadingWidth="50%"
-                  >
-                    <Button
-                      as="a"
-                      variant="secondary"
-                      size="lg"
-                      kind="gradient"
-                      href={blogArticleUrl}
-                    >
-                      Read me
-                    </Button>
-                  </LoadingBlinkBox>
+                  />
                 </div>
               </div>
             </Col>
-            <Col tw="hidden lg:inline">{imageCmpFull}</Col>
+            <Col tw="hidden lg:inline">
+              <FeatureImage src={featureImage} loading={loading} />
+            </Col>
           </Row>
-        </div>
+        </CardWrapper>
       );
     case "highlighted":
-      const imageCmpHighlighted = (
-        <LoadingBlinkBox
-          loading={loading}
-          loadingHeight="100%"
-          loadingWidth="100%"
-        >
-          <div tw="relative w-full h-full flex justify-center">
-            <Image src={featureImage} alt="Article Image" fill />
-          </div>
-        </LoadingBlinkBox>
-      );
-
       return (
-        <div tw="w-full h-fit py-10">
+        <CardWrapper size={size}>
           <Row xs={1} lg={3} gap="1.5rem">
             <Col lg={2}>
               <div tw="mb-2">
-                <LoadingBlinkBox
-                  loading={loading}
-                  loadingHeight="1rem"
-                  loadingWidth="25%"
-                >
-                  <p className="tp-info text-base3">{category}</p>
-                </LoadingBlinkBox>
-                <LoadingBlinkBox
-                  loading={loading}
-                  loadingHeight="6rem"
-                  loadingWidth="100%"
-                >
-                  <TextGradient
-                    type="h2"
-                    className="tp-h1 lg:tp-header"
-                    tw="line-clamp-3 w-fit mb-0"
-                  >
-                    {title}
-                  </TextGradient>
-                </LoadingBlinkBox>
-                <LoadingBlinkBox
-                  loading={loading}
-                  loadingHeight="4rem"
-                  loadingWidth="100%"
-                >
-                  <p
-                    className="tp-h7 text-base2"
-                    tw="text-ellipsis line-clamp-2"
-                  >
-                    {headline}
-                  </p>
-                </LoadingBlinkBox>
+                <Category loading={loading}>{category?.displayName}</Category>
+                <Title size={size} loading={loading}>
+                  {title}
+                </Title>
+                <Headline size={size} loading={loading}>
+                  {headline}
+                </Headline>
+              </div>
+              <div tw="lg:hidden w-full h-96 mb-12">
+                <FeatureImage src={featureImage} loading={loading} />
               </div>
-              <div tw="lg:hidden w-full h-96 mb-12">{imageCmpHighlighted}</div>
               <div tw="flex flex-col justify-between gap-6">
-                <div tw="lg:max-w-[66%] mb-6">
-                  <LoadingBlinkBox
-                    loading={loading}
-                    loadingHeight="6rem"
-                    loadingWidth="100%"
-                  >
-                    <p className="tp-body" tw="text-ellipsis line-clamp-3">
-                      {description}
-                    </p>
-                  </LoadingBlinkBox>
-                </div>
-                <div tw="flex gap-6">
-                  <LoadingBlinkBox
-                    loading={loading}
-                    loadingHeight="3rem"
-                    loadingWidth="50%"
-                  >
-                    <Button
-                      as="a"
-                      variant="primary"
-                      size="lg"
-                      kind="gradient"
-                      href={blogArticleUrl}
-                    >
-                      Read the article
-                    </Button>
-                    <Button
-                      as="a"
-                      href="/blog/categories"
-                      target="_self"
-                      size="sm"
-                      variant="textOnly"
-                      color="main0"
-                    >
-                      All {category}
-                      <Icon name="arrow-right" size="sm" />
-                    </Button>
-                  </LoadingBlinkBox>
-                </div>
+                <Description size={size} loading={loading}>
+                  {description}
+                </Description>
+                <ActionButtons
+                  size={size}
+                  blogArticleUrl={blogArticleUrl}
+                  category={category}
+                  loading={loading}
+                />
               </div>
             </Col>
-            <Col tw="hidden lg:inline">{imageCmpHighlighted}</Col>
+            <Col tw="hidden lg:inline">
+              <FeatureImage src={featureImage} loading={loading} />
+            </Col>
           </Row>
-        </div>
+        </CardWrapper>
+      );
+    default:
+      return (
+        <CardWrapper size={size} className="bg-white">
+          <ThumbnailImageWrapper size={size}>
+            <ThumbnailImage src={thumbnailImage} loading={loading} />
+          </ThumbnailImageWrapper>
+          <HeaderWrapper size={size}>
+            <Category loading={loading}>{category?.displayName}</Category>
+            <Title size={size} loading={loading}>
+              {title}
+            </Title>
+            {size === "xl" && (
+              <Headline size={size} loading={loading}>
+                {headline}
+              </Headline>
+            )}
+          </HeaderWrapper>
+          <Description size={size} loading={loading}>
+            {description}
+          </Description>
+          <ActionButtons
+            size={size}
+            blogArticleUrl={blogArticleUrl}
+            category={category}
+            loading={loading}
+          />
+        </CardWrapper>
       );
   }
 };
diff --git a/src/components/Blog/BlogArticleCard/styles.tsx b/src/components/Blog/BlogArticleCard/styles.tsx
new file mode 100644
index 0000000..3b04ba3
--- /dev/null
+++ b/src/components/Blog/BlogArticleCard/styles.tsx
@@ -0,0 +1,33 @@
+import styled from "styled-components";
+import tw from "twin.macro";
+
+export const CardWrapper = styled.div<{ size: string }>`
+  ${tw`w-full h-fit`}
+  ${({ size }) => {
+    if (size === "md" || size === "lg") return tw`p-3`;
+    else if (size === "xl") return tw`p-6`;
+    else if (size === "full") return tw`p-12`;
+    else if (size === "highlighted") return tw`py-10`;
+  }}
+`;
+
+export const ThumbnailImageWrapper = styled.div<{ size: string }>`
+  ${tw`relative w-full`}
+  ${({ size }) => {
+    switch (size) {
+      case "md":
+        return tw`h-20 mb-2`;
+      case "lg":
+        return tw`h-48 mb-2`;
+      case "xl":
+        return tw`h-48 mb-6`;
+    }
+  }}
+`;
+
+export const HeaderWrapper = styled.div<{ size: string }>`
+  ${({ size }) => {
+    if (size === "md" || size === "lg") return tw`mb-2`;
+    else if (size === "xl") return tw`mb-4`;
+  }}
+`;
diff --git a/src/components/Blog/BlogArticleCard/types.ts b/src/components/Blog/BlogArticleCard/types.ts
index 6a6e762..7f66f1c 100644
--- a/src/components/Blog/BlogArticleCard/types.ts
+++ b/src/components/Blog/BlogArticleCard/types.ts
@@ -1,11 +1,13 @@
+import { BlogCategoryProps } from "@/types/blog/BlogCategoryProps";
+
 export type BlogArticleCardProps = {
-  title: string;
-  headline: string;
-  description: string;
+  title?: string;
+  headline?: string;
+  description?: string;
   thumbnailImage?: string;
   featureImage?: string;
-  category: string;
-  blogArticleUrl: string;
+  category?: BlogCategoryProps;
+  blogArticleUrl?: string;
   size?: "md" | "lg" | "xl" | "full" | "highlighted";
   loading?: boolean;
 };
diff --git a/src/components/Blog/BlogArticlesGrid/cmp.tsx b/src/components/Blog/BlogArticlesGrid/cmp.tsx
index 58d43d8..4988f81 100644
--- a/src/components/Blog/BlogArticlesGrid/cmp.tsx
+++ b/src/components/Blog/BlogArticlesGrid/cmp.tsx
@@ -9,6 +9,7 @@ import { GetContentOptions } from "@builder.io/sdk";
 import { useSearchParams } from "next/navigation";
 import { DEFAULT_BUILDER_REQUEST_OPTIONS } from "@/constants/blog";
 import { useTheme } from "styled-components";
+import { BlogCategoryProps } from "@/types/blog/BlogCategoryProps";
 
 function buildFilters(searchParams: any, pageCategorization: any): any {
   const queryParams = new URLSearchParams(searchParams);
@@ -142,13 +143,6 @@ export const AllBlogArticles = ({
         {Array.from({ length: articlesPerPage }).map((_, index) => (
           <BlogArticleCard
             key={`loading-article-${index}`}
-            title={""}
-            headline={""}
-            description={""}
-            thumbnailImage={""}
-            featureImage={""}
-            blogArticleUrl={""}
-            category={""}
             size={articleSize}
             loading
           />
@@ -173,7 +167,7 @@ export const AllBlogArticles = ({
                 featureImage={blogArticle.featureImage}
                 blogArticleUrl={blogArticle.url}
                 size={articleSize}
-                category={blogArticle.category.value.data.displayName}
+                category={blogArticle.category.value.data as BlogCategoryProps}
               />
             );
           })}