diff --git a/public/template-suggestion.html b/public/template-suggestion.html
new file mode 100644
index 0000000..eadee60
--- /dev/null
+++ b/public/template-suggestion.html
@@ -0,0 +1,416 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Dynamic Resume Builder</title>
+    <!-- Load Tailwind CSS -->
+    <script src="https://cdn.tailwindcss.com"></script>
+    <style>
+        /* Custom CSS for a professional print view */
+        @media print {
+            body {
+                /* Remove padding/margin from body for clean printing */
+                margin: 0;
+                padding: 0;
+                background: none;
+            }
+            .editor-panel, .print-button {
+                /* Hide the editor panel and print button when printing */
+                display: none;
+            }
+            .resume-container {
+                /* Ensure the resume preview takes full print width */
+                width: 100%;
+                max-width: none;
+                box-shadow: none; /* Remove shadow for printing */
+                margin: 0;
+                padding: 0;
+                border: none;
+            }
+            /* Set font sizes for printing */
+            .resume-container * {
+                font-size: 10pt !important;
+                color: black !important; /* Force black text on white paper */
+            }
+            .resume-container h1 {
+                font-size: 18pt !important;
+            }
+            .resume-container h2 {
+                font-size: 12pt !important;
+            }
+        }
+        /* Hide scrollbars for a cleaner look */
+        .hide-scrollbar::-webkit-scrollbar {
+            display: none;
+        }
+        .hide-scrollbar {
+            -ms-overflow-style: none; /* IE and Edge */
+            scrollbar-width: none; /* Firefox */
+        }
+        /* --- Dark Mode Switch CSS --- */
+        .switch .dot {
+            left: 0.25rem; /* left-1 */
+            top: 0.25rem; /* top-1 */
+        }
+        #theme-toggle:checked + div {
+            background-color: #4f46e5; /* indigo-600 */
+        }
+        #theme-toggle:checked + div > .dot {
+            transform: translateX(1.5rem); /* Move 6 units (1.5rem) */
+        }
+    </style>
+    <script>
+        tailwind.config = {
+            darkMode: 'class', // Enable class-based dark mode
+            theme: {
+                extend: {
+                    fontFamily: {
+                        sans: ['Inter', 'sans-serif'],
+                    },
+                }
+            }
+        }
+    </script>
+</head>
+<body class="bg-gray-50 dark:bg-gray-900 font-sans transition-colors duration-300">
+
+    <div class="min-h-screen flex flex-col lg:flex-row">
+        <!-- Input Panel (Left Side) -->
+        <div class="editor-panel lg:w-1/3 p-4 bg-white dark:bg-gray-800 border-r border-gray-200 dark:border-gray-700 shadow-xl hide-scrollbar overflow-y-auto">
+            
+            <!-- Header with Dark Mode Toggle -->
+            <div class="flex justify-between items-center mb-6">
+                <h2 class="text-3xl font-bold text-gray-800 dark:text-gray-100">Resume Editor</h2>
+                
+                <!-- Dark Mode Toggle -->
+                <label class="switch flex items-center cursor-pointer">
+                    <span class="mr-2 text-sm font-medium text-gray-900 dark:text-gray-300 select-none">Dark Mode</span>
+                    <div class="relative">
+                        <input type="checkbox" id="theme-toggle" class="sr-only" onclick="toggleTheme()">
+                        <div class="block bg-gray-600 w-14 h-8 rounded-full transition-colors duration-300"></div>
+                        <div class="dot absolute left-1 top-1 bg-white w-6 h-6 rounded-full transition duration-300 transform"></div>
+                    </div>
+                </label>
+            </div>
+            
+            <!-- Personal Information -->
+            <section class="mb-6 p-4 border border-gray-100 dark:border-gray-700 rounded-xl bg-gray-50 dark:bg-gray-900">
+                <h3 class="text-xl font-semibold mb-3 text-indigo-600 dark:text-indigo-400">Personal Info</h3>
+                <input type="text" id="name" placeholder="Full Name" class="input-field" oninput="updateResume()">
+                <textarea id="summary" placeholder="Professional Summary or Objective (2-3 sentences)" rows="3" class="input-field" oninput="updateResume()"></textarea>
+                <input type="email" id="email" placeholder="Email Address" class="input-field" oninput="updateResume()">
+                <input type="tel" id="phone" placeholder="Phone Number" class="input-field" oninput="updateResume()">
+                <input type="url" id="linkedin" placeholder="LinkedIn URL" class="input-field" oninput="updateResume()">
+            </section>
+
+            <!-- Experience Section -->
+            <section class="mb-6 p-4 border border-gray-100 dark:border-gray-700 rounded-xl bg-gray-50 dark:bg-gray-900">
+                <h3 class="text-xl font-semibold mb-3 text-indigo-600 dark:text-indigo-400">Work Experience</h3>
+                <div id="experience-container">
+                    <!-- Dynamic experience fields will go here -->
+                </div>
+                <button onclick="addExperienceField()" class="mt-3 w-full bg-indigo-500 hover:bg-indigo-600 text-white font-semibold py-2 px-4 rounded-xl transition duration-200">
+                    + Add Experience
+                </button>
+            </section>
+
+            <!-- Education Section -->
+            <section class="mb-6 p-4 border border-gray-100 dark:border-gray-700 rounded-xl bg-gray-50 dark:bg-gray-900">
+                <h3 class="text-xl font-semibold mb-3 text-indigo-600 dark:text-indigo-400">Education</h3>
+                <div id="education-container">
+                    <!-- Dynamic education fields will go here -->
+                </div>
+                <button onclick="addEducationField()" class="mt-3 w-full bg-indigo-500 hover:bg-indigo-600 text-white font-semibold py-2 px-4 rounded-xl transition duration-200">
+                    + Add Education
+                </button>
+            </section>
+            
+            <!-- Skills Section -->
+            <section class="mb-6 p-4 border border-gray-100 dark:border-gray-700 rounded-xl bg-gray-50 dark:bg-gray-900">
+                <h3 class="text-xl font-semibold mb-3 text-indigo-600 dark:text-indigo-400">Skills</h3>
+                <textarea id="skills" placeholder="List skills separated by commas (e.g., JavaScript, React, Tailwind CSS)" rows="2" class="input-field" oninput="updateResume()"></textarea>
+            </section>
+
+            <!-- Print Button -->
+            <div class="print-button p-4 sticky bottom-0 bg-white dark:bg-gray-800 border-t border-gray-200 dark:border-gray-700">
+                <button onclick="window.print()" class="w-full bg-green-600 hover:bg-green-700 text-white font-bold py-3 rounded-xl shadow-lg transition duration-300">
+                    Download/Print Resume
+                </button>
+            </div>
+            
+        </div>
+
+        <!-- Resume Preview (Right Side) -->
+        <div class="lg:w-2/3 p-4 flex justify-center items-start lg:py-12 bg-gray-50 dark:bg-gray-900">
+            <div id="resume-preview" class="resume-container w-full max-w-2xl bg-white dark:bg-gray-800 p-8 border border-gray-300 dark:border-gray-700 shadow-2xl rounded-lg min-h-[1000px] transition duration-300">
+                <!-- Resume content generated by JavaScript will go here -->
+                <div class="text-center py-10 text-gray-400 dark:text-gray-600">
+                    <p class="text-lg">Start filling out the editor to see your resume here!</p>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <script>
+        // Function to toggle dark mode (made available globally for onclick)
+        window.toggleTheme = () => {
+            const isDarkMode = document.body.classList.toggle('dark');
+            
+            if (isDarkMode) {
+                localStorage.setItem('theme', 'dark');
+            } else {
+                localStorage.setItem('theme', 'light');
+            }
+            // Update resume preview immediately after toggling
+            updateResume();
+        };
+
+        // Function to load saved theme
+        const loadTheme = () => {
+            const savedTheme = localStorage.getItem('theme');
+            const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
+            const toggleSwitch = document.getElementById('theme-toggle');
+
+            if (savedTheme === 'dark' || (!savedTheme && prefersDark)) {
+                document.body.classList.add('dark');
+                if (toggleSwitch) toggleSwitch.checked = true;
+            } else {
+                document.body.classList.remove('dark');
+                if (toggleSwitch) toggleSwitch.checked = false;
+            }
+        };
+
+
+        document.addEventListener('DOMContentLoaded', () => {
+            // Load theme preference immediately
+            loadTheme();
+            
+            // Define input field classes for consistency, including dark mode styles
+            const inputClass = 'input-field mb-2 w-full p-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500 transition duration-150 bg-white dark:bg-gray-700 dark:text-gray-50 dark:border-gray-600';
+
+            // Function to create a standard input field
+            const createInput = (type, id, placeholder, containerId, deleteCallback) => {
+                const container = document.getElementById(containerId);
+                const itemDiv = document.createElement('div');
+                itemDiv.className = 'experience-item border border-indigo-200 dark:border-indigo-700 p-3 mb-3 rounded-lg bg-white dark:bg-gray-800 relative shadow-sm';
+
+                // Add Delete Button
+                if (deleteCallback) {
+                    const deleteBtn = document.createElement('button');
+                    deleteBtn.innerHTML = '&times;';
+                    deleteBtn.className = 'absolute top-1 right-1 text-red-500 hover:text-red-700 font-bold text-xl leading-none transition-colors';
+                    deleteBtn.onclick = () => {
+                        itemDiv.remove();
+                        updateResume(); // Update preview after deletion
+                    };
+                    itemDiv.appendChild(deleteBtn);
+                }
+
+                if (type === 'experience') {
+                    itemDiv.innerHTML = `
+                        <input type="text" placeholder="Job Title" class="${inputClass}" data-field="title" oninput="updateResume()">
+                        <input type="text" placeholder="Company Name" class="${inputClass}" data-field="company" oninput="updateResume()">
+                        <div class="flex space-x-2">
+                            <input type="text" placeholder="Start Date - End Date (e.g., Jan 2020 - Present)" class="${inputClass} flex-1" data-field="dates" oninput="updateResume()">
+                            <input type="text" placeholder="City, State" class="${inputClass} w-24" data-field="location" oninput="updateResume()">
+                        </div>
+                        <textarea placeholder="Key Accomplishments (use bullet points or hyphens for list items)" rows="4" class="${inputClass}" data-field="description" oninput="updateResume()"></textarea>
+                    `;
+                } else if (type === 'education') {
+                    itemDiv.innerHTML = `
+                        <input type="text" placeholder="Degree/Certification" class="${inputClass}" data-field="degree" oninput="updateResume()">
+                        <input type="text" placeholder="Institution Name" class="${inputClass}" data-field="institution" oninput="updateResume()">
+                        <input type="text" placeholder="Years Attended (e.g., 2018 - 2022)" class="${inputClass}" data-field="dates" oninput="updateResume()">
+                    `;
+                }
+
+                container.appendChild(itemDiv);
+                updateResume(); // Update preview after adding new field
+            };
+
+            // Public functions for buttons
+            window.addExperienceField = () => createInput('experience', null, null, 'experience-container', true);
+            window.addEducationField = () => createInput('education', null, null, 'education-container', true);
+
+            // Main function to generate the resume HTML 
+            window.updateResume = () => {
+                const preview = document.getElementById('resume-preview');
+                const isDark = document.body.classList.contains('dark');
+                
+                // Set text colors based on theme
+                const textColor = isDark ? 'text-gray-100' : 'text-gray-800';
+                const subTextColor = isDark ? 'text-gray-400' : 'text-gray-600';
+                const linkColor = isDark ? 'text-indigo-400' : 'text-indigo-600';
+                const headerColor = isDark ? 'text-gray-200' : 'text-gray-700';
+                const dividerColor = isDark ? 'border-gray-700' : 'border-gray-300';
+                const accentDividerColor = isDark ? 'border-indigo-400' : 'border-indigo-600';
+                const chipBg = isDark ? 'bg-indigo-600 text-white' : 'bg-indigo-100 text-indigo-800';
+
+                // 1. Get Personal Info
+                const name = document.getElementById('name').value.trim();
+                const summary = document.getElementById('summary').value.trim();
+                const email = document.getElementById('email').value.trim();
+                const phone = document.getElementById('phone').value.trim();
+                const linkedin = document.getElementById('linkedin').value.trim();
+                
+                // 2. Build Contact Info Line
+                const contactParts = [];
+                if (phone) contactParts.push(`<span class="mx-2">|</span> ${phone}`);
+                if (email) contactParts.push(`<a href="mailto:${email}" class="${linkColor} hover:underline">${email}</a>`);
+                if (linkedin) contactParts.push(`<span class="mx-2">|</span> <a href="${linkedin}" target="_blank" class="${linkColor} hover:underline">LinkedIn</a>`);
+                
+                const contactHtml = contactParts.join('');
+
+                let resumeHtml = '';
+
+                // If name is present, build the header
+                if (name) {
+                    resumeHtml += `
+                        <header class="text-center mb-6">
+                            <h1 class="text-4xl font-bold ${textColor}">${name}</h1>
+                            <p class="text-sm ${subTextColor} mt-1">${contactHtml}</p>
+                        </header>
+                        <hr class="border-t-2 ${accentDividerColor} mb-6">
+                    `;
+                } else {
+                    // Placeholder if no name is entered
+                    resumeHtml = `
+                        <div class="text-center py-10 text-gray-400 dark:text-gray-600">
+                            <p class="text-lg">Start filling out the editor to see your resume here!</p>
+                        </div>
+                    `;
+                    preview.innerHTML = resumeHtml;
+                    return; // Exit if no content
+                }
+
+                // 3. Professional Summary
+                if (summary) {
+                    resumeHtml += `
+                        <section class="mb-6">
+                            <h2 class="text-2xl font-semibold border-b-2 ${dividerColor} pb-1 mb-3 ${headerColor}">Summary</h2>
+                            <p class="${headerColor} leading-relaxed">${summary}</p>
+                        </section>
+                    `;
+                }
+
+                // 4. Work Experience
+                const experienceItems = document.querySelectorAll('#experience-container > div');
+                let experienceHtml = '';
+                experienceItems.forEach(item => {
+                    const title = item.querySelector('[data-field="title"]').value.trim();
+                    const company = item.querySelector('[data-field="company"]').value.trim();
+                    const dates = item.querySelector('[data-field="dates"]').value.trim();
+                    const location = item.querySelector('[data-field="location"]').value.trim();
+                    let description = item.querySelector('[data-field="description"]').value.trim();
+
+                    if (title && company) {
+                        // Convert new lines and hyphens/asterisks into proper list items for the resume view
+                        description = description.split('\n')
+                            .filter(line => line.trim())
+                            .map(line => {
+                                // Clean up the line for display
+                                const cleanedLine = line.trim().replace(/^[\*\-]\s*/, '');
+                                return `<li class="mb-1">${cleanedLine}</li>`;
+                            })
+                            .join('');
+                        
+                        // Wrap in <ul> if there are list items
+                        const descriptionList = description ? `<ul class="list-disc ml-6 mt-2 text-sm ${headerColor}">${description}</ul>` : '';
+
+                        experienceHtml += `
+                            <div class="mb-4">
+                                <div class="flex justify-between items-start">
+                                    <h3 class="font-bold text-lg ${textColor}">${title}</h3>
+                                    <span class="text-sm font-medium ${headerColor}">${dates}</span>
+                                </div>
+                                <div class="flex justify-between items-start text-sm ${subTextColor}">
+                                    <span>${company}</span>
+                                    <span>${location}</span>
+                                </div>
+                                ${descriptionList}
+                            </div>
+                        `;
+                    }
+                });
+
+                if (experienceHtml) {
+                    resumeHtml += `
+                        <section class="mb-6">
+                            <h2 class="text-2xl font-semibold border-b-2 ${dividerColor} pb-1 mb-3 ${headerColor}">Experience</h2>
+                            ${experienceHtml}
+                        </section>
+                    `;
+                }
+
+                // 5. Education
+                const educationItems = document.querySelectorAll('#education-container > div');
+                let educationHtml = '';
+                educationItems.forEach(item => {
+                    const degree = item.querySelector('[data-field="degree"]').value.trim();
+                    const institution = item.querySelector('[data-field="institution"]').value.trim();
+                    const dates = item.querySelector('[data-field="dates"]').value.trim();
+
+                    if (degree && institution) {
+                        educationHtml += `
+                            <div class="mb-4">
+                                <div class="flex justify-between items-center">
+                                    <h3 class="font-bold text-lg ${textColor}">${degree}</h3>
+                                    <span class="text-sm font-medium ${headerColor}">${dates}</span>
+                                </div>
+                                <p class="text-sm ${subTextColor}">${institution}</p>
+                            </div>
+                        `;
+                    }
+                });
+
+                if (educationHtml) {
+                    resumeHtml += `
+                        <section class="mb-6">
+                            <h2 class="text-2xl font-semibold border-b-2 ${dividerColor} pb-1 mb-3 ${headerColor}">Education</h2>
+                            ${educationHtml}
+                        </section>
+                    `;
+                }
+
+                // 6. Skills
+                const skillsText = document.getElementById('skills').value.trim();
+                if (skillsText) {
+                    const skillsArray = skillsText.split(',')
+                        .map(skill => skill.trim())
+                        .filter(skill => skill.length > 0);
+
+                    const skillsList = skillsArray.map(skill => `<span class="inline-block ${chipBg} text-sm font-medium mr-2 mb-2 px-3 py-1 rounded-full">${skill}</span>`).join('');
+
+                    resumeHtml += `
+                        <section class="mb-6">
+                            <h2 class="text-2xl font-semibold border-b-2 ${dividerColor} pb-1 mb-3 ${headerColor}">Skills</h2>
+                            <div class="flex flex-wrap">${skillsList}</div>
+                        </section>
+                    `;
+                }
+
+                // 7. Update Preview
+                preview.innerHTML = resumeHtml;
+            };
+
+            // Initial fields on load (These now execute safely after updateResume is defined)
+            window.addExperienceField();
+            window.addEducationField();
+
+            // Call updateResume initially to clear the placeholder (This is now redundant since add functions call it, but no harm in keeping it for final update)
+            updateResume();
+
+            // Apply the shared class to all standard inputs
+            const inputFields = document.querySelectorAll('input[type="text"], input[type="email"], input[type="tel"], input[type="url"], textarea');
+            inputFields.forEach(input => {
+                // Ensure all input fields have the updated dark mode sensitive class
+                if (!input.classList.contains('input-field')) {
+                    input.classList.add(...inputClass.split(' '));
+                }
+            });
+
+        });
+    </script>
+</body>
+</html>
