diff --git a/index.html b/index.html
index 4e39ba8..ca62508 100644
--- a/index.html
+++ b/index.html
@@ -1,12 +1,129 @@
 <!DOCTYPE html>
-<html>
+<html lang="ko">
     <head>
         <meta charset="UTF-8">
+        <meta name="viewport" content="width=device-width, initial-scale=1.0">
         <title>DevOps</title>
-        <lang>kr</lang>
+        <style>
+            :root {
+                color-scheme: light;
+                --bg: #f5f7fb;
+                --surface: rgba(255, 255, 255, 0.78);
+                --surface-border: rgba(15, 23, 42, 0.08);
+                --text: #0f172a;
+                --muted: #475569;
+                --accent: #2563eb;
+                --accent-hover: #1d4ed8;
+                --shadow: 0 24px 60px rgba(15, 23, 42, 0.08);
+            }
+
+            * {
+                box-sizing: border-box;
+            }
+
+            html {
+                background:
+                    radial-gradient(circle at top, rgba(37, 99, 235, 0.12), transparent 38%),
+                    linear-gradient(180deg, #ffffff 0%, var(--bg) 100%);
+            }
+
+            body {
+                margin: 0 auto;
+                min-height: 100vh;
+                max-width: 760px;
+                padding: 80px 24px;
+                font-family: "Segoe UI", "Apple SD Gothic Neo", "Noto Sans KR", sans-serif;
+                color: var(--text);
+                line-height: 1.7;
+            }
+
+            body > * {
+                position: relative;
+                z-index: 1;
+            }
+
+            h1 {
+                margin: 0 0 12px;
+                font-size: clamp(2.25rem, 5vw, 3.5rem);
+                line-height: 1.05;
+                letter-spacing: -0.04em;
+            }
+
+            p {
+                margin: 0;
+                font-size: 1.05rem;
+                color: var(--muted);
+            }
+
+            hr {
+                width: 100%;
+                margin: 28px 0;
+                border: 0;
+                border-top: 1px solid rgba(148, 163, 184, 0.4);
+            }
+
+            h2 {
+                margin: 0 0 16px;
+                font-size: 1.2rem;
+                line-height: 1.25;
+                letter-spacing: -0.02em;
+            }
+
+            ul {
+                margin: 0;
+                padding: 0;
+                list-style: none;
+                display: grid;
+                gap: 12px;
+            }
+
+            li {
+                padding: 16px 18px;
+                border: 1px solid var(--surface-border);
+                border-radius: 16px;
+                background: var(--surface);
+                box-shadow: var(--shadow);
+                backdrop-filter: blur(10px);
+            }
+
+            a {
+                color: var(--accent);
+                text-decoration: none;
+                font-weight: 600;
+                transition: color 0.2s ease, transform 0.2s ease;
+            }
+
+            a:hover,
+            a:focus-visible {
+                color: var(--accent-hover);
+                transform: translateX(2px);
+            }
+
+            a:focus-visible {
+                outline: 2px solid rgba(37, 99, 235, 0.35);
+                outline-offset: 4px;
+                border-radius: 8px;
+            }
+
+            @media (max-width: 640px) {
+                body {
+                    padding: 56px 18px;
+                }
+
+                li {
+                    padding: 14px 16px;
+                }
+            }
+        </style>
     </head>
     <body>
         <h1>DevOps</h1>
         <p>Welcome to the DevOps page!</p>
+        <hr>
+        <h2>DevOps 팀원 소개</h2>
+        <ul>
+            <li><a href="https://app.notion.com/p/333ee16541c5809bbb8bfd2450572018?source=copy_link">허강석 - 개발 리더</a></li>
+            <li><a href="https://app.notion.com/p/333ee16541c580c78075e428140b4de8?source=copy_link">성준서 - PM 리더</a></li>
+        </ul>
     </body>
-</html>
\ No newline at end of file
+</html>
