diff --git a/src/assets/logo-128.png b/src/assets/logo-128.png
index fc39320..54d1778 100644
Binary files a/src/assets/logo-128.png and b/src/assets/logo-128.png differ
diff --git a/src/assets/logo-16.png b/src/assets/logo-16.png
index 9bf4b05..4d8f180 100644
Binary files a/src/assets/logo-16.png and b/src/assets/logo-16.png differ
diff --git a/src/assets/logo-378.png b/src/assets/logo-378.png
deleted file mode 100644
index fad5a09..0000000
Binary files a/src/assets/logo-378.png and /dev/null differ
diff --git a/src/assets/logo-48.png b/src/assets/logo-48.png
index 996b163..2f96d27 100644
Binary files a/src/assets/logo-48.png and b/src/assets/logo-48.png differ
diff --git a/src/assets/logo-96-128.png b/src/assets/logo-96-128.png
index de5604f..7abd611 100644
Binary files a/src/assets/logo-96-128.png and b/src/assets/logo-96-128.png differ
diff --git a/src/assets/logo-96.png b/src/assets/logo-96.png
new file mode 100644
index 0000000..928a6e7
Binary files /dev/null and b/src/assets/logo-96.png differ
diff --git a/src/popup/popup.html b/src/popup/popup.html
index a8ebf53..de988c8 100644
--- a/src/popup/popup.html
+++ b/src/popup/popup.html
@@ -11,7 +11,7 @@
 				<img src="../assets/logo-48.png" alt="QuickCite logo" />
 			</div>
 			<h1 class="ml-4 font-display text-5xl font-bold tracking-tight">
-				<span class="text-transparent bg-clip-text bg-gradient-to-r from-white via-sky-400 to-white animate-gradient-x">QuickCite</span>
+				<span class="text-transparent bg-clip-text bg-gradient-to-r from-[#861cff] via-[#ff34db] to-[#861cff] animate-gradient-x">QuickCite</span>
 			</h1>
 		</div>
 
diff --git a/web/src/app/favicon.ico b/web/src/app/favicon.ico
index 317c09c..6e55dd4 100644
Binary files a/web/src/app/favicon.ico and b/web/src/app/favicon.ico differ
diff --git a/web/src/components/FeedbackForm.jsx b/web/src/components/FeedbackForm.jsx
index ca4b2c9..1756a32 100644
--- a/web/src/components/FeedbackForm.jsx
+++ b/web/src/components/FeedbackForm.jsx
@@ -2,120 +2,112 @@ import React, { useId, useState } from 'react'
 import { Button } from '@/components/Button'
 
 export function FeedbackForm() {
-  const emailId = useId()
-  const feedbackId = useId()
-  const honeypotId = useId()
-  const [feedback, setFeedback] = useState('')
-  const [email, setEmail] = useState('')
-  const [honeypot, setHoneypot] = useState('')
-  const [isSubmitting, setIsSubmitting] = useState(false)
-  const [submitStatus, setSubmitStatus] = useState(null)
+	const emailId = useId()
+	const feedbackId = useId()
+	const honeypotId = useId()
+	const [feedback, setFeedback] = useState('')
+	const [email, setEmail] = useState('')
+	const [honeypot, setHoneypot] = useState('')
+	const [isSubmitting, setIsSubmitting] = useState(false)
+	const [submitStatus, setSubmitStatus] = useState(null)
 
-  const handleSubmit = async (e) => {
-    e.preventDefault()
-    if (honeypot) {
-      // If honeypot is filled, silently reject the submission
-      return
-    }
-    setIsSubmitting(true)
-    setSubmitStatus(null)
+	const handleSubmit = async (e) => {
+		e.preventDefault()
+		if (honeypot) {
+			// If honeypot is filled, silently reject the submission
+			return
+		}
+		setIsSubmitting(true)
+		setSubmitStatus(null)
 
-    try {
-      const response = await fetch('https://flows.apps.frsn.io/webhook/quickcite-feedback', {
-        method: 'POST',
-        headers: {
-          'Content-Type': 'application/json',
-        },
-        body: JSON.stringify({ feedback, email }),
-      })
+		try {
+			const response = await fetch('https://flows.apps.frsn.io/webhook/quickcite-feedback', {
+				method: 'POST',
+				headers: {
+					'Content-Type': 'application/json',
+				},
+				body: JSON.stringify({ feedback, email }),
+			})
 
-      if (!response.ok) {
-        throw new Error('Network response was not ok')
-      }
+			if (!response.ok) {
+				throw new Error('Network response was not ok')
+			}
 
-      setSubmitStatus('success')
-      setFeedback('')
-      setEmail('')
-    } catch (error) {
-      console.error('Error submitting form:', error)
-      setSubmitStatus('error')
-    } finally {
-      setIsSubmitting(false)
-    }
-  }
+			setSubmitStatus('success')
+			setFeedback('')
+			setEmail('')
+		} catch (error) {
+			console.error('Error submitting form:', error)
+			setSubmitStatus('error')
+		} finally {
+			setIsSubmitting(false)
+		}
+	}
 
-  return (
-    <form onSubmit={handleSubmit} className="relative isolate mt-8 space-y-4">
-      {/* Feedback text area */}
-      <div className="relative">
-        <label htmlFor={feedbackId} className="sr-only">
-          Feedback
-        </label>
-        <textarea
-          required
-          id={feedbackId}
-          name="feedback"
-          rows="3"
-          maxLength="250"
-          placeholder="Your feedback (max 250 characters)"
-          value={feedback}
-          onChange={(e) => setFeedback(e.target.value)}
-          className="peer w-full bg-transparent px-4 py-2.5 text-base text-white placeholder:text-gray-500 focus:outline-none sm:text-[0.8125rem]/6 rounded-lg resize-none"
-        />
-        <div className="absolute inset-0 -z-10 rounded-lg transition peer-focus:ring-4 peer-focus:ring-sky-300/15" />
-        <div className="absolute inset-0 -z-10 rounded-lg bg-white/2.5 ring-1 ring-white/15 transition peer-focus:ring-sky-300" />
-        <div className="text-right text-[0.625rem] text-gray-400 mt-1 mr-1">{feedback.length}/250</div>
-      </div>
+	return (
+		<form onSubmit={handleSubmit} className="relative isolate mt-8 space-y-4">
+			{/* Feedback text area */}
+			<div className="relative">
+				<label htmlFor={feedbackId} className="sr-only">
+					Feedback
+				</label>
+				<textarea
+					required
+					id={feedbackId}
+					name="feedback"
+					rows="3"
+					maxLength="250"
+					placeholder="Your feedback (max 250 characters)"
+					value={feedback}
+					onChange={(e) => setFeedback(e.target.value)}
+					className="peer w-full bg-transparent px-4 py-2.5 text-base text-white placeholder:text-gray-500 focus:outline-none sm:text-[0.8125rem]/6 rounded-lg resize-none"
+				/>
+				<div className="absolute inset-0 -z-10 rounded-lg transition peer-focus:ring-4 peer-focus:ring-purple-300/15" />
+				<div className="absolute inset-0 -z-10 rounded-lg bg-white/2.5 ring-1 ring-white/15 transition peer-focus:ring-purple-300" />
+				<div className="text-right text-[0.625rem] text-gray-400 mt-1 mr-1">{feedback.length}/250</div>
+			</div>
 
-      {/* Email input */}
-      <div className="relative">
-        <label htmlFor={emailId} className="sr-only">
-          Email address
-        </label>
-        <input
-          required
-          type="email"
-          autoComplete="email"
-          name="email"
-          id={emailId}
-          placeholder="Email address"
-          value={email}
-          onChange={(e) => setEmail(e.target.value)}
-          className="peer w-full bg-transparent px-4 py-2.5 text-base text-white placeholder:text-gray-500 focus:outline-none sm:text-[0.8125rem]/6 rounded-lg"
-        />
-        <div className="absolute inset-0 -z-10 rounded-lg transition peer-focus:ring-4 peer-focus:ring-sky-300/15" />
-        <div className="absolute inset-0 -z-10 rounded-lg bg-white/2.5 ring-1 ring-white/15 transition peer-focus:ring-sky-300" />
-      </div>
+			{/* Email input */}
+			<div className="relative">
+				<label htmlFor={emailId} className="sr-only">
+					Email address
+				</label>
+				<input
+					required
+					type="email"
+					autoComplete="email"
+					name="email"
+					id={emailId}
+					placeholder="Email address"
+					value={email}
+					onChange={(e) => setEmail(e.target.value)}
+					className="peer w-full bg-transparent px-4 py-2.5 text-base text-white placeholder:text-gray-500 focus:outline-none sm:text-[0.8125rem]/6 rounded-lg"
+				/>
+				<div className="absolute inset-0 -z-10 rounded-lg transition peer-focus:ring-4 peer-focus:ring-purple-300/15" />
+				<div className="absolute inset-0 -z-10 rounded-lg bg-white/2.5 ring-1 ring-white/15 transition peer-focus:ring-purple-300" />
+			</div>
 
-      {/* Honeypot field */}
-      <div className="hidden">
-        <label htmlFor={honeypotId} className="sr-only">
-          Leave this field empty
-        </label>
-        <input
-          type="text"
-          id={honeypotId}
-          name="honeypot"
-          value={honeypot}
-          onChange={(e) => setHoneypot(e.target.value)}
-          tabIndex="-1"
-          autoComplete="off"
-        />
-      </div>
+			{/* Honeypot field */}
+			<div className="hidden">
+				<label htmlFor={honeypotId} className="sr-only">
+					Leave this field empty
+				</label>
+				<input type="text" id={honeypotId} name="honeypot" value={honeypot} onChange={(e) => setHoneypot(e.target.value)} tabIndex="-1" autoComplete="off" />
+			</div>
 
-      {/* Submit button */}
-      <div className="flex justify-end">
-        <Button type="submit" arrow disabled={isSubmitting}>
-          {isSubmitting ? 'Submitting...' : 'Submit Feedback'}
-        </Button>
-      </div>
+			{/* Submit button */}
+			<div className="flex justify-end">
+				<Button type="submit" arrow disabled={isSubmitting}>
+					{isSubmitting ? 'Submitting...' : 'Submit Feedback'}
+				</Button>
+			</div>
 
-      {/* Submission status message */}
-      {submitStatus && (
-        <div className={`text-sm ${submitStatus === 'success' ? 'text-green-500' : 'text-red-500'}`}>
-          {submitStatus === 'success' ? 'Feedback submitted successfully!' : 'Error submitting feedback. Please try again.'}
-        </div>
-      )}
-    </form>
-  )
+			{/* Submission status message */}
+			{submitStatus && (
+				<div className={`text-sm ${submitStatus === 'success' ? 'text-green-500' : 'text-red-500'}`}>
+					{submitStatus === 'success' ? 'Feedback submitted successfully!' : 'Error submitting feedback. Please try again.'}
+				</div>
+			)}
+		</form>
+	)
 }
