diff --git a/public/images/landing-1.png b/public/images/landing-1.png
new file mode 100644
index 00000000..826acfa4
Binary files /dev/null and b/public/images/landing-1.png differ
diff --git a/public/images/landing-2.png b/public/images/landing-2.png
new file mode 100644
index 00000000..d28bb6ec
Binary files /dev/null and b/public/images/landing-2.png differ
diff --git a/public/images/landing-3.png b/public/images/landing-3.png
new file mode 100644
index 00000000..c384808e
Binary files /dev/null and b/public/images/landing-3.png differ
diff --git a/public/images/landing-4.png b/public/images/landing-4.png
new file mode 100644
index 00000000..b8331c0a
Binary files /dev/null and b/public/images/landing-4.png differ
diff --git a/public/images/landing-5.png b/public/images/landing-5.png
new file mode 100644
index 00000000..d28bb6ec
Binary files /dev/null and b/public/images/landing-5.png differ
diff --git a/public/images/landing-6.png b/public/images/landing-6.png
new file mode 100644
index 00000000..c384808e
Binary files /dev/null and b/public/images/landing-6.png differ
diff --git a/public/images/landing-7.png b/public/images/landing-7.png
new file mode 100644
index 00000000..b8331c0a
Binary files /dev/null and b/public/images/landing-7.png differ
diff --git a/public/images/landing-add.png b/public/images/landing-add.png
new file mode 100644
index 00000000..29dc5c3f
Binary files /dev/null and b/public/images/landing-add.png differ
diff --git a/public/images/landing-ai.png b/public/images/landing-ai.png
new file mode 100644
index 00000000..efc87840
Binary files /dev/null and b/public/images/landing-ai.png differ
diff --git a/public/images/landing-chatbot.png b/public/images/landing-chatbot.png
new file mode 100644
index 00000000..15d59b94
Binary files /dev/null and b/public/images/landing-chatbot.png differ
diff --git a/public/images/landing-extension.png b/public/images/landing-extension.png
new file mode 100644
index 00000000..d12674a7
Binary files /dev/null and b/public/images/landing-extension.png differ
diff --git a/public/images/landing_icon_bookmark.png b/public/images/landing_icon_bookmark.png
new file mode 100644
index 00000000..30bd52e7
Binary files /dev/null and b/public/images/landing_icon_bookmark.png differ
diff --git a/public/images/landing_icon_questionmark.png b/public/images/landing_icon_questionmark.png
new file mode 100644
index 00000000..509a1750
Binary files /dev/null and b/public/images/landing_icon_questionmark.png differ
diff --git a/public/images/landing_icon_searchoff.png b/public/images/landing_icon_searchoff.png
new file mode 100644
index 00000000..d8fcf72a
Binary files /dev/null and b/public/images/landing_icon_searchoff.png differ
diff --git a/src/app/LandingPage.tsx b/src/app/LandingPage.tsx
deleted file mode 100644
index ae3361ca..00000000
--- a/src/app/LandingPage.tsx
+++ /dev/null
@@ -1,76 +0,0 @@
-'use client';
-
-import ICLandingIcLogo from '@/components/Icons/svgs/ic_landing_ic_logo.svg';
-import ICLandingTextLogo from '@/components/Icons/svgs/ic_landing_text_logo.svg';
-import Image from 'next/image';
-
-const ERROR_MESSAGES: Record<string, string> = {
-  auth_failed: '로그인에 실패했습니다.',
-  server_error: '서버 오류가 발생했습니다.',
-  unauthorized: '로그인이 필요합니다.',
-  session_expired: '세션이 만료되었습니다. 다시 로그인해주세요.',
-};
-
-type Props = {
-  error?: string;
-};
-
-export default function Landing({ error }: Props) {
-  const handleGoogleLogin = () => {
-    const baseUrl = process.env.NEXT_PUBLIC_BASE_API_URL;
-
-    if (!baseUrl) {
-      console.error('NEXT_PUBLIC_BASE_API_URL is not configured');
-      return;
-    }
-
-    window.location.href = `${baseUrl}/oauth2/authorization/google`;
-  };
-
-  return (
-    <div className="relative flex min-h-screen items-center justify-center overflow-hidden bg-gray-50">
-      <div className="pointer-events-none absolute bottom-0 left-0 z-0 w-screen overflow-hidden">
-        <Image
-          src="/images/sofa_login_bg_resource.png"
-          alt="배경 이미지"
-          width={1920}
-          height={1080}
-          className="h-full w-full object-cover"
-        />
-      </div>
-
-      <div className="relative z-10 flex w-full max-w-md flex-col items-center px-6 text-center">
-        <div className="flex items-center gap-5">
-          <div className="h-[53px] w-[60px] [&>svg]:h-full [&>svg]:w-full">
-            <ICLandingIcLogo />
-          </div>
-          <div className="h-[50px] w-60 [&>svg]:h-full [&>svg]:w-full">
-            <ICLandingTextLogo />
-          </div>
-        </div>
-
-        <h2 className="mt-4 text-gray-800">로그인</h2>
-
-        <p className="mt-1 text-gray-600">서비스 이용을 위해 구글 계정으로 로그인해 주세요.</p>
-
-        <div className="my-8 h-px w-48 bg-gray-200" />
-
-        {error && (
-          <div className="bg-red100 text-red700 mb-6 w-full rounded-lg p-4 text-sm">
-            {ERROR_MESSAGES[error] ?? '오류가 발생했습니다.'}
-            <br />
-            잠시 후 다시 시도해주세요.
-          </div>
-        )}
-
-        <button
-          onClick={handleGoogleLogin}
-          className="flex w-full cursor-pointer items-center justify-center gap-3 rounded-full border border-gray-300 bg-white px-6 py-3 text-sm font-medium text-gray-700 shadow-sm transition hover:border-gray-400 hover:bg-gray-50"
-        >
-          <Image src="/images/google-icon.png" alt="구글 로고" width={20} height={20} />
-          Google 계정으로 계속하기
-        </button>
-      </div>
-    </div>
-  );
-}
diff --git a/src/app/layout-client.tsx b/src/app/layout-client.tsx
index f37f9ff2..10c383a6 100644
--- a/src/app/layout-client.tsx
+++ b/src/app/layout-client.tsx
@@ -14,7 +14,7 @@ export default function LayoutClient({ children }: { children: React.ReactNode }
     <ReactQueryProvider>
       <div className="flex min-h-screen bg-white">
         {showSideNav && <SideNavigation />}
-        <main className="min-h-screen flex-1 overflow-x-hidden">{children}</main>
+        <main className="min-h-screen flex-1 overflow-x-clip">{children}</main>
       </div>
     </ReactQueryProvider>
   );
