diff --git a/src/components/top/Sponsors.astro b/src/components/top/Sponsors.astro
new file mode 100644
index 0000000..715cebe
--- /dev/null
+++ b/src/components/top/Sponsors.astro
@@ -0,0 +1,91 @@
+---
+import SectionTitle from "../ui/SectionTitle.astro";
+import SponsorList from "./sponsor/SponsorList.astro";
+import GopherList from "./sponsor/GopherList.astro";
+import {
+  goldSponsors,
+  silverSponsors,
+  drinkSponsors,
+  lunchSponsors,
+  bronzeSponsors,
+  gopherSponsors,
+  toolSponsors,
+} from "./sponsors";
+
+if (
+  goldSponsors.length === 0 &&
+  silverSponsors.length === 0 &&
+  drinkSponsors.length === 0 &&
+  lunchSponsors.length === 0 &&
+  bronzeSponsors.length === 0 &&
+  gopherSponsors.length === 0 &&
+  toolSponsors.length === 0
+) {
+  return null;
+}
+---
+
+<section id="sponsors">
+  <SectionTitle>
+    <span class="section-title">
+      <span style="color: var(--text-accent);">ス</span>ポンサー
+    </span>
+  </SectionTitle>
+
+  <SponsorList
+    size="learge"
+    sponsors={goldSponsors}
+    dialogSectionTitle="Goルドスポンサー"
+  >
+    <span style="color: var(--text-accent);">Go</span>ルド
+  </SponsorList>
+  <SponsorList
+    size="medium"
+    sponsors={silverSponsors}
+    dialogSectionTitle="シルバースポンサー">シルバー</SponsorList
+  >
+  <SponsorList
+    size="medium"
+    sponsors={drinkSponsors}
+    dialogSectionTitle="ドリンクスポンサー">ドリンク</SponsorList
+  >
+  <SponsorList
+    size="medium"
+    sponsors={lunchSponsors}
+    dialogSectionTitle="ランチスポンサー">ランチ</SponsorList
+  >
+  <SponsorList size="small" sponsors={bronzeSponsors}>ブロンズ</SponsorList>
+  <GopherList sponsors={gopherSponsors}>Gopher</GopherList>
+  <SponsorList size="learge" sponsors={toolSponsors}
+    >ツールスポンサー</SponsorList
+  >
+</section>
+
+<style>
+  section {
+    max-width: 1200px;
+    margin: 0 auto;
+    padding: var(--space-l) var(--space-m);
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-s);
+    align-items: center;
+  }
+
+  .section-title {
+    word-break: keep-all;
+    overflow-wrap: anywhere;
+    text-align: center;
+  }
+
+  .sponsor-section {
+    text-align: center;
+  }
+
+  @media screen and (max-width: 768px) {
+    section {
+      padding: var(--space-m) var(--space-s);
+      gap: var(--space-s);
+    }
+  }
+</style>
diff --git a/src/components/top/sponsor/Dialog.astro b/src/components/top/sponsor/Dialog.astro
new file mode 100644
index 0000000..4afd6c9
--- /dev/null
+++ b/src/components/top/sponsor/Dialog.astro
@@ -0,0 +1,135 @@
+---
+import { Image } from "astro:assets";
+import type { Sponsor } from "../sponsors";
+import Tag from "../../ui/Tag.astro";
+import TextLink from "../../ui/TextLink.astro";
+
+import CloseIcon from "../../../assets/icons/close.svg";
+
+interface Props {
+  openId: string;
+  sponsorSectionTitle: string;
+  sponsor: Sponsor;
+}
+
+const { openId, sponsorSectionTitle, sponsor } = Astro.props;
+---
+
+<style>
+  .sponsor-dialog {
+    padding: 0;
+    border-radius: 32px;
+    border: none;
+  }
+
+  .sponsor-dialog-close {
+    width: 48px;
+    height: 48px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background-color: var(--surface-secondary-dark);
+    color: var(--text-on-fill);
+    border-radius: 50%;
+    font-weight: 700;
+    position: absolute;
+    right: 32px;
+    top: 32px;
+    cursor: pointer;
+  }
+
+  .close-icon {
+    display: inline;
+    fill: var(--text-on-fill);
+    width: 32px;
+    height: 32px;
+  }
+
+  h4 {
+    margin: 0;
+  }
+
+  .sponsor-dialog-content {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    width: 600px;
+  }
+
+  .sponsor-dialog-header {
+    display: flex;
+    justify-content: space-between;
+    flex-direction: column;
+    align-items: center;
+    gap: var(--space-xxs);
+    padding: var(--space-m);
+  }
+
+  .sponsor-dialog-body {
+    text-align: center;
+    padding: var(--space-m);
+    background-color: var(--surface-secondary);
+  }
+
+  @media screen and (max-width: 768px) {
+    .sponsor-dialog-header {
+      padding: var(--space-m) var(--space-xs);
+    }
+
+    .sponsor-dialog-content {
+      width: 358px;
+    }
+
+    .sponsor-logo {
+      width: 326px;
+      height: 120px;
+    }
+
+    .sponsor-dialog-close {
+      right: 16px;
+      top: 16px;
+    }
+  }
+</style>
+
+<dialog id={openId} class="sponsor-dialog">
+  <div class="sponsor-dialog-content">
+    <div class="sponsor-dialog-header">
+      <Tag text={sponsorSectionTitle} />
+      <div
+        class="sponsor-dialog-close"
+        onclick={`document.getElementById('${openId}').close()`}
+      >
+        <CloseIcon class="close-icon" />
+      </div>
+      <Image
+        src={sponsor.imageSrc}
+        alt={sponsor.name}
+        width={520}
+        height={120}
+        loading="lazy"
+        class="sponsor-logo"
+      />
+      <h4 class="text-h4">{sponsor.name}</h4>
+      {
+        sponsor.dialog?.link && (
+          <div>
+            <TextLink
+              href={sponsor.dialog.link}
+              text={sponsor.dialog.link}
+              isAccentColor
+            />
+          </div>
+        )
+      }
+    </div>
+    {
+      sponsor.dialog?.description !== "" && (
+        <div class="sponsor-dialog-body text-body-medium">
+          <span>{sponsor.dialog?.description}</span>
+        </div>
+      )
+    }
+  </div>
+</dialog>
diff --git a/src/components/top/sponsor/GopherList.astro b/src/components/top/sponsor/GopherList.astro
new file mode 100644
index 0000000..81ed663
--- /dev/null
+++ b/src/components/top/sponsor/GopherList.astro
@@ -0,0 +1,90 @@
+---
+import { Image } from "astro:assets";
+import type { Sponsor } from "../sponsors";
+
+interface Props {
+  sponsors: Sponsor[];
+}
+
+const { sponsors } = Astro.props;
+
+if (sponsors.length === 0) {
+  return null;
+}
+---
+
+<div class="sponsor-section">
+  <h4 class="text-h4">
+    <slot />
+  </h4>
+  <ul>
+    {
+      sponsors.map((sponsor) => (
+        <li>
+          <Image
+            src={sponsor.imageSrc}
+            alt={sponsor.name}
+            width={96}
+            height={96}
+            loading="lazy"
+            priority
+          />
+          <div>{sponsor.name}</div>
+        </li>
+      ))
+    }
+  </ul>
+</div>
+
+<style>
+  .sponsor-section {
+    text-align: center;
+  }
+
+  ul {
+    display: grid;
+    grid-template-columns: repeat(5, auto);
+    list-style: none;
+    text-align: center;
+    padding: 0;
+    gap: 40px;
+    width: fit-content;
+    max-width: 100%;
+    margin: 0 auto;
+  }
+
+  li {
+    padding: 24px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    gap: 8px;
+  }
+
+  img {
+    object-fit: contain;
+    border-radius: 50%;
+    display: block;
+    margin: 0 auto;
+  }
+
+  @media screen and (max-width: 1150px) {
+    ul {
+      grid-template-columns: repeat(4, auto);
+    }
+  }
+
+  @media screen and (max-width: 920px) {
+    ul {
+      grid-template-columns: repeat(3, auto);
+    }
+  }
+
+  @media screen and (max-width: 768px) {
+    ul {
+      grid-template-columns: repeat(2, auto);
+      gap: 8px;
+    }
+  }
+</style>
diff --git a/src/components/top/sponsor/SponsorList.astro b/src/components/top/sponsor/SponsorList.astro
new file mode 100644
index 0000000..cbacc17
--- /dev/null
+++ b/src/components/top/sponsor/SponsorList.astro
@@ -0,0 +1,157 @@
+---
+import { Image } from "astro:assets";
+import type { Sponsor } from "../sponsors";
+import Dialog from "./Dialog.astro";
+
+interface Props {
+  size: "learge" | "medium" | "small";
+  sponsors: Sponsor[];
+  dialogSectionTitle?: string;
+}
+
+const { size, sponsors, dialogSectionTitle } = Astro.props;
+
+const sizeMap = {
+  learge: { width: 532, height: 280 },
+  medium: { width: 354, height: 164 },
+  small: { width: 208, height: 100 },
+};
+
+const { width, height } = sizeMap[size];
+
+if (sponsors.length === 0) {
+  return null;
+}
+---
+
+<div class="sponsor-section">
+  <h4 class="text-h4">
+    <slot />
+  </h4>
+  <ul data-size={size}>
+    {
+      sponsors.map((sponsor) => (
+        <li>
+          <Image
+            src={sponsor.imageSrc}
+            alt={sponsor.name}
+            title={sponsor.name}
+            width={width}
+            height={height}
+            loading="lazy"
+            priority
+            style={sponsor.dialog ? "cursor:pointer" : null}
+            onclick={
+              sponsor.dialog
+                ? `document.getElementById('${sponsor.dialog.openId}')?.showModal()`
+                : null
+            }
+          />
+          {sponsor.dialog ? (
+            <>
+              <Dialog
+                openId={sponsor.dialog.openId}
+                sponsorSectionTitle={dialogSectionTitle ?? ""}
+                sponsor={sponsor}
+              />
+            </>
+          ) : null}
+        </li>
+      ))
+    }
+  </ul>
+</div>
+
+<style>
+  .sponsor-section {
+    text-align: center;
+  }
+
+  ul {
+    display: grid;
+    list-style: none;
+    text-align: center;
+    padding: 0;
+    gap: 20px;
+    margin: 0 auto;
+    width: fit-content;
+    max-width: 100%;
+  }
+
+  ul[data-size="learge"] {
+    grid-template-columns: repeat(2, auto);
+    gap: 40px;
+  }
+
+  ul[data-size="medium"] {
+    grid-template-columns: repeat(3, auto);
+  }
+
+  ul[data-size="small"] {
+    grid-template-columns: repeat(5, auto);
+  }
+
+  li {
+    max-width: 100%;
+  }
+
+  @media screen and (max-width: 1150px) {
+    ul[data-size="learge"] {
+      grid-template-columns: repeat(1, auto);
+    }
+
+    ul[data-size="medium"] {
+      grid-template-columns: repeat(2, auto);
+    }
+
+    ul[data-size="small"] {
+      grid-template-columns: repeat(4, auto);
+    }
+  }
+
+  @media screen and (max-width: 920px) {
+    ul[data-size="small"] {
+      grid-template-columns: repeat(3, auto);
+    }
+  }
+
+  @media screen and (max-width: 768px) {
+    ul {
+      gap: 24px;
+    }
+
+    ul[data-size="learge"] {
+      grid-template-columns: repeat(1, auto);
+      gap: 24px;
+    }
+
+    ul[data-size="learge"] img {
+      width: 342px;
+      height: 160px;
+    }
+
+    ul[data-size="medium"] {
+      grid-template-columns: repeat(1, auto);
+    }
+
+    ul[data-size="medium"] img {
+      width: 262px;
+      height: 64px;
+    }
+
+    ul[data-size="small"] {
+      grid-template-columns: repeat(2, auto);
+      column-gap: 16px;
+      row-gap: 8px;
+    }
+
+    ul[data-size="small"] li {
+      width: 163px;
+    }
+
+    ul[data-size="small"] img {
+      width: 163px;
+      height: 64px;
+    }
+  }
+</style>
diff --git a/src/components/top/sponsors.ts b/src/components/top/sponsors.ts
new file mode 100644
index 0000000..9050c99
--- /dev/null
+++ b/src/components/top/sponsors.ts
@@ -0,0 +1,77 @@
+import type { ImageMetadata } from "astro";
+
+export type Sponsor = {
+  name: string;
+  imageSrc: ImageMetadata;
+  dialog?: {
+    openId: string;
+    link: string;
+    description: string;
+  };
+};
+
+import img1 from "../../assets/footer_logo.svg";
+import img2 from "../../assets/page-header-gopher.png";
+
+export const goldSponsors: Sponsor[] = [
+  { name: "gold sponsor",  imageSrc: img1 ,dialog:{openId:"gold1", link:"http://localhost:4321", description: "dummy description. dummy description. dummy description. dummy description. dummy description. dummy description. dummy description. dummy description. dummy description."}},
+  { name: "gold sponsor",  imageSrc: img1 ,dialog:{openId:"gold2", link:"", description: "dummy description. dummy description. dummy description. dummy description. dummy description. dummy description. dummy description. dummy description. dummy description."}},
+  { name: "gold sponsor",  imageSrc: img1 ,dialog:{openId:"gold3", link:"http://localhost:4321", description: ""}},
+  { name: "gold sponsor",  imageSrc: img1 ,dialog:{openId:"gold4", link:"http://localhost:4321", description: "dummy description. dummy description. dummy description. dummy description. dummy description. dummy description. dummy description. dummy description. dummy description."}},
+  { name: "gold sponsor",  imageSrc: img1 ,dialog:{openId:"gold5", link:"http://localhost:4321", description: "dummy description. dummy description. dummy description. dummy description. dummy description. dummy description. dummy description. dummy description. dummy description."}},
+  { name: "gold sponsor",  imageSrc: img1 ,dialog:{openId:"gold6", link:"http://localhost:4321", description: "dummy description. dummy description. dummy description. dummy description. dummy description. dummy description. dummy description. dummy description. dummy description."}},
+];
+
+export const silverSponsors: Sponsor[] = [
+  { name: "silver sponsor",  imageSrc: img1 ,dialog:{openId:"silver1", link:"http://localhost:4321", description: "dummy description. dummy description. dummy description. dummy description. dummy description. dummy description. dummy description. dummy description. dummy description."}},
+  { name: "silver sponsor",  imageSrc: img1 ,dialog:{openId:"silver2", link:"", description: "dummy description. dummy description. dummy description. dummy description. dummy description. dummy description. dummy description. dummy description. dummy description."}},
+  { name: "silver sponsor",  imageSrc: img1 ,dialog:{openId:"silver3", link:"http://localhost:4321", description: ""}},
+  { name: "silver sponsor",  imageSrc: img1 ,dialog:{openId:"silver4", link:"http://localhost:4321", description: "dummy description. dummy description. dummy description. dummy description. dummy description. dummy description. dummy description. dummy description. dummy description."}},
+  { name: "silver sponsor",  imageSrc: img1 ,dialog:{openId:"silver5", link:"http://localhost:4321", description: "dummy description. dummy description. dummy description. dummy description. dummy description. dummy description. dummy description. dummy description. dummy description."}},
+  { name: "silver sponsor",  imageSrc: img1 ,dialog:{openId:"silver6", link:"http://localhost:4321", description: "dummy description. dummy description. dummy description. dummy description. dummy description. dummy description. dummy description. dummy description. dummy description."}},
+];
+
+export const lunchSponsors: Sponsor[] = [
+  { name: "lunch sponsor",  imageSrc: img1 ,dialog:{openId:"lunch1", link:"http://localhost:4321", description: "dummy description. dummy description. dummy description. dummy description. dummy description. dummy description. dummy description. dummy description. dummy description."}},
+  { name: "lunch sponsor",  imageSrc: img1 ,dialog:{openId:"lunch2", link:"", description: "dummy description. dummy description. dummy description. dummy description. dummy description. dummy description. dummy description. dummy description. dummy description."}},
+
+];
+
+export const drinkSponsors: Sponsor[] = [
+  { name: "drink sponsor",  imageSrc: img1 ,dialog:{openId:"drink1", link:"http://localhost:4321", description: "dummy description. dummy description. dummy description. dummy description. dummy description. dummy description. dummy description. dummy description. dummy description."}},
+  { name: "drink sponsor",  imageSrc: img1 ,dialog:{openId:"drink2", link:"", description: "dummy description. dummy description. dummy description. dummy description. dummy description. dummy description. dummy description. dummy description. dummy description."}},
+];
+
+export const bronzeSponsors: Sponsor[] = [
+  { name: "bronze sponsor",  imageSrc: img1 },
+  { name: "bronze sponsor",  imageSrc: img1 },
+  { name: "bronze sponsor",  imageSrc: img1 },
+  { name: "bronze sponsor",  imageSrc: img1 },
+  { name: "bronze sponsor",  imageSrc: img1 },
+  { name: "bronze sponsor",  imageSrc: img1 },
+  { name: "bronze sponsor",  imageSrc: img1 },
+  { name: "bronze sponsor",  imageSrc: img1 },
+  { name: "bronze sponsor",  imageSrc: img1 },
+  { name: "bronze sponsor",  imageSrc: img1 },
+  { name: "bronze sponsor",  imageSrc: img1 },
+  { name: "bronze sponsor",  imageSrc: img1 },
+  { name: "bronze sponsor",  imageSrc: img1 },
+];
+
+export const gopherSponsors: Sponsor[] = [
+  { name: "gopher sponsor",  imageSrc: img2 },
+  { name: "gopher sponsor",  imageSrc: img2 },
+  { name: "gopher sponsor",  imageSrc: img2 },
+  { name: "gopher sponsor",  imageSrc: img2 },
+  { name: "gopher sponsor",  imageSrc: img2 },
+  { name: "gopher sponsor",  imageSrc: img2 },
+  { name: "gopher sponsor",  imageSrc: img2 },
+  { name: "gopher sponsor",  imageSrc: img2 },
+  { name: "gopher sponsor",  imageSrc: img2 },
+  { name: "gopher sponsor",  imageSrc: img2 },
+  { name: "gopher sponsor",  imageSrc: img2 },
+];
+
+export const toolSponsors: Sponsor[] = [
+  { name: "tool sponsor",  imageSrc: img1 },
+];
diff --git a/src/components/ui/Tag.astro b/src/components/ui/Tag.astro
new file mode 100644
index 0000000..2819055
--- /dev/null
+++ b/src/components/ui/Tag.astro
@@ -0,0 +1,23 @@
+---
+type Props = {
+  text: string;
+};
+
+const { text } = Astro.props as Props;
+---
+
+<div class="tag text-body-large-strong">
+  {text}
+</div>
+
+<style>
+  .tag {
+    background-color: var(--surface-secondary);
+    color: var(--text-accent);
+    padding: var(--space-xxxs) var(--space-s);
+    border-radius: var(--radius-objects);
+    min-width: 160px;
+    box-sizing: border-box;
+    text-align: center;
+  }
+</style>
diff --git a/src/components/ui/TextLink.astro b/src/components/ui/TextLink.astro
index 89cc9be..d9c6608 100644
--- a/src/components/ui/TextLink.astro
+++ b/src/components/ui/TextLink.astro
@@ -7,6 +7,7 @@ type Props = {
   isBlankLink?: boolean;
   withArrowIcon?: boolean;
   text: string;
+  isAccentColor?: boolean;
 };
 
 const {
@@ -14,6 +15,7 @@ const {
   isBlankLink = false,
   withArrowIcon = false,
   text,
+  isAccentColor = false,
 } = Astro.props as Props;
 ---
 
@@ -21,6 +23,7 @@ const {
   href={href}
   target={isBlankLink ? "_blank" : undefined}
   rel={isBlankLink ? "noopener noreferrer" : undefined}
+  data-accent={isAccentColor || undefined}
 >
   <span class="text-body-large-strong">{text}</span>
   {isBlankLink && <OpenInNewIcon class="link-icon" fill="red" />}
@@ -39,6 +42,10 @@ const {
     width: 100%;
   }
 
+  a[data-accent] {
+    color: var(--text-accent);
+  }
+
   a:hover {
     color: var(--text-accent);
   }
diff --git a/src/pages/index.astro b/src/pages/index.astro
index abd914e..caa7429 100644
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -3,6 +3,7 @@ import About from "../components/top/About.astro";
 import MainVisual from "../components/top/MainVisual.astro";
 import SponsorRecruitment from "../components/top/SponsorRecruitment.astro";
 import News from "../components/top/News.astro";
+import Sponsors from "../components/top/Sponsors.astro";
 import Layout from "../layouts/Layout.astro";
 ---
 
@@ -12,5 +13,6 @@ import Layout from "../layouts/Layout.astro";
     <News />
     <About />
     <SponsorRecruitment />
+    <Sponsors />
   </main>
 </Layout>