diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
index 4b10a7bf..75cd9d96 100644
--- a/.github/workflows/ci.yml
+++ b/.github/workflows/ci.yml
@@ -19,7 +19,7 @@ jobs:
       - name: Setup Node.js
         uses: actions/setup-node@v4
         with:
-          node-version: 20
+          node-version: 22
           cache: 'pnpm'
 
       - name: Install dependencies
diff --git a/apps/desktop/package.json b/apps/desktop/package.json
new file mode 100644
index 00000000..8317345c
--- /dev/null
+++ b/apps/desktop/package.json
@@ -0,0 +1,23 @@
+{
+  "name": "desktop",
+  "productName": "Kareer",
+  "private": true,
+  "version": "0.1.0",
+  "description": "Desktop application",
+  "main": "dist/src/main.js",
+  "scripts": {
+    "build": "tsc",
+    "check-types": "tsc --noEmit",
+    "lint": "tsc --noEmit",
+    "make:mac": "pnpm build && node dist/scripts/make-macos.js",
+    "start": "pnpm build && electron ."
+  },
+  "devDependencies": {
+    "@electron/packager": "^20.0.4",
+    "@kareer/typescript-config": "workspace:*",
+    "@kds/icons": "workspace:*",
+    "@types/node": "catalog:",
+    "electron": "^43.2.0",
+    "typescript": "catalog:"
+  }
+}
diff --git a/apps/desktop/scripts/make-macos.ts b/apps/desktop/scripts/make-macos.ts
new file mode 100644
index 00000000..d2ae2d47
--- /dev/null
+++ b/apps/desktop/scripts/make-macos.ts
@@ -0,0 +1,130 @@
+import { execFileSync } from 'node:child_process';
+import fs from 'node:fs';
+import os from 'node:os';
+import path from 'node:path';
+
+import { packager, type OfficialArch } from '@electron/packager';
+
+import { productName, version } from '../package.json';
+
+const desktopDir = path.resolve(__dirname, '../..');
+const outDir = path.join(desktopDir, 'out');
+const arch = (process.argv[2] ?? process.arch) as OfficialArch;
+
+const run = (command: string, args: string[]) =>
+  execFileSync(command, args, { stdio: 'inherit' });
+
+const makeIcon = (tempDir: string) => {
+  const logoPath = require.resolve('@kds/icons/assets/logo.svg');
+  const svgPath = path.join(tempDir, 'logo.svg');
+  const logo = fs
+    .readFileSync(logoPath, 'utf8')
+    .replace(/<svg[^>]*>|<\/svg>/g, '');
+  const svg = `<svg width="1024" height="1024" viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg">
+<rect x="64" y="64" width="896" height="896" rx="200" fill="white"/>
+<g transform="translate(152 152) scale(30)">${logo}</g>
+</svg>`;
+
+  fs.writeFileSync(svgPath, svg);
+
+  const previewDir = path.join(tempDir, 'preview');
+  fs.mkdirSync(previewDir);
+  run('/usr/bin/qlmanage', ['-t', '-s', '1024', '-o', previewDir, svgPath]);
+
+  const sourcePng = path.join(previewDir, 'logo.svg.png');
+  const iconsetDir = path.join(tempDir, `${productName}.iconset`);
+  fs.mkdirSync(iconsetDir);
+
+  for (const [name, size] of [
+    ['icon_16x16.png', 16],
+    ['icon_16x16@2x.png', 32],
+    ['icon_32x32.png', 32],
+    ['icon_32x32@2x.png', 64],
+    ['icon_128x128.png', 128],
+    ['icon_128x128@2x.png', 256],
+    ['icon_256x256.png', 256],
+    ['icon_256x256@2x.png', 512],
+    ['icon_512x512.png', 512],
+    ['icon_512x512@2x.png', 1024],
+  ] as const) {
+    run('/usr/bin/sips', [
+      '-z',
+      String(size),
+      String(size),
+      sourcePng,
+      '--out',
+      path.join(iconsetDir, name),
+    ]);
+  }
+
+  const iconPath = path.join(tempDir, `${productName}.icns`);
+  run('/usr/bin/iconutil', ['-c', 'icns', iconsetDir, '-o', iconPath]);
+  return iconPath;
+};
+
+const main = async () => {
+  if (process.platform !== 'darwin') {
+    throw new Error('macOS에서만 DMG를 만들 수 있습니다.');
+  }
+
+  const tempDir = fs.mkdtempSync(path.join(os.tmpdir(), 'kareer-macos-'));
+
+  try {
+    const [packageDir] = await packager({
+      appBundleId: 'com.teamkareer.kareer',
+      appCategoryType: 'public.app-category.business',
+      arch,
+      asar: true,
+      dir: desktopDir,
+      icon: makeIcon(tempDir),
+      ignore: [
+        /\/node_modules(?:\/|$)/,
+        /\/scripts(?:\/|$)/,
+        /\.test\.js$/,
+        /\.ts$/,
+      ],
+      name: productName,
+      out: outDir,
+      overwrite: true,
+      platform: 'darwin',
+      prune: false,
+    });
+
+    if (!packageDir) {
+      throw new Error('Electron 앱 패키징 결과를 찾을 수 없습니다.');
+    }
+
+    const appPath = path.join(packageDir, `${productName}.app`);
+    run('/usr/bin/codesign', ['--force', '--deep', '--sign', '-', appPath]);
+
+    const dmgSourceDir = path.join(tempDir, 'dmg');
+    fs.mkdirSync(dmgSourceDir);
+    run('/usr/bin/ditto', [
+      appPath,
+      path.join(dmgSourceDir, `${productName}.app`),
+    ]);
+    fs.symlinkSync('/Applications', path.join(dmgSourceDir, 'Applications'));
+
+    const makeDir = path.join(outDir, 'make');
+    const dmgPath = path.join(makeDir, `${productName}-${version}-${arch}.dmg`);
+    fs.mkdirSync(makeDir, { recursive: true });
+    run('/usr/bin/hdiutil', [
+      'create',
+      '-volname',
+      productName,
+      '-srcfolder',
+      dmgSourceDir,
+      '-ov',
+      '-format',
+      'UDZO',
+      dmgPath,
+    ]);
+  } finally {
+    fs.rmSync(tempDir, { recursive: true, force: true });
+  }
+};
+
+main().catch((error: unknown) => {
+  console.error(error);
+  process.exitCode = 1;
+});
diff --git a/apps/desktop/src/main.ts b/apps/desktop/src/main.ts
new file mode 100644
index 00000000..54c2a6a9
--- /dev/null
+++ b/apps/desktop/src/main.ts
@@ -0,0 +1,67 @@
+import { app, BrowserWindow, shell } from 'electron';
+
+import { productName } from '../package.json';
+import { isAllowedNavigationUrl, isHttpsUrl } from './url-policy.js';
+
+const WEB_URL = 'https://app.ka-reer.com';
+
+app.setName(productName);
+
+const createWindow = () => {
+  const mainWindow = new BrowserWindow({
+    width: 1440,
+    height: 900,
+    minWidth: 1024,
+    minHeight: 700,
+    autoHideMenuBar: true,
+    show: false,
+    webPreferences: {
+      contextIsolation: true,
+      devTools: !app.isPackaged,
+      nodeIntegration: false,
+      sandbox: true,
+    },
+  });
+
+  mainWindow.once('ready-to-show', () => mainWindow.show());
+
+  mainWindow.webContents.on('will-navigate', (event, url) => {
+    if (!isAllowedNavigationUrl(url)) {
+      event.preventDefault();
+    }
+  });
+
+  mainWindow.webContents.setWindowOpenHandler(({ url }) => {
+    if (isHttpsUrl(url)) {
+      void shell.openExternal(url);
+    }
+
+    return { action: 'deny' };
+  });
+
+  mainWindow.webContents.session.setPermissionRequestHandler(
+    (_webContents, _permission, callback) => callback(false),
+  );
+
+  void mainWindow
+    .loadURL(WEB_URL)
+    .catch((error) =>
+      console.error(`${productName} 웹을 불러오지 못했습니다.`, error),
+    );
+};
+
+app.whenReady().then(() => {
+  createWindow();
+
+  app.on('activate', () => {
+    if (BrowserWindow.getAllWindows().length === 0) {
+      createWindow();
+    }
+  });
+});
+
+app.on('window-all-closed', () => {
+  if (process.platform !== 'darwin') {
+    app.quit();
+  }
+});
diff --git a/apps/desktop/src/url-policy.ts b/apps/desktop/src/url-policy.ts
new file mode 100644
index 00000000..68ae502b
--- /dev/null
+++ b/apps/desktop/src/url-policy.ts
@@ -0,0 +1,21 @@
+const ALLOWED_NAVIGATION_ORIGINS = new Set([
+  'https://app.ka-reer.com',
+  'https://api.ka-reer.com',
+  'https://accounts.google.com',
+]);
+
+export const isAllowedNavigationUrl = (value: string) => {
+  try {
+    return ALLOWED_NAVIGATION_ORIGINS.has(new URL(value).origin);
+  } catch {
+    return false;
+  }
+};
+
+export const isHttpsUrl = (value: string) => {
+  try {
+    return new URL(value).protocol === 'https:';
+  } catch {
+    return false;
+  }
+};
diff --git a/apps/desktop/tsconfig.json b/apps/desktop/tsconfig.json
new file mode 100644
index 00000000..b22beeb8
--- /dev/null
+++ b/apps/desktop/tsconfig.json
@@ -0,0 +1,12 @@
+{
+  "extends": "@kareer/typescript-config/base.json",
+  "compilerOptions": {
+    "declaration": false,
+    "declarationMap": false,
+    "outDir": "dist",
+    "rootDir": ".",
+    "types": ["node"]
+  },
+  "include": ["src", "scripts"],
+  "exclude": ["node_modules", "dist", "out"]
+}
diff --git a/apps/landing/.env.example b/apps/landing/.env.example
new file mode 100644
index 00000000..c5d2cf32
--- /dev/null
+++ b/apps/landing/.env.example
@@ -0,0 +1 @@
+VITE_FORMSPREE_FORM_ID=your_form_id
diff --git a/apps/landing/eslint.config.js b/apps/landing/eslint.config.js
new file mode 100644
index 00000000..d4eefd1a
--- /dev/null
+++ b/apps/landing/eslint.config.js
@@ -0,0 +1,3 @@
+import { config } from '@kareer/eslint-config/react';
+
+export default config;
diff --git a/apps/landing/index.html b/apps/landing/index.html
new file mode 100644
index 00000000..a845125a
--- /dev/null
+++ b/apps/landing/index.html
@@ -0,0 +1,37 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link
+      rel="icon"
+      type="image/png"
+      href="/src/assets/pabicon.webp"
+    />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta property="og:title" content="kareer" />
+    <meta
+      property="og:description"
+      content="The fastest roadmap to your vision"
+    />
+    <meta property="og:url" content="https://ka-reer.com" />
+    <meta property="og:image" content="https://ka-reer.com/og.png" />
+    <link
+      rel="preload"
+      as="style"
+      crossorigin
+      href="https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable.min.css"
+      onload="this.rel = 'stylesheet'"
+    />
+    <noscript>
+      <link
+        rel="stylesheet"
+        href="https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable.min.css"
+      />
+    </noscript>
+    <title>kareer</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>
diff --git a/apps/landing/package.json b/apps/landing/package.json
new file mode 100644
index 00000000..fac0b7de
--- /dev/null
+++ b/apps/landing/package.json
@@ -0,0 +1,37 @@
+{
+  "name": "landing",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc -b && vite build",
+    "lint": "eslint .",
+    "preview": "vite preview",
+    "check-types": "tsc --noEmit"
+  },
+  "dependencies": {
+    "@kds/icons": "workspace:*",
+    "@kds/ui": "workspace:*",
+    "i18next": "^25.8.13",
+    "react": "catalog:",
+    "react-dom": "catalog:",
+    "react-i18next": "^16.5.4"
+  },
+  "devDependencies": {
+    "@kareer/eslint-config": "workspace:*",
+    "@kareer/typescript-config": "workspace:*",
+    "@types/node": "catalog:",
+    "@types/react": "catalog:",
+    "@types/react-dom": "catalog:",
+    "@vanilla-extract/css": "catalog:",
+    "@vanilla-extract/recipes": "catalog:",
+    "@vanilla-extract/vite-plugin": "catalog:",
+    "@vitejs/plugin-react": "catalog:",
+    "babel-plugin-react-compiler": "^1.0.0",
+    "eslint": "catalog:",
+    "typescript": "catalog:",
+    "vite": "catalog:",
+    "vite-plugin-svgr": "catalog:"
+  }
+}
diff --git a/apps/landing/public/og.png b/apps/landing/public/og.png
new file mode 100644
index 00000000..d0bcad3a
Binary files /dev/null and b/apps/landing/public/og.png differ
diff --git a/apps/landing/src/assets/bg_why_kareer.jpg b/apps/landing/src/assets/bg_why_kareer.jpg
new file mode 100644
index 00000000..f90de3c0
Binary files /dev/null and b/apps/landing/src/assets/bg_why_kareer.jpg differ
diff --git a/apps/landing/src/assets/index.ts b/apps/landing/src/assets/index.ts
new file mode 100644
index 00000000..93e7e1b9
--- /dev/null
+++ b/apps/landing/src/assets/index.ts
@@ -0,0 +1 @@
+export { default as bg_why_kareer } from './bg_why_kareer.jpg';
diff --git a/apps/landing/src/assets/pabicon.webp b/apps/landing/src/assets/pabicon.webp
new file mode 100644
index 00000000..78941fcd
Binary files /dev/null and b/apps/landing/src/assets/pabicon.webp differ
diff --git a/apps/landing/src/components/badge/badge.css.ts b/apps/landing/src/components/badge/badge.css.ts
new file mode 100644
index 00000000..3ae7b09c
--- /dev/null
+++ b/apps/landing/src/components/badge/badge.css.ts
@@ -0,0 +1,33 @@
+import { themeVars, typography } from '@kds/ui/styles';
+import { recipe } from '@vanilla-extract/recipes';
+
+export const badge = recipe({
+  base: {
+    ...typography.cap1_sb_12,
+    display: 'inline-flex',
+    alignItems: 'center',
+    gap: '0.6rem',
+    borderStyle: 'solid',
+    borderWidth: '1px',
+    borderRadius: '99px',
+  },
+  variants: {
+    tone: {
+      light: {
+        padding: '0.5rem 1.6rem',
+        borderColor: themeVars.color.primary[300],
+        color: themeVars.color.primary[500],
+        backgroundColor: themeVars.color.primary[100],
+      },
+      dark: {
+        padding: '0.6rem 1.6rem',
+        borderColor: themeVars.color.primary[700],
+        color: themeVars.color.primary[300],
+        backgroundColor: 'rgba(59, 110, 248, 0.25)',
+      },
+    },
+  },
+  defaultVariants: {
+    tone: 'light',
+  },
+});
diff --git a/apps/landing/src/components/badge/badge.tsx b/apps/landing/src/components/badge/badge.tsx
new file mode 100644
index 00000000..38938585
--- /dev/null
+++ b/apps/landing/src/components/badge/badge.tsx
@@ -0,0 +1,19 @@
+import { ReactNode } from 'react';
+
+import * as styles from './badge.css';
+
+interface BadgeProps {
+  icon?: ReactNode;
+  children: ReactNode;
+  tone?: 'light' | 'dark';
+  className?: string;
+}
+
+const Badge = ({ icon, children, tone = 'light', className }: BadgeProps) => (
+  <div className={`${styles.badge({ tone })} ${className || ''}`}>
+    {icon}
+    {children}
+  </div>
+);
+
+export default Badge;
diff --git a/apps/landing/src/components/early-access-form/early-access-form.css.ts b/apps/landing/src/components/early-access-form/early-access-form.css.ts
new file mode 100644
index 00000000..fe34374a
--- /dev/null
+++ b/apps/landing/src/components/early-access-form/early-access-form.css.ts
@@ -0,0 +1,47 @@
+import { themeVars, typography } from '@kds/ui/styles';
+import { style } from '@vanilla-extract/css';
+import { recipe } from '@vanilla-extract/recipes';
+
+export const container = style({
+  width: '100%',
+  maxWidth: '48rem',
+  margin: '0 auto',
+});
+
+export const form = style({
+  display: 'flex',
+  gap: '0.8rem',
+});
+
+export const inputWrapper = style({
+  flex: 1,
+  minWidth: 0,
+});
+
+export const visuallyHidden = style({
+  position: 'absolute',
+  width: 1,
+  height: 1,
+  overflow: 'hidden',
+  clipPath: 'inset(50%)',
+  whiteSpace: 'nowrap',
+});
+
+export const note = recipe({
+  base: {
+    marginTop: '1rem',
+    color: themeVars.color.grayscale.gray500,
+  },
+  variants: {
+    variant: {
+      hero: {
+        ...typography.cap3_r_12,
+      },
+      final: {
+        ...typography.body6_r_16,
+        marginBottom: '3.6rem',
+        lineHeight: 1.6,
+      },
+    },
+  },
+});
diff --git a/apps/landing/src/components/early-access-form/early-access-form.tsx b/apps/landing/src/components/early-access-form/early-access-form.tsx
new file mode 100644
index 00000000..a17227c4
--- /dev/null
+++ b/apps/landing/src/components/early-access-form/early-access-form.tsx
@@ -0,0 +1,92 @@
+import { type FormEvent, useState } from 'react';
+import { SuccessCircleIcon, XIcon } from '@kds/icons';
+import { Button, Input, useToast } from '@kds/ui';
+import { useTranslation } from 'react-i18next';
+
+import * as styles from './early-access-form.css';
+
+const FORMSPREE_FORM_ID = import.meta.env.VITE_FORMSPREE_FORM_ID;
+const FORMSPREE_ENDPOINT = FORMSPREE_FORM_ID
+  ? `https://formspree.io/f/${FORMSPREE_FORM_ID}`
+  : undefined;
+
+interface EarlyAccessFormProps {
+  buttonLabel: string;
+  note: string;
+  placeholder: string;
+  variant?: 'hero' | 'final';
+}
+
+const EarlyAccessForm = ({
+  buttonLabel,
+  note,
+  placeholder,
+  variant = 'hero',
+}: EarlyAccessFormProps) => {
+  const { t } = useTranslation();
+  const { showToast } = useToast();
+  const [isSubmitting, setIsSubmitting] = useState(false);
+
+  const handleSubmit = async (event: FormEvent<HTMLFormElement>) => {
+    event.preventDefault();
+
+    if (!FORMSPREE_ENDPOINT) {
+      return;
+    }
+
+    const form = event.currentTarget;
+    setIsSubmitting(true);
+
+    try {
+      const response = await fetch(FORMSPREE_ENDPOINT, {
+        method: 'POST',
+        body: new FormData(form),
+        headers: { Accept: 'application/json' },
+      });
+
+      if (!response.ok) {
+        throw new Error('Formspree submission failed');
+      }
+
+      form.reset();
+      showToast({
+        message: t('form.success'),
+        icon: <SuccessCircleIcon width={24} height={24} />,
+      });
+    } catch {
+      showToast({
+        message: t('form.error'),
+        icon: <XIcon width={24} height={24} color="white" />,
+      });
+    } finally {
+      setIsSubmitting(false);
+    }
+  };
+
+  return (
+    <div className={styles.container}>
+      <form
+        className={styles.form}
+        action={FORMSPREE_ENDPOINT}
+        method="POST"
+        onSubmit={handleSubmit}
+      >
+        <label className={styles.inputWrapper}>
+          <span className={styles.visuallyHidden}>{placeholder}</span>
+          <Input name="email" type="email" placeholder={placeholder} required />
+        </label>
+        <input name="_gotcha" hidden />
+        <Button
+          type="submit"
+          preset="large_primary"
+          disabled={!FORMSPREE_ENDPOINT || isSubmitting}
+        >
+          {buttonLabel}
+        </Button>
+      </form>
+      <p className={styles.note({ variant })}>{note}</p>
+    </div>
+  );
+};
+
+export default EarlyAccessForm;
diff --git a/apps/landing/src/components/feature-section/feature-section.css.ts b/apps/landing/src/components/feature-section/feature-section.css.ts
new file mode 100644
index 00000000..8f696905
--- /dev/null
+++ b/apps/landing/src/components/feature-section/feature-section.css.ts
@@ -0,0 +1,72 @@
+import { themeVars, typography } from '@kds/ui/styles';
+import { style } from '@vanilla-extract/css';
+import { recipe } from '@vanilla-extract/recipes';
+
+export const container = recipe({
+  base: {
+    padding: '8.8rem 4.8rem',
+  },
+  variants: {
+    background: {
+      default: {
+        backgroundColor: themeVars.color.grayscale.white,
+      },
+      muted: {
+        backgroundColor: themeVars.color.grayscale.gray100,
+      },
+    },
+  },
+});
+
+export const inner = recipe({
+  base: {
+    display: 'flex',
+    alignItems: 'center',
+    gap: '7.2rem',
+    maxWidth: '104rem',
+    margin: '0 auto',
+  },
+  variants: {
+    previewPosition: {
+      left: {
+        flexDirection: 'row-reverse',
+      },
+      right: {
+        flexDirection: 'row',
+      },
+    },
+  },
+});
+
+export const content = style({
+  flex: 1,
+});
+
+export const featureLabel = style({
+  ...typography.cap1_sb_12,
+  marginBottom: '1.2rem',
+  color: themeVars.color.primary[500],
+  letterSpacing: '0.1em',
+  textTransform: 'uppercase',
+});
+
+export const title = style({
+  marginBottom: '1.4rem',
+  color: themeVars.color.grayscale.gray800,
+  fontSize: '3.6rem',
+  fontWeight: 800,
+  lineHeight: 1.2,
+  letterSpacing: '-0.02em',
+  whiteSpace: 'pre-line',
+});
+
+export const description = style({
+  ...typography.body6_r_16,
+  maxWidth: '44rem',
+  color: themeVars.color.grayscale.gray700,
+  lineHeight: 1.75,
+});
+
+export const preview = style({
+  flex: 1,
+});
diff --git a/apps/landing/src/components/feature-section/feature-section.tsx b/apps/landing/src/components/feature-section/feature-section.tsx
new file mode 100644
index 00000000..11ea4e27
--- /dev/null
+++ b/apps/landing/src/components/feature-section/feature-section.tsx
@@ -0,0 +1,38 @@
+import { ReactNode } from 'react';
+
+import * as styles from './feature-section.css';
+
+interface FeatureSectionProps {
+  featureLabel: string;
+  title: string;
+  description: string;
+  preview: ReactNode;
+  id?: string;
+  previewPosition?: 'left' | 'right';
+  background?: 'default' | 'muted';
+}
+
+const FeatureSection = ({
+  featureLabel,
+  title,
+  description,
+  preview,
+  id,
+  previewPosition = 'right',
+  background = 'default',
+}: FeatureSectionProps) => {
+  return (
+    <section id={id} className={styles.container({ background })}>
+      <div className={styles.inner({ previewPosition })}>
+        <div className={styles.content}>
+          <p className={styles.featureLabel}>{featureLabel}</p>
+          <h2 className={styles.title}>{title}</h2>
+          <p className={styles.description}>{description}</p>
+        </div>
+        <div className={styles.preview}>{preview}</div>
+      </div>
+    </section>
+  );
+};
+
+export default FeatureSection;
diff --git a/apps/landing/src/components/footer/landing-footer.css.ts b/apps/landing/src/components/footer/landing-footer.css.ts
new file mode 100644
index 00000000..5e296bbb
--- /dev/null
+++ b/apps/landing/src/components/footer/landing-footer.css.ts
@@ -0,0 +1,20 @@
+import { themeVars, typography } from '@kds/ui/styles';
+import { style } from '@vanilla-extract/css';
+
+export const container = style({
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'space-between',
+  padding: '2.8rem 4.8rem',
+  borderTop: `1px solid ${themeVars.color.grayscale.gray300}`,
+});
+
+export const logo = style({
+  display: 'flex',
+  alignItems: 'center',
+});
+
+export const note = style({
+  ...typography.cap3_r_12,
+  color: themeVars.color.grayscale.gray500,
+});
diff --git a/apps/landing/src/components/footer/landing-footer.tsx b/apps/landing/src/components/footer/landing-footer.tsx
new file mode 100644
index 00000000..54086f78
--- /dev/null
+++ b/apps/landing/src/components/footer/landing-footer.tsx
@@ -0,0 +1,19 @@
+import { LogoIcon } from '@kds/icons';
+import { useTranslation } from 'react-i18next';
+
+import * as styles from './landing-footer.css';
+
+const LandingFooter = () => {
+  const { t } = useTranslation('landing');
+
+  return (
+    <footer className={styles.container}>
+      <div className={styles.logo}>
+        <LogoIcon width={24} height={24} />
+      </div>
+      <span className={styles.note}>{t('footer.note')}</span>
+    </footer>
+  );
+};
+
+export default LandingFooter;
diff --git a/apps/landing/src/components/header/constants/navigation.ts b/apps/landing/src/components/header/constants/navigation.ts
new file mode 100644
index 00000000..49236e70
--- /dev/null
+++ b/apps/landing/src/components/header/constants/navigation.ts
@@ -0,0 +1,18 @@
+import { LANDING_SECTION_ID } from '@constants/section-id';
+
+export const NAVIGATION_ITEMS = [
+  {
+    labelKey: 'header.navigation.features',
+    sectionId: LANDING_SECTION_ID.features,
+  },
+  {
+    labelKey: 'header.navigation.reviews',
+    sectionId: LANDING_SECTION_ID.reviews,
+  },
+  {
+    labelKey: 'header.navigation.earlyAccess',
+    sectionId: LANDING_SECTION_ID.earlyAccess,
+  },
+] as const;
+
+export type LandingSectionId = (typeof NAVIGATION_ITEMS)[number]['sectionId'];
diff --git a/apps/landing/src/components/header/hooks/use-landing-navigation.ts b/apps/landing/src/components/header/hooks/use-landing-navigation.ts
new file mode 100644
index 00000000..e3fb1eb1
--- /dev/null
+++ b/apps/landing/src/components/header/hooks/use-landing-navigation.ts
@@ -0,0 +1,72 @@
+import { useEffect, useRef, useState } from 'react';
+import { LANDING_SECTION_ID } from '@constants/index';
+
+import {
+  type LandingSectionId,
+  NAVIGATION_ITEMS,
+} from '../constants/navigation';
+
+const scrollToSection = (sectionId: LandingSectionId) => {
+  document.getElementById(sectionId)?.scrollIntoView({
+    behavior: 'smooth',
+    block: 'start',
+  });
+};
+
+const useLandingNavigation = () => {
+  const headerRef = useRef<HTMLElement>(null);
+  const [activeSectionId, setActiveSectionId] =
+    useState<LandingSectionId | null>(null);
+
+  useEffect(() => {
+    const header = headerRef.current;
+    const scrollContainer = header?.parentElement;
+
+    if (!header || !scrollContainer) {
+      return;
+    }
+
+    const updateActiveSection = () => {
+      const isScrollEnd =
+        scrollContainer.scrollTop + scrollContainer.clientHeight >=
+        scrollContainer.scrollHeight - 1;
+
+      if (isScrollEnd) {
+        setActiveSectionId(LANDING_SECTION_ID.earlyAccess);
+        return;
+      }
+
+      const activationTop = header.getBoundingClientRect().bottom;
+      const activeSection = NAVIGATION_ITEMS.reduce<LandingSectionId | null>(
+        (currentSection, { sectionId }) => {
+          const section = document.getElementById(sectionId);
+
+          if (
+            section &&
+            section.getBoundingClientRect().top <= activationTop + 1
+          ) {
+            return sectionId;
+          }
+
+          return currentSection;
+        },
+        null,
+      );
+
+      setActiveSectionId(activeSection);
+    };
+
+    updateActiveSection();
+    scrollContainer.addEventListener('scroll', updateActiveSection, {
+      passive: true,
+    });
+
+    return () => {
+      scrollContainer.removeEventListener('scroll', updateActiveSection);
+    };
+  }, []);
+
+  return { headerRef, activeSectionId, scrollToSection };
+};
+
+export default useLandingNavigation;
diff --git a/apps/landing/src/components/header/landing-header.css.ts b/apps/landing/src/components/header/landing-header.css.ts
new file mode 100644
index 00000000..9b9432d2
--- /dev/null
+++ b/apps/landing/src/components/header/landing-header.css.ts
@@ -0,0 +1,70 @@
+import { themeVars, typography, zIndex } from '@kds/ui/styles';
+import { style } from '@vanilla-extract/css';
+import { recipe } from '@vanilla-extract/recipes';
+
+export const container = style({
+  position: 'fixed',
+  top: 0,
+  right: 0,
+  left: 0,
+  zIndex: zIndex.autocomplete,
+  height: '6.2rem',
+  padding: '0 4.8rem',
+  borderBottom: `1px solid ${themeVars.color.grayscale.gray300}`,
+  backgroundColor: 'rgba(255, 255, 255, 0.92)',
+  backdropFilter: 'blur(12px)',
+});
+
+export const navigation = style({
+  display: 'grid',
+  gridTemplateColumns: '1fr auto 1fr',
+  alignItems: 'center',
+  height: '100%',
+});
+
+export const logo = style({
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'center',
+  justifySelf: 'start',
+  flexShrink: 0,
+});
+
+export const sectionNavigation = style({
+  display: 'flex',
+  alignItems: 'center',
+  gap: '2.4rem',
+});
+
+export const actions = style({
+  display: 'flex',
+  alignItems: 'center',
+  justifySelf: 'end',
+  gap: '1.2rem',
+});
+
+export const sectionLink = recipe({
+  base: {
+    ...typography.cap2_m_12,
+    padding: '0.4rem 0',
+    borderBottom: '2px solid transparent',
+    color: themeVars.color.grayscale.gray500,
+    transition: 'color 0.2s ease',
+    ':hover': {
+      color: themeVars.color.grayscale.gray800,
+    },
+  },
+  variants: {
+    active: {
+      true: {
+        borderBottomColor: themeVars.color.primary[500],
+        color: themeVars.color.primary[500],
+        selectors: {
+          '&:hover': {
+            color: themeVars.color.primary[500],
+          },
+        },
+      },
+    },
+  },
+});
diff --git a/apps/landing/src/components/header/landing-header.tsx b/apps/landing/src/components/header/landing-header.tsx
new file mode 100644
index 00000000..b0999165
--- /dev/null
+++ b/apps/landing/src/components/header/landing-header.tsx
@@ -0,0 +1,54 @@
+import { LANDING_SECTION_ID } from '@constants/index';
+import { LogoIcon } from '@kds/icons';
+import { Button } from '@kds/ui';
+import { useTranslation } from 'react-i18next';
+
+import { NAVIGATION_ITEMS } from './constants/navigation';
+import useLandingNavigation from './hooks/use-landing-navigation';
+import LanguageSelector from './language-selector/language-selector';
+
+import * as styles from './landing-header.css';
+
+const LandingHeader = () => {
+  const { t } = useTranslation('landing');
+  const { headerRef, activeSectionId, scrollToSection } =
+    useLandingNavigation();
+
+  return (
+    <header ref={headerRef} className={styles.container}>
+      <nav className={styles.navigation}>
+        <div className={styles.logo}>
+          <LogoIcon width={20} height={20} />
+        </div>
+
+        <div className={styles.sectionNavigation}>
+          {NAVIGATION_ITEMS.map(({ labelKey, sectionId }) => (
+            <button
+              key={sectionId}
+              type="button"
+              className={styles.sectionLink({
+                active: activeSectionId === sectionId,
+              })}
+              onClick={() => scrollToSection(sectionId)}
+            >
+              {t(labelKey)}
+            </button>
+          ))}
+        </div>
+
+        <div className={styles.actions}>
+          <LanguageSelector />
+          <Button
+            type="button"
+            preset="small_primary"
+            onClick={() => scrollToSection(LANDING_SECTION_ID.earlyAccess)}
+          >
+            {t('header.cta')}
+          </Button>
+        </div>
+      </nav>
+    </header>
+  );
+};
+
+export default LandingHeader;
diff --git a/apps/landing/src/components/header/language-selector/language-selector.css.ts b/apps/landing/src/components/header/language-selector/language-selector.css.ts
new file mode 100644
index 00000000..875aafad
--- /dev/null
+++ b/apps/landing/src/components/header/language-selector/language-selector.css.ts
@@ -0,0 +1,5 @@
+import { style } from '@vanilla-extract/css';
+
+export const container = style({
+  width: '13.9rem',
+});
diff --git a/apps/landing/src/components/header/language-selector/language-selector.tsx b/apps/landing/src/components/header/language-selector/language-selector.tsx
new file mode 100644
index 00000000..84210f45
--- /dev/null
+++ b/apps/landing/src/components/header/language-selector/language-selector.tsx
@@ -0,0 +1,31 @@
+import { LANGUAGE_OPTIONS } from '@i18n/constants';
+import { GlobalIcon } from '@kds/icons';
+import { Dropdown } from '@kds/ui';
+import { useTranslation } from 'react-i18next';
+
+import * as styles from './language-selector.css';
+
+const LanguageSelector = () => {
+  const { i18n } = useTranslation();
+  const currentOption = LANGUAGE_OPTIONS.find(
+    (opt) => opt.value === i18n.language,
+  )!;
+
+  const filteredOptions = LANGUAGE_OPTIONS.filter(
+    (opt) => opt.value !== i18n.language,
+  );
+
+  return (
+    <div className={styles.container}>
+      <Dropdown
+        onSelect={(value) => i18n.changeLanguage(value)}
+        options={filteredOptions}
+        icon={<GlobalIcon width={16} height={16} />}
+      >
+        {currentOption.label}
+      </Dropdown>
+    </div>
+  );
+};
+
+export default LanguageSelector;
diff --git a/apps/landing/src/constants/career-roadmap-preview.ts b/apps/landing/src/constants/career-roadmap-preview.ts
new file mode 100644
index 00000000..4cda0c62
--- /dev/null
+++ b/apps/landing/src/constants/career-roadmap-preview.ts
@@ -0,0 +1,73 @@
+type PhaseState = 'past' | 'current' | 'future';
+type StatusTone = 'warning' | 'primary' | 'muted';
+type ActionState = 'active' | 'default' | 'completed';
+type ActionTagTone = 'visa' | 'career';
+
+interface RoadmapPhase {
+  step: number;
+  name: string;
+  state: PhaseState;
+  status: string;
+  statusTone: StatusTone;
+}
+
+interface RoadmapAction {
+  id: string;
+  tag: string;
+  tagTone: ActionTagTone;
+  label: string;
+  state: ActionState;
+  date?: string;
+  result?: string;
+}
+
+export const ROADMAP_PHASES = [
+  {
+    step: 1,
+    name: 'Verify Requirements\nSep – Nov',
+    state: 'past',
+    status: 'Incomplete 2',
+    statusTone: 'warning',
+  },
+  {
+    step: 2,
+    name: 'Build Experience\nCurrent Phase',
+    state: 'current',
+    status: 'Remained 3',
+    statusTone: 'primary',
+  },
+  {
+    step: 3,
+    name: 'D-10 Transition\nSep – Nov',
+    state: 'future',
+    status: 'Scheduled 8',
+    statusTone: 'muted',
+  },
+] satisfies RoadmapPhase[];
+
+export const ROADMAP_ACTIONS = [
+  {
+    id: 'internship-log',
+    tag: 'Visa',
+    tagTone: 'visa',
+    label: 'Prepare internship log',
+    date: 'Jan 24',
+    state: 'active',
+  },
+  {
+    id: 'experience-portfolio',
+    tag: 'Career',
+    tagTone: 'career',
+    label: 'Build experience portfolio',
+    date: 'Jan 24',
+    state: 'default',
+  },
+  {
+    id: 'university-documents',
+    tag: 'Career',
+    tagTone: 'career',
+    label: 'Register university documents',
+    result: 'Done ✓',
+    state: 'completed',
+  },
+] satisfies RoadmapAction[];
diff --git a/apps/landing/src/constants/index.ts b/apps/landing/src/constants/index.ts
new file mode 100644
index 00000000..9a24bf17
--- /dev/null
+++ b/apps/landing/src/constants/index.ts
@@ -0,0 +1,4 @@
+export { ROADMAP_ACTIONS, ROADMAP_PHASES } from './career-roadmap-preview';
+export { JOB_PREVIEWS } from './job-preview';
+export { LANDING_SECTION_ID } from './section-id';
+export { TODO_ITEMS } from './todo-preview';
diff --git a/apps/landing/src/constants/job-preview.ts b/apps/landing/src/constants/job-preview.ts
new file mode 100644
index 00000000..3ed1cf98
--- /dev/null
+++ b/apps/landing/src/constants/job-preview.ts
@@ -0,0 +1,42 @@
+export const JOB_PREVIEWS = [
+  {
+    id: 'part-time',
+    company: 'Hunjin',
+    title: 'Frontend Developer',
+    date: 'Jan 24, 2026',
+    deadline: 'D-5',
+    employmentType: 'Part-time',
+    tagTone: 'blue',
+    location: 'Incheon',
+  },
+  {
+    id: 'regular',
+    company: 'Junghoon',
+    title: 'Backend Developer',
+    date: 'Jan 24, 2026',
+    deadline: 'D-5',
+    employmentType: 'Regular',
+    tagTone: 'green',
+    location: 'Seoul',
+  },
+  {
+    id: 'discussion',
+    company: 'Yoonji',
+    title: 'AI Developer',
+    date: 'Jan 24, 2026',
+    deadline: 'D-5',
+    employmentType: 'Discussion',
+    tagTone: 'gray',
+    location: 'Seoul',
+  },
+  {
+    id: 'contract',
+    company: 'Haeun',
+    title: 'Frontend Developer',
+    date: 'Jan 24, 2026',
+    deadline: 'D-5',
+    employmentType: 'Contract',
+    tagTone: 'orange',
+    location: 'Changwon',
+  },
+] as const;
diff --git a/apps/landing/src/constants/section-id.ts b/apps/landing/src/constants/section-id.ts
new file mode 100644
index 00000000..3b0484e6
--- /dev/null
+++ b/apps/landing/src/constants/section-id.ts
@@ -0,0 +1,5 @@
+export const LANDING_SECTION_ID = {
+  features: 'landing-features',
+  reviews: 'landing-reviews',
+  earlyAccess: 'landing-early-access',
+} as const;
diff --git a/apps/landing/src/constants/todo-preview.ts b/apps/landing/src/constants/todo-preview.ts
new file mode 100644
index 00000000..2b6b5b7b
--- /dev/null
+++ b/apps/landing/src/constants/todo-preview.ts
@@ -0,0 +1,30 @@
+export const TODO_ITEMS = [
+  {
+    id: 'opt-application',
+    label: 'Submit OPT Application',
+    due: 'D-1',
+    completed: false,
+    urgent: true,
+  },
+  {
+    id: 'arc-documents',
+    label: 'Prepare ARC Documents',
+    due: 'D-5',
+    completed: false,
+    urgent: false,
+  },
+  {
+    id: 'health-insurance',
+    label: 'Get Health Insurance',
+    due: 'D-10',
+    completed: false,
+    urgent: false,
+  },
+  {
+    id: 'university-registration',
+    label: 'Register at University',
+    due: 'Done',
+    completed: true,
+    urgent: false,
+  },
+] as const;
diff --git a/apps/landing/src/i18n/constants.ts b/apps/landing/src/i18n/constants.ts
new file mode 100644
index 00000000..dfb2e990
--- /dev/null
+++ b/apps/landing/src/i18n/constants.ts
@@ -0,0 +1,12 @@
+export const LANGUAGE_OPTIONS = [
+  { value: 'en', label: 'English' },
+  { value: 'ko', label: '한국어' },
+] as const;
+
+export type SupportedLanguage = (typeof LANGUAGE_OPTIONS)[number]['value'];
+
+export const SUPPORTED_LANGUAGES = LANGUAGE_OPTIONS.map(
+  (option) => option.value,
+) as SupportedLanguage[];
+
+export const DEFAULT_LANGUAGE = 'en' as const satisfies SupportedLanguage;
diff --git a/apps/landing/src/i18n/i18n.ts b/apps/landing/src/i18n/i18n.ts
new file mode 100644
index 00000000..2574e009
--- /dev/null
+++ b/apps/landing/src/i18n/i18n.ts
@@ -0,0 +1,36 @@
+import { DEFAULT_LANGUAGE, SUPPORTED_LANGUAGES } from '@i18n/constants';
+import { resources } from '@i18n/resources';
+import i18n from 'i18next';
+import { initReactI18next } from 'react-i18next';
+
+const LANGUAGE_STORAGE_KEY = 'landing-language';
+
+const getInitialLanguage = () => {
+  const savedLanguage = window.localStorage.getItem(LANGUAGE_STORAGE_KEY);
+  const isSupported = SUPPORTED_LANGUAGES.some(
+    (language) => language === savedLanguage,
+  );
+
+  return isSupported && savedLanguage ? savedLanguage : DEFAULT_LANGUAGE;
+};
+
+i18n.on('languageChanged', (language: string) => {
+  if (!SUPPORTED_LANGUAGES.some((item) => item === language)) {
+    return;
+  }
+
+  window.localStorage.setItem(LANGUAGE_STORAGE_KEY, language);
+  document.documentElement.lang = language;
+});
+
+i18n.use(initReactI18next).init({
+  resources,
+  lng: getInitialLanguage(),
+  fallbackLng: DEFAULT_LANGUAGE,
+  supportedLngs: [...SUPPORTED_LANGUAGES],
+  ns: ['landing'],
+  defaultNS: 'landing',
+  interpolation: { escapeValue: false },
+});
+
+export default i18n;
diff --git a/apps/landing/src/i18n/locales/en.json b/apps/landing/src/i18n/locales/en.json
new file mode 100644
index 00000000..830c02f7
--- /dev/null
+++ b/apps/landing/src/i18n/locales/en.json
@@ -0,0 +1,108 @@
+{
+  "form": {
+    "success": "Your early access request is complete.",
+    "error": "Something went wrong. Please try again shortly."
+  },
+  "header": {
+    "navigation": {
+      "features": "Features",
+      "reviews": "Reviews",
+      "earlyAccess": "Early Access"
+    },
+    "cta": "Get Early Access"
+  },
+  "hero": {
+    "badge": "For International Students in Korea",
+    "title": "Lost in Korea's job market?",
+    "highlight": "Start with Kareer",
+    "description": "From visa to job listings to action plans —\nfind your personalized path, all in one place.",
+    "painPoints": {
+      "visa": "Applied for a job, only to hear 'visa not eligible'",
+      "e7": "I know what E-7 is, but how do I even get there?",
+      "job": "Is there really no other job besides English teacher?",
+      "deadline": "Missed the deadline relying on WeChat group info"
+    },
+    "solution": "Kareer solves all of this for you →",
+    "email": {
+      "placeholder": "Enter your email address",
+      "cta": "Get Early Access",
+      "note": "We'll only send you launch updates. No spam."
+    }
+  },
+  "stats": {
+    "label": "WHY KAREER EXISTS",
+    "descriptions": {
+      "desiredEmployment": "of international students\nwant to work in Korea",
+      "actualEmployment": "actually\nget hired"
+    },
+    "versus": "VS",
+    "gap": "A 69.3%p gap — Kareer is here to close it"
+  },
+  "features": {
+    "job": {
+      "label": "Feature 01",
+      "title": "Upload your resume,\nget only the jobs\nyou can actually apply for",
+      "description": "We analyze your visa info and resume from onboarding to show only jobs you can apply for right now. No more wasting time on listings that reject you due to visa issues."
+    },
+    "roadmap": {
+      "label": "Feature 02",
+      "title": "We design your visa &\ncareer roadmap together",
+      "description": "We analyze your major, visa type, and language data from onboarding to map out a realistic path to E-7. Each step comes with a concrete action list."
+    },
+    "todo": {
+      "label": "Feature 03",
+      "title": "Manage everything\nin one place, never miss a step",
+      "description": "From visa documents to career prep — manage it all in Visa / Career tabs. Actions from your roadmap link directly to your To-Do list."
+    }
+  },
+  "voices": {
+    "label": "Real Voices",
+    "title": "Here's what international students are saying",
+    "items": {
+      "trade": {
+        "quote": "I wanted a job in trade, but had no idea where to start — so I just worked part-time at a kimbap place.",
+        "meta": "User Interview · China · D-2 · Business"
+      },
+      "resume": {
+        "quote": "I've never written a resume or cover letter before. I have no idea how to improve my chances of getting hired.",
+        "meta": "User Interview · Vietnam · D-2 · Marketing"
+      },
+      "wechat": {
+        "quote": "The only information I could find was in WeChat groups. I had no idea where else to look.",
+        "meta": "User Interview · China · D-2 · International Trade"
+      }
+    }
+  },
+  "whyKareer": {
+    "title": "Why Kareer?",
+    "description": "Your Korean career journey, from first step to final offer — with Kareer.",
+    "benefits": {
+      "jobs": {
+        "title": "Only jobs that match your profile",
+        "description": "We analyze your visa, TOPIK level, and resume to show only the jobs you can apply for. We filter out the rejections before you even see the listing."
+      },
+      "roadmap": {
+        "title": "Integrated visa & career roadmap",
+        "description": "We design your E-7 path based on your major, visa, and language data. No need to manage visa prep and career prep separately."
+      },
+      "actions": {
+        "title": "Directly linked to your action list",
+        "description": "Every step of your roadmap links to a concrete To-Do. You'll always know what to do and when."
+      }
+    },
+    "credit": "DIVE SOPT 37TH WEBJAM · TEAM KAREER — \"YOUR CAREER, NOW CLEARING FOR TAKE-OFF\""
+  },
+  "earlyAccess": {
+    "badge": "Early Access · First 100 Sign-ups",
+    "title": "Sign up now and\nbe the first to use it",
+    "description": "We're opening early access to just 100 people.\nGet your personalized job matches and career roadmap right away.",
+    "email": {
+      "placeholder": "Enter your email address",
+      "cta": "Get Early Access",
+      "note": "We'll only send you launch updates. No spam."
+    }
+  },
+  "footer": {
+    "note": "© 2026 Kareer · Built for international students in Korea"
+  }
+}
diff --git a/apps/landing/src/i18n/locales/ko.json b/apps/landing/src/i18n/locales/ko.json
new file mode 100644
index 00000000..677ed4a1
--- /dev/null
+++ b/apps/landing/src/i18n/locales/ko.json
@@ -0,0 +1,108 @@
+{
+  "form": {
+    "success": "얼리 액세스 신청이 완료되었어요.",
+    "error": "신청에 실패했어요. 잠시 후 다시 시도해주세요."
+  },
+  "header": {
+    "navigation": {
+      "features": "기능",
+      "reviews": "후기",
+      "earlyAccess": "얼리 액세스"
+    },
+    "cta": "얼리 액세스 신청"
+  },
+  "hero": {
+    "badge": "한국의 외국인 유학생을 위해",
+    "title": "한국 취업, 막막하다면?",
+    "highlight": "Kareer와 시작해보세요",
+    "description": "비자·공고·액션플랜까지\n내 조건에 맞는 경로를 한 곳에서 확인하세요.",
+    "painPoints": {
+      "visa": "채용공고 지원했더니 비자 안 된다고",
+      "e7": "E-7이 뭔지는 알겠는데 어떻게 준비해?",
+      "job": "영어강사 말고 다른 직무는 없나요",
+      "deadline": "위챗 단톡방 정보만 믿다가 마감"
+    },
+    "solution": "Kareer가 이 모든 걸 해결해드려요 →",
+    "email": {
+      "placeholder": "이메일 주소를 입력해주세요",
+      "cta": "신청하기",
+      "note": "스팸 없이 출시 소식만 보내드려요"
+    }
+  },
+  "stats": {
+    "label": "왜 KAREER가 필요한가요",
+    "descriptions": {
+      "desiredEmployment": "외국인 유학생의\n한국 취업 희망률",
+      "actualEmployment": "실제 취업\n전환율"
+    },
+    "versus": "VS",
+    "gap": "69.3%p의 갭 — Kareer가 이 간격을 줄여드려요"
+  },
+  "features": {
+    "job": {
+      "label": "Feature 01",
+      "title": "이력서 올리면\n지원 가능한 공고만\n골라드려요",
+      "description": "온보딩에서 입력한 비자 정보와 이력서를 분석해서, 내가 지금 지원할 수 있는 공고만 보여드려요. 비자 때문에 지원도 못 하는 공고에 시간 낭비하지 않아도 돼요."
+    },
+    "roadmap": {
+      "label": "Feature 02",
+      "title": "비자·커리어 로드맵을\n한 번에 설계해요",
+      "description": "온보딩에서 입력한 전공, 비자, 언어 데이터를 분석해서 E-7 취득까지의 현실적인 커리어 경로를 설계해드려요. 단계별로 해야 할 것들이 액션 리스트로 나와요."
+    },
+    "todo": {
+      "label": "Feature 03",
+      "title": "할 일을 놓치지 않게\n한 곳에서 관리해요",
+      "description": "비자 서류부터 커리어 준비까지, Visa / Career 탭으로 나눠서 관리해요. 로드맵에서 액션을 추가하면 To-Do로 바로 연결돼요."
+    }
+  },
+  "voices": {
+    "label": "Real Voices",
+    "title": "실제 외국인 유학생들의 이야기예요",
+    "items": {
+      "trade": {
+        "quote": "무역직을 원하는데 뭘 해야 할지 몰라서 김밥집 알바만 했다",
+        "meta": "유저 인터뷰 · 중국 · D-2 · 경영학"
+      },
+      "resume": {
+        "quote": "이력서나 자기소개서를 한 번도 작성해본 적이 없다. 어떻게 해야 합격률을 높일 수 있는지 모르겠다",
+        "meta": "유저 인터뷰 · 베트남 · D-2 · 마케팅"
+      },
+      "wechat": {
+        "quote": "위챗에서 주는 정보만 볼 수 있다. 더 알고 싶으면 어디를 찾아가야 할지 모르겠다",
+        "meta": "유저 인터뷰 · 중국 · D-2 · 국제통상"
+      }
+    }
+  },
+  "whyKareer": {
+    "title": "왜 Kareer여야 하나요?",
+    "description": "외국인 유학생의 한국 취업, Kareer가 처음부터 끝까지 함께해요",
+    "benefits": {
+      "jobs": {
+        "title": "내 조건에 맞는 공고만",
+        "description": "비자, TOPIK, 이력서를 분석해서 지금 지원 가능한 공고만 골라드려요. 비자 때문에 안 된다는 말을 공고 보기 전에 미리 걸러드려요."
+      },
+      "roadmap": {
+        "title": "비자·커리어 로드맵 통합 설계",
+        "description": "전공, 비자, 언어 데이터를 기반으로 E-7 취득까지의 경로를 설계해요. 비자 준비와 커리어 준비를 따로 할 필요 없어요."
+      },
+      "actions": {
+        "title": "액션 리스트로 바로 연결",
+        "description": "로드맵의 각 단계가 구체적인 To-Do로 연결돼요. 무엇을 언제까지 해야 하는지 막막하지 않아요."
+      }
+    },
+    "credit": "DIVE SOPT 37TH WEBJAM · TEAM KAREER — \"YOUR CAREER, NOW CLEARING FOR TAKE-OFF\""
+  },
+  "earlyAccess": {
+    "badge": "얼리 액세스 선착순 100명",
+    "title": "지금 신청하면\n가장 먼저 써볼 수 있어요",
+    "description": "100명에게만 먼저 오픈해요.\n내 조건으로 맞춤 공고와 커리어 로드맵을 바로 확인할 수 있어요.",
+    "email": {
+      "placeholder": "이메일 주소를 입력해주세요",
+      "cta": "얼리 액세스 신청하기",
+      "note": "스팸 없이 출시 소식만 보내드려요"
+    }
+  },
+  "footer": {
+    "note": "© 2026 Kareer · Built for international students in Korea"
+  }
+}
diff --git a/apps/landing/src/i18n/resources.ts b/apps/landing/src/i18n/resources.ts
new file mode 100644
index 00000000..e9a028d6
--- /dev/null
+++ b/apps/landing/src/i18n/resources.ts
@@ -0,0 +1,11 @@
+import enLanding from '@i18n/locales/en.json';
+import koLanding from '@i18n/locales/ko.json';
+
+export const resources = {
+  en: {
+    landing: enLanding,
+  },
+  ko: {
+    landing: koLanding,
+  },
+} as const;
diff --git a/apps/landing/src/main.tsx b/apps/landing/src/main.tsx
new file mode 100644
index 00000000..3536b49f
--- /dev/null
+++ b/apps/landing/src/main.tsx
@@ -0,0 +1,16 @@
+import { StrictMode } from 'react';
+import { ToastProvider } from '@kds/ui';
+import { createRoot } from 'react-dom/client';
+
+import '@kds/ui/styles';
+import '@i18n/i18n';
+
+import Page from './page';
+
+createRoot(document.getElementById('root')!).render(
+  <StrictMode>
+    <ToastProvider>
+      <Page />
+    </ToastProvider>
+  </StrictMode>,
+);
diff --git a/apps/landing/src/page.css.ts b/apps/landing/src/page.css.ts
new file mode 100644
index 00000000..9b85aef7
--- /dev/null
+++ b/apps/landing/src/page.css.ts
@@ -0,0 +1,8 @@
+import { style } from '@vanilla-extract/css';
+
+export const container = style({
+  height: '100dvh',
+  overflowX: 'hidden',
+  overflowY: 'auto',
+  scrollPaddingTop: '6.2rem',
+});
diff --git a/apps/landing/src/page.tsx b/apps/landing/src/page.tsx
new file mode 100644
index 00000000..967a2ddb
--- /dev/null
+++ b/apps/landing/src/page.tsx
@@ -0,0 +1,33 @@
+import LandingFooter from '@components/footer/landing-footer';
+import LandingHeader from '@components/header/landing-header';
+import CareerRoadmapSection from '@sections/career-roadmap/career-roadmap-section';
+import EarlyAccessSection from '@sections/early-access/early-access-section';
+import HeroSection from '@sections/hero/hero-section';
+import JobRecommendationSection from '@sections/job-recommendation/job-recommendation-section';
+import RealVoicesSection from '@sections/real-voices/real-voices-section';
+import StatsSection from '@sections/stats/stats-section';
+import TodoManagementSection from '@sections/todo-management/todo-management-section';
+import WhyKareerSection from '@sections/why-kareer/why-kareer-section';
+
+import * as styles from './page.css';
+
+const Page = () => {
+  return (
+    <div className={styles.container}>
+      <LandingHeader />
+      <main>
+        <HeroSection />
+        <StatsSection />
+        <JobRecommendationSection />
+        <CareerRoadmapSection />
+        <TodoManagementSection />
+        <RealVoicesSection />
+        <WhyKareerSection />
+        <EarlyAccessSection />
+      </main>
+      <LandingFooter />
+    </div>
+  );
+};
+
+export default Page;
diff --git a/apps/landing/src/sections/career-roadmap/career-roadmap-preview/career-roadmap-preview.css.ts b/apps/landing/src/sections/career-roadmap/career-roadmap-preview/career-roadmap-preview.css.ts
new file mode 100644
index 00000000..0b7b41d0
--- /dev/null
+++ b/apps/landing/src/sections/career-roadmap/career-roadmap-preview/career-roadmap-preview.css.ts
@@ -0,0 +1,215 @@
+import { themeVars } from '@kds/ui/styles';
+import { style } from '@vanilla-extract/css';
+import { recipe } from '@vanilla-extract/recipes';
+
+export const container = style({
+  padding: '2rem',
+  border: `1px solid ${themeVars.color.grayscale.gray300}`,
+  borderRadius: '14px',
+  backgroundColor: themeVars.color.grayscale.white,
+  boxShadow: '0 8px 40px rgba(59, 110, 248, 0.08)',
+});
+
+export const header = style({
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'space-between',
+  marginBottom: '1.6rem',
+});
+
+export const heading = style({
+  color: themeVars.color.grayscale.gray800,
+  fontSize: '1.2rem',
+  fontWeight: 700,
+});
+
+export const headingAccent = style({
+  color: themeVars.color.primary[500],
+});
+
+export const phaseCount = style({
+  color: themeVars.color.grayscale.gray500,
+  fontSize: '1rem',
+});
+
+export const phases = style({
+  display: 'flex',
+  position: 'relative',
+  marginBottom: '1.8rem',
+
+  selectors: {
+    '&::before': {
+      position: 'absolute',
+      top: '1.4rem',
+      right: '2.8rem',
+      left: '2.8rem',
+      height: '2px',
+      zIndex: 0,
+      background: `linear-gradient(90deg, ${themeVars.color.grayscale.gray300} 33%, ${themeVars.color.primary[500]} 33%, ${themeVars.color.primary[500]} 66%, ${themeVars.color.grayscale.gray300} 66%)`,
+      content: '',
+    },
+  },
+});
+
+export const phase = style({
+  position: 'relative',
+  flex: 1,
+  zIndex: 1,
+  textAlign: 'center',
+});
+
+export const phaseDot = recipe({
+  base: {
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    width: '2.8rem',
+    height: '2.8rem',
+    margin: '0 auto 0.6rem',
+    borderRadius: '50%',
+    fontSize: '1.1rem',
+    fontWeight: 700,
+  },
+  variants: {
+    state: {
+      past: {
+        color: themeVars.color.grayscale.gray500,
+        backgroundColor: themeVars.color.grayscale.gray300,
+      },
+      current: {
+        color: themeVars.color.grayscale.white,
+        backgroundColor: themeVars.color.primary[500],
+        boxShadow: '0 0 0 4px rgba(59, 110, 248, 0.2)',
+      },
+      future: {
+        border: `2px solid ${themeVars.color.grayscale.gray300}`,
+        color: themeVars.color.grayscale.gray500,
+        backgroundColor: themeVars.color.grayscale.white,
+      },
+    },
+  },
+});
+
+export const phaseName = recipe({
+  base: {
+    color: themeVars.color.grayscale.gray500,
+    fontSize: '1rem',
+    lineHeight: 1.3,
+    whiteSpace: 'pre-line',
+  },
+  variants: {
+    current: {
+      true: {
+        color: themeVars.color.primary[500],
+        fontWeight: 600,
+      },
+    },
+  },
+});
+
+export const phaseStatus = recipe({
+  base: {
+    marginTop: '0.2rem',
+    fontSize: '0.9rem',
+  },
+  variants: {
+    tone: {
+      warning: {
+        color: themeVars.color.pastel.kared_500,
+      },
+      primary: {
+        color: themeVars.color.primary[500],
+      },
+      muted: {
+        color: themeVars.color.grayscale.gray500,
+      },
+    },
+  },
+});
+
+export const actions = style({
+  display: 'flex',
+  flexDirection: 'column',
+  gap: '0.6rem',
+});
+
+export const action = recipe({
+  base: {
+    display: 'flex',
+    alignItems: 'center',
+    gap: '0.9rem',
+    padding: '0.9rem 1.2rem',
+    border: `1px solid ${themeVars.color.grayscale.gray300}`,
+    borderRadius: '9px',
+    color: themeVars.color.grayscale.gray800,
+    fontSize: '1.2rem',
+  },
+  variants: {
+    state: {
+      active: {
+        borderColor: themeVars.color.primary[300],
+        backgroundColor: themeVars.color.primary[100],
+      },
+      default: {},
+      completed: {
+        opacity: 0.45,
+      },
+    },
+  },
+});
+
+export const actionTag = recipe({
+  base: {
+    padding: '0.2rem 0.7rem',
+    borderRadius: '99px',
+    fontSize: '0.9rem',
+    fontWeight: 600,
+  },
+  variants: {
+    tone: {
+      visa: {
+        color: themeVars.color.primary[500],
+        backgroundColor: themeVars.color.primary[100],
+      },
+      career: {
+        color: themeVars.color.pastel.kamint_500,
+        backgroundColor: themeVars.color.pastel.kamint_100,
+      },
+    },
+  },
+});
+
+export const actionLabel = recipe({
+  variants: {
+    completed: {
+      true: {
+        color: themeVars.color.grayscale.gray500,
+        textDecoration: 'line-through',
+      },
+    },
+  },
+});
+
+export const actionDate = style({
+  marginLeft: '0.4rem',
+  color: themeVars.color.grayscale.gray500,
+  fontSize: '1rem',
+});
+
+export const todoAction = style({
+  marginLeft: 'auto',
+  padding: '0.3rem 0.9rem',
+  border: `1px solid ${themeVars.color.primary[500]}`,
+  borderRadius: '99px',
+  color: themeVars.color.primary[500],
+  fontSize: '1rem',
+  fontWeight: 600,
+  whiteSpace: 'nowrap',
+});
+
+export const actionResult = style({
+  marginLeft: 'auto',
+  color: themeVars.color.pastel.kamint_500,
+  fontSize: '1rem',
+  fontWeight: 600,
+});
diff --git a/apps/landing/src/sections/career-roadmap/career-roadmap-preview/career-roadmap-preview.tsx b/apps/landing/src/sections/career-roadmap/career-roadmap-preview/career-roadmap-preview.tsx
new file mode 100644
index 00000000..a7ad8bec
--- /dev/null
+++ b/apps/landing/src/sections/career-roadmap/career-roadmap-preview/career-roadmap-preview.tsx
@@ -0,0 +1,53 @@
+import { ROADMAP_ACTIONS, ROADMAP_PHASES } from '@constants/index';
+
+import * as styles from './career-roadmap-preview.css';
+
+const CareerRoadmapPreview = () => {
+  return (
+    <div className={styles.container}>
+      <div className={styles.header}>
+        <p className={styles.heading}>
+          Your path to{' '}
+          <span className={styles.headingAccent}>E-7 Employment Visa</span>
+        </p>
+        <p className={styles.phaseCount}>3 Phases</p>
+      </div>
+
+      <div className={styles.phases}>
+        {ROADMAP_PHASES.map(({ step, name, state, status, statusTone }) => (
+          <div key={step} className={styles.phase}>
+            <div className={styles.phaseDot({ state })}>{step}</div>
+            <p className={styles.phaseName({ current: state === 'current' })}>
+              {name}
+            </p>
+            <p className={styles.phaseStatus({ tone: statusTone })}>{status}</p>
+          </div>
+        ))}
+      </div>
+
+      <div className={styles.actions}>
+        {ROADMAP_ACTIONS.map(
+          ({ id, tag, tagTone, label, state, date, result }) => (
+            <div key={id} className={styles.action({ state })}>
+              <span className={styles.actionTag({ tone: tagTone })}>{tag}</span>
+              <span
+                className={styles.actionLabel({
+                  completed: state === 'completed',
+                })}
+              >
+                {label}
+              </span>
+              {date && <span className={styles.actionDate}>{date}</span>}
+              {state !== 'completed' && (
+                <span className={styles.todoAction}>+ To-Do</span>
+              )}
+              {result && <span className={styles.actionResult}>{result}</span>}
+            </div>
+          ),
+        )}
+      </div>
+    </div>
+  );
+};
+
+export default CareerRoadmapPreview;
diff --git a/apps/landing/src/sections/career-roadmap/career-roadmap-section.tsx b/apps/landing/src/sections/career-roadmap/career-roadmap-section.tsx
new file mode 100644
index 00000000..7dbfd855
--- /dev/null
+++ b/apps/landing/src/sections/career-roadmap/career-roadmap-section.tsx
@@ -0,0 +1,20 @@
+import FeatureSection from '@components/feature-section/feature-section';
+import { useTranslation } from 'react-i18next';
+
+import CareerRoadmapPreview from './career-roadmap-preview/career-roadmap-preview';
+
+const CareerRoadmapSection = () => {
+  const { t } = useTranslation('landing');
+
+  return (
+    <FeatureSection
+      featureLabel={t('features.roadmap.label')}
+      title={t('features.roadmap.title')}
+      description={t('features.roadmap.description')}
+      preview={<CareerRoadmapPreview />}
+      previewPosition="left"
+    />
+  );
+};
+
+export default CareerRoadmapSection;
diff --git a/apps/landing/src/sections/early-access/early-access-section.css.ts b/apps/landing/src/sections/early-access/early-access-section.css.ts
new file mode 100644
index 00000000..268a0663
--- /dev/null
+++ b/apps/landing/src/sections/early-access/early-access-section.css.ts
@@ -0,0 +1,31 @@
+import { themeVars, typography } from '@kds/ui/styles';
+import { style } from '@vanilla-extract/css';
+
+export const container = style({
+  padding: '10rem 4.8rem',
+  background: `linear-gradient(180deg, #eff6ff 0%, ${themeVars.color.grayscale.white} 100%)`,
+  lineHeight: 1.6,
+  textAlign: 'center',
+});
+
+export const badgeSpacing = style({
+  marginBottom: '2rem',
+  lineHeight: 1.6,
+});
+
+export const title = style({
+  marginBottom: '1.2rem',
+  color: themeVars.color.grayscale.gray800,
+  fontSize: '4rem',
+  fontWeight: 800,
+  letterSpacing: '-0.02em',
+  whiteSpace: 'pre-line',
+});
+
+export const description = style({
+  ...typography.body6_r_16,
+  marginBottom: '3.6rem',
+  color: themeVars.color.grayscale.gray700,
+  lineHeight: 1.7,
+  whiteSpace: 'pre-line',
+});
diff --git a/apps/landing/src/sections/early-access/early-access-section.tsx b/apps/landing/src/sections/early-access/early-access-section.tsx
new file mode 100644
index 00000000..7172edc7
--- /dev/null
+++ b/apps/landing/src/sections/early-access/early-access-section.tsx
@@ -0,0 +1,33 @@
+import Badge from '@components/badge/badge';
+import EarlyAccessForm from '@components/early-access-form/early-access-form';
+import { LANDING_SECTION_ID } from '@constants/section-id';
+import { SparkleIcon } from '@kds/icons';
+import { useTranslation } from 'react-i18next';
+
+import * as styles from './early-access-section.css';
+
+const EarlyAccessSection = () => {
+  const { t } = useTranslation('landing');
+
+  return (
+    <section id={LANDING_SECTION_ID.earlyAccess} className={styles.container}>
+      <Badge
+        icon={<SparkleIcon width={16} height={16} />}
+        className={styles.badgeSpacing}
+      >
+        {t('earlyAccess.badge')}
+      </Badge>
+      <h2 className={styles.title}>{t('earlyAccess.title')}</h2>
+      <p className={styles.description}>{t('earlyAccess.description')}</p>
+
+      <EarlyAccessForm
+        variant="final"
+        placeholder={t('earlyAccess.email.placeholder')}
+        buttonLabel={t('earlyAccess.email.cta')}
+        note={t('earlyAccess.email.note')}
+      />
+    </section>
+  );
+};
+
+export default EarlyAccessSection;
diff --git a/apps/landing/src/sections/hero/hero-section.css.ts b/apps/landing/src/sections/hero/hero-section.css.ts
new file mode 100644
index 00000000..f17071a3
--- /dev/null
+++ b/apps/landing/src/sections/hero/hero-section.css.ts
@@ -0,0 +1,71 @@
+import { themeVars, typography } from '@kds/ui/styles';
+import { style } from '@vanilla-extract/css';
+
+export const container = style({
+  display: 'flex',
+  flexDirection: 'column',
+  alignItems: 'center',
+  justifyContent: 'center',
+  minHeight: '100vh',
+  padding: '11rem 4.8rem 0',
+  textAlign: 'center',
+});
+
+export const badgeSpacing = style({
+  marginBottom: '2.8rem',
+});
+
+export const title = style({
+  marginBottom: '2rem',
+  color: themeVars.color.grayscale.gray800,
+  fontSize: '5.8rem',
+  fontWeight: 800,
+  lineHeight: 1.15,
+  letterSpacing: '-0.03em',
+});
+
+export const highlight = style({
+  position: 'relative',
+  display: 'inline-block',
+  color: themeVars.color.primary[500],
+  '::after': {
+    content: '',
+    position: 'absolute',
+    bottom: '-0.4rem',
+    left: 0,
+    width: '100%',
+    height: '0.4rem',
+    borderRadius: '2px',
+    backgroundColor: themeVars.color.primary[500],
+    opacity: 0.3,
+  },
+});
+
+export const description = style({
+  ...typography.body3_r_18,
+  maxWidth: '52rem',
+  margin: '0 auto 4.4rem',
+  color: themeVars.color.grayscale.gray700,
+  lineHeight: 1.75,
+  whiteSpace: 'pre-line',
+});
+
+export const painPoints = style({
+  display: 'flex',
+  flexWrap: 'wrap',
+  justifyContent: 'center',
+  maxWidth: '70rem',
+  marginBottom: '4.8rem',
+  gap: '1rem',
+});
+
+export const painPointIcon = style({
+  flexShrink: 0,
+});
+
+export const solution = style({
+  ...typography.body7_sb_14,
+  marginTop: '-1.2rem',
+  marginBottom: '2.8rem',
+  color: themeVars.color.primary[500],
+});
diff --git a/apps/landing/src/sections/hero/hero-section.tsx b/apps/landing/src/sections/hero/hero-section.tsx
new file mode 100644
index 00000000..7e035abc
--- /dev/null
+++ b/apps/landing/src/sections/hero/hero-section.tsx
@@ -0,0 +1,66 @@
+import Badge from '@components/badge/badge';
+import EarlyAccessForm from '@components/early-access-form/early-access-form';
+import {
+  GlobalIcon,
+  RoadmapIcon,
+  SearchIcon,
+  TimerIcon,
+  XIcon,
+} from '@kds/icons';
+import { useTranslation } from 'react-i18next';
+
+import PainPointItem from './pain-point-item/pain-point-item';
+
+import * as styles from './hero-section.css';
+
+const PAIN_POINTS = [
+  { icon: XIcon, translationKey: 'hero.painPoints.visa' },
+  { icon: RoadmapIcon, translationKey: 'hero.painPoints.e7' },
+  { icon: SearchIcon, translationKey: 'hero.painPoints.job' },
+  { icon: TimerIcon, translationKey: 'hero.painPoints.deadline' },
+] as const;
+
+const HeroSection = () => {
+  const { t } = useTranslation('landing');
+
+  return (
+    <section className={styles.container}>
+      <Badge
+        icon={<GlobalIcon width={16} height={16} />}
+        className={styles.badgeSpacing}
+      >
+        {t('hero.badge')}
+      </Badge>
+
+      <h1 className={styles.title}>
+        {t('hero.title')}
+        <br />
+        <span className={styles.highlight}>{t('hero.highlight')}</span>
+      </h1>
+
+      <p className={styles.description}>{t('hero.description')}</p>
+
+      <div className={styles.painPoints}>
+        {PAIN_POINTS.map(({ icon: Icon, translationKey }) => (
+          <PainPointItem
+            key={translationKey}
+            icon={
+              <Icon width={18} height={18} className={styles.painPointIcon} />
+            }
+            label={t(translationKey)}
+          />
+        ))}
+      </div>
+
+      <p className={styles.solution}>{t('hero.solution')}</p>
+
+      <EarlyAccessForm
+        placeholder={t('hero.email.placeholder')}
+        buttonLabel={t('hero.email.cta')}
+        note={t('hero.email.note')}
+      />
+    </section>
+  );
+};
+
+export default HeroSection;
diff --git a/apps/landing/src/sections/hero/pain-point-item/pain-point-item.css.ts b/apps/landing/src/sections/hero/pain-point-item/pain-point-item.css.ts
new file mode 100644
index 00000000..f9b0577f
--- /dev/null
+++ b/apps/landing/src/sections/hero/pain-point-item/pain-point-item.css.ts
@@ -0,0 +1,21 @@
+import { themeVars, typography } from '@kds/ui/styles';
+import { style } from '@vanilla-extract/css';
+
+export const painPoint = style({
+  ...typography.body9_r_14,
+  display: 'flex',
+  alignItems: 'center',
+  gap: '0.8rem',
+  padding: '1.1rem 1.6rem',
+  border: `1px solid ${themeVars.color.grayscale.gray300}`,
+  borderRadius: '10px',
+  color: themeVars.color.grayscale.gray800,
+  backgroundColor: themeVars.color.grayscale.gray100,
+  lineHeight: 1.6,
+  transition: 'all 0.2s ease',
+  ':hover': {
+    borderColor: themeVars.color.primary[300],
+    color: themeVars.color.primary[600],
+    backgroundColor: themeVars.color.primary[100],
+  },
+});
diff --git a/apps/landing/src/sections/hero/pain-point-item/pain-point-item.tsx b/apps/landing/src/sections/hero/pain-point-item/pain-point-item.tsx
new file mode 100644
index 00000000..a76b73a7
--- /dev/null
+++ b/apps/landing/src/sections/hero/pain-point-item/pain-point-item.tsx
@@ -0,0 +1,17 @@
+import { ReactNode } from 'react';
+
+import * as styles from './pain-point-item.css';
+
+interface PainPointItemProps {
+  icon: ReactNode;
+  label: string;
+}
+
+const PainPointItem = ({ icon, label }: PainPointItemProps) => (
+  <div className={styles.painPoint}>
+    {icon}
+    {label}
+  </div>
+);
+
+export default PainPointItem;
diff --git a/apps/landing/src/sections/job-recommendation/job-preview-card/job-preview-card.css.ts b/apps/landing/src/sections/job-recommendation/job-preview-card/job-preview-card.css.ts
new file mode 100644
index 00000000..a7827015
--- /dev/null
+++ b/apps/landing/src/sections/job-recommendation/job-preview-card/job-preview-card.css.ts
@@ -0,0 +1,104 @@
+import { themeVars } from '@kds/ui/styles';
+import { style, styleVariants } from '@vanilla-extract/css';
+
+export const jobCard = style({
+  overflow: 'hidden',
+  border: `1px solid ${themeVars.color.grayscale.gray300}`,
+  borderRadius: '10px',
+  backgroundColor: themeVars.color.grayscale.white,
+});
+
+export const jobImage = style({
+  display: 'flex',
+  position: 'relative',
+  alignItems: 'flex-start',
+  justifyContent: 'space-between',
+  height: '7.2rem',
+  padding: '0.8rem',
+  background: `linear-gradient(135deg, ${themeVars.color.grayscale.gray300}, ${themeVars.color.grayscale.gray400})`,
+});
+
+export const deadline = style({
+  padding: '0.2rem 0.8rem',
+  borderRadius: '99px',
+  color: themeVars.color.grayscale.gray800,
+  backgroundColor: themeVars.color.grayscale.white,
+  fontSize: '1rem',
+  fontWeight: 600,
+});
+
+export const jobBody = style({
+  padding: '0.8rem 1rem',
+});
+
+export const company = style({
+  marginBottom: '0.2rem',
+  color: themeVars.color.grayscale.gray500,
+  fontSize: '0.9rem',
+  fontWeight: 600,
+  letterSpacing: '0.05em',
+  textTransform: 'uppercase',
+});
+
+export const jobTitle = style({
+  marginBottom: '0.4rem',
+  color: themeVars.color.grayscale.gray800,
+  fontSize: '1.1rem',
+  fontWeight: 700,
+  lineHeight: 1.3,
+});
+
+export const date = style({
+  marginBottom: '0.6rem',
+  color: themeVars.color.grayscale.gray500,
+  fontSize: '1rem',
+});
+
+export const jobTags = style({
+  display: 'flex',
+  flexWrap: 'wrap',
+  gap: '0.4rem',
+});
+
+const jobTagBase = style({
+  padding: '0.2rem 0.7rem',
+  borderRadius: '99px',
+  fontSize: '0.9rem',
+  fontWeight: 500,
+  whiteSpace: 'nowrap',
+});
+
+export const jobTag = styleVariants({
+  blue: [
+    jobTagBase,
+    {
+      border: `1px solid ${themeVars.color.primary[300]}`,
+      color: themeVars.color.primary[600],
+      backgroundColor: themeVars.color.primary[100],
+    },
+  ],
+  green: [
+    jobTagBase,
+    {
+      border: `1px solid ${themeVars.color.pastel.kamint_500}`,
+      color: themeVars.color.pastel.kamint_500,
+      backgroundColor: themeVars.color.pastel.kamint_100,
+    },
+  ],
+  orange: [
+    jobTagBase,
+    {
+      border: `1px solid ${themeVars.color.pastel.kaorange_500}`,
+      color: themeVars.color.pastel.kaorange_500,
+      backgroundColor: themeVars.color.pastel.kaorange_100,
+    },
+  ],
+  gray: [
+    jobTagBase,
+    {
+      border: `1px solid ${themeVars.color.grayscale.gray300}`,
+      color: themeVars.color.grayscale.gray700,
+      backgroundColor: themeVars.color.grayscale.gray100,
+    },
+  ],
+});
diff --git a/apps/landing/src/sections/job-recommendation/job-preview-card/job-preview-card.tsx b/apps/landing/src/sections/job-recommendation/job-preview-card/job-preview-card.tsx
new file mode 100644
index 00000000..bdf11179
--- /dev/null
+++ b/apps/landing/src/sections/job-recommendation/job-preview-card/job-preview-card.tsx
@@ -0,0 +1,43 @@
+import { BookmarkIcon } from '@kds/icons';
+
+import * as styles from './job-preview-card.css';
+
+interface JobPreviewCardProps {
+  company: string;
+  title: string;
+  date: string;
+  deadline: string;
+  employmentType: string;
+  tagTone: keyof typeof styles.jobTag;
+  location?: string;
+}
+
+const JobPreviewCard = ({
+  company,
+  title,
+  date,
+  deadline,
+  employmentType,
+  tagTone,
+  location,
+}: JobPreviewCardProps) => {
+  return (
+    <article className={styles.jobCard}>
+      <div className={styles.jobImage}>
+        <span className={styles.deadline}>{deadline}</span>
+        <BookmarkIcon width={14} height={14} />
+      </div>
+      <div className={styles.jobBody}>
+        <p className={styles.company}>{company}</p>
+        <p className={styles.jobTitle}>{title}</p>
+        <p className={styles.date}>{date}</p>
+        <div className={styles.jobTags}>
+          <span className={styles.jobTag[tagTone]}>{employmentType}</span>
+          {location && <span className={styles.jobTag.gray}>{location}</span>}
+        </div>
+      </div>
+    </article>
+  );
+};
+
+export default JobPreviewCard;
diff --git a/apps/landing/src/sections/job-recommendation/job-recommendation-preview/job-recommendation-preview.css.ts b/apps/landing/src/sections/job-recommendation/job-recommendation-preview/job-recommendation-preview.css.ts
new file mode 100644
index 00000000..d40c8b72
--- /dev/null
+++ b/apps/landing/src/sections/job-recommendation/job-recommendation-preview/job-recommendation-preview.css.ts
@@ -0,0 +1,75 @@
+import { themeVars } from '@kds/ui/styles';
+import { style } from '@vanilla-extract/css';
+
+export const preview = style({
+  padding: '2.2rem',
+  border: `1px solid ${themeVars.color.grayscale.gray300}`,
+  borderRadius: '14px',
+  backgroundColor: themeVars.color.grayscale.white,
+  boxShadow: '0 8px 40px rgba(59, 110, 248, 0.08)',
+});
+
+export const uploadBar = style({
+  display: 'flex',
+  alignItems: 'center',
+  gap: '0.8rem',
+  marginBottom: '1.4rem',
+  padding: '0.8rem 1rem',
+  border: `1.5px solid ${themeVars.color.grayscale.gray300}`,
+  borderRadius: '10px',
+  backgroundColor: themeVars.color.grayscale.white,
+});
+
+export const upload = style({
+  padding: '0.5rem 1rem',
+  border: `1px solid ${themeVars.color.primary[300]}`,
+  borderRadius: '7px',
+  color: themeVars.color.grayscale.gray700,
+  backgroundColor: themeVars.color.primary[100],
+  fontSize: '1.1rem',
+  fontWeight: 600,
+  whiteSpace: 'nowrap',
+});
+
+export const file = style({
+  padding: '0.4rem 0.9rem',
+  borderRadius: '6px',
+  color: themeVars.color.grayscale.gray700,
+  backgroundColor: themeVars.color.grayscale.gray100,
+  fontSize: '1.1rem',
+  whiteSpace: 'nowrap',
+});
+
+export const todoOption = style({
+  display: 'flex',
+  alignItems: 'center',
+  gap: '0.6rem',
+  marginLeft: 'auto',
+  color: themeVars.color.grayscale.gray500,
+  fontSize: '1.1rem',
+  whiteSpace: 'nowrap',
+});
+
+export const toggle = style({
+  position: 'relative',
+  width: '2.8rem',
+  height: '1.6rem',
+  borderRadius: '99px',
+  backgroundColor: themeVars.color.primary[500],
+});
+
+export const toggleThumb = style({
+  position: 'absolute',
+  top: '0.2rem',
+  right: '0.2rem',
+  width: '1.2rem',
+  height: '1.2rem',
+  borderRadius: '50%',
+  backgroundColor: themeVars.color.grayscale.white,
+});
+
+export const jobGrid = style({
+  display: 'grid',
+  gridTemplateColumns: '1fr 1fr',
+  gap: '0.8rem',
+});
diff --git a/apps/landing/src/sections/job-recommendation/job-recommendation-preview/job-recommendation-preview.tsx b/apps/landing/src/sections/job-recommendation/job-recommendation-preview/job-recommendation-preview.tsx
new file mode 100644
index 00000000..3ae5b41e
--- /dev/null
+++ b/apps/landing/src/sections/job-recommendation/job-recommendation-preview/job-recommendation-preview.tsx
@@ -0,0 +1,30 @@
+import { JOB_PREVIEWS } from '@constants/index';
+
+import JobPreviewCard from '../job-preview-card/job-preview-card';
+
+import * as styles from './job-recommendation-preview.css';
+
+const JobRecommendationPreview = () => {
+  return (
+    <div className={styles.preview}>
+      <div className={styles.uploadBar}>
+        <span className={styles.upload}>+ Upload</span>
+        <span className={styles.file}>resume.pdf ✕</span>
+        <div className={styles.todoOption}>
+          <span>Include completed to-dos</span>
+          <span className={styles.toggle}>
+            <span className={styles.toggleThumb} />
+          </span>
+        </div>
+      </div>
+
+      <div className={styles.jobGrid}>
+        {JOB_PREVIEWS.map(({ id, ...job }) => (
+          <JobPreviewCard key={id} {...job} />
+        ))}
+      </div>
+    </div>
+  );
+};
+
+export default JobRecommendationPreview;
diff --git a/apps/landing/src/sections/job-recommendation/job-recommendation-section.tsx b/apps/landing/src/sections/job-recommendation/job-recommendation-section.tsx
new file mode 100644
index 00000000..7eb180a5
--- /dev/null
+++ b/apps/landing/src/sections/job-recommendation/job-recommendation-section.tsx
@@ -0,0 +1,22 @@
+import FeatureSection from '@components/feature-section/feature-section';
+import { LANDING_SECTION_ID } from '@constants/section-id';
+import { useTranslation } from 'react-i18next';
+
+import JobRecommendationPreview from './job-recommendation-preview/job-recommendation-preview';
+
+const JobRecommendationSection = () => {
+  const { t } = useTranslation('landing');
+
+  return (
+    <FeatureSection
+      id={LANDING_SECTION_ID.features}
+      featureLabel={t('features.job.label')}
+      title={t('features.job.title')}
+      description={t('features.job.description')}
+      preview={<JobRecommendationPreview />}
+      background="muted"
+    />
+  );
+};
+
+export default JobRecommendationSection;
diff --git a/apps/landing/src/sections/real-voices/real-voices-section.css.ts b/apps/landing/src/sections/real-voices/real-voices-section.css.ts
new file mode 100644
index 00000000..16684d36
--- /dev/null
+++ b/apps/landing/src/sections/real-voices/real-voices-section.css.ts
@@ -0,0 +1,35 @@
+import { themeVars, typography } from '@kds/ui/styles';
+import { style } from '@vanilla-extract/css';
+
+export const container = style({
+  padding: '7.2rem 4.8rem',
+  backgroundColor: themeVars.color.grayscale.white,
+});
+
+export const inner = style({
+  maxWidth: '90rem',
+  margin: '0 auto',
+  textAlign: 'center',
+});
+
+export const label = style({
+  ...typography.cap1_sb_12,
+  marginBottom: '1.6rem',
+  color: themeVars.color.primary[500],
+  letterSpacing: '0.1em',
+  textTransform: 'uppercase',
+});
+
+export const title = style({
+  marginBottom: '4rem',
+  color: themeVars.color.grayscale.gray800,
+  fontSize: '2.8rem',
+  fontWeight: 800,
+  letterSpacing: '-0.02em',
+});
+
+export const voices = style({
+  display: 'grid',
+  gridTemplateColumns: 'repeat(3, 1fr)',
+  gap: '1.6rem',
+});
diff --git a/apps/landing/src/sections/real-voices/real-voices-section.tsx b/apps/landing/src/sections/real-voices/real-voices-section.tsx
new file mode 100644
index 00000000..11170223
--- /dev/null
+++ b/apps/landing/src/sections/real-voices/real-voices-section.tsx
@@ -0,0 +1,33 @@
+import { LANDING_SECTION_ID } from '@constants/section-id';
+import { useTranslation } from 'react-i18next';
+
+import VoiceCard from './voice-card/voice-card';
+
+import * as styles from './real-voices-section.css';
+
+const VOICE_IDS = ['trade', 'resume', 'wechat'] as const;
+
+const RealVoicesSection = () => {
+  const { t } = useTranslation('landing');
+
+  return (
+    <section id={LANDING_SECTION_ID.reviews} className={styles.container}>
+      <div className={styles.inner}>
+        <p className={styles.label}>{t('voices.label')}</p>
+        <h2 className={styles.title}>{t('voices.title')}</h2>
+
+        <div className={styles.voices}>
+          {VOICE_IDS.map((id) => (
+            <VoiceCard
+              key={id}
+              content={t(`voices.items.${id}.quote`)}
+              interviewInfo={t(`voices.items.${id}.meta`)}
+            />
+          ))}
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export default RealVoicesSection;
diff --git a/apps/landing/src/sections/real-voices/voice-card/voice-card.css.ts b/apps/landing/src/sections/real-voices/voice-card/voice-card.css.ts
new file mode 100644
index 00000000..d58b01f4
--- /dev/null
+++ b/apps/landing/src/sections/real-voices/voice-card/voice-card.css.ts
@@ -0,0 +1,23 @@
+import { themeVars, typography } from '@kds/ui/styles';
+import { style } from '@vanilla-extract/css';
+
+export const card = style({
+  padding: '2.4rem 2rem',
+  border: `1px solid ${themeVars.color.grayscale.gray300}`,
+  borderRadius: '14px',
+  backgroundColor: themeVars.color.grayscale.gray100,
+  textAlign: 'left',
+});
+
+export const quote = style({
+  ...typography.body9_r_14,
+  marginBottom: '1.6rem',
+  color: themeVars.color.grayscale.gray800,
+  fontStyle: 'italic',
+  lineHeight: 1.75,
+});
+
+export const meta = style({
+  ...typography.cap2_m_12,
+  color: themeVars.color.grayscale.gray500,
+});
diff --git a/apps/landing/src/sections/real-voices/voice-card/voice-card.tsx b/apps/landing/src/sections/real-voices/voice-card/voice-card.tsx
new file mode 100644
index 00000000..b8efda7f
--- /dev/null
+++ b/apps/landing/src/sections/real-voices/voice-card/voice-card.tsx
@@ -0,0 +1,15 @@
+import * as styles from './voice-card.css';
+
+interface VoiceCardProps {
+  content: string;
+  interviewInfo: string;
+}
+
+const VoiceCard = ({ content, interviewInfo }: VoiceCardProps) => (
+  <article className={styles.card}>
+    <p className={styles.quote}>{content}</p>
+    <p className={styles.meta}>{interviewInfo}</p>
+  </article>
+);
+
+export default VoiceCard;
diff --git a/apps/landing/src/sections/stats/hooks/use-count-up-on-visible.ts b/apps/landing/src/sections/stats/hooks/use-count-up-on-visible.ts
new file mode 100644
index 00000000..8fce88f3
--- /dev/null
+++ b/apps/landing/src/sections/stats/hooks/use-count-up-on-visible.ts
@@ -0,0 +1,53 @@
+import { useEffect, useRef, useState } from 'react';
+
+const ANIMATION_DURATION = 1800;
+const VISIBLE_THRESHOLD = 0.15;
+
+const useCountUpOnVisible = () => {
+  const containerRef = useRef<HTMLElement>(null);
+  const [progress, setProgress] = useState(0);
+
+  useEffect(() => {
+    if (!containerRef.current) {
+      return;
+    }
+
+    let animationFrameId = 0;
+    const observer = new IntersectionObserver(
+      ([entry]) => {
+        if (!entry?.isIntersecting) {
+          return;
+        }
+
+        observer.disconnect();
+
+        const startTime = performance.now();
+        const updateProgress = (currentTime: number) => {
+          const elapsedRatio = Math.min(
+            (currentTime - startTime) / ANIMATION_DURATION,
+            1,
+          );
+          setProgress(1 - Math.pow(1 - elapsedRatio, 3));
+
+          if (elapsedRatio < 1) {
+            animationFrameId = requestAnimationFrame(updateProgress);
+          }
+        };
+
+        animationFrameId = requestAnimationFrame(updateProgress);
+      },
+      { threshold: VISIBLE_THRESHOLD },
+    );
+
+    observer.observe(containerRef.current);
+
+    return () => {
+      observer.disconnect();
+      cancelAnimationFrame(animationFrameId);
+    };
+  }, []);
+
+  return { containerRef, progress };
+};
+
+export default useCountUpOnVisible;
diff --git a/apps/landing/src/sections/stats/stat-item/stat-item.css.ts b/apps/landing/src/sections/stats/stat-item/stat-item.css.ts
new file mode 100644
index 00000000..002c0d6d
--- /dev/null
+++ b/apps/landing/src/sections/stats/stat-item/stat-item.css.ts
@@ -0,0 +1,27 @@
+import { themeVars, typography } from '@kds/ui/styles';
+import { style } from '@vanilla-extract/css';
+
+export const stat = style({
+  flex: 1,
+  padding: '2.4rem 3.2rem',
+});
+
+export const value = style({
+  marginBottom: '0.6rem',
+  color: themeVars.color.grayscale.white,
+  fontSize: '5.6rem',
+  fontWeight: 800,
+  lineHeight: 1,
+  letterSpacing: '-0.03em',
+});
+
+export const accent = style({
+  color: themeVars.color.primary[500],
+});
+
+export const description = style({
+  ...typography.body9_r_14,
+  color: themeVars.color.grayscale.gray400,
+  lineHeight: 1.5,
+  whiteSpace: 'pre-line',
+});
diff --git a/apps/landing/src/sections/stats/stat-item/stat-item.tsx b/apps/landing/src/sections/stats/stat-item/stat-item.tsx
new file mode 100644
index 00000000..4633904d
--- /dev/null
+++ b/apps/landing/src/sections/stats/stat-item/stat-item.tsx
@@ -0,0 +1,17 @@
+import * as styles from './stat-item.css';
+
+interface StatItemProps {
+  value: number;
+  description: string;
+}
+
+const StatItem = ({ value, description }: StatItemProps) => (
+  <div className={styles.stat}>
+    <p className={styles.value}>
+      <span className={styles.accent}>{value}</span>%
+    </p>
+    <p className={styles.description}>{description}</p>
+  </div>
+);
+
+export default StatItem;
diff --git a/apps/landing/src/sections/stats/stats-section.css.ts b/apps/landing/src/sections/stats/stats-section.css.ts
new file mode 100644
index 00000000..facdbdf3
--- /dev/null
+++ b/apps/landing/src/sections/stats/stats-section.css.ts
@@ -0,0 +1,34 @@
+import { themeVars, typography } from '@kds/ui/styles';
+import { style } from '@vanilla-extract/css';
+
+export const container = style({
+  padding: '7.2rem 4.8rem',
+  textAlign: 'center',
+  backgroundColor: '#1A2B4A',
+});
+
+export const label = style({
+  ...typography.cap1_sb_12,
+  marginBottom: '4rem',
+  color: themeVars.color.grayscale.gray500,
+  letterSpacing: '0.1em',
+  textTransform: 'uppercase',
+});
+
+export const stats = style({
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'center',
+  maxWidth: '70rem',
+  margin: '0 auto',
+});
+
+export const versus = style({
+  ...typography.body1_sb_18,
+  padding: '0 1.6rem',
+  color: themeVars.color.grayscale.gray600,
+});
+
+export const gapSpacing = style({
+  marginTop: '2.8rem',
+});
diff --git a/apps/landing/src/sections/stats/stats-section.tsx b/apps/landing/src/sections/stats/stats-section.tsx
new file mode 100644
index 00000000..087e0513
--- /dev/null
+++ b/apps/landing/src/sections/stats/stats-section.tsx
@@ -0,0 +1,51 @@
+import Badge from '@components/badge/badge';
+import { FitAnalysisIcon } from '@kds/icons';
+import { useTranslation } from 'react-i18next';
+
+import useCountUpOnVisible from './hooks/use-count-up-on-visible';
+import StatItem from './stat-item/stat-item';
+
+import * as styles from './stats-section.css';
+
+const DESIRED_EMPLOYMENT_RATE = 77;
+const ACTUAL_EMPLOYMENT_RATE = 7.7;
+
+const StatsSection = () => {
+  const { t } = useTranslation('landing');
+  const { containerRef, progress } = useCountUpOnVisible();
+
+  const desiredEmploymentRate = Math.floor(DESIRED_EMPLOYMENT_RATE * progress);
+  const actualEmploymentRate = Number(
+    (ACTUAL_EMPLOYMENT_RATE * progress).toFixed(1),
+  );
+
+  return (
+    <section ref={containerRef} className={styles.container}>
+      <p className={styles.label}>{t('stats.label')}</p>
+
+      <div className={styles.stats}>
+        <StatItem
+          value={desiredEmploymentRate}
+          description={t('stats.descriptions.desiredEmployment')}
+        />
+
+        <p className={styles.versus}>{t('stats.versus')}</p>
+
+        <StatItem
+          value={actualEmploymentRate}
+          description={t('stats.descriptions.actualEmployment')}
+        />
+      </div>
+
+      <Badge
+        tone="dark"
+        icon={<FitAnalysisIcon width={16} height={16} />}
+        className={styles.gapSpacing}
+      >
+        {t('stats.gap')}
+      </Badge>
+    </section>
+  );
+};
+
+export default StatsSection;
diff --git a/apps/landing/src/sections/todo-management/todo-management-preview/todo-management-preview.css.ts b/apps/landing/src/sections/todo-management/todo-management-preview/todo-management-preview.css.ts
new file mode 100644
index 00000000..878d3009
--- /dev/null
+++ b/apps/landing/src/sections/todo-management/todo-management-preview/todo-management-preview.css.ts
@@ -0,0 +1,114 @@
+import { themeVars } from '@kds/ui/styles';
+import { style } from '@vanilla-extract/css';
+import { recipe } from '@vanilla-extract/recipes';
+
+export const container = style({
+  padding: '2rem',
+  border: `1px solid ${themeVars.color.grayscale.gray300}`,
+  borderRadius: '14px',
+  backgroundColor: themeVars.color.grayscale.white,
+  boxShadow: '0 8px 40px rgba(59, 110, 248, 0.08)',
+});
+
+export const tabs = style({
+  display: 'flex',
+  gap: '0.6rem',
+  marginBottom: '1.4rem',
+});
+
+export const tab = recipe({
+  base: {
+    padding: '0.5rem 1.4rem',
+    borderRadius: '99px',
+    fontSize: '1.1rem',
+    fontWeight: 600,
+  },
+  variants: {
+    active: {
+      true: {
+        color: themeVars.color.grayscale.white,
+        backgroundColor: themeVars.color.primary[500],
+      },
+      false: {
+        color: themeVars.color.grayscale.gray700,
+        backgroundColor: themeVars.color.grayscale.gray100,
+      },
+    },
+  },
+});
+
+export const todoItem = style({
+  display: 'flex',
+  alignItems: 'center',
+  gap: '0.9rem',
+  marginBottom: '0.3rem',
+  padding: '0.8rem 1rem',
+  borderRadius: '8px',
+});
+
+export const checkbox = style({
+  flexShrink: 0,
+});
+
+export const todoName = recipe({
+  base: {
+    color: themeVars.color.grayscale.gray800,
+    fontSize: '1.2rem',
+    fontWeight: 500,
+  },
+  variants: {
+    completed: {
+      true: {
+        color: themeVars.color.grayscale.gray500,
+        textDecoration: 'line-through',
+      },
+    },
+  },
+});
+
+export const dueDate = recipe({
+  base: {
+    marginLeft: 'auto',
+    color: themeVars.color.grayscale.gray500,
+    fontSize: '1rem',
+    whiteSpace: 'nowrap',
+  },
+  variants: {
+    urgent: {
+      true: {
+        color: themeVars.color.pastel.kared_500,
+        fontWeight: 600,
+      },
+    },
+  },
+});
+
+export const completedBar = style({
+  display: 'flex',
+  alignItems: 'center',
+  gap: '0.6rem',
+  marginTop: '0.6rem',
+  padding: '0.8rem 1rem',
+  borderTop: `1px solid ${themeVars.color.grayscale.gray300}`,
+});
+
+export const completedCheck = style({
+  color: themeVars.color.primary[500],
+  fontSize: '1.3rem',
+});
+
+export const completedLabel = style({
+  color: themeVars.color.grayscale.gray500,
+  fontSize: '1.1rem',
+  fontWeight: 600,
+});
+
+export const completedCount = style({
+  marginLeft: 'auto',
+  padding: '0.1rem 0.7rem',
+  borderRadius: '99px',
+  color: themeVars.color.primary[500],
+  backgroundColor: themeVars.color.primary[100],
+  fontSize: '1rem',
+  fontWeight: 600,
+});
diff --git a/apps/landing/src/sections/todo-management/todo-management-preview/todo-management-preview.tsx b/apps/landing/src/sections/todo-management/todo-management-preview/todo-management-preview.tsx
new file mode 100644
index 00000000..85c64e0b
--- /dev/null
+++ b/apps/landing/src/sections/todo-management/todo-management-preview/todo-management-preview.tsx
@@ -0,0 +1,41 @@
+import { TODO_ITEMS } from '@constants/index';
+import { TodoCheckIcon, TodoIcon } from '@kds/icons';
+
+import * as styles from './todo-management-preview.css';
+
+const TodoManagementPreview = () => {
+  return (
+    <div className={styles.container}>
+      <div className={styles.tabs}>
+        <span className={styles.tab({ active: true })}>Visa</span>
+        <span className={styles.tab({ active: false })}>Career</span>
+      </div>
+
+      <div>
+        {TODO_ITEMS.map(({ id, label, due, completed, urgent }) => (
+          <div key={id} className={styles.todoItem}>
+            {completed ? (
+              <TodoCheckIcon
+                width={20}
+                height={20}
+                className={styles.checkbox}
+              />
+            ) : (
+              <TodoIcon width={20} height={20} className={styles.checkbox} />
+            )}
+            <span className={styles.todoName({ completed })}>{label}</span>
+            <span className={styles.dueDate({ urgent })}>{due}</span>
+          </div>
+        ))}
+      </div>
+
+      <div className={styles.completedBar}>
+        <span className={styles.completedCheck}>✓</span>
+        <span className={styles.completedLabel}>Completed</span>
+        <span className={styles.completedCount}>2</span>
+      </div>
+    </div>
+  );
+};
+
+export default TodoManagementPreview;
diff --git a/apps/landing/src/sections/todo-management/todo-management-section.tsx b/apps/landing/src/sections/todo-management/todo-management-section.tsx
new file mode 100644
index 00000000..e7893c39
--- /dev/null
+++ b/apps/landing/src/sections/todo-management/todo-management-section.tsx
@@ -0,0 +1,20 @@
+import FeatureSection from '@components/feature-section/feature-section';
+import { useTranslation } from 'react-i18next';
+
+import TodoManagementPreview from './todo-management-preview/todo-management-preview';
+
+const TodoManagementSection = () => {
+  const { t } = useTranslation('landing');
+
+  return (
+    <FeatureSection
+      featureLabel={t('features.todo.label')}
+      title={t('features.todo.title')}
+      description={t('features.todo.description')}
+      preview={<TodoManagementPreview />}
+      background="muted"
+    />
+  );
+};
+
+export default TodoManagementSection;
diff --git a/apps/landing/src/sections/why-kareer/benefit-card/benefit-card.css.ts b/apps/landing/src/sections/why-kareer/benefit-card/benefit-card.css.ts
new file mode 100644
index 00000000..d199fcf3
--- /dev/null
+++ b/apps/landing/src/sections/why-kareer/benefit-card/benefit-card.css.ts
@@ -0,0 +1,37 @@
+import { themeVars, typography } from '@kds/ui/styles';
+import { style } from '@vanilla-extract/css';
+
+export const card = style({
+  padding: '2.6rem 2.2rem',
+  border: '1px solid rgba(255, 255, 255, 0.18)',
+  borderRadius: '14px',
+  backgroundColor: 'rgba(255, 255, 255, 0.1)',
+  textAlign: 'left',
+  backdropFilter: 'blur(12px)',
+  transition: 'all 0.25s ease',
+  ':hover': {
+    transform: 'translateY(-4px)',
+    borderColor: 'rgba(255, 255, 255, 0.32)',
+    backgroundColor: 'rgba(255, 255, 255, 0.16)',
+  },
+});
+
+export const icon = style({
+  display: 'flex',
+  alignItems: 'center',
+  height: '3.2rem',
+  color: themeVars.color.grayscale.white,
+  marginBottom: '1.4rem',
+});
+
+export const cardTitle = style({
+  ...typography.body4_sb_16,
+  marginBottom: '0.8rem',
+  color: themeVars.color.grayscale.white,
+});
+
+export const cardDescription = style({
+  ...typography.cap3_r_12,
+  color: 'rgba(255, 255, 255, 0.65)',
+  lineHeight: 1.7,
+});
diff --git a/apps/landing/src/sections/why-kareer/benefit-card/benefit-card.tsx b/apps/landing/src/sections/why-kareer/benefit-card/benefit-card.tsx
new file mode 100644
index 00000000..8ca2e789
--- /dev/null
+++ b/apps/landing/src/sections/why-kareer/benefit-card/benefit-card.tsx
@@ -0,0 +1,19 @@
+import { ReactNode } from 'react';
+
+import * as styles from './benefit-card.css';
+
+interface BenefitCardProps {
+  icon: ReactNode;
+  title: string;
+  description: string;
+}
+
+const BenefitCard = ({ icon, title, description }: BenefitCardProps) => (
+  <article className={styles.card}>
+    <div className={styles.icon}>{icon}</div>
+    <h3 className={styles.cardTitle}>{title}</h3>
+    <p className={styles.cardDescription}>{description}</p>
+  </article>
+);
+
+export default BenefitCard;
diff --git a/apps/landing/src/sections/why-kareer/why-kareer-section.css.ts b/apps/landing/src/sections/why-kareer/why-kareer-section.css.ts
new file mode 100644
index 00000000..68fde4f0
--- /dev/null
+++ b/apps/landing/src/sections/why-kareer/why-kareer-section.css.ts
@@ -0,0 +1,62 @@
+import { themeVars, typography } from '@kds/ui/styles';
+import { style } from '@vanilla-extract/css';
+
+export const container = style({
+  position: 'relative',
+  overflow: 'hidden',
+  lineHeight: 1.6,
+});
+
+export const backgroundImage = style({
+  position: 'absolute',
+  zIndex: 0,
+  inset: 0,
+  width: '100%',
+  height: '100%',
+  objectFit: 'cover',
+  objectPosition: 'center 30%',
+});
+
+export const overlay = style({
+  position: 'absolute',
+  zIndex: 1,
+  inset: 0,
+  backgroundColor: 'rgba(15, 23, 42, 0.72)',
+});
+
+export const inner = style({
+  position: 'relative',
+  zIndex: 2,
+  maxWidth: '96rem',
+  margin: '0 auto',
+  padding: '8.8rem 0',
+  textAlign: 'center',
+});
+
+export const title = style({
+  marginBottom: '1.2rem',
+  color: themeVars.color.grayscale.white,
+  fontSize: '3.6rem',
+  fontWeight: 800,
+  letterSpacing: '-0.02em',
+});
+
+export const description = style({
+  ...typography.body6_r_16,
+  marginBottom: '5.2rem',
+  color: 'rgba(255, 255, 255, 0.6)',
+  lineHeight: 1.6,
+});
+
+export const benefits = style({
+  display: 'grid',
+  gridTemplateColumns: 'repeat(3, 1fr)',
+  gap: '1.4rem',
+});
+
+export const credit = style({
+  ...typography.cap3_r_12,
+  marginTop: '3.6rem',
+  color: 'rgba(255, 255, 255, 0.35)',
+  textAlign: 'left',
+});
diff --git a/apps/landing/src/sections/why-kareer/why-kareer-section.tsx b/apps/landing/src/sections/why-kareer/why-kareer-section.tsx
new file mode 100644
index 00000000..423e9aa5
--- /dev/null
+++ b/apps/landing/src/sections/why-kareer/why-kareer-section.tsx
@@ -0,0 +1,53 @@
+import { bg_why_kareer } from '@assets/index';
+import { CheckIcon, FitAnalysisIcon, RoadmapIcon } from '@kds/icons';
+import { useTranslation } from 'react-i18next';
+
+import BenefitCard from './benefit-card/benefit-card';
+
+import * as styles from './why-kareer-section.css';
+
+const BENEFITS = [
+  {
+    id: 'jobs',
+    icon: <FitAnalysisIcon width={28} height={28} />,
+  },
+  {
+    id: 'roadmap',
+    icon: <RoadmapIcon width={28} height={28} />,
+  },
+  {
+    id: 'actions',
+    icon: <CheckIcon width={32} height={32} />,
+  },
+] as const;
+
+const WhyKareerSection = () => {
+  const { t } = useTranslation('landing');
+
+  return (
+    <section className={styles.container}>
+      <img src={bg_why_kareer} alt="" className={styles.backgroundImage} />
+      <div className={styles.overlay} />
+
+      <div className={styles.inner}>
+        <h2 className={styles.title}>{t('whyKareer.title')}</h2>
+        <p className={styles.description}>{t('whyKareer.description')}</p>
+
+        <div className={styles.benefits}>
+          {BENEFITS.map(({ id, icon }) => (
+            <BenefitCard
+              key={id}
+              icon={icon}
+              title={t(`whyKareer.benefits.${id}.title`)}
+              description={t(`whyKareer.benefits.${id}.description`)}
+            />
+          ))}
+        </div>
+
+        <p className={styles.credit}>{t('whyKareer.credit')}</p>
+      </div>
+    </section>
+  );
+};
+
+export default WhyKareerSection;
diff --git a/apps/landing/tsconfig.json b/apps/landing/tsconfig.json
new file mode 100644
index 00000000..a42ce9b5
--- /dev/null
+++ b/apps/landing/tsconfig.json
@@ -0,0 +1,15 @@
+{
+  "extends": "@kareer/typescript-config/react.json",
+  "compilerOptions": {
+    "types": ["vite/client", "vite-plugin-svgr/client"],
+    "paths": {
+      "@assets/*": ["./src/assets/*"],
+      "@components/*": ["./src/components/*"],
+      "@constants/*": ["./src/constants/*"],
+      "@i18n/*": ["./src/i18n/*"],
+      "@sections/*": ["./src/sections/*"]
+    }
+  },
+  "include": ["src", "vite.config.ts"],
+  "exclude": ["node_modules"]
+}
diff --git a/apps/landing/vite.config.ts b/apps/landing/vite.config.ts
new file mode 100644
index 00000000..f67ab9dd
--- /dev/null
+++ b/apps/landing/vite.config.ts
@@ -0,0 +1,26 @@
+import { vanillaExtractPlugin } from '@vanilla-extract/vite-plugin';
+import react from '@vitejs/plugin-react';
+import path from 'path';
+import { defineConfig } from 'vite';
+import svgr from 'vite-plugin-svgr';
+
+export default defineConfig({
+  plugins: [
+    react({
+      babel: {
+        plugins: [['babel-plugin-react-compiler']],
+      },
+    }),
+    svgr(),
+    vanillaExtractPlugin(),
+  ],
+  resolve: {
+    alias: {
+      '@assets': path.resolve(__dirname, 'src/assets'),
+      '@components': path.resolve(__dirname, 'src/components'),
+      '@constants': path.resolve(__dirname, 'src/constants'),
+      '@i18n': path.resolve(__dirname, 'src/i18n'),
+      '@sections': path.resolve(__dirname, 'src/sections'),
+    },
+  },
+});
diff --git a/apps/web/index.html b/apps/web/index.html
index f7f56cec..3c840e05 100644
--- a/apps/web/index.html
+++ b/apps/web/index.html
@@ -9,8 +9,8 @@
       property="og:description"
       content="The fastest roadmap to your vision"
     />
-    <meta property="og:url" content="https://ka-reer.com" />
-    <meta property="og:image" content="https://ka-reer.com/og.png" />
+    <meta property="og:url" content="https://app.ka-reer.com" />
+    <meta property="og:image" content="https://app.ka-reer.com/og.png" />
     <link
       rel="preload"
       as="style"
diff --git a/apps/web/src/app/App.tsx b/apps/web/src/app/App.tsx
index 82f72404..b06db6b3 100644
--- a/apps/web/src/app/App.tsx
+++ b/apps/web/src/app/App.tsx
@@ -2,6 +2,7 @@ import { ToastProvider } from '@kds/ui';
 import { RouterProvider } from 'react-router';
 
 import { QueryProvider } from '@shared/apis/providers';
+import { TODO_PANEL_ANCHOR } from '@shared/constants/TODO_PANEL_ANCHOR';
 import { router } from '@shared/router';
 
 import '@kds/ui/styles';
@@ -9,7 +10,7 @@ import '@kds/ui/styles';
 function App() {
   return (
     <QueryProvider>
-      <ToastProvider>
+      <ToastProvider anchor={TODO_PANEL_ANCHOR}>
         <RouterProvider router={router} />
       </ToastProvider>
     </QueryProvider>
diff --git a/apps/web/src/entities/job/model/end_point.ts b/apps/web/src/entities/job/model/end-point.ts
similarity index 100%
rename from apps/web/src/entities/job/model/end_point.ts
rename to apps/web/src/entities/job/model/end-point.ts
diff --git a/apps/web/src/entities/job/model/index.ts b/apps/web/src/entities/job/model/index.ts
index 7f11b65a..5c73b97a 100644
--- a/apps/web/src/entities/job/model/index.ts
+++ b/apps/web/src/entities/job/model/index.ts
@@ -1,2 +1,2 @@
-export { END_POINT } from './end_point';
+export { END_POINT } from './end-point';
 export * from './types';
diff --git a/apps/web/src/entities/onboarding/model/end_point.ts b/apps/web/src/entities/onboarding/model/end-point.ts
similarity index 100%
rename from apps/web/src/entities/onboarding/model/end_point.ts
rename to apps/web/src/entities/onboarding/model/end-point.ts
diff --git a/apps/web/src/entities/onboarding/model/index.ts b/apps/web/src/entities/onboarding/model/index.ts
index 9544e07d..99d47db3 100644
--- a/apps/web/src/entities/onboarding/model/index.ts
+++ b/apps/web/src/entities/onboarding/model/index.ts
@@ -1,6 +1,6 @@
 export * from './constants';
 export * from './degree';
-export { END_POINT } from './end_point';
+export { END_POINT } from './end-point';
 export * from './form-to-request';
 export * from './job-skills';
 export * from './options';
diff --git a/apps/web/src/entities/phase/model/end-point.ts b/apps/web/src/entities/phase/model/end-point.ts
index 68eb05ae..9c7ff82c 100644
--- a/apps/web/src/entities/phase/model/end-point.ts
+++ b/apps/web/src/entities/phase/model/end-point.ts
@@ -1,6 +1,11 @@
 export const END_POINT = {
   PHASE: {
+    GET_PHASE_LIST: 'api/v1/roadmap/phases',
+    GET_PHASE_ITEM_HOME: (phaseId: number) =>
+      `api/v1/roadmap/phases/${phaseId}/home`,
+    GET_PHASE_ITEM_ROADMAP: (phaseId: number) =>
+      `api/v1/roadmap/phases/${phaseId}`,
     GET_AI_GUIDE: (phaseActionId: number) =>
-      `api/v1/phase-actions/${phaseActionId}/guide`,
+      `api/v1/roadmap/phase-actions/${phaseActionId}/guide`,
   },
 };
diff --git a/apps/web/src/entities/phase/model/end_point.ts b/apps/web/src/entities/phase/model/end_point.ts
deleted file mode 100644
index ac6a97c2..00000000
--- a/apps/web/src/entities/phase/model/end_point.ts
+++ /dev/null
@@ -1,8 +0,0 @@
-export const END_POINT = {
-  PHASE: {
-    GET_PHASE_LIST: 'api/v1/phases',
-    GET_PHASE_ITEM_HOME: (phaseId: number) => `api/v1/phases/${phaseId}/home`,
-    GET_PHASE_ITEM_ROADMAP: (phaseId: number) =>
-      `api/v1/phases/${phaseId}/roadmap`,
-  },
-};
diff --git a/apps/web/src/entities/phase/model/index.ts b/apps/web/src/entities/phase/model/index.ts
index 3bc491ec..d290ad3f 100644
--- a/apps/web/src/entities/phase/model/index.ts
+++ b/apps/web/src/entities/phase/model/index.ts
@@ -1,4 +1,4 @@
-export { END_POINT } from './end_point';
+export { END_POINT } from './end-point';
 export type {
   GetPhaseItemHomeResponse,
   GetPhaseItemRoadmapResponse,
diff --git a/apps/web/src/entities/phase/model/types.ts b/apps/web/src/entities/phase/model/types.ts
index 8f704dd4..af99afcf 100644
--- a/apps/web/src/entities/phase/model/types.ts
+++ b/apps/web/src/entities/phase/model/types.ts
@@ -3,14 +3,14 @@ import { components, operations, paths } from '@shared/types/schema';
 export type GetAiGuideRequest = operations['getAiGuide']['parameters']['path'];
 
 export type GetAIGuideResponse =
-  paths['/api/v1/phase-actions/{phaseActionId}/guide']['get']['responses']['200']['content']['*/*'];
+  paths['/api/v1/roadmap/phase-actions/{phaseActionId}/guide']['get']['responses']['200']['content']['*/*'];
 
 export type GetPhaseListResponse =
-  paths['/api/v1/phases']['get']['responses']['200']['content']['*/*'];
+  paths['/api/v1/roadmap/phases']['get']['responses']['200']['content']['*/*'];
 export type GetPhaseItemHomeResponse =
-  paths['/api/v1/phases/{phaseId}/home']['get']['responses']['200']['content']['*/*'];
+  paths['/api/v1/roadmap/phases/{phaseId}/home']['get']['responses']['200']['content']['*/*'];
 export type GetPhaseItemRoadmapResponse =
-  paths['/api/v1/phases/{phaseId}/roadmap']['get']['responses']['200']['content']['*/*'];
+  paths['/api/v1/roadmap/phases/{phaseId}']['get']['responses']['200']['content']['*/*'];
 
 export type Phase = components['schemas']['PhaseResponse'];
 export type RequiredActionType = 'Visa' | 'Career';
diff --git a/apps/web/src/entities/phase/queries/queries.ts b/apps/web/src/entities/phase/queries/queries.ts
index 26eca9a7..ba352b16 100644
--- a/apps/web/src/entities/phase/queries/queries.ts
+++ b/apps/web/src/entities/phase/queries/queries.ts
@@ -9,17 +9,11 @@ import { getAiGuide } from '@entities/phase/api/get-ai-guide';
 import { GetAiGuideRequest } from '@entities/phase/model/types';
 import { PHASE_QUERY_KEY } from '@entities/phase/queries';
 
-const POLLING_COUNT_DOWM_TIMER = 2000;
-
 export const PHASE_QUERY_OPTIONS = {
   GET_PHASE_LIST: () => {
     return queryOptions({
       queryKey: PHASE_QUERY_KEY.PHASE_LIST(),
       queryFn: getPhaseList,
-      refetchInterval: (query) => {
-        const phases = query.state.data?.phases ?? [];
-        return phases.length === 0 ? POLLING_COUNT_DOWM_TIMER : false;
-      },
     });
   },
   GET_PHASE_ITEM_HOME: (phaseId: number) => {
diff --git a/apps/web/src/entities/terms/model/end_points.ts b/apps/web/src/entities/terms/model/end-point.ts
similarity index 100%
rename from apps/web/src/entities/terms/model/end_points.ts
rename to apps/web/src/entities/terms/model/end-point.ts
diff --git a/apps/web/src/entities/terms/model/index.ts b/apps/web/src/entities/terms/model/index.ts
index 50f04455..8573be55 100644
--- a/apps/web/src/entities/terms/model/index.ts
+++ b/apps/web/src/entities/terms/model/index.ts
@@ -1,4 +1,4 @@
-export { END_POINT } from './end_points';
+export { END_POINT } from './end-point';
 export type {
   GetTermsListResponse,
   PostTermAgreementsBody,
diff --git a/apps/web/src/entities/todo/api/get-todo-list.ts b/apps/web/src/entities/todo/api/get-todo-list.ts
index 715a2302..a1313fdb 100644
--- a/apps/web/src/entities/todo/api/get-todo-list.ts
+++ b/apps/web/src/entities/todo/api/get-todo-list.ts
@@ -1,4 +1,4 @@
-import { END_POINT } from '@entities/todo/model/end_point';
+import { END_POINT } from '@entities/todo/model/end-point';
 import { GetTodoListResponse } from '@entities/todo/model/types';
 import { api } from '@shared/apis/configs/instance';
 
diff --git a/apps/web/src/entities/todo/model/end-point.ts b/apps/web/src/entities/todo/model/end-point.ts
new file mode 100644
index 00000000..af11381a
--- /dev/null
+++ b/apps/web/src/entities/todo/model/end-point.ts
@@ -0,0 +1,5 @@
+export const END_POINT = {
+  TODO: {
+    GET_TODO_ITEMS: 'api/v1/roadmap/action-items',
+  },
+};
diff --git a/apps/web/src/entities/todo/model/end_point.ts b/apps/web/src/entities/todo/model/end_point.ts
deleted file mode 100644
index 99461c29..00000000
--- a/apps/web/src/entities/todo/model/end_point.ts
+++ /dev/null
@@ -1,5 +0,0 @@
-export const END_POINT = {
-  TODO: {
-    GET_TODO_ITEMS: 'api/v1/action-items',
-  },
-};
diff --git a/apps/web/src/entities/todo/model/get-due-in-days.ts b/apps/web/src/entities/todo/model/get-due-in-days.ts
new file mode 100644
index 00000000..bd32bcfa
--- /dev/null
+++ b/apps/web/src/entities/todo/model/get-due-in-days.ts
@@ -0,0 +1,21 @@
+export const getDueInDays = (deadline: string): number | null => {
+  const due = new Date(deadline);
+
+  if (Number.isNaN(due.getTime())) {
+    return null;
+  }
+
+  const now = new Date();
+  const startOfToday = new Date(
+    now.getFullYear(),
+    now.getMonth(),
+    now.getDate(),
+  );
+  const startOfDue = new Date(due.getFullYear(), due.getMonth(), due.getDate());
+
+  const MILLISECONDS_PER_DAY = 1000 * 60 * 60 * 24;
+
+  return Math.ceil(
+    (startOfDue.getTime() - startOfToday.getTime()) / MILLISECONDS_PER_DAY,
+  );
+};
diff --git a/apps/web/src/entities/todo/model/index.ts b/apps/web/src/entities/todo/model/index.ts
index 889080f8..500912c8 100644
--- a/apps/web/src/entities/todo/model/index.ts
+++ b/apps/web/src/entities/todo/model/index.ts
@@ -1,2 +1,3 @@
-export { END_POINT } from './end_point';
-export type { GetTodoListResponse } from './types';
+export { END_POINT } from './end-point';
+export { getDueInDays } from './get-due-in-days';
+export type { ActionItem, ActionItemList, GetTodoListResponse } from './types';
diff --git a/apps/web/src/entities/todo/model/types.ts b/apps/web/src/entities/todo/model/types.ts
index 8b375fdc..c87b2e3d 100644
--- a/apps/web/src/entities/todo/model/types.ts
+++ b/apps/web/src/entities/todo/model/types.ts
@@ -1,4 +1,8 @@
-import { paths } from '@shared/types/schema';
+import { components, paths } from '@shared/types/schema';
 
 export type GetTodoListResponse =
-  paths['/api/v1/action-items']['get']['responses']['200']['content']['*/*'];
+  paths['/api/v1/roadmap/action-items']['get']['responses']['200']['content']['*/*'];
+
+export type ActionItem = components['schemas']['ActionItemResponse'];
+
+export type ActionItemList = components['schemas']['ActionItemListResponse'];
diff --git a/apps/web/src/entities/todo/ui/index.ts b/apps/web/src/entities/todo/ui/index.ts
index 46f61c09..b52b13aa 100644
--- a/apps/web/src/entities/todo/ui/index.ts
+++ b/apps/web/src/entities/todo/ui/index.ts
@@ -1 +1,2 @@
+export { default as TodoCompletedSection } from './todo-completed-section/todo-completed-section';
 export { default as TodoItem } from './todo-item/todo-item';
diff --git a/apps/web/src/entities/todo/ui/todo-completed-section/todo-completed-section.css.ts b/apps/web/src/entities/todo/ui/todo-completed-section/todo-completed-section.css.ts
new file mode 100644
index 00000000..efd66355
--- /dev/null
+++ b/apps/web/src/entities/todo/ui/todo-completed-section/todo-completed-section.css.ts
@@ -0,0 +1,41 @@
+import { themeVars, typography } from '@kds/ui/styles';
+import { style } from '@vanilla-extract/css';
+
+export const container = style({
+  display: 'flex',
+  flexDirection: 'column',
+  gap: '1.6rem',
+  paddingTop: '1rem',
+  borderTop: `1px solid ${themeVars.color.grayscale.gray300}`,
+});
+
+export const toggleButton = style({
+  display: 'flex',
+  alignItems: 'center',
+  width: '100%',
+  padding: '0.4rem 0',
+});
+
+export const checkIcon = style({
+  flexShrink: 0,
+});
+
+export const label = style({
+  ...typography.body7_sb_14,
+  color: themeVars.color.grayscale.gray700,
+  textAlign: 'left',
+  marginLeft: '0.4rem',
+});
+
+export const count = style({
+  ...typography.body7_sb_14,
+  color: themeVars.color.grayscale.gray500,
+  flexShrink: 0,
+  marginLeft: '0.6rem',
+});
+
+export const chevron = style({
+  flexShrink: 0,
+  marginLeft: 'auto',
+  color: themeVars.color.grayscale.gray400,
+});
diff --git a/apps/web/src/entities/todo/ui/todo-completed-section/todo-completed-section.tsx b/apps/web/src/entities/todo/ui/todo-completed-section/todo-completed-section.tsx
new file mode 100644
index 00000000..1a43b218
--- /dev/null
+++ b/apps/web/src/entities/todo/ui/todo-completed-section/todo-completed-section.tsx
@@ -0,0 +1,40 @@
+import { ArrowDownIcon, ArrowUpIcon, CheckCircleIcon } from '@kds/icons';
+import type { ReactNode } from 'react';
+
+import * as styles from './todo-completed-section.css';
+
+interface TodoCompletedSectionProps {
+  count: number;
+  label: string;
+  isOpen: boolean;
+  onToggleOpen: () => void;
+  children: ReactNode;
+}
+
+const TodoCompletedSection = ({
+  count,
+  label,
+  isOpen,
+  onToggleOpen,
+  children,
+}: TodoCompletedSectionProps) => {
+  const ChevronIcon = isOpen ? ArrowUpIcon : ArrowDownIcon;
+
+  return (
+    <section className={styles.container}>
+      <button
+        type="button"
+        className={styles.toggleButton}
+        onClick={onToggleOpen}
+      >
+        <CheckCircleIcon width={24} height={24} className={styles.checkIcon} />
+        <span className={styles.label}>{label}</span>
+        <span className={styles.count}>{count}</span>
+        <ChevronIcon width={24} height={24} className={styles.chevron} />
+      </button>
+      {isOpen && children}
+    </section>
+  );
+};
+
+export default TodoCompletedSection;
diff --git a/apps/web/src/entities/todo/ui/todo-item/todo-item.css.ts b/apps/web/src/entities/todo/ui/todo-item/todo-item.css.ts
index 32a22745..bd4a6058 100644
--- a/apps/web/src/entities/todo/ui/todo-item/todo-item.css.ts
+++ b/apps/web/src/entities/todo/ui/todo-item/todo-item.css.ts
@@ -14,17 +14,26 @@ export const contentWrapper = style({
   display: 'flex',
   flexDirection: 'column',
   gap: '0.2rem',
+  minWidth: 0,
 });
 
-export const icon = style({
-  backgroundColor: 'transparent',
-  padding: 0,
-  cursor: 'pointer',
+export const action = style({
+  display: 'flex',
+  alignItems: 'center',
+  flexShrink: 0,
+  marginLeft: 'auto',
 });
 
 export const title = style({
   ...typography.body8_m_14,
   color: themeVars.color.grayscale.gray800,
+
+  display: '-webkit-box',
+  WebkitBoxOrient: 'vertical',
+  WebkitLineClamp: 2,
+  overflow: 'hidden',
+  minWidth: 0,
+  wordBreak: 'break-word',
 });
 
 export const description = style({
diff --git a/apps/web/src/entities/todo/ui/todo-item/todo-item.tsx b/apps/web/src/entities/todo/ui/todo-item/todo-item.tsx
index 2b95cc32..e6435959 100644
--- a/apps/web/src/entities/todo/ui/todo-item/todo-item.tsx
+++ b/apps/web/src/entities/todo/ui/todo-item/todo-item.tsx
@@ -1,4 +1,5 @@
 import { Checkbox } from '@kds/ui';
+import type { MouseEvent, ReactNode } from 'react';
 
 import * as styles from './todo-item.css';
 
@@ -10,6 +11,7 @@ interface TodoItemProps {
   size: TodoItemSize;
   isChecked: boolean;
   onToggle: () => void;
+  action?: ReactNode;
 }
 
 const TodoItem = ({
@@ -18,16 +20,27 @@ const TodoItem = ({
   size,
   isChecked,
   onToggle,
+  action,
 }: TodoItemProps) => {
   const showDescription = size === 'lg' || !isChecked;
 
+  const showFullTitleIfClamped = (event: MouseEvent<HTMLParagraphElement>) => {
+    const titleElement = event.currentTarget;
+
+    titleElement.title =
+      titleElement.scrollHeight > titleElement.clientHeight ? title : '';
+  };
+
   return (
     <li className={styles.container}>
       <Checkbox isChecked={isChecked} onClick={onToggle} />
       <div className={styles.contentWrapper}>
-        <p className={styles.title}>{title}</p>
+        <p className={styles.title} onMouseEnter={showFullTitleIfClamped}>
+          {title}
+        </p>
         {showDescription && <p className={styles.description}>{description}</p>}
       </div>
+      {action && <div className={styles.action}>{action}</div>}
     </li>
   );
 };
diff --git a/apps/web/src/entities/user/model/end_point.ts b/apps/web/src/entities/user/model/end-point.ts
similarity index 100%
rename from apps/web/src/entities/user/model/end_point.ts
rename to apps/web/src/entities/user/model/end-point.ts
diff --git a/apps/web/src/entities/user/model/index.ts b/apps/web/src/entities/user/model/index.ts
index 62db2e04..a0948a8c 100644
--- a/apps/web/src/entities/user/model/index.ts
+++ b/apps/web/src/entities/user/model/index.ts
@@ -1,4 +1,4 @@
-export { END_POINT } from './end_point';
+export { END_POINT } from './end-point';
 export type {
   GetUserCompletion,
   GetUserInfoResponse,
diff --git a/apps/web/src/features/auth/api/exchange-google-code.ts b/apps/web/src/features/auth/api/exchange-google-code.ts
index 94d109e9..eaec4482 100644
--- a/apps/web/src/features/auth/api/exchange-google-code.ts
+++ b/apps/web/src/features/auth/api/exchange-google-code.ts
@@ -1,4 +1,4 @@
-import { END_POINT } from '@features/auth/model/end_point';
+import { END_POINT } from '@features/auth/model/end-point';
 import { GoogleLoginResponse } from '@features/auth/model/types';
 import { api } from '@shared/apis/configs/instance';
 
diff --git a/apps/web/src/features/auth/api/sign-out.ts b/apps/web/src/features/auth/api/sign-out.ts
index 04576c81..a7780c4e 100644
--- a/apps/web/src/features/auth/api/sign-out.ts
+++ b/apps/web/src/features/auth/api/sign-out.ts
@@ -1,4 +1,4 @@
-import { END_POINT } from '@features/auth/model/end_point';
+import { END_POINT } from '@features/auth/model/end-point';
 import { LogOutResponse } from '@features/auth/model/types';
 import { api } from '@shared/apis/configs/instance';
 
diff --git a/apps/web/src/features/auth/model/end_point.ts b/apps/web/src/features/auth/model/end-point.ts
similarity index 100%
rename from apps/web/src/features/auth/model/end_point.ts
rename to apps/web/src/features/auth/model/end-point.ts
diff --git a/apps/web/src/features/onboarding/api/parse-sse-events.ts b/apps/web/src/features/onboarding/api/parse-sse-events.ts
new file mode 100644
index 00000000..efa45b34
--- /dev/null
+++ b/apps/web/src/features/onboarding/api/parse-sse-events.ts
@@ -0,0 +1,32 @@
+const parseSseEvent = (
+  block: string,
+): {
+  event: string;
+  data: string;
+} => {
+  const data: string[] = [];
+  let event = 'message';
+
+  block.split(/\r?\n/).forEach((line) => {
+    const [field, ...values] = line.split(':');
+    const value = values.join(':').replace(/^ /, '');
+
+    if (field === 'event') {
+      event = value;
+    }
+
+    if (field === 'data') {
+      data.push(value);
+    }
+  });
+
+  return { event, data: data.join('\n') };
+};
+
+export const parseSseEvents = (buffer: string, flush = false) => {
+  const blocks = buffer.split(/\r?\n\r?\n/);
+  const remaining = flush ? '' : (blocks.pop() ?? '');
+  const events = blocks.filter(Boolean).map(parseSseEvent);
+
+  return { events, remaining };
+};
diff --git a/apps/web/src/features/onboarding/api/post-onboarding-roadmap.ts b/apps/web/src/features/onboarding/api/post-onboarding-roadmap.ts
index c16e05cd..d4d36b70 100644
--- a/apps/web/src/features/onboarding/api/post-onboarding-roadmap.ts
+++ b/apps/web/src/features/onboarding/api/post-onboarding-roadmap.ts
@@ -1,10 +1,52 @@
-import type { PostAiRoadMapResponse } from '@features/onboarding';
 import { END_POINT } from '@features/onboarding';
 import { api } from '@shared/apis/configs/instance';
 
-export const postAiRoadMap = async (): Promise<PostAiRoadMapResponse> => {
-  const response = await api
-    .post(END_POINT.ONBOARDING.POST_AI_ROADMAP)
-    .json<PostAiRoadMapResponse>();
-  return response;
+import { parseSseEvents } from './parse-sse-events';
+
+interface RoadmapGenerationFailedEvent {
+  message?: string;
+}
+
+export const postAiRoadMap = async (): Promise<void> => {
+  const response = await api.post(END_POINT.ONBOARDING.POST_AI_ROADMAP, {
+    headers: { Accept: 'text/event-stream' },
+    timeout: false,
+  });
+  const reader = response.body?.getReader();
+
+  if (!reader) {
+    throw new Error('로드맵 생성 스트림을 열지 못했습니다.');
+  }
+
+  const decoder = new TextDecoder();
+  let buffer = '';
+
+  try {
+    while (true) {
+      const { done, value } = await reader.read();
+      buffer += decoder.decode(value, { stream: !done });
+
+      const parsed = parseSseEvents(buffer, done);
+      buffer = parsed.remaining;
+
+      for (const event of parsed.events) {
+        if (event.event === 'roadmap-completed') {
+          return;
+        }
+
+        if (event.event === 'roadmap-failed') {
+          const failure = JSON.parse(
+            event.data,
+          ) as RoadmapGenerationFailedEvent;
+          throw new Error(failure.message ?? '로드맵 생성에 실패했습니다.');
+        }
+      }
+
+      if (done) {
+        throw new Error('로드맵 생성 스트림이 완료 전에 종료되었습니다.');
+      }
+    }
+  } finally {
+    reader.releaseLock();
+  }
 };
diff --git a/apps/web/src/features/onboarding/hooks/index.ts b/apps/web/src/features/onboarding/hooks/index.ts
index 422c3019..18a1c9f0 100644
--- a/apps/web/src/features/onboarding/hooks/index.ts
+++ b/apps/web/src/features/onboarding/hooks/index.ts
@@ -1,3 +1,4 @@
 export { useIndustryField } from './useIndustryField';
+export { useRoadmapLoadingProgress } from './useRoadmapLoadingProgress';
 export { useTargetJobSkills } from './useTargetJobSkills';
 export { useVisaInformation } from './useVisaInformation';
diff --git a/apps/web/src/features/onboarding/hooks/useRoadmapLoadingProgress.ts b/apps/web/src/features/onboarding/hooks/useRoadmapLoadingProgress.ts
new file mode 100644
index 00000000..0377cc0c
--- /dev/null
+++ b/apps/web/src/features/onboarding/hooks/useRoadmapLoadingProgress.ts
@@ -0,0 +1,46 @@
+import { useEffect, useState } from 'react';
+
+const STEP_DURATION_MS = 5_000;
+
+interface UseRoadmapLoadingProgressParams {
+  stepCount: number;
+  isRoadmapReady: boolean;
+  startedAt: number;
+}
+
+export const useRoadmapLoadingProgress = ({
+  stepCount,
+  isRoadmapReady,
+  startedAt,
+}: UseRoadmapLoadingProgressParams) => {
+  const [currentTime, setCurrentTime] = useState(() => Date.now());
+  const lastStepIndex = stepCount - 1;
+  const elapsedTime = Math.max(currentTime - startedAt, 0);
+  const activeStepIndex = Math.min(
+    Math.floor(elapsedTime / STEP_DURATION_MS),
+    lastStepIndex,
+  );
+
+  useEffect(
+    function scheduleNextRoadmapLoadingStep() {
+      if (activeStepIndex === lastStepIndex) {
+        return;
+      }
+
+      const nextStepStartedAt =
+        startedAt + (activeStepIndex + 1) * STEP_DURATION_MS;
+      const remainingTime = Math.max(nextStepStartedAt - Date.now(), 0);
+      const timer = window.setTimeout(
+        () => setCurrentTime(Date.now()),
+        remainingTime,
+      );
+
+      return () => window.clearTimeout(timer);
+    },
+    [activeStepIndex, lastStepIndex, startedAt],
+  );
+
+  const isComplete = activeStepIndex === lastStepIndex && isRoadmapReady;
+
+  return isComplete ? stepCount : activeStepIndex;
+};
diff --git a/apps/web/src/features/onboarding/model/end-point.ts b/apps/web/src/features/onboarding/model/end-point.ts
index 77d3cb68..f557101e 100644
--- a/apps/web/src/features/onboarding/model/end-point.ts
+++ b/apps/web/src/features/onboarding/model/end-point.ts
@@ -1,7 +1,7 @@
 export const END_POINT = {
   ONBOARDING: {
     POST_ONBOARDING: 'api/v2/members/onboard',
-    POST_AI_ROADMAP: 'api/v1/members/roadmap',
+    POST_AI_ROADMAP: 'api/v1/roadmap/generations/stream',
     POST_OCR_VISA: 'api/v1/members/onboard/ocr/visa',
     POST_OCR_PASSPORT: 'api/v1/members/onboard/ocr/passport',
   },
diff --git a/apps/web/src/features/onboarding/model/index.ts b/apps/web/src/features/onboarding/model/index.ts
index 829cb9ba..309bfd14 100644
--- a/apps/web/src/features/onboarding/model/index.ts
+++ b/apps/web/src/features/onboarding/model/index.ts
@@ -1,6 +1,5 @@
 export { END_POINT } from './end-point';
 export {
-  type PostAiRoadMapResponse,
   type PostOcrPassportResponse,
   type PostOcrVisaResponse,
   type PostOnboardingForm,
diff --git a/apps/web/src/features/onboarding/model/types.ts b/apps/web/src/features/onboarding/model/types.ts
index fba86e2f..ed4aa922 100644
--- a/apps/web/src/features/onboarding/model/types.ts
+++ b/apps/web/src/features/onboarding/model/types.ts
@@ -3,9 +3,6 @@ import { paths } from '@shared/types/schema';
 export type PostOnboardingForm =
   paths['/api/v2/members/onboard']['post']['requestBody']['content']['application/json'];
 
-export type PostAiRoadMapResponse =
-  paths['/api/v1/members/roadmap']['post']['responses']['200']['content']['*/*'];
-
 export type PostOcrVisaResponse =
   paths['/api/v1/members/onboard/ocr/visa']['post']['responses']['200']['content']['*/*'];
 
diff --git a/apps/web/src/features/onboarding/queries/index.ts b/apps/web/src/features/onboarding/queries/index.ts
index e2a5e407..2916286f 100644
--- a/apps/web/src/features/onboarding/queries/index.ts
+++ b/apps/web/src/features/onboarding/queries/index.ts
@@ -1 +1,4 @@
-export { ONBOARDING_MUTATION_OPTIONS } from './queries';
+export {
+  ONBOARDING_MUTATION_OPTIONS,
+  ROADMAP_GENERATION_MUTATION_KEY,
+} from './queries';
diff --git a/apps/web/src/features/onboarding/queries/queries.ts b/apps/web/src/features/onboarding/queries/queries.ts
index 8cda3a9a..2a1b4b42 100644
--- a/apps/web/src/features/onboarding/queries/queries.ts
+++ b/apps/web/src/features/onboarding/queries/queries.ts
@@ -7,6 +7,8 @@ import {
   postOnboardingForm,
 } from '@features/onboarding';
 
+export const ROADMAP_GENERATION_MUTATION_KEY = ['roadmap-generation'] as const;
+
 export const ONBOARDING_MUTATION_OPTIONS = {
   POST_ONBOARDING_FORM: () => {
     return mutationOptions({
@@ -15,6 +17,7 @@ export const ONBOARDING_MUTATION_OPTIONS = {
   },
   POST_AI_ROADMAP: () => {
     return mutationOptions({
+      mutationKey: ROADMAP_GENERATION_MUTATION_KEY,
       mutationFn: postAiRoadMap,
     });
   },
diff --git a/apps/web/src/features/onboarding/ui/index.ts b/apps/web/src/features/onboarding/ui/index.ts
index b86a0185..6ee7b1e6 100644
--- a/apps/web/src/features/onboarding/ui/index.ts
+++ b/apps/web/src/features/onboarding/ui/index.ts
@@ -1 +1,2 @@
 export { default as LanguageSelector } from './language-selector/language-selector';
+export { default as RoadmapLoadingCard } from './roadmap-loading-card/roadmap-loading-card';
diff --git a/apps/web/src/features/onboarding/ui/roadmap-loading-card/roadmap-loading-card.css.ts b/apps/web/src/features/onboarding/ui/roadmap-loading-card/roadmap-loading-card.css.ts
new file mode 100644
index 00000000..65bdf55b
--- /dev/null
+++ b/apps/web/src/features/onboarding/ui/roadmap-loading-card/roadmap-loading-card.css.ts
@@ -0,0 +1,245 @@
+import { themeVars, typography } from '@kds/ui/styles';
+import { keyframes, style } from '@vanilla-extract/css';
+import { recipe } from '@vanilla-extract/recipes';
+
+const spin = keyframes({
+  to: { transform: 'rotate(360deg)' },
+});
+
+const fadeOut = keyframes({
+  to: { opacity: 0 },
+});
+
+const delayedTransition = '700ms';
+const reducedMotion = '(prefers-reduced-motion: reduce)';
+
+export const card = recipe({
+  base: {
+    display: 'flex',
+    flexDirection: 'column',
+    width: '56rem',
+    height: '44rem',
+    padding: '4rem',
+    gap: '3rem',
+    backgroundColor: themeVars.color.grayscale.white,
+    border: `1px solid ${themeVars.color.grayscale.gray300}`,
+    borderRadius: '20px',
+  },
+  variants: {
+    isComplete: {
+      true: {
+        animation: `${fadeOut} 300ms ease-in 700ms forwards`,
+        '@media': {
+          [reducedMotion]: {
+            animation: `${fadeOut} 1ms linear forwards`,
+          },
+        },
+      },
+      false: {},
+    },
+  },
+});
+
+export const heading = style({
+  ...typography.sub1_sb_22,
+  color: themeVars.color.grayscale.gray800,
+});
+
+export const screenReaderStatus = style({
+  position: 'absolute',
+  width: '1px',
+  height: '1px',
+  padding: 0,
+  margin: '-1px',
+  overflow: 'hidden',
+  clip: 'rect(0, 0, 0, 0)',
+  whiteSpace: 'nowrap',
+});
+
+export const stepList = style({
+  width: '100%',
+  overflow: 'hidden',
+});
+
+export const stepRow = recipe({
+  base: {
+    display: 'flex',
+    alignItems: 'center',
+    width: '100%',
+    height: '7.8rem',
+    padding: '1rem 1.4rem',
+    gap: '1.6rem',
+    borderRadius: '10px',
+    overflow: 'hidden',
+    transition: `background-color 300ms ease ${delayedTransition}`,
+    '@media': {
+      [reducedMotion]: { transition: 'none' },
+    },
+  },
+  variants: {
+    status: {
+      active: { backgroundColor: themeVars.color.grayscale.gray100 },
+      done: { backgroundColor: 'transparent' },
+      pending: { backgroundColor: 'transparent' },
+    },
+  },
+});
+
+export const statusIcon = style({
+  position: 'relative',
+  flexShrink: 0,
+  width: '2.4rem',
+  height: '2.4rem',
+});
+
+export const pendingIcon = recipe({
+  base: {
+    position: 'absolute',
+    inset: '0.2rem',
+    border: `2px solid ${themeVars.color.grayscale.gray300}`,
+    borderRadius: '50%',
+    transition: `opacity 300ms ease ${delayedTransition}`,
+    '@media': {
+      [reducedMotion]: { transition: 'none' },
+    },
+  },
+  variants: {
+    status: {
+      active: { opacity: 0 },
+      done: { opacity: 0, transitionDelay: '0ms' },
+      pending: { opacity: 1 },
+    },
+  },
+});
+
+export const loadingIcon = recipe({
+  base: {
+    position: 'absolute',
+    inset: '0.2rem',
+    border: `2px solid ${themeVars.color.primary[200]}`,
+    borderTopColor: themeVars.color.primary[500],
+    borderRadius: '50%',
+    animation: `${spin} 800ms linear infinite`,
+    transition: `opacity 300ms ease ${delayedTransition}`,
+    '@media': {
+      [reducedMotion]: {
+        animation: 'none',
+        transition: 'none',
+      },
+    },
+  },
+  variants: {
+    status: {
+      active: { opacity: 1 },
+      done: { opacity: 0, transition: 'opacity 220ms ease-out' },
+      pending: { opacity: 0 },
+    },
+  },
+});
+
+export const doneIcon = recipe({
+  base: {
+    position: 'absolute',
+    inset: '0.2rem',
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    color: themeVars.color.grayscale.white,
+    backgroundColor: themeVars.color.primary[500],
+    borderRadius: '50%',
+    opacity: 0,
+    transform: 'scale(0.75)',
+    transition: 'opacity 220ms ease-out, transform 220ms ease-out',
+    '@media': {
+      [reducedMotion]: { transition: 'none' },
+    },
+  },
+  variants: {
+    status: {
+      active: {},
+      done: { opacity: 1, transform: 'scale(1)' },
+      pending: {},
+    },
+  },
+});
+
+export const stepContent = style({
+  display: 'flex',
+  flex: 1,
+  flexDirection: 'column',
+  minWidth: 0,
+  overflow: 'hidden',
+});
+
+export const stepTitle = recipe({
+  base: {
+    ...typography.body5_m_16,
+    transition: `color 300ms ease ${delayedTransition}, font-weight 300ms ease ${delayedTransition}`,
+    '@media': {
+      [reducedMotion]: { transition: 'none' },
+    },
+  },
+  variants: {
+    status: {
+      active: {
+        ...typography.body4_sb_16,
+        color: themeVars.color.grayscale.gray800,
+      },
+      done: { color: themeVars.color.grayscale.gray600 },
+      pending: { color: themeVars.color.grayscale.gray400 },
+    },
+  },
+});
+
+export const stepDescription = recipe({
+  base: {
+    ...typography.body9_r_14,
+    color: themeVars.color.grayscale.gray500,
+    maxHeight: 0,
+    marginTop: 0,
+    opacity: 0,
+    overflow: 'hidden',
+    transition: `max-height 300ms ease ${delayedTransition}, margin-top 300ms ease ${delayedTransition}, opacity 300ms ease ${delayedTransition}`,
+    '@media': {
+      [reducedMotion]: { transition: 'none' },
+    },
+  },
+  variants: {
+    status: {
+      active: { maxHeight: '1.7rem', marginTop: '0.5rem', opacity: 1 },
+      done: {},
+      pending: {},
+    },
+  },
+});
+
+export const connector = style({
+  position: 'relative',
+  display: 'block',
+  width: '0.2rem',
+  height: '3rem',
+  marginLeft: '2.5rem',
+  overflow: 'hidden',
+  backgroundColor: themeVars.color.grayscale.gray300,
+  borderRadius: '1px',
+});
+
+export const connectorFill = recipe({
+  base: {
+    position: 'absolute',
+    inset: 0,
+    backgroundColor: themeVars.color.primary[500],
+    transform: 'scaleY(0)',
+    transformOrigin: 'top',
+    transition: 'transform 520ms ease-in-out 180ms',
+    '@media': {
+      [reducedMotion]: { transition: 'none' },
+    },
+  },
+  variants: {
+    isActive: {
+      true: { transform: 'scaleY(1)' },
+      false: {},
+    },
+  },
+});
diff --git a/apps/web/src/features/onboarding/ui/roadmap-loading-card/roadmap-loading-card.tsx b/apps/web/src/features/onboarding/ui/roadmap-loading-card/roadmap-loading-card.tsx
new file mode 100644
index 00000000..48a11a0e
--- /dev/null
+++ b/apps/web/src/features/onboarding/ui/roadmap-loading-card/roadmap-loading-card.tsx
@@ -0,0 +1,138 @@
+import { CheckIcon } from '@kds/icons';
+import type { AnimationEvent } from 'react';
+import { useTranslation } from 'react-i18next';
+
+import { useRoadmapLoadingProgress } from '@features/onboarding/hooks';
+
+import * as styles from './roadmap-loading-card.css';
+
+interface RoadmapLoadingCardProps {
+  name: string;
+  isRoadmapReady: boolean;
+  startedAt: number;
+  onExitComplete?: () => void;
+}
+
+type StepStatus = 'active' | 'done' | 'pending';
+
+const getStepStatus = (
+  stepIndex: number,
+  completedStepCount: number,
+): StepStatus => {
+  if (stepIndex < completedStepCount) {
+    return 'done';
+  }
+
+  if (stepIndex === completedStepCount) {
+    return 'active';
+  }
+
+  return 'pending';
+};
+
+const RoadmapLoadingCard = ({
+  name,
+  isRoadmapReady,
+  startedAt,
+  onExitComplete,
+}: RoadmapLoadingCardProps) => {
+  const { t } = useTranslation('onboarding');
+  const steps = [
+    {
+      id: 'profileReview',
+      title: t('roadmapLoading.steps.profileReview.title', { name }),
+      description: t('roadmapLoading.steps.profileReview.description'),
+    },
+    {
+      id: 'jobMatching',
+      title: t('roadmapLoading.steps.jobMatching.title'),
+      description: t('roadmapLoading.steps.jobMatching.description'),
+    },
+    {
+      id: 'roadmapCreation',
+      title: t('roadmapLoading.steps.roadmapCreation.title', { name }),
+      description: t('roadmapLoading.steps.roadmapCreation.description'),
+    },
+  ];
+  const completedStepCount = useRoadmapLoadingProgress({
+    stepCount: steps.length,
+    isRoadmapReady,
+    startedAt,
+  });
+  const isComplete = completedStepCount === steps.length;
+  const currentStep = steps[completedStepCount];
+  const stepItems = steps.map((step, index) => {
+    const status = getStepStatus(index, completedStepCount);
+    const isLastStep = index === steps.length - 1;
+
+    return {
+      ...step,
+      status,
+      hasConnector: !isLastStep,
+      isConnectorActive: status === 'done',
+    };
+  });
+
+  const handleAnimationEnd = (event: AnimationEvent<HTMLElement>) => {
+    if (event.target === event.currentTarget && isComplete) {
+      onExitComplete?.();
+    }
+  };
+
+  return (
+    <section
+      className={styles.card({ isComplete })}
+      onAnimationEnd={handleAnimationEnd}
+    >
+      <h2 className={styles.heading}>
+        {isComplete
+          ? t('roadmapLoading.completedTitle', { name })
+          : t('roadmapLoading.title')}
+      </h2>
+      <p className={styles.screenReaderStatus} role="status">
+        {currentStep?.title ?? t('roadmapLoading.completedTitle', { name })}
+      </p>
+      <div className={styles.stepList} role="list">
+        {stepItems.map(
+          ({
+            id,
+            title,
+            description,
+            status,
+            hasConnector,
+            isConnectorActive,
+          }) => (
+            <div key={id} role="listitem">
+              <div className={styles.stepRow({ status })}>
+                <span className={styles.statusIcon}>
+                  <span className={styles.pendingIcon({ status })} />
+                  <span className={styles.loadingIcon({ status })} />
+                  <span className={styles.doneIcon({ status })}>
+                    <CheckIcon width={16} height={16} />
+                  </span>
+                </span>
+                <span className={styles.stepContent}>
+                  <span className={styles.stepTitle({ status })}>{title}</span>
+                  <span className={styles.stepDescription({ status })}>
+                    {description}
+                  </span>
+                </span>
+              </div>
+              {hasConnector && (
+                <span className={styles.connector}>
+                  <span
+                    className={styles.connectorFill({
+                      isActive: isConnectorActive,
+                    })}
+                  />
+                </span>
+              )}
+            </div>
+          ),
+        )}
+      </div>
+    </section>
+  );
+};
+
+export default RoadmapLoadingCard;
diff --git a/apps/web/src/features/todo/api/create-todo-item.ts b/apps/web/src/features/todo/api/create-todo-item.ts
new file mode 100644
index 00000000..59c06920
--- /dev/null
+++ b/apps/web/src/features/todo/api/create-todo-item.ts
@@ -0,0 +1,23 @@
+import {
+  END_POINT,
+  PostCreateTodoBody,
+  PostCreateTodoRequest,
+  PostCreateTodoResponse,
+  TodoItemResponseData,
+} from '@features/todo/model';
+import { api } from '@shared/apis/configs/instance';
+
+import { unwrapActionItem } from './unwrap-action-item';
+
+export const createTodoItem = async ({
+  actionsType,
+  ...rest
+}: PostCreateTodoRequest): Promise<TodoItemResponseData> => {
+  const body: PostCreateTodoBody = { ...rest, type: actionsType };
+
+  const response = await api
+    .post(END_POINT.TODO.POST_ACTION_ITEM, { json: body })
+    .json<PostCreateTodoResponse>();
+
+  return unwrapActionItem(response.data);
+};
diff --git a/apps/web/src/features/todo/api/delete-todo-item.ts b/apps/web/src/features/todo/api/delete-todo-item.ts
new file mode 100644
index 00000000..bf160081
--- /dev/null
+++ b/apps/web/src/features/todo/api/delete-todo-item.ts
@@ -0,0 +1,21 @@
+import { DeleteTodoRequest, END_POINT } from '@features/todo/model';
+import { api } from '@shared/apis/configs/instance';
+import { HTTP_STATUS_CODE } from '@shared/constants/HTTP_STATUS_CODE';
+import { isHttpError } from '@shared/utils/http-error';
+
+export const deleteTodoItem = async ({
+  actionItemId,
+}: DeleteTodoRequest): Promise<void> => {
+  try {
+    await api.delete(END_POINT.TODO.DELETE_ACTION_ITEM(actionItemId));
+  } catch (error) {
+    if (
+      isHttpError(error) &&
+      error.response?.status === HTTP_STATUS_CODE.NOT_FOUND
+    ) {
+      return;
+    }
+
+    throw error;
+  }
+};
diff --git a/apps/web/src/features/todo/api/index.ts b/apps/web/src/features/todo/api/index.ts
index 44eb8a7c..63704952 100644
--- a/apps/web/src/features/todo/api/index.ts
+++ b/apps/web/src/features/todo/api/index.ts
@@ -1,2 +1,5 @@
 export { addTodoItem } from './add-todo-item';
+export { createTodoItem } from './create-todo-item';
+export { deleteTodoItem } from './delete-todo-item';
 export { toggleCheckbox } from './toggle-checkbox';
+export { updateTodoItem } from './update-todo-item';
diff --git a/apps/web/src/features/todo/api/unwrap-action-item.ts b/apps/web/src/features/todo/api/unwrap-action-item.ts
new file mode 100644
index 00000000..cc1de833
--- /dev/null
+++ b/apps/web/src/features/todo/api/unwrap-action-item.ts
@@ -0,0 +1,9 @@
+import type { ActionItem } from '@entities/todo';
+
+export const unwrapActionItem = (data: ActionItem | undefined): ActionItem => {
+  if (!data) {
+    throw new Error('액션 아이템 응답이 비어 있습니다.');
+  }
+
+  return data;
+};
diff --git a/apps/web/src/features/todo/api/update-todo-item.ts b/apps/web/src/features/todo/api/update-todo-item.ts
new file mode 100644
index 00000000..e8501c92
--- /dev/null
+++ b/apps/web/src/features/todo/api/update-todo-item.ts
@@ -0,0 +1,24 @@
+import {
+  END_POINT,
+  PatchUpdateTodoBody,
+  PatchUpdateTodoRequest,
+  PatchUpdateTodoResponse,
+  TodoItemResponseData,
+} from '@features/todo/model';
+import { api } from '@shared/apis/configs/instance';
+
+import { unwrapActionItem } from './unwrap-action-item';
+
+export const updateTodoItem = async ({
+  actionItemId,
+  title,
+  deadline,
+}: PatchUpdateTodoRequest): Promise<TodoItemResponseData> => {
+  const body: PatchUpdateTodoBody = { title, deadline };
+
+  const response = await api
+    .patch(END_POINT.TODO.PATCH_ACTION_ITEM(actionItemId), { json: body })
+    .json<PatchUpdateTodoResponse>();
+
+  return unwrapActionItem(response.data);
+};
diff --git a/apps/web/src/features/todo/hooks/index.ts b/apps/web/src/features/todo/hooks/index.ts
new file mode 100644
index 00000000..75049be9
--- /dev/null
+++ b/apps/web/src/features/todo/hooks/index.ts
@@ -0,0 +1,4 @@
+export { useCreateTodo } from './use-create-todo';
+export { useDeleteTodo } from './use-delete-todo';
+export { useToggleTodo } from './use-toggle-todo';
+export { useUpdateTodo } from './use-update-todo';
diff --git a/apps/web/src/features/todo/hooks/use-create-todo.ts b/apps/web/src/features/todo/hooks/use-create-todo.ts
new file mode 100644
index 00000000..ebcace4f
--- /dev/null
+++ b/apps/web/src/features/todo/hooks/use-create-todo.ts
@@ -0,0 +1,81 @@
+import { useMutation, useQueryClient } from '@tanstack/react-query';
+
+import {
+  daysToDeadline,
+  insertItem,
+  removeItem,
+  type TodoActionsType,
+  type TodoDraft,
+} from '@features/todo/model';
+import { TODO_MUTATION_OPTIONS } from '@features/todo/queries';
+import { type ActionItemList, TODO_QUERY_OPTIONS } from '@entities/todo';
+
+let lastTempId = 0;
+
+const createTempId = () => {
+  lastTempId -= 1;
+
+  return lastTempId;
+};
+
+export const useCreateTodo = () => {
+  const queryClient = useQueryClient();
+  const { queryKey } = TODO_QUERY_OPTIONS.GET_TODO_LIST();
+
+  const { mutate, isPending } = useMutation({
+    ...TODO_MUTATION_OPTIONS.POST_CREATE_TODO(),
+    onMutate: async (payload) => {
+      await queryClient.cancelQueries({ queryKey });
+
+      const prev = queryClient.getQueryData<ActionItemList>(queryKey);
+      const tempId = createTempId();
+
+      queryClient.setQueryData<ActionItemList>(queryKey, (current) => {
+        if (!current) {
+          return current;
+        }
+
+        return insertItem(
+          current,
+          {
+            actionItemId: tempId,
+            title: payload.title,
+            deadline: payload.deadline,
+            completed: false,
+          },
+          payload.actionsType,
+        );
+      });
+
+      return { prev, tempId };
+    },
+    onSuccess: (item, payload, context) => {
+      queryClient.setQueryData<ActionItemList>(queryKey, (current) => {
+        if (!current) {
+          return current;
+        }
+
+        return insertItem(
+          removeItem(current, context.tempId),
+          item,
+          payload.actionsType,
+        );
+      });
+    },
+    onError: (_error, _payload, context) => {
+      if (context?.prev) {
+        queryClient.setQueryData(queryKey, context.prev);
+      }
+    },
+  });
+
+  const createTodo = (draft: TodoDraft, actionsType: TodoActionsType) => {
+    mutate({
+      title: draft.title.trim(),
+      deadline: daysToDeadline(draft.dueInDays ?? 0),
+      actionsType,
+    });
+  };
+
+  return { createTodo, isPending };
+};
diff --git a/apps/web/src/features/todo/hooks/use-delete-todo.ts b/apps/web/src/features/todo/hooks/use-delete-todo.ts
new file mode 100644
index 00000000..f0c9f770
--- /dev/null
+++ b/apps/web/src/features/todo/hooks/use-delete-todo.ts
@@ -0,0 +1,105 @@
+import { type ReactNode, useEffect, useRef } from 'react';
+import { useToast } from '@kds/ui';
+import { useMutation, useQueryClient } from '@tanstack/react-query';
+import { useTranslation } from 'react-i18next';
+
+import { deleteTodoItem } from '@features/todo/api';
+import { removeItem } from '@features/todo/model';
+import { TODO_MUTATION_OPTIONS } from '@features/todo/queries';
+import { type ActionItemList, TODO_QUERY_OPTIONS } from '@entities/todo';
+
+interface UseDeleteTodoParams {
+  onHide: (actionItemId: number) => void;
+  onReveal: (actionItemId: number) => void;
+  renderUndoAction: (onUndo: () => void) => ReactNode;
+}
+
+export const useDeleteTodo = ({
+  onHide,
+  onReveal,
+  renderUndoAction,
+}: UseDeleteTodoParams) => {
+  const { t } = useTranslation('todo');
+  const { showToast, hideToast } = useToast();
+  const queryClient = useQueryClient();
+  const { queryKey } = TODO_QUERY_OPTIONS.GET_TODO_LIST();
+  const pendingDeletesRef = useRef(new Map<number, string>());
+
+  const { mutate } = useMutation({
+    ...TODO_MUTATION_OPTIONS.DELETE_TODO(),
+    onMutate: async ({ actionItemId }) => {
+      await queryClient.cancelQueries({ queryKey });
+
+      const prev = queryClient.getQueryData<ActionItemList>(queryKey);
+
+      queryClient.setQueryData<ActionItemList>(queryKey, (current) => {
+        if (!current) {
+          return current;
+        }
+
+        return removeItem(current, actionItemId);
+      });
+
+      return { prev };
+    },
+    onSuccess: (_data, { actionItemId }) => {
+      onReveal(actionItemId);
+    },
+    onError: (_error, { actionItemId }, context) => {
+      if (context?.prev) {
+        queryClient.setQueryData(queryKey, context.prev);
+      }
+
+      onReveal(actionItemId);
+    },
+  });
+  const commitDelete = (actionItemId: number) => {
+    if (!pendingDeletesRef.current.delete(actionItemId)) {
+      return;
+    }
+
+    mutate({ actionItemId });
+  };
+
+  const cancelDelete = (actionItemId: number) => {
+    const toastId = pendingDeletesRef.current.get(actionItemId);
+
+    if (!toastId) {
+      return;
+    }
+
+    pendingDeletesRef.current.delete(actionItemId);
+    hideToast(toastId);
+    onReveal(actionItemId);
+  };
+
+  const requestDelete = (actionItemId: number) => {
+    if (pendingDeletesRef.current.has(actionItemId)) {
+      return;
+    }
+
+    onHide(actionItemId);
+
+    const toastId = showToast({
+      message: t('toast.deleted'),
+      action: renderUndoAction(() => cancelDelete(actionItemId)),
+      onAutoDismiss: () => commitDelete(actionItemId),
+    });
+
+    pendingDeletesRef.current.set(actionItemId, toastId);
+  };
+
+  useEffect(() => {
+    const pendingDeletes = pendingDeletesRef.current;
+
+    return () => {
+      pendingDeletes.forEach((_toastId, actionItemId) => {
+        deleteTodoItem({ actionItemId }).catch(() => undefined);
+      });
+
+      pendingDeletes.clear();
+    };
+  }, []);
+
+  return { requestDelete };
+};
diff --git a/apps/web/src/features/todo/hooks/use-toggle-todo.ts b/apps/web/src/features/todo/hooks/use-toggle-todo.ts
new file mode 100644
index 00000000..9a3ac88a
--- /dev/null
+++ b/apps/web/src/features/todo/hooks/use-toggle-todo.ts
@@ -0,0 +1,77 @@
+import { useRef } from 'react';
+import { useMutation, useQueryClient } from '@tanstack/react-query';
+
+import { TODO_MUTATION_OPTIONS } from '@features/todo/queries';
+import { PHASE_QUERY_KEY } from '@entities/phase/queries';
+import { type ActionItemList, TODO_QUERY_OPTIONS } from '@entities/todo';
+
+const toggleCompleted = (
+  items: ActionItemList['visaActionItems'],
+  actionItemId: number,
+) =>
+  items?.map((item) =>
+    item.actionItemId === actionItemId
+      ? { ...item, completed: !item.completed }
+      : item,
+  );
+
+export const useToggleTodo = () => {
+  const queryClient = useQueryClient();
+  const { queryKey } = TODO_QUERY_OPTIONS.GET_TODO_LIST();
+  const pendingActionItemIds = useRef(new Set<number>());
+
+  const { mutate } = useMutation({
+    ...TODO_MUTATION_OPTIONS.PATCH_TODO(),
+    onMutate: async (actionItemId) => {
+      pendingActionItemIds.current.add(actionItemId);
+
+      await queryClient.cancelQueries({ queryKey });
+
+      const prev = queryClient.getQueryData<ActionItemList>(queryKey);
+
+      queryClient.setQueryData<ActionItemList>(queryKey, (current) => {
+        if (!current) {
+          return current;
+        }
+
+        return {
+          ...current,
+          visaActionItems: toggleCompleted(
+            current.visaActionItems,
+            actionItemId,
+          ),
+          careerActionItems: toggleCompleted(
+            current.careerActionItems,
+            actionItemId,
+          ),
+        };
+      });
+
+      return { prev };
+    },
+    onError: (_error, _variables, context) => {
+      if (context?.prev) {
+        queryClient.setQueryData(queryKey, context.prev);
+      }
+    },
+    onSuccess: () => {
+      queryClient.invalidateQueries({
+        queryKey: PHASE_QUERY_KEY.PHASE_ITEM_ROADMAP_ALL(),
+      });
+    },
+    onSettled: (_data, _error, actionItemId) => {
+      pendingActionItemIds.current.delete(actionItemId);
+      queryClient.invalidateQueries({ queryKey });
+    },
+  });
+
+  const toggleTodo = (actionItemId: number) => {
+    if (pendingActionItemIds.current.has(actionItemId)) {
+      return;
+    }
+
+    mutate(actionItemId);
+  };
+
+  return { toggleTodo };
+};
diff --git a/apps/web/src/features/todo/hooks/use-update-todo.ts b/apps/web/src/features/todo/hooks/use-update-todo.ts
new file mode 100644
index 00000000..7fda9819
--- /dev/null
+++ b/apps/web/src/features/todo/hooks/use-update-todo.ts
@@ -0,0 +1,61 @@
+import { useMutation, useQueryClient } from '@tanstack/react-query';
+
+import {
+  daysToDeadline,
+  type TodoDraft,
+  updateItem,
+} from '@features/todo/model';
+import { TODO_MUTATION_OPTIONS } from '@features/todo/queries';
+import { type ActionItemList, TODO_QUERY_OPTIONS } from '@entities/todo';
+
+export const useUpdateTodo = () => {
+  const queryClient = useQueryClient();
+  const { queryKey } = TODO_QUERY_OPTIONS.GET_TODO_LIST();
+
+  const { mutate, isPending } = useMutation({
+    ...TODO_MUTATION_OPTIONS.PATCH_UPDATE_TODO(),
+    onMutate: async (payload) => {
+      await queryClient.cancelQueries({ queryKey });
+
+      const prev = queryClient.getQueryData<ActionItemList>(queryKey);
+
+      queryClient.setQueryData<ActionItemList>(queryKey, (current) => {
+        if (!current) {
+          return current;
+        }
+
+        return updateItem(current, {
+          actionItemId: payload.actionItemId,
+          title: payload.title,
+          deadline: payload.deadline,
+        });
+      });
+
+      return { prev };
+    },
+    onSuccess: (item) => {
+      queryClient.setQueryData<ActionItemList>(queryKey, (current) => {
+        if (!current) {
+          return current;
+        }
+
+        return updateItem(current, item);
+      });
+    },
+    onError: (_error, _payload, context) => {
+      if (context?.prev) {
+        queryClient.setQueryData(queryKey, context.prev);
+      }
+    },
+  });
+
+  const updateTodo = (actionItemId: number, draft: TodoDraft) => {
+    mutate({
+      actionItemId,
+      title: draft.title.trim(),
+      deadline: daysToDeadline(draft.dueInDays ?? 0),
+    });
+  };
+
+  return { updateTodo, isPending };
+};
diff --git a/apps/web/src/features/todo/index.ts b/apps/web/src/features/todo/index.ts
index 355d61ed..d7e48283 100644
--- a/apps/web/src/features/todo/index.ts
+++ b/apps/web/src/features/todo/index.ts
@@ -1,4 +1,5 @@
 export * from './api';
+export * from './hooks';
 export * from './model';
 export * from './queries';
 export * from './ui';
diff --git a/apps/web/src/features/todo/model/end-point.ts b/apps/web/src/features/todo/model/end-point.ts
index 294b6b07..54518e0d 100644
--- a/apps/web/src/features/todo/model/end-point.ts
+++ b/apps/web/src/features/todo/model/end-point.ts
@@ -1,8 +1,13 @@
 export const END_POINT = {
   TODO: {
     POST_TODO_ITEM: (phaseActionId: number) =>
-      `api/v1/phase-actions/${phaseActionId}/todo`,
+      `api/v1/roadmap/phase-actions/${phaseActionId}/todo`,
     PATCH_TOGGLE_CHECKBOX: (actionItemId: number) =>
-      `api/v1/action-items/${actionItemId}/completed`,
+      `api/v1/roadmap/action-items/${actionItemId}/completed`,
+    POST_ACTION_ITEM: 'api/v1/roadmap/action-items',
+    PATCH_ACTION_ITEM: (actionItemId: number) =>
+      `api/v1/roadmap/action-items/${actionItemId}`,
+    DELETE_ACTION_ITEM: (actionItemId: number) =>
+      `api/v1/roadmap/action-items/${actionItemId}`,
   },
 };
diff --git a/apps/web/src/features/todo/model/index.ts b/apps/web/src/features/todo/model/index.ts
index 682c8bde..b832cf43 100644
--- a/apps/web/src/features/todo/model/index.ts
+++ b/apps/web/src/features/todo/model/index.ts
@@ -1,7 +1,25 @@
 export { END_POINT } from './end-point';
+export { insertItem, removeItem, updateItem } from './todo-cache';
+export {
+  daysToDeadline,
+  DUE_DAYS_MIN,
+  TITLE_MAX_LENGTH,
+  type TodoDraft,
+  type TodoDraftError,
+  validateTodoDraft,
+} from './todo-draft';
 export type {
+  DeleteTodoRequest,
   PatchToggleCheckboxRequest,
   PatchToggleCHeckboxResponse,
+  PatchUpdateTodoBody,
+  PatchUpdateTodoRequest,
+  PatchUpdateTodoResponse,
   PostAddTodoItemRequest,
   PostAddTodoItemResponse,
+  PostCreateTodoBody,
+  PostCreateTodoRequest,
+  PostCreateTodoResponse,
+  TodoActionsType,
+  TodoItemResponseData,
 } from './types';
diff --git a/apps/web/src/features/todo/model/todo-cache.ts b/apps/web/src/features/todo/model/todo-cache.ts
new file mode 100644
index 00000000..d42f5a3d
--- /dev/null
+++ b/apps/web/src/features/todo/model/todo-cache.ts
@@ -0,0 +1,64 @@
+import type { ActionItem, ActionItemList } from '@entities/todo';
+
+import type { TodoActionsType } from './types';
+
+const mergeItem = (current: ActionItem, next: ActionItem): ActionItem => ({
+  actionItemId: next.actionItemId ?? current.actionItemId,
+  title: next.title ?? current.title,
+  deadline: next.deadline ?? current.deadline,
+  completed: next.completed ?? current.completed,
+});
+
+const replaceInItems = (
+  items: ActionItem[] | undefined,
+  next: ActionItem,
+): ActionItem[] | undefined =>
+  items?.map((item) =>
+    item.actionItemId === next.actionItemId ? mergeItem(item, next) : item,
+  );
+
+export const insertItem = (
+  list: ActionItemList,
+  item: ActionItem,
+  actionsType: TodoActionsType,
+): ActionItemList => {
+  if (actionsType === 'VISA') {
+    return {
+      ...list,
+      visaActionItems: [...(list.visaActionItems ?? []), item],
+    };
+  }
+
+  return {
+    ...list,
+    careerActionItems: [...(list.careerActionItems ?? []), item],
+  };
+};
+
+export const updateItem = (
+  list: ActionItemList,
+  item: ActionItem,
+): ActionItemList => {
+  if (item.actionItemId === undefined) {
+    return list;
+  }
+
+  return {
+    ...list,
+    visaActionItems: replaceInItems(list.visaActionItems, item),
+    careerActionItems: replaceInItems(list.careerActionItems, item),
+  };
+};
+
+export const removeItem = (
+  list: ActionItemList,
+  actionItemId: number,
+): ActionItemList => ({
+  ...list,
+  visaActionItems: list.visaActionItems?.filter(
+    (item) => item.actionItemId !== actionItemId,
+  ),
+  careerActionItems: list.careerActionItems?.filter(
+    (item) => item.actionItemId !== actionItemId,
+  ),
+});
diff --git a/apps/web/src/features/todo/model/todo-draft.ts b/apps/web/src/features/todo/model/todo-draft.ts
new file mode 100644
index 00000000..6dfa6071
--- /dev/null
+++ b/apps/web/src/features/todo/model/todo-draft.ts
@@ -0,0 +1,50 @@
+export type TodoDraft = {
+  title: string;
+  dueInDays: number | null;
+};
+
+export type TodoDraftError =
+  | 'TITLE_REQUIRED'
+  | 'TITLE_TOO_LONG'
+  | 'DAYS_REQUIRED'
+  | 'DAYS_INVALID';
+
+export const TITLE_MAX_LENGTH = 255;
+export const DUE_DAYS_MIN = 1;
+
+export const validateTodoDraft = (draft: TodoDraft): TodoDraftError | null => {
+  const title = draft.title.trim();
+
+  if (title.length === 0) {
+    return 'TITLE_REQUIRED';
+  }
+
+  if (title.length > TITLE_MAX_LENGTH) {
+    return 'TITLE_TOO_LONG';
+  }
+
+  if (draft.dueInDays === null) {
+    return 'DAYS_REQUIRED';
+  }
+
+  if (!Number.isInteger(draft.dueInDays) || draft.dueInDays < DUE_DAYS_MIN) {
+    return 'DAYS_INVALID';
+  }
+
+  return null;
+};
+
+export const daysToDeadline = (days: number): string => {
+  const now = new Date();
+  const deadline = new Date(
+    now.getFullYear(),
+    now.getMonth(),
+    now.getDate() + days,
+  );
+
+  const year = String(deadline.getFullYear()).padStart(4, '0');
+  const month = String(deadline.getMonth() + 1).padStart(2, '0');
+  const date = String(deadline.getDate()).padStart(2, '0');
+
+  return `${year}-${month}-${date}`;
+};
diff --git a/apps/web/src/features/todo/model/types.ts b/apps/web/src/features/todo/model/types.ts
index 4cab9b63..09091276 100644
--- a/apps/web/src/features/todo/model/types.ts
+++ b/apps/web/src/features/todo/model/types.ts
@@ -1,13 +1,46 @@
+import type { ActionItem } from '@entities/todo';
 import { paths } from '@shared/types/schema';
 
 export type PostAddTodoItemRequest =
-  paths['/api/v1/phase-actions/{phaseActionId}/todo']['post']['parameters']['path']['phaseActionId'];
+  paths['/api/v1/roadmap/phase-actions/{phaseActionId}/todo']['post']['parameters']['path']['phaseActionId'];
 
 export type PostAddTodoItemResponse =
-  paths['/api/v1/phase-actions/{phaseActionId}/todo']['post']['responses'][200]['content']['*/*'];
+  paths['/api/v1/roadmap/phase-actions/{phaseActionId}/todo']['post']['responses'][200]['content']['*/*'];
 
 export type PatchToggleCheckboxRequest =
-  paths['/api/v1/action-items/{actionItemId}/completed']['patch']['parameters']['path']['actionItemId'];
+  paths['/api/v1/roadmap/action-items/{actionItemId}/completed']['patch']['parameters']['path']['actionItemId'];
 
 export type PatchToggleCHeckboxResponse =
-  paths['/api/v1/action-items/{actionItemId}/completed']['patch']['responses']['200']['content']['*/*'];
+  paths['/api/v1/roadmap/action-items/{actionItemId}/completed']['patch']['responses']['200']['content']['*/*'];
+
+export type TodoActionsType = 'VISA' | 'CAREER';
+
+export type PostCreateTodoBody =
+  paths['/api/v1/roadmap/action-items']['post']['requestBody']['content']['application/json'];
+
+export type PostCreateTodoRequest = {
+  title: string;
+  deadline: string;
+  actionsType: TodoActionsType;
+};
+
+export type PostCreateTodoResponse =
+  paths['/api/v1/roadmap/action-items']['post']['responses']['200']['content']['*/*'];
+
+export type PatchUpdateTodoBody =
+  paths['/api/v1/roadmap/action-items/{actionItemId}']['patch']['requestBody']['content']['application/json'];
+
+export type PatchUpdateTodoRequest = {
+  actionItemId: number;
+  title: string;
+  deadline: string;
+};
+
+export type PatchUpdateTodoResponse =
+  paths['/api/v1/roadmap/action-items/{actionItemId}']['patch']['responses']['200']['content']['*/*'];
+
+export type DeleteTodoRequest = {
+  actionItemId: paths['/api/v1/roadmap/action-items/{actionItemId}']['delete']['parameters']['path']['actionItemId'];
+};
+
+export type TodoItemResponseData = ActionItem;
diff --git a/apps/web/src/features/todo/queries/queires.ts b/apps/web/src/features/todo/queries/queires.ts
index c56b2b49..79c97310 100644
--- a/apps/web/src/features/todo/queries/queires.ts
+++ b/apps/web/src/features/todo/queries/queires.ts
@@ -1,6 +1,12 @@
 import { mutationOptions } from '@tanstack/react-query';
 
-import { addTodoItem, toggleCheckbox } from '@features/todo/api';
+import {
+  addTodoItem,
+  createTodoItem,
+  deleteTodoItem,
+  toggleCheckbox,
+  updateTodoItem,
+} from '@features/todo/api';
 
 export const TODO_MUTATION_OPTIONS = {
   POST_TODO: () => {
@@ -14,4 +20,22 @@ export const TODO_MUTATION_OPTIONS = {
       mutationFn: toggleCheckbox,
     });
   },
+
+  POST_CREATE_TODO: () => {
+    return mutationOptions({
+      mutationFn: createTodoItem,
+    });
+  },
+
+  PATCH_UPDATE_TODO: () => {
+    return mutationOptions({
+      mutationFn: updateTodoItem,
+    });
+  },
+
+  DELETE_TODO: () => {
+    return mutationOptions({
+      mutationFn: deleteTodoItem,
+    });
+  },
 };
diff --git a/apps/web/src/features/todo/ui/index.ts b/apps/web/src/features/todo/ui/index.ts
index 094ca3e1..0faaa9ae 100644
--- a/apps/web/src/features/todo/ui/index.ts
+++ b/apps/web/src/features/todo/ui/index.ts
@@ -1 +1,7 @@
 export { default as ActionTodoButton } from './action-todo-button/action-todo-button';
+export { default as TodoItemForm } from './todo-item-form/todo-item-form';
+export {
+  type TodoItemHandlers,
+  default as TodoItemList,
+} from './todo-item-list/todo-item-list';
+export { default as TodoItemMenu } from './todo-item-menu/todo-item-menu';
diff --git a/apps/web/src/features/todo/ui/todo-item-form/todo-item-form.css.ts b/apps/web/src/features/todo/ui/todo-item-form/todo-item-form.css.ts
new file mode 100644
index 00000000..8a577c14
--- /dev/null
+++ b/apps/web/src/features/todo/ui/todo-item-form/todo-item-form.css.ts
@@ -0,0 +1,110 @@
+import { themeVars, typography } from '@kds/ui/styles';
+import { style } from '@vanilla-extract/css';
+import { recipe } from '@vanilla-extract/recipes';
+
+export const container = recipe({
+  base: {
+    display: 'flex',
+    alignItems: 'center',
+    padding: '1.2rem 1.6rem',
+    gap: '0.8rem',
+    borderRadius: '10px',
+    backgroundColor: themeVars.color.grayscale.gray100,
+  },
+  variants: {
+    hasError: {
+      true: {
+        boxShadow: `inset 0 0 0 2px ${themeVars.color.pastel.kared_500}`,
+      },
+      false: {
+        boxShadow: `inset 0 0 0 2px ${themeVars.color.primary[500]}`,
+      },
+    },
+  },
+  defaultVariants: {
+    hasError: false,
+  },
+});
+
+export const checkboxPlaceholder = style({
+  display: 'flex',
+  flexShrink: 0,
+  alignItems: 'center',
+});
+
+export const content = style({
+  display: 'flex',
+  flexDirection: 'column',
+  gap: '0.2rem',
+  flex: 1,
+  minWidth: 0,
+});
+
+export const titleInput = style({
+  ...typography.body8_m_14,
+
+  display: 'block',
+  width: '100%',
+  outline: 'none',
+  backgroundColor: 'transparent',
+  color: themeVars.color.grayscale.gray800,
+  resize: 'none',
+  overflow: 'hidden',
+  wordBreak: 'break-word',
+
+  selectors: {
+    '&::placeholder': {
+      color: themeVars.color.grayscale.gray400,
+    },
+  },
+});
+
+export const dueRow = style({
+  ...typography.cap3_r_12,
+  color: themeVars.color.grayscale.gray500,
+});
+
+export const daysInput = recipe({
+  base: {
+    ...typography.cap3_r_12,
+
+    display: 'inline-block',
+    verticalAlign: 'middle',
+    width: 'auto',
+    minWidth: '2.4rem',
+    padding: '0.2rem 0.8rem',
+    margin: '0 0.2rem',
+
+    borderWidth: '1px',
+    borderStyle: 'solid',
+    borderRadius: '8px',
+    outline: 'none',
+    backgroundColor: 'transparent',
+    color: themeVars.color.grayscale.gray900,
+    textAlign: 'center',
+
+    selectors: {
+      '&::placeholder': {
+        color: themeVars.color.grayscale.gray500,
+      },
+    },
+  },
+  variants: {
+    hasError: {
+      true: {
+        borderColor: themeVars.color.pastel.kared_500,
+      },
+      false: {
+        borderColor: themeVars.color.grayscale.gray400,
+      },
+    },
+  },
+  defaultVariants: {
+    hasError: false,
+  },
+});
+
+export const errorMessage = style({
+  ...typography.cap3_r_12,
+  color: themeVars.color.pastel.kared_500,
+});
diff --git a/apps/web/src/features/todo/ui/todo-item-form/todo-item-form.tsx b/apps/web/src/features/todo/ui/todo-item-form/todo-item-form.tsx
new file mode 100644
index 00000000..b209f371
--- /dev/null
+++ b/apps/web/src/features/todo/ui/todo-item-form/todo-item-form.tsx
@@ -0,0 +1,182 @@
+import {
+  type KeyboardEvent,
+  useCallback,
+  useLayoutEffect,
+  useRef,
+  useState,
+} from 'react';
+import { TodoIcon } from '@kds/icons';
+import { Trans, useTranslation } from 'react-i18next';
+
+import {
+  DUE_DAYS_MIN,
+  TITLE_MAX_LENGTH,
+  type TodoDraft,
+  type TodoDraftError,
+  validateTodoDraft,
+} from '@features/todo/model';
+
+import * as styles from './todo-item-form.css';
+
+const ERROR_MESSAGES: Record<
+  TodoDraftError,
+  { key: string; options?: Record<string, number> }
+> = {
+  TITLE_REQUIRED: { key: 'form.error.titleRequired' },
+  TITLE_TOO_LONG: {
+    key: 'form.error.titleTooLong',
+    options: { max: TITLE_MAX_LENGTH },
+  },
+  DAYS_REQUIRED: { key: 'form.error.daysRequired' },
+  DAYS_INVALID: {
+    key: 'form.error.daysInvalid',
+    options: { min: DUE_DAYS_MIN },
+  },
+};
+
+const DAYS_INPUT_MAX_LENGTH = 4;
+
+const useAutoResize = (value: string) => {
+  const ref = useRef<HTMLTextAreaElement>(null);
+
+  const resize = useCallback(() => {
+    const textarea = ref.current;
+
+    if (!textarea) {
+      return;
+    }
+
+    textarea.style.height = 'auto';
+    textarea.style.height = `${textarea.scrollHeight}px`;
+  }, []);
+
+  useLayoutEffect(resize, [resize, value]);
+
+  return ref;
+};
+
+interface TodoItemFormProps {
+  initialDraft: TodoDraft;
+  onSubmit: (draft: TodoDraft) => void;
+  onCancel: () => void;
+}
+
+const TodoItemForm = ({
+  initialDraft,
+  onSubmit,
+  onCancel,
+}: TodoItemFormProps) => {
+  const { t } = useTranslation('todo');
+  const [title, setTitle] = useState(initialDraft.title);
+  const titleRef = useAutoResize(title);
+  const [days, setDays] = useState(
+    initialDraft.dueInDays === null ? '' : String(initialDraft.dueInDays),
+  );
+  const [errorKey, setErrorKey] = useState<TodoDraftError | null>(null);
+
+  const toDraft = (): TodoDraft => ({
+    title,
+    dueInDays: days.trim() === '' ? null : Number(days),
+  });
+
+  const handleDaysChange = (value: string) => {
+    setDays(value.replace(/[^0-9]/g, ''));
+  };
+
+  const handleSubmit = () => {
+    const draft = toDraft();
+    const nextErrorKey = validateTodoDraft(draft);
+
+    setErrorKey(nextErrorKey);
+
+    if (nextErrorKey !== null) {
+      return;
+    }
+
+    onSubmit(draft);
+  };
+
+  const handleKeyDown = (event: KeyboardEvent<HTMLLIElement>) => {
+    if (event.key === 'Enter') {
+      if (event.nativeEvent.isComposing) {
+        return;
+      }
+
+      event.preventDefault();
+      handleSubmit();
+    }
+
+    if (event.key === 'Escape') {
+      onCancel();
+    }
+  };
+
+  const errorMessage = errorKey
+    ? t(ERROR_MESSAGES[errorKey].key, ERROR_MESSAGES[errorKey].options)
+    : null;
+
+  return (
+    <li
+      className={styles.container({ hasError: errorKey !== null })}
+      onKeyDown={handleKeyDown}
+    >
+      <span className={styles.checkboxPlaceholder} aria-hidden>
+        <TodoIcon width={24} height={24} />
+      </span>
+      <div className={styles.content}>
+        <textarea
+          ref={titleRef}
+          rows={1}
+          className={styles.titleInput}
+          value={title}
+          placeholder={t('form.placeholder')}
+          aria-label={t('form.titleLabel')}
+          onChange={(event) => setTitle(event.target.value)}
+        />
+        <p className={styles.dueRow}>
+          <Trans
+            t={t}
+            i18nKey="form.dueIn"
+            components={{
+              days: (
+                <DaysField
+                  value={days}
+                  hasError={
+                    errorKey === 'DAYS_REQUIRED' || errorKey === 'DAYS_INVALID'
+                  }
+                  label={t('form.daysLabel')}
+                  onChange={handleDaysChange}
+                />
+              ),
+            }}
+          />
+        </p>
+        {errorMessage && <p className={styles.errorMessage}>{errorMessage}</p>}
+      </div>
+    </li>
+  );
+};
+
+interface DaysFieldProps {
+  value: string;
+  hasError: boolean;
+  label: string;
+  onChange: (value: string) => void;
+}
+
+const DaysField = ({ value, hasError, label, onChange }: DaysFieldProps) => {
+  return (
+    <input
+      type="text"
+      inputMode="numeric"
+      className={styles.daysInput({ hasError })}
+      value={value}
+      aria-label={label}
+      maxLength={DAYS_INPUT_MAX_LENGTH}
+      size={value.length || 1}
+      onChange={(event) => onChange(event.target.value)}
+    />
+  );
+};
+
+export default TodoItemForm;
diff --git a/apps/web/src/features/todo/ui/todo-item-list/todo-item-list.css.ts b/apps/web/src/features/todo/ui/todo-item-list/todo-item-list.css.ts
new file mode 100644
index 00000000..3aa36567
--- /dev/null
+++ b/apps/web/src/features/todo/ui/todo-item-list/todo-item-list.css.ts
@@ -0,0 +1,7 @@
+import { style } from '@vanilla-extract/css';
+
+export const list = style({
+  display: 'flex',
+  gap: '0.8rem',
+  flexDirection: 'column',
+});
diff --git a/apps/web/src/features/todo/ui/todo-item-list/todo-item-list.tsx b/apps/web/src/features/todo/ui/todo-item-list/todo-item-list.tsx
new file mode 100644
index 00000000..0ef6b770
--- /dev/null
+++ b/apps/web/src/features/todo/ui/todo-item-list/todo-item-list.tsx
@@ -0,0 +1,118 @@
+import { DUE_DAYS_MIN, type TodoDraft } from '@features/todo/model';
+import { type ActionItem, getDueInDays, TodoItem } from '@entities/todo';
+
+import TodoItemForm from '../todo-item-form/todo-item-form';
+import TodoItemMenu from '../todo-item-menu/todo-item-menu';
+
+import * as styles from './todo-item-list.css';
+
+const EMPTY_DRAFT: TodoDraft = { title: '', dueInDays: null };
+
+const toEditDraft = (item: ActionItem): TodoDraft => ({
+  title: item.title ?? '',
+  dueInDays: Math.max(DUE_DAYS_MIN, getDueInDays(item.deadline ?? '') ?? 0),
+});
+
+export interface TodoItemHandlers {
+  onToggle: (actionItemId: number) => void;
+  onEditStart: (actionItemId: number) => void;
+  onEditSubmit: (actionItemId: number, draft: TodoDraft) => void;
+  onDelete: (actionItemId: number) => void;
+  onMenuOpenChange: (actionItemId: number, isOpen: boolean) => void;
+  onCancelEdit: () => void;
+}
+
+interface TodoItemListProps {
+  items: ActionItem[];
+  editingItemId: number | null;
+  menuOpenItemId: number | null;
+  getDescription: (deadline: string) => string;
+  handlers: TodoItemHandlers;
+  onCreateSubmit?: (draft: TodoDraft) => void;
+}
+
+const TodoItemList = ({
+  items,
+  editingItemId,
+  menuOpenItemId,
+  getDescription,
+  handlers,
+  onCreateSubmit,
+}: TodoItemListProps) => {
+  if (!onCreateSubmit && items.length === 0) {
+    return null;
+  }
+
+  return (
+    <ul className={styles.list}>
+      {onCreateSubmit && (
+        <TodoItemForm
+          initialDraft={EMPTY_DRAFT}
+          onSubmit={onCreateSubmit}
+          onCancel={handlers.onCancelEdit}
+        />
+      )}
+      {items.map((item) => {
+        const actionItemId = Number(item.actionItemId);
+
+        return actionItemId === editingItemId ? (
+          <TodoItemForm
+            key={actionItemId}
+            initialDraft={toEditDraft(item)}
+            onSubmit={(draft) => handlers.onEditSubmit(actionItemId, draft)}
+            onCancel={handlers.onCancelEdit}
+          />
+        ) : (
+          <TodoItemRow
+            key={actionItemId}
+            item={item}
+            description={getDescription(item.deadline ?? '')}
+            isMenuOpen={actionItemId === menuOpenItemId}
+            handlers={handlers}
+          />
+        );
+      })}
+    </ul>
+  );
+};
+
+interface TodoItemRowProps {
+  item: ActionItem;
+  description: string;
+  isMenuOpen: boolean;
+  handlers: TodoItemHandlers;
+}
+
+const TodoItemRow = ({
+  item,
+  description,
+  isMenuOpen,
+  handlers,
+}: TodoItemRowProps) => {
+  const actionItemId = Number(item.actionItemId);
+  const isCompleted = item.completed ?? false;
+
+  return (
+    <TodoItem
+      title={item.title ?? ''}
+      description={description}
+      size="sm"
+      isChecked={isCompleted}
+      onToggle={() => handlers.onToggle(actionItemId)}
+      action={
+        <TodoItemMenu
+          isOpen={isMenuOpen}
+          onOpenChange={(isOpen) =>
+            handlers.onMenuOpenChange(actionItemId, isOpen)
+          }
+          onEdit={
+            isCompleted ? undefined : () => handlers.onEditStart(actionItemId)
+          }
+          onDelete={() => handlers.onDelete(actionItemId)}
+        />
+      }
+    />
+  );
+};
+
+export default TodoItemList;
diff --git a/apps/web/src/features/todo/ui/todo-item-menu/todo-item-menu.css.ts b/apps/web/src/features/todo/ui/todo-item-menu/todo-item-menu.css.ts
new file mode 100644
index 00000000..d042d078
--- /dev/null
+++ b/apps/web/src/features/todo/ui/todo-item-menu/todo-item-menu.css.ts
@@ -0,0 +1,69 @@
+import { themeVars, typography } from '@kds/ui/styles';
+import { style } from '@vanilla-extract/css';
+import { recipe } from '@vanilla-extract/recipes';
+
+const MENU_ANCHOR = '--todo-item-menu';
+
+export const trigger = recipe({
+  base: {
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  variants: {
+    isOpen: {
+      true: { anchorName: MENU_ANCHOR },
+      false: {},
+    },
+  },
+  defaultVariants: { isOpen: false },
+});
+
+export const panel = style({
+  positionAnchor: MENU_ANCHOR,
+  margin: 0,
+  top: 'calc(anchor(bottom) + 0.4rem)',
+  right: 'anchor(right)',
+  left: 'auto',
+
+  display: 'flex',
+  flexDirection: 'column',
+  minWidth: '8rem',
+  padding: '0.4rem',
+  gap: '0.2rem',
+
+  border: `1px solid ${themeVars.color.grayscale.gray200}`,
+  borderRadius: '10px',
+  backgroundColor: themeVars.color.grayscale.white,
+  boxShadow: '0 0 12px 0 rgba(0, 0, 0, 0.12)',
+
+  selectors: {
+    '&:not(:popover-open)': {
+      display: 'none',
+    },
+  },
+});
+
+export const menuItem = style({
+  ...typography.body8_m_14,
+
+  display: 'flex',
+  alignItems: 'center',
+  padding: '0.4rem',
+  gap: '0.4rem',
+
+  borderRadius: '4px',
+  color: themeVars.color.grayscale.gray500,
+  whiteSpace: 'nowrap',
+
+  selectors: {
+    '&:hover': {
+      backgroundColor: themeVars.color.grayscale.gray100,
+    },
+  },
+});
+
+export const menuItemIcon = style({
+  flexShrink: 0,
+  color: themeVars.color.grayscale.gray500,
+});
diff --git a/apps/web/src/features/todo/ui/todo-item-menu/todo-item-menu.tsx b/apps/web/src/features/todo/ui/todo-item-menu/todo-item-menu.tsx
new file mode 100644
index 00000000..8c8eba6c
--- /dev/null
+++ b/apps/web/src/features/todo/ui/todo-item-menu/todo-item-menu.tsx
@@ -0,0 +1,114 @@
+import { type KeyboardEvent, useEffect, useRef } from 'react';
+import { DeleteIcon, EditIcon, KebabMenuIcon } from '@kds/icons';
+import { useTranslation } from 'react-i18next';
+
+import * as styles from './todo-item-menu.css';
+
+interface TodoItemMenuProps {
+  isOpen: boolean;
+  onOpenChange: (isOpen: boolean) => void;
+  onEdit?: () => void;
+  onDelete: () => void;
+}
+
+const TodoItemMenu = ({
+  isOpen,
+  onOpenChange,
+  onEdit,
+  onDelete,
+}: TodoItemMenuProps) => {
+  const { t } = useTranslation('todo');
+  const panelRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    const panel = panelRef.current;
+
+    if (!panel) {
+      return;
+    }
+
+    const isShowing = panel.matches(':popover-open');
+
+    if (isOpen && !isShowing) {
+      panel.showPopover();
+      panel.querySelector('button')?.focus();
+    }
+
+    if (!isOpen && isShowing) {
+      panel.hidePopover();
+    }
+  }, [isOpen]);
+
+  useEffect(() => {
+    const panel = panelRef.current;
+
+    if (!panel) {
+      return;
+    }
+
+    const handleToggle = (event: ToggleEvent) => {
+      if (event.newState === 'closed') {
+        onOpenChange(false);
+      }
+    };
+
+    panel.addEventListener('toggle', handleToggle);
+
+    return () => panel.removeEventListener('toggle', handleToggle);
+  }, [onOpenChange]);
+
+  const handleKeyDown = (event: KeyboardEvent<HTMLDivElement>) => {
+    if (event.key === 'Escape') {
+      onOpenChange(false);
+    }
+  };
+
+  const handleSelect = (action: () => void) => () => {
+    onOpenChange(false);
+    action();
+  };
+
+  return (
+    <>
+      <button
+        type="button"
+        className={styles.trigger({ isOpen })}
+        aria-haspopup="menu"
+        aria-label={t('menu.trigger')}
+        onClick={() => onOpenChange(!isOpen)}
+      >
+        <KebabMenuIcon width={24} height={24} />
+      </button>
+      <div
+        ref={panelRef}
+        popover="auto"
+        role="menu"
+        className={styles.panel}
+        onKeyDown={handleKeyDown}
+      >
+        {onEdit && (
+          <button
+            type="button"
+            role="menuitem"
+            className={styles.menuItem}
+            onClick={handleSelect(onEdit)}
+          >
+            <EditIcon width={24} height={24} className={styles.menuItemIcon} />
+            {t('menu.edit')}
+          </button>
+        )}
+        <button
+          type="button"
+          role="menuitem"
+          className={styles.menuItem}
+          onClick={handleSelect(onDelete)}
+        >
+          <DeleteIcon width={24} height={24} className={styles.menuItemIcon} />
+          {t('menu.delete')}
+        </button>
+      </div>
+    </>
+  );
+};
+
+export default TodoItemMenu;
diff --git a/apps/web/src/pages/dashboard/dashboard-page.tsx b/apps/web/src/pages/dashboard/dashboard-page.tsx
index 94758985..7f9cb293 100644
--- a/apps/web/src/pages/dashboard/dashboard-page.tsx
+++ b/apps/web/src/pages/dashboard/dashboard-page.tsx
@@ -1,23 +1,15 @@
-import { useQuery } from '@tanstack/react-query';
-
-import { MyBookmarkedJobsSection } from '@widgets/dashboard/ui';
-import { PhaseOverviewSection } from '@widgets/dashboard/ui';
-import { PHASE_QUERY_OPTIONS } from '@entities/phase/queries';
-import { PageLoader } from '@shared/ui';
+import {
+  MyBookmarkedJobsSection,
+  PhaseOverviewSection,
+} from '@widgets/dashboard/ui';
+import { RoadmapGenerationGate } from '@widgets/roadmap-generation';
 
 const DashboardPage = () => {
-  const { data } = useQuery({ ...PHASE_QUERY_OPTIONS.GET_PHASE_LIST() });
-  const hasPhaseData = (data?.phases ?? []).length > 0;
-
-  if (!hasPhaseData) {
-    return <PageLoader text="Please wait a bit..." />;
-  }
-
   return (
-    <>
+    <RoadmapGenerationGate>
       <PhaseOverviewSection />
       <MyBookmarkedJobsSection />
-    </>
+    </RoadmapGenerationGate>
   );
 };
 
diff --git a/apps/web/src/pages/onboarding/hooks/useOnboardingStepValidation.ts b/apps/web/src/pages/onboarding/hooks/useOnboardingStepValidation.ts
new file mode 100644
index 00000000..320d2590
--- /dev/null
+++ b/apps/web/src/pages/onboarding/hooks/useOnboardingStepValidation.ts
@@ -0,0 +1,61 @@
+import { type UseFormReturn, useWatch } from 'react-hook-form';
+
+import {
+  FIELD_MAX_LENGTHS,
+  FUNNEL_STEPS,
+  getRequiredFieldsForStep,
+  hasAllRequiredFieldValues,
+  type OnboardingForm,
+} from '@entities/onboarding';
+
+interface UseOnboardingStepValidationProps {
+  form: UseFormReturn<OnboardingForm>;
+  currentStepIndex: number;
+}
+
+const useOnboardingStepValidation = ({
+  form,
+  currentStepIndex,
+}: UseOnboardingStepValidationProps) => {
+  const requiredFields = getRequiredFieldsForStep(currentStepIndex);
+
+  // 현재 단계의 필수 필드만 감시
+  const watchedRequiredFields = useWatch({
+    control: form.control,
+    name: requiredFields,
+  });
+
+  // 전체 폼 값 감시
+  const allFormValues = useWatch({
+    control: form.control,
+  }) as OnboardingForm;
+
+  // 길이 체크
+  const personalBackground = useWatch({
+    control: form.control,
+    name: 'personalBackground',
+  });
+  const isPersonalBackgroundOverLimit =
+    currentStepIndex === FUNNEL_STEPS.length - 1 &&
+    (personalBackground?.length || 0) > FIELD_MAX_LENGTHS.PERSONAL_BACKGROUND;
+
+  // 모든 필드 존재 체크
+  const hasAllRequiredValues = hasAllRequiredFieldValues(
+    { ...allFormValues, ...watchedRequiredFields } as OnboardingForm,
+    requiredFields,
+  );
+
+  const hasStepErrors = requiredFields.some((fieldName) =>
+    Boolean(form.formState.errors[fieldName]),
+  );
+
+  const isNextDisabled =
+    form.formState.isLoading ||
+    !hasAllRequiredValues ||
+    hasStepErrors ||
+    isPersonalBackgroundOverLimit;
+
+  return { requiredFields, isNextDisabled };
+};
+
+export default useOnboardingStepValidation;
diff --git a/apps/web/src/pages/onboarding/hooks/useOnboardingSubmit.ts b/apps/web/src/pages/onboarding/hooks/useOnboardingSubmit.ts
new file mode 100644
index 00000000..9d843c0e
--- /dev/null
+++ b/apps/web/src/pages/onboarding/hooks/useOnboardingSubmit.ts
@@ -0,0 +1,48 @@
+import { useEffect, useState } from 'react';
+import { useMutation, useQueryClient } from '@tanstack/react-query';
+
+import { ONBOARDING_MUTATION_OPTIONS } from '@features/onboarding';
+import { USER_QUERY_KEY } from '@entities/user/queries';
+
+interface UseOnboardingSubmitProps {
+  goToNextStep: () => void;
+}
+
+const useOnboardingSubmit = ({ goToNextStep }: UseOnboardingSubmitProps) => {
+  const queryClient = useQueryClient();
+  const [error, setError] = useState<Error | null>(null);
+
+  useEffect(() => {
+    if (error) {
+      throw error;
+    }
+  }, [error]);
+
+  // 로드맵 생성 mutation
+  const { mutate: generateRoadmap } = useMutation({
+    ...ONBOARDING_MUTATION_OPTIONS.POST_AI_ROADMAP(),
+  });
+
+  const { mutate: submitOnboarding } = useMutation({
+    ...ONBOARDING_MUTATION_OPTIONS.POST_ONBOARDING_FORM(),
+    onSuccess: async () => {
+      await queryClient.refetchQueries({
+        queryKey: USER_QUERY_KEY.USER_COMPLETION(),
+      });
+      // 온보딩 성공 후 로드맵 생성 API 호출
+      generateRoadmap();
+      goToNextStep();
+    },
+    onError: (submitError) => {
+      setError(
+        submitError instanceof Error
+          ? submitError
+          : new Error('온보딩 제출 실패'),
+      );
+    },
+  });
+
+  return { submitOnboarding };
+};
+
+export default useOnboardingSubmit;
diff --git a/apps/web/src/pages/onboarding/onboarding-page.tsx b/apps/web/src/pages/onboarding/onboarding-page.tsx
index 46728d9b..da7024cb 100644
--- a/apps/web/src/pages/onboarding/onboarding-page.tsx
+++ b/apps/web/src/pages/onboarding/onboarding-page.tsx
@@ -1,36 +1,31 @@
-import { useEffect, useState } from 'react';
-import { useMutation, useQueryClient } from '@tanstack/react-query';
-import { FormProvider, useForm, useWatch } from 'react-hook-form';
+import { FormProvider, useForm } from 'react-hook-form';
 import { useTranslation } from 'react-i18next';
 
 import {
+  CareerPreference,
   createStepData,
   EducationStep,
+  IdentityVisaVerification,
   LanguageSkillStep,
   OnboardingStepLayout,
   PersonalBackgroundStep,
 } from '@widgets/onboarding';
-import CareerPreference from '@widgets/onboarding/ui/step/career-preference/career-preference';
-import IdentityVisaVerification from '@widgets/onboarding/ui/step/identity-visaVerification/identity-visaVerification';
 import type { PostOnboardingForm } from '@features/onboarding';
-import { ONBOARDING_MUTATION_OPTIONS } from '@features/onboarding/queries';
 import {
   convertFormToRequest,
   DEFAULT_ONBOARDING_FORM,
   FUNNEL_STEPS,
-  getRequiredFieldsForStep,
-  hasAllRequiredFieldValues,
   OnboardingForm,
 } from '@entities/onboarding';
-import { USER_QUERY_KEY } from '@entities/user/queries';
 import useFunnel from '@shared/hooks/usefunnel';
 
+import useOnboardingStepValidation from './hooks/useOnboardingStepValidation';
+import useOnboardingSubmit from './hooks/useOnboardingSubmit';
+
 const OnboardingPage = () => {
   const { t } = useTranslation('onboarding');
-  const queryClient = useQueryClient();
   const { Funnel, Step, goToNextStep, goToPrevStep, currentStepIndex } =
     useFunnel(FUNNEL_STEPS, '/');
-  const [error, setError] = useState<Error | null>(null);
 
   const form = useForm<OnboardingForm>({
     mode: 'onChange',
@@ -38,50 +33,12 @@ const OnboardingPage = () => {
     defaultValues: DEFAULT_ONBOARDING_FORM,
   });
 
-  // 버튼 비활성화 로직
-  const requiredFields = getRequiredFieldsForStep(currentStepIndex);
-
-  // 현재 단계의 필수 필드만 감시
-  const watchedRequiredFields = useWatch({
-    control: form.control,
-    name: requiredFields,
-  });
-
-  // 전체 폼 값 감시
-  const allFormValues = useWatch({
-    control: form.control,
-  }) as OnboardingForm;
-
-  // 길이 체크
-  const personalBackground = useWatch({
-    control: form.control,
-    name: 'personalBackground',
+  const { requiredFields, isNextDisabled } = useOnboardingStepValidation({
+    form,
+    currentStepIndex,
   });
-  const isPersonalBackgroundOverLimit =
-    currentStepIndex === FUNNEL_STEPS.length - 1 &&
-    (personalBackground?.length || 0) > 1000;
-
-  // 모든 필드 존재 체크
-  const hasAllRequiredValues = hasAllRequiredFieldValues(
-    { ...allFormValues, ...watchedRequiredFields } as OnboardingForm,
-    requiredFields,
-  );
 
-  const hasStepErrors = requiredFields.some((fieldName) =>
-    Boolean(form.formState.errors[fieldName]),
-  );
-
-  const isNextDisabled =
-    form.formState.isLoading ||
-    !hasAllRequiredValues ||
-    hasStepErrors ||
-    isPersonalBackgroundOverLimit;
-
-  useEffect(() => {
-    if (error) {
-      throw error;
-    }
-  }, [error]);
+  const { submitOnboarding } = useOnboardingSubmit({ goToNextStep });
 
   const steps = createStepData(
     [
@@ -98,26 +55,6 @@ const OnboardingPage = () => {
     goToPrevStep();
   };
 
-  // 로드맵 생성 mutation
-  const { mutate: generateRoadmap } = useMutation({
-    ...ONBOARDING_MUTATION_OPTIONS.POST_AI_ROADMAP(),
-  });
-
-  const { mutate: submitOnboarding } = useMutation({
-    ...ONBOARDING_MUTATION_OPTIONS.POST_ONBOARDING_FORM(),
-    onSuccess: async () => {
-      await queryClient.refetchQueries({
-        queryKey: USER_QUERY_KEY.USER_COMPLETION(),
-      });
-      // 온보딩 성공 후 로드맵 생성 API 호출
-      generateRoadmap();
-      goToNextStep();
-    },
-    onError: (error) => {
-      setError(error instanceof Error ? error : new Error('온보딩 제출 실패'));
-    },
-  });
-
   const handleNext = async () => {
     const isValid = await form.trigger(requiredFields);
     if (isValid) {
diff --git a/apps/web/src/pages/roadmap/roadmap-page.tsx b/apps/web/src/pages/roadmap/roadmap-page.tsx
index a947d523..8a6d8cbf 100644
--- a/apps/web/src/pages/roadmap/roadmap-page.tsx
+++ b/apps/web/src/pages/roadmap/roadmap-page.tsx
@@ -1,21 +1,11 @@
-import { useQuery } from '@tanstack/react-query';
-
 import { RoadmapSection } from '@widgets/roadmap';
-import { PHASE_QUERY_OPTIONS } from '@entities/phase/queries';
-import { PageLoader } from '@shared/ui';
+import { RoadmapGenerationGate } from '@widgets/roadmap-generation';
 
 const RoadmapPage = () => {
-  const { data } = useQuery({ ...PHASE_QUERY_OPTIONS.GET_PHASE_LIST() });
-  const hasPhaseData = (data?.phases ?? []).length > 0;
-
-  if (!hasPhaseData) {
-    return <PageLoader text="Please wait a bit..." />;
-  }
-
   return (
-    <>
+    <RoadmapGenerationGate>
       <RoadmapSection />
-    </>
+    </RoadmapGenerationGate>
   );
 };
 
diff --git a/apps/web/src/shared/constants/TODO_PANEL_ANCHOR.ts b/apps/web/src/shared/constants/TODO_PANEL_ANCHOR.ts
new file mode 100644
index 00000000..31e22d46
--- /dev/null
+++ b/apps/web/src/shared/constants/TODO_PANEL_ANCHOR.ts
@@ -0,0 +1 @@
+export const TODO_PANEL_ANCHOR = '--todo-panel';
diff --git a/apps/web/src/shared/i18n/locales/en/onboarding.json b/apps/web/src/shared/i18n/locales/en/onboarding.json
index 2bde9822..1a614f4e 100644
--- a/apps/web/src/shared/i18n/locales/en/onboarding.json
+++ b/apps/web/src/shared/i18n/locales/en/onboarding.json
@@ -13,6 +13,24 @@
       "background": "Background"
     }
   },
+  "roadmapLoading": {
+    "title": "Building your personalized roadmap",
+    "completedTitle": "{{name}}, your roadmap is ready",
+    "steps": {
+      "profileReview": {
+        "title": "Reviewing {{name}}’s profile",
+        "description": "Checking your visa type, major, and Korean proficiency."
+      },
+      "jobMatching": {
+        "title": "Finding matching jobs and visa options",
+        "description": "Checking your visa type, major, and Korean proficiency."
+      },
+      "roadmapCreation": {
+        "title": "Building {{name}}’s personalized roadmap",
+        "description": "Almost there—we’re putting the finishing touches on your roadmap."
+      }
+    }
+  },
   "steps": {
     "identityVisaVerification": {
       "upload": {
diff --git a/apps/web/src/shared/i18n/locales/en/todo.json b/apps/web/src/shared/i18n/locales/en/todo.json
index 6124b8a0..49489577 100644
--- a/apps/web/src/shared/i18n/locales/en/todo.json
+++ b/apps/web/src/shared/i18n/locales/en/todo.json
@@ -3,5 +3,33 @@
   "tab": {
     "career": "Career",
     "visa": "Visa"
+  },
+  "dueIn_one": "Due in {{count}} day",
+  "dueIn_other": "Due in {{count}} days",
+  "dueToday": "Due today",
+  "overdue": "Overdue",
+  "completed": {
+    "label": "Completed"
+  },
+  "menu": {
+    "trigger": "Open task menu",
+    "edit": "edit",
+    "delete": "delete"
+  },
+  "form": {
+    "placeholder": "Add your text here",
+    "titleLabel": "Task title",
+    "daysLabel": "Days until due",
+    "dueIn": "Due in <days></days> days",
+    "error": {
+      "titleRequired": "Please enter a task",
+      "titleTooLong": "Title can be up to {{max}} characters",
+      "daysRequired": "Please enter a due date",
+      "daysInvalid": "Enter a number of {{min}} or more"
+    }
+  },
+  "toast": {
+    "deleted": "1 task deleted",
+    "undo": "Undo"
   }
 }
diff --git a/apps/web/src/shared/i18n/locales/ko/onboarding.json b/apps/web/src/shared/i18n/locales/ko/onboarding.json
index 565727ae..fef297a0 100644
--- a/apps/web/src/shared/i18n/locales/ko/onboarding.json
+++ b/apps/web/src/shared/i18n/locales/ko/onboarding.json
@@ -13,6 +13,24 @@
       "background": "배경 정보"
     }
   },
+  "roadmapLoading": {
+    "title": "맞춤형 로드맵을 만들고 있어요",
+    "completedTitle": "{{name}}님, 로드맵이 준비됐어요",
+    "steps": {
+      "profileReview": {
+        "title": "{{name}}님의 프로필을 검토하고 있어요",
+        "description": "비자 유형, 전공, 한국어 능력을 확인하고 있어요."
+      },
+      "jobMatching": {
+        "title": "적합한 직무와 비자 옵션을 찾고 있어요",
+        "description": "비자 유형, 전공, 한국어 능력을 확인하고 있어요."
+      },
+      "roadmapCreation": {
+        "title": "{{name}}님의 맞춤형 로드맵을 만들고 있어요",
+        "description": "거의 다 됐어요. 로드맵을 마무리하고 있어요."
+      }
+    }
+  },
   "steps": {
     "identityVisaVerification": {
       "upload": {
diff --git a/apps/web/src/shared/i18n/locales/ko/todo.json b/apps/web/src/shared/i18n/locales/ko/todo.json
index 6d78bf29..c34e6ac6 100644
--- a/apps/web/src/shared/i18n/locales/ko/todo.json
+++ b/apps/web/src/shared/i18n/locales/ko/todo.json
@@ -3,5 +3,32 @@
   "tab": {
     "career": "커리어",
     "visa": "비자"
+  },
+  "dueIn_other": "{{count}}일 남음",
+  "dueToday": "오늘 마감",
+  "overdue": "기한 지남",
+  "completed": {
+    "label": "완료됨"
+  },
+  "menu": {
+    "trigger": "할 일 메뉴 열기",
+    "edit": "수정",
+    "delete": "삭제"
+  },
+  "form": {
+    "placeholder": "할 일을 입력하세요",
+    "titleLabel": "할 일 제목",
+    "daysLabel": "마감까지 남은 일수",
+    "dueIn": "<days></days>일 후",
+    "error": {
+      "titleRequired": "할 일을 입력해주세요",
+      "titleTooLong": "제목은 {{max}}자까지 입력할 수 있어요",
+      "daysRequired": "마감일을 입력해주세요",
+      "daysInvalid": "{{min}}일 이상으로 입력해주세요"
+    }
+  },
+  "toast": {
+    "deleted": "할 일 1개를 삭제했어요",
+    "undo": "실행 취소"
   }
 }
diff --git a/apps/web/src/shared/i18n/locales/vi/onboarding.json b/apps/web/src/shared/i18n/locales/vi/onboarding.json
index 7f41ce4b..0aab3964 100644
--- a/apps/web/src/shared/i18n/locales/vi/onboarding.json
+++ b/apps/web/src/shared/i18n/locales/vi/onboarding.json
@@ -13,6 +13,24 @@
       "background": "Thông tin bổ sung"
     }
   },
+  "roadmapLoading": {
+    "title": "Đang xây dựng lộ trình cá nhân hóa của bạn",
+    "completedTitle": "{{name}}, lộ trình của bạn đã sẵn sàng",
+    "steps": {
+      "profileReview": {
+        "title": "Đang xem xét hồ sơ của {{name}}",
+        "description": "Đang kiểm tra loại thị thực, chuyên ngành và trình độ tiếng Hàn của bạn."
+      },
+      "jobMatching": {
+        "title": "Đang tìm công việc và lựa chọn thị thực phù hợp",
+        "description": "Đang kiểm tra loại thị thực, chuyên ngành và trình độ tiếng Hàn của bạn."
+      },
+      "roadmapCreation": {
+        "title": "Đang xây dựng lộ trình cá nhân hóa cho {{name}}",
+        "description": "Sắp xong rồi—chúng tôi đang hoàn thiện lộ trình của bạn."
+      }
+    }
+  },
   "steps": {
     "identityVisaVerification": {
       "upload": {
diff --git a/apps/web/src/shared/i18n/locales/vi/todo.json b/apps/web/src/shared/i18n/locales/vi/todo.json
index bb0e4ebb..5664f149 100644
--- a/apps/web/src/shared/i18n/locales/vi/todo.json
+++ b/apps/web/src/shared/i18n/locales/vi/todo.json
@@ -3,5 +3,32 @@
   "tab": {
     "career": "Nghề nghiệp",
     "visa": "Visa"
+  },
+  "dueIn_other": "Còn {{count}} ngày",
+  "dueToday": "Đến hạn hôm nay",
+  "overdue": "Quá hạn",
+  "completed": {
+    "label": "Đã hoàn thành"
+  },
+  "menu": {
+    "trigger": "Mở menu công việc",
+    "edit": "Sửa",
+    "delete": "Xóa"
+  },
+  "form": {
+    "placeholder": "Nhập công việc của bạn",
+    "titleLabel": "Tên công việc",
+    "daysLabel": "Số ngày còn lại",
+    "dueIn": "Còn <days></days> ngày",
+    "error": {
+      "titleRequired": "Vui lòng nhập công việc",
+      "titleTooLong": "Tiêu đề tối đa {{max}} ký tự",
+      "daysRequired": "Vui lòng nhập hạn chót",
+      "daysInvalid": "Nhập số từ {{min}} trở lên"
+    }
+  },
+  "toast": {
+    "deleted": "Đã xóa 1 công việc",
+    "undo": "Hoàn tác"
   }
 }
diff --git a/apps/web/src/shared/i18n/locales/zh-CN/onboarding.json b/apps/web/src/shared/i18n/locales/zh-CN/onboarding.json
index 6e3ac778..ff2f3905 100644
--- a/apps/web/src/shared/i18n/locales/zh-CN/onboarding.json
+++ b/apps/web/src/shared/i18n/locales/zh-CN/onboarding.json
@@ -13,6 +13,24 @@
       "background": "背景信息"
     }
   },
+  "roadmapLoading": {
+    "title": "正在生成你的个性化职业路线图",
+    "completedTitle": "{{name}}，你的职业路线图已准备好",
+    "steps": {
+      "profileReview": {
+        "title": "正在查看{{name}}的资料",
+        "description": "正在核对你的签证类型、专业和韩语水平。"
+      },
+      "jobMatching": {
+        "title": "正在匹配职位和签证方案",
+        "description": "正在核对你的签证类型、专业和韩语水平。"
+      },
+      "roadmapCreation": {
+        "title": "正在生成{{name}}的个性化职业路线图",
+        "description": "快完成了——我们正在完善你的职业路线图。"
+      }
+    }
+  },
   "steps": {
     "identityVisaVerification": {
       "upload": {
diff --git a/apps/web/src/shared/i18n/locales/zh-CN/todo.json b/apps/web/src/shared/i18n/locales/zh-CN/todo.json
index cdccb23f..7f32949b 100644
--- a/apps/web/src/shared/i18n/locales/zh-CN/todo.json
+++ b/apps/web/src/shared/i18n/locales/zh-CN/todo.json
@@ -3,5 +3,32 @@
   "tab": {
     "career": "职业",
     "visa": "签证"
+  },
+  "dueIn_other": "还剩 {{count}} 天",
+  "dueToday": "今天截止",
+  "overdue": "已逾期",
+  "completed": {
+    "label": "已完成"
+  },
+  "menu": {
+    "trigger": "打开任务菜单",
+    "edit": "编辑",
+    "delete": "删除"
+  },
+  "form": {
+    "placeholder": "请输入待办事项",
+    "titleLabel": "待办标题",
+    "daysLabel": "距离截止的天数",
+    "dueIn": "<days></days> 天后截止",
+    "error": {
+      "titleRequired": "请输入待办事项",
+      "titleTooLong": "标题最多 {{max}} 个字符",
+      "daysRequired": "请输入截止日期",
+      "daysInvalid": "请输入 {{min}} 以上的数字"
+    }
+  },
+  "toast": {
+    "deleted": "已删除 1 项待办",
+    "undo": "撤销"
   }
 }
diff --git a/apps/web/src/shared/types/schema.d.ts b/apps/web/src/shared/types/schema.d.ts
index d29663a1..5c81f926 100644
--- a/apps/web/src/shared/types/schema.d.ts
+++ b/apps/web/src/shared/types/schema.d.ts
@@ -48,7 +48,7 @@ export interface paths {
     patch?: never;
     trace?: never;
   };
-  '/api/v1/rag/required': {
+  '/api/v1/roadmap': {
     parameters: {
       query?: never;
       header?: never;
@@ -58,17 +58,17 @@ export interface paths {
     get?: never;
     put?: never;
     /**
-     * 필수 참고 문서 업로드 (Server Only)
-     * @description 로드맵 생성 시 반드시 참고해야 하는 문서를 업로드합니다.
+     * AI 로드맵 생성
+     * @description 사용자가 온보딩에 입력한 정보를 통해 로드맵을 생성합니다.
      */
-    post: operations['uploadRequired'];
+    post: operations['generateRoadmap'];
     delete?: never;
     options?: never;
     head?: never;
     patch?: never;
     trace?: never;
   };
-  '/api/v1/rag/policy': {
+  '/api/v1/roadmap/test': {
     parameters: {
       query?: never;
       header?: never;
@@ -78,17 +78,17 @@ export interface paths {
     get?: never;
     put?: never;
     /**
-     * 정책 PDF 문서 업로드 (Server Only)
-     * @description 정책 관련 PDF 문서를 임베딩하여 vectorDB에 저장합니다.
+     * AI 로드맵 생성 테스트용 (Server Only)
+     * @description 사용자가 온보딩에 입력한 정보를 통해 로드맵을 생성합니다.
      */
-    post: operations['uploadPolicyFile'];
+    post: operations['generateRoadmapForTest'];
     delete?: never;
     options?: never;
     head?: never;
     patch?: never;
     trace?: never;
   };
-  '/api/v1/rag/job-posting': {
+  '/api/v1/roadmap/phase-actions/{phaseActionId}/todo': {
     parameters: {
       query?: never;
       header?: never;
@@ -98,17 +98,17 @@ export interface paths {
     get?: never;
     put?: never;
     /**
-     * 채용 공고 임베딩 (Server Only)
-     * @description 채용 공고 정보를 임베딩하여 vectorDB에 저장합니다.
+     * Phase Action 기반 Todo 생성
+     * @description 특정 Phase Action을 기반으로 Todo를 생성합니다.
      */
-    post: operations['uploadJobPosting'];
+    post: operations['createPhaseActionTodo'];
     delete?: never;
     options?: never;
     head?: never;
     patch?: never;
     trace?: never;
   };
-  '/api/v1/phase-actions/{phaseActionId}/todo': {
+  '/api/v1/roadmap/generations/stream': {
     parameters: {
       query?: never;
       header?: never;
@@ -118,17 +118,41 @@ export interface paths {
     get?: never;
     put?: never;
     /**
-     * Phase Action 기반 Todo 생성
-     * @description 특정 Phase Action을 기반으로 Todo를 생성합니다.
+     * AI 로드맵 생성 진행 상태 스트림
+     * @description 로드맵을 생성하면서 단계별 진행 상태를 SSE로 전달합니다.
      */
-    post: operations['createPhaseActionTodo'];
+    post: operations['generateRoadmapStream'];
     delete?: never;
     options?: never;
     head?: never;
     patch?: never;
     trace?: never;
   };
-  '/api/v1/members/term-agreements': {
+  '/api/v1/roadmap/action-items': {
+    parameters: {
+      query?: never;
+      header?: never;
+      path?: never;
+      cookie?: never;
+    };
+    /**
+     * 액션 아이템 전체 조회
+     * @description 로그인한 회원의 활성화된 모든 액션 아이템을 조회합니다.
+     */
+    get: operations['getAllActionItems'];
+    put?: never;
+    /**
+     * 사용자 액션 아이템 생성
+     * @description 사용자가 직접 액션 아이템을 생성합니다.
+     */
+    post: operations['createActionItem'];
+    delete?: never;
+    options?: never;
+    head?: never;
+    patch?: never;
+    trace?: never;
+  };
+  '/api/v1/rag/required': {
     parameters: {
       query?: never;
       header?: never;
@@ -138,17 +162,17 @@ export interface paths {
     get?: never;
     put?: never;
     /**
-     * 약관 동의
-     * @description 약관에 동의합니다.
+     * 필수 참고 문서 업로드 (Server Only)
+     * @description 로드맵 생성 시 반드시 참고해야 하는 문서를 업로드합니다.
      */
-    post: operations['agreeTerms'];
+    post: operations['uploadRequired'];
     delete?: never;
     options?: never;
     head?: never;
     patch?: never;
     trace?: never;
   };
-  '/api/v1/members/roadmap': {
+  '/api/v1/rag/policy': {
     parameters: {
       query?: never;
       header?: never;
@@ -158,17 +182,17 @@ export interface paths {
     get?: never;
     put?: never;
     /**
-     * AI 로드맵 생성 API
-     * @description 사용자가 온보딩에 입력한 정보를 통해 로드맵을 생성합니다.
+     * 정책 PDF 문서 업로드 (Server Only)
+     * @description 정책 관련 PDF 문서를 임베딩하여 vectorDB에 저장합니다.
      */
-    post: operations['generateRoadmap'];
+    post: operations['uploadPolicyFile'];
     delete?: never;
     options?: never;
     head?: never;
     patch?: never;
     trace?: never;
   };
-  '/api/v1/members/roadmap/test': {
+  '/api/v1/rag/job-posting': {
     parameters: {
       query?: never;
       header?: never;
@@ -178,17 +202,17 @@ export interface paths {
     get?: never;
     put?: never;
     /**
-     * AI 로드맵 생성 테스트용 API (Server Only)
-     * @description 사용자가 온보딩에 입력한 정보를 통해 로드맵을 생성합니다.
+     * 채용 공고 임베딩 (Server Only)
+     * @description 채용 공고 정보를 임베딩하여 vectorDB에 저장합니다.
      */
-    post: operations['generateRoadmapForTest'];
+    post: operations['uploadJobPosting'];
     delete?: never;
     options?: never;
     head?: never;
     patch?: never;
     trace?: never;
   };
-  '/api/v1/members/onboard': {
+  '/api/v1/members/term-agreements': {
     parameters: {
       query?: never;
       header?: never;
@@ -198,10 +222,10 @@ export interface paths {
     get?: never;
     put?: never;
     /**
-     * 회원 온보딩
-     * @description PENDING 상태의 회원의 온보딩 결과를 저장합니다.
+     * 약관 동의
+     * @description 약관에 동의합니다.
      */
-    post: operations['onboardMember_1'];
+    post: operations['agreeTerms'];
     delete?: never;
     options?: never;
     head?: never;
@@ -348,7 +372,31 @@ export interface paths {
     patch?: never;
     trace?: never;
   };
-  '/api/v1/action-items/{actionItemId}/completed': {
+  '/api/v1/roadmap/action-items/{actionItemId}': {
+    parameters: {
+      query?: never;
+      header?: never;
+      path?: never;
+      cookie?: never;
+    };
+    get?: never;
+    put?: never;
+    post?: never;
+    /**
+     * 액션 아이템 삭제
+     * @description 액션 아이템을 삭제합니다.
+     */
+    delete: operations['deleteActionItem'];
+    options?: never;
+    head?: never;
+    /**
+     * 액션 아이템 수정
+     * @description 액션 아이템의 제목 또는 마감일을 수정합니다.
+     */
+    patch: operations['updateActionItem'];
+    trace?: never;
+  };
+  '/api/v1/roadmap/action-items/{actionItemId}/completed': {
     parameters: {
       query?: never;
       header?: never;
@@ -388,7 +436,7 @@ export interface paths {
     patch?: never;
     trace?: never;
   };
-  '/api/v1/phases': {
+  '/api/v1/roadmap/phases': {
     parameters: {
       query?: never;
       header?: never;
@@ -408,7 +456,7 @@ export interface paths {
     patch?: never;
     trace?: never;
   };
-  '/api/v1/phases/{phaseId}/roadmap': {
+  '/api/v1/roadmap/phases/{phaseId}': {
     parameters: {
       query?: never;
       header?: never;
@@ -428,7 +476,7 @@ export interface paths {
     patch?: never;
     trace?: never;
   };
-  '/api/v1/phases/{phaseId}/home': {
+  '/api/v1/roadmap/phases/{phaseId}/home': {
     parameters: {
       query?: never;
       header?: never;
@@ -448,7 +496,7 @@ export interface paths {
     patch?: never;
     trace?: never;
   };
-  '/api/v1/phase-actions/{phaseActionId}/guide': {
+  '/api/v1/roadmap/phase-actions/{phaseActionId}/guide': {
     parameters: {
       query?: never;
       header?: never;
@@ -646,26 +694,6 @@ export interface paths {
     patch?: never;
     trace?: never;
   };
-  '/api/v1/action-items': {
-    parameters: {
-      query?: never;
-      header?: never;
-      path?: never;
-      cookie?: never;
-    };
-    /**
-     * 액션 아이템 전체 조회
-     * @description 로그인한 회원의 활성화된 모든 액션 아이템을 조회합니다.
-     */
-    get: operations['getAllActionItems'];
-    put?: never;
-    post?: never;
-    delete?: never;
-    options?: never;
-    head?: never;
-    patch?: never;
-    trace?: never;
-  };
 }
 export type webhooks = Record<string, never>;
 export interface components {
@@ -805,28 +833,6 @@ export interface components {
       targetJobSkill?: string;
       personalBackground: string;
     };
-    JobPostingEmbeddingRequest: {
-      jobPostingIds?: number[];
-    };
-    /** @description 약관 동의 요청 */
-    MemberTermsRequest: {
-      /** @description 약관 동의 리스트 */
-      agreements: components['schemas']['TermAgreement'][];
-    };
-    /** @description 약관 동의 리스트 */
-    TermAgreement: {
-      /**
-       * Format: int64
-       * @description 약관 고유번호
-       * @example 1
-       */
-      termId: number;
-      /**
-       * @description 약관 동의여부
-       * @example true
-       */
-      agreed: boolean;
-    };
     ActionItemPlan: {
       title?: string;
       actionsType?: string;
@@ -876,246 +882,83 @@ export interface components {
       roadmap?: components['schemas']['RoadmapResponse'];
       retrieved?: components['schemas']['RetrievedChunk'][];
     };
-    MemberOnboardRequest: {
-      name: string;
-      /** Format: date */
-      birthDate: string;
-      /** @enum {string} */
-      country:
-        | 'Afghanistan'
-        | 'Albania'
-        | 'Algeria'
-        | 'Andorra'
-        | 'Angola'
-        | 'Antigua and Barbuda'
-        | 'Argentina'
-        | 'Armenia'
-        | 'Australia'
-        | 'Austria'
-        | 'Azerbaijan'
-        | 'Bahamas'
-        | 'Bahrain'
-        | 'Bangladesh'
-        | 'Barbados'
-        | 'Belarus'
-        | 'Belgium'
-        | 'Belize'
-        | 'Benin'
-        | 'Bhutan'
-        | 'Bolivia'
-        | 'Bosnia and Herzegovina'
-        | 'Botswana'
-        | 'Brazil'
-        | 'Brunei'
-        | 'Bulgaria'
-        | 'Burkina Faso'
-        | 'Burundi'
-        | 'Cabo Verde'
-        | 'Cambodia'
-        | 'Cameroon'
-        | 'Canada'
-        | 'Central African Republic'
-        | 'Chad'
-        | 'Chile'
-        | 'China'
-        | 'Colombia'
-        | 'Comoros'
-        | 'Congo'
-        | 'Democratic Republic of the Congo'
-        | 'Costa Rica'
-        | "Cote d'Ivoire"
-        | 'Croatia'
-        | 'Cuba'
-        | 'Cyprus'
-        | 'Czechia'
-        | 'Denmark'
-        | 'Djibouti'
-        | 'Dominica'
-        | 'Dominican Republic'
-        | 'Ecuador'
-        | 'Egypt'
-        | 'El Salvador'
-        | 'Equatorial Guinea'
-        | 'Eritrea'
-        | 'Estonia'
-        | 'Eswatini'
-        | 'Ethiopia'
-        | 'Fiji'
-        | 'Finland'
-        | 'France'
-        | 'Gabon'
-        | 'Gambia'
-        | 'Georgia'
-        | 'Germany'
-        | 'Ghana'
-        | 'Greece'
-        | 'Grenada'
-        | 'Guatemala'
-        | 'Guinea'
-        | 'Guinea-Bissau'
-        | 'Guyana'
-        | 'Haiti'
-        | 'Honduras'
-        | 'Hungary'
-        | 'Iceland'
-        | 'India'
-        | 'Indonesia'
-        | 'Iran'
-        | 'Iraq'
-        | 'Ireland'
-        | 'Israel'
-        | 'Italy'
-        | 'Jamaica'
-        | 'Japan'
-        | 'Jordan'
-        | 'Kazakhstan'
-        | 'Kenya'
-        | 'Kiribati'
-        | 'Kuwait'
-        | 'Kyrgyzstan'
-        | 'Laos'
-        | 'Latvia'
-        | 'Lebanon'
-        | 'Lesotho'
-        | 'Liberia'
-        | 'Libya'
-        | 'Liechtenstein'
-        | 'Lithuania'
-        | 'Luxembourg'
-        | 'Madagascar'
-        | 'Malawi'
-        | 'Malaysia'
-        | 'Maldives'
-        | 'Mali'
-        | 'Malta'
-        | 'Marshall Islands'
-        | 'Mauritania'
-        | 'Mauritius'
-        | 'Mexico'
-        | 'Micronesia'
-        | 'Moldova'
-        | 'Monaco'
-        | 'Mongolia'
-        | 'Montenegro'
-        | 'Morocco'
-        | 'Mozambique'
-        | 'Myanmar'
-        | 'Namibia'
-        | 'Nauru'
-        | 'Nepal'
-        | 'Netherlands'
-        | 'New Zealand'
-        | 'Nicaragua'
-        | 'Niger'
-        | 'Nigeria'
-        | 'North Macedonia'
-        | 'Norway'
-        | 'Oman'
-        | 'Pakistan'
-        | 'Palau'
-        | 'Panama'
-        | 'Papua New Guinea'
-        | 'Paraguay'
-        | 'Peru'
-        | 'Philippines'
-        | 'Poland'
-        | 'Portugal'
-        | 'Qatar'
-        | 'Romania'
-        | 'Russia'
-        | 'Rwanda'
-        | 'Saint Kitts and Nevis'
-        | 'Saint Lucia'
-        | 'Saint Vincent and the Grenadines'
-        | 'Samoa'
-        | 'San Marino'
-        | 'Sao Tome and Principe'
-        | 'Saudi Arabia'
-        | 'Senegal'
-        | 'Serbia'
-        | 'Seychelles'
-        | 'Sierra Leone'
-        | 'Singapore'
-        | 'Slovakia'
-        | 'Slovenia'
-        | 'Solomon Islands'
-        | 'Somalia'
-        | 'South Africa'
-        | 'South Korea'
-        | 'South Sudan'
-        | 'Spain'
-        | 'Sri Lanka'
-        | 'Sudan'
-        | 'Suriname'
-        | 'Sweden'
-        | 'Switzerland'
-        | 'Syria'
-        | 'Taiwan'
-        | 'Tajikistan'
-        | 'Tanzania'
-        | 'Thailand'
-        | 'Timor-Leste'
-        | 'Togo'
-        | 'Tonga'
-        | 'Trinidad and Tobago'
-        | 'Tunisia'
-        | 'Turkey'
-        | 'Turkmenistan'
-        | 'Tuvalu'
-        | 'Uganda'
-        | 'Ukraine'
-        | 'United Arab Emirates'
-        | 'United Kingdom'
-        | 'United States'
-        | 'Uruguay'
-        | 'Uzbekistan'
-        | 'Vanuatu'
-        | 'Vatican City'
-        | 'Venezuela'
-        | 'Vietnam'
-        | 'Yemen'
-        | 'Zambia'
-        | 'Zimbabwe';
-      /** @enum {string} */
-      languageLevel:
-        | 'LEVEL_1'
-        | 'LEVEL_2'
-        | 'LEVEL_3'
-        | 'LEVEL_4'
-        | 'LEVEL_5'
-        | 'NOT_TAKEN';
-      /** @enum {string} */
-      degree:
-        | 'DOMESTIC_ASSOCIATE'
-        | 'DOMESTIC_BACHELORS'
-        | 'DOMESTIC_MASTERS'
-        | 'DOMESTIC_DOCTORATE'
-        | 'OVERSEAS_BACHELORS'
-        | 'OVERSEAS_MASTERS'
-        | 'OVERSEAS_DOCTORATE';
-      /** @enum {string} */
-      visaType: 'D2' | 'D10' | 'E7';
+    SseEmitter: {
+      /** Format: int64 */
+      timeout?: number;
+    };
+    ActionItemCreateRequest: {
+      /**
+       * @description 액션 아이템 타입
+       * @example CAREER
+       */
+      type: string;
+      /**
+       * @description 액션 아이템 제목
+       * @example 이력서 작성하기
+       */
+      title: string;
       /**
        * Format: date
-       * @description 예상 졸업일, D2 비자인 경우만
-       * @example 2025-08-31
+       * @description 액션 아이템 마감일
+       * @example 2026-09-01
        */
-      expectedGraduationDate?: string;
-      /** Format: date */
-      visaStartDate: string;
-      /** Format: date */
-      visaExpiredAt: string;
+      deadline: string;
+    };
+    /** @description Action Item 응답(Todo) */
+    ActionItemResponse: {
+      /**
+       * Format: int64
+       * @description Action Item id
+       * @example 1
+       */
+      actionItemId?: number;
+      /**
+       * @description Action Item 제목
+       * @example Prepare Resume
+       */
+      title?: string;
+      /**
+       * Format: date
+       * @description Action Item 마감일
+       * @example 2025-10-15
+       */
+      deadline?: string;
+      /**
+       * @description Action Item 완료 여부
+       * @example false
+       */
+      completed?: boolean;
+    };
+    BaseResponseActionItemResponse: {
       /**
        * Format: int32
-       * @description 비자 점수, D10 비자인 경우만
-       * @example 50
+       * @example 200
        */
-      visaPoint?: number;
-      primaryMajor: string;
-      secondaryMajor?: string;
-      targetJob: string;
-      targetJobSkill?: string;
-      personalBackground: string;
+      code?: number;
+      message?: string;
+      data?: components['schemas']['ActionItemResponse'];
+    };
+    JobPostingEmbeddingRequest: {
+      jobPostingIds?: number[];
+    };
+    /** @description 약관 동의 요청 */
+    MemberTermsRequest: {
+      /** @description 약관 동의 리스트 */
+      agreements: components['schemas']['TermAgreement'][];
+    };
+    /** @description 약관 동의 리스트 */
+    TermAgreement: {
+      /**
+       * Format: int64
+       * @description 약관 고유번호
+       * @example 1
+       */
+      termId: number;
+      /**
+       * @description 약관 동의여부
+       * @example true
+       */
+      agreed: boolean;
     };
     BaseResponseOcrVisaResponse: {
       /**
@@ -1252,6 +1095,21 @@ export interface components {
       accessToken?: string;
       onboardingRequired?: boolean;
     };
+    ActionItemUpdateRequest: {
+      /**
+       * @description 수정할 액션 아이템 제목
+       * @example 이력서 초안 작성하기
+       */
+      title?: string;
+      /**
+       * Format: date
+       * @description 수정할 액션 아이템 마감일
+       * @example 2026-09-10
+       */
+      deadline?: string;
+      updateFieldPresent?: boolean;
+      titleValid?: boolean;
+    };
     BaseResponseTermsResponse: {
       /**
        * Format: int32
@@ -1483,6 +1341,19 @@ export interface components {
       message?: string;
       data?: components['schemas']['AiGuideResponse'];
     };
+    ActionItemListResponse: {
+      visaActionItems?: components['schemas']['ActionItemResponse'][];
+      careerActionItems?: components['schemas']['ActionItemResponse'][];
+    };
+    BaseResponseActionItemListResponse: {
+      /**
+       * Format: int32
+       * @example 200
+       */
+      code?: number;
+      message?: string;
+      data?: components['schemas']['ActionItemListResponse'];
+    };
     BaseResponseOnboardUniversitiesResponse: {
       /**
        * Format: int32
@@ -1802,44 +1673,6 @@ export interface components {
        */
       address?: string;
     };
-    ActionItemListResponse: {
-      visaActionItems?: components['schemas']['ActionItemResponse'][];
-      careerActionItems?: components['schemas']['ActionItemResponse'][];
-    };
-    /** @description Action Item 응답(Todo) */
-    ActionItemResponse: {
-      /**
-       * Format: int64
-       * @description Action Item id
-       * @example 1
-       */
-      actionItemId?: number;
-      /**
-       * @description Action Item 제목
-       * @example Prepare Resume
-       */
-      title?: string;
-      /**
-       * Format: date
-       * @description Action Item 마감일
-       * @example 2025-10-15
-       */
-      deadline?: string;
-      /**
-       * @description Action Item 완료 여부
-       * @example false
-       */
-      completed?: boolean;
-    };
-    BaseResponseActionItemListResponse: {
-      /**
-       * Format: int32
-       * @example 200
-       */
-      code?: number;
-      message?: string;
-      data?: components['schemas']['ActionItemListResponse'];
-    };
   };
   responses: never;
   parameters: never;
@@ -2070,11 +1903,9 @@ export interface operations {
       };
     };
   };
-  uploadRequired: {
+  generateRoadmap: {
     parameters: {
-      query: {
-        requiredCategory: 'VISA' | 'CAREER';
-      };
+      query?: never;
       header?: {
         /** @description Preferred language code (e.g., en, ko, zh-CN, vi) */
         'X-Preferred-Language'?: string;
@@ -2082,17 +1913,7 @@ export interface operations {
       path?: never;
       cookie?: never;
     };
-    requestBody?: {
-      content: {
-        'multipart/form-data': {
-          /**
-           * Format: binary
-           * @description 업로드할 PDF 파일
-           */
-          file: string;
-        };
-      };
-    };
+    requestBody?: never;
     responses: {
       /** @description OK */
       200: {
@@ -2103,36 +1924,57 @@ export interface operations {
           '*/*': components['schemas']['BaseResponseVoid'];
         };
       };
-      /** @description Bad Request */
       400: {
         headers: {
           [name: string]: unknown;
         };
         content: {
-          '*/*': components['schemas']['BaseErrorResponse'];
+          'application/json': unknown;
+        };
+      };
+      401: {
+        headers: {
+          [name: string]: unknown;
+        };
+        content: {
+          'application/json': unknown;
+        };
+      };
+      403: {
+        headers: {
+          [name: string]: unknown;
+        };
+        content: {
+          'application/json': unknown;
+        };
+      };
+      404: {
+        headers: {
+          [name: string]: unknown;
+        };
+        content: {
+          'application/json': unknown;
         };
       };
-      /** @description Method Not Allowed */
       405: {
         headers: {
           [name: string]: unknown;
         };
         content: {
-          '*/*': components['schemas']['BaseErrorResponse'];
+          'application/json': unknown;
         };
       };
-      /** @description Internal Server Error */
       500: {
         headers: {
           [name: string]: unknown;
         };
         content: {
-          '*/*': components['schemas']['BaseErrorResponse'];
+          'application/json': unknown;
         };
       };
     };
   };
-  uploadPolicyFile: {
+  generateRoadmapForTest: {
     parameters: {
       query?: never;
       header?: {
@@ -2142,14 +1984,80 @@ export interface operations {
       path?: never;
       cookie?: never;
     };
-    requestBody?: {
-      content: {
-        'multipart/form-data': {
-          /** @description 업로드할 PDF 파일 */
-          files: string[];
+    requestBody?: never;
+    responses: {
+      /** @description OK */
+      200: {
+        headers: {
+          [name: string]: unknown;
+        };
+        content: {
+          '*/*': components['schemas']['BaseResponseRoadmapTestResponse'];
+        };
+      };
+      400: {
+        headers: {
+          [name: string]: unknown;
+        };
+        content: {
+          'application/json': unknown;
+        };
+      };
+      401: {
+        headers: {
+          [name: string]: unknown;
+        };
+        content: {
+          'application/json': unknown;
+        };
+      };
+      403: {
+        headers: {
+          [name: string]: unknown;
+        };
+        content: {
+          'application/json': unknown;
+        };
+      };
+      404: {
+        headers: {
+          [name: string]: unknown;
+        };
+        content: {
+          'application/json': unknown;
+        };
+      };
+      405: {
+        headers: {
+          [name: string]: unknown;
+        };
+        content: {
+          'application/json': unknown;
+        };
+      };
+      500: {
+        headers: {
+          [name: string]: unknown;
+        };
+        content: {
+          'application/json': unknown;
         };
       };
     };
+  };
+  createPhaseActionTodo: {
+    parameters: {
+      query?: never;
+      header?: {
+        /** @description Preferred language code (e.g., en, ko, zh-CN, vi) */
+        'X-Preferred-Language'?: string;
+      };
+      path: {
+        phaseActionId: number;
+      };
+      cookie?: never;
+    };
+    requestBody?: never;
     responses: {
       /** @description OK */
       200: {
@@ -2210,7 +2118,7 @@ export interface operations {
       };
     };
   };
-  uploadJobPosting: {
+  generateRoadmapStream: {
     parameters: {
       query?: never;
       header?: {
@@ -2220,11 +2128,7 @@ export interface operations {
       path?: never;
       cookie?: never;
     };
-    requestBody: {
-      content: {
-        'application/json': components['schemas']['JobPostingEmbeddingRequest'];
-      };
-    };
+    requestBody?: never;
     responses: {
       /** @description OK */
       200: {
@@ -2232,7 +2136,7 @@ export interface operations {
           [name: string]: unknown;
         };
         content: {
-          '*/*': components['schemas']['BaseResponseVoid'];
+          'text/event-stream': components['schemas']['SseEmitter'];
         };
       };
       400: {
@@ -2285,16 +2189,14 @@ export interface operations {
       };
     };
   };
-  createPhaseActionTodo: {
+  getAllActionItems: {
     parameters: {
       query?: never;
       header?: {
         /** @description Preferred language code (e.g., en, ko, zh-CN, vi) */
         'X-Preferred-Language'?: string;
       };
-      path: {
-        phaseActionId: number;
-      };
+      path?: never;
       cookie?: never;
     };
     requestBody?: never;
@@ -2305,7 +2207,7 @@ export interface operations {
           [name: string]: unknown;
         };
         content: {
-          '*/*': components['schemas']['BaseResponseVoid'];
+          '*/*': components['schemas']['BaseResponseActionItemListResponse'];
         };
       };
       400: {
@@ -2329,38 +2231,94 @@ export interface operations {
           [name: string]: unknown;
         };
         content: {
-          'application/json': unknown;
+          'application/json': unknown;
+        };
+      };
+      404: {
+        headers: {
+          [name: string]: unknown;
+        };
+        content: {
+          'application/json': unknown;
+        };
+      };
+      405: {
+        headers: {
+          [name: string]: unknown;
+        };
+        content: {
+          'application/json': unknown;
+        };
+      };
+      500: {
+        headers: {
+          [name: string]: unknown;
+        };
+        content: {
+          'application/json': unknown;
+        };
+      };
+    };
+  };
+  createActionItem: {
+    parameters: {
+      query?: never;
+      header?: {
+        /** @description Preferred language code (e.g., en, ko, zh-CN, vi) */
+        'X-Preferred-Language'?: string;
+      };
+      path?: never;
+      cookie?: never;
+    };
+    requestBody: {
+      content: {
+        'application/json': components['schemas']['ActionItemCreateRequest'];
+      };
+    };
+    responses: {
+      /** @description OK */
+      200: {
+        headers: {
+          [name: string]: unknown;
+        };
+        content: {
+          '*/*': components['schemas']['BaseResponseActionItemResponse'];
         };
       };
-      404: {
+      /** @description Bad Request */
+      400: {
         headers: {
           [name: string]: unknown;
         };
         content: {
-          'application/json': unknown;
+          '*/*': components['schemas']['BaseErrorResponse'];
         };
       };
+      /** @description Method Not Allowed */
       405: {
         headers: {
           [name: string]: unknown;
         };
         content: {
-          'application/json': unknown;
+          '*/*': components['schemas']['BaseErrorResponse'];
         };
       };
+      /** @description Internal Server Error */
       500: {
         headers: {
           [name: string]: unknown;
         };
         content: {
-          'application/json': unknown;
+          '*/*': components['schemas']['BaseErrorResponse'];
         };
       };
     };
   };
-  agreeTerms: {
+  uploadRequired: {
     parameters: {
-      query?: never;
+      query: {
+        requiredCategory: 'VISA' | 'CAREER';
+      };
       header?: {
         /** @description Preferred language code (e.g., en, ko, zh-CN, vi) */
         'X-Preferred-Language'?: string;
@@ -2368,9 +2326,15 @@ export interface operations {
       path?: never;
       cookie?: never;
     };
-    requestBody: {
+    requestBody?: {
       content: {
-        'application/json': components['schemas']['MemberTermsRequest'];
+        'multipart/form-data': {
+          /**
+           * Format: binary
+           * @description 업로드할 PDF 파일
+           */
+          file: string;
+        };
       };
     };
     responses: {
@@ -2383,57 +2347,36 @@ export interface operations {
           '*/*': components['schemas']['BaseResponseVoid'];
         };
       };
+      /** @description Bad Request */
       400: {
         headers: {
           [name: string]: unknown;
         };
         content: {
-          'application/json': unknown;
-        };
-      };
-      401: {
-        headers: {
-          [name: string]: unknown;
-        };
-        content: {
-          'application/json': unknown;
-        };
-      };
-      403: {
-        headers: {
-          [name: string]: unknown;
-        };
-        content: {
-          'application/json': unknown;
-        };
-      };
-      404: {
-        headers: {
-          [name: string]: unknown;
-        };
-        content: {
-          'application/json': unknown;
+          '*/*': components['schemas']['BaseErrorResponse'];
         };
       };
+      /** @description Method Not Allowed */
       405: {
         headers: {
           [name: string]: unknown;
         };
         content: {
-          'application/json': unknown;
+          '*/*': components['schemas']['BaseErrorResponse'];
         };
       };
+      /** @description Internal Server Error */
       500: {
         headers: {
           [name: string]: unknown;
         };
         content: {
-          'application/json': unknown;
+          '*/*': components['schemas']['BaseErrorResponse'];
         };
       };
     };
   };
-  generateRoadmap: {
+  uploadPolicyFile: {
     parameters: {
       query?: never;
       header?: {
@@ -2443,7 +2386,14 @@ export interface operations {
       path?: never;
       cookie?: never;
     };
-    requestBody?: never;
+    requestBody?: {
+      content: {
+        'multipart/form-data': {
+          /** @description 업로드할 PDF 파일 */
+          files: string[];
+        };
+      };
+    };
     responses: {
       /** @description OK */
       200: {
@@ -2504,7 +2454,7 @@ export interface operations {
       };
     };
   };
-  generateRoadmapForTest: {
+  uploadJobPosting: {
     parameters: {
       query?: never;
       header?: {
@@ -2514,7 +2464,11 @@ export interface operations {
       path?: never;
       cookie?: never;
     };
-    requestBody?: never;
+    requestBody: {
+      content: {
+        'application/json': components['schemas']['JobPostingEmbeddingRequest'];
+      };
+    };
     responses: {
       /** @description OK */
       200: {
@@ -2522,7 +2476,7 @@ export interface operations {
           [name: string]: unknown;
         };
         content: {
-          '*/*': components['schemas']['BaseResponseRoadmapTestResponse'];
+          '*/*': components['schemas']['BaseResponseVoid'];
         };
       };
       400: {
@@ -2575,7 +2529,7 @@ export interface operations {
       };
     };
   };
-  onboardMember_1: {
+  agreeTerms: {
     parameters: {
       query?: never;
       header?: {
@@ -2587,7 +2541,7 @@ export interface operations {
     };
     requestBody: {
       content: {
-        'application/json': components['schemas']['MemberOnboardRequest'];
+        'application/json': components['schemas']['MemberTermsRequest'];
       };
     };
     responses: {
@@ -3141,6 +3095,112 @@ export interface operations {
       };
     };
   };
+  deleteActionItem: {
+    parameters: {
+      query?: never;
+      header?: {
+        /** @description Preferred language code (e.g., en, ko, zh-CN, vi) */
+        'X-Preferred-Language'?: string;
+      };
+      path: {
+        actionItemId: number;
+      };
+      cookie?: never;
+    };
+    requestBody?: never;
+    responses: {
+      /** @description OK */
+      200: {
+        headers: {
+          [name: string]: unknown;
+        };
+        content?: never;
+      };
+      /** @description Bad Request */
+      400: {
+        headers: {
+          [name: string]: unknown;
+        };
+        content: {
+          '*/*': components['schemas']['BaseErrorResponse'];
+        };
+      };
+      /** @description Method Not Allowed */
+      405: {
+        headers: {
+          [name: string]: unknown;
+        };
+        content: {
+          '*/*': components['schemas']['BaseErrorResponse'];
+        };
+      };
+      /** @description Internal Server Error */
+      500: {
+        headers: {
+          [name: string]: unknown;
+        };
+        content: {
+          '*/*': components['schemas']['BaseErrorResponse'];
+        };
+      };
+    };
+  };
+  updateActionItem: {
+    parameters: {
+      query?: never;
+      header?: {
+        /** @description Preferred language code (e.g., en, ko, zh-CN, vi) */
+        'X-Preferred-Language'?: string;
+      };
+      path: {
+        actionItemId: number;
+      };
+      cookie?: never;
+    };
+    requestBody: {
+      content: {
+        'application/json': components['schemas']['ActionItemUpdateRequest'];
+      };
+    };
+    responses: {
+      /** @description OK */
+      200: {
+        headers: {
+          [name: string]: unknown;
+        };
+        content: {
+          '*/*': components['schemas']['BaseResponseActionItemResponse'];
+        };
+      };
+      /** @description Bad Request */
+      400: {
+        headers: {
+          [name: string]: unknown;
+        };
+        content: {
+          '*/*': components['schemas']['BaseErrorResponse'];
+        };
+      };
+      /** @description Method Not Allowed */
+      405: {
+        headers: {
+          [name: string]: unknown;
+        };
+        content: {
+          '*/*': components['schemas']['BaseErrorResponse'];
+        };
+      };
+      /** @description Internal Server Error */
+      500: {
+        headers: {
+          [name: string]: unknown;
+        };
+        content: {
+          '*/*': components['schemas']['BaseErrorResponse'];
+        };
+      };
+    };
+  };
   toggleActionItemCompletion: {
     parameters: {
       query?: never;
@@ -4140,75 +4200,4 @@ export interface operations {
       };
     };
   };
-  getAllActionItems: {
-    parameters: {
-      query?: never;
-      header?: {
-        /** @description Preferred language code (e.g., en, ko, zh-CN, vi) */
-        'X-Preferred-Language'?: string;
-      };
-      path?: never;
-      cookie?: never;
-    };
-    requestBody?: never;
-    responses: {
-      /** @description OK */
-      200: {
-        headers: {
-          [name: string]: unknown;
-        };
-        content: {
-          '*/*': components['schemas']['BaseResponseActionItemListResponse'];
-        };
-      };
-      400: {
-        headers: {
-          [name: string]: unknown;
-        };
-        content: {
-          'application/json': unknown;
-        };
-      };
-      401: {
-        headers: {
-          [name: string]: unknown;
-        };
-        content: {
-          'application/json': unknown;
-        };
-      };
-      403: {
-        headers: {
-          [name: string]: unknown;
-        };
-        content: {
-          'application/json': unknown;
-        };
-      };
-      404: {
-        headers: {
-          [name: string]: unknown;
-        };
-        content: {
-          'application/json': unknown;
-        };
-      };
-      405: {
-        headers: {
-          [name: string]: unknown;
-        };
-        content: {
-          'application/json': unknown;
-        };
-      };
-      500: {
-        headers: {
-          [name: string]: unknown;
-        };
-        content: {
-          'application/json': unknown;
-        };
-      };
-    };
-  };
 }
diff --git a/apps/web/src/widgets/layout/ui/todo-panel/hooks/use-due-label.ts b/apps/web/src/widgets/layout/ui/todo-panel/hooks/use-due-label.ts
new file mode 100644
index 00000000..465a742c
--- /dev/null
+++ b/apps/web/src/widgets/layout/ui/todo-panel/hooks/use-due-label.ts
@@ -0,0 +1,25 @@
+import { useTranslation } from 'react-i18next';
+
+import { getDueInDays } from '@entities/todo';
+
+export const useDueLabel = () => {
+  const { t } = useTranslation('todo');
+
+  return (deadline: string) => {
+    const dueInDays = getDueInDays(deadline);
+
+    if (dueInDays === null) {
+      return '';
+    }
+
+    if (dueInDays === 0) {
+      return t('dueToday');
+    }
+
+    if (dueInDays < 0) {
+      return t('overdue');
+    }
+
+    return t('dueIn', { count: dueInDays });
+  };
+};
diff --git a/apps/web/src/widgets/layout/ui/todo-panel/hooks/use-sorted-todos.ts b/apps/web/src/widgets/layout/ui/todo-panel/hooks/use-sorted-todos.ts
deleted file mode 100644
index d1587359..00000000
--- a/apps/web/src/widgets/layout/ui/todo-panel/hooks/use-sorted-todos.ts
+++ /dev/null
@@ -1,31 +0,0 @@
-import type { components } from '@shared/types/schema';
-
-type Todo = components['schemas']['ActionItemResponse'];
-
-type TodosByTab = {
-  visa: Todo[];
-  career: Todo[];
-};
-
-const sortByCheckedAndDueDate = (list: Todo[]) => {
-  const toTime = (value: string) => new Date(value).getTime();
-
-  return [...list].sort((firstTodo, secondTodo) => {
-    const checkedDiff =
-      Number(firstTodo.completed) - Number(secondTodo.completed);
-    if (checkedDiff !== 0) {
-      return checkedDiff;
-    }
-
-    return toTime(firstTodo.deadline ?? '') - toTime(secondTodo.deadline ?? '');
-  });
-};
-
-export const useSortedTodos = (initialTodos: TodosByTab) => {
-  const todos = {
-    visa: sortByCheckedAndDueDate(initialTodos.visa),
-    career: sortByCheckedAndDueDate(initialTodos.career),
-  };
-
-  return { todos };
-};
diff --git a/apps/web/src/widgets/layout/ui/todo-panel/hooks/use-todo-panel-mode.ts b/apps/web/src/widgets/layout/ui/todo-panel/hooks/use-todo-panel-mode.ts
new file mode 100644
index 00000000..10e73424
--- /dev/null
+++ b/apps/web/src/widgets/layout/ui/todo-panel/hooks/use-todo-panel-mode.ts
@@ -0,0 +1,72 @@
+import { useState } from 'react';
+
+export type TodoPanelMode =
+  | { type: 'idle' }
+  | { type: 'creating' }
+  | { type: 'editing'; actionItemId: number }
+  | { type: 'menuOpen'; actionItemId: number };
+
+const IDLE_MODE: TodoPanelMode = { type: 'idle' };
+
+export const useTodoPanelMode = () => {
+  const [mode, setMode] = useState<TodoPanelMode>(IDLE_MODE);
+  const [isCompletedOpen, setIsCompletedOpen] = useState(false);
+  const [pendingDeleteIds, setPendingDeleteIds] = useState<ReadonlySet<number>>(
+    new Set(),
+  );
+
+  const exitMode = () => {
+    setMode(IDLE_MODE);
+  };
+
+  const enterCreateMode = () => {
+    setMode({ type: 'creating' });
+  };
+
+  const enterEditMode = (actionItemId: number) => {
+    setMode({ type: 'editing', actionItemId });
+  };
+
+  const setMenuOpen = (actionItemId: number, isOpen: boolean) => {
+    setMode((current) => {
+      if (isOpen) {
+        return { type: 'menuOpen', actionItemId };
+      }
+
+      const isThisMenuOpen =
+        current.type === 'menuOpen' && current.actionItemId === actionItemId;
+
+      return isThisMenuOpen ? IDLE_MODE : current;
+    });
+  };
+
+  const toggleCompletedOpen = () => {
+    setIsCompletedOpen((isOpen) => !isOpen);
+  };
+
+  const hidePendingDelete = (actionItemId: number) => {
+    setPendingDeleteIds((current) => new Set(current).add(actionItemId));
+  };
+
+  const revealPendingDelete = (actionItemId: number) => {
+    setPendingDeleteIds((current) => {
+      const next = new Set(current);
+      next.delete(actionItemId);
+
+      return next;
+    });
+  };
+
+  return {
+    mode,
+    exitMode,
+    enterCreateMode,
+    enterEditMode,
+    setMenuOpen,
+    isCompletedOpen,
+    toggleCompletedOpen,
+    pendingDeleteIds,
+    hidePendingDelete,
+    revealPendingDelete,
+  };
+};
diff --git a/apps/web/src/widgets/layout/ui/todo-panel/todo-panel.css.ts b/apps/web/src/widgets/layout/ui/todo-panel/todo-panel.css.ts
index 63ae65bc..0d4a07ca 100644
--- a/apps/web/src/widgets/layout/ui/todo-panel/todo-panel.css.ts
+++ b/apps/web/src/widgets/layout/ui/todo-panel/todo-panel.css.ts
@@ -1,7 +1,11 @@
 import { themeVars, typography } from '@kds/ui/styles';
 import { style } from '@vanilla-extract/css';
 
+import { TODO_PANEL_ANCHOR } from '@shared/constants/TODO_PANEL_ANCHOR';
+
 export const container = style({
+  anchorName: TODO_PANEL_ANCHOR,
+
   display: 'flex',
   flexDirection: 'column',
   flexShrink: 0,
@@ -31,6 +35,6 @@ export const tabList = style({
 export const tabPanel = style({
   display: 'flex',
   flexDirection: 'column',
+  gap: '1.6rem',
   marginTop: '1.6rem',
-  gap: '0.4rem',
 });
diff --git a/apps/web/src/widgets/layout/ui/todo-panel/todo-panel.tsx b/apps/web/src/widgets/layout/ui/todo-panel/todo-panel.tsx
index 4c03c0e6..b43dcdaa 100644
--- a/apps/web/src/widgets/layout/ui/todo-panel/todo-panel.tsx
+++ b/apps/web/src/widgets/layout/ui/todo-panel/todo-panel.tsx
@@ -1,108 +1,100 @@
-import { useRef } from 'react';
 import { Button, Tab, useTabContext } from '@kds/ui';
-import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
+import { useQuery } from '@tanstack/react-query';
 import { useTranslation } from 'react-i18next';
-import { useNavigate } from 'react-router';
-
-import { TODO_MUTATION_OPTIONS } from '@features/todo/queries';
-import { PHASE_QUERY_KEY } from '@entities/phase/queries';
-import { TODO_QUERY_KEY, TODO_QUERY_OPTIONS } from '@entities/todo';
-import TodoItem from '@entities/todo/ui/todo-item/todo-item';
-import { ROUTE_PATH } from '@shared/router/path';
-import type { components } from '@shared/types/schema';
+
+import {
+  type TodoActionsType,
+  type TodoDraft,
+  type TodoItemHandlers,
+  TodoItemList,
+  useCreateTodo,
+  useDeleteTodo,
+  useToggleTodo,
+  useUpdateTodo,
+} from '@features/todo';
+import {
+  type ActionItem,
+  TODO_QUERY_OPTIONS,
+  TodoCompletedSection,
+} from '@entities/todo';
 import { EmptyLayout } from '@shared/ui';
 
-import { useSortedTodos } from './hooks/use-sorted-todos';
-import { formatDueInDays } from './utils/format-due-in-days';
+import { useDueLabel } from './hooks/use-due-label';
+import { useTodoPanelMode } from './hooks/use-todo-panel-mode';
+import { getSortedTodos } from './utils/get-sorted-todos';
 
 import * as styles from './todo-panel.css';
 
 const TABS = [
-  { id: 1, value: 'visa', label: 'tab.visa' },
-  { id: 2, value: 'career', label: 'tab.career' },
-] as const;
-
-type ActionItemListResponse = components['schemas']['ActionItemListResponse'];
-
-const toggleCompleted = (
-  items: ActionItemListResponse['visaActionItems'],
-  actionItemId: number,
-) =>
-  items?.map((item) =>
-    item.actionItemId === actionItemId
-      ? { ...item, completed: !item.completed }
-      : item,
-  );
+  { id: 1, value: 'visa', label: 'tab.visa', actionsType: 'VISA' },
+  { id: 2, value: 'career', label: 'tab.career', actionsType: 'CAREER' },
+] as const satisfies readonly {
+  id: number;
+  value: string;
+  label: string;
+  actionsType: TodoActionsType;
+}[];
 
 const TodoPanel = () => {
-  const navigate = useNavigate();
   const { t } = useTranslation('todo');
+  const getDueLabel = useDueLabel();
   const { data } = useQuery({ ...TODO_QUERY_OPTIONS.GET_TODO_LIST() });
-  const { todos } = useSortedTodos({
+  const todos = getSortedTodos({
     visa: data?.visaActionItems ?? [],
     career: data?.careerActionItems ?? [],
   });
 
-  const queryClient = useQueryClient();
-  const pendingActionItemIds = useRef(new Set<number>());
-  const { mutate } = useMutation({
-    ...TODO_MUTATION_OPTIONS.PATCH_TODO(),
-    onMutate: async (actionItemId) => {
-      pendingActionItemIds.current.add(actionItemId);
-      const queryKey = TODO_QUERY_KEY.TODO_LIST();
-
-      await queryClient.cancelQueries({ queryKey });
-
-      const prev = queryClient.getQueryData<ActionItemListResponse>(queryKey);
-
-      queryClient.setQueryData<ActionItemListResponse>(queryKey, (current) => {
-        if (!current) {
-          return current;
-        }
-
-        return {
-          ...current,
-          visaActionItems: toggleCompleted(
-            current.visaActionItems,
-            actionItemId,
-          ),
-          careerActionItems: toggleCompleted(
-            current.careerActionItems,
-            actionItemId,
-          ),
-        };
-      });
-
-      return { prev };
-    },
-    onError: (_error, _variables, context) => {
-      const queryKey = TODO_QUERY_KEY.TODO_LIST();
-
-      if (context?.prev) {
-        queryClient.setQueryData(queryKey, context.prev);
-      }
-    },
-    onSuccess: () => {
-      queryClient.invalidateQueries({
-        queryKey: PHASE_QUERY_KEY.PHASE_ITEM_ROADMAP_ALL(),
-      });
-    },
-    onSettled: (_data, _error, actionItemId) => {
-      pendingActionItemIds.current.delete(actionItemId);
-      queryClient.invalidateQueries({ queryKey: TODO_QUERY_KEY.TODO_LIST() });
-    },
+  const {
+    mode,
+    exitMode,
+    enterCreateMode,
+    enterEditMode,
+    setMenuOpen,
+    isCompletedOpen,
+    toggleCompletedOpen,
+    pendingDeleteIds,
+    hidePendingDelete,
+    revealPendingDelete,
+  } = useTodoPanelMode();
+
+  const { toggleTodo } = useToggleTodo();
+  const { createTodo, isPending } = useCreateTodo();
+  const { updateTodo } = useUpdateTodo();
+  const { requestDelete } = useDeleteTodo({
+    onHide: hidePendingDelete,
+    onReveal: revealPendingDelete,
+    renderUndoAction: (onUndo) => (
+      <Button preset="text_inverse" type="button" onClick={onUndo}>
+        {t('toast.undo')}
+      </Button>
+    ),
   });
 
-  const handleAddTodo = () => {
-    navigate(ROUTE_PATH.ROADMAP);
+  const isVisible = (item: ActionItem) =>
+    !pendingDeleteIds.has(Number(item.actionItemId));
+
+  const isCreating = mode.type === 'creating';
+  const editingItemId = mode.type === 'editing' ? mode.actionItemId : null;
+  const menuOpenItemId = mode.type === 'menuOpen' ? mode.actionItemId : null;
+
+  const todoItemHandlers: TodoItemHandlers = {
+    onToggle: toggleTodo,
+    onEditStart: enterEditMode,
+    onEditSubmit: (actionItemId, draft) => {
+      updateTodo(actionItemId, draft);
+      exitMode();
+    },
+    onDelete: requestDelete,
+    onMenuOpenChange: setMenuOpen,
+    onCancelEdit: exitMode,
   };
 
-  const handleTodoToggle = (actionItemId: number) => {
-    const id = Number(actionItemId);
-    if (pendingActionItemIds.current.has(id)) {
-      return;
-    }
-    mutate(id);
+  const handleCreateSubmit = (
+    draft: TodoDraft,
+    actionsType: TodoActionsType,
+  ) => {
+    createTodo(draft, actionsType);
+    exitMode();
   };
 
   return (
@@ -110,29 +102,50 @@ const TodoPanel = () => {
       <h3 className={styles.title}>{t('TodoTitle')}</h3>
       <Tab.Container initialValue="visa">
         <Tab.List className={styles.tabList}>
-          <TodoTabButtons />
+          <TodoTabButtons onTabChange={exitMode} />
         </Tab.List>
-        {TABS.map(({ id, value }) => {
-          const currentTodos = todos[value];
-          const isEmpty = currentTodos.length === 0;
+        {TABS.map(({ id, value, actionsType }) => {
+          const incompleteTodos = todos[value].incomplete.filter(isVisible);
+          const completedTodos = todos[value].completed.filter(isVisible);
+          const isEmpty =
+            incompleteTodos.length === 0 && completedTodos.length === 0;
+          const showEmptyLayout = isEmpty && !isCreating && !isPending;
 
           return (
             <Tab.Panel key={id} tab={value} className={styles.tabPanel}>
-              {isEmpty ? (
-                <EmptyLayout variant="card" onAction={handleAddTodo} />
+              {showEmptyLayout ? (
+                <EmptyLayout variant="card" onAction={enterCreateMode} />
               ) : (
-                currentTodos.map(
-                  ({ actionItemId, title, completed, deadline }) => (
-                    <TodoItem
-                      key={actionItemId}
-                      title={title ?? ''}
-                      description={formatDueInDays(deadline ?? '')}
-                      size="sm"
-                      isChecked={completed ?? false}
-                      onToggle={() => handleTodoToggle(Number(actionItemId))}
-                    />
-                  ),
-                )
+                <>
+                  <TodoItemList
+                    items={incompleteTodos}
+                    editingItemId={editingItemId}
+                    menuOpenItemId={menuOpenItemId}
+                    getDescription={getDueLabel}
+                    handlers={todoItemHandlers}
+                    onCreateSubmit={
+                      isCreating
+                        ? (draft) => handleCreateSubmit(draft, actionsType)
+                        : undefined
+                    }
+                  />
+                  {completedTodos.length > 0 && (
+                    <TodoCompletedSection
+                      count={completedTodos.length}
+                      label={t('completed.label')}
+                      isOpen={isCompletedOpen}
+                      onToggleOpen={toggleCompletedOpen}
+                    >
+                      <TodoItemList
+                        items={completedTodos}
+                        editingItemId={editingItemId}
+                        menuOpenItemId={menuOpenItemId}
+                        getDescription={getDueLabel}
+                        handlers={todoItemHandlers}
+                      />
+                    </TodoCompletedSection>
+                  )}
+                </>
               )}
             </Tab.Panel>
           );
@@ -142,17 +155,30 @@ const TodoPanel = () => {
   );
 };
 
-const TodoTabButtons = () => {
+interface TodoTabButtonsProps {
+  onTabChange: () => void;
+}
+
+const TodoTabButtons = ({ onTabChange }: TodoTabButtonsProps) => {
   const { t } = useTranslation('todo');
   const { selectedTab, setSelectedTab } = useTabContext();
 
+  const handleTabClick = (value: string) => {
+    if (value === selectedTab) {
+      return;
+    }
+
+    setSelectedTab(value);
+    onTabChange();
+  };
+
   return (
     <>
       {TABS.map(({ id, value, label }) => (
         <Button
           key={id}
           preset={selectedTab === value ? 'mini_primary' : 'mini_outlined'}
-          onClick={() => setSelectedTab(value)}
+          onClick={() => handleTabClick(value)}
         >
           {t(label)}
         </Button>
@@ -160,4 +186,5 @@ const TodoTabButtons = () => {
     </>
   );
 };
+
 export default TodoPanel;
diff --git a/apps/web/src/widgets/layout/ui/todo-panel/utils/format-due-in-days.ts b/apps/web/src/widgets/layout/ui/todo-panel/utils/format-due-in-days.ts
deleted file mode 100644
index e3202017..00000000
--- a/apps/web/src/widgets/layout/ui/todo-panel/utils/format-due-in-days.ts
+++ /dev/null
@@ -1,23 +0,0 @@
-export const formatDueInDays = (dueDate: string) => {
-  const due = new Date(dueDate);
-  if (Number.isNaN(due.getTime())) {
-    return '';
-  }
-
-  const now = new Date();
-  const startOfToday = new Date(
-    now.getFullYear(),
-    now.getMonth(),
-    now.getDate(),
-  );
-  const startOfDue = new Date(due.getFullYear(), due.getMonth(), due.getDate());
-  const diffDays = Math.ceil(
-    (startOfDue.getTime() - startOfToday.getTime()) / (1000 * 60 * 60 * 24),
-  );
-
-  if (diffDays < 0) {
-    return 'Overdue';
-  }
-
-  return `Due in ${diffDays} days`;
-};
diff --git a/apps/web/src/widgets/layout/ui/todo-panel/utils/get-sorted-todos.ts b/apps/web/src/widgets/layout/ui/todo-panel/utils/get-sorted-todos.ts
new file mode 100644
index 00000000..9f424f54
--- /dev/null
+++ b/apps/web/src/widgets/layout/ui/todo-panel/utils/get-sorted-todos.ts
@@ -0,0 +1,41 @@
+import type { ActionItem } from '@entities/todo';
+
+type TodosByTab = {
+  visa: ActionItem[];
+  career: ActionItem[];
+};
+
+type SortedTodos = {
+  incomplete: ActionItem[];
+  completed: ActionItem[];
+};
+
+const toTime = (deadline: string | undefined): number | null => {
+  if (!deadline) {
+    return null;
+  }
+
+  const time = new Date(deadline).getTime();
+
+  if (Number.isNaN(time)) {
+    return null;
+  }
+
+  return time;
+};
+
+const sortByDueDate = (list: ActionItem[]) =>
+  [...list].sort(
+    (firstTodo, secondTodo) =>
+      (toTime(firstTodo.deadline) ?? 0) - (toTime(secondTodo.deadline) ?? 0),
+  );
+
+const splitByCompleted = (list: ActionItem[]): SortedTodos => ({
+  incomplete: sortByDueDate(list.filter((todo) => !todo.completed)),
+  completed: sortByDueDate(list.filter((todo) => todo.completed)),
+});
+
+export const getSortedTodos = (todosByTab: TodosByTab) => ({
+  visa: splitByCompleted(todosByTab.visa),
+  career: splitByCompleted(todosByTab.career),
+});
diff --git a/apps/web/src/widgets/onboarding/index.ts b/apps/web/src/widgets/onboarding/index.ts
index 15bcc19e..a0114ff3 100644
--- a/apps/web/src/widgets/onboarding/index.ts
+++ b/apps/web/src/widgets/onboarding/index.ts
@@ -15,7 +15,9 @@ export { default as OnboardingStep } from './ui/onboarding-step/onboarding-step'
 export { default as OnboardingStepHeader } from './ui/onboarding-step-header/onboarding-step-header';
 export { default as OnboardingStepLayout } from './ui/onboarding-step-layout/onboarding-step-layout';
 export { default as OnboardingStepTitle } from './ui/onboarding-step-title/onboarding-step-title';
+export { default as CareerPreference } from './ui/step/career-preference/career-preference';
 export { default as EducationStep } from './ui/step/education/education';
+export { default as IdentityVisaVerification } from './ui/step/identity-visaVerification/identity-visaVerification';
 export { default as LanguageSkillStep } from './ui/step/language-skills/language-skills';
 export { default as PersonalBackgroundStep } from './ui/step/personal-backgorund/personal-background';
 export { default as PersonalInformationStep } from './ui/step/personal-information/personal-information';
diff --git a/apps/web/src/widgets/roadmap-generation/index.ts b/apps/web/src/widgets/roadmap-generation/index.ts
new file mode 100644
index 00000000..f051a5bc
--- /dev/null
+++ b/apps/web/src/widgets/roadmap-generation/index.ts
@@ -0,0 +1 @@
+export { default as RoadmapGenerationGate } from './ui/roadmap-generation-gate/roadmap-generation-gate';
diff --git a/apps/web/src/widgets/roadmap-generation/ui/roadmap-generation-gate/roadmap-generation-gate.css.ts b/apps/web/src/widgets/roadmap-generation/ui/roadmap-generation-gate/roadmap-generation-gate.css.ts
new file mode 100644
index 00000000..9b71c3cf
--- /dev/null
+++ b/apps/web/src/widgets/roadmap-generation/ui/roadmap-generation-gate/roadmap-generation-gate.css.ts
@@ -0,0 +1,9 @@
+import { style } from '@vanilla-extract/css';
+
+export const loadingCardContainer = style({
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'center',
+  width: '100%',
+  height: '100%',
+});
diff --git a/apps/web/src/widgets/roadmap-generation/ui/roadmap-generation-gate/roadmap-generation-gate.tsx b/apps/web/src/widgets/roadmap-generation/ui/roadmap-generation-gate/roadmap-generation-gate.tsx
new file mode 100644
index 00000000..aa52362f
--- /dev/null
+++ b/apps/web/src/widgets/roadmap-generation/ui/roadmap-generation-gate/roadmap-generation-gate.tsx
@@ -0,0 +1,71 @@
+import { type ReactNode, useEffect, useState } from 'react';
+import { useMutationState, useQuery } from '@tanstack/react-query';
+
+import {
+  ROADMAP_GENERATION_MUTATION_KEY,
+  RoadmapLoadingCard,
+} from '@features/onboarding';
+import { PHASE_QUERY_OPTIONS } from '@entities/phase/queries';
+import { USER_QUERY_OPTIONS } from '@entities/user/queries';
+import { PageLoader } from '@shared/ui';
+
+import * as styles from './roadmap-generation-gate.css';
+
+interface RoadmapGenerationGateProps {
+  children: ReactNode;
+}
+
+const RoadmapGenerationGate = ({ children }: RoadmapGenerationGateProps) => {
+  const generationStates = useMutationState({
+    filters: { mutationKey: ROADMAP_GENERATION_MUTATION_KEY },
+    select: (mutation) => mutation.state,
+  });
+  const generationState = generationStates[generationStates.length - 1];
+  const shouldFetchPhaseList =
+    !generationState || generationState.status === 'success';
+  const { data: phaseData } = useQuery({
+    ...PHASE_QUERY_OPTIONS.GET_PHASE_LIST(),
+    enabled: shouldFetchPhaseList,
+    throwOnError: true,
+  });
+  const { data: userData } = useQuery({
+    ...USER_QUERY_OPTIONS.GET_USER_INFO(),
+  });
+  const hasPhaseData = (phaseData?.phases ?? []).length > 0;
+  const [isLoadingCardVisible, setIsLoadingCardVisible] = useState(false);
+  const shouldStartLoadingCard = !hasPhaseData && Boolean(generationState);
+
+  useEffect(
+    function showRoadmapLoadingCard() {
+      if (shouldStartLoadingCard) {
+        setIsLoadingCardVisible(true);
+      }
+    },
+    [shouldStartLoadingCard],
+  );
+
+  if (generationState?.status === 'error') {
+    throw generationState.error;
+  }
+
+  if ((isLoadingCardVisible || shouldStartLoadingCard) && generationState) {
+    return (
+      <div className={styles.loadingCardContainer}>
+        <RoadmapLoadingCard
+          name={userData?.name ?? ''}
+          isRoadmapReady={hasPhaseData}
+          startedAt={generationState.submittedAt}
+          onExitComplete={() => setIsLoadingCardVisible(false)}
+        />
+      </div>
+    );
+  }
+
+  if (!hasPhaseData) {
+    return <PageLoader text="Please wait a bit..." />;
+  }
+
+  return <>{children}</>;
+};
+
+export default RoadmapGenerationGate;
diff --git a/apps/web/tsconfig.json b/apps/web/tsconfig.json
index 672b91f1..8f706a34 100644
--- a/apps/web/tsconfig.json
+++ b/apps/web/tsconfig.json
@@ -1,15 +1,14 @@
 {
   "extends": "@kareer/typescript-config/react.json",
   "compilerOptions": {
-    "baseUrl": ".",
     "types": ["vite/client", "vite-plugin-svgr/client"],
     "paths": {
-      "@app/*": ["src/app/*"],
-      "@pages/*": ["src/pages/*"],
-      "@widgets/*": ["src/widgets/*"],
-      "@features/*": ["src/features/*"],
-      "@entities/*": ["src/entities/*"],
-      "@shared/*": ["src/shared/*"]
+      "@app/*": ["./src/app/*"],
+      "@pages/*": ["./src/pages/*"],
+      "@widgets/*": ["./src/widgets/*"],
+      "@features/*": ["./src/features/*"],
+      "@entities/*": ["./src/entities/*"],
+      "@shared/*": ["./src/shared/*"]
     }
   },
   "include": ["src", "vite.config.ts", "src/app/types/global.d.ts"],
diff --git a/package.json b/package.json
index 2fa18d0d..92e1a37e 100644
--- a/package.json
+++ b/package.json
@@ -22,6 +22,6 @@
   "prettier": "@kareer/prettier-config",
   "packageManager": "pnpm@9.15.0",
   "engines": {
-    "node": ">=18"
+    "node": ">=22.12.0"
   }
 }
diff --git a/packages/icons/package.json b/packages/icons/package.json
index b64a6aa3..c0690245 100644
--- a/packages/icons/package.json
+++ b/packages/icons/package.json
@@ -12,6 +12,7 @@
       "types": "./src/index.d.ts",
       "default": "./src/svg/index.ts"
     },
+    "./assets/logo.svg": "./src/svg/ic_logo.svg",
     "./*": "./src/components/*.tsx"
   },
   "scripts": {
diff --git a/packages/icons/src/svg/ic_delete.svg b/packages/icons/src/svg/ic_delete.svg
new file mode 100644
index 00000000..04881b99
--- /dev/null
+++ b/packages/icons/src/svg/ic_delete.svg
@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M14.5 3.0625C16.1569 3.0625 17.5 4.40565 17.5 6.0625V7.5625H19.875C20.4273 7.5625 20.875 8.01022 20.875 8.5625C20.875 9.11478 20.4273 9.5625 19.875 9.5625H19.75V18.9375C19.75 20.5944 18.4069 21.9375 16.75 21.9375H7.25C5.59315 21.9375 4.25 20.5944 4.25 18.9375V9.5625H4.125C3.57272 9.5625 3.125 9.11478 3.125 8.5625C3.125 8.01022 3.57272 7.5625 4.125 7.5625H6.5V6.0625C6.5 4.40565 7.84315 3.0625 9.5 3.0625H14.5ZM6.25 9.5625V18.9375C6.25 19.4898 6.69772 19.9375 7.25 19.9375H16.75C17.3023 19.9375 17.75 19.4898 17.75 18.9375V9.5625H6.25ZM9.75 11C10.3023 11 10.75 11.4477 10.75 12V16.5C10.75 17.0523 10.3023 17.5 9.75 17.5C9.19772 17.5 8.75 17.0523 8.75 16.5V12C8.75 11.4477 9.19772 11 9.75 11ZM14.25 11C14.8023 11 15.25 11.4477 15.25 12V16.5C15.25 17.0523 14.8023 17.5 14.25 17.5C13.6977 17.5 13.25 17.0523 13.25 16.5V12C13.25 11.4477 13.6977 11 14.25 11ZM9.5 5.0625C8.94772 5.0625 8.5 5.51022 8.5 6.0625V7.5625H15.5V6.0625C15.5 5.51022 15.0523 5.0625 14.5 5.0625H9.5Z" fill="#8C8F9A"/>
+</svg>
diff --git a/packages/icons/src/svg/ic_kebab_menu.svg b/packages/icons/src/svg/ic_kebab_menu.svg
new file mode 100644
index 00000000..c7fdc460
--- /dev/null
+++ b/packages/icons/src/svg/ic_kebab_menu.svg
@@ -0,0 +1,5 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<circle cx="11.5" cy="5" r="2" fill="#8C8F9A"/>
+<circle cx="11.5" cy="12" r="2" fill="#8C8F9A"/>
+<circle cx="11.5" cy="19" r="2" fill="#8C8F9A"/>
+</svg>
diff --git a/packages/icons/src/svg/index.ts b/packages/icons/src/svg/index.ts
index 3cbc4350..1edb5fcf 100644
--- a/packages/icons/src/svg/index.ts
+++ b/packages/icons/src/svg/index.ts
@@ -15,6 +15,7 @@ export { default as CheckDoneIcon } from './ic_check-done.svg?react';
 export { default as CuriousIcon } from './ic_curious.svg?react';
 export { default as CurrentIcon } from './ic_current.svg?react';
 export { default as CustomMapIcon } from './ic_custom-map.svg?react';
+export { default as DeleteIcon } from './ic_delete.svg?react';
 export { default as EditIcon } from './ic_edit.svg?react';
 export { default as FitAnalysisIcon } from './ic_fit-analysis.svg?react';
 export { default as GlobalIcon } from './ic_global.svg?react';
@@ -22,6 +23,7 @@ export { default as GoogleIcon } from './ic_google.svg?react';
 export { default as HomeIcon } from './ic_home.svg?react';
 export { default as InfoIcon } from './ic_info.svg?react';
 export { default as InfoCircleIcon } from './ic_info_circle.svg?react';
+export { default as KebabMenuIcon } from './ic_kebab_menu.svg?react';
 export { default as LogoIcon } from './ic_logo.svg?react';
 export { default as LogoTypoIcon } from './ic_logo_typo.svg?react';
 export { default as LogoutIcon } from './ic_logout.svg?react';
diff --git a/packages/kds-ui/src/components/button/button.css.ts b/packages/kds-ui/src/components/button/button.css.ts
index 082c5b20..3fd7f3be 100644
--- a/packages/kds-ui/src/components/button/button.css.ts
+++ b/packages/kds-ui/src/components/button/button.css.ts
@@ -97,9 +97,28 @@ export const button = recipe({
           backgroundColor: themeVars.color.grayscale.gray300,
         },
       },
+      inverse: {
+        color: themeVars.color.primary[400],
+        backgroundColor: 'transparent',
+        ':hover': {
+          color: themeVars.color.primary[300],
+        },
+        ':active': {
+          color: themeVars.color.primary[200],
+        },
+      },
     },
   },
   compoundVariants: [
+    {
+      variants: {
+        variant: 'text',
+        color: 'inverse',
+      },
+      style: {
+        padding: 0,
+      },
+    },
     {
       variants: {
         variant: 'mini',
diff --git a/packages/kds-ui/src/components/button/button.tsx b/packages/kds-ui/src/components/button/button.tsx
index e1067c02..c2b5a46c 100644
--- a/packages/kds-ui/src/components/button/button.tsx
+++ b/packages/kds-ui/src/components/button/button.tsx
@@ -19,7 +19,8 @@ type ButtonPreset =
   | 'large_primary'
   | 'large_secondary'
   | 'large_outlined'
-  | 'text_ghost';
+  | 'text_ghost'
+  | 'text_inverse';
 
 interface ButtonProps extends Omit<ComponentProps<'button'>, 'className'> {
   preset: ButtonPreset;
diff --git a/packages/kds-ui/src/components/index.ts b/packages/kds-ui/src/components/index.ts
index 447ad195..7d48719f 100644
--- a/packages/kds-ui/src/components/index.ts
+++ b/packages/kds-ui/src/components/index.ts
@@ -20,3 +20,4 @@ export { default as Toast } from './toast/toast';
 export type { ToastContextValue } from './toast/toast-context';
 export { ToastContext } from './toast/toast-context';
 export { default as ToastProvider } from './toast/toast-provider';
+export type { ToastOptions } from './toast/types/toast-type';
diff --git a/packages/kds-ui/src/components/toast/toast-context.ts b/packages/kds-ui/src/components/toast/toast-context.ts
index 51287e90..5ece6d68 100644
--- a/packages/kds-ui/src/components/toast/toast-context.ts
+++ b/packages/kds-ui/src/components/toast/toast-context.ts
@@ -3,7 +3,7 @@ import { createContext } from 'react';
 import { ToastOptions } from './types/toast-type';
 
 export interface ToastContextValue {
-  showToast: ({ message, icon }: ToastOptions) => string;
+  showToast: (options: ToastOptions) => string;
   hideToast: (id: string) => void;
 }
 
diff --git a/packages/kds-ui/src/components/toast/toast-provider.tsx b/packages/kds-ui/src/components/toast/toast-provider.tsx
index 86fbe7fc..123198b0 100644
--- a/packages/kds-ui/src/components/toast/toast-provider.tsx
+++ b/packages/kds-ui/src/components/toast/toast-provider.tsx
@@ -1,4 +1,5 @@
 import { ReactNode, useCallback, useEffect, useRef, useState } from 'react';
+import { assignInlineVars } from '@vanilla-extract/dynamic';
 
 import Toast from './toast';
 import { ToastContext } from './toast-context';
@@ -8,7 +9,6 @@ import * as styles from './toast.css';
 
 const TOAST_DURATION = 4000;
 const TOAST_EXIT_DURATION = 400;
-const MAX_VISIBLE_TOASTS = 3;
 
 interface ToastItem extends ToastOptions {
   id: string;
@@ -16,16 +16,18 @@ interface ToastItem extends ToastOptions {
 }
 
 interface ToastProviderProps {
+  anchor?: string;
   children: ReactNode;
 }
 
 const createToastId = () =>
   `${Date.now()}-${Math.random().toString(36).slice(2, 11)}`;
 
-const ToastProvider = ({ children }: ToastProviderProps) => {
+const ToastProvider = ({ anchor, children }: ToastProviderProps) => {
   const [toasts, setToasts] = useState<ToastItem[]>([]);
   const dismissTimeoutsRef = useRef<Map<string, number>>(new Map());
   const removeTimeoutsRef = useRef<Map<string, number>>(new Map());
+  const autoDismissRef = useRef<Map<string, () => void>>(new Map());
 
   const clearToastTimers = useCallback((id: string) => {
     const dismissTimeout = dismissTimeoutsRef.current.get(id);
@@ -42,6 +44,13 @@ const ToastProvider = ({ children }: ToastProviderProps) => {
     }
   }, []);
 
+  const fireAutoDismiss = useCallback((id: string) => {
+    const onAutoDismiss = autoDismissRef.current.get(id);
+
+    autoDismissRef.current.delete(id);
+    onAutoDismiss?.();
+  }, []);
+
   const removeToast = useCallback(
     (id: string) => {
       clearToastTimers(id);
@@ -50,7 +59,7 @@ const ToastProvider = ({ children }: ToastProviderProps) => {
     [clearToastTimers],
   );
 
-  const hideToast = useCallback(
+  const startLeaving = useCallback(
     (id: string) => {
       setToasts((prevToasts) =>
         prevToasts.map((toast) =>
@@ -67,38 +76,43 @@ const ToastProvider = ({ children }: ToastProviderProps) => {
     [removeToast],
   );
 
+  const hideToast = useCallback(
+    (id: string) => {
+      autoDismissRef.current.delete(id);
+      startLeaving(id);
+    },
+    [startLeaving],
+  );
+
   const showToast = useCallback(
-    ({ message, icon }: ToastOptions) => {
+    (options: ToastOptions) => {
       const id = createToastId();
 
-      setToasts((prevToasts) => {
-        const nextToasts = [
-          ...prevToasts,
-          { id, message, icon, isLeaving: false },
-        ];
-        const exceededToasts = nextToasts.slice(0, -MAX_VISIBLE_TOASTS);
+      if (options.onAutoDismiss) {
+        autoDismissRef.current.set(id, options.onAutoDismiss);
+      }
 
-        exceededToasts.forEach((toast) => {
-          clearToastTimers(toast.id);
-        });
-
-        return nextToasts.slice(-MAX_VISIBLE_TOASTS);
-      });
+      setToasts((prevToasts) => [
+        ...prevToasts,
+        { ...options, id, isLeaving: false },
+      ]);
 
       const dismissTimeout = window.setTimeout(() => {
-        hideToast(id);
+        fireAutoDismiss(id);
+        startLeaving(id);
       }, TOAST_DURATION);
 
       dismissTimeoutsRef.current.set(id, dismissTimeout);
 
       return id;
     },
-    [clearToastTimers, hideToast],
+    [fireAutoDismiss, startLeaving],
   );
 
   useEffect(() => {
     const dismissTimeouts = dismissTimeoutsRef.current;
     const removeTimeouts = removeTimeoutsRef.current;
+    const autoDismisses = autoDismissRef.current;
 
     return () => {
       dismissTimeouts.forEach((timeout) => {
@@ -107,16 +121,23 @@ const ToastProvider = ({ children }: ToastProviderProps) => {
       removeTimeouts.forEach((timeout) => {
         window.clearTimeout(timeout);
       });
+
+      autoDismisses.clear();
     };
   }, []);
 
   return (
     <ToastContext.Provider value={{ showToast, hideToast }}>
       {children}
-      <div className={styles.viewport}>
-        {toasts.map(({ id, message, icon, isLeaving }) => (
+      <div
+        className={styles.viewport({ anchored: Boolean(anchor) })}
+        style={
+          anchor ? assignInlineVars({ [styles.anchor]: anchor }) : undefined
+        }
+      >
+        {toasts.map(({ id, message, icon, action, isLeaving }) => (
           <div key={id} className={styles.toastItem({ leaving: isLeaving })}>
-            <Toast message={message} icon={icon} />
+            <Toast message={message} icon={icon} action={action} />
           </div>
         ))}
       </div>
diff --git a/packages/kds-ui/src/components/toast/toast.css.ts b/packages/kds-ui/src/components/toast/toast.css.ts
index 4fd1c0e7..8f987f7f 100644
--- a/packages/kds-ui/src/components/toast/toast.css.ts
+++ b/packages/kds-ui/src/components/toast/toast.css.ts
@@ -1,15 +1,14 @@
-import { keyframes, style } from '@vanilla-extract/css';
+import { createVar, keyframes, style } from '@vanilla-extract/css';
 import { recipe } from '@vanilla-extract/recipes';
 
 import { themeVars, typography, zIndex } from '../../styles';
+
 export const container = style({
   display: 'inline-flex',
   alignItems: 'center',
-  gap: '0.4rem',
-  height: '4.4rem',
-  padding: '1rem',
-  backgroundColor: themeVars.color.grayscale.gray600,
-
+  padding: '0.8rem 1.6rem',
+  gap: '1.6rem',
+  backgroundColor: themeVars.color.grayscale.gray900,
   boxShadow: '0 0 12px 0 rgba(0, 0, 0, 0.25)',
   borderRadius: '10px',
 });
@@ -20,7 +19,42 @@ export const message = style({
   color: themeVars.color.grayscale.white,
 });
 
-const slideIn = keyframes({
+export const divider = style({
+  flexShrink: 0,
+  width: '1px',
+  alignSelf: 'stretch',
+  backgroundColor: themeVars.color.grayscale.gray700,
+});
+
+export const action = style({
+  display: 'inline-flex',
+  alignItems: 'center',
+  flexShrink: 0,
+});
+
+const slideDownIn = keyframes({
+  from: {
+    opacity: 0,
+    transform: 'translateY(-0.8rem)',
+  },
+  to: {
+    opacity: 1,
+    transform: 'translateY(0)',
+  },
+});
+
+const slideDownOut = keyframes({
+  from: {
+    opacity: 1,
+    transform: 'translateY(0)',
+  },
+  to: {
+    opacity: 0,
+    transform: 'translateY(-0.8rem)',
+  },
+});
+
+const slideUpIn = keyframes({
   from: {
     opacity: 0,
     transform: 'translateY(0.8rem)',
@@ -31,7 +65,7 @@ const slideIn = keyframes({
   },
 });
 
-const fadeOut = keyframes({
+const slideUpOut = keyframes({
   from: {
     opacity: 1,
     transform: 'translateY(0)',
@@ -42,25 +76,58 @@ const fadeOut = keyframes({
   },
 });
 
-export const viewport = style({
-  position: 'fixed',
-  left: '50%',
-  bottom: '3.2rem',
-  display: 'flex',
-  flexDirection: 'column',
-  gap: '0.4rem',
-  transform: 'translateX(-50%)',
-  zIndex: zIndex.toast,
+export const anchor = createVar();
+
+const anchoredViewport = style({
+  positionAnchor: anchor,
+  top: 'calc(anchor(top) + 1.5rem)',
+  right: 'calc(anchor(right) - 1.3rem)',
+  alignItems: 'flex-end',
+});
+
+export const viewport = recipe({
+  base: {
+    position: 'fixed',
+    display: 'flex',
+    flexDirection: 'column',
+    gap: '0.4rem',
+    zIndex: zIndex.toast,
+  },
+  variants: {
+    anchored: {
+      true: anchoredViewport,
+      false: {
+        left: '50%',
+        bottom: '3.2rem',
+        alignItems: 'center',
+        transform: 'translateX(-50%)',
+      },
+    },
+  },
+  defaultVariants: {
+    anchored: false,
+  },
 });
 
 export const toastItem = recipe({
   base: {
-    animation: `${slideIn} 200ms ease-out`,
+    animation: `${slideUpIn} 200ms ease-out`,
+    selectors: {
+      [`${anchoredViewport} &`]: {
+        animation: `${slideDownIn} 200ms ease-out`,
+      },
+    },
   },
   variants: {
     leaving: {
       true: {
-        animation: `${fadeOut} 200ms ease-in forwards`,
+        animation: `${slideUpOut} 200ms ease-in forwards`,
+        pointerEvents: 'none',
+        selectors: {
+          [`${anchoredViewport} &`]: {
+            animation: `${slideDownOut} 200ms ease-in forwards`,
+          },
+        },
       },
       false: {},
     },
diff --git a/packages/kds-ui/src/components/toast/toast.tsx b/packages/kds-ui/src/components/toast/toast.tsx
index ea98714a..fcb1081a 100644
--- a/packages/kds-ui/src/components/toast/toast.tsx
+++ b/packages/kds-ui/src/components/toast/toast.tsx
@@ -2,11 +2,17 @@ import { ToastOptions } from './types/toast-type';
 
 import * as styles from './toast.css';
 
-const Toast = ({ message, icon }: ToastOptions) => {
+const Toast = ({ message, icon, action }: ToastOptions) => {
   return (
     <div className={styles.container}>
       {icon}
       <p className={styles.message}>{message}</p>
+      {action && (
+        <>
+          <span className={styles.divider} aria-hidden />
+          <div className={styles.action}>{action}</div>
+        </>
+      )}
     </div>
   );
 };
diff --git a/packages/kds-ui/src/components/toast/types/toast-type.ts b/packages/kds-ui/src/components/toast/types/toast-type.ts
index da4853ca..92055550 100644
--- a/packages/kds-ui/src/components/toast/types/toast-type.ts
+++ b/packages/kds-ui/src/components/toast/types/toast-type.ts
@@ -3,4 +3,6 @@ import { ReactNode } from 'react';
 export interface ToastOptions {
   message: string;
   icon?: ReactNode;
+  action?: ReactNode;
+  onAutoDismiss?: () => void;
 }
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 71bd75f6..a705b3ca 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -54,7 +54,7 @@ importers:
     devDependencies:
       '@commitlint/cli':
         specifier: ^20.3.0
-        version: 20.3.0(@types/node@22.15.3)(typescript@5.9.2)
+        version: 20.3.0(@types/node@24.13.3)(typescript@5.9.2)
       '@commitlint/config-conventional':
         specifier: ^20.3.0
         version: 20.3.0
@@ -77,6 +77,91 @@ importers:
         specifier: 5.9.2
         version: 5.9.2
 
+  apps/desktop:
+    devDependencies:
+      '@electron/packager':
+        specifier: ^20.0.4
+        version: 20.0.4
+      '@kareer/typescript-config':
+        specifier: workspace:*
+        version: link:../../packages/configs/typescript
+      '@kds/icons':
+        specifier: workspace:*
+        version: link:../../packages/icons
+      '@types/node':
+        specifier: 'catalog:'
+        version: 22.15.3
+      electron:
+        specifier: ^43.2.0
+        version: 43.2.0
+      typescript:
+        specifier: 'catalog:'
+        version: 5.9.2
+
+  apps/landing:
+    dependencies:
+      '@kds/icons':
+        specifier: workspace:*
+        version: link:../../packages/icons
+      '@kds/ui':
+        specifier: workspace:*
+        version: link:../../packages/kds-ui
+      i18next:
+        specifier: ^25.8.13
+        version: 25.8.13(typescript@5.9.2)
+      react:
+        specifier: 'catalog:'
+        version: 19.2.0
+      react-dom:
+        specifier: 'catalog:'
+        version: 19.2.0(react@19.2.0)
+      react-i18next:
+        specifier: ^16.5.4
+        version: 16.5.4(i18next@25.8.13(typescript@5.9.2))(react-dom@19.2.0(react@19.2.0))(react@19.2.0)(typescript@5.9.2)
+    devDependencies:
+      '@kareer/eslint-config':
+        specifier: workspace:*
+        version: link:../../packages/configs/eslint
+      '@kareer/typescript-config':
+        specifier: workspace:*
+        version: link:../../packages/configs/typescript
+      '@types/node':
+        specifier: 'catalog:'
+        version: 22.15.3
+      '@types/react':
+        specifier: 'catalog:'
+        version: 19.2.7
+      '@types/react-dom':
+        specifier: 'catalog:'
+        version: 19.2.3(@types/react@19.2.7)
+      '@vanilla-extract/css':
+        specifier: 'catalog:'
+        version: 1.18.0
+      '@vanilla-extract/recipes':
+        specifier: 'catalog:'
+        version: 0.5.7(@vanilla-extract/css@1.18.0)
+      '@vanilla-extract/vite-plugin':
+        specifier: 'catalog:'
+        version: 5.1.4(@types/node@22.15.3)(jiti@2.6.1)(terser@5.49.0)(vite@7.3.1(@types/node@22.15.3)(jiti@2.6.1)(terser@5.49.0))
+      '@vitejs/plugin-react':
+        specifier: 'catalog:'
+        version: 5.1.2(vite@7.3.1(@types/node@22.15.3)(jiti@2.6.1)(terser@5.49.0))
+      babel-plugin-react-compiler:
+        specifier: ^1.0.0
+        version: 1.0.0
+      eslint:
+        specifier: 'catalog:'
+        version: 9.39.1(jiti@2.6.1)
+      typescript:
+        specifier: 'catalog:'
+        version: 5.9.2
+      vite:
+        specifier: 'catalog:'
+        version: 7.3.1(@types/node@22.15.3)(jiti@2.6.1)(terser@5.49.0)
+      vite-plugin-svgr:
+        specifier: 'catalog:'
+        version: 4.5.0(rollup@4.54.0)(typescript@5.9.2)(vite@7.3.1(@types/node@22.15.3)(jiti@2.6.1)(terser@5.49.0))
+
   apps/web:
     dependencies:
       '@kds/icons':
@@ -127,7 +212,7 @@ importers:
         version: link:../../packages/configs/typescript
       '@sentry/vite-plugin':
         specifier: ^4.6.1
-        version: 4.6.1
+        version: 4.6.1(encoding@0.1.13)
       '@types/node':
         specifier: 'catalog:'
         version: 22.15.3
@@ -148,10 +233,10 @@ importers:
         version: 0.5.7(@vanilla-extract/css@1.18.0)
       '@vanilla-extract/vite-plugin':
         specifier: 'catalog:'
-        version: 5.1.4(@types/node@22.15.3)(jiti@2.6.1)(vite@7.3.1(@types/node@22.15.3)(jiti@2.6.1))
+        version: 5.1.4(@types/node@22.15.3)(jiti@2.6.1)(terser@5.49.0)(vite@7.3.1(@types/node@22.15.3)(jiti@2.6.1)(terser@5.49.0))
       '@vitejs/plugin-react':
         specifier: 'catalog:'
-        version: 5.1.2(vite@7.3.1(@types/node@22.15.3)(jiti@2.6.1))
+        version: 5.1.2(vite@7.3.1(@types/node@22.15.3)(jiti@2.6.1)(terser@5.49.0))
       babel-plugin-react-compiler:
         specifier: ^1.0.0
         version: 1.0.0
@@ -166,10 +251,10 @@ importers:
         version: 5.9.2
       vite:
         specifier: 'catalog:'
-        version: 7.3.1(@types/node@22.15.3)(jiti@2.6.1)
+        version: 7.3.1(@types/node@22.15.3)(jiti@2.6.1)(terser@5.49.0)
       vite-plugin-svgr:
         specifier: 'catalog:'
-        version: 4.5.0(rollup@4.54.0)(typescript@5.9.2)(vite@7.3.1(@types/node@22.15.3)(jiti@2.6.1))
+        version: 4.5.0(rollup@4.54.0)(typescript@5.9.2)(vite@7.3.1(@types/node@22.15.3)(jiti@2.6.1)(terser@5.49.0))
 
   packages/configs/eslint:
     devDependencies:
@@ -227,7 +312,7 @@ importers:
         version: 19.2.7
       '@vitejs/plugin-react':
         specifier: 'catalog:'
-        version: 5.1.2(vite@7.3.1(@types/node@22.15.3)(jiti@2.6.1))
+        version: 5.1.2(vite@7.3.1(@types/node@24.13.3)(jiti@2.6.1)(terser@5.49.0))
       eslint:
         specifier: 'catalog:'
         version: 9.39.1(jiti@2.6.1)
@@ -239,10 +324,10 @@ importers:
         version: 5.9.2
       vite:
         specifier: 'catalog:'
-        version: 7.3.1(@types/node@22.15.3)(jiti@2.6.1)
+        version: 7.3.1(@types/node@24.13.3)(jiti@2.6.1)(terser@5.49.0)
       vite-plugin-svgr:
         specifier: 'catalog:'
-        version: 4.5.0(rollup@4.54.0)(typescript@5.9.2)(vite@7.3.1(@types/node@22.15.3)(jiti@2.6.1))
+        version: 4.5.0(rollup@4.54.0)(typescript@5.9.2)(vite@7.3.1(@types/node@24.13.3)(jiti@2.6.1)(terser@5.49.0))
 
   packages/kds-ui:
     dependencies:
@@ -276,7 +361,7 @@ importers:
         version: 0.5.7(@vanilla-extract/css@1.18.0)
       '@vanilla-extract/vite-plugin':
         specifier: 'catalog:'
-        version: 5.1.4(@types/node@22.15.3)(jiti@2.6.1)(vite@7.3.1(@types/node@22.15.3)(jiti@2.6.1))
+        version: 5.1.4(@types/node@22.15.3)(jiti@2.6.1)(terser@5.49.0)(vite@7.3.1(@types/node@22.15.3)(jiti@2.6.1)(terser@5.49.0))
       eslint:
         specifier: 'catalog:'
         version: 9.39.1(jiti@2.6.1)
@@ -291,10 +376,10 @@ importers:
         version: 5.9.2
       vite:
         specifier: 'catalog:'
-        version: 7.3.1(@types/node@22.15.3)(jiti@2.6.1)
+        version: 7.3.1(@types/node@22.15.3)(jiti@2.6.1)(terser@5.49.0)
       vite-plugin-svgr:
         specifier: 'catalog:'
-        version: 4.5.0(rollup@4.54.0)(typescript@5.9.2)(vite@7.3.1(@types/node@22.15.3)(jiti@2.6.1))
+        version: 4.5.0(rollup@4.54.0)(typescript@5.9.2)(vite@7.3.1(@types/node@22.15.3)(jiti@2.6.1)(terser@5.49.0))
 
 packages:
   '@babel/code-frame@7.27.1':
@@ -573,6 +658,66 @@ packages:
       }
     engines: { node: '>=v18' }
 
+  '@electron-internal/extract-zip@1.0.5':
+    resolution:
+      {
+        integrity: sha512-+bqFCP98pLI0Tt0XQo1TmlXtwjWchISndDOxCkEcIuUgXWpBnLyRI+2DU+mesvnMMX6L1XDqYNA0lXNDHd/yiA==,
+      }
+    engines: { node: '>=22.12.0' }
+
+  '@electron/asar@4.2.1':
+    resolution:
+      {
+        integrity: sha512-rGyEe7iy52zxiWuihV/h/AqQrFkx7YnUUJKW1bdufVDHCzIMP/XDrDI/NOzv/LLtzt3NduAzNa475WRmRnmswQ==,
+      }
+    engines: { node: '>=22.12.0' }
+    hasBin: true
+
+  '@electron/get@5.1.0':
+    resolution:
+      {
+        integrity: sha512-3kSBtG8ObcTVfXanm5vVJ6UnBLEVmVsRk1M+vGqCuMBV+XLCbJYuWQful+yIy0GQDsSlK0kHEriEHn7SPk4EnA==,
+      }
+    engines: { node: '>=22.12.0' }
+
+  '@electron/notarize@3.1.1':
+    resolution:
+      {
+        integrity: sha512-uQQSlOiJnqRkTL1wlEBAxe90nVN/Fc/hEmk0bqpKk8nKjV1if/tXLHKUPePtv9Xsx90PtZU8aidx5lAiOpjkQQ==,
+      }
+    engines: { node: '>= 22.12.0' }
+
+  '@electron/osx-sign@2.6.0':
+    resolution:
+      {
+        integrity: sha512-XiJHXekSfeQpk11d9uWZ9PtDm4ADIWvcrSTRJocaDgA46t1okxrQ1keL8rthURJX6AP3DDFnzrouiP6Q5qoHYA==,
+      }
+    engines: { node: '>=22.12.0' }
+    hasBin: true
+
+  '@electron/packager@20.0.4':
+    resolution:
+      {
+        integrity: sha512-61iD4rkg0cofTn5z9xN4sdhtMR+l7G1i/X5/CmN74ZywOW1tUW+qa/J/w5itxidMemAQJjKLb9YYMHFxsbnk7A==,
+      }
+    engines: { node: '>= 22.12.0' }
+    hasBin: true
+
+  '@electron/universal@3.0.6':
+    resolution:
+      {
+        integrity: sha512-MonS1kfkZdSEkLZI0pdR/TCx8ecxwRSFm7sORfwIkDI9UaIbHnk4Mgeqq+Ob9qDQRV8LZ9+hHCmimpA9BRcNxw==,
+      }
+    engines: { node: '>=22.12.0' }
+
+  '@electron/windows-sign@2.0.6':
+    resolution:
+      {
+        integrity: sha512-ESWgNkFsXFH06I5EB2uHv3hmZA3yF4j9GTB77W74x3b5KZNItxggNzuADw41HUy6mhnC2K+E2mT0Xgc4YKu3IQ==,
+      }
+    engines: { node: '>=22.12.0' }
+    hasBin: true
+
   '@emotion/hash@0.9.2':
     resolution:
       {
@@ -932,6 +1077,12 @@ packages:
       }
     engines: { node: '>=6.0.0' }
 
+  '@jridgewell/source-map@0.3.11':
+    resolution:
+      {
+        integrity: sha512-ZMp1V8ZFcPG5dIWnQLr3NSI1MiCU7UETdS/A0G8V/XWHvJv3ZsFqutJn1Y5RPmAPX6F3BiE397OqveU/9NCuIA==,
+      }
+
   '@jridgewell/sourcemap-codec@1.5.5':
     resolution:
       {
@@ -944,6 +1095,13 @@ packages:
         integrity: sha512-zzNR+SdQSDJzc8joaeP8QQoCQr8NuYx2dIIytl1QeBEZHJ9uW6hebsrYgbz8hJwUQao3TWCMtmfV8Nu1twOLAw==,
       }
 
+  '@malept/cross-spawn-promise@2.0.0':
+    resolution:
+      {
+        integrity: sha512-1DpKU0Z5ThltBwjNySMC14g0CkbyhCaz9FkhxqNsZI6uAPJXFS8cMXlBKo26FJ8ZuW6S9GCMcR9IO5k2X5/9Fg==,
+      }
+    engines: { node: '>= 12.13.0' }
+
   '@pkgjs/parseargs@0.11.0':
     resolution:
       {
@@ -1502,6 +1660,12 @@ packages:
         integrity: sha512-lX7HFZeHf4QG/J7tBZqrCAXwz9J5RD56Y6MpP0eJkka8p+K0RY/yBTW7CYFJ4VGCclxqOLKmiGP5juQc6MKgcw==,
       }
 
+  '@types/node@24.13.3':
+    resolution:
+      {
+        integrity: sha512-Dh8vAsV36ig5wa9OX4pXvMc9D3Veibfw2wix0CUwYODLD8nkj9UsLjASr49nPg+2eKzxhBV+v7L8pXvT4e639Q==,
+      }
+
   '@types/react-dom@19.2.3':
     resolution:
       {
@@ -1666,6 +1830,13 @@ packages:
     peerDependencies:
       vite: ^4.2.0 || ^5.0.0 || ^6.0.0 || ^7.0.0
 
+  '@xmldom/xmldom@0.9.10':
+    resolution:
+      {
+        integrity: sha512-A9gOqLdi6cV4ibazAjcQufGj0B1y/vDqYrcuP6d/6x8P27gRS8643Dj9o1dEKtB6O7fwxb2FgBmJS2mX7gpvdw==,
+      }
+    engines: { node: '>=14.6' }
+
   JSONStream@1.3.5:
     resolution:
       {
@@ -1689,6 +1860,14 @@ packages:
     engines: { node: '>=0.4.0' }
     hasBin: true
 
+  acorn@8.18.0:
+    resolution:
+      {
+        integrity: sha512-lGq+9yr1/GuAWaVYIHRjvvySG5/4VfKIvC8EWxStPdcDh/Ka7FG3twP6v4d5BkravUilhIAsG4Qj83t02LWUPQ==,
+      }
+    engines: { node: '>=0.4.0' }
+    hasBin: true
+
   agent-base@6.0.2:
     resolution:
       {
@@ -1844,6 +2023,19 @@ packages:
         integrity: sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==,
       }
 
+  balanced-match@4.0.4:
+    resolution:
+      {
+        integrity: sha512-BLrgEcRTwX2o6gGxGOCNyMvGSp35YofuYzw9h1IMTRmKqttAZZVU67bdb9Pr2vUHA8+j3i2tJfjO6C6+4myGTA==,
+      }
+    engines: { node: 18 || 20 || >=22 }
+
+  base64-js@1.5.1:
+    resolution:
+      {
+        integrity: sha512-AKpaYlHn8t4SVbOHCy+b5+KKgvR4vrsD8vbvrbiQJps7fKDTkjkDry6ji0rUJjC0kzbNePLwzxq8iypo41qeWA==,
+      }
+
   baseline-browser-mapping@2.9.11:
     resolution:
       {
@@ -1870,6 +2062,13 @@ packages:
         integrity: sha512-Jt0vHyM+jmUBqojB7E1NIYadt0vI0Qxjxd2TErW94wDz+E2LAm5vKMXXwg6ZZBTHPuUlDgQHKXvjGBdfcF1ZDQ==,
       }
 
+  brace-expansion@5.0.9:
+    resolution:
+      {
+        integrity: sha512-ScQ4IuvIEF1TMlP7Zt+vjJ//9zlPb2SDcxWxM3bk8s6t6GGdJ7KO1dCcTidOPJKePW30LE/2cT7wCyPho9/Wxg==,
+      }
+    engines: { node: 20 || >=22 }
+
   braces@3.0.3:
     resolution:
       {
@@ -1885,6 +2084,12 @@ packages:
     engines: { node: ^6 || ^7 || ^8 || ^9 || ^10 || ^11 || ^12 || >=13.7 }
     hasBin: true
 
+  buffer-from@1.1.2:
+    resolution:
+      {
+        integrity: sha512-E+XQCRwSbaaiChtv6k6Dwgc+bx+Bs6vuKJHHl5kox/BaKbhiXzqQOwK4cO22yElGp2OCmjwVhT3HmxgyPGnJfQ==,
+      }
+
   cac@6.7.14:
     resolution:
       {
@@ -1986,6 +2191,19 @@ packages:
         integrity: sha512-Y2oEozpomLn7Q3HFP7dpww7AtMJplbM9lGZP6RDfHqmbeRjiwRg4n6VM6j4KLmRke85uWEI7JqF17f3pqdRA0g==,
       }
 
+  commander@2.20.3:
+    resolution:
+      {
+        integrity: sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ==,
+      }
+
+  commander@9.5.0:
+    resolution:
+      {
+        integrity: sha512-KRs7WVDKg86PWiuAqhDrAQnTXZKraVcCc6vFdL14qrZ/DcWwuRo7VoiYXalXO7S5GKpqYiVEwCbgFDfxNHKJBQ==,
+      }
+    engines: { node: ^12.20.0 || >=14 }
+
   compare-func@2.0.0:
     resolution:
       {
@@ -2239,6 +2457,14 @@ packages:
         integrity: sha512-0Drusm6MVRXSOJpGbaSVgcQsuB4hEkMpHXaVstcPmhu5LIedxs1xNK/nIxmQIU/RPC0+1/o0AVZfBTkTNJOdUw==,
       }
 
+  electron@43.2.0:
+    resolution:
+      {
+        integrity: sha512-80zvrgG7ZRXD+tD0IyLvrnN9n+veSxadMRsMaC9wKKP3iUbtC7rGM8+dVuCmOb0Rrwwv8ESW4awnUZh9Hbp1fA==,
+      }
+    engines: { node: '>= 22.12.0' }
+    hasBin: true
+
   emoji-regex@8.0.0:
     resolution:
       {
@@ -2251,6 +2477,12 @@ packages:
         integrity: sha512-L18DaJsXSUk2+42pv8mLs5jJT2hqFkFE4j21wOmgbUqsZ2hL72NsUU785g9RXgo3s0ZNgVl42TiHp3ZtOv/Vyg==,
       }
 
+  encoding@0.1.13:
+    resolution:
+      {
+        integrity: sha512-ETBauow1T35Y/WZMkio9jiM0Z5xjHHmJ4XmjZOq1l/dXz3lr2sRn87nJy20RupqSh1F2m3HHPSp8ShIPQJrJ3A==,
+      }
+
   entities@4.5.0:
     resolution:
       {
@@ -2265,6 +2497,19 @@ packages:
       }
     engines: { node: '>=6' }
 
+  env-paths@3.0.0:
+    resolution:
+      {
+        integrity: sha512-dtJUTepzMW3Lm/NPxRf3wP4642UWhjL2sQxc+ym2YMj1m/H2zDNQOlezafzkHwn6sMstjHTwG6iQQsctDW/b1A==,
+      }
+    engines: { node: ^12.20.0 || ^14.13.1 || >=16.0.0 }
+
+  err-code@2.0.3:
+    resolution:
+      {
+        integrity: sha512-2bmlRpNKBxT/CRmPOlyISQpNj+qSeYvcym/uT0Jx2bMOlKLtSy1ZmLuVxSEKKyor/N5yhvp/ZiG1oE3DEYMSFA==,
+      }
+
   error-ex@1.3.4:
     resolution:
       {
@@ -2539,6 +2784,20 @@ packages:
       }
     engines: { node: '>=16.0.0' }
 
+  filename-reserved-regex@3.0.0:
+    resolution:
+      {
+        integrity: sha512-hn4cQfU6GOT/7cFHXBqeBg2TbrMBgdD0kcjLhvSQYYwm3s4B6cjvBfb7nBALJLAXqmU5xajSa7X2NnUud/VCdw==,
+      }
+    engines: { node: ^12.20.0 || ^14.13.1 || >=16.0.0 }
+
+  filenamify@6.0.0:
+    resolution:
+      {
+        integrity: sha512-vqIlNogKeyD3yzrm0yhRMQg8hOVwYcYRfjEoODd49iCprMn4HL85gK3HcykQE53EPIpX3HcAbGA5ELQv216dAQ==,
+      }
+    engines: { node: '>=16' }
+
   fill-range@7.1.1:
     resolution:
       {
@@ -2573,6 +2832,13 @@ packages:
         integrity: sha512-GX+ysw4PBCz0PzosHDepZGANEuFCMLrnRTiEy9McGjmkCQYwRq4A/X786G/fjM/+OjsWSU1ZrY5qyARZmO/uwg==,
       }
 
+  flora-colossus@3.0.2:
+    resolution:
+      {
+        integrity: sha512-Jk78K/Tzt6saxQPGChlJw69xuFGpWyTSAS8EdU0h/FyXwD2K46yNOXmo6nRHcZ9ooekyBAzMkwmiGNt7wOC5zg==,
+      }
+    engines: { node: '>=22.12.0' }
+
   for-each@0.3.5:
     resolution:
       {
@@ -2614,6 +2880,13 @@ packages:
         integrity: sha512-xckBUXyTIqT97tq2x2AMb+g163b5JFysYk0x4qxNFwbfQkmNZoiRHb6sPzI9/QV33WeuvVYBUIiD4NzNIyqaRQ==,
       }
 
+  galactus@2.0.2:
+    resolution:
+      {
+        integrity: sha512-HmKyTFGomdAchz4umx8MwBnrnfFmdpwiTyGA4ZOF7rya2Lmgbc9qate4yweInL+0gUBVImhaz12SBGpW3SY4Yg==,
+      }
+    engines: { node: '>=22.12.0' }
+
   gensync@1.0.0-beta.2:
     resolution:
       {
@@ -2676,8 +2949,16 @@ packages:
       {
         integrity: sha512-DfXN8DfhJ7NH3Oe7cFmu3NCu1wKbkReJ8TorzSAFbSKrlNaQSKfIzqYqVY8zlbs2NLBbWpRiU52GX2PbaBVNkg==,
       }
+    deprecated: Old versions of glob are not supported, and contain widely publicized security vulnerabilities, which have been fixed in the current version. Please update. Support for old versions may be purchased (at exorbitant rates) by contacting i@izs.me
     hasBin: true
 
+  glob@13.0.6:
+    resolution:
+      {
+        integrity: sha512-Wjlyrolmm8uDpm/ogGyXZXb1Z+Ca2B8NbJwqBVg0axK9GbBeoS7yGV6vjXnYdGm6X53iehEuxxbyiKp8QmN4Vw==,
+      }
+    engines: { node: 18 || 20 || >=22 }
+
   global-directory@4.0.1:
     resolution:
       {
@@ -2713,6 +2994,12 @@ packages:
       }
     engines: { node: '>= 0.4' }
 
+  graceful-fs@4.2.11:
+    resolution:
+      {
+        integrity: sha512-RbJ5/jmFcNNCcDV5o9eTnBLJ/HszWV0P73bc+Ff4nS/rJj+YaS6IGyiOL0VoBYX+l1Wrl3k63h/KrH+nhJ0XvQ==,
+      }
+
   has-bigints@1.1.0:
     resolution:
       {
@@ -2798,6 +3085,13 @@ packages:
       typescript:
         optional: true
 
+  iconv-lite@0.6.3:
+    resolution:
+      {
+        integrity: sha512-4fCk79wshMdzMp2rH06qWrJE4iolqLhCUH+OiuIgU++RB0+94NlDL81atO7GX55uUKueo0txHNtvEyI6D7WdMw==,
+      }
+    engines: { node: '>=0.10.0' }
+
   ignore@5.3.2:
     resolution:
       {
@@ -3068,6 +3362,13 @@ packages:
         integrity: sha512-xHjhDr3cNBK0BzdUJSPXZntQUx/mwMS5Rw4A7lPJ90XGAO6ISP/ePDNuo0vhqOZU+UD5JoodwCAAoZQd3FeAKw==,
       }
 
+  isbinaryfile@4.0.10:
+    resolution:
+      {
+        integrity: sha512-iHrqe5shvBUcFbmZq9zOQHBoeOhZJu6RQGrDpBgenUm/Am+F3JM2MgQj+rK3Z601fzrL5gLZWtAPH2OBaSVcyw==,
+      }
+    engines: { node: '>= 8.0.0' }
+
   isexe@2.0.0:
     resolution:
       {
@@ -3180,6 +3481,13 @@ packages:
       }
     engines: { node: '>=4.0' }
 
+  junk@4.0.1:
+    resolution:
+      {
+        integrity: sha512-Qush0uP+G8ZScpGMZvHUiRfI0YBWuB3gVBYlI0v0vvOJt5FLicco+IkP0a50LqTTQhmts/m6tP5SWE+USyIvcQ==,
+      }
+    engines: { node: '>=12.20' }
+
   keyv@4.5.4:
     resolution:
       {
@@ -3388,6 +3696,13 @@ packages:
         integrity: sha512-JNAzZcXrCt42VGLuYz0zfAzDfAvJWW6AfYlDBQyDV5DClI2m5sAmK+OIO7s59XfsRsWHp02jAJrRadPRGTt6SQ==,
       }
 
+  lru-cache@11.5.2:
+    resolution:
+      {
+        integrity: sha512-4pfM1Ff0x50o0tQwb5ucw/RzNyD0/YJME6IVcStalZuMWxdt3sR3huStTtxz4PUmvZfRguvDejasvQ2kifR11g==,
+      }
+    engines: { node: 20 || >=22 }
+
   lru-cache@5.1.1:
     resolution:
       {
@@ -3421,6 +3736,13 @@ packages:
       }
     engines: { node: '>=16.10' }
 
+  minimatch@10.2.6:
+    resolution:
+      {
+        integrity: sha512-vpLQEs+VLCr1nU0BXS07maYoFwlDAH0gngQuuttxIwutDFEMHq2blX+8vpgxDdK3J1PwjCJiep77OitTZ4Ll1A==,
+      }
+    engines: { node: 18 || 20 || >=22 }
+
   minimatch@3.1.2:
     resolution:
       {
@@ -3454,6 +3776,13 @@ packages:
       }
     engines: { node: '>=16 || 14 >=14.17' }
 
+  minipass@7.1.3:
+    resolution:
+      {
+        integrity: sha512-tEBHqDnIoM/1rXME1zgka9g6Q2lcoCkxHLuc7ODJ5BxbP5d4c2Z5cGgtXAku59200Cx7diuHTOYfSBD8n6mm8A==,
+      }
+    engines: { node: '>=16 || 14 >=14.17' }
+
   mlly@1.8.0:
     resolution:
       {
@@ -3678,6 +4007,13 @@ packages:
       }
     engines: { node: '>=16 || 14 >=14.18' }
 
+  path-scurry@2.0.2:
+    resolution:
+      {
+        integrity: sha512-3O/iVVsJAPsOnpwWIeD+d6z/7PmqApyQePUtCndjatj/9I5LylHvt5qluFaBT3I5h3r1ejfR056c+FCv+NnNXg==,
+      }
+    engines: { node: 18 || 20 || >=22 }
+
   path-type@4.0.0:
     resolution:
       {
@@ -3691,6 +4027,13 @@ packages:
         integrity: sha512-WUjGcAqP1gQacoQe+OBJsFA7Ld4DyXuUIjZ5cc75cLHvJ7dtNsTugphxIADwspS+AraAUePCKrSVtPLFj/F88w==,
       }
 
+  pe-library@1.0.1:
+    resolution:
+      {
+        integrity: sha512-nh39Mo1eGWmZS7y+mK/dQIqg7S1lp38DpRxkyoHf0ZcUs/HDc+yyTjuOtTvSMZHmfSLuSQaX945u05Y2Q6UWZg==,
+      }
+    engines: { node: '>=14', npm: '>=7' }
+
   picocolors@1.1.1:
     resolution:
       {
@@ -3717,6 +4060,13 @@ packages:
         integrity: sha512-/Jm5M4RvtBFVkKWRu2BLUTNP8/M2a+UwuAX+ae4770q1qVGtfjG+WTCupoZixokjmHiry8uI+dlY8KXYV5HVVQ==,
       }
 
+  plist@3.1.1:
+    resolution:
+      {
+        integrity: sha512-ZIfcLJC+7E7FBFnDxm9MPmt7D+DidyQ26lewieO75AdhA2ayMtsJSES0iWzqJQbcVRSrTufQoy0DR94xHue0oA==,
+      }
+    engines: { node: '>=10.4.0' }
+
   pluralize@8.0.0:
     resolution:
       {
@@ -3738,6 +4088,14 @@ packages:
       }
     engines: { node: ^10 || ^12 || >=14 }
 
+  postject@1.0.0-alpha.6:
+    resolution:
+      {
+        integrity: sha512-b9Eb8h2eVqNE8edvKdwqkrY6O7kAwmI8kcnBv1NScolYJbo59XUF0noFq+lxbC1yN20bmC0WBEbDC5H/7ASb0A==,
+      }
+    engines: { node: '>=14.0.0' }
+    hasBin: true
+
   prelude-ls@1.2.1:
     resolution:
       {
@@ -3760,6 +4118,13 @@ packages:
       }
     engines: { node: '>=0.4.0' }
 
+  promise-retry@2.0.1:
+    resolution:
+      {
+        integrity: sha512-y+WKFlBR8BGXnsNlIHFGPZmyDf3DFMoLhaflAnyZgV6rG6xu+JwesTo2Q9R6XwYmtmwAFCkAk3e35jEdoeh/3g==,
+      }
+    engines: { node: '>=10' }
+
   prop-types@15.8.1:
     resolution:
       {
@@ -3889,6 +4254,13 @@ packages:
         integrity: sha512-oyrU88skkMtDdauHDuKVrgR+zuItqr6/c//FXzvmxRGMexSDc6hNvJInGW3LL46n+8b50RykrvwSUIIQH2LQ5A==,
       }
 
+  resedit@2.0.3:
+    resolution:
+      {
+        integrity: sha512-oTeemxwoMuxxTYxXUwjkrOPfngTQehlv0/HoYFNkB4uzsP1Un1A9nI8JQKGOFkxpqkC7qkMs0lUsGrvUlbLNUA==,
+      }
+    engines: { node: '>=14', npm: '>=7' }
+
   resolve-from@4.0.0:
     resolution:
       {
@@ -3910,6 +4282,13 @@ packages:
       }
     hasBin: true
 
+  retry@0.12.0:
+    resolution:
+      {
+        integrity: sha512-9LkiTwjUh6rT555DtE9rTX+BKByPfrMzEAtnlEtdEwr3Nkffwiihqe2bWADg+OQRjt9gl6ICdmB/ZFDCGAtSow==,
+      }
+    engines: { node: '>= 4' }
+
   rollup@4.54.0:
     resolution:
       {
@@ -3939,6 +4318,12 @@ packages:
       }
     engines: { node: '>= 0.4' }
 
+  safer-buffer@2.1.2:
+    resolution:
+      {
+        integrity: sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==,
+      }
+
   scheduler@0.27.0:
     resolution:
       {
@@ -4049,6 +4434,19 @@ packages:
       }
     engines: { node: '>=0.10.0' }
 
+  source-map-support@0.5.21:
+    resolution:
+      {
+        integrity: sha512-uBHU3L3czsIyYXKX88fdrGovxdSCoTGDRZ6SYXtSRxLZUzHg5P/66Ht6uoUlHu9EZod+inXhKo3qQgwXUT/y1w==,
+      }
+
+  source-map@0.6.1:
+    resolution:
+      {
+        integrity: sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==,
+      }
+    engines: { node: '>=0.10.0' }
+
   split2@4.2.0:
     resolution:
       {
@@ -4132,6 +4530,13 @@ packages:
       }
     engines: { node: '>=8' }
 
+  sumchecker@3.0.1:
+    resolution:
+      {
+        integrity: sha512-MvjXzkz/BOfyVDkG0oFOtBxHX2u3gKbMHIF/dXblZsgD3BWOFLmHovIpZY7BykJdAjcqRCBi1WYBNdEC9yI7vg==,
+      }
+    engines: { node: '>= 8.0' }
+
   supports-color@10.2.2:
     resolution:
       {
@@ -4159,6 +4564,14 @@ packages:
         integrity: sha512-e4hG1hRwoOdRb37cIMSgzNsxyzKfayW6VOflrwvR+/bzrkyxY/31WkbgnQpgtrNp1SdpJvpUAGTa/ZoiPNDuRQ==,
       }
 
+  terser@5.49.0:
+    resolution:
+      {
+        integrity: sha512-SNiDnXyHSrxVcIOtVbULzcTmniUiwcV7Nwdyj1twVubeTmbjoa8p69KKDpfkdoOavuM4/GRm1+ykI8qqnavHoA==,
+      }
+    engines: { node: '>=10' }
+    hasBin: true
+
   text-extensions@2.4.0:
     resolution:
       {
@@ -4348,6 +4761,19 @@ packages:
         integrity: sha512-iwDZqg0QAGrg9Rav5H4n0M64c3mkR59cJ6wQp+7C4nI0gsmExaedaYLNO44eT4AtBBwjbTiGPMlt2Md0T9H9JQ==,
       }
 
+  undici-types@7.18.2:
+    resolution:
+      {
+        integrity: sha512-AsuCzffGHJybSaRrmr5eHr81mwJU3kjw6M+uprWvCXiNeN9SOGwQ3Jn8jb8m3Z6izVgknn1R0FTCEAP2QrLY/w==,
+      }
+
+  undici@7.29.0:
+    resolution:
+      {
+        integrity: sha512-IDxfleLmmbSskfWSUATiN1nfn2rDuvnMOqb5CWR92iIfojA0Ud+ulOAAEQ57LPr9rWmsreUyf5lwyao+7GNNVw==,
+      }
+    engines: { node: '>=20.18.1' }
+
   unicorn-magic@0.1.0:
     resolution:
       {
@@ -4532,6 +4958,13 @@ packages:
       }
     engines: { node: '>=12' }
 
+  xmlbuilder@15.1.1:
+    resolution:
+      {
+        integrity: sha512-yMqGBqtXyeN1e3TGYvgNgDVZ3j84W4cwkOXQswghol6APgZWaff9lnbvN7MHYJOiXsvGPXtjTYJEiC9J2wv9Eg==,
+      }
+    engines: { node: '>=8.0' }
+
   y18n@5.0.8:
     resolution:
       {
@@ -4558,6 +4991,13 @@ packages:
       }
     engines: { node: '>=12' }
 
+  yargs-parser@22.0.0:
+    resolution:
+      {
+        integrity: sha512-rwu/ClNdSMpkSrUb+d6BRsSkLUq1fmfsY6TOpYzTwvwkg1/NRG85KBy3kq++A8LKQwX6lsu+aWad+2khvuXrqw==,
+      }
+    engines: { node: ^20.19.0 || ^22.12.0 || >=23 }
+
   yargs@17.7.2:
     resolution:
       {
@@ -4699,11 +5139,11 @@ snapshots:
       '@babel/helper-string-parser': 7.27.1
       '@babel/helper-validator-identifier': 7.28.5
 
-  '@commitlint/cli@20.3.0(@types/node@22.15.3)(typescript@5.9.2)':
+  '@commitlint/cli@20.3.0(@types/node@24.13.3)(typescript@5.9.2)':
     dependencies:
       '@commitlint/format': 20.2.0
       '@commitlint/lint': 20.3.0
-      '@commitlint/load': 20.3.0(@types/node@22.15.3)(typescript@5.9.2)
+      '@commitlint/load': 20.3.0(@types/node@24.13.3)(typescript@5.9.2)
       '@commitlint/read': 20.2.0
       '@commitlint/types': 20.2.0
       tinyexec: 1.0.2
@@ -4750,7 +5190,7 @@ snapshots:
       '@commitlint/rules': 20.3.0
       '@commitlint/types': 20.2.0
 
-  '@commitlint/load@20.3.0(@types/node@22.15.3)(typescript@5.9.2)':
+  '@commitlint/load@20.3.0(@types/node@24.13.3)(typescript@5.9.2)':
     dependencies:
       '@commitlint/config-validator': 20.2.0
       '@commitlint/execute-rule': 20.0.0
@@ -4758,7 +5198,7 @@ snapshots:
       '@commitlint/types': 20.2.0
       chalk: 5.6.2
       cosmiconfig: 9.0.0(typescript@5.9.2)
-      cosmiconfig-typescript-loader: 6.2.0(@types/node@22.15.3)(cosmiconfig@9.0.0(typescript@5.9.2))(typescript@5.9.2)
+      cosmiconfig-typescript-loader: 6.2.0(@types/node@24.13.3)(cosmiconfig@9.0.0(typescript@5.9.2))(typescript@5.9.2)
       lodash.isplainobject: 4.0.6
       lodash.merge: 4.6.2
       lodash.uniq: 4.5.0
@@ -4809,6 +5249,80 @@ snapshots:
       '@types/conventional-commits-parser': 5.0.2
       chalk: 5.6.2
 
+  '@electron-internal/extract-zip@1.0.5': {}
+
+  '@electron/asar@4.2.1':
+    dependencies:
+      glob: 13.0.6
+      minimatch: 10.2.6
+
+  '@electron/get@5.1.0':
+    dependencies:
+      debug: 4.4.3(supports-color@10.2.2)
+      env-paths: 3.0.0
+      graceful-fs: 4.2.11
+      progress: 2.0.3
+      semver: 7.7.3
+      sumchecker: 3.0.1
+    optionalDependencies:
+      undici: 7.29.0
+    transitivePeerDependencies:
+      - supports-color
+
+  '@electron/notarize@3.1.1':
+    dependencies:
+      debug: 4.4.3(supports-color@10.2.2)
+      promise-retry: 2.0.1
+    transitivePeerDependencies:
+      - supports-color
+
+  '@electron/osx-sign@2.6.0':
+    dependencies:
+      debug: 4.4.3(supports-color@10.2.2)
+      isbinaryfile: 4.0.10
+      plist: 3.1.1
+      semver: 7.7.3
+    transitivePeerDependencies:
+      - supports-color
+
+  '@electron/packager@20.0.4':
+    dependencies:
+      '@electron-internal/extract-zip': 1.0.5
+      '@electron/asar': 4.2.1
+      '@electron/get': 5.1.0
+      '@electron/notarize': 3.1.1
+      '@electron/osx-sign': 2.6.0
+      '@electron/universal': 3.0.6
+      '@electron/windows-sign': 2.0.6
+      '@malept/cross-spawn-promise': 2.0.0
+      debug: 4.4.3(supports-color@10.2.2)
+      filenamify: 6.0.0
+      galactus: 2.0.2
+      graceful-fs: 4.2.11
+      junk: 4.0.1
+      plist: 3.1.1
+      resedit: 2.0.3
+      semver: 7.7.3
+      yargs-parser: 22.0.0
+    transitivePeerDependencies:
+      - supports-color
+
+  '@electron/universal@3.0.6':
+    dependencies:
+      '@electron/asar': 4.2.1
+      debug: 4.4.3(supports-color@10.2.2)
+      plist: 3.1.1
+    transitivePeerDependencies:
+      - supports-color
+
+  '@electron/windows-sign@2.0.6':
+    dependencies:
+      debug: 4.4.3(supports-color@10.2.2)
+      graceful-fs: 4.2.11
+      postject: 1.0.0-alpha.6
+    transitivePeerDependencies:
+      - supports-color
+
   '@emotion/hash@0.9.2': {}
 
   '@esbuild/aix-ppc64@0.27.2':
@@ -4967,6 +5481,12 @@ snapshots:
 
   '@jridgewell/resolve-uri@3.1.2': {}
 
+  '@jridgewell/source-map@0.3.11':
+    dependencies:
+      '@jridgewell/gen-mapping': 0.3.13
+      '@jridgewell/trace-mapping': 0.3.31
+    optional: true
+
   '@jridgewell/sourcemap-codec@1.5.5': {}
 
   '@jridgewell/trace-mapping@0.3.31':
@@ -4974,6 +5494,10 @@ snapshots:
       '@jridgewell/resolve-uri': 3.1.2
       '@jridgewell/sourcemap-codec': 1.5.5
 
+  '@malept/cross-spawn-promise@2.0.0':
+    dependencies:
+      cross-spawn: 7.0.6
+
   '@pkgjs/parseargs@0.11.0':
     optional: true
 
@@ -5104,11 +5628,11 @@ snapshots:
       '@sentry-internal/replay-canvas': 10.32.1
       '@sentry/core': 10.32.1
 
-  '@sentry/bundler-plugin-core@4.6.1':
+  '@sentry/bundler-plugin-core@4.6.1(encoding@0.1.13)':
     dependencies:
       '@babel/core': 7.28.5
       '@sentry/babel-plugin-component-annotate': 4.6.1
-      '@sentry/cli': 2.58.4
+      '@sentry/cli': 2.58.4(encoding@0.1.13)
       dotenv: 16.6.1
       find-up: 5.0.0
       glob: 10.5.0
@@ -5142,10 +5666,10 @@ snapshots:
   '@sentry/cli-win32-x64@2.58.4':
     optional: true
 
-  '@sentry/cli@2.58.4':
+  '@sentry/cli@2.58.4(encoding@0.1.13)':
     dependencies:
       https-proxy-agent: 5.0.1
-      node-fetch: 2.7.0
+      node-fetch: 2.7.0(encoding@0.1.13)
       progress: 2.0.3
       proxy-from-env: 1.1.0
       which: 2.0.2
@@ -5171,9 +5695,9 @@ snapshots:
       hoist-non-react-statics: 3.3.2
       react: 19.2.0
 
-  '@sentry/vite-plugin@4.6.1':
+  '@sentry/vite-plugin@4.6.1(encoding@0.1.13)':
     dependencies:
-      '@sentry/bundler-plugin-core': 4.6.1
+      '@sentry/bundler-plugin-core': 4.6.1(encoding@0.1.13)
       unplugin: 1.0.1
     transitivePeerDependencies:
       - encoding
@@ -5299,6 +5823,10 @@ snapshots:
     dependencies:
       undici-types: 6.21.0
 
+  '@types/node@24.13.3':
+    dependencies:
+      undici-types: 7.18.2
+
   '@types/react-dom@19.2.3(@types/react@19.2.7)':
     dependencies:
       '@types/react': 19.2.7
@@ -5404,12 +5932,12 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  '@vanilla-extract/compiler@0.3.4(@types/node@22.15.3)(jiti@2.6.1)':
+  '@vanilla-extract/compiler@0.3.4(@types/node@22.15.3)(jiti@2.6.1)(terser@5.49.0)':
     dependencies:
       '@vanilla-extract/css': 1.18.0
       '@vanilla-extract/integration': 8.0.7
-      vite: 7.3.1(@types/node@22.15.3)(jiti@2.6.1)
-      vite-node: 3.2.4(@types/node@22.15.3)(jiti@2.6.1)
+      vite: 7.3.1(@types/node@22.15.3)(jiti@2.6.1)(terser@5.49.0)
+      vite-node: 3.2.4(@types/node@22.15.3)(jiti@2.6.1)(terser@5.49.0)
     transitivePeerDependencies:
       - '@types/node'
       - babel-plugin-macros
@@ -5468,11 +5996,11 @@ snapshots:
     dependencies:
       '@vanilla-extract/css': 1.18.0
 
-  '@vanilla-extract/vite-plugin@5.1.4(@types/node@22.15.3)(jiti@2.6.1)(vite@7.3.1(@types/node@22.15.3)(jiti@2.6.1))':
+  '@vanilla-extract/vite-plugin@5.1.4(@types/node@22.15.3)(jiti@2.6.1)(terser@5.49.0)(vite@7.3.1(@types/node@22.15.3)(jiti@2.6.1)(terser@5.49.0))':
     dependencies:
-      '@vanilla-extract/compiler': 0.3.4(@types/node@22.15.3)(jiti@2.6.1)
+      '@vanilla-extract/compiler': 0.3.4(@types/node@22.15.3)(jiti@2.6.1)(terser@5.49.0)
       '@vanilla-extract/integration': 8.0.7
-      vite: 7.3.1(@types/node@22.15.3)(jiti@2.6.1)
+      vite: 7.3.1(@types/node@22.15.3)(jiti@2.6.1)(terser@5.49.0)
     transitivePeerDependencies:
       - '@types/node'
       - babel-plugin-macros
@@ -5488,7 +6016,7 @@ snapshots:
       - tsx
       - yaml
 
-  '@vitejs/plugin-react@5.1.2(vite@7.3.1(@types/node@22.15.3)(jiti@2.6.1))':
+  '@vitejs/plugin-react@5.1.2(vite@7.3.1(@types/node@22.15.3)(jiti@2.6.1)(terser@5.49.0))':
     dependencies:
       '@babel/core': 7.28.5
       '@babel/plugin-transform-react-jsx-self': 7.27.1(@babel/core@7.28.5)
@@ -5496,10 +6024,24 @@ snapshots:
       '@rolldown/pluginutils': 1.0.0-beta.53
       '@types/babel__core': 7.20.5
       react-refresh: 0.18.0
-      vite: 7.3.1(@types/node@22.15.3)(jiti@2.6.1)
+      vite: 7.3.1(@types/node@22.15.3)(jiti@2.6.1)(terser@5.49.0)
     transitivePeerDependencies:
       - supports-color
 
+  '@vitejs/plugin-react@5.1.2(vite@7.3.1(@types/node@24.13.3)(jiti@2.6.1)(terser@5.49.0))':
+    dependencies:
+      '@babel/core': 7.28.5
+      '@babel/plugin-transform-react-jsx-self': 7.27.1(@babel/core@7.28.5)
+      '@babel/plugin-transform-react-jsx-source': 7.27.1(@babel/core@7.28.5)
+      '@rolldown/pluginutils': 1.0.0-beta.53
+      '@types/babel__core': 7.20.5
+      react-refresh: 0.18.0
+      vite: 7.3.1(@types/node@24.13.3)(jiti@2.6.1)(terser@5.49.0)
+    transitivePeerDependencies:
+      - supports-color
+
+  '@xmldom/xmldom@0.9.10': {}
+
   JSONStream@1.3.5:
     dependencies:
       jsonparse: 1.3.1
@@ -5511,6 +6053,8 @@ snapshots:
 
   acorn@8.15.0: {}
 
+  acorn@8.18.0: {}
+
   agent-base@6.0.2:
     dependencies:
       debug: 4.4.3(supports-color@10.2.2)
@@ -5623,6 +6167,10 @@ snapshots:
 
   balanced-match@1.0.2: {}
 
+  balanced-match@4.0.4: {}
+
+  base64-js@1.5.1: {}
+
   baseline-browser-mapping@2.9.11: {}
 
   binary-extensions@2.3.0: {}
@@ -5636,6 +6184,10 @@ snapshots:
     dependencies:
       balanced-match: 1.0.2
 
+  brace-expansion@5.0.9:
+    dependencies:
+      balanced-match: 4.0.4
+
   braces@3.0.3:
     dependencies:
       fill-range: 7.1.1
@@ -5648,6 +6200,9 @@ snapshots:
       node-releases: 2.0.27
       update-browserslist-db: 1.2.3(browserslist@4.28.1)
 
+  buffer-from@1.1.2:
+    optional: true
+
   cac@6.7.14: {}
 
   call-bind-apply-helpers@1.0.2:
@@ -5708,6 +6263,11 @@ snapshots:
 
   colorette@1.4.0: {}
 
+  commander@2.20.3:
+    optional: true
+
+  commander@9.5.0: {}
+
   compare-func@2.0.0:
     dependencies:
       array-ify: 1.0.0
@@ -5736,9 +6296,9 @@ snapshots:
 
   cookie@1.1.1: {}
 
-  cosmiconfig-typescript-loader@6.2.0(@types/node@22.15.3)(cosmiconfig@9.0.0(typescript@5.9.2))(typescript@5.9.2):
+  cosmiconfig-typescript-loader@6.2.0(@types/node@24.13.3)(cosmiconfig@9.0.0(typescript@5.9.2))(typescript@5.9.2):
     dependencies:
-      '@types/node': 22.15.3
+      '@types/node': 24.13.3
       cosmiconfig: 9.0.0(typescript@5.9.2)
       jiti: 2.6.1
       typescript: 5.9.2
@@ -5846,14 +6406,31 @@ snapshots:
 
   electron-to-chromium@1.5.267: {}
 
+  electron@43.2.0:
+    dependencies:
+      '@electron-internal/extract-zip': 1.0.5
+      '@electron/get': 5.1.0
+      '@types/node': 24.13.3
+    transitivePeerDependencies:
+      - supports-color
+
   emoji-regex@8.0.0: {}
 
   emoji-regex@9.2.2: {}
 
+  encoding@0.1.13:
+    dependencies:
+      iconv-lite: 0.6.3
+    optional: true
+
   entities@4.5.0: {}
 
   env-paths@2.2.1: {}
 
+  env-paths@3.0.0: {}
+
+  err-code@2.0.3: {}
+
   error-ex@1.3.4:
     dependencies:
       is-arrayish: 0.2.1
@@ -6112,7 +6689,7 @@ snapshots:
 
   eval@0.1.8:
     dependencies:
-      '@types/node': 22.15.3
+      '@types/node': 24.13.3
       require-like: 0.1.2
 
   fast-deep-equal@3.1.3: {}
@@ -6131,6 +6708,12 @@ snapshots:
     dependencies:
       flat-cache: 4.0.1
 
+  filename-reserved-regex@3.0.0: {}
+
+  filenamify@6.0.0:
+    dependencies:
+      filename-reserved-regex: 3.0.0
+
   fill-range@7.1.1:
     dependencies:
       to-regex-range: 5.0.1
@@ -6153,6 +6736,12 @@ snapshots:
 
   flatted@3.3.3: {}
 
+  flora-colossus@3.0.2:
+    dependencies:
+      debug: 4.4.3(supports-color@10.2.2)
+    transitivePeerDependencies:
+      - supports-color
+
   for-each@0.3.5:
     dependencies:
       is-callable: 1.2.7
@@ -6178,6 +6767,13 @@ snapshots:
 
   functions-have-names@1.2.3: {}
 
+  galactus@2.0.2:
+    dependencies:
+      debug: 4.4.3(supports-color@10.2.2)
+      flora-colossus: 3.0.2
+    transitivePeerDependencies:
+      - supports-color
+
   gensync@1.0.0-beta.2: {}
 
   get-caller-file@2.0.5: {}
@@ -6229,6 +6825,12 @@ snapshots:
       package-json-from-dist: 1.0.1
       path-scurry: 1.11.1
 
+  glob@13.0.6:
+    dependencies:
+      minimatch: 10.2.6
+      minipass: 7.1.3
+      path-scurry: 2.0.2
+
   global-directory@4.0.1:
     dependencies:
       ini: 4.1.1
@@ -6244,6 +6846,8 @@ snapshots:
 
   gopd@1.2.0: {}
 
+  graceful-fs@4.2.11: {}
+
   has-bigints@1.1.0: {}
 
   has-flag@4.0.0: {}
@@ -6294,6 +6898,11 @@ snapshots:
     optionalDependencies:
       typescript: 5.9.2
 
+  iconv-lite@0.6.3:
+    dependencies:
+      safer-buffer: 2.1.2
+    optional: true
+
   ignore@5.3.2: {}
 
   ignore@7.0.5: {}
@@ -6440,6 +7049,8 @@ snapshots:
 
   isarray@2.0.5: {}
 
+  isbinaryfile@4.0.10: {}
+
   isexe@2.0.0: {}
 
   iterator.prototype@1.1.5:
@@ -6492,6 +7103,8 @@ snapshots:
       object.assign: 4.1.7
       object.values: 1.2.1
 
+  junk@4.0.1: {}
+
   keyv@4.5.4:
     dependencies:
       json-buffer: 3.0.1
@@ -6590,6 +7203,8 @@ snapshots:
 
   lru-cache@10.4.3: {}
 
+  lru-cache@11.5.2: {}
+
   lru-cache@5.1.1:
     dependencies:
       yallist: 3.1.1
@@ -6606,6 +7221,10 @@ snapshots:
 
   meow@12.1.1: {}
 
+  minimatch@10.2.6:
+    dependencies:
+      brace-expansion: 5.0.9
+
   minimatch@3.1.2:
     dependencies:
       brace-expansion: 1.1.12
@@ -6622,9 +7241,11 @@ snapshots:
 
   minipass@7.1.2: {}
 
+  minipass@7.1.3: {}
+
   mlly@1.8.0:
     dependencies:
-      acorn: 8.15.0
+      acorn: 8.18.0
       pathe: 2.0.3
       pkg-types: 1.3.1
       ufo: 1.6.2
@@ -6642,9 +7263,11 @@ snapshots:
       lower-case: 2.0.2
       tslib: 2.8.1
 
-  node-fetch@2.7.0:
+  node-fetch@2.7.0(encoding@0.1.13):
     dependencies:
       whatwg-url: 5.0.0
+    optionalDependencies:
+      encoding: 0.1.13
 
   node-releases@2.0.27: {}
 
@@ -6759,10 +7382,17 @@ snapshots:
       lru-cache: 10.4.3
       minipass: 7.1.2
 
+  path-scurry@2.0.2:
+    dependencies:
+      lru-cache: 11.5.2
+      minipass: 7.1.3
+
   path-type@4.0.0: {}
 
   pathe@2.0.3: {}
 
+  pe-library@1.0.1: {}
+
   picocolors@1.1.1: {}
 
   picomatch@2.3.1: {}
@@ -6775,6 +7405,12 @@ snapshots:
       mlly: 1.8.0
       pathe: 2.0.3
 
+  plist@3.1.1:
+    dependencies:
+      '@xmldom/xmldom': 0.9.10
+      base64-js: 1.5.1
+      xmlbuilder: 15.1.1
+
   pluralize@8.0.0: {}
 
   possible-typed-array-names@1.1.0: {}
@@ -6785,12 +7421,21 @@ snapshots:
       picocolors: 1.1.1
       source-map-js: 1.2.1
 
+  postject@1.0.0-alpha.6:
+    dependencies:
+      commander: 9.5.0
+
   prelude-ls@1.2.1: {}
 
   prettier@3.7.4: {}
 
   progress@2.0.3: {}
 
+  promise-retry@2.0.1:
+    dependencies:
+      err-code: 2.0.3
+      retry: 0.12.0
+
   prop-types@15.8.1:
     dependencies:
       loose-envify: 1.4.0
@@ -6865,6 +7510,10 @@ snapshots:
 
   require-like@0.1.2: {}
 
+  resedit@2.0.3:
+    dependencies:
+      pe-library: 1.0.1
+
   resolve-from@4.0.0: {}
 
   resolve-from@5.0.0: {}
@@ -6875,6 +7524,8 @@ snapshots:
       path-parse: 1.0.7
       supports-preserve-symlinks-flag: 1.0.0
 
+  retry@0.12.0: {}
+
   rollup@4.54.0:
     dependencies:
       '@types/estree': 1.0.8
@@ -6922,6 +7573,9 @@ snapshots:
       es-errors: 1.3.0
       is-regex: 1.2.1
 
+  safer-buffer@2.1.2:
+    optional: true
+
   scheduler@0.27.0: {}
 
   semver@6.3.1: {}
@@ -6995,6 +7649,15 @@ snapshots:
 
   source-map-js@1.2.1: {}
 
+  source-map-support@0.5.21:
+    dependencies:
+      buffer-from: 1.1.2
+      source-map: 0.6.1
+    optional: true
+
+  source-map@0.6.1:
+    optional: true
+
   split2@4.2.0: {}
 
   stop-iteration-iterator@1.1.0:
@@ -7068,6 +7731,12 @@ snapshots:
 
   strip-json-comments@3.1.1: {}
 
+  sumchecker@3.0.1:
+    dependencies:
+      debug: 4.4.3(supports-color@10.2.2)
+    transitivePeerDependencies:
+      - supports-color
+
   supports-color@10.2.2: {}
 
   supports-color@7.2.0:
@@ -7078,6 +7747,14 @@ snapshots:
 
   svg-parser@2.0.4: {}
 
+  terser@5.49.0:
+    dependencies:
+      '@jridgewell/source-map': 0.3.11
+      acorn: 8.18.0
+      commander: 2.20.3
+      source-map-support: 0.5.21
+    optional: true
+
   text-extensions@2.4.0: {}
 
   through@2.3.8: {}
@@ -7191,6 +7868,11 @@ snapshots:
 
   undici-types@6.21.0: {}
 
+  undici-types@7.18.2: {}
+
+  undici@7.29.0:
+    optional: true
+
   unicorn-magic@0.1.0: {}
 
   unplugin@1.0.1:
@@ -7214,13 +7896,13 @@ snapshots:
     dependencies:
       react: 19.2.0
 
-  vite-node@3.2.4(@types/node@22.15.3)(jiti@2.6.1):
+  vite-node@3.2.4(@types/node@22.15.3)(jiti@2.6.1)(terser@5.49.0):
     dependencies:
       cac: 6.7.14
       debug: 4.4.3(supports-color@10.2.2)
       es-module-lexer: 1.7.0
       pathe: 2.0.3
-      vite: 7.3.1(@types/node@22.15.3)(jiti@2.6.1)
+      vite: 7.3.1(@types/node@22.15.3)(jiti@2.6.1)(terser@5.49.0)
     transitivePeerDependencies:
       - '@types/node'
       - jiti
@@ -7235,18 +7917,29 @@ snapshots:
       - tsx
       - yaml
 
-  vite-plugin-svgr@4.5.0(rollup@4.54.0)(typescript@5.9.2)(vite@7.3.1(@types/node@22.15.3)(jiti@2.6.1)):
+  vite-plugin-svgr@4.5.0(rollup@4.54.0)(typescript@5.9.2)(vite@7.3.1(@types/node@22.15.3)(jiti@2.6.1)(terser@5.49.0)):
+    dependencies:
+      '@rollup/pluginutils': 5.3.0(rollup@4.54.0)
+      '@svgr/core': 8.1.0(typescript@5.9.2)
+      '@svgr/plugin-jsx': 8.1.0(@svgr/core@8.1.0(typescript@5.9.2))
+      vite: 7.3.1(@types/node@22.15.3)(jiti@2.6.1)(terser@5.49.0)
+    transitivePeerDependencies:
+      - rollup
+      - supports-color
+      - typescript
+
+  vite-plugin-svgr@4.5.0(rollup@4.54.0)(typescript@5.9.2)(vite@7.3.1(@types/node@24.13.3)(jiti@2.6.1)(terser@5.49.0)):
     dependencies:
       '@rollup/pluginutils': 5.3.0(rollup@4.54.0)
       '@svgr/core': 8.1.0(typescript@5.9.2)
       '@svgr/plugin-jsx': 8.1.0(@svgr/core@8.1.0(typescript@5.9.2))
-      vite: 7.3.1(@types/node@22.15.3)(jiti@2.6.1)
+      vite: 7.3.1(@types/node@24.13.3)(jiti@2.6.1)(terser@5.49.0)
     transitivePeerDependencies:
       - rollup
       - supports-color
       - typescript
 
-  vite@7.3.1(@types/node@22.15.3)(jiti@2.6.1):
+  vite@7.3.1(@types/node@22.15.3)(jiti@2.6.1)(terser@5.49.0):
     dependencies:
       esbuild: 0.27.2
       fdir: 6.5.0(picomatch@4.0.3)
@@ -7258,6 +7951,21 @@ snapshots:
       '@types/node': 22.15.3
       fsevents: 2.3.3
       jiti: 2.6.1
+      terser: 5.49.0
+
+  vite@7.3.1(@types/node@24.13.3)(jiti@2.6.1)(terser@5.49.0):
+    dependencies:
+      esbuild: 0.27.2
+      fdir: 6.5.0(picomatch@4.0.3)
+      picomatch: 4.0.3
+      postcss: 8.5.6
+      rollup: 4.54.0
+      tinyglobby: 0.2.15
+    optionalDependencies:
+      '@types/node': 24.13.3
+      fsevents: 2.3.3
+      jiti: 2.6.1
+      terser: 5.49.0
 
   void-elements@3.1.0: {}
 
@@ -7331,6 +8039,8 @@ snapshots:
       string-width: 5.1.2
       strip-ansi: 7.1.2
 
+  xmlbuilder@15.1.1: {}
+
   y18n@5.0.8: {}
 
   yallist@3.1.1: {}
@@ -7339,6 +8049,8 @@ snapshots:
 
   yargs-parser@21.1.1: {}
 
+  yargs-parser@22.0.0: {}
+
   yargs@17.7.2:
     dependencies:
       cliui: 8.0.1