diff --git a/src/index.css b/src/index.css
new file mode 100644
index 0000000..1f58fc4
--- /dev/null
+++ b/src/index.css
@@ -0,0 +1,7 @@
+*, *::before, *::after { box-sizing: border-box; }
+html, body, #root { margin: 0; height: 100%; }
+body {
+  font-family: sans-serif;
+  background: linear-gradient(to bottom, #a8d5e8, #4a9e6a);
+  min-height: 100vh;
+}
diff --git a/src/main.tsx b/src/main.tsx
index 5d410f3..520b520 100644
--- a/src/main.tsx
+++ b/src/main.tsx
@@ -1,5 +1,6 @@
 import { StrictMode } from 'react'
 import { createRoot } from 'react-dom/client'
+import './index.css'
 import App from './App'
 
 createRoot(document.getElementById('root')!).render(
diff --git a/src/pages/TitleScreen.module.css b/src/pages/TitleScreen.module.css
new file mode 100644
index 0000000..b6da4e4
--- /dev/null
+++ b/src/pages/TitleScreen.module.css
@@ -0,0 +1,52 @@
+.frame {
+  position: fixed;
+  inset: 1rem;
+  border: 2px solid black;
+  border-radius: 2rem;
+  background: transparent;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  overflow: hidden;
+}
+
+.title {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  line-height: 1;
+}
+
+.titleWord {
+  font-size: 2.5rem;
+  font-weight: 300;
+  letter-spacing: 0.1em;
+  color: #1a1a1a;
+}
+
+.titleNumber {
+  font-size: 8rem;
+  font-weight: 700;
+  color: #1a1a1a;
+  line-height: 0.9;
+}
+
+.buttonRow {
+  position: absolute;
+  bottom: 2rem;
+  left: 1.5rem;
+  right: 1.5rem;
+}
+
+.newGameButton {
+  width: 100%;
+  padding: 1rem;
+  background: #a8d5e8;
+  border: none;
+  border-radius: 1rem;
+  font-size: 1.25rem;
+  font-weight: 600;
+  cursor: pointer;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
+}
diff --git a/src/pages/TitleScreen.tsx b/src/pages/TitleScreen.tsx
index d344f84..a1259b6 100644
--- a/src/pages/TitleScreen.tsx
+++ b/src/pages/TitleScreen.tsx
@@ -1,12 +1,21 @@
+import styles from './TitleScreen.module.css'
+
 interface Props {
   onNewGame: () => void
 }
 
 export default function TitleScreen({ onNewGame }: Props) {
   return (
-    <div>
-      <h1>Black 7</h1>
-      <button onClick={onNewGame}>New Game</button>
+    <div className={styles.frame}>
+      <div className={styles.title}>
+        <span className={styles.titleWord}>Black</span>
+        <span className={styles.titleNumber}>7</span>
+      </div>
+      <div className={styles.buttonRow}>
+        <button className={styles.newGameButton} onClick={onNewGame}>
+          New Game
+        </button>
+      </div>
     </div>
   )
 }
diff --git a/src/vite-env.d.ts b/src/vite-env.d.ts
new file mode 100644
index 0000000..11f02fe
--- /dev/null
+++ b/src/vite-env.d.ts
@@ -0,0 +1 @@
+/// <reference types="vite/client" />