diff --git a/web/src/components/IconLink.jsx b/web/src/components/IconLink.jsx
index 9e4d47a..35d0196 100644
--- a/web/src/components/IconLink.jsx
+++ b/web/src/components/IconLink.jsx
@@ -1,25 +1,18 @@
 import Link from 'next/link'
 import clsx from 'clsx'
 
-export function IconLink({
-  children,
-  className,
-  compact = false,
-  icon: Icon,
-  ...props
-}) {
-  return (
-    <Link
-      {...props}
-      className={clsx(
-        className,
-        'group relative isolate flex items-center rounded-lg px-2 py-0.5 text-[0.8125rem]/6 font-medium text-white/30 transition-colors hover:text-sky-300',
-        compact ? 'gap-x-2' : 'gap-x-3',
-      )}
-    >
-      <span className="absolute inset-0 -z-10 scale-75 rounded-lg bg-white/5 opacity-0 transition group-hover:scale-100 group-hover:opacity-100" />
-      {Icon && <Icon className="h-4 w-4 flex-none" />}
-      <span className="self-baseline text-white">{children}</span>
-    </Link>
-  )
+export function IconLink({ children, className, compact = false, icon: Icon, ...props }) {
+	return (
+		<Link
+			{...props}
+			className={clsx(
+				className,
+				'group relative isolate flex items-center rounded-lg px-2 py-0.5 text-[0.8125rem]/6 font-medium text-white/30 transition-colors hover:text-purple-300',
+				compact ? 'gap-x-2' : 'gap-x-3',
+			)}>
+			<span className="absolute inset-0 -z-10 scale-75 rounded-lg bg-white/5 opacity-0 transition group-hover:scale-100 group-hover:opacity-100" />
+			{Icon && <Icon className="h-4 w-4 flex-none" />}
+			<span className="self-baseline text-white">{children}</span>
+		</Link>
+	)
 }
diff --git a/web/src/components/Intro.jsx b/web/src/components/Intro.jsx
index d0ed347..f4bd77a 100644
--- a/web/src/components/Intro.jsx
+++ b/web/src/components/Intro.jsx
@@ -64,7 +64,7 @@ const AnimatedGradientText = ({ children }) => (
 			}
 		`}</style>
 		<h1 className="ml-4 font-display text-5xl font-bold tracking-tight">
-			<span className="text-transparent bg-clip-text bg-gradient-to-r from-white via-sky-400 to-white animate-gradient-x">{children}</span>
+			<span className="text-transparent bg-clip-text bg-gradient-to-r from-[#861cff] via-[#ff34db] to-[#861cff] animate-gradient-x">{children}</span>
 		</h1>
 	</>
 )
@@ -74,7 +74,7 @@ export function Intro() {
 		<>
 			<div>
 				<Link href="/" className="flex items-center">
-					<Logo className="h-16 rotate-90 w-auto" />
+					<Logo className="h-16 w-auto" />
 					<AnimatedGradientText>QuickCite</AnimatedGradientText>
 				</Link>
 			</div>
@@ -89,7 +89,7 @@ export function Intro() {
 					<span className="text-green-400">m</span>
 					<span className="text-red-400">e</span>
 				</span>{' '}
-				extension to build <span className="text-sky-300">context rich links</span>
+				extension to build <span className="text-purple-300">context rich links</span>
 			</h1>
 			{/* <div className="mt-6 mb-6 bg-blue-600 border-l-4 border-blue-400 text-blue-200 p-4 rounded">
 				<div className="flex items-center">
diff --git a/web/src/components/Layout.jsx b/web/src/components/Layout.jsx
index f06a338..aa443af 100644
--- a/web/src/components/Layout.jsx
+++ b/web/src/components/Layout.jsx
@@ -5,100 +5,76 @@ import { StarField } from '@/components/StarField'
 import { ThemeToggle } from '@/components/ThemeToggle'
 
 function Timeline() {
-  let id = useId()
+	let id = useId()
 
-  return (
-    <div className="pointer-events-none absolute inset-0 z-50 overflow-hidden lg:right-[calc(max(2rem,50%-38rem)+40rem)] lg:min-w-[32rem] lg:overflow-visible">
-      <svg
-        className="absolute left-[max(0px,calc(50%-18.125rem))] top-0 h-full w-1.5 lg:left-full lg:ml-1 xl:left-auto xl:right-1 xl:ml-0"
-        aria-hidden="true"
-      >
-        <defs>
-          <pattern id={id} width="6" height="8" patternUnits="userSpaceOnUse">
-            <path
-              d="M0 0H6M0 8H6"
-              className="stroke-sky-900/10 xl:stroke-white/10 dark:stroke-white/10"
-              fill="none"
-            />
-          </pattern>
-        </defs>
-        <rect width="100%" height="100%" fill={`url(#${id})`} />
-      </svg>
-    </div>
-  )
+	return (
+		<div className="pointer-events-none absolute inset-0 z-50 overflow-hidden lg:right-[calc(max(2rem,50%-38rem)+40rem)] lg:min-w-[32rem] lg:overflow-visible">
+			<svg className="absolute left-[max(0px,calc(50%-18.125rem))] top-0 h-full w-1.5 lg:left-full lg:ml-1 xl:left-auto xl:right-1 xl:ml-0" aria-hidden="true">
+				<defs>
+					<pattern id={id} width="6" height="8" patternUnits="userSpaceOnUse">
+						<path d="M0 0H6M0 8H6" className="stroke-purple-900/10 xl:stroke-white/10 dark:stroke-white/10" fill="none" />
+					</pattern>
+				</defs>
+				<rect width="100%" height="100%" fill={`url(#${id})`} />
+			</svg>
+		</div>
+	)
 }
 
 function Glow() {
-  let id = useId()
+	let id = useId()
 
-  return (
-    <div className="absolute inset-0 -z-10 overflow-hidden bg-gray-950 lg:right-[calc(max(2rem,50%-38rem)+40rem)] lg:min-w-[32rem]">
-      <svg
-        className="absolute -bottom-48 left-[-40%] h-[80rem] w-[180%] lg:-right-40 lg:bottom-auto lg:left-auto lg:top-[-40%] lg:h-[180%] lg:w-[80rem]"
-        aria-hidden="true"
-      >
-        <defs>
-          <radialGradient id={`${id}-desktop`} cx="100%">
-            <stop offset="0%" stopColor="rgba(56, 189, 248, 0.3)" />
-            <stop offset="53.95%" stopColor="rgba(0, 71, 255, 0.09)" />
-            <stop offset="100%" stopColor="rgba(10, 14, 23, 0)" />
-          </radialGradient>
-          <radialGradient id={`${id}-mobile`} cy="100%">
-            <stop offset="0%" stopColor="rgba(56, 189, 248, 0.3)" />
-            <stop offset="53.95%" stopColor="rgba(0, 71, 255, 0.09)" />
-            <stop offset="100%" stopColor="rgba(10, 14, 23, 0)" />
-          </radialGradient>
-        </defs>
-        <rect
-          width="100%"
-          height="100%"
-          fill={`url(#${id}-desktop)`}
-          className="hidden lg:block"
-        />
-        <rect
-          width="100%"
-          height="100%"
-          fill={`url(#${id}-mobile)`}
-          className="lg:hidden"
-        />
-      </svg>
-      <div className="absolute inset-x-0 bottom-0 right-0 h-px bg-white mix-blend-overlay lg:left-auto lg:top-0 lg:h-auto lg:w-px" />
-    </div>
-  )
+	return (
+		<div className="absolute inset-0 -z-10 overflow-hidden bg-gray-950 lg:right-[calc(max(2rem,50%-38rem)+40rem)] lg:min-w-[32rem]">
+			<svg className="absolute -bottom-48 left-[-40%] h-[80rem] w-[180%] lg:-right-40 lg:bottom-auto lg:left-auto lg:top-[-40%] lg:h-[180%] lg:w-[80rem]" aria-hidden="true">
+				<defs>
+					<radialGradient id={`${id}-desktop`} cx="100%">
+						<stop offset="0%" stopColor="rgba(56, 189, 248, 0.3)" />
+						<stop offset="53.95%" stopColor="rgba(0, 71, 255, 0.09)" />
+						<stop offset="100%" stopColor="rgba(10, 14, 23, 0)" />
+					</radialGradient>
+					<radialGradient id={`${id}-mobile`} cy="100%">
+						<stop offset="0%" stopColor="rgba(56, 189, 248, 0.3)" />
+						<stop offset="53.95%" stopColor="rgba(0, 71, 255, 0.09)" />
+						<stop offset="100%" stopColor="rgba(10, 14, 23, 0)" />
+					</radialGradient>
+				</defs>
+				<rect width="100%" height="100%" fill={`url(#${id}-desktop)`} className="hidden lg:block" />
+				<rect width="100%" height="100%" fill={`url(#${id}-mobile)`} className="lg:hidden" />
+			</svg>
+			<div className="absolute inset-x-0 bottom-0 right-0 h-px bg-white mix-blend-overlay lg:left-auto lg:top-0 lg:h-auto lg:w-px" />
+		</div>
+	)
 }
 
 function FixedSidebar({ main, footer }) {
-  return (
-    <div className="relative flex-none overflow-hidden px-6 lg:pointer-events-none lg:fixed lg:inset-0 lg:z-40 lg:flex lg:px-0">
-      <Glow />
-      <div className="relative flex w-full lg:pointer-events-auto lg:mr-[calc(max(2rem,50%-38rem)+40rem)] lg:min-w-[32rem] lg:overflow-y-auto lg:overflow-x-hidden lg:pl-[max(4rem,calc(50%-38rem))]">
-        <div className="mx-auto max-w-lg lg:mx-0 lg:flex lg:w-96 lg:max-w-none lg:flex-col lg:before:flex-1 lg:before:pt-6">
-          <div className="pb-16 pt-20 sm:pb-20 sm:pt-32 lg:py-20">
-            <div className="relative">
-              <StarField className="-right-44 top-14" />
-              {main}
-            </div>
-          </div>
-          <div className="flex flex-1 items-end justify-center pb-4 lg:justify-start lg:pb-6">
-            {footer}
-          </div>
-        </div>
-      </div>
-    </div>
-  )
+	return (
+		<div className="relative flex-none overflow-hidden px-6 lg:pointer-events-none lg:fixed lg:inset-0 lg:z-40 lg:flex lg:px-0">
+			<Glow />
+			<div className="relative flex w-full lg:pointer-events-auto lg:mr-[calc(max(2rem,50%-38rem)+40rem)] lg:min-w-[32rem] lg:overflow-y-auto lg:overflow-x-hidden lg:pl-[max(4rem,calc(50%-38rem))]">
+				<div className="mx-auto max-w-lg lg:mx-0 lg:flex lg:w-96 lg:max-w-none lg:flex-col lg:before:flex-1 lg:before:pt-6">
+					<div className="pb-16 pt-20 sm:pb-20 sm:pt-32 lg:py-20">
+						<div className="relative">
+							<StarField className="-right-44 top-14" />
+							{main}
+						</div>
+					</div>
+					<div className="flex flex-1 items-end justify-center pb-4 lg:justify-start lg:pb-6">{footer}</div>
+				</div>
+			</div>
+		</div>
+	)
 }
 
 export function Layout({ children }) {
-  return (
-    <>
-      <FixedSidebar main={<Intro />} footer={<IntroFooter />} />
-      <ThemeToggle />
-      <div className="relative flex-auto">
-        <Timeline />
-        <main className="space-y-20 py-20 sm:space-y-32 sm:py-32">
-          {children}
-        </main>
-      </div>
-    </>
-  )
+	return (
+		<>
+			<FixedSidebar main={<Intro />} footer={<IntroFooter />} />
+			<ThemeToggle />
+			<div className="relative flex-auto">
+				<Timeline />
+				<main className="space-y-20 py-20 sm:space-y-32 sm:py-32">{children}</main>
+			</div>
+		</>
+	)
 }
