diff --git a/public/images/booktear.png b/public/images/booktear.png
new file mode 100644
index 0000000..78527dc
Binary files /dev/null and b/public/images/booktear.png differ
diff --git a/public/images/booktear2.png b/public/images/booktear2.png
new file mode 100644
index 0000000..3e7b6c6
Binary files /dev/null and b/public/images/booktear2.png differ
diff --git a/public/images/booktear3.png b/public/images/booktear3.png
new file mode 100644
index 0000000..98bf4d7
Binary files /dev/null and b/public/images/booktear3.png differ
diff --git a/public/images/paper.jpg b/public/images/paper.jpg
new file mode 100644
index 0000000..0d2314b
Binary files /dev/null and b/public/images/paper.jpg differ
diff --git a/src/app/layout.jsx b/src/app/layout.jsx
index 2716f03..16b33e7 100644
--- a/src/app/layout.jsx
+++ b/src/app/layout.jsx
@@ -1,4 +1,5 @@
 import { Inter, Lexend } from 'next/font/google'
+import localFont from 'next/font/local'
 import clsx from 'clsx'
 
 import '@/styles/tailwind.css'
@@ -18,6 +19,11 @@ const inter = Inter({
   variable: '--font-inter',
 })
 
+const jmhTypewriter = localFont({
+  src: '../fonts/jmh_typewriter/JMH Typewriter.otf',
+  variable: '--font-jmh-typewriter',
+})
+
 const lexend = Lexend({
   subsets: ['latin'],
   display: 'swap',
@@ -29,9 +35,10 @@ export default function RootLayout({ children }) {
     <html
       lang="en"
       className={clsx(
-        'h-full scroll-smooth bg-creme-600 antialiased',
+        'h-full scroll-smooth antialiased',
         inter.variable,
         lexend.variable,
+        jmhTypewriter.variable,
       )}
     >
             <body className="flex h-full flex-col pt-20">
diff --git a/src/app/page.jsx b/src/app/page.jsx
index fcb51cb..f6a2a6f 100644
--- a/src/app/page.jsx
+++ b/src/app/page.jsx
@@ -3,6 +3,7 @@ import { Footer } from '@/components/Footer'
 import { Header } from '@/components/Header'
 import { Hero } from '@/components/Hero';
 import AudioPlayer from '@/components/ui/AudioPlayer';
+import Booktear from '@/components/ui/Booktear';
 
 
 
@@ -11,10 +12,10 @@ export default function Home() {
   return (
     <>
       <Header />
-      <main>
+      <main className="bg-transparent">
         <AudioPlayer />
         <Hero />
-      </main>
+              </main>
       <Footer />
     </>
   )
diff --git a/src/components/Hero.jsx b/src/components/Hero.jsx
index c15c09e..78b90c6 100644
--- a/src/components/Hero.jsx
+++ b/src/components/Hero.jsx
@@ -5,7 +5,8 @@ import BgNoise from '@/components/BgNoise'
 
 export function Hero() {
   return (
-        <div className="relative -mt-20 min-h-screen">
+    <>
+      <div className="relative -mt-20 min-h-screen">
       <div
         className="absolute inset-0 -z-20 h-full w-full object-cover"
         style={{ backgroundImage: 'url(/images/hero.jpg)', backgroundSize: 'cover', backgroundPosition: 'center' }}
@@ -22,6 +23,35 @@ export function Hero() {
           />
         </div>
       </Container>
-    </div>
+      </div>
+      <div className="relative">
+        <Image
+          unoptimized
+          src="/images/booktear.png"
+          alt="Page divider"
+          width={1080}
+          height={200}
+          className="relative z-10 -mt-14 w-full h-auto"
+        />
+        <div
+          className="absolute inset-0 bg-cover bg-center opacity-50"
+          style={{ backgroundImage: 'url(/images/paper.jpg)' }}
+        />
+        <div className="relative bg-transparent">
+          <div className="px-6 py-24 sm:py-32 lg:px-8">
+            <div className="mx-auto max-w-2xl text-left">
+              <p className="font-script text-2xl text-love-red mb-2 font-typewriter">Mon cher,</p>
+              <p className="font-typewriter text-xl max-w-2xl mx-auto leading-relaxed">
+                If you find yourself here, you’ve survived the noise.<br />
+                Sit, let the glass sweat a little.<br />
+                The band will start soon, and perhaps someone will meet your eyes before the chorus ends.<br />
+                If not, the night still owes you a dance.
+              </p>
+              <p className="font-script text-xl text-love-red mt-6 font-typewriter">— M.N.</p>
+            </div>
+          </div>
+        </div>
+      </div>
+    </>
   )
 }
diff --git a/src/components/Home/Loveletter.jsx.bak b/src/components/Home/Loveletter.jsx.bak
new file mode 100644
index 0000000..d0a8bee
--- /dev/null
+++ b/src/components/Home/Loveletter.jsx.bak
@@ -0,0 +1,27 @@
+import Booktear from '@/components/ui/Booktear';
+
+export function Loveletter({ className }) {
+  return (
+    <div className={`relative ${className || ''}`}>
+      <Booktear className="relative z-10" /> 
+      <div
+        className="absolute inset-0 bg-cover bg-center opacity-50"
+        style={{ backgroundImage: 'url(/images/paper.jpg)' }}
+      />
+    <div className="relative bg-transparent">
+      <div className="px-6 py-24 sm:py-32 lg:px-8">
+        <div className="mx-auto max-w-2xl text-left">
+                  <p className="font-script text-2xl text-love-red mb-2 font-typewriter">Mon cher,</p>
+                           <p className="font-typewriter text-xl max-w-2xl mx-auto leading-relaxed">
+           If you find yourself here, you’ve survived the noise.<br />
+           Sit, let the glass sweat a little.<br />
+           The band will start soon, and perhaps someone will meet your eyes before the chorus ends.<br />
+           If not, the night still owes you a dance.
+         </p>
+                  <p className="font-script text-xl text-love-red mt-6 font-typewriter">— M.N.</p>
+        </div>
+      </div>
+    </div>
+    </div>
+  )
+}
diff --git a/src/components/ui/Booktear.jsx b/src/components/ui/Booktear.jsx
new file mode 100644
index 0000000..e99bdef
--- /dev/null
+++ b/src/components/ui/Booktear.jsx
@@ -0,0 +1,18 @@
+import Image from 'next/image';
+
+const Booktear = ({ className }) => {
+  return (
+    <div className={`w-full bg-transparent ${className || ''}`}>
+      <Image
+        unoptimized
+        src="/images/booktear.png"
+        alt="Page divider" 
+        width={1080} 
+        height={180}
+        className="w-full h-auto"
+      />
+    </div>
+  );
+};
+
+export default Booktear;
diff --git a/tailwind.config.js b/tailwind.config.js
index ac232f4..ec61a8a 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -29,6 +29,7 @@ module.exports = {
       fontFamily: {
         sans: ['Montserrat', 'sans-serif'],
         display: ['Montserrat', 'sans-serif'],
+        typewriter: 'var(--font-jmh-typewriter)',
       },
       maxWidth: {
         '2xl': '40rem',
@@ -50,6 +51,7 @@ module.exports = {
           900: '#1F2937',
           200: '#E4E7EB',
         },
+        'love-red': '#bc0a0f',
         creme: {
           900: '#e3dfda',
           600: '#f6f1eb',
