diff --git a/frontend/components/news/news-article.tsx b/frontend/components/news/news-article.tsx
index 439a89a7..2f626847 100644
--- a/frontend/components/news/news-article.tsx
+++ b/frontend/components/news/news-article.tsx
@@ -18,7 +18,7 @@ const sampleArticleCategories = [
 const NewsArticle = () => {
   return (
     <div className="flex flex-col-reverse py-10 lg:flex-row w-auto lg:py-6 xl:py-4 gap-x-16 border-y-[1px] lg:border-y-[0px] hover:bg-muted/70 lg:rounded-md px-4 md:px-8">
-      <div className="flex flex-col w-full lg:w-7/12">
+      <div className="flex flex-col w-full lg:w-7/12 2xl:w-9/12 3xl:w-10/12">
         <div className="flex w-full justify-between text-sm text-offblack">
           <span>
             <ArrowUpRightIcon className="inline-flex" size={16} /> CNA, Guardian
@@ -43,7 +43,7 @@ const NewsArticle = () => {
           ))}
         </div>
       </div>
-      <div className="flex w-full lg:w-5/12 mb-6 items-center">
+      <div className="flex w-full lg:w-5/12 2xl:w-3/12 3xl:w-2/12 mb-6 items-center">
         <Image
           alt=""
           height={154}
diff --git a/frontend/tailwind.config.ts b/frontend/tailwind.config.ts
index c08d88a0..a6f9925c 100644
--- a/frontend/tailwind.config.ts
+++ b/frontend/tailwind.config.ts
@@ -57,6 +57,10 @@ const config: Config = {
         md: "calc(var(--radius) - 2px)",
         sm: "calc(var(--radius) - 4px)",
       },
+      screens: {
+        "3xl": "1920px",
+        "4xl": "2560px",
+      },
     },
   },
   // eslint-disable-next-line @typescript-eslint/no-require-imports