diff --git a/web/src/components/Logo.jsx b/web/src/components/Logo.jsx
index 107f0f9..eca5312 100644
--- a/web/src/components/Logo.jsx
+++ b/web/src/components/Logo.jsx
@@ -1,43 +1,6 @@
-import { useId } from 'react'
+import Image from 'next/image'
+import logo from '../images/logo.svg'
 
 export function Logo(props) {
-  let id = useId()
-
-  return (
-    <svg viewBox="0 0 32 32" fill="none" aria-hidden="true" {...props}>
-      <title>Commit</title>
-      <mask id={`${id}-m`} fill="#fff">
-        <path
-          fillRule="evenodd"
-          clipRule="evenodd"
-          d="M31.75 18h-8.13a8 8 0 01-15.5 0H0a16 16 0 0031.75 0zm0-4h-8.13a8 8 0 00-15.5 0H0a16 16 0 0131.75 0z"
-        />
-      </mask>
-      <path
-        fillRule="evenodd"
-        clipRule="evenodd"
-        d="M31.75 18h-8.13a8 8 0 01-15.5 0H0a16 16 0 0031.75 0zm0-4h-8.13a8 8 0 00-15.5 0H0a16 16 0 0131.75 0z"
-        fill={`url(#${id}-g)`}
-      />
-      <path
-        d="M31.75 18l1 .12.13-1.12h-1.13v1zm-8.13 0v-1h-.77l-.2.75.97.25zm-15.5 0l.98-.25-.2-.75h-.77v1zM0 18v-1h-1.13l.14 1.12L0 18zm23.62-4l-.96.25.19.75h.77v-1zm8.13 0v1h1.13l-.14-1.12-.99.12zM8.13 14v1h.77l.2-.75-.97-.25zM0 14l-1-.12-.13 1.12H0v-1zm31.75 3h-8.13v2h8.13v-2zm-9.1.75A7 7 0 0115.89 23v2a9 9 0 008.71-6.75l-1.93-.5zM15.89 23a7 7 0 01-6.78-5.25l-1.94.5A9 9 0 0015.88 25v-2zm-7.75-6H0v2h8.13v-2zm7.75 14A15 15 0 01.99 17.88l-1.98.24A17 17 0 0015.88 33v-2zm14.88-13.12A15 15 0 0115.88 31v2a17 17 0 0016.86-14.88l-1.98-.24zM23.62 15h8.13v-2h-8.13v2zm-7.74-6a7 7 0 016.78 5.25l1.93-.5A9 9 0 0015.88 7v2zM9.1 14.25A7 7 0 0115.88 9V7a9 9 0 00-8.72 6.75l1.94.5zM0 15h8.13v-2H0v2zm1-.88A15 15 0 0115.87 1v-2A17 17 0 00-1 13.88l1.98.24zM15.87 1a15 15 0 0114.88 13.12l1.98-.24A17 17 0 0015.88-1v2z"
-        fill="#fff"
-        fillOpacity={0.2}
-        mask={`url(#${id}-m)`}
-      />
-      <defs>
-        <linearGradient
-          id={`${id}-g`}
-          x1={15.88}
-          y1={0}
-          x2={15.88}
-          y2={32}
-          gradientUnits="userSpaceOnUse"
-        >
-          <stop stopColor="#AAE4FF" />
-          <stop offset={1} stopColor="#38BDF8" />
-        </linearGradient>
-      </defs>
-    </svg>
-  )
+	return <Image width={56} src={logo} alt="QuickCite" {...props} />
 }
