diff --git a/src/components/top/News.astro b/src/components/top/News.astro
new file mode 100644
index 0000000..d829007
--- /dev/null
+++ b/src/components/top/News.astro
@@ -0,0 +1,81 @@
+---
+import { news } from "./news";
+import TextLink from "../ui/TextLink.astro";
+---
+
+<section id="news">
+  <div class="news-list-container">
+    <ul class="news-list">
+      {
+        news.map((news) => (
+          <li class="news-item">
+            <span class="news-date text-body-large-strong">{news.date}</span>
+            {news.url ? (
+              <TextLink
+                href={news.url}
+                text={news.title}
+                isBlankLink={news.isBlankLink}
+              />
+            ) : (
+              <span class="news-title text-body-large-strong">
+                {news.title}
+              </span>
+            )}
+          </li>
+        ))
+      }
+    </ul>
+  </div>
+</section>
+
+<style>
+  section#news {
+    background-color: var(--surface-secondary);
+  }
+
+  .news-date {
+    color: var(--text-secondary);
+    width: 90px;
+  }
+
+  .news-list-container {
+    max-width: 1031px;
+    padding: var(--space-s) var(--space-m);
+    margin: 0 auto;
+    box-sizing: border-box;
+  }
+
+  .news-list {
+    list-style: none;
+    margin: 0;
+    max-height: 111px;
+    overflow-y: scroll;
+    padding: 0;
+  }
+
+  .news-item {
+    display: flex;
+    align-items: center;
+    gap: var(--space-m);
+    padding: var(--space-xxs) 0;
+    width: fit-content;
+  }
+
+  .news-title {
+    color: var(--text-primary);
+  }
+
+  @media screen and (max-width: 768px) {
+    .news-list-container {
+      padding: var(--space-xxs) var(--space-s);
+    }
+
+    .news-item {
+      flex-direction: column;
+      align-items: flex-start;
+      gap: var(--space-xxxs);
+      padding: var(--space-xxs) 0;
+      width: 100%;
+    }
+  }
+</style>
diff --git a/src/components/top/news.ts b/src/components/top/news.ts
new file mode 100644
index 0000000..449d1ab
--- /dev/null
+++ b/src/components/top/news.ts
@@ -0,0 +1,19 @@
+export type News = {
+  title: string;
+  date: string;
+  url?: string;
+  isBlankLink?: boolean;
+};
+
+export const news: News[] = [
+  {
+    title: "スポンサーの募集を開始しました！",
+    date: "2026.03.25",
+    url: "https://docs.google.com/forms/d/e/1FAIpQLSdH5gsb4teQ5hdFi9GaCFtNdNNCw1G4qdzyw2NoSWYQCYplow/viewform",
+    isBlankLink: true,
+  },
+  {
+    title: "Webサイトを公開しました！",
+    date: "2026.03.04",
+  },
+];
diff --git a/src/components/ui/TextLink.astro b/src/components/ui/TextLink.astro
index 4b483e5..60b5a78 100644
--- a/src/components/ui/TextLink.astro
+++ b/src/components/ui/TextLink.astro
@@ -24,11 +24,11 @@ const { href, isBlankLink = false, text } = Astro.props as Props;
     text-decoration: none;
     display: flex;
     align-items: center;
-    justify-content: center;
+    justify-content: space-between;
     gap: var(--space-xxxs);
     color: var(--text-primary);
     cursor: pointer;
-    width: fit-content;
+    width: 100%;
   }
 
   a:hover {
@@ -40,6 +40,7 @@ const { href, isBlankLink = false, text } = Astro.props as Props;
     height: 20px;
     fill: var(--text-primary);
     margin-top: 2px;
+    flex-shrink: 0;
   }
 
   a:hover .link-icon {
diff --git a/src/pages/index.astro b/src/pages/index.astro
index cca371b..c389cdc 100644
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -1,5 +1,6 @@
 ---
 import MainVisual from "../components/top/MainVisual.astro";
+import News from "../components/top/News.astro";
 import Layout from "../layouts/Layout.astro";
 ---
 
@@ -31,5 +32,6 @@ import Layout from "../layouts/Layout.astro";
 <Layout title="Go Conference 2026">
   <main>
     <MainVisual />
+    <News />
   </main>
 </Layout>