diff --git a/src/app/page.tsx b/src/app/page.tsx
index bd8a9c5a..7d50a195 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -1,7 +1,8 @@
+import FeatureSection from '@/components/layout/Landing/FeatureSection';
+import HeroSection from '@/components/layout/Landing/HeroSection';
+import LandingHeader from '@/components/layout/Landing/LandingHeader';
 import type { Metadata } from 'next';
 
-import Landing from './LandingPage';
-
 export const metadata: Metadata = {
   title: 'Linkiving - 북마크들을 더 똑똑하게 관리해요',
   description:
@@ -65,12 +66,12 @@ export const metadata: Metadata = {
   },
 };
 
-export default async function Page({
-  searchParams,
-}: {
-  searchParams: Promise<{ error?: string }>;
-}) {
-  const params = await searchParams;
-
-  return <Landing error={params?.error} />;
+export default function Page() {
+  return (
+    <div className="bg-gray50">
+      <LandingHeader />
+      <HeroSection />
+      <FeatureSection />
+    </div>
+  );
 }
diff --git a/src/components/Icons/icons.ts b/src/components/Icons/icons.ts
index bafadfc1..24aaff76 100644
--- a/src/components/Icons/icons.ts
+++ b/src/components/Icons/icons.ts
@@ -94,6 +94,7 @@ export const IconSizes = {
   md: 18,
   lg: 20,
   xl: 24,
+  '2xl': 44,
 } as const;
 
 export type IconSizeTypes = keyof typeof IconSizes;
diff --git a/src/components/basics/Footer/Footer.tsx b/src/components/basics/Footer/Footer.tsx
index 11c2271a..49c4fec8 100644
--- a/src/components/basics/Footer/Footer.tsx
+++ b/src/components/basics/Footer/Footer.tsx
@@ -1,5 +1,3 @@
-import React from 'react';
-
 const Footer = () => {
   return (
     <footer className="flex h-40 items-end justify-center bg-gray-800 p-5 text-center text-sm text-gray-500 dark:text-gray-400">
diff --git a/src/components/layout/Landing/ExperienceItem.tsx b/src/components/layout/Landing/ExperienceItem.tsx
new file mode 100644
index 00000000..37ba75b1
--- /dev/null
+++ b/src/components/layout/Landing/ExperienceItem.tsx
@@ -0,0 +1,21 @@
+import Image from 'next/image';
+
+export default function ExperienceItem({
+  image,
+  title,
+  content,
+}: {
+  image: string;
+  title: string;
+  content: string;
+}) {
+  return (
+    <div className="border-gray50 flex flex-1 flex-col gap-4 rounded-[20px] bg-[linear-gradient(180deg,#F5F6FA_0%,#EAEDFF_100%)] px-10 py-15">
+      <div className="relative mb-2 h-12 w-12">
+        <Image src={image} alt={title} fill />
+      </div>
+      <span className="text-[28px] font-semibold">{title}</span>
+      <span className="font-body-lg">{content}</span>
+    </div>
+  );
+}
diff --git a/src/components/layout/Landing/FAQItem.tsx b/src/components/layout/Landing/FAQItem.tsx
new file mode 100644
index 00000000..52d94f56
--- /dev/null
+++ b/src/components/layout/Landing/FAQItem.tsx
@@ -0,0 +1,31 @@
+'use client';
+
+import SVGIcon from '@/components/Icons/SVGIcon';
+import { useState } from 'react';
+
+export default function FAQItem({ title, content }: { title: string; content: string }) {
+  const [isOpen, setIsOpen] = useState(false);
+
+  return (
+    <li className="w-full rounded-[20px] bg-[linear-gradient(180deg,#F5F6FA_0%,#EAEDFF_100%)] px-13 py-12">
+      <button
+        type="button"
+        aria-expanded={isOpen}
+        onClick={() => setIsOpen(prev => !prev)}
+        className="flex w-full cursor-pointer items-center justify-between text-left"
+      >
+        <span className="text-[20px] font-semibold md:text-[28px]">Q. {title}</span>
+        <SVGIcon icon={isOpen ? 'IC_Up' : 'IC_Down'} size="2xl" />
+      </button>
+      <div
+        className={`grid transition-[grid-template-rows] duration-300 ease-in-out ${
+          isOpen ? 'grid-rows-[1fr]' : 'grid-rows-[0fr]'
+        }`}
+      >
+        <div className="overflow-hidden">
+          <span className="font-body-lg block pt-6">{content}</span>
+        </div>
+      </div>
+    </li>
+  );
+}
diff --git a/src/components/layout/Landing/FeatureCard.tsx b/src/components/layout/Landing/FeatureCard.tsx
new file mode 100644
index 00000000..c80ea91b
--- /dev/null
+++ b/src/components/layout/Landing/FeatureCard.tsx
@@ -0,0 +1,34 @@
+import Image from 'next/image';
+
+interface FeatureCardProps {
+  image: string;
+  imageAlt: string;
+  title: string;
+  description: React.ReactNode;
+  bgClassName: string;
+  index: number;
+}
+
+export default function FeatureCard({
+  image,
+  imageAlt,
+  title,
+  description,
+  bgClassName,
+  index,
+}: FeatureCardProps) {
+  return (
+    <div
+      style={{ top: '140px' }}
+      className={`${bgClassName} sticky flex h-120 flex-col items-center gap-10 rounded-[20px] px-[55px] py-18 shadow-xl md:flex-row`}
+    >
+      <div className="relative aspect-700/337 w-full max-w-[700px] overflow-hidden rounded-lg">
+        <Image src={image} alt={imageAlt} fill sizes="(min-width: 1024px) 700px, 100vw" />
+      </div>
+      <div className="flex flex-col gap-7">
+        <span className="text-[28px] font-semibold">{title}</span>
+        <span className="font-body-lg">{description}</span>
+      </div>
+    </div>
+  );
+}
diff --git a/src/components/layout/Landing/FeatureSection.tsx b/src/components/layout/Landing/FeatureSection.tsx
new file mode 100644
index 00000000..8da2b59e
--- /dev/null
+++ b/src/components/layout/Landing/FeatureSection.tsx
@@ -0,0 +1,159 @@
+import { GoogleLoginButton } from '@/components/wrappers/GoogleLoginButton';
+
+import ExperienceItem from './ExperienceItem';
+import FAQItem from './FAQItem';
+import FeatureCard from './FeatureCard';
+import HowUseItem from './HowUseItem';
+
+export default function FeatureSection() {
+  return (
+    <div className="flex w-full flex-col items-center px-10">
+      <section className="my-25 w-full max-w-315">
+        <h2 className="mb-10 text-[40px] font-semibold">이런 경험, 있으신가요?</h2>
+        <div className="flex flex-col gap-7.5 lg:flex-row">
+          <ExperienceItem
+            image="/images/landing_icon_bookmark.png"
+            title="북마크가 너무 많아요"
+            content="폴더로 정리해도 시간이 지날수록 너무 많은 북마크가 쌓여서 불편해요"
+          />
+          <ExperienceItem
+            image="/images/landing_icon_questionmark.png"
+            title="내용이 기억 안나요"
+            content="왜 저장했는지, 어떤 내용이었는지 기억이 나지 않아 링크만 남게 돼요"
+          />
+          <ExperienceItem
+            image="/images/landing_icon_searchoff.png"
+            title="다시 찾아보기 힘들어요"
+            content="이전에 저장했던 북마크를 찾아보기 어려워서 다시 검색하게 돼요"
+          />
+        </div>
+      </section>
+      <section className="my-25 w-full max-w-315">
+        <h2 className="mb-10 text-[40px] font-semibold">링카이빙과 함께하세요</h2>
+        <div className="flex flex-col gap-10">
+          <FeatureCard
+            index={0}
+            bgClassName="bg-blue100"
+            image="/images/landing-5.png"
+            imageAlt="예시 화면 1"
+            title="손쉽게 링크를 북마크하세요"
+            description={
+              <>
+                Chrome 익스텐션으로 링크를 손쉽게 북마크하세요.
+                <br />
+                원하는 제목으로 수정하고 메모도 남길 수 있어요.
+              </>
+            }
+          />
+          <FeatureCard
+            index={1}
+            bgClassName="bg-blue200"
+            image="/images/landing-6.png"
+            imageAlt="예시 화면 2"
+            title="잊어버린 링크를 바로 찾아드려요"
+            description={
+              <>
+                북마크를 어디에 했는지 기억이 안 나도 괜찮아요.
+                <br />
+                AI에게 물어보면 바로 찾아드려요.
+              </>
+            }
+          />
+          <FeatureCard
+            index={2}
+            bgClassName="bg-blue300"
+            image="/images/landing-7.png"
+            imageAlt="예시 화면 3"
+            title="요약은 링카이빙이 대신 할게요"
+            description={
+              <>
+                저장한 링크는 자동으로 AI 요약이 생성돼요.
+                <br />
+                언제든 확인하고, 다시 생성할 수 있어요.
+              </>
+            }
+          />
+        </div>
+      </section>
+      <section className="my-25 w-full max-w-315 items-center">
+        <h2 className="mb-10 text-[40px] font-semibold">어떻게 사용하나요?</h2>
+        <div className="flex w-full flex-col justify-between gap-10 lg:flex-row">
+          <HowUseItem
+            image="/images/landing-extension.png"
+            title="1. 익스텐션 설치"
+            description={
+              <>
+                Chrome 웹스토어에서 설치하고
+                <br />
+                링카이빙을 시작해보세요
+              </>
+            }
+          />
+          <HowUseItem
+            image="/images/landing-add.png"
+            title="2. 링크 북마크"
+            description={
+              <>
+                원하는 링크를 저장해보세요
+                <br />
+                제목, 메모를 직접 작성할 수 있어요
+              </>
+            }
+          />
+          <HowUseItem
+            image="/images/landing-ai.png"
+            title="3. AI 자동 요약"
+            description={
+              <>
+                AI가 자동으로 요약을 진행해요
+                <br />내 홈에서 요약을 볼 수 있어요
+              </>
+            }
+          />
+          <HowUseItem
+            image="/images/landing-chatbot.png"
+            title="4. 챗봇으로 탐색"
+            description={
+              <>
+                저장한 링크에서 정보를 찾고
+                <br />
+                내용을 요약해드려요
+              </>
+            }
+          />
+        </div>
+      </section>
+      <section className="my-30 w-full max-w-315 items-center">
+        <h2 className="mb-10 text-[40px] font-semibold">자주 묻는 질문</h2>
+        <ul className="flex flex-col gap-8">
+          <FAQItem
+            title="Chrome 외의 브라우저에서도 사용할 수 있나요?"
+            content="링카이빙은 Chrome 환경을 전제로 제작되었습니다. 다른 브라우저에서 사용할 수 있지만, Chrome 익스텐션과 같은 확장 플러그인은 Chrome 환경에서만 사용할 수 있습니다. 사용자분들께서 더 많은 환경에서 만나보실 수 있도록 점차 범위를 확대해나갈 예정입니다."
+          />
+          <FAQItem
+            title="저장한 링크와 정보들은 안전하게 관리되나요?"
+            content="링크와 더불어 함께 작성한 제목 및 메모들은 개인 계정에만 저장되며 외부에는 공개되지 않습니다. 외부 노출 걱정 없이 나만의 링크 저장소를 만들어보세요."
+          />
+          <FAQItem
+            title="무료로 사용할 수 있나요?"
+            content="네, 현재 링카이빙은 무료로 사용 가능합니다. 앞으로 더 다양한 기능을 추가해나갈 예정이니, 많은 관심과 사용 부탁드립니다."
+          />
+        </ul>
+      </section>
+      <footer className="bg-gray900 mx-10 mt-50 mb-10 flex h-113.5 w-full flex-col items-center justify-between rounded-[20px] p-15">
+        <div className="flex w-full max-w-105 flex-col items-center justify-center gap-10">
+          <span className="text-gray50 text-[40px] leading-[146%] font-semibold">
+            나만의 AI 북마크 저장소
+            <br />
+            지금 바로 시작해보세요.
+          </span>
+          <GoogleLoginButton />
+        </div>
+        <div className="font-body-md text-gray100 flex w-full justify-between">
+          <span>@ 2026 Linkiving all rights reserved</span>
+          <span>E-MAIL | linkivingsofa@gmail.com</span>
+        </div>
+      </footer>
+    </div>
+  );
+}
diff --git a/src/components/layout/Landing/HeroSection.tsx b/src/components/layout/Landing/HeroSection.tsx
new file mode 100644
index 00000000..1c2a493d
--- /dev/null
+++ b/src/components/layout/Landing/HeroSection.tsx
@@ -0,0 +1,45 @@
+import { ChromeButton } from '@/components/wrappers/ChromeButton';
+import { GoogleLoginButton } from '@/components/wrappers/GoogleLoginButton';
+import Image from 'next/image';
+
+export default function HeroSection() {
+  return (
+    <div className="relative flex min-h-screen items-center justify-center overflow-hidden bg-gray-50">
+      <div className="pointer-events-none absolute bottom-0 left-0 z-0 w-screen overflow-hidden">
+        <Image
+          src="/images/sofa_login_bg_resource.png"
+          alt="배경 이미지"
+          width={1920}
+          height={1080}
+          className="h-full w-full object-cover"
+        />
+      </div>
+      <div className="relative z-10 mx-auto flex w-full flex-col items-center gap-12 px-6 lg:flex-row lg:items-center lg:justify-center lg:gap-16">
+        <div className="flex w-full flex-col lg:w-[462px] lg:shrink-0">
+          <span className="mb-5 flex flex-col text-[40px] font-semibold">
+            <span>똑똑하게 관리하는</span>
+            <span>나만의 북마크 저장소</span>
+          </span>
+          <span className="font-body-lg mb-7 flex flex-col">
+            <span>저장만 하고 다시 찾지 못한 북마크 링크를</span>
+            <span>이제 링카이빙이 함께 정리하고, 바로 찾아드릴게요</span>
+          </span>
+          <div className="flex flex-col gap-4.5">
+            <ChromeButton />
+            <GoogleLoginButton />
+          </div>
+        </div>
+        <div className="w-full lg:max-w-[760px]">
+          <Image
+            src="/images/landing-1.png"
+            alt="링카이빙 채팅 화면"
+            width={760}
+            height={376}
+            priority
+            className="h-auto w-full object-contain"
+          />
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/src/components/layout/Landing/HowUseItem.tsx b/src/components/layout/Landing/HowUseItem.tsx
new file mode 100644
index 00000000..8ce2a1bb
--- /dev/null
+++ b/src/components/layout/Landing/HowUseItem.tsx
@@ -0,0 +1,23 @@
+import Image from 'next/image';
+
+export default function HowUseItem({
+  image,
+  title,
+  description,
+}: {
+  image: string;
+  title: string;
+  description: React.ReactNode;
+}) {
+  return (
+    <div className="flex flex-col items-center gap-7">
+      <div className="relative h-36 w-36">
+        <Image src={image} alt={title} fill />
+      </div>
+      <div className="flex flex-col items-center">
+        <span className="mb-4 text-[28px] font-semibold">{title}</span>
+        <span className="font-body-lg text-center">{description}</span>
+      </div>
+    </div>
+  );
+}
diff --git a/src/components/layout/Landing/LandingHeader.tsx b/src/components/layout/Landing/LandingHeader.tsx
new file mode 100644
index 00000000..52a8840c
--- /dev/null
+++ b/src/components/layout/Landing/LandingHeader.tsx
@@ -0,0 +1,45 @@
+'use client';
+
+import IcLandingLogo from '@/components/Icons/svgs/ic_landing_ic_logo.svg';
+import IcLandingTextLogo from '@/components/Icons/svgs/ic_landing_text_logo.svg';
+import { redirectToGoogleOAuth } from '@/lib/oauth';
+
+const CHROME_STORE_URL =
+  'https://chromewebstore.google.com/detail/dbbkgbbhhhhfpclfdkmomidnkgffpbod?utm_source=item-share-cb';
+
+export default function LandingHeader() {
+  const handleAddToChrome = () => {
+    window.open(CHROME_STORE_URL, '_blank', 'noopener,noreferrer');
+  };
+
+  const handleStart = () => {
+    redirectToGoogleOAuth();
+  };
+
+  return (
+    <header className="fixed top-0 right-0 left-0 z-50 bg-white/80 backdrop-blur">
+      <div className="mx-auto flex h-16 w-full max-w-[1200px] items-center justify-between px-6">
+        <div className="flex items-center gap-2">
+          <IcLandingLogo width={36} height={32} />
+          <IcLandingTextLogo width={140} height={28} />
+        </div>
+        <div className="flex items-center gap-2">
+          <button
+            type="button"
+            onClick={handleAddToChrome}
+            className="font-label-md cursor-pointer rounded-lg bg-black px-4 py-2.5 text-white hover:bg-gray-800"
+          >
+            Chrome에 추가
+          </button>
+          <button
+            type="button"
+            onClick={handleStart}
+            className="font-label-md cursor-pointer rounded-lg border border-gray-300 bg-white px-4 py-2.5 text-black hover:bg-gray-100"
+          >
+            로그인/회원가입
+          </button>
+        </div>
+      </div>
+    </header>
+  );
+}
diff --git a/src/components/wrappers/ChromeButton.tsx b/src/components/wrappers/ChromeButton.tsx
new file mode 100644
index 00000000..2c3496e8
--- /dev/null
+++ b/src/components/wrappers/ChromeButton.tsx
@@ -0,0 +1,19 @@
+'use client';
+
+const CHROME_STORE_URL =
+  'https://chromewebstore.google.com/detail/dbbkgbbhhhhfpclfdkmomidnkgffpbod?utm_source=item-share-cb';
+
+export function ChromeButton() {
+  const handleClick = () => {
+    window.open(CHROME_STORE_URL, '_blank', 'noopener,noreferrer');
+  };
+
+  return (
+    <button
+      onClick={handleClick}
+      className="hover:bg-gray800 flex cursor-pointer items-center justify-center rounded-full bg-black py-[14.5px] text-white"
+    >
+      <span className="text-[18px] font-semibold">Chrome 웹스토어로 바로가기</span>
+    </button>
+  );
+}
diff --git a/src/components/wrappers/GoogleLoginButton.tsx b/src/components/wrappers/GoogleLoginButton.tsx
new file mode 100644
index 00000000..28bb02ad
--- /dev/null
+++ b/src/components/wrappers/GoogleLoginButton.tsx
@@ -0,0 +1,27 @@
+'use client';
+
+import { redirectToGoogleOAuth } from '@/lib/oauth';
+import Image from 'next/image';
+
+export function GoogleLoginButton() {
+  const handleGoogleLogin = () => {
+    redirectToGoogleOAuth();
+  };
+
+  return (
+    <button
+      type="button"
+      onClick={handleGoogleLogin}
+      className="flex w-full cursor-pointer items-center justify-center rounded-full border border-gray-300 bg-white py-[14.5px] text-black hover:bg-gray-100"
+    >
+      <Image
+        src="/images/google-icon.png"
+        alt=""
+        width={20}
+        height={20}
+        className="mr-2 inline-block"
+      />
+      <span className="text-[18px] font-semibold">구글 계정으로 시작하기</span>
+    </button>
+  );
+}
diff --git a/src/lib/oauth.ts b/src/lib/oauth.ts
new file mode 100644
index 00000000..e5dc3100
--- /dev/null
+++ b/src/lib/oauth.ts
@@ -0,0 +1,10 @@
+export function redirectToGoogleOAuth(): void {
+  const baseUrl = process.env.NEXT_PUBLIC_BASE_API_URL;
+
+  if (!baseUrl) {
+    console.error('NEXT_PUBLIC_BASE_API_URL is not configured');
+    return;
+  }
+
+  window.location.href = `${baseUrl}/oauth2/authorization/google`;
+}