diff --git a/src/components/NewsComp.astro b/src/components/NewsComp.astro
index aaed87c..ff032b6 100644
--- a/src/components/NewsComp.astro
+++ b/src/components/NewsComp.astro
@@ -29,21 +29,20 @@ const articles = await fetchArticles({
               <h3 class="text-xl text-white font-bold mt-2">{article.title}</h3>
               <time
                 datetime={article.meta.first_published_at}
-                class="text-sm text-gray-500"
-              >
+                class="text-sm text-gray-500">
                 {new Date(article.meta.first_published_at).toLocaleDateString(
                   "en-US",
                   {
                     year: "numeric",
                     month: "long",
                     day: "numeric",
-                  },
+                  }
                 )}
               </time>
             </div>
             {article.main_image && (
               <img
-                src={article.main_image.full_url}
+                src={article.main_image.sizes.thumbnail.url}
                 alt={article.main_image.alt}
                 class="w-24 h-24 object-cover ml-2 rounded-lg"
               />
diff --git a/src/components/sections/NewsComp.astro b/src/components/sections/NewsComp.astro
index 31bc3f8..e1c139b 100644
--- a/src/components/sections/NewsComp.astro
+++ b/src/components/sections/NewsComp.astro
@@ -48,10 +48,9 @@ const articles = await fetchArticles({
                     </h3>
                     <time
                       datetime={article.meta.first_published_at}
-                      class="text-sm text-gray-500"
-                    >
+                      class="text-sm text-gray-500">
                       {new Date(
-                        article.meta.first_published_at,
+                        article.meta.first_published_at
                       ).toLocaleDateString("en-US", {
                         year: "numeric",
                         month: "long",
@@ -61,7 +60,7 @@ const articles = await fetchArticles({
                   </div>
                   {article.main_image && (
                     <img
-                      src={article.main_image.full_url}
+                      src={article.main_image.sizes.thumbnail.url}
                       alt={article.main_image.alt}
                       class="w-24 h-24 object-cover ml-2 rounded-lg"
                     />
diff --git a/src/pages/news/[slug].astro b/src/pages/news/[slug].astro
index 2c8b808..c50691e 100644
--- a/src/pages/news/[slug].astro
+++ b/src/pages/news/[slug].astro
@@ -1,6 +1,4 @@
 ---
-import type { Article } from "../../utils";
-
 import H1 from "../../components/H1.astro";
 import Main from "../../components/Main.astro";
 import Layout from "../../layouts/Layout.astro";
@@ -33,7 +31,7 @@ const processEmbedTags = (html: string) => {
     /<embed[^>]+embedtype="image"[^>]+id="(\d+)"[^>]+alt="([^"]+)"[^>]*>/g,
     (match, id, alt) => {
       return `<img src="${imageBaseUrl}${id}" alt="${alt}"/>`;
-    },
+    }
   );
 };
 
@@ -62,8 +60,7 @@ const finishedHtml = processEmbedTags(article.body);
     <!-- Publish Date -->
     <time
       datetime={article.meta.first_published_at}
-      class="text-sm text-gray-500 mb-2 block"
-    >
+      class="text-sm text-gray-500 mb-2 block">
       {new Date(article.meta.first_published_at).toLocaleDateString()}
     </time>
     <!-- Author -->
@@ -83,7 +80,8 @@ const finishedHtml = processEmbedTags(article.body);
     {
       article.main_image && (
         <img
-          src={article.main_image.full_url}
+          src={article.main_image.sizes.large.url}
+          srcset={`${article.main_image.sizes.large.url} 500w, ${article.main_image.sizes.extra_large.url} 1000w`}
           alt={article.main_image.alt}
           class="w-auto h-auto mb-4"
         />
diff --git a/src/utils/articles.ts b/src/utils/articles.ts
index 214d2af..164c79d 100644
--- a/src/utils/articles.ts
+++ b/src/utils/articles.ts
@@ -1,88 +1,113 @@
 export interface Article {
+  id: number;
+  meta: {
+    type: string;
+    detail_url: string;
+    html_url: string;
+    slug: string;
+    first_published_at: string;
+  };
+  title: string;
+  intro: string;
+  body: string;
+  contributors: Array<{
     id: number;
-    meta: {
-        type: string;
-        detail_url: string;
-        html_url: string;
-        slug: string;
-        first_published_at: string;
-    };
+    name: string;
+    contribution_type: string;
+    image?: string;
+  }>;
+  tags: Array<{
+    id: number;
+    name: string;
+    slug: string;
+  }>;
+  main_image?: {
     title: string;
-    intro: string;
-    body: string;
-    contributors: Array<{
-        id: number;
-        name: string;
-        contribution_type: string;
-        image?: string;
-    }>;
-    tags: Array<{
-        id: number;
-        name: string;
-        slug: string;
-    }>;
-    main_image?: {
+    alt: string;
+    url: string;
+    sizes: {
+      thumbnail: {
+        url: string;
+        width: number;
+        height: number;
+      };
+      small: {
+        url: string;
+        width: number;
+        height: number;
+      };
+      medium: {
         url: string;
-        full_url: string;
         width: number;
         height: number;
-        alt: string;
+      };
+      large: {
+        url: string;
+        width: number;
+        height: number;
+      };
+      extra_large: {
+        url: string;
+        width: number;
+        height: number;
+      };
     };
+  };
 }
 
 export interface FetchArticlesProps {
-    api_url: string;
-    limit?: number;
-    offset?: number;
-    tags?: string[];
+  api_url: string;
+  limit?: number;
+  offset?: number;
+  tags?: string[];
 }
 
 export const fetchArticles = async ({
-    api_url,
-    tags = [],
-    limit = 6,
-    offset = 0,
+  api_url,
+  tags = [],
+  limit = 6,
+  offset = 0,
 }: FetchArticlesProps): Promise<Article[]> => {
-    const url = new URL(`${api_url}api/v2/news/`);
-    url.searchParams.set("fields", "title,tags,first_published_at,main_image");
-    url.searchParams.set("limit", limit.toString(10));
-    url.searchParams.set("offset", offset.toString(10));
+  const url = new URL(`${api_url}api/v2/news/`);
+  url.searchParams.set("fields", "title,tags,first_published_at,main_image");
+  url.searchParams.set("limit", limit.toString(10));
+  url.searchParams.set("offset", offset.toString(10));
 
-    if (tags?.length) {
-        url.searchParams.set("tags", tags.join(","));
-    }
+  if (tags?.length) {
+    url.searchParams.set("tags", tags.join(","));
+  }
 
-    const response = await fetch(url.toString());
-    const data = await response.json();
-    const articles: Article[] = data.items;
-    return articles;
+  const response = await fetch(url.toString());
+  const data = await response.json();
+  const articles: Article[] = data.items;
+  return articles;
 };
 
 export const fetchArticleIdBySlug = async ({
-    slug,
-    api_url,
+  slug,
+  api_url,
 }: {
-    slug: string;
-    api_url: string;
+  slug: string;
+  api_url: string;
 }): Promise<number | null> => {
-    const response = await fetch(`${api_url}api/v2/news/?&slug=${slug}`);
-    const data = await response.json();
-    const articles: Article[] = data.items;
-    if (articles.length > 0) {
-        return articles[0].id;
-    } else {
-        return null;
-    }
+  const response = await fetch(`${api_url}api/v2/news/?&slug=${slug}`);
+  const data = await response.json();
+  const articles: Article[] = data.items;
+  if (articles.length > 0) {
+    return articles[0].id;
+  } else {
+    return null;
+  }
 };
 
 export const fetchArticleById = async ({
-    id,
-    api_url,
+  id,
+  api_url,
 }: {
-    id: number;
-    api_url: string;
+  id: number;
+  api_url: string;
 }): Promise<Article> => {
-    const response = await fetch(`${api_url}api/v2/news/${id}/`);
-    const data = await response.json();
-    return data;
+  const response = await fetch(`${api_url}api/v2/news/${id}/`);
+  const data = await response.json();
+  return data;
 };