diff --git a/components/mdx-components.tsx b/components/mdx-components.tsx
index 9193c06..529b2aa 100644
--- a/components/mdx-components.tsx
+++ b/components/mdx-components.tsx
@@ -1,8 +1,16 @@
 import Image from "next/image"
 import { useMDXComponent } from "next-contentlayer/hooks"
+import { Code } from "bright"
+
+Code.theme = {
+  dark: "github-dark",
+  light: "github-light",
+  lightSelector: "html.light",
+}
 
 const components = {
   Image,
+  pre: Code,
 }
 
 interface MdxProps {
diff --git a/package.json b/package.json
index 3b76966..fd3548f 100644
--- a/package.json
+++ b/package.json
@@ -16,6 +16,7 @@
     "@types/react-dom": "18.2.1",
     "@vercel/analytics": "^1.0.0",
     "autoprefixer": "10.4.14",
+    "bright": "^0.8.0",
     "contentlayer": "^0.3.2",
     "eslint": "8.39.0",
     "eslint-config-next": "13.3.1",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 50c80c1..f353a48 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -19,6 +19,9 @@ dependencies:
   autoprefixer:
     specifier: 10.4.14
     version: 10.4.14(postcss@8.4.23)
+  bright:
+    specifier: ^0.8.0
+    version: 0.8.0(react@18.2.0)
   contentlayer:
     specifier: ^0.3.2
     version: 0.3.2(esbuild@0.17.18)
@@ -67,6 +70,10 @@ packages:
       regenerator-runtime: 0.13.11
     dev: false
 
+  /@code-hike/lighter@0.6.6:
+    resolution: {integrity: sha512-dLkSpowP4NaWDUgay3Mebb8V+wYqVGRD+Tl8wSfWdtIH0z4OUU3UznSsmvvGpCgkdUIF5DhOPRGRowqkNWQsrg==}
+    dev: false
+
   /@contentlayer/cli@0.3.2(esbuild@0.17.18):
     resolution: {integrity: sha512-KLzB2z3Klbl4bU7VTJ8EaY1d17GCBFtwgvtNAVLOqUJ4LRw46+jT+qBMk8gyy7R1xDNF2H1a/yGYs8t8rlFVmg==}
     dependencies:
@@ -1369,6 +1376,16 @@ packages:
       fill-range: 7.0.1
     dev: false
 
+  /bright@0.8.0(react@18.2.0):
+    resolution: {integrity: sha512-ChYAnh3UokVnDKTsZJojfqvO0z46QspQogCYpb6Z6l2lil0CtMxocKG1OEOWJRfHc6gtwGAfricWy69bzcpNwA==}
+    peerDependencies:
+      react: ^18
+    dependencies:
+      '@code-hike/lighter': 0.6.6
+      react: 18.2.0
+      server-only: 0.0.1
+    dev: false
+
   /browserslist@4.21.5:
     resolution: {integrity: sha512-tUkiguQGW7S3IhB7N+c2MV/HZPSCPAAiYBZXLsBhFB/PCy6ZKKsZrmBayHV9fdGV/ARIfJ14NkxKzRDjvp7L6w==}
     engines: {node: ^6 || ^7 || ^8 || ^9 || ^10 || ^11 || ^12 || >=13.7}
@@ -4142,6 +4159,10 @@ packages:
       lru-cache: 6.0.0
     dev: false
 
+  /server-only@0.0.1:
+    resolution: {integrity: sha512-qepMx2JxAa5jjfzxG79yPPq+8BuFToHd1hm7kI+Z4zAq1ftQiP7HcxMhDDItrbtwVeLg/cY2JnKnrcFkmiswNA==}
+    dev: false
+
   /shebang-command@2.0.0:
     resolution: {integrity: sha512-kHxr2zZpYtdmrN1qDjrrX/Z1rR1kG8Dx+gkpK1G4eXmvXswmcE1hTWBWYUzlraYw1/yZp6YuDY77YtvbN0dmDA==}
     engines: {node: '>=8'}