diff --git a/app/(app)/articles/_client.tsx b/app/(app)/articles/_client.tsx
index ca47ed42..de1bc5da 100644
--- a/app/(app)/articles/_client.tsx
+++ b/app/(app)/articles/_client.tsx
@@ -7,13 +7,12 @@ import ArticleLoading from "@/components/ArticlePreview/ArticleLoading";
 import { useInView } from "react-intersection-observer";
 import { useSearchParams, useRouter } from "next/navigation";
 import Link from "next/link";
-import Image from "next/image";
-import challenge from "@/public/images/announcements/challenge.png";
 import { api } from "@/server/trpc/react";
 import SideBarSavedPosts from "@/components/SideBar/SideBarSavedPosts";
 import { useSession } from "next-auth/react";
 import { getCamelCaseFromLower } from "@/utils/utils";
 import PopularTagsLoading from "@/components/PopularTags/PopularTagsLoading";
+import CoduChallenge from "@/components/CoduChallenge/CoduChallenge";
 
 const ArticlesPage = () => {
   const searchParams = useSearchParams();
@@ -97,8 +96,8 @@ const ArticlesPage = () => {
             </select>
           </div>
         </div>
-        <div className="mx-auto grid-cols-12 gap-8 sm:max-w-2xl lg:grid lg:max-w-5xl">
-          <div className="relative md:col-span-8">
+        <div className="mx-auto grid-cols-12 gap-6 sm:max-w-2xl lg:grid lg:max-w-5xl">
+          <div className="relative md:col-span-7">
             <section>
               {status === "error" && (
                 <div className="mt-8">
@@ -157,29 +156,8 @@ const ArticlesPage = () => {
               </span>
             </section>
           </div>
-          <section className="col-span-4 hidden lg:block">
-            <div className="mb-8 mt-2 rounded border border-neutral-300 bg-white text-neutral-900 dark:border-neutral-600 dark:bg-neutral-900 dark:text-neutral-50">
-              <Link href="/articles/join-our-6-week-writing-challenge-quohtgqb">
-                <Image
-                  className="w-full rounded-t"
-                  src={challenge}
-                  alt={`"Codú Writing Challenge" text on white background`}
-                />
-              </Link>
-              <div className="my-3 break-words px-4 py-2 text-sm tracking-wide">
-                <Link
-                  className="block text-lg font-semibold leading-6 underline"
-                  href="/articles/join-our-6-week-writing-challenge-quohtgqb"
-                >
-                  Join the Codú writing challenge!
-                </Link>
-                <p className="my-3">
-                  Join our first Codú challenge! Write 6 articles in 6 weeks and
-                  earn a swag bag.
-                </p>
-                <p>Click the link to find out more.</p>
-              </div>
-            </div>
+          <section className="col-span-5 hidden lg:block">
+            <CoduChallenge />
             <h3 className="mb-4 mt-4 text-2xl font-semibold leading-6 tracking-wide">
               Popular topics
             </h3>
@@ -189,7 +167,6 @@ const ArticlesPage = () => {
                 tagsData.data.map(({ title }) => (
                   <Link
                     key={title}
-                    // only reason this is toLowerCase is to make url look nicer. Not needed for functionality
                     href={`/articles?tag=${title.toLowerCase()}`}
                     className="rounded border border-neutral-300 bg-white px-6 py-2 text-neutral-900 dark:border-neutral-600 dark:bg-neutral-900 dark:text-neutral-50"
                   >
diff --git a/app/(app)/page.tsx b/app/(app)/page.tsx
index 0b068d65..c539a68e 100644
--- a/app/(app)/page.tsx
+++ b/app/(app)/page.tsx
@@ -1,7 +1,5 @@
 import { Suspense } from "react";
-import Image from "next/image";
 import Link from "next/link";
-import challenge from "public/images/announcements/challenge.png";
 import Hero from "@/components/Hero/Hero";
 import TrendingPosts from "@/components/TrendingPosts/TrendingPosts";
 import TrendingLoading from "@/components/TrendingPosts/TrendingPostsLoading";
@@ -9,6 +7,7 @@ import SideBarSavedPosts from "@/components/SideBar/SideBarSavedPosts";
 import { getServerAuthSession } from "@/server/auth";
 import PopularTags from "@/components/PopularTags/PopularTags";
 import PopularTagsLoading from "@/components/PopularTags/PopularTagsLoading";
+import CoduChallenge from "@/components/CoduChallenge/CoduChallenge";
 
 const Home = async () => {
   const session = await getServerAuthSession();
@@ -47,33 +46,12 @@ const Home = async () => {
             Trending
           </h3>
         </div>
-        <div className="mx-auto grid-cols-12 gap-8 sm:max-w-2xl lg:grid lg:max-w-5xl">
+        <div className="mx-auto grid-cols-12 gap-6 sm:max-w-2xl lg:grid lg:max-w-5xl">
           <Suspense fallback={<TrendingLoading />}>
             <TrendingPosts session={session} />
           </Suspense>
           <section className="col-span-5 hidden lg:block">
-            <div className="mb-8 mt-2 rounded border border-neutral-300 bg-white text-neutral-900 dark:border-neutral-600 dark:bg-neutral-900 dark:text-neutral-50">
-              <Link href="/articles/join-our-6-week-writing-challenge-quohtgqb">
-                <Image
-                  className="w-full rounded-t"
-                  src={challenge}
-                  alt={`"Codú Writing Challenge" text on white background`}
-                />
-              </Link>
-              <div className="my-3 break-words px-4 py-2 text-sm tracking-wide">
-                <Link
-                  className="block text-lg font-semibold leading-6 underline"
-                  href="/articles/join-our-6-week-writing-challenge-quohtgqb"
-                >
-                  Join the Codú writing challenge!
-                </Link>
-                <p className="my-3">
-                  Join our first Codú challenge! Write 6 articles in 6 weeks and
-                  earn a swag bag.
-                </p>
-                <p>Click the link to find out more.</p>
-              </div>
-            </div>
+            <CoduChallenge />
             <h4 className="mb-4 mt-4 text-2xl font-semibold leading-6 tracking-wide">
               Popular topics
             </h4>
diff --git a/components/CoduChallenge/CoduChallenge.tsx b/components/CoduChallenge/CoduChallenge.tsx
new file mode 100644
index 00000000..cd4d350d
--- /dev/null
+++ b/components/CoduChallenge/CoduChallenge.tsx
@@ -0,0 +1,23 @@
+import Link from "next/link";
+
+const CoduChallenge = () => {
+  return (
+    <div className="mb-8 mt-2 overflow-hidden rounded border border-neutral-300 bg-gradient-to-br from-blue-600 to-pink-600 text-white shadow-lg dark:border-neutral-600">
+      <div className="p-6">
+        <h3 className="mb-2 text-2xl font-bold">Ready for a challenge?</h3>
+        <p className="mb-4 text-lg">
+          Write 6 articles in 6 weeks, showcase your expertise, and win
+          exclusive Codú swag!
+        </p>
+        <Link
+          href="/articles/join-our-6-week-writing-challenge-quohtgqb"
+          className="flex items-center justify-center rounded bg-white px-6 py-2 text-sm font-semibold text-pink-600 transition-colors hover:bg-pink-100"
+        >
+          Find out more
+        </Link>
+      </div>
+    </div>
+  );
+};
+
+export default CoduChallenge;
diff --git a/e2e/articles.spec.ts b/e2e/articles.spec.ts
index 039bbfca..4b1a9929 100644
--- a/e2e/articles.spec.ts
+++ b/e2e/articles.spec.ts
@@ -11,9 +11,9 @@ test.describe("Unauthenticated Articles Page", () => {
       page.getByRole("heading", { name: "Popular topics" }),
     ).toBeVisible({ visible: !isMobile });
 
-    await expect(
-      page.getByRole("link", { name: '"Codú Writing Challenge" text' }),
-    ).toBeVisible({ visible: !isMobile });
+    await expect(page.getByRole("link", { name: "Find out more" })).toBeVisible(
+      { visible: !isMobile },
+    );
   });
 
   test("Should not show bookmark article icon", async ({ page }) => {
@@ -66,9 +66,9 @@ test.describe("Authenticated Articles Page", () => {
       page.getByRole("heading", { name: "Popular topics" }),
     ).toBeVisible({ visible: !isMobile });
 
-    await expect(
-      page.getByRole("link", { name: '"Codú Writing Challenge" text' }),
-    ).toBeVisible({ visible: !isMobile });
+    await expect(page.getByRole("link", { name: "Find out more" })).toBeVisible(
+      { visible: !isMobile },
+    );
 
     await expect(
       page.getByRole("heading", { name: "Recent bookmarks" }),
@@ -81,9 +81,9 @@ test.describe("Authenticated Articles Page", () => {
       page.getByRole("heading", { name: "Popular topics" }),
     ).toBeVisible({ visible: !isMobile });
 
-    await expect(
-      page.getByRole("link", { name: '"Codú Writing Challenge" text' }),
-    ).toBeVisible({ visible: !isMobile });
+    await expect(page.getByRole("link", { name: "Find out more" })).toBeVisible(
+      { visible: !isMobile },
+    );
 
     await expect(
       page.getByRole("heading", { name: "Recent bookmarks" }),
diff --git a/public/images/announcements/challenge.png b/public/images/announcements/challenge.png
deleted file mode 100644
index c5a3c1ad..00000000
Binary files a/public/images/announcements/challenge.png and /dev/null differ