diff --git a/index.html b/index.html
index 08fa866..3bab48d 100644
--- a/index.html
+++ b/index.html
@@ -8,7 +8,7 @@
     <title>COMMIT4 — Retro LCD Game by Balaj Marius</title>
     <meta
       name="description"
-      content="Play COMMIT4, a retro LCD game by Balaj Marius. Defend your branch from bugs. Winner of Best Theme Interpretation at GitHub Game Off 2017."
+      content="A throwback to classic LCD games, built for GitHub Game Off 2017. Winner of Best Theme Interpretation."
     />
     <meta name="author" content="Balaj Marius" />
     <link rel="canonical" href="https://commit4.balajmarius.com/" />
@@ -20,14 +20,22 @@
     <meta property="og:title" content="COMMIT4 — Retro LCD Game by Balaj Marius" />
     <meta
       property="og:description"
-      content="Play COMMIT4, a retro LCD game by Balaj Marius. Defend your branch from bugs. Winner of Best Theme Interpretation at GitHub Game Off 2017."
+      content="A throwback to classic LCD games, built for GitHub Game Off 2017. Winner of Best Theme Interpretation."
     />
 
-    <meta name="twitter:card" content="summary" />
+    <meta property="og:image" content="https://commit4.balajmarius.com/og-image.png" />
+    <meta property="og:image:type" content="image/png" />
+    <meta property="og:image:width" content="1200" />
+    <meta property="og:image:height" content="630" />
+    <meta property="og:image:alt" content="Commit4 by Marius Bălaj, featuring a classic LCD game console." />
+
+    <meta name="twitter:card" content="summary_large_image" />
+    <meta name="twitter:image" content="https://commit4.balajmarius.com/og-image.png" />
+    <meta name="twitter:image:alt" content="Commit4 by Marius Bălaj, featuring a classic LCD game console." />
     <meta name="twitter:title" content="COMMIT4 — Retro LCD Game by Balaj Marius" />
     <meta
       name="twitter:description"
-      content="Play COMMIT4, a retro LCD game by Balaj Marius. Defend your branch from bugs. Winner of Best Theme Interpretation at GitHub Game Off 2017."
+      content="A throwback to classic LCD games, built for GitHub Game Off 2017. Winner of Best Theme Interpretation."
     />
 
     <script type="application/ld+json">
@@ -36,7 +44,8 @@
         "@type": ["VideoGame", "WebApplication"],
         "name": "COMMIT4",
         "url": "https://commit4.balajmarius.com/",
-        "description": "Play COMMIT4, a retro LCD game by Balaj Marius. Defend your branch from bugs. Winner of Best Theme Interpretation at GitHub Game Off 2017.",
+        "image": "https://commit4.balajmarius.com/og-image.png",
+        "description": "A throwback to classic LCD games, built for GitHub Game Off 2017. Winner of Best Theme Interpretation.",
         "creator": {
           "@type": "Person",
           "name": "Balaj Marius",
diff --git a/package-lock.json b/package-lock.json
index a9aa731..cb30058 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -12,9 +12,12 @@
         "@pixi/react": "^8.0.5",
         "es-toolkit": "^1.52.0",
         "howler": "^2.2.4",
+        "i18next": "^26.4.2",
         "pixi.js": "^8.20.1",
         "react": "^19.2.8",
         "react-dom": "^19.2.8",
+        "react-i18next": "^17.0.14",
+        "tailwind-merge": "^3.7.0",
         "usehooks-ts": "^3.1.1"
       },
       "devDependencies": {
@@ -63,6 +66,15 @@
         "node": ">=6.9.0"
       }
     },
