diff --git a/assets/bomb.png b/assets/bomb.png
new file mode 100644
index 0000000..070dd13
Binary files /dev/null and b/assets/bomb.png differ
diff --git a/assets/match.png b/assets/match.png
new file mode 100644
index 0000000..350bcfd
Binary files /dev/null and b/assets/match.png differ
diff --git a/canvas.html b/canvas.html
index 37542a7..c1c43c7 100644
--- a/canvas.html
+++ b/canvas.html
@@ -68,6 +68,12 @@
             will-change: transform, filter;
         }
 
+        /* Match sprite sizing */
+        #char-1 {
+            width: 180px;
+            height: 180px;
+        }
+
         /* Kristina sprite sizing */
         #char-5 {
             width: 100px;
@@ -158,7 +164,10 @@
 
         <!-- Character Animation Layer -->
         <div id="character-layer">
-            <div id="char-1" class="character" style="background-color: #a21f1f;"></div>
+            <!-- char-1 uses match.png sprite -->
+            <div id="char-1" class="character"
+                style="background-image: url('assets/match.png'); background-size: cover; background-position: center; background-repeat: no-repeat;">
+            </div>
             <!-- char-2 uses Sabina.png sprite -->
             <div id="char-2" class="character"
                 style="background-image: url('assets/Sabina.png'); background-size: cover; background-position: center; background-repeat: no-repeat;">
@@ -175,7 +184,10 @@
             <div id="char-5" class="character"
                 style="background-image: url('assets/Kristina.png'); background-size: cover; background-position: center; background-repeat: no-repeat;">
             </div>
-            <div id="char-6" class="character" style="background-color: #b393d9;"></div>
+            <!-- char-6 uses bomb.png sprite -->
+            <div id="char-6" class="character"
+                style="background-image: url('assets/bomb.png'); background-size: cover; background-position: center; background-repeat: no-repeat;">
+            </div>
             <!-- char-6 uses jeffbaby placeholder SVG (replace with PNG if you add it into assets/) -->
             <div id="char-6" class="character"
                 style="background-image: url('assets/jeffbaby.JPG'); background-size: cover; background-position: center; background-repeat: no-repeat;">
@@ -334,6 +346,7 @@
                 if (bg.includes('carmen')) behavior = 'carmen';
                 else if (bg.includes('cal')) behavior = 'cal';
                 else if (bg.includes('jeff')) behavior = 'jeff';
+                else if (bg.includes('match')) behavior = 'match';
 
                 function getRandomPositionFor(type) {
                     const maxX = Math.max(0, layerBounds.width - charWidth);
@@ -367,6 +380,10 @@
                         // erratic: short moves and quick direction changes
                         duration = gsap.utils.random(0.35, 1.1);
                         ease = 'power1.inOut';
+                    } else if (behavior === 'match') {
+                        // VERY erratic: super short moves with rapid direction changes
+                        duration = gsap.utils.random(0.4, 1.2);
+                        ease = 'power4.out';
                     } else {
                         duration = gsap.utils.random(3.5, 7.5);
                     }
@@ -386,6 +403,11 @@
                     } else if (behavior === 'cal') {
                         // jitter rotation to emphasize erratic direction changes
                         gsap.to(charElement, { rotation: gsap.utils.random(-12, 12), duration: gsap.utils.random(0.06, 0.25), ease: 'none', yoyo: true, repeat: 1 });
+                    } else if (behavior === 'match') {
+                        // extreme jitter and wild rotation for chaotic movement
+                        gsap.to(charElement, { rotation: gsap.utils.random(-25, 25), duration: gsap.utils.random(0.05, 0.15), ease: 'none', yoyo: true, repeat: 2 });
+                        // add scale jitter for more chaos
+                        gsap.to(charElement, { scale: gsap.utils.random(0.85, 1.15), duration: gsap.utils.random(0.1, 0.3), ease: 'power2.inOut', yoyo: true, repeat: 1 });
                     } else if (behavior === 'jeff') {
                         // subtle slow bob
                         gsap.to(charElement, { rotation: gsap.utils.random(-4, 4), duration: duration * 0.5, ease: 'sine.inOut' });
@@ -502,16 +524,18 @@
                     });
                 });
 
-                // --- Special-case collision: if Cal and Baby Jeff overlap, trigger screen shake + red overlay ---
+                // --- Special-case collision: if Bomb and Match overlap, trigger screen shake + red overlay + explosion ---
                 try {
-                    const calEl = Array.from(characters).find(c => (c.style.backgroundImage || '').includes('Cal.png'));
-                    const babyEl = Array.from(characters).find(c => (c.style.backgroundImage || '').toLowerCase().includes('jeffbaby'));
-                    if (calEl && babyEl) {
-                        const crect = calEl.getBoundingClientRect();
-                        const brect = babyEl.getBoundingClientRect();
-                        const overlapSpecial = !(crect.right < brect.left || crect.left > brect.right || crect.bottom < brect.top || crect.top > brect.bottom);
+                    const bombEl = Array.from(characters).find(c => (c.style.backgroundImage || '').includes('bomb.png'));
+                    const matchEl = Array.from(characters).find(c => (c.style.backgroundImage || '').includes('match.png'));
+                    if (bombEl && matchEl) {
+                        const brect = bombEl.getBoundingClientRect();
+                        const mrect = matchEl.getBoundingClientRect();
+                        const overlapSpecial = !(brect.right < mrect.left || brect.left > mrect.right || brect.bottom < mrect.top || brect.top > mrect.bottom);
                         if (overlapSpecial && !window._isScreenShaking) {
                             window._isScreenShaking = true;
+                            
+                            // Red overlay flash
                             const overlay = document.getElementById('screen-overlay');
                             if (overlay) {
                                 gsap.killTweensOf(overlay);
@@ -519,6 +543,28 @@
                                 gsap.to(overlay, { backgroundColor: 'rgba(255,0,0,0)', delay: 0.6, duration: 0.6, ease: 'power1.inOut' });
                             }
 
+                            // Display explosion GIF at collision point
+                            const collisionX = (brect.left + brect.right) / 2;
+                            const collisionY = (brect.top + brect.bottom) / 2;
+                            const cardRect = documentCard.getBoundingClientRect();
+                            const explosionDiv = document.createElement('div');
+                            explosionDiv.style.position = 'absolute';
+                            explosionDiv.style.left = `${collisionX - cardRect.left - 100}px`;
+                            explosionDiv.style.top = `${collisionY - cardRect.top - 100}px`;
+                            explosionDiv.style.width = '200px';
+                            explosionDiv.style.height = '200px';
+                            explosionDiv.style.pointerEvents = 'none';
+                            explosionDiv.style.zIndex = '100';
+                            explosionDiv.innerHTML = '<img src="assets/explosion.gif" style="width: 100%; height: 100%; object-fit: contain;" />';
+                            documentCard.appendChild(explosionDiv);
+                            
+                            // Remove explosion after animation
+                            setTimeout(() => {
+                                if (explosionDiv.parentNode) {
+                                    explosionDiv.parentNode.removeChild(explosionDiv);
+                                }
+                            }, 1000);
+
                             // Quick shake the document card
                             gsap.fromTo(documentCard, { x: 0 }, { x: 12, duration: 0.05, yoyo: true, repeat: 8, ease: 'power1.inOut', onComplete: () => { gsap.to(documentCard, { x: 0, duration: 0.08 }); } });
 
diff --git a/index.html b/index.html
index ac1fdbf..d5b7831 100644
--- a/index.html
+++ b/index.html
@@ -3,13 +3,17 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Text Input for Animation</title>
+    <title>What the Text?</title>
     <!-- Load Tailwind CSS -->
     <script src="https://cdn.tailwindcss.com"></script>
     <style>
         body {
             font-family: 'Inter', sans-serif;
-            background-color: #f7f7f7;
+            background-image: url('landing_page_background.png');
+            background-size: cover;
+            background-position: center;
+            background-repeat: no-repeat;
+            background-attachment: fixed;
             display: flex;
             justify-content: center;
             align-items: center;
@@ -19,8 +23,8 @@
 </head>
 <body>
     <div class="w-full max-w-lg p-8 bg-white rounded-xl shadow-2xl">
-        <h1 class="text-3xl font-extrabold text-gray-900 mb-6 text-center">Prepare Your Animation</h1>
-        <p class="text-gray-600 mb-8 text-center">Enter the text you want to scramble and animate.</p>
+        <h1 class="text-3xl font-extrabold text-gray-900 mb-6 text-center">New Sense</h1>
+        <p class="text-gray-600 mb-8 text-center">The Best Dumb-A-Thon project (Duh!)</p>
 
         <!-- The file upload is included here as requested in the previous context, 
              but we won't process the file in this example for simplicity. -->
@@ -49,6 +53,18 @@ <h1 class="text-3xl font-extrabold text-gray-900 mb-6 text-center">Prepare Your
         </form>
     </div>
 
+    <script>
+        const error_messages = [
+            "Oops! You forgot to enter some text.",
+            "Hold on! The text field is empty.",
+            "Please provide some text to animate.",
+            "Text input cannot be empty. Try again!",
+            "Don't leave me hanging! Enter some text.",
+            "Come on, type something in the text box!",
+            "The text field is lonely without your input.",
+        ];
+    </script>
+
     <script>
         function startAnimation() {
             const textInput = document.getElementById('text_input').value;
@@ -64,7 +80,7 @@ <h1 class="text-3xl font-extrabold text-gray-900 mb-6 text-center">Prepare Your
                     errorMessage.className = 'text-red-500 text-sm mt-3 text-center';
                     form.appendChild(errorMessage);
                 }
-                errorMessage.textContent = 'Please enter some text to animate.';
+                errorMessage.textContent = error_messages[Math.floor(Math.random() * error_messages.length)];
                 return;
             }
 
diff --git a/landing_page_background.png b/landing_page_background.png
new file mode 100644
index 0000000..66fd39f
Binary files /dev/null and b/landing_page_background.png differ