diff --git a/web/src/components/SignUpForm.jsx b/web/src/components/SignUpForm.jsx
index 5611982..6cf9c60 100644
--- a/web/src/components/SignUpForm.jsx
+++ b/web/src/components/SignUpForm.jsx
@@ -3,27 +3,27 @@ import { useId } from 'react'
 import { Button } from '@/components/Button'
 
 export function SignUpForm() {
-  let id = useId()
+	let id = useId()
 
-  return (
-    <form className="relative isolate mt-8 flex items-center pr-1">
-      <label htmlFor={id} className="sr-only">
-        Email address
-      </label>
-      <input
-        required
-        type="email"
-        autoComplete="email"
-        name="email"
-        id={id}
-        placeholder="Email address"
-        className="peer w-0 flex-auto bg-transparent px-4 py-2.5 text-base text-white placeholder:text-gray-500 focus:outline-none sm:text-[0.8125rem]/6"
-      />
-      <Button type="submit" arrow>
-        Get updates
-      </Button>
-      <div className="absolute inset-0 -z-10 rounded-lg transition peer-focus:ring-4 peer-focus:ring-sky-300/15" />
-      <div className="absolute inset-0 -z-10 rounded-lg bg-white/2.5 ring-1 ring-white/15 transition peer-focus:ring-sky-300" />
-    </form>
-  )
+	return (
+		<form className="relative isolate mt-8 flex items-center pr-1">
+			<label htmlFor={id} className="sr-only">
+				Email address
+			</label>
+			<input
+				required
+				type="email"
+				autoComplete="email"
+				name="email"
+				id={id}
+				placeholder="Email address"
+				className="peer w-0 flex-auto bg-transparent px-4 py-2.5 text-base text-white placeholder:text-gray-500 focus:outline-none sm:text-[0.8125rem]/6"
+			/>
+			<Button type="submit" arrow>
+				Get updates
+			</Button>
+			<div className="absolute inset-0 -z-10 rounded-lg transition peer-focus:ring-4 peer-focus:ring-purple-300/15" />
+			<div className="absolute inset-0 -z-10 rounded-lg bg-white/2.5 ring-1 ring-white/15 transition peer-focus:ring-purple-300" />
+		</form>
+	)
 }
diff --git a/web/src/components/SparkleIcon.jsx b/web/src/components/SparkleIcon.jsx
index 50dfb68..6467772 100644
--- a/web/src/components/SparkleIcon.jsx
+++ b/web/src/components/SparkleIcon.jsx
@@ -1,14 +1,14 @@
 export function SparkleIcon(props) {
-  return (
-    <svg viewBox="0 0 16 16" aria-hidden="true" {...props}>
-      <path
-        fill="#38BDF8"
-        d="M5.338 9.805c.11.418.439.747.857.857C7.282 10.948 8 11.44 8 12s-.718 1.052-1.805 1.338c-.418.11-.747.439-.857.857C5.052 15.281 4.56 16 4 16s-1.052-.718-1.338-1.805a1.205 1.205 0 0 0-.856-.857C.718 13.052 0 12.56 0 12s.718-1.052 1.806-1.338c.417-.11.746-.439.856-.857C2.948 8.718 3.441 8 4 8c.56 0 1.052.718 1.338 1.805Z"
-      />
-      <path
-        fill="#7DD3FC"
-        d="M12.717 2.432c.1.42.43.75.85.852C15.026 3.633 16 4.27 16 5s-.975 1.367-2.432 1.716c-.42.101-.75.432-.851.852C12.367 9.025 11.729 10 11 10c-.729 0-1.367-.975-1.716-2.432-.101-.42-.431-.75-.851-.852C6.975 6.367 6 5.73 6 5c0-.73.975-1.367 2.433-1.717.42-.1.75-.43.85-.85C9.634.974 10.272 0 11 0c.73 0 1.367.975 1.717 2.432Z"
-      />
-    </svg>
-  )
+	return (
+		<svg viewBox="0 0 16 16" aria-hidden="true" {...props}>
+			<path
+				fill="#a861fa"
+				d="M5.338 9.805c.11.418.439.747.857.857C7.282 10.948 8 11.44 8 12s-.718 1.052-1.805 1.338c-.418.11-.747.439-.857.857C5.052 15.281 4.56 16 4 16s-1.052-.718-1.338-1.805a1.205 1.205 0 0 0-.856-.857C.718 13.052 0 12.56 0 12s.718-1.052 1.806-1.338c.417-.11.746-.439.856-.857C2.948 8.718 3.441 8 4 8c.56 0 1.052.718 1.338 1.805Z"
+			/>
+			<path
+				fill="#b47af7"
+				d="M12.717 2.432c.1.42.43.75.85.852C15.026 3.633 16 4.27 16 5s-.975 1.367-2.432 1.716c-.42.101-.75.432-.851.852C12.367 9.025 11.729 10 11 10c-.729 0-1.367-.975-1.716-2.432-.101-.42-.431-.75-.851-.852C6.975 6.367 6 5.73 6 5c0-.73.975-1.367 2.433-1.717.42-.1.75-.43.85-.85C9.634.974 10.272 0 11 0c.73 0 1.367.975 1.717 2.432Z"
+			/>
+		</svg>
+	)
 }
