diff --git a/src/app/page.tsx b/src/app/page.tsx
index 2f88c1d..5ba52e1 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -1,9 +1,11 @@
 import { EventCountdownBanner } from "@/components/EventCountdownBanner";
+import { SeekingSponsorsSection } from "@/components/SeekingSponsorsSection";
 
 export default function Home() {
   return (
     <main>
       <EventCountdownBanner />
+      <SeekingSponsorsSection />
     </main>
   );
 }
diff --git a/src/components/CountdownTimer/index.tsx b/src/components/CountdownTimer/index.tsx
deleted file mode 100644
index 596c20c..0000000
--- a/src/components/CountdownTimer/index.tsx
+++ /dev/null
@@ -1,78 +0,0 @@
-"use client";
-
-import { useCountdownTimer } from "./useCountdownTimer";
-
-export function CountdownTimer() {
-  const { timeLeft } = useCountdownTimer();
-
-  return (
-    <div className="w-full max-w-full md:max-w-2xl">
-      <div className="backdrop-blur-sm bg-white/85 rounded-xl py-4 md:py-8 shadow-lg">
-        <div className="flex gap-1 md:gap-4 items-end justify-center text-blue-600">
-          <div className="text-center min-w-[3rem]">
-            <span className="block text-xs md:text-sm font-bold mb-1 md:mb-3">
-              Days
-            </span>
-            <time
-              className="block text-2xl md:text-5xl font-bold tabular-nums"
-              dateTime={`P${timeLeft.days}D`}
-            >
-              {timeLeft.days.toString().padStart(3, "0")}
-            </time>
-          </div>
-          <span
-            className="text-2xl md:text-5xl font-bold mb-0.5"
-            aria-hidden="true"
-          >
-            :
-          </span>
-          <div className="text-center min-w-[3rem]">
-            <span className="block text-xs md:text-sm font-bold mb-1 md:mb-3">
-              Hour
-            </span>
-            <time
-              className="block text-2xl md:text-5xl font-bold tabular-nums"
-              dateTime={`PT${timeLeft.hours}H`}
-            >
-              {timeLeft.hours.toString().padStart(2, "0")}
-            </time>
-          </div>
-          <span
-            className="text-2xl md:text-5xl font-bold mb-0.5"
-            aria-hidden="true"
-          >
-            :
-          </span>
-          <div className="text-center min-w-[3rem]">
-            <span className="block text-xs md:text-sm font-bold mb-1 md:mb-3">
-              Minutes
-            </span>
-            <time
-              className="block text-2xl md:text-5xl font-bold tabular-nums"
-              dateTime={`PT${timeLeft.minutes}M`}
-            >
-              {timeLeft.minutes.toString().padStart(2, "0")}
-            </time>
-          </div>
-          <span
-            className="text-2xl md:text-5xl font-bold mb-0.5"
-            aria-hidden="true"
-          >
-            :
-          </span>
-          <div className="text-center min-w-[3rem]">
-            <span className="block text-xs md:text-sm font-bold mb-1 md:mb-3">
-              Seconds
-            </span>
-            <time
-              className="block text-2xl md:text-5xl font-bold tabular-nums"
-              dateTime={`PT${timeLeft.seconds}S`}
-            >
-              {timeLeft.seconds.toString().padStart(2, "0")}
-            </time>
-          </div>
-        </div>
-      </div>
-    </div>
-  );
-}
diff --git a/src/components/EventCountdownBanner/CountdownTimer/Divider/index.tsx b/src/components/EventCountdownBanner/CountdownTimer/Divider/index.tsx
new file mode 100644
index 0000000..3f9ccd6
--- /dev/null
+++ b/src/components/EventCountdownBanner/CountdownTimer/Divider/index.tsx
@@ -0,0 +1,8 @@
+export function Divider() {
+  return (
+    <span
+      className="mt-3 lg:mt-4 w-[1px] h-3.5 md:h-7 bg-current rotate-[15deg]"
+      aria-hidden="true"
+    />
+  );
+}
diff --git a/src/components/EventCountdownBanner/CountdownTimer/TimeLeft/index.tsx b/src/components/EventCountdownBanner/CountdownTimer/TimeLeft/index.tsx
new file mode 100644
index 0000000..db7a52e
--- /dev/null
+++ b/src/components/EventCountdownBanner/CountdownTimer/TimeLeft/index.tsx
@@ -0,0 +1,19 @@
+type Props = {
+  value: number;
+  unit: string;
+  duration: string;
+};
+
+export function TimeLeft({ value, unit, duration }: Props) {
+  return (
+    <div className="text-center w-[50px] md:w-[100px]">
+      <time
+        className="block text-3xl md:text-5xl lg:text-6xl font-semibold md:font-normal tracking-[-0.75%]"
+        dateTime={duration}
+      >
+        {value}
+      </time>
+      <span className="text-xs font-light mt-1">{unit}</span>
+    </div>
+  );
+}
diff --git a/src/components/EventCountdownBanner/CountdownTimer/index.tsx b/src/components/EventCountdownBanner/CountdownTimer/index.tsx
new file mode 100644
index 0000000..562f4cc
--- /dev/null
+++ b/src/components/EventCountdownBanner/CountdownTimer/index.tsx
@@ -0,0 +1,71 @@
+"use client";
+
+import { Divider } from "./Divider";
+import { TimeLeft } from "./TimeLeft";
+import { useCountdownTimer } from "./useCountdownTimer";
+
+export function CountdownTimer() {
+  const { timeLeft } = useCountdownTimer();
+
+  return (
+    <div className="relative w-[330px] md:w-[600px] lg:w-[630px] h-[142px] md:h-[154px] lg:h-[182px] bg-primary rounded-lg flex items-center justify-center shadow-[0_4px_6px_rgba(0,0,0,0.09)] overflow-hidden">
+      <div
+        className="absolute -top-[130px] lg:-top-[90px] -left-[100px] lg:-left-[90px] w-40 h-40 bg-[#ED82B0] rotate-45"
+        style={{
+          filter: "blur(30px)",
+        }}
+      />
+
+      <div
+        className="absolute -bottom-[110px] lg:-bottom-[100px] -right-[110px] lg:-right-[100px] w-40 h-40 bg-[#68C6F1] rounded-full"
+        style={{
+          filter: "blur(30px)",
+        }}
+      />
+
+      <div
+        className="absolute inset-0 opacity-10 bg-[length:24px_24px] lg:bg-[length:32px_32px]"
+        style={{
+          backgroundImage: `
+            linear-gradient(#fff 1px, transparent 1px),
+            linear-gradient(90deg, #fff 1px, transparent 1px)
+          `,
+          mask: `
+            linear-gradient(135deg, black, transparent 30%),
+            linear-gradient(315deg, black, transparent 30%)
+          `,
+          WebkitMask: `
+            linear-gradient(135deg, black, transparent 30%),
+            linear-gradient(315deg, black, transparent 30%)
+          `,
+        }}
+      />
+
+      <div className="relative flex items-start gap-3 text-white">
+        <TimeLeft
+          value={timeLeft.days}
+          unit="Days"
+          duration={`P${timeLeft.days}D`}
+        />
+        <Divider />
+        <TimeLeft
+          value={timeLeft.hours}
+          unit="Hour"
+          duration={`PT${timeLeft.hours}H`}
+        />
+        <Divider />
+        <TimeLeft
+          value={timeLeft.minutes}
+          unit="Minutes"
+          duration={`PT${timeLeft.minutes}M`}
+        />
+        <Divider />
+        <TimeLeft
+          value={timeLeft.seconds}
+          unit="Seconds"
+          duration={`PT${timeLeft.seconds}S`}
+        />
+      </div>
+    </div>
+  );
+}
diff --git a/src/components/CountdownTimer/useCountdownTimer.ts b/src/components/EventCountdownBanner/CountdownTimer/useCountdownTimer.ts
similarity index 100%
rename from src/components/CountdownTimer/useCountdownTimer.ts
rename to src/components/EventCountdownBanner/CountdownTimer/useCountdownTimer.ts
diff --git a/src/components/EventCountdownBanner/GridBackground/index.tsx b/src/components/EventCountdownBanner/GridBackground/index.tsx
index 6a6fa38..4e8bbb7 100644
--- a/src/components/EventCountdownBanner/GridBackground/index.tsx
+++ b/src/components/EventCountdownBanner/GridBackground/index.tsx
@@ -2,23 +2,23 @@ export function GridBackground() {
   return (
     <div
       aria-hidden="true"
-      className="absolute inset-[-50%] w-[200%] h-[200%] opacity-15 bg-[length:42px_42px] lg:bg-[length:55px_55px]"
+      className="absolute inset-0 opacity-15 bg-[length:42px_42px] lg:bg-[length:55px_55px] -z-10"
       style={{
         backgroundImage: `
             linear-gradient(hsl(var(--primary)) 2px, transparent 2px),
             linear-gradient(90deg, hsl(var(--primary)) 2px, transparent 2px)
           `,
         mask: `radial-gradient(
-            ellipse 40% 50% at center,
-            black 0%,
-            black 20%,
-            transparent 50%
+            ellipse 80% 50% at center 40%,
+            black 30%,
+            black 30%,
+            transparent 65%
           )`,
         WebkitMask: `radial-gradient(
-            ellipse 40% 50% at center,
-            black 0%,
-            black 20%,
-            transparent 50%
+            ellipse 80% 50% at center 40%,
+            black 30%,
+            black 30%,
+            transparent 65%
           )`,
       }}
     />
diff --git a/src/components/EventCountdownBanner/index.tsx b/src/components/EventCountdownBanner/index.tsx
index f8cf011..87660dd 100644
--- a/src/components/EventCountdownBanner/index.tsx
+++ b/src/components/EventCountdownBanner/index.tsx
@@ -1,8 +1,9 @@
-import { GridBackground } from "@/components/EventCountdownBanner/GridBackground";
+import { CountdownTimer } from "./CountdownTimer";
+import { GridBackground } from "./GridBackground";
 
 export function EventCountdownBanner() {
   return (
-    <div className="w-full min-h-screen relative flex flex-col items-center justify-center gap-10 text-center">
+    <div className="w-full h-[644px] lg:h-[850px]  relative flex flex-col items-center justify-center gap-10 text-center">
       <GridBackground />
 
       <img
@@ -11,6 +12,8 @@ export function EventCountdownBanner() {
         alt="logo"
       />
 
+      <CountdownTimer />
+
       <div className="text-2xl font-semibold space-y-1">
         <time dateTime="2025-05-23">5/23, 5/24</time>
         <p>ベルサール神田</p>
diff --git a/src/components/SeekingSponsorsSection/index.tsx b/src/components/SeekingSponsorsSection/index.tsx
index 30cec1f..14a8b36 100644
--- a/src/components/SeekingSponsorsSection/index.tsx
+++ b/src/components/SeekingSponsorsSection/index.tsx
@@ -4,8 +4,8 @@ import Link from "next/link";
 
 export function SeekingSponsorsSection() {
   return (
-    <div className="w-full flex flex-col items-center gap-8">
-      <h2 className="text-4xl font-bold">スポンサー募集開始</h2>
+    <div className="w-full flex flex-col items-center gap-8 px-8 pb-16">
+      <h2 className="text-3xl font-bold text-center">スポンサー募集開始</h2>
       <div>
         <p>
           一緒にTypescriptコミュニティを盛り上げていただけるスポンサー企業を募集いたします。