+    "node_modules/@babel/runtime": {
+      "version": "7.29.7",
+      "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.29.7.tgz",
+      "integrity": "sha512-Nq8OhGWiZIZGV6hLHoyAKLLcJihP/xFeBMGJoUrxTX2psI8dCifzLhZISFb+VWS3wFMRDmCGw5R+dOySCqPLhw==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
     "node_modules/@commitlint/cli": {
       "version": "20.5.3",
       "resolved": "https://registry.npmjs.org/@commitlint/cli/-/cli-20.5.3.tgz",
@@ -1953,7 +1965,6 @@
       "cpu": [
         "ppc64"
       ],
-      "dev": true,
       "license": "Apache-2.0",
       "optional": true,
       "os": [
@@ -1970,7 +1981,6 @@
       "cpu": [
         "arm64"
       ],
-      "dev": true,
       "license": "Apache-2.0",
       "optional": true,
       "os": [
@@ -1987,7 +1997,6 @@
       "cpu": [
         "x64"
       ],
-      "dev": true,
       "license": "Apache-2.0",
       "optional": true,
       "os": [
@@ -2004,7 +2013,6 @@
       "cpu": [
         "arm64"
       ],
-      "dev": true,
       "license": "Apache-2.0",
       "optional": true,
       "os": [
@@ -2021,7 +2029,6 @@
       "cpu": [
         "x64"
       ],
-      "dev": true,
       "license": "Apache-2.0",
       "optional": true,
       "os": [
@@ -2038,7 +2045,6 @@
       "cpu": [
         "arm"
       ],
-      "dev": true,
       "license": "Apache-2.0",
       "optional": true,
       "os": [
@@ -2055,7 +2061,6 @@
       "cpu": [
         "arm64"
       ],
-      "dev": true,
       "license": "Apache-2.0",
       "optional": true,
       "os": [
@@ -2072,7 +2077,6 @@
       "cpu": [
         "loong64"
       ],
-      "dev": true,
       "license": "Apache-2.0",
       "optional": true,
       "os": [
@@ -2089,7 +2093,6 @@
       "cpu": [
         "mips64el"
       ],
-      "dev": true,
       "license": "Apache-2.0",
       "optional": true,
       "os": [
@@ -2106,7 +2109,6 @@
       "cpu": [
         "ppc64"
       ],
-      "dev": true,
       "license": "Apache-2.0",
       "optional": true,
       "os": [
@@ -2123,7 +2125,6 @@
       "cpu": [
         "riscv64"
       ],
-      "dev": true,
       "license": "Apache-2.0",
       "optional": true,
       "os": [
@@ -2140,7 +2141,6 @@
       "cpu": [
         "s390x"
       ],
-      "dev": true,
       "license": "Apache-2.0",
       "optional": true,
       "os": [
@@ -2157,7 +2157,6 @@
       "cpu": [
         "x64"
       ],
-      "dev": true,
       "license": "Apache-2.0",
       "optional": true,
       "os": [
@@ -2174,7 +2173,6 @@
       "cpu": [
         "arm64"
       ],
-      "dev": true,
       "license": "Apache-2.0",
       "optional": true,
       "os": [
@@ -2191,7 +2189,6 @@
       "cpu": [
         "x64"
       ],
-      "dev": true,
       "license": "Apache-2.0",
       "optional": true,
       "os": [
@@ -2208,7 +2205,6 @@
       "cpu": [
         "arm64"
       ],
-      "dev": true,
       "license": "Apache-2.0",
       "optional": true,
       "os": [
@@ -2225,7 +2221,6 @@
       "cpu": [
         "x64"
       ],
-      "dev": true,
       "license": "Apache-2.0",
       "optional": true,
       "os": [
@@ -2242,7 +2237,6 @@
       "cpu": [
         "x64"
       ],
-      "dev": true,
       "license": "Apache-2.0",
       "optional": true,
       "os": [
@@ -2259,7 +2253,6 @@
       "cpu": [
         "arm64"
       ],
-      "dev": true,
       "license": "Apache-2.0",
       "optional": true,
       "os": [
@@ -2276,7 +2269,6 @@
       "cpu": [
         "x64"
       ],
-      "dev": true,
       "license": "Apache-2.0",
       "optional": true,
       "os": [
@@ -2943,6 +2935,15 @@
       "integrity": "sha512-iARIBPgcQrwtEr+tALF+rapJ8qSc+Set2GJQl7xT1MQzWaVkFebdJhR3alVlSiUf5U7nAANKuj3aWpwerocD5w==",
       "license": "MIT"
     },
+    "node_modules/html-parse-stringify": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/html-parse-stringify/-/html-parse-stringify-4.0.1.tgz",
+      "integrity": "sha512-0zHsZJrK7S3K2aucXWL6ycoYJ/iNtIcFHC/nYQgFklPtrv5LpJctIiSCroWZWeuoXvuyFdzp6KzjJQ+OT5MfFw==",
+      "license": "MIT",
+      "funding": {
+        "url": "https://locize.com"
+      }
+    },
     "node_modules/husky": {
       "version": "9.1.7",
       "resolved": "https://registry.npmjs.org/husky/-/husky-9.1.7.tgz",
@@ -2959,6 +2960,34 @@
         "url": "https://github.com/sponsors/typicode"
       }
     },
+    "node_modules/i18next": {
+      "version": "26.4.2",
+      "resolved": "https://registry.npmjs.org/i18next/-/i18next-26.4.2.tgz",
+      "integrity": "sha512-RX+R0VLg13IbvRuJSxnqykUFS9vQZTl8wYpWPCIUDWVrSGjsQywB5Y+pjzrkboxGAuYfJZVH1InFTdgBdxq6ug==",
+      "funding": [
+        {
+          "type": "individual",
+          "url": "https://www.locize.com/i18next"
+        },
+        {
+          "type": "individual",
+          "url": "https://www.i18next.com/how-to/faq#i18next-is-awesome.-how-can-i-support-the-project"
+        },
+        {
+          "type": "individual",
+          "url": "https://www.locize.com"
+        }
+      ],
+      "license": "MIT",
+      "peerDependencies": {
+        "typescript": "^5 || ^6 || ^7"
+      },
+      "peerDependenciesMeta": {
+        "typescript": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/import-fresh": {
       "version": "3.3.1",
       "resolved": "https://registry.npmjs.org/import-fresh/-/import-fresh-3.3.1.tgz",
@@ -3800,6 +3829,33 @@
         "react": "^19.2.8"
       }
     },
+    "node_modules/react-i18next": {
+      "version": "17.0.14",
+      "resolved": "https://registry.npmjs.org/react-i18next/-/react-i18next-17.0.14.tgz",
+      "integrity": "sha512-ZpMBfJL3BiXPuYHj5QMY1GwvKJNhE1vCxOJQ8BoMBdHP5XONTfi/Qss1nuRlnFdIl72PKo2jPmw+fxuLjRFgaQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.29.7",
+        "html-parse-stringify": "^4.0.1",
+        "use-sync-external-store": "^1.6.0"
+      },
+      "peerDependencies": {
+        "i18next": ">= 26.2.0",
+        "react": ">= 16.8.0",
+        "typescript": "^5 || ^6 || ^7"
+      },
+      "peerDependenciesMeta": {
+        "react-dom": {
+          "optional": true
+        },
+        "react-native": {
+          "optional": true
+        },
+        "typescript": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/react-reconciler": {
       "version": "0.31.0",
       "resolved": "https://registry.npmjs.org/react-reconciler/-/react-reconciler-0.31.0.tgz",
@@ -4011,6 +4067,16 @@
         "url": "https://github.com/chalk/strip-ansi?sponsor=1"
       }
     },
+    "node_modules/tailwind-merge": {
+      "version": "3.7.0",
+      "resolved": "https://registry.npmjs.org/tailwind-merge/-/tailwind-merge-3.7.0.tgz",
+      "integrity": "sha512-XPPUyAc+cvspz3lHTcR/QgPfW2A0lv/xQNIjX3HGhLR+Nq2lHaLq5MtTesHn8GUr3W3DguT2KT5x3NVgRtYwmA==",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/dcastil"
+      }
+    },
     "node_modules/tailwindcss": {
       "version": "4.3.3",
       "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-4.3.3.tgz",
@@ -4082,7 +4148,7 @@
       "version": "7.0.2",
       "resolved": "https://registry.npmjs.org/typescript/-/typescript-7.0.2.tgz",
       "integrity": "sha512-8FYau96o3NKOhbjKi/qNvG/W5jhzxkbdm5sj9AbZ/5T5sWqn3hJgLfGx27sRKZWTvyzCP8dLRBTf5tBTSRVUNA==",
-      "dev": true,
+      "devOptional": true,
       "license": "Apache-2.0",
       "bin": {
         "tsc": "bin/tsc"
@@ -4120,6 +4186,15 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/use-sync-external-store": {
+      "version": "1.7.0",
+      "resolved": "https://registry.npmjs.org/use-sync-external-store/-/use-sync-external-store-1.7.0.tgz",
+      "integrity": "sha512-6L+EeigHMQhdaIPNIFUKwfWJSwWFQ8gJbJ2DLOs5sDIegTwR9fRxvnM3uciHKjIZhFz+KAv2emhWMRvDmMcY8A==",
+      "license": "MIT",
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"
+      }
+    },
     "node_modules/usehooks-ts": {
       "version": "3.1.1",
       "resolved": "https://registry.npmjs.org/usehooks-ts/-/usehooks-ts-3.1.1.tgz",
diff --git a/package.json b/package.json
index be95db0..52a970f 100644
--- a/package.json
+++ b/package.json
@@ -24,9 +24,12 @@
     "@pixi/react": "^8.0.5",
     "es-toolkit": "^1.52.0",
     "howler": "^2.2.4",
+    "i18next": "^26.4.2",
     "pixi.js": "^8.20.1",
     "react": "^19.2.8",
     "react-dom": "^19.2.8",
+    "react-i18next": "^17.0.14",
+    "tailwind-merge": "^3.7.0",
     "usehooks-ts": "^3.1.1"
   },
   "devDependencies": {
diff --git a/src/components/bugs.tsx b/src/components/bugs.tsx
index 7220561..1b4661e 100644
--- a/src/components/bugs.tsx
+++ b/src/components/bugs.tsx
@@ -1,13 +1,8 @@
-import { extend } from "@pixi/react";
-import { Container, Sprite } from "pixi.js";
-
 import { useGame } from "@/context/game";
 import { useAtlas } from "@/hooks/useAtlas";
 
 import { SPRITE_ALPHA_ACTIVE, SPRITE_ALPHA_DISABLED } from "@/utils/const";
 
-extend({ Container, Sprite });
-
 const BUG_LANES = [
   {
     x: 0,
diff --git a/src/components/bullets.tsx b/src/components/bullets.tsx
index 0d4c5d1..25b5f9f 100644
--- a/src/components/bullets.tsx
+++ b/src/components/bullets.tsx
@@ -1,13 +1,8 @@
-import { extend } from "@pixi/react";
-import { Container, Sprite } from "pixi.js";
-
 import { useAtlas } from "@/hooks/useAtlas";
 import { useGame } from "@/context/game";
 
 import { SPRITE_ALPHA_ACTIVE, SPRITE_ALPHA_DISABLED } from "@/utils/const";
 
-extend({ Container, Sprite });
-
 const BULLET_LANES = [
   {
     x: 0,
diff --git a/src/components/octo.tsx b/src/components/octo.tsx
index 1e66a2a..51eb1a3 100644
--- a/src/components/octo.tsx
+++ b/src/components/octo.tsx
@@ -1,13 +1,8 @@
-import { extend } from "@pixi/react";
-import { Container, Sprite } from "pixi.js";
-
 import { useGame } from "@/context/game";
 import { useAtlas } from "@/hooks/useAtlas";
 
 import { ACTOR_CELL_LAST, SPRITE_ALPHA_ACTIVE, SPRITE_ALPHA_DISABLED } from "@/utils/const";
 
-extend({ Container, Sprite });
-
 const OCTO_LANES = [
   {
     x: 62,
@@ -51,15 +46,14 @@ export const Octo = () => {
   const { textures } = useAtlas();
   const { lane, lanes, fireLane, gameState } = useGame();
 
-  const blast = lanes.findIndex((actor) => {
-    return actor.bug > ACTOR_CELL_LAST;
+  const isActive = gameState !== "off";
+  const blast = lanes.findIndex((laneState) => {
+    return laneState.bug > ACTOR_CELL_LAST;
   });
 
   return (
     <pixiContainer>
       {OCTO_LANES.map((cell, index) => {
-        const isActive = ["on", "dead"].includes(gameState);
-
         return (
           <pixiContainer key={cell.body} x={cell.x} y={cell.y}>
             <pixiSprite
diff --git a/src/components/score.tsx b/src/components/score.tsx
index 99cfddb..45e9e63 100644
--- a/src/components/score.tsx
+++ b/src/components/score.tsx
@@ -1,13 +1,8 @@
-import { extend } from "@pixi/react";
-import { Container, Sprite } from "pixi.js";
-
 import { useGame } from "@/context/game";
 import { useAtlas } from "@/hooks/useAtlas";
 
 import { SPRITE_ALPHA_ACTIVE, SPRITE_ALPHA_DISABLED } from "@/utils/const";
 
-extend({ Container, Sprite });
-
 const SCORE_X = 382;
 const SCORE_Y = 58;
 const SCORE_ADVANCE = 9;
diff --git a/src/context/game.tsx b/src/context/game.tsx
index 77ddb21..b75a473 100644
--- a/src/context/game.tsx
+++ b/src/context/game.tsx
@@ -191,9 +191,7 @@ export const GameProvider = ({ children }: GameProviderProps) => {
     fireEndsAt.current = null;
     setFireLane(null);
 
-    if (GAME_CONTROL_KEYS.includes(event.code)) {
-      play("game/keyPress");
-    }
+    play("game/keyPress");
     if (event.code === "Space") {
       handleFire();
     }
diff --git a/src/core/commit4.tsx b/src/core/commit4.tsx
index faeacc9..4b5a98b 100644
--- a/src/core/commit4.tsx
+++ b/src/core/commit4.tsx
@@ -1,26 +1,43 @@
 import { Suspense } from "react";
+import { useTranslation } from "react-i18next";
+import { useIntersectionObserver } from "usehooks-ts";
 
 import { useGame } from "@/context/game";
 
 import { Scene } from "@/core/scene";
+import { Layout } from "@/core/layout";
 
 export const Commit4 = () => {
+  const { t } = useTranslation();
+  const { ref, entry } = useIntersectionObserver();
   const { handleStart } = useGame();
 
+  const isCaseClip = Boolean(entry?.rootBounds && entry.boundingClientRect.top > entry.rootBounds.bottom);
+
   return (
-    <div className="relative mx-auto my-8 flex h-235 w-166 items-start justify-center after:absolute after:inset-0 after:bg-case after:bg-no-repeat after:drop-shadow-xl">
-      <div className="relative mt-23 h-75 w-100 bg-lcd bg-no-repeat after:absolute after:inset-0 after:bg-screen after:bg-no-repeat">
-        <Suspense>
-          <Scene />
-        </Suspense>
-      </div>
+    <Layout>
+      <div className="relative mx-auto flex h-235 w-166 justify-center after:absolute after:inset-0 after:bg-case after:bg-no-repeat after:drop-shadow-xl">
+        <div className="relative mt-23 h-75 w-100 bg-lcd after:absolute after:inset-0 after:bg-screen">
+          <Suspense>
+            <Scene />
+          </Suspense>
+        </div>
+
+        <button
+          type="button"
+          aria-label={t("game.start")}
+          className="absolute top-133 left-47.5 z-10 h-19 w-14 cursor-pointer bg-button opacity-0 outline-none active:opacity-100"
+          onClick={handleStart}
+        />
 
-      <button
-        type="button"
-        aria-label="Start/On"
-        className="absolute top-133 left-47.5 z-10 h-19 w-14 cursor-pointer bg-button bg-no-repeat opacity-0 outline-none active:opacity-100"
-        onClick={handleStart}
-      />
-    </div>
+        <div ref={ref} aria-hidden="true" className="pointer-events-none absolute bottom-0 h-px w-full" />
+
+        {isCaseClip ? (
+          <div aria-hidden="true" className="pointer-events-none absolute inset-0 z-20">
+            <div className="fixed bottom-0 h-24 w-full bg-linear-to-t from-white via-white/30 to-transparent" />
+          </div>
+        ) : null}
+      </div>
+    </Layout>
   );
 };
diff --git a/src/core/layout.tsx b/src/core/layout.tsx
new file mode 100644
index 0000000..eb31d7e
--- /dev/null
+++ b/src/core/layout.tsx
@@ -0,0 +1,56 @@
+import type { ReactNode } from "react";
+import { Trans, useTranslation } from "react-i18next";
+
+import { Typography } from "@/ui/typography";
+
+export type LayoutProps = {
+  children: ReactNode;
+};
+
+const links = {
+  url1: "https://github.blog/open-source/gaming/game-off-2017-winners/",
+  url2: "https://github.com/balajmarius/commit4",
+} as const;
+
+export const Layout = ({ children }: LayoutProps) => {
+  const { t } = useTranslation();
+
+  const renderers = {
+    version: <span className="text-blue-200" />,
+    url1: (
+      <a
+        href={links.url1}
+        target="_blank"
+        rel="noopener noreferrer"
+        className="font-serif whitespace-nowrap text-blue-200"
+      />
+    ),
+    url2: (
+      <a
+        href={links.url2}
+        target="_blank"
+        rel="noopener noreferrer"
+        className="font-serif whitespace-nowrap text-blue-200"
+      />
+    ),
+  };
+
+  return (
+    <main className="mx-auto grid max-w-7xl grid-cols-1 gap-8 px-6 py-8 text-blue-100 antialiased sm:px-12 sm:py-16 xl:grid-cols-12">
+      <header className="mx-auto flex w-full max-w-104 flex-col gap-4 self-start xl:sticky xl:top-36 xl:col-span-5 xl:mx-0">
+        <Typography variant="h1">
+          <Trans t={t} i18nKey="project.title" components={renderers} />
+        </Typography>
+        <Typography>
+          <Trans t={t} i18nKey="project.description" components={renderers} />
+        </Typography>
+        <Typography>{t("project.controls")}</Typography>
+        <Typography>
+          <Trans t={t} i18nKey="project.source" components={renderers} />
+        </Typography>
+      </header>
+
+      <div className="xl:col-span-7">{children}</div>
+    </main>
+  );
+};
diff --git a/src/core/scene.tsx b/src/core/scene.tsx
index 6f6c13b..634eb8e 100644
--- a/src/core/scene.tsx
+++ b/src/core/scene.tsx
@@ -1,5 +1,5 @@
 import { Application, extend } from "@pixi/react";
-import { Sprite } from "pixi.js";
+import { Container, Sprite } from "pixi.js";
 
 import { useAtlas } from "@/hooks/useAtlas";
 
@@ -11,9 +11,8 @@ import { Score } from "@/components/score";
 const SCENE_WIDTH = 400;
 const SCENE_HEIGHT = 300;
 
-// Registers Sprite so
-// <pixiSprite> is available in JSX.
-extend({ Sprite });
+// Register the Pixi elements used throughout the scene.
+extend({ Container, Sprite });
 
 export const Scene = () => {
   const atlas = useAtlas();
diff --git a/src/data/copy.json b/src/data/copy.json
new file mode 100644
index 0000000..187b765
--- /dev/null
+++ b/src/data/copy.json
@@ -0,0 +1,11 @@
+{
+  "project": {
+    "title": "Commit<version>4</version>",
+    "description": "A throwback to classic LCD games, built for GitHub Game Off 2017. Winner of <url1>Best Theme Interpretation</url1>.",
+    "controls": "Click Start/On or press Enter to start. Move with the left and right arrow keys, and press Space to commit.",
+    "source": "Star or fork the project on <url2>GitHub</url2>."
+  },
+  "game": {
+    "start": "Start/On"
+  }
+}
diff --git a/src/i18n.ts b/src/i18n.ts
new file mode 100644
index 0000000..4e0e988
--- /dev/null
+++ b/src/i18n.ts
@@ -0,0 +1,14 @@
+import i18n from "i18next";
+import { initReactI18next } from "react-i18next";
+
+import copy from "@/data/copy.json";
+
+i18n.use(initReactI18next).init({
+  lng: "en",
+  fallbackLng: "en",
+  resources: {
+    en: { translation: copy },
+  },
+});
+
+export default i18n;
diff --git a/src/main.tsx b/src/main.tsx
index a66937f..dd0fa8f 100644
--- a/src/main.tsx
+++ b/src/main.tsx
@@ -1,3 +1,5 @@
+import "@/i18n";
+
 import { isNil } from "es-toolkit";
 import { createRoot } from "react-dom/client";
 
diff --git a/src/static/css/main.css b/src/static/css/main.css
index ec1754c..da30cbc 100644
--- a/src/static/css/main.css
+++ b/src/static/css/main.css
@@ -1,6 +1,28 @@
 @import "tailwindcss";
 
+@font-face {
+  font-family: "General Sans";
+  src: url("../fonts/GeneralSans-Regular.woff2") format("woff2");
+  font-style: normal;
+  font-weight: 400;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: "Gambetta";
+  src: url("../fonts/Gambetta-MediumItalic.woff2") format("woff2");
+  font-style: italic;
+  font-weight: 500;
+  font-display: swap;
+}
+
 @theme {
+  --font-sans: "General Sans", sans-serif;
+  --font-serif: "Gambetta", Georgia, serif;
+
+  --color-blue-100: #34384c;
+  --color-blue-200: #0e63ff;
+
   --background-image-case: url("../images/bg-1@2x.png");
   --background-image-screen: url("../images/bg-2@2x.png");
   --background-image-button: url("../images/bg-3@2x.png");
diff --git a/src/static/fonts/Gambetta-MediumItalic.woff2 b/src/static/fonts/Gambetta-MediumItalic.woff2
new file mode 100644
index 0000000..91cccf0
Binary files /dev/null and b/src/static/fonts/Gambetta-MediumItalic.woff2 differ
diff --git a/src/static/fonts/GeneralSans-Regular.woff2 b/src/static/fonts/GeneralSans-Regular.woff2
new file mode 100644
index 0000000..2bc4672
Binary files /dev/null and b/src/static/fonts/GeneralSans-Regular.woff2 differ
diff --git a/src/ui/typography.tsx b/src/ui/typography.tsx
new file mode 100644
index 0000000..eece3af
--- /dev/null
+++ b/src/ui/typography.tsx
@@ -0,0 +1,35 @@
+import type { HTMLAttributes, ReactNode } from "react";
+import { twMerge } from "tailwind-merge";
+
+export type TypographyVariant = "h1" | "h2" | "body1" | "body2";
+
+export type TypographyVariantMapping = Record<TypographyVariant, string>;
+
+export type TypographyProps = {
+  children: ReactNode;
+  variant?: TypographyVariant;
+} & HTMLAttributes<HTMLElement>;
+
+const typographyVariantMapping = {
+  h1: "h1",
+  h2: "h2",
+  body1: "p",
+  body2: "p",
+} as const;
+
+const typographyVariantClassNames: TypographyVariantMapping = {
+  h1: "font-serif text-3xl/tight tracking-tight text-balance italic",
+  h2: "text-2xl/tight tracking-tight text-balance",
+  body1: "text-base/relaxed text-pretty",
+  body2: "text-sm/relaxed text-pretty",
+};
+
+export const Typography = ({ variant = "body1", className, children, ...props }: TypographyProps) => {
+  const Component = typographyVariantMapping[variant];
+
+  return (
+    <Component {...props} className={twMerge(typographyVariantClassNames[variant], className)}>
+      {children}
+    </Component>
+  );
+};
diff --git a/static/og-image.png b/static/og-image.png
new file mode 100644
index 0000000..c040e5d
Binary files /dev/null and b/static/og-image.png differ