diff --git a/web/src/images/logo.svg b/web/src/images/logo.svg
new file mode 100644
index 0000000..0100b6e
--- /dev/null
+++ b/web/src/images/logo.svg
@@ -0,0 +1 @@
+<svg version="1.2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1052 1053" width="1052" height="1053"><defs><linearGradient id="P" gradientUnits="userSpaceOnUse"/><linearGradient id="g1" x2="1" href="#P" gradientTransform="matrix(585.704,-260.512,380.909,856.389,113.361,748.09)"><stop stop-color="#861cff"/><stop offset="1" stop-color="#ff34db"/></linearGradient><linearGradient id="g2" x2="1" href="#P" gradientTransform="matrix(-1036.225,-166.779,166.773,-1036.185,1044.097,610.366)"><stop stop-color="#861cff"/><stop offset="1" stop-color="#ff34db"/></linearGradient><linearGradient id="g3" x2="1" href="#P" gradientTransform="matrix(-557.552,282.632,-439.354,-866.722,507.628,568.995)"><stop stop-color="#861cff"/><stop offset="1" stop-color="#ff34db"/></linearGradient></defs><style>.a{fill:url(#g1)}.b{fill:url(#g2)}.c{opacity:.4;fill:url(#g3)}</style><path class="a" d="m835.3 902.1c-84.1-15.6-129.6-54.5-147-71.3q-2.2-2.1-4.3-4.3-2.1-2.1-4.1-4.4-2.1-2.1-4.1-4.4c-1.7-2-3.5-3.9-5.2-6-1.3-1.5-2.5-3-3.7-4.6-0.9-1-1.8-2.1-2.6-3.2-0.3-0.4-0.5-0.7-0.8-1.1q-2-2.5-3.9-5-6.5-8.8-12.2-17.8c-0.9-1.2-1.6-2.4-2.4-3.7 0-0.2-0.1-0.3-0.2-0.4-4.2-6.7-8.1-13.4-11.7-20.1l-0.1 0.1c-27.3 12.8-57.4 20.9-89.4 23.1-139.2 9.7-259.9-95.2-269.6-234.3-5.9-84.2 30.1-161.5 90.2-211.7q-5.1-3.1-10.1-6-5.1-2.9-10-5.7c-3.4-1.8-6.7-3.6-10.1-5.4q-5-2.6-10-5c-3.4-1.7-6.7-3.4-10-4.9-3.4-1.6-6.7-3.1-10-4.6-2.2-1-4.4-2-6.7-2.9-2.2-1.1-4.5-2-6.7-2.9q-8.1-3.5-16.3-6.5c-2.7-1.1-5.5-2.2-8.3-3.2q-4.1-1.5-8.2-2.8c-2.3-0.9-4.7-1.7-7-2.4-14.8-5-29.2-9.2-43.2-12.6-3.3-0.9-6.5-1.7-9.7-2.4-5.8-1.4-11.5-2.6-17.1-3.8q-0.9-0.2-1.8-0.4c-3.2-0.6-6.2-1.2-9.3-1.7q-4.6-0.9-9-1.6c-3.1-0.6-6-1-9-1.5q-4.2-0.7-8.4-1.3-4.5-0.6-8.8-1.2-4.1-0.5-8.3-1c-5.5-0.6-10.8-1.1-15.9-1.6q-8.3-0.7-16-1.3c-4.5-0.3-8.9-0.6-13.1-0.7-11 28.1-19.8 56.5-26.3 85.2-1.7 7.5-3.3 15.1-4.6 22.7q-3.7 19.9-5.9 39.8-2 16.4-2.9 32.7c-1.7 30.2-1 60.3 1.9 89.9 1.4 14 3.3 27.9 5.7 41.7 4.8 27.6 11.6 54.7 20.3 80.9q4.4 13.2 9.3 26c40 103.3 109.9 193.1 204.1 254 2.4 1.5 4.7 3 7.1 4.5 4.8 3 9.6 5.9 14.5 8.7 17 9.8 34.5 18.6 52.4 26.3q11.5 5 23.2 9.4c6.4 2.4 12.9 4.7 19.5 6.9 2.7 0.9 5.5 1.8 8.3 2.7 7.7 2.4 15.5 4.7 23.4 6.7q6.2 1.6 12.5 3.1c5.4 1.3 10.8 2.5 16.3 3.6 4.4 0.9 8.7 1.8 13.1 2.5 62.3 11.1 126.8 11.1 190.4 0.2q5.7-1 11.4-2.1c54.1-10.4 107.4-28.9 157.9-55.2q12.3-6.5 24.5-13.6 12.1-7.1 24-14.9 0 0 0 0 2.4-1.6 4.8-3.2c-18.3-1-35.2-3.1-50.8-6z"/><path fill-rule="evenodd" class="b" d="m1049.4 490.4c6.4 91.8-11.2 179.7-47.5 257.6-43.4 13.7-111.1 26.1-187.6 6.4-47.2-12.2-83.5-32.9-108.2-50.3 49-49.8 77.2-119.6 71.9-194.7-9.8-139.2-130.4-244.2-269.6-234.4-55.1 3.8-104.8 25.1-144.2 57.9v0.1q-5.1-3.1-10.1-6-5.1-2.9-10.1-5.6c-3.3-1.9-6.7-3.7-10-5.5-3.4-1.7-6.7-3.4-10-5-3.4-1.7-6.7-3.4-10-4.9-3.4-1.6-6.7-3.1-10-4.6-2.2-1-4.4-2-6.7-2.9-2.3-1.1-4.5-2-6.7-2.9q-8.1-3.5-16.3-6.5c-2.7-1.1-5.6-2.2-8.3-3.1q-4.1-1.6-8.2-2.9c-2.4-0.9-4.7-1.7-7-2.4-14.8-5-29.2-9.2-43.2-12.6-3.3-0.9-6.5-1.7-9.7-2.4-5.8-1.4-11.5-2.6-17.1-3.8q-0.9-0.2-1.9-0.3c-3.1-0.7-6.2-1.3-9.2-1.8q-4.6-0.9-9.1-1.6c-3-0.6-5.9-1-8.9-1.5q-4.2-0.7-8.4-1.3-4.5-0.6-8.8-1.2-4.3-0.5-8.3-1c-5.5-0.6-10.8-1.2-15.9-1.6q-8.3-0.7-16-1.3c-4.5-0.3-8.9-0.6-13.1-0.7-11 28.1-19.8 56.5-26.3 85.2-1.7 7.5-3.2 15.1-4.6 22.7q-3.7 19.9-5.9 39.8-2 16.4-2.9 32.7c-1.7 30.2-1 60.3 1.9 89.9q2.1 21 5.7 41.7c4.8 27.6 11.6 54.6 20.3 80.9q4.4 13.2 9.3 26c39.9 103.3 109.9 193.1 204.1 254 2.4 1.5 4.7 3 7.1 4.5 4.8 3 9.6 5.9 14.5 8.7 17 9.8 34.5 18.6 52.4 26.3q11.5 5 23.2 9.4c6.4 2.4 12.9 4.7 19.5 6.9 2.7 0.9 5.5 1.8 8.3 2.7 7.7 2.4 15.5 4.7 23.4 6.7q6.2 1.6 12.5 3.1c5.4 1.3 10.8 2.5 16.3 3.6 4.4 0.9 8.7 1.7 13.1 2.5 62.3 11.1 126.8 11.1 190.4 0.2q5.7-1 11.4-2.1c54.1-10.4 107.4-28.9 157.9-55.3 8.2-4.2 16.4-8.8 24.5-13.5q12.1-7.1 24-14.9 0 0 0-0.1c0.6 0.1 1.2 0.2 1.8 0.2-84.7 78.9-196 130.3-320.5 139-289.1 20.3-539.8-197.7-560-486.7-20.2-289.1 197.7-539.8 486.8-560.1 289.1-20.2 539.7 197.8 560 486.8zm-163.2 417.7c-1.6 1.1-3.3 2.1-4.9 3.1q2.4-1.5 4.8-3.1c0 0 0 0 0.1 0z"/><path class="c" d="m886.2 908.1c-1.6 1.1-3.3 2.1-4.9 3.1q-0.1 0.1 0 0.1c-7.9 5.2-15.9 10.1-24 14.8-8.1 4.8-16.3 9.3-24.5 13.6-50.5 26.4-103.8 44.8-157.9 55.3q-5.7 1.1-11.4 2.1c-63.6 10.9-128.1 10.8-190.4-0.2-4.4-0.8-8.7-1.6-13.1-2.5-5.5-1.1-10.9-2.3-16.3-3.6q-6.3-1.5-12.5-3.2c-7.9-2-15.7-4.2-23.4-6.6-2.8-0.9-5.6-1.8-8.3-2.7-6.6-2.2-13.1-4.5-19.5-6.9q-11.7-4.4-23.2-9.4-26.9-11.6-52.4-26.3c-4.9-2.8-9.7-5.7-14.5-8.7-2.4-1.5-4.7-3-7.1-4.5-94.2-60.9-164.2-150.8-204.1-254q-4.9-12.9-9.3-26c-8.7-26.3-15.5-53.3-20.3-80.9q-3.6-20.7-5.7-41.7c-3-29.6-3.6-59.7-1.9-89.9 0.6-10.9 1.6-21.8 2.9-32.7q2.2-19.9 5.9-39.8c1.3-7.6 2.9-15.2 4.6-22.8 6.5-28.6 15.2-57 26.3-85.1 4.2 0.2 8.6 0.4 13.1 0.7q7.7 0.6 16 1.2 7.7 0.8 15.9 1.7 4.1 0.5 8.3 1 4.3 0.6 8.7 1.2 4.3 0.6 8.5 1.3c3 0.4 5.9 0.9 8.9 1.4q4.5 0.8 9.1 1.7c3 0.5 6.1 1.1 9.2 1.7q1 0.2 1.9 0.4c5.6 1.2 11.3 2.4 17 3.8 3.3 0.7 6.5 1.5 9.8 2.3 14 3.5 28.4 7.7 43.1 12.6 2.4 0.8 4.7 1.6 7.1 2.4q4 1.4 8.1 2.9c2.8 1 5.7 2.1 8.4 3.2q8.1 3 16.2 6.4c2.3 1 4.5 1.9 6.8 2.9 2.3 1 4.5 2 6.7 3 3.3 1.5 6.6 3 10 4.6 3.3 1.5 6.6 3.2 10 4.8q5 2.5 10 5.1c3.3 1.8 6.7 3.6 10 5.4q5 2.8 10.1 5.7c3.3 1.9 6.7 3.9 10.1 5.9q10.5 6.4 20.9 13.4c29 19.3 53.9 40 75 60.2 17.9 18.1 41.1 45.2 66.3 88.8 39.7 68.5 36.3 95.1 69.7 175.4 4.1 9.8 15.3 45.6 36.9 85.1 3.9 7.2 8.1 14.4 12.7 21.6q0.7 1.3 1.6 2.6 5.8 9 12.3 17.8c1.3 1.7 2.5 3.3 3.8 5 0.3 0.4 0.6 0.7 0.9 1.1q1.2 1.7 2.5 3.2 1.9 2.4 3.8 4.6c1.7 2 3.4 4 5.2 6 1.3 1.5 2.7 3 4 4.4q2.1 2.3 4.2 4.4 2.1 2.2 4.3 4.3c17.4 16.8 62.9 55.7 147 71.3 15.6 2.9 32.5 5 50.8 6 0 0 0.1 0 0.1 0z"/></svg>
\ No newline at end of file
diff --git a/web/src/styles/typography.css b/web/src/styles/typography.css
index 7ef71f1..7e0f150 100644
--- a/web/src/styles/typography.css
+++ b/web/src/styles/typography.css
@@ -1,285 +1,285 @@
 .typography {
-  --typography-body: theme(colors.gray.600);
-  --typography-headings: theme(colors.gray.900);
-  --typography-quotes: theme(colors.gray.500);
-  --typography-quotes-border: theme(colors.gray.200);
-  --typography-links: theme(colors.sky.500);
-  --typography-link-hover: theme(colors.sky.600);
-  --typography-link-underline: theme(colors.sky.400 / 0.4);
-  --typography-link-hover-underline: theme(colors.sky.600 / 0.4);
-  --typography-pre: theme(colors.gray.300);
-  --typography-pre-shadow: theme(boxShadow.md);
-  --typography-bold: theme(colors.gray.900);
-  --typography-kbd: theme(colors.gray.600);
-  --typography-kbd-border: theme(colors.gray.200);
-  --typography-kbd-bg: theme(colors.gray.50);
-  --typography-code: theme(colors.gray.900);
-  --typography-hr: theme(colors.gray.900 / 0.05);
-  --typography-th-borders: theme(colors.gray.900 / 0.2);
-  --typography-td-borders: theme(colors.gray.900 / 0.05);
-
-  --shiki-color-text: theme(colors.white);
-  --shiki-token-constant: theme(colors.emerald.300);
-  --shiki-token-string: theme(colors.emerald.300);
-  --shiki-token-comment: theme(colors.gray.500);
-  --shiki-token-keyword: theme(colors.sky.300);
-  --shiki-token-parameter: theme(colors.pink.300);
-  --shiki-token-function: theme(colors.violet.300);
-  --shiki-token-string-expression: theme(colors.emerald.300);
-  --shiki-token-punctuation: theme(colors.gray.200);
-
-  .dark & {
-    --typography-body: theme(colors.gray.300);
-    --typography-headings: theme(colors.white);
-    --typography-quotes: theme(colors.gray.400);
-    --typography-quotes-border: theme(colors.gray.800);
-    --typography-links: theme(colors.sky.400);
-    --typography-link-hover: theme(colors.white);
-    --typography-link-underline: theme(colors.sky.400 / 0.4);
-    --typography-link-hover-underline: theme(colors.white / 0.4);
-    --typography-pre: theme(colors.gray.400);
-    --typography-pre-shadow: inset 0 0 0 1px theme(colors.white / 0.1);
-    --typography-bold: theme(colors.white);
-    --typography-kbd: theme(colors.white);
-    --typography-kbd-border: theme(colors.gray.800);
-    --typography-kbd-bg: theme(colors.gray.900);
-    --typography-code: theme(colors.white);
-    --typography-hr: theme(colors.white / 0.1);
-    --typography-th-borders: theme(colors.white / 0.1);
-    --typography-td-borders: theme(colors.white / 0.05);
-  }
-
-  color: var(--typography-body);
-  font-size: theme(fontSize.sm);
-  line-height: theme(lineHeight.6);
-
-  h2 {
-    font-family: theme(fontFamily.display);
-    color: var(--typography-headings);
-    font-weight: theme(fontWeight.semibold);
-    font-size: theme(fontSize.xl);
-    line-height: theme(lineHeight.8);
-  }
-
-  /* Headings */
-  h3 {
-    color: var(--typography-headings);
-    font-family: theme(fontFamily.display);
-    font-weight: theme(fontWeight.semibold);
-    font-size: theme(fontSize.base);
-    line-height: theme(lineHeight.6);
-    display: flex;
-    align-items: center;
-    column-gap: theme(gap.3);
-  }
-
-  h3 > svg {
-    flex: none;
-    width: theme(width.4);
-    height: theme(height.4);
-  }
-
-  h4 {
-    color: var(--typography-headings);
-    font-family: theme(fontFamily.display);
-    font-weight: theme(fontWeight.semibold);
-    font-size: theme(fontSize.sm);
-    line-height: theme(lineHeight.6);
-  }
-
-  /* Quotes */
-  blockquote {
-    border-left: 3px solid var(--typography-quotes-border);
-    padding-left: theme(padding.6);
-    color: var(--typography-quotes);
-  }
-
-  /* Links */
-  a:not(h2 a) {
-    font-weight: theme(fontWeight.semibold);
-    color: var(--typography-links);
-    text-decoration: underline;
-    text-decoration-color: var(--typography-link-underline);
-    text-underline-offset: theme(textUnderlineOffset.2);
-    transition-property: color, text-decoration-color;
-    transition-duration: theme(transitionDuration.DEFAULT);
-    transition-timing-function: theme(transitionTimingFunction.DEFAULT);
-
-    &:hover {
-      color: var(--typography-link-hover);
-      text-decoration-color: var(--typography-link-hover-underline);
-    }
-  }
-
-  /* Inline text */
-  strong {
-    font-weight: theme(fontWeight.semibold);
-  }
-
-  strong:not(a strong) {
-    color: var(--typography-bold);
-  }
-
-  kbd {
-    display: inline-block;
-    border-radius: theme(borderRadius.DEFAULT);
-    background-color: var(--typography-kbd-bg);
-    padding: 0 theme(padding[1.5]);
-    font-family: theme(fontFamily.mono);
-    font-size: theme(fontSize.xs);
-    font-weight: 400;
-    line-height: theme(lineHeight.5);
-    color: var(--typography-kbd);
-    box-shadow: inset 0 0 0 1px var(--typography-kbd-border);
-  }
-
-  code {
-    font-family: theme(fontFamily.mono);
-  }
-
-  code:not(a code, pre code) {
-    color: var(--typography-code);
-  }
-
-  code:not(pre code) {
-    font-size: calc(12 / 14 * 1em);
-    line-height: theme(lineHeight.none);
-    font-weight: theme(fontWeight.bold);
-
-    &::before {
-      content: '`';
-    }
-
-    &::after {
-      content: '`';
-    }
-  }
-
-  /* Code blocks */
-  pre {
-    display: flex;
-    background-color: theme(colors.gray.900);
-    border-radius: theme(borderRadius.lg);
-    overflow-x: auto;
-    box-shadow: var(--typography-pre-shadow);
-  }
-
-  pre code {
-    flex: none;
-    padding: theme(padding.6);
-    font-size: 0.8125rem;
-    line-height: theme(lineHeight.6);
-    color: var(--typography-pre);
-  }
-
-  /* <hr> */
-  hr {
-    border-color: var(--typography-hr);
-  }
-
-  /* Lists */
-  ul,
-  ol {
-    padding-left: 1.375rem;
-  }
-
-  ul {
-    list-style-type: disc;
-  }
-
-  ol {
-    list-style-type: decimal;
-  }
-
-  li {
-    padding-left: 0.625rem;
-  }
-
-  li::marker {
-    color: theme(colors.gray.400);
-  }
-
-  ol > li::marker {
-    font-size: theme(fontSize.xs);
-    font-weight: theme(fontWeight.semibold);
-  }
-
-  /* Tables */
-  table {
-    width: theme(width.full);
-    text-align: left;
-  }
-
-  thead {
-    border-bottom: 1px solid var(--typography-th-borders);
-  }
-
-  thead th {
-    font-weight: theme(fontWeight.semibold);
-    padding-top: 0;
-    padding-bottom: calc(theme(padding.2) - 1px);
-    color: var(--typography-headings);
-  }
-
-  tbody tr {
-    border-bottom: 1px solid var(--typography-td-borders);
-  }
-
-  tbody td {
-    padding-top: calc(theme(padding.2) - 1px);
-    padding-bottom: theme(padding.2);
-  }
-
-  :is(th, td):first-child {
-    padding-left: 0;
-    padding-right: theme(padding.2);
-  }
-
-  :is(th, td):last-child {
-    padding-left: theme(padding.2);
-    padding-right: 0;
-  }
-
-  :is(th, td):not(:first-child, :last-child) {
-    padding-left: theme(padding.2);
-    padding-right: theme(padding.2);
-  }
-
-  /* Spacing */
-  > * {
-    margin-top: theme(margin.6);
-  }
-
-  :is(h2, h3, h4, blockquote, pre, table) {
-    margin-top: theme(margin.8);
-  }
-
-  hr {
-    margin-top: calc(theme(margin.16) - 1px);
-  }
-
-  li {
-    margin-top: theme(margin.4);
-  }
-
-  li > :is(p, ol, ul) {
-    margin-top: theme(margin.4);
-  }
-
-  :is(h2, h3, h4) + * {
-    margin-top: theme(margin.4);
-  }
-
-  :is(blockquote, pre, table) + * {
-    margin-top: theme(margin.8);
-  }
-
-  hr + * {
-    margin-top: theme(margin.16);
-  }
-
-  > :first-child,
-  li > :first-child {
-    margin-top: 0;
-  }
+	--typography-body: theme(colors.gray.600);
+	--typography-headings: theme(colors.gray.900);
+	--typography-quotes: theme(colors.gray.500);
+	--typography-quotes-border: theme(colors.gray.200);
+	--typography-links: theme(colors.purple.500);
+	--typography-link-hover: theme(colors.purple.600);
+	--typography-link-underline: theme(colors.purple.400 / 0.4);
+	--typography-link-hover-underline: theme(colors.purple.600 / 0.4);
+	--typography-pre: theme(colors.gray.300);
+	--typography-pre-shadow: theme(boxShadow.md);
+	--typography-bold: theme(colors.gray.900);
+	--typography-kbd: theme(colors.gray.600);
+	--typography-kbd-border: theme(colors.gray.200);
+	--typography-kbd-bg: theme(colors.gray.50);
+	--typography-code: theme(colors.gray.900);
+	--typography-hr: theme(colors.gray.900 / 0.05);
+	--typography-th-borders: theme(colors.gray.900 / 0.2);
+	--typography-td-borders: theme(colors.gray.900 / 0.05);
+
+	--shiki-color-text: theme(colors.white);
+	--shiki-token-constant: theme(colors.emerald.300);
+	--shiki-token-string: theme(colors.emerald.300);
+	--shiki-token-comment: theme(colors.gray.500);
+	--shiki-token-keyword: theme(colors.purple.300);
+	--shiki-token-parameter: theme(colors.pink.300);
+	--shiki-token-function: theme(colors.violet.300);
+	--shiki-token-string-expression: theme(colors.emerald.300);
+	--shiki-token-punctuation: theme(colors.gray.200);
+
+	.dark & {
+		--typography-body: theme(colors.gray.300);
+		--typography-headings: theme(colors.white);
+		--typography-quotes: theme(colors.gray.400);
+		--typography-quotes-border: theme(colors.gray.800);
+		--typography-links: theme(colors.purple.400);
+		--typography-link-hover: theme(colors.white);
+		--typography-link-underline: theme(colors.purple.400 / 0.4);
+		--typography-link-hover-underline: theme(colors.white / 0.4);
+		--typography-pre: theme(colors.gray.400);
+		--typography-pre-shadow: inset 0 0 0 1px theme(colors.white / 0.1);
+		--typography-bold: theme(colors.white);
+		--typography-kbd: theme(colors.white);
+		--typography-kbd-border: theme(colors.gray.800);
+		--typography-kbd-bg: theme(colors.gray.900);
+		--typography-code: theme(colors.white);
+		--typography-hr: theme(colors.white / 0.1);
+		--typography-th-borders: theme(colors.white / 0.1);
+		--typography-td-borders: theme(colors.white / 0.05);
+	}
+
+	color: var(--typography-body);
+	font-size: theme(fontSize.sm);
+	line-height: theme(lineHeight.6);
+
+	h2 {
+		font-family: theme(fontFamily.display);
+		color: var(--typography-headings);
+		font-weight: theme(fontWeight.semibold);
+		font-size: theme(fontSize.xl);
+		line-height: theme(lineHeight.8);
+	}
+
+	/* Headings */
+	h3 {
+		color: var(--typography-headings);
+		font-family: theme(fontFamily.display);
+		font-weight: theme(fontWeight.semibold);
+		font-size: theme(fontSize.base);
+		line-height: theme(lineHeight.6);
+		display: flex;
+		align-items: center;
+		column-gap: theme(gap.3);
+	}
+
+	h3 > svg {
+		flex: none;
+		width: theme(width.4);
+		height: theme(height.4);
+	}
+
+	h4 {
+		color: var(--typography-headings);
+		font-family: theme(fontFamily.display);
+		font-weight: theme(fontWeight.semibold);
+		font-size: theme(fontSize.sm);
+		line-height: theme(lineHeight.6);
+	}
+
+	/* Quotes */
+	blockquote {
+		border-left: 3px solid var(--typography-quotes-border);
+		padding-left: theme(padding.6);
+		color: var(--typography-quotes);
+	}
+
+	/* Links */
+	a:not(h2 a) {
+		font-weight: theme(fontWeight.semibold);
+		color: var(--typography-links);
+		text-decoration: underline;
+		text-decoration-color: var(--typography-link-underline);
+		text-underline-offset: theme(textUnderlineOffset.2);
+		transition-property: color, text-decoration-color;
+		transition-duration: theme(transitionDuration.DEFAULT);
+		transition-timing-function: theme(transitionTimingFunction.DEFAULT);
+
+		&:hover {
+			color: var(--typography-link-hover);
+			text-decoration-color: var(--typography-link-hover-underline);
+		}
+	}
+
+	/* Inline text */
+	strong {
+		font-weight: theme(fontWeight.semibold);
+	}
+
+	strong:not(a strong) {
+		color: var(--typography-bold);
+	}
+
+	kbd {
+		display: inline-block;
+		border-radius: theme(borderRadius.DEFAULT);
+		background-color: var(--typography-kbd-bg);
+		padding: 0 theme(padding[1.5]);
+		font-family: theme(fontFamily.mono);
+		font-size: theme(fontSize.xs);
+		font-weight: 400;
+		line-height: theme(lineHeight.5);
+		color: var(--typography-kbd);
+		box-shadow: inset 0 0 0 1px var(--typography-kbd-border);
+	}
+
+	code {
+		font-family: theme(fontFamily.mono);
+	}
+
+	code:not(a code, pre code) {
+		color: var(--typography-code);
+	}
+
+	code:not(pre code) {
+		font-size: calc(12 / 14 * 1em);
+		line-height: theme(lineHeight.none);
+		font-weight: theme(fontWeight.bold);
+
+		&::before {
+			content: '`';
+		}
+
+		&::after {
+			content: '`';
+		}
+	}
+
+	/* Code blocks */
+	pre {
+		display: flex;
+		background-color: theme(colors.gray.900);
+		border-radius: theme(borderRadius.lg);
+		overflow-x: auto;
+		box-shadow: var(--typography-pre-shadow);
+	}
+
+	pre code {
+		flex: none;
+		padding: theme(padding.6);
+		font-size: 0.8125rem;
+		line-height: theme(lineHeight.6);
+		color: var(--typography-pre);
+	}
+
+	/* <hr> */
+	hr {
+		border-color: var(--typography-hr);
+	}
+
+	/* Lists */
+	ul,
+	ol {
+		padding-left: 1.375rem;
+	}
+
+	ul {
+		list-style-type: disc;
+	}
+
+	ol {
+		list-style-type: decimal;
+	}
+
+	li {
+		padding-left: 0.625rem;
+	}
+
+	li::marker {
+		color: theme(colors.gray.400);
+	}
+
+	ol > li::marker {
+		font-size: theme(fontSize.xs);
+		font-weight: theme(fontWeight.semibold);
+	}
+
+	/* Tables */
+	table {
+		width: theme(width.full);
+		text-align: left;
+	}
+
+	thead {
+		border-bottom: 1px solid var(--typography-th-borders);
+	}
+
+	thead th {
+		font-weight: theme(fontWeight.semibold);
+		padding-top: 0;
+		padding-bottom: calc(theme(padding.2) - 1px);
+		color: var(--typography-headings);
+	}
+
+	tbody tr {
+		border-bottom: 1px solid var(--typography-td-borders);
+	}
+
+	tbody td {
+		padding-top: calc(theme(padding.2) - 1px);
+		padding-bottom: theme(padding.2);
+	}
+
+	:is(th, td):first-child {
+		padding-left: 0;
+		padding-right: theme(padding.2);
+	}
+
+	:is(th, td):last-child {
+		padding-left: theme(padding.2);
+		padding-right: 0;
+	}
+
+	:is(th, td):not(:first-child, :last-child) {
+		padding-left: theme(padding.2);
+		padding-right: theme(padding.2);
+	}
+
+	/* Spacing */
+	> * {
+		margin-top: theme(margin.6);
+	}
+
+	:is(h2, h3, h4, blockquote, pre, table) {
+		margin-top: theme(margin.8);
+	}
+
+	hr {
+		margin-top: calc(theme(margin.16) - 1px);
+	}
+
+	li {
+		margin-top: theme(margin.4);
+	}
+
+	li > :is(p, ol, ul) {
+		margin-top: theme(margin.4);
+	}
+
+	:is(h2, h3, h4) + * {
+		margin-top: theme(margin.4);
+	}
+
+	:is(blockquote, pre, table) + * {
+		margin-top: theme(margin.8);
+	}
+
+	hr + * {
+		margin-top: theme(margin.16);
+	}
+
+	> :first-child,
+	li > :first-child {
+		margin-top: 0;
+	}
 }