diff --git a/app.js b/app.js
index c2ed988..57850a8 100644
--- a/app.js
+++ b/app.js
@@ -35,7 +35,8 @@ class YotoCoversApp {
                 backgroundStyle: 'comic',
                 fontFamily: 'Comic Sans MS',
                 fontWeight: 'bold',
-                footerColor: '#ff6b6b'
+                footerColor: '#ff6b6b',
+                fullBleed: false
             },
             polaroid: {
                 backgroundStyle: 'polaroid',
@@ -551,7 +552,7 @@ class YotoCoversApp {
         // Set title options
         document.getElementById('card-title-font-size').value = variation.titleFontSize || 20;
         document.getElementById('card-title-x').value = variation.titleX !== undefined ? variation.titleX : 50;
-        document.getElementById('card-title-y').value = variation.titleY !== undefined ? variation.titleY : 20;
+        document.getElementById('card-title-y').value = variation.titleY !== undefined ? variation.titleY : 10;
         document.getElementById('card-title-draggable').checked = variation.titleDraggable === true;
 
         // Set image options
@@ -612,13 +613,13 @@ class YotoCoversApp {
                     console.log('No iframe document');
                     return;
                 }
-                const titles = iframeDoc.querySelectorAll('.title');
+                const titles = iframeDoc.querySelectorAll('.title, .comic-title-panel');
                 console.log('Found titles:', titles.length);
 
                 titles.forEach((title, index) => {
                     console.log(`Title ${index} cursor:`, title.style.cursor);
-                    // Only make draggable if cursor is set to 'move'
-                    if (title.style.cursor !== 'move') {
+                    // Only make draggable if cursor is set to 'move' and not a comic panel
+                    if (title.style.cursor !== 'move' || title.classList.contains('comic-title-panel')) {
                         console.log(`Title ${index} not draggable, skipping`);
                         return;
                     }
@@ -856,7 +857,7 @@ class YotoCoversApp {
                     cardImagePosition = (variation && variation.imagePosition) || 'center';
                     cardTitleFontSize = (variation && variation.titleFontSize) || 20;
                     cardTitleX = variation && variation.titleX !== undefined ? variation.titleX : 50;
-                    cardTitleY = variation && variation.titleY !== undefined ? variation.titleY : 20;
+                    cardTitleY = variation && variation.titleY !== undefined ? variation.titleY : 10;
                     cardTitleDraggable = variation && variation.titleDraggable !== undefined ? variation.titleDraggable : false;
                 } else {
                     // No variations - auto-assign images
@@ -880,7 +881,7 @@ class YotoCoversApp {
                     cardImagePosition = 'center';
                     cardTitleFontSize = 20;
                     cardTitleX = 50;
-                    cardTitleY = 20;
+                    cardTitleY = 10;
                     cardTitleDraggable = false;
                 }
                 
@@ -932,7 +933,7 @@ class YotoCoversApp {
                     imagePosition: 'center',
                     titleFontSize: 20,
                     titleX: 50,
-                    titleY: 20,
+                    titleY: 10,
                     titleDraggable: false,
                     isVisible: false
                 });
@@ -984,7 +985,7 @@ class YotoCoversApp {
                     font-family: 'DejaVuSans', serif;
                     ${card.isVisible && card.backgroundStyle === 'gradient' ? 'background: linear-gradient(135deg, #e8f4fd 0%, #d1e8f0 100%);' : ''}
                     ${card.isVisible && card.backgroundStyle === 'pattern' ? 'background: linear-gradient(45deg, #f5f5dc 0%, #deb887 100%);' : ''}
-                    ${card.isVisible && card.backgroundStyle === 'comic' ? 'background: repeating-linear-gradient(45deg, #fff 0px, #fff 2px, #000 2px, #000 4px), radial-gradient(circle at 20% 30%, #ff4444, #ff8844, #ffff44, #44ff44, #4444ff, #8844ff); box-shadow: inset 0 0 20px rgba(0,0,0,0.3); border: 3px solid #000;' : ''}
+                    ${card.isVisible && card.backgroundStyle === 'comic' ? 'background: #f9f9f9; border: 1px solid #ccc;' : ''}
                     ${card.isVisible && card.backgroundStyle === 'polaroid' ? 'border: 8px solid #fff; border-bottom: 24px solid #fff; box-shadow: 0 4px 12px rgba(0,0,0,0.3); position: relative;' : ''}
                     ${card.isVisible && card.backgroundStyle === 'polaroid' && !card.fullBleed ? 'background: #f8f9fa;' : ''}
                     ${card.isVisible && card.backgroundStyle === 'solid' ? 'background: #f8f9fa;' : ''}
@@ -994,25 +995,102 @@ class YotoCoversApp {
                     overflow: hidden;
                 ">
                     ${card.isVisible ? `
-                        ${card.showTitle ? `<div class="title ${card.titleStyle}" data-heading="${this.escapeHtml(card.title)}" style="
-                            color: ${card.titleColor};
-                            font-weight: ${card.fontWeight === 'bold' ? '700' : '400'};
-                            font-family: '${card.fontFamily}', serif;
-                            font-size: ${card.titleFontSize}px;
-                            ${card.titleShadow ? 'text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);' : ''}
-                            position: absolute;
-                            left: ${card.titleX}%;
-                            top: ${card.titleY}%;
-                            transform: translate(-50%, -50%);
-                            ${card.titleDraggable ? 'cursor: move; user-select: none;' : ''}
-                        ">${this.escapeHtml(card.title)}</div>` : ''}
-                        ${!card.fullBleed ? `<div class="hero"><img src="${card.imageUrl}" alt="cover" style="object-fit: ${card.imageFit}; object-position: ${card.imagePosition};"/></div>` : ''}
-                        ${card.showAccent ? `<div class="overlay" style="background: ${card.accentColor}40;"></div>` : `<div class="overlay" style="background: rgba(0,0,0,0);"></div>`}
-                        ${card.showFooter ? `<div class="footer" style="
-                            color: ${card.footerColor};
-                            font-family: '${card.fontFamily}', serif;
-                            font-weight: ${card.fontWeight};
-                        ">${this.escapeHtml(card.footer)}</div>` : ''}
+                        ${card.backgroundStyle === 'comic' ? `
+                            <!-- Comic Style Panels -->
+                            <div class="comic-panels">
+                                ${card.showTitle ? `<div class="comic-panel comic-title-panel" style="
+                                    position: absolute;
+                                    left: 8%;
+                                    top: 6%;
+                                    width: 40%;
+                                    height: 15%;
+                                    border: 2px solid #000;
+                                    background: #fff;
+                                    display: flex;
+                                    align-items: center;
+                                    justify-content: center;
+                                    font-size: ${card.titleFontSize * 0.8}px;
+                                    font-weight: ${card.fontWeight === 'bold' ? '700' : '400'};
+                                    font-family: '${card.fontFamily}', serif;
+                                    color: ${card.titleColor};
+                                    ${card.titleShadow ? 'text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);' : ''}
+                                    transform: rotate(-2deg);
+                                    box-shadow: 2px 2px 4px rgba(0,0,0,0.2);
+                                    ${card.titleDraggable && card.backgroundStyle !== 'comic' ? 'cursor: move; user-select: none;' : ''}
+                                " data-panel-type="title">${this.escapeHtml(card.title)}</div>` : ''}
+                                
+                                <div class="comic-panel comic-image-panel" style="
+                                    position: absolute;
+                                    left: 15%;
+                                    top: 25%;
+                                    right: 15%;
+                                    bottom: ${card.showFooter ? '35%' : '15%'};
+                                    border: 3px solid #000;
+                                    background: ${card.fullBleed ? `url('${card.imageUrl}') no-repeat ${card.imagePosition}/${card.imageFit}` : '#f8f9fa'};
+                                    transform: rotate(1deg);
+                                    box-shadow: 3px 3px 6px rgba(0,0,0,0.3);
+                                    overflow: hidden;
+                                ">
+                                    ${!card.fullBleed ? `<img src="${card.imageUrl}" alt="cover" style="
+                                        width: 100%;
+                                        height: 100%;
+                                        object-fit: ${card.imageFit};
+                                        object-position: ${card.imagePosition};
+                                    "/>` : ''}
+                                    ${card.showAccent ? `<div class="overlay" style="
+                                        position: absolute;
+                                        top: 0;
+                                        left: 0;
+                                        right: 0;
+                                        bottom: 0;
+                                        background: ${card.accentColor}40;
+                                        pointer-events: none;
+                                    "></div>` : ''}
+                                </div>
+                                
+                                ${card.showFooter ? `<div class="comic-panel comic-footer-panel" style="
+                                    position: absolute;
+                                    right: 8%;
+                                    bottom: 6%;
+                                    width: 35%;
+                                    height: 12%;
+                                    border: 2px solid #000;
+                                    background: #fff;
+                                    display: flex;
+                                    align-items: center;
+                                    justify-content: center;
+                                    font-size: 10px;
+                                    font-weight: ${card.fontWeight};
+                                    font-family: '${card.fontFamily}', serif;
+                                    color: ${card.footerColor};
+                                    transform: rotate(3deg);
+                                    box-shadow: 2px 2px 4px rgba(0,0,0,0.2);
+                                    text-align: center;
+                                    padding: 2px;
+                                ">${this.escapeHtml(card.footer)}</div>` : ''}
+                            </div>
+                        ` : `
+                            <!-- Standard Layout -->
+                            ${card.showTitle ? `<div class="title ${card.titleStyle}" data-heading="${this.escapeHtml(card.title)}" style="
+                                color: ${card.titleColor};
+                                font-weight: ${card.fontWeight === 'bold' ? '700' : '400'};
+                                font-family: '${card.fontFamily}', serif;
+                                font-size: ${card.titleFontSize}px;
+                                ${card.titleShadow ? 'text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);' : ''}
+                                position: absolute;
+                                left: ${card.titleX}%;
+                                top: ${card.titleY}%;
+                                transform: translate(-50%, -50%);
+                                ${card.titleDraggable ? 'cursor: move; user-select: none;' : ''}
+                            ">${this.escapeHtml(card.title)}</div>` : ''}
+                            ${!card.fullBleed ? `<div class="hero"><img src="${card.imageUrl}" alt="cover" style="object-fit: ${card.imageFit}; object-position: ${card.imagePosition};"/></div>` : ''}
+                            ${card.showAccent ? `<div class="overlay" style="background: ${card.accentColor}40;"></div>` : `<div class="overlay" style="background: rgba(0,0,0,0);"></div>`}
+                            ${card.showFooter ? `<div class="footer" style="
+                                color: ${card.footerColor};
+                                font-family: '${card.fontFamily}', serif;
+                                font-weight: ${card.fontWeight};
+                            ">${this.escapeHtml(card.footer)}</div>` : ''}
+                        `}
                     ` : ''}
                 </div>
             `).join('')}