diff --git a/api/save_settings.php b/api/save_settings.php
index 9340e8e..be7fd69 100644
--- a/api/save_settings.php
+++ b/api/save_settings.php
@@ -57,6 +57,69 @@ if ($action === 'upload_bg_image') {
     } else {
         echo json_encode(['success' => false, 'error' => 'Invalid color format.']);
     }
+} elseif ($action === 'update_second_page_text_color') {
+    $color = $_POST['color'] ?? '';
+    if (preg_match('/^#[a-f0-9]{6}$/i', $color)) {
+        $stmt = db()->prepare("UPDATE settings SET setting_value = ? WHERE setting_key = 'second_page_text_color'");
+        $stmt->execute([$color]);
+        echo json_encode(['success' => true]);
+    } else {
+        echo json_encode(['success' => false, 'error' => 'Invalid color format.']);
+    }
+} elseif ($action === 'update_proposal_text_color') {
+    $color = $_POST['color'] ?? '';
+    if (preg_match('/^#[a-f0-9]{6}$/i', $color)) {
+        $stmt = db()->prepare("UPDATE settings SET setting_value = ? WHERE setting_key = 'proposal_text_color'");
+        $stmt->execute([$color]);
+        echo json_encode(['success' => true]);
+    } else {
+        echo json_encode(['success' => false, 'error' => 'Invalid color format.']);
+    }
+} elseif ($action === 'update_font_family') {
+    $font = $_POST['font'] ?? '';
+    $stmt = db()->prepare("UPDATE settings SET setting_value = ? WHERE setting_key = 'font_family'");
+    $stmt->execute([$font]);
+    echo json_encode(['success' => true]);
+} elseif ($action === 'update_second_page_box_pos_y') {
+    $pos = $_POST['pos'] ?? '0';
+    $stmt = db()->prepare("UPDATE settings SET setting_value = ? WHERE setting_key = 'second_page_box_pos_y'");
+    $stmt->execute([$pos]);
+    echo json_encode(['success' => true]);
+} elseif ($action === 'update_image_border_radius') {
+    $radius = $_POST['radius'] ?? '12';
+    $stmt = db()->prepare("UPDATE settings SET setting_value = ? WHERE setting_key = 'image_border_radius'");
+    $stmt->execute([$radius]);
+    echo json_encode(['success' => true]);
+} elseif ($action === 'update_proposal_text') {
+    $text = $_POST['text'] ?? '';
+    $stmt = db()->prepare("UPDATE settings SET setting_value = ? WHERE setting_key = 'proposal_text'");
+    $stmt->execute([$text]);
+    echo json_encode(['success' => true]);
+} elseif ($action === 'update_success_text_1') {
+    $text = $_POST['text'] ?? '';
+    $stmt = db()->prepare("UPDATE settings SET setting_value = ? WHERE setting_key = 'success_text_1'");
+    $stmt->execute([$text]);
+    echo json_encode(['success' => true]);
+} elseif ($action === 'update_success_text_2') {
+    $text = $_POST['text'] ?? '';
+    $stmt = db()->prepare("UPDATE settings SET setting_value = ? WHERE setting_key = 'success_text_2'");
+    $stmt->execute([$text]);
+    echo json_encode(['success' => true]);
+} elseif ($action === 'update_proposal_text_size') {
+    $size = $_POST['size'] ?? '2';
+    $stmt = db()->prepare("UPDATE settings SET setting_value = ? WHERE setting_key = 'proposal_text_size'");
+    $stmt->execute([$size]);
+    echo json_encode(['success' => true]);
+} elseif ($action === 'update_success_text_1_size') {
+    $size = $_POST['size'] ?? '1.5';
+    $stmt = db()->prepare("UPDATE settings SET setting_value = ? WHERE setting_key = 'success_text_1_size'");
+    $stmt->execute([$size]);
+    echo json_encode(['success' => true]);
+} elseif ($action === 'update_success_text_2_size') {
+    $size = $_POST['size'] ?? '0.9';
+    $stmt = db()->prepare("UPDATE settings SET setting_value = ? WHERE setting_key = 'success_text_2_size'");
+    $stmt->execute([$size]);
+    echo json_encode(['success' => true]);
 } elseif ($action === 'remove_bg_image') {
     $stmt = db()->prepare("UPDATE settings SET setting_value = '' WHERE setting_key = 'bg_image'");
     $stmt->execute();
@@ -67,16 +130,30 @@ if ($action === 'upload_bg_image') {
     $stmt->execute([$lockValue]);
     echo json_encode(['success' => true, 'locked' => $lockValue === '1']);
 } elseif ($action === 'reset') {
-    $stmt = db()->prepare("UPDATE settings SET setting_value = 'assets/pasted-20260206-164030-456a591e.jpg' WHERE setting_key = 'valentine_image'");
-    $stmt->execute();
-    $stmt = db()->prepare("UPDATE settings SET setting_value = '0' WHERE setting_key = 'is_locked'");
-    $stmt->execute();
-    $stmt = db()->prepare("UPDATE settings SET setting_value = '#ffe4e6' WHERE setting_key = 'bg_color'");
-    $stmt->execute();
-    $stmt = db()->prepare("UPDATE settings SET setting_value = '' WHERE setting_key = 'bg_image'");
-    $stmt->execute();
-    $stmt = db()->prepare("UPDATE settings SET setting_value = '#ffccd5' WHERE setting_key = 'popup_color'");
-    $stmt->execute();
+    $defaults = [
+        'valentine_image' => 'assets/pasted-20260206-164030-456a591e.jpg',
+        'is_locked' => '0',
+        'bg_color' => '#ffe4e6',
+        'bg_image' => '',
+        'popup_color' => '#ffccd5',
+        'font_family' => "'Inter', sans-serif",
+        'second_page_text_color' => '#e63946',
+        'second_page_box_pos_y' => '0',
+        'image_border_radius' => '12',
+        'proposal_text' => 'Gvantsa, would you be my valentine?',
+        'success_text_1' => "Congratulations, you are now Sam's Valentine! ❤️",
+        'success_text_2' => 'He is so incredibly lucky to have someone in his life who would click yes.',
+        'proposal_text_color' => '#e63946',
+        'proposal_text_size' => '2',
+        'success_text_1_size' => '1.5',
+        'success_text_2_size' => '0.9'
+    ];
+    
+    foreach ($defaults as $key => $value) {
+        $stmt = db()->prepare("UPDATE settings SET setting_value = ? WHERE setting_key = ?");
+        $stmt->execute([$value, $key]);
+    }
+    
     echo json_encode(['success' => true]);
 } else {
     echo json_encode(['success' => false, 'error' => 'Invalid action.']);
diff --git a/assets/css/custom.css b/assets/css/custom.css
index 2694f50..6ebdfdc 100644
--- a/assets/css/custom.css
+++ b/assets/css/custom.css
@@ -1,218 +1,254 @@
 :root {
-  --primary-color: #e63946;
-  --bg-color: #ffe4e6; /* Default Light Pink */
-  --popup-bg: #ffccd5; /* Default Light Red */
-  --bg-image: none;
-  --text-color: #2d3436;
-  --secondary-text: #636e72;
-  --border-color: rgba(0,0,0,0.05);
-  --font-family: 'Inter', system-ui, -apple-system, sans-serif;
+    --bg-color: #ffe4e6;
+    --popup-bg: #ffccd5;
+    --bg-image: none;
+    --font-family: 'Inter', sans-serif;
+    --second-page-text-color: #e63946;
+    --second-page-box-pos-y: 0px;
+    --image-border-radius: 12px;
+    
+    --proposal-text-color: #e63946;
+    --proposal-text-size: 2rem;
+    --success-text-1-size: 1.5rem;
+    --success-text-2-size: 0.9rem;
 }
 
 body {
-  background-color: var(--bg-color);
-  background-image: var(--bg-image);
-  background-size: cover;
-  background-position: center;
-  background-attachment: fixed;
-  color: var(--text-color);
-  font-family: var(--font-family);
-  margin: 0;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  min-height: 100vh;
-  overflow-x: hidden;
-}
-
-.admin-controls {
-  position: fixed;
-  top: 1rem;
-  right: 1rem;
-  display: flex;
-  flex-direction: column;
-  gap: 0.5rem;
-  z-index: 100;
-  align-items: flex-end;
-}
-
-.control-buttons {
-  display: flex;
-  gap: 0.5rem;
-}
-
-.admin-controls button {
-  background: rgba(255, 255, 255, 0.8);
-  border: none;
-  border-radius: 50%;
-  width: 36px;
-  height: 36px;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  cursor: pointer;
-  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
-  transition: all 0.2s ease;
-  color: var(--secondary-text);
-}
-
-.admin-controls button:hover {
-  background: #fff;
-  color: var(--primary-color);
-  transform: scale(1.1);
-}
-
-.settings-panel {
-  background: white;
-  padding: 1rem;
-  border-radius: 12px;
-  box-shadow: 0 4px 15px rgba(0,0,0,0.1);
-  margin-top: 0.5rem;
-  display: flex;
-  flex-direction: column;
-  gap: 0.75rem;
-  width: 200px;
-  animation: slideDown 0.3s ease;
-}
-
-@keyframes slideDown {
-  from { opacity: 0; transform: translateY(-10px); }
-  to { opacity: 1; transform: translateY(0); }
-}
-
-.settings-group {
-  display: flex;
-  flex-direction: column;
-  gap: 0.25rem;
-}
-
-.settings-group label {
-  font-size: 0.75rem;
-  font-weight: 600;
-  color: var(--secondary-text);
-}
-
-.settings-group input[type="color"] {
-  width: 100%;
-  height: 30px;
-  border: 1px solid var(--border-color);
-  border-radius: 4px;
-  cursor: pointer;
-}
-
-.settings-group .btn-small {
-  padding: 4px 8px;
-  font-size: 0.7rem;
-  background: #f1f2f6;
-  border: 1px solid #dfe4ea;
-  border-radius: 4px;
-  cursor: pointer;
+    margin: 0;
+    padding: 0;
+    font-family: var(--font-family);
+    background-color: var(--bg-color);
+    background-image: var(--bg-image);
+    background-size: cover;
+    background-position: center;
+    background-attachment: fixed;
+    min-height: 100vh;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    transition: background-color 0.3s ease;
 }
 
 .container {
-  max-width: 500px;
-  width: 90%;
-  text-align: center;
-  padding: 2.5rem 2rem;
-  border-radius: 20px;
-  background: var(--popup-bg);
-  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
-  transition: all 0.3s ease;
-  position: relative;
+    width: 90%;
+    max-width: 500px;
+    text-align: center;
+    z-index: 1;
 }
 
-h1 {
-  font-size: 1.75rem;
-  font-weight: 700;
-  margin-bottom: 1.5rem;
-  letter-spacing: -0.5px;
-  color: var(--primary-color);
-}
-
-.image-preview-container {
-  width: 100%;
-  height: 250px;
-  background-color: rgba(255, 255, 255, 0.5);
-  border: 2px solid rgba(0,0,0,0.05);
-  border-radius: 12px;
-  margin-bottom: 1.5rem;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  overflow: hidden;
-  position: relative;
-}
-
-.image-preview-container img {
-  width: 100%;
-  height: 100%;
-  object-fit: cover;
-}
-
-.button-group {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  gap: 1rem;
-  margin-top: 2rem;
-  position: relative;
-  min-height: 60px;
-}
-
-.btn {
-  padding: 0.75rem 1.75rem;
-  font-size: 1rem;
-  font-weight: 600;
-  border-radius: 10px;
-  border: none;
-  cursor: pointer;
-  transition: transform 0.1s ease, font-size 0.2s ease, background-color 0.2s ease;
-  white-space: nowrap;
-}
-
-.btn-yes {
-  background-color: var(--primary-color);
-  color: white;
-  z-index: 10;
-  box-shadow: 0 4px 12px rgba(230, 57, 70, 0.3);
-}
-
-.btn-yes:hover {
-  background-color: #d62839;
-}
-
-.btn-no {
-  background-color: #fff;
-  color: var(--text-color);
-  position: relative;
-  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
+#proposal-box, #success-message {
+    background-color: var(--popup-bg);
+    padding: 2.5rem;
+    border-radius: 20px;
+    box-shadow: 0 10px 25px rgba(0,0,0,0.1);
+    backdrop-filter: blur(5px);
+    transition: all 0.3s ease;
 }
 
 #success-message {
-  display: none;
-  animation: fadeIn 0.8s ease forwards;
+    display: none;
+    animation: fadeInScale 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
+    transform: translateY(var(--second-page-box-pos-y));
 }
 
-@keyframes fadeIn {
-  from { opacity: 0; transform: translateY(10px); }
-  to { opacity: 1; transform: translateY(0); }
+#success-message.preview-mode {
+    animation: none; /* No animation for preview to make it snappier */
+}
+
+#success-message.preview-mode .redirect-hint {
+    display: none;
+}
+
+@keyframes fadeInScale {
+    from { opacity: 0; transform: translateY(calc(var(--second-page-box-pos-y) + 20px)) scale(0.9); }
+    to { opacity: 1; transform: translateY(var(--second-page-box-pos-y)) scale(1); }
+}
+
+h1 {
+    color: var(--proposal-text-color);
+    font-size: var(--proposal-text-size);
+    margin-bottom: 2rem;
+}
+
+.image-preview-container {
+    width: 100%;
+    height: 250px;
+    background: #f1f5f9;
+    border-radius: var(--image-border-radius);
+    margin-bottom: 2rem;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    overflow: hidden;
+    position: relative;
+    border: 2px dashed #cbd5e1;
+}
+
+.image-preview-container.has-image {
+    border: none;
+}
+
+.image-preview-container img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+}
+
+.button-group {
+    display: flex;
+    gap: 1.5rem;
+    justify-content: center;
+    align-items: center;
+    min-height: 60px;
+}
+
+.btn {
+    padding: 0.8rem 2rem;
+    border: none;
+    border-radius: 50px;
+    font-weight: 700;
+    cursor: pointer;
+    transition: transform 0.2s, box-shadow 0.2s;
+    font-family: inherit;
+}
+
+.btn:active {
+    transform: scale(0.95);
+}
+
+.btn-yes {
+    background-color: #e63946;
+    color: white;
+    font-size: 1.1rem;
+    box-shadow: 0 4px 15px rgba(230, 57, 70, 0.3);
+}
+
+.btn-no {
+    background-color: #f8fafc;
+    color: #64748b;
+    border: 1px solid #e2e8f0;
 }
 
 .success-text {
-  font-size: 1.25rem;
-  line-height: 1.6;
-  color: var(--primary-color);
-  font-weight: 700;
-  margin-bottom: 0.5rem;
+    font-size: var(--success-text-1-size);
+    color: var(--second-page-text-color);
+    font-weight: 700;
+    margin-bottom: 1.5rem;
+}
+
+.success-text-small {
+    font-size: var(--success-text-2-size);
 }
 
 .redirect-hint {
-  margin-top: 2rem;
-  font-size: 0.85rem;
-  color: var(--secondary-text);
-  font-style: italic;
+    font-size: 0.9rem;
+    color: #64748b;
+    margin-top: 2rem;
+    font-style: italic;
 }
 
-#image-input, #bg-image-input {
-  display: none;
+/* Admin Controls */
+.admin-controls {
+    position: fixed;
+    top: 20px;
+    right: 20px;
+    display: flex;
+    flex-direction: column;
+    align-items: flex-end;
+    gap: 10px;
+    z-index: 1000;
+}
+
+.control-buttons {
+    display: flex;
+    gap: 10px;
+}
+
+.admin-controls button {
+    background: white;
+    border: 1px solid #e2e8f0;
+    padding: 8px;
+    border-radius: 8px;
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: #64748b;
+    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
+    transition: all 0.2s;
+}
+
+.admin-controls button:hover {
+    background: #f8fafc;
+    color: #e63946;
+}
+
+.settings-panel {
+    background: white;
+    border: 1px solid #e2e8f0;
+    border-radius: 12px;
+    padding: 15px;
+    width: 280px;
+    box-shadow: 0 10px 25px rgba(0,0,0,0.1);
+    display: flex;
+    flex-direction: column;
+    gap: 12px;
+}
+
+.settings-scroll-area {
+    max-height: 400px;
+    overflow-y: auto;
+    padding-right: 5px;
+}
+
+.settings-scroll-area::-webkit-scrollbar {
+    width: 6px;
+}
+
+.settings-scroll-area::-webkit-scrollbar-thumb {
+    background: #e2e8f0;
+    border-radius: 10px;
+}
+
+.settings-group {
+    margin-bottom: 15px;
+}
+
+.settings-group:last-child {
+    margin-bottom: 0;
+}
+
+.settings-group label {
+    display: block;
+    font-size: 0.8rem;
+    color: #64748b;
+    margin-bottom: 5px;
+    font-weight: 600;
+}
+
+.settings-group input[type="color"],
+.settings-group input[type="number"],
+.settings-group select {
+    width: 100%;
+    padding: 6px;
+    border: 1px solid #e2e8f0;
+    border-radius: 6px;
+    outline: none;
+}
+
+.btn-small {
+    padding: 4px 10px !important;
+    font-size: 0.75rem !important;
+}
+
+#bg-image-input {
+    display: none;
+}
+
+/* State management */
+.state-locked .admin-controls #lock-btn {
+    opacity: 0.3;
+}
+.state-locked .admin-controls #lock-btn:hover {
+    opacity: 1;
 }
\ No newline at end of file
diff --git a/assets/js/main.js b/assets/js/main.js
index fc15cca..587379a 100644
--- a/assets/js/main.js
+++ b/assets/js/main.js
@@ -1,109 +1,282 @@
 document.addEventListener('DOMContentLoaded', () => {
-    const noBtn = document.getElementById('no-btn');
     const yesBtn = document.getElementById('yes-btn');
+    const noBtn = document.getElementById('no-btn');
     const proposalBox = document.getElementById('proposal-box');
-    const successBox = document.getElementById('success-message');
-    const lockBtn = document.getElementById('lock-btn');
+    const successMessage = document.getElementById('success-message');
     const resetBtn = document.getElementById('reset-btn');
+    const lockBtn = document.getElementById('lock-btn');
     const settingsToggle = document.getElementById('settings-toggle');
     const settingsPanel = document.getElementById('settings-panel');
+    const previewImg = document.getElementById('preview-img');
+    const previewSuccessToggle = document.getElementById('preview-success-toggle');
+
+    // Setting inputs
     const bgColorPicker = document.getElementById('bg-color-picker');
     const popupColorPicker = document.getElementById('popup-color-picker');
     const bgImageInput = document.getElementById('bg-image-input');
     const removeBgBtn = document.getElementById('remove-bg-btn');
+    const fontFamilySelect = document.getElementById('font-family-select');
+    const secondPageTextColorPicker = document.getElementById('second-page-text-color-picker');
+    const secondPageBoxPosYInput = document.getElementById('second-page-box-pos-y-input');
+    const imageBorderRadiusInput = document.getElementById('image-border-radius-input');
     
-    let yesScale = 1;
-    let isLocked = typeof IS_LOCKED !== 'undefined' ? IS_LOCKED : false;
+    // New setting inputs
+    const proposalTextColorPicker = document.getElementById('proposal-text-color-picker');
+    const proposalTextSizeInput = document.getElementById('proposal-text-size-input');
+    const successText1SizeInput = document.getElementById('success-text-1-size-input');
+    const successText2SizeInput = document.getElementById('success-text-2-size-input');
+    const proposalTextInput = document.getElementById('proposal-text-input');
+    const successText1Input = document.getElementById('success-text-1-input');
+    const successText2Input = document.getElementById('success-text-2-input');
+    
+    // Display elements
+    const proposalTextDisplay = document.getElementById('proposal-text-display');
+    const successText1Display = document.getElementById('success-text-1-display');
+    const successText2Display = document.getElementById('success-text-2-display');
 
-    // Settings Toggle
-    if (settingsToggle) {
-        settingsToggle.addEventListener('click', () => {
-            settingsPanel.style.display = settingsPanel.style.display === 'none' ? 'flex' : 'none';
-        });
-    }
+    let noCount = 0;
+    const phrases = [
+        "No", "Are you sure?", "Really sure?", "Think again!", "Last chance!",
+        "Surely not?", "You might regret this!", "Give it another thought!",
+        "Are you absolutely sure?", "This could be a mistake!", "Have a heart!",
+        "Don't be so cold!", "Change of heart?", "Wouldn't you reconsider?",
+        "Is that your final answer?", "You're breaking my heart ;("
+    ];
 
-    // Color Pickers
-    if (bgColorPicker) {
-        bgColorPicker.addEventListener('input', (e) => {
-            document.documentElement.style.setProperty('--bg-color', e.target.value);
-        });
-        bgColorPicker.addEventListener('change', (e) => {
-            const formData = new FormData();
-            formData.append('action', 'update_bg_color');
-            formData.append('color', e.target.value);
-            fetch('api/save_settings.php', { method: 'POST', body: formData });
-        });
-    }
+    // No button movement and text change
+    noBtn.addEventListener('click', () => {
+        noCount++;
+        noBtn.innerText = phrases[Math.min(noCount, phrases.length - 1)];
+        
+        const currentSize = parseFloat(window.getComputedStyle(yesBtn).fontSize);
+        yesBtn.style.fontSize = `${currentSize * 1.2}px`;
+        yesBtn.style.padding = `${parseFloat(window.getComputedStyle(yesBtn).paddingTop) * 1.2}px ${parseFloat(window.getComputedStyle(yesBtn).paddingLeft) * 1.2}px`;
+        
+        // Randomly move No button
+        const container = document.getElementById('main-container');
+        const containerRect = container.getBoundingClientRect();
+        const btnRect = noBtn.getBoundingClientRect();
+        
+        const maxX = containerRect.width - btnRect.width;
+        const maxY = containerRect.height - btnRect.height;
+        
+        const randomX = Math.floor(Math.random() * maxX);
+        const randomY = Math.floor(Math.random() * maxY);
+        
+        noBtn.style.position = 'absolute';
+        noBtn.style.left = `${randomX}px`;
+        noBtn.style.top = `${randomY}px`;
+    });
 
-    if (popupColorPicker) {
-        popupColorPicker.addEventListener('input', (e) => {
-            document.documentElement.style.setProperty('--popup-bg', e.target.value);
-        });
-        popupColorPicker.addEventListener('change', (e) => {
-            const formData = new FormData();
-            formData.append('action', 'update_popup_color');
-            formData.append('color', e.target.value);
-            fetch('api/save_settings.php', { method: 'POST', body: formData });
-        });
-    }
+    // Yes button action
+    yesBtn.addEventListener('click', () => {
+        if (previewSuccessToggle.checked) return; // Ignore if in preview mode
+        
+        proposalBox.style.display = 'none';
+        successMessage.style.display = 'block';
+        
+        // Confetti effect
+        const duration = 15 * 1000;
+        const animationEnd = Date.now() + duration;
+        const defaults = { startVelocity: 30, spread: 360, ticks: 60, zIndex: 0 };
 
-    // Background Image Upload
-    if (bgImageInput) {
-        bgImageInput.addEventListener('change', function() {
-            const file = this.files[0];
-            if (file) {
-                const formData = new FormData();
-                formData.append('action', 'upload_bg_image');
-                formData.append('image', file);
+        function randomInRange(min, max) {
+            return Math.random() * (max - min) + min;
+        }
 
-                fetch('api/save_settings.php', {
-                    method: 'POST',
-                    body: formData
-                })
-                .then(response => response.json())
-                .then(data => {
-                    if (data.success) {
-                        document.documentElement.style.setProperty('--bg-image', `url('${data.path}?t=${new Date().getTime()}')`);
-                        location.reload(); // Reload to update the "Remove" button visibility
-                    } else {
-                        alert(data.error || 'Failed to upload background image');
-                    }
-                })
-                .catch(error => {
-                    console.error('Error:', error);
-                    alert('An error occurred during upload.');
-                });
+        const interval = setInterval(function() {
+            const timeLeft = animationEnd - Date.now();
+
+            if (timeLeft <= 0) {
+                return clearInterval(interval);
             }
-        });
-    }
 
-    if (removeBgBtn) {
-        removeBgBtn.addEventListener('click', () => {
-            const formData = new FormData();
-            formData.append('action', 'remove_bg_image');
-            fetch('api/save_settings.php', { method: 'POST', body: formData })
-            .then(response => response.json())
-            .then(data => {
-                if (data.success) {
-                    document.documentElement.style.setProperty('--bg-image', 'none');
-                    location.reload();
-                }
-            });
-        });
-    }
+            const particleCount = 50 * (timeLeft / duration);
+            confetti({ ...defaults, particleCount, origin: { x: randomInRange(0.1, 0.3), y: Math.random() - 0.2 } });
+            confetti({ ...defaults, particleCount, origin: { x: randomInRange(0.7, 0.9), y: Math.random() - 0.2 } });
+        }, 250);
+
+        // Redirect after 15 seconds
+        setTimeout(() => {
+            window.location.href = "https://www.youtube.com/watch?v=dQw4w9WgXcQ";
+        }, 15000);
+    });
+
+    // Preview Success Page logic
+    previewSuccessToggle.addEventListener('change', (e) => {
+        if (e.target.checked) {
+            proposalBox.style.display = 'none';
+            successMessage.style.display = 'block';
+            successMessage.classList.add('preview-mode');
+        } else {
+            proposalBox.style.display = 'block';
+            successMessage.style.display = 'none';
+            successMessage.classList.remove('preview-mode');
+        }
+    });
+
+    // Toggle settings panel
+    settingsToggle.addEventListener('click', () => {
+        settingsPanel.style.display = settingsPanel.style.display === 'none' ? 'flex' : 'none';
+    });
+
+    // Update background color
+    bgColorPicker.addEventListener('input', (e) => {
+        document.documentElement.style.setProperty('--bg-color', e.target.value);
+    });
+
+    bgColorPicker.addEventListener('change', (e) => {
+        saveSetting('update_bg_color', { color: e.target.value });
+    });
+
+    // Update popup color
+    popupColorPicker.addEventListener('input', (e) => {
+        document.documentElement.style.setProperty('--popup-bg', e.target.value);
+    });
+
+    popupColorPicker.addEventListener('change', (e) => {
+        saveSetting('update_popup_color', { color: e.target.value });
+    });
+
+    // Update second page text color
+    secondPageTextColorPicker.addEventListener('input', (e) => {
+        document.documentElement.style.setProperty('--second-page-text-color', e.target.value);
+    });
+
+    secondPageTextColorPicker.addEventListener('change', (e) => {
+        saveSetting('update_second_page_text_color', { color: e.target.value });
+    });
+    
+    // Update proposal text color
+    proposalTextColorPicker.addEventListener('input', (e) => {
+        document.documentElement.style.setProperty('--proposal-text-color', e.target.value);
+    });
+
+    proposalTextColorPicker.addEventListener('change', (e) => {
+        saveSetting('update_proposal_text_color', { color: e.target.value });
+    });
+
+    // Update font family
+    fontFamilySelect.addEventListener('change', (e) => {
+        document.documentElement.style.setProperty('--font-family', e.target.value);
+        saveSetting('update_font_family', { font: e.target.value });
+    });
+
+    // Update success box Y position
+    secondPageBoxPosYInput.addEventListener('input', (e) => {
+        document.documentElement.style.setProperty('--second-page-box-pos-y', `${e.target.value}px`);
+    });
+
+    secondPageBoxPosYInput.addEventListener('change', (e) => {
+        saveSetting('update_second_page_box_pos_y', { pos: e.target.value });
+    });
+
+    // Update image border radius
+    imageBorderRadiusInput.addEventListener('input', (e) => {
+        document.documentElement.style.setProperty('--image-border-radius', `${e.target.value}px`);
+    });
+
+    imageBorderRadiusInput.addEventListener('change', (e) => {
+        saveSetting('update_image_border_radius', { radius: e.target.value });
+    });
+    
+    // Update proposal text size
+    proposalTextSizeInput.addEventListener('input', (e) => {
+        document.documentElement.style.setProperty('--proposal-text-size', `${e.target.value}rem`);
+    });
+
+    proposalTextSizeInput.addEventListener('change', (e) => {
+        saveSetting('update_proposal_text_size', { size: e.target.value });
+    });
+
+    // Update success text 1 size
+    successText1SizeInput.addEventListener('input', (e) => {
+        document.documentElement.style.setProperty('--success-text-1-size', `${e.target.value}rem`);
+    });
+
+    successText1SizeInput.addEventListener('change', (e) => {
+        saveSetting('update_success_text_1_size', { size: e.target.value });
+    });
+
+    // Update success text 2 size
+    successText2SizeInput.addEventListener('input', (e) => {
+        document.documentElement.style.setProperty('--success-text-2-size', `${e.target.value}rem`);
+    });
+
+    successText2SizeInput.addEventListener('change', (e) => {
+        saveSetting('update_success_text_2_size', { size: e.target.value });
+    });
+    
+    // Update proposal text content
+    proposalTextInput.addEventListener('input', (e) => {
+        proposalTextDisplay.innerText = e.target.value;
+    });
+
+    proposalTextInput.addEventListener('change', (e) => {
+        saveSetting('update_proposal_text', { text: e.target.value });
+    });
+
+    // Update success text 1 content
+    successText1Input.addEventListener('input', (e) => {
+        successText1Display.innerText = e.target.value;
+    });
+
+    successText1Input.addEventListener('change', (e) => {
+        saveSetting('update_success_text_1', { text: e.target.value });
+    });
+
+    // Update success text 2 content
+    successText2Input.addEventListener('input', (e) => {
+        successText2Display.innerText = e.target.value;
+    });
+
+    successText2Input.addEventListener('change', (e) => {
+        saveSetting('update_success_text_2', { text: e.target.value });
+    });
+
+    // Upload background image
+    bgImageInput.addEventListener('change', (e) => {
+        const file = e.target.files[0];
+        if (!file) return;
 
-    // Lock/Unlock Toggle
-    lockBtn.addEventListener('click', () => {
-        const newLockedState = !isLocked;
         const formData = new FormData();
-        formData.append('action', 'toggle_lock');
-        formData.append('lock', newLockedState);
+        formData.append('action', 'upload_bg_image');
+        formData.append('image', file);
 
         fetch('api/save_settings.php', {
             method: 'POST',
             body: formData
         })
-        .then(response => response.json())
+        .then(res => res.json())
+        .then(data => {
+            if (data.success) {
+                document.documentElement.style.setProperty('--bg-image', `url('${data.path}?v=${Date.now()}')`);
+                location.reload(); // Reload to show remove button and update PHP state
+            }
+        });
+    });
+
+    // Remove background image
+    if (removeBgBtn) {
+        removeBgBtn.addEventListener('click', () => {
+            saveSetting('remove_bg_image', {}).then(() => {
+                location.reload();
+            });
+        });
+    }
+
+    // Toggle Lock
+    lockBtn.addEventListener('click', () => {
+        const newLockState = !IS_LOCKED;
+        const formData = new FormData();
+        formData.append('action', 'toggle_lock');
+        formData.append('lock', newLockState);
+
+        fetch('api/save_settings.php', {
+            method: 'POST',
+            body: formData
+        })
+        .then(res => res.json())
         .then(data => {
             if (data.success) {
                 location.reload();
@@ -111,99 +284,30 @@ document.addEventListener('DOMContentLoaded', () => {
         });
     });
 
-    // Reset Experience
+    // Reset settings
     resetBtn.addEventListener('click', () => {
-        if (confirm('Reset everything to defaults?')) {
-            const formData = new FormData();
-            formData.append('action', 'reset');
-
-            fetch('api/save_settings.php', {
-                method: 'POST',
-                body: formData
-            })
-            .then(response => response.json())
-            .then(data => {
-                if (data.success) {
-                    location.reload();
-                }
+        if (confirm('Are you sure you want to reset all settings to defaults?')) {
+            saveSetting('reset', {}).then(() => {
+                location.reload();
             });
         }
     });
 
-    // "No" Button Dodging Logic
-    const dodgeThreshold = 100; // pixels
-
-    document.addEventListener('mousemove', (e) => {
-        if (!noBtn || (successBox && successBox.style.display === 'block')) return;
-
-        const rect = noBtn.getBoundingClientRect();
-        const btnCenterX = rect.left + rect.width / 2;
-        const btnCenterY = rect.top + rect.height / 2;
-
-        const distance = Math.hypot(e.clientX - btnCenterX, e.clientY - btnCenterY);
-
-        if (distance < dodgeThreshold) {
-            const angle = Math.atan2(e.clientY - btnCenterY, e.clientX - btnCenterX);
-            const moveDist = dodgeThreshold - distance + 20;
-
-            let newX = rect.left - Math.cos(angle) * moveDist;
-            let newY = rect.top - Math.sin(angle) * moveDist;
-
-            // Keep within viewport bounds
-            const padding = 20;
-            newX = Math.max(padding, Math.min(window.innerWidth - rect.width - padding, newX));
-            newY = Math.max(padding, Math.min(window.innerHeight - rect.height - padding, newY));
-
-            noBtn.style.position = 'fixed';
-            noBtn.style.left = `${newX}px`;
-            noBtn.style.top = `${newY}px`;
-            noBtn.style.margin = '0';
+    async function saveSetting(action, data) {
+        const formData = new FormData();
+        formData.append('action', action);
+        for (const key in data) {
+            formData.append(key, data[key]);
         }
-    });
 
-    // "No" Click Logic
-    if (noBtn) {
-        noBtn.addEventListener('click', (e) => {
-            e.preventDefault();
-            yesScale += 0.15;
-            yesBtn.style.transform = `scale(${yesScale})`;
-        });
-    }
-
-    // "Yes" Click Logic
-    if (yesBtn) {
-        yesBtn.addEventListener('click', () => {
-            proposalBox.style.display = 'none';
-            successBox.style.display = 'block';
-            
-            // Hide controls during celebration
-            document.querySelector('.admin-controls').style.display = 'none';
-
-            // Confetti effect
-            const duration = 15 * 1000;
-            const animationEnd = Date.now() + duration;
-            const defaults = { startVelocity: 30, spread: 360, ticks: 60, zIndex: 0 };
-
-            function randomInRange(min, max) {
-                return Math.random() * (max - min) + min;
-            }
-
-            const interval = setInterval(function() {
-                const timeLeft = animationEnd - Date.now();
-
-                if (timeLeft <= 0) {
-                    return clearInterval(interval);
-                }
-
-                const particleCount = 50 * (timeLeft / duration);
-                confetti(Object.assign({}, defaults, { particleCount, origin: { x: randomInRange(0.1, 0.3), y: Math.random() - 0.2 } }));
-                confetti(Object.assign({}, defaults, { particleCount, origin: { x: randomInRange(0.7, 0.9), y: Math.random() - 0.2 } }));
-            }, 250);
-
-            // Redirect after 15s
-            setTimeout(() => {
-                window.location.href = "https://www.youtube.com/watch?v=dQw4w9WgXcQ";
-            }, 15000);
-        });
+        try {
+            const res = await fetch('api/save_settings.php', {
+                method: 'POST',
+                body: formData
+            });
+            return await res.json();
+        } catch (err) {
+            console.error('Failed to save setting:', err);
+        }
     }
 });
diff --git a/db/migrations/003_add_font_and_pos_settings.sql b/db/migrations/003_add_font_and_pos_settings.sql
new file mode 100644
index 0000000..a288b46
--- /dev/null
+++ b/db/migrations/003_add_font_and_pos_settings.sql
@@ -0,0 +1,5 @@
+INSERT IGNORE INTO settings (setting_key, setting_value) VALUES 
+('font_family', "'Inter', sans-serif"),
+('second_page_text_color', '#e63946'),
+('second_page_box_pos_y', '0'),
+('image_border_radius', '12');
diff --git a/db/migrations/004_add_text_content_and_size_settings.sql b/db/migrations/004_add_text_content_and_size_settings.sql
new file mode 100644
index 0000000..6f71cdb
--- /dev/null
+++ b/db/migrations/004_add_text_content_and_size_settings.sql
@@ -0,0 +1,9 @@
+INSERT IGNORE INTO settings (setting_key, setting_value) VALUES 
+('proposal_text', 'Gvantsa, would you be my valentine?'),
+('success_text_1', 'Congratulations, you are now Sam\'s Valentine! ❤️'),
+('success_text_2', 'He is so incredibly lucky to have someone in his life who would click yes.'),
+('proposal_text_color', '#e63946'),
+('proposal_text_size', '2'),
+('success_text_1_size', '1.5'),
+('success_text_2_size', '0.9');
+
diff --git a/index.php b/index.php
index 3b39361..e5e519a 100644
--- a/index.php
+++ b/index.php
@@ -12,15 +12,29 @@ $isLocked = ($settings['is_locked'] ?? '0') === '1';
 $bgColor = $settings['bg_color'] ?? '#ffe4e6';
 $bgImage = $settings['bg_image'] ?? '';
 $popupColor = $settings['popup_color'] ?? '#ffccd5';
+$fontFamily = $settings['font_family'] ?? "'Inter', sans-serif";
+$secondPageTextColor = $settings['second_page_text_color'] ?? '#e63946';
+$secondPageBoxPosY = $settings['second_page_box_pos_y'] ?? '0';
+$imageBorderRadius = $settings['image_border_radius'] ?? '12';
+
+// New settings
+$proposalText = $settings['proposal_text'] ?? 'Gvantsa, would you be my valentine?';
+$successText1 = $settings['success_text_1'] ?? "Congratulations, you are now Sam's Valentine! ❤️";
+$successText2 = $settings['success_text_2'] ?? "He is so incredibly lucky to have someone in his life who would click yes.";
+$proposalTextColor = $settings['proposal_text_color'] ?? '#e63946';
+$proposalTextSize = $settings['proposal_text_size'] ?? '2';
+$successText1Size = $settings['success_text_1_size'] ?? '1.5';
+$successText2Size = $settings['success_text_2_size'] ?? '0.9';
+
 ?>
 <!doctype html>
 <html lang="en">
 <head>
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
-    <title>Gvantsa, would you be my valentine?</title>
+    <title><?= htmlspecialchars($proposalText) ?></title>
     <?php
-    $projectDescription = $_SERVER['PROJECT_DESCRIPTION'] ?? 'A special valentine proposal for Gvantsa.';
+    $projectDescription = $_SERVER['PROJECT_DESCRIPTION'] ?? 'A special valentine proposal.';
     $projectImageUrl = $_SERVER['PROJECT_IMAGE_URL'] ?? ($valentineImage ?: '');
     ?>
     <meta name="description" content="<?= htmlspecialchars($projectDescription) ?>" />
@@ -33,13 +47,22 @@ $popupColor = $settings['popup_color'] ?? '#ffccd5';
 
     <link rel="preconnect" href="https://fonts.googleapis.com">
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&display=swap" rel="stylesheet">
+    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&family=Dancing+Script:wght@400;700&family=Pacifico&family=Quicksand:wght@400;700&family=Caveat:wght@400;700&display=swap" rel="stylesheet">
     <link rel="stylesheet" href="assets/css/custom.css?v=<?php echo time(); ?>">
     <style>
         :root {
             --bg-color: <?= htmlspecialchars($bgColor) ?>;
             --popup-bg: <?= htmlspecialchars($popupColor) ?>;
             --bg-image: <?= $bgImage ? "url('" . htmlspecialchars($bgImage) . "')" : 'none' ?>;
+            --font-family: <?= $fontFamily ?>;
+            --second-page-text-color: <?= htmlspecialchars($secondPageTextColor) ?>;
+            --second-page-box-pos-y: <?= htmlspecialchars($secondPageBoxPosY) ?>px;
+            --image-border-radius: <?= htmlspecialchars($imageBorderRadius) ?>px;
+            
+            --proposal-text-color: <?= htmlspecialchars($proposalTextColor) ?>;
+            --proposal-text-size: <?= htmlspecialchars($proposalTextSize) ?>rem;
+            --success-text-1-size: <?= htmlspecialchars($successText1Size) ?>rem;
+            --success-text-2-size: <?= htmlspecialchars($successText2Size) ?>rem;
         }
     </style>
 </head>
@@ -63,28 +86,91 @@ $popupColor = $settings['popup_color'] ?? '#ffccd5';
         </div>
 
         <div id="settings-panel" class="settings-panel" style="display: none;">
-            <div class="settings-group">
-                <label>Background Color</label>
-                <input type="color" id="bg-color-picker" value="<?= htmlspecialchars($bgColor) ?>">
-            </div>
-            <div class="settings-group">
-                <label>Pop-up Color</label>
-                <input type="color" id="popup-color-picker" value="<?= htmlspecialchars($popupColor) ?>">
-            </div>
-            <div class="settings-group">
-                <label>Background Image</label>
-                <button class="btn-small" onclick="document.getElementById('bg-image-input').click()">Upload</button>
-                <?php if ($bgImage): ?>
-                    <button class="btn-small" id="remove-bg-btn" style="margin-top:2px">Remove</button>
-                <?php endif; ?>
-                <input type="file" id="bg-image-input" accept="image/*">
+            <div class="settings-scroll-area">
+                <div class="settings-group">
+                    <label style="display: flex; align-items: center; cursor: pointer; color: #e63946; font-weight: bold;">
+                        <input type="checkbox" id="preview-success-toggle" style="margin-right: 8px; width: auto;">
+                        Preview Success Page
+                    </label>
+                </div>
+                
+                <div class="settings-group">
+                    <label>Proposal Text</label>
+                    <textarea id="proposal-text-input" rows="2" style="width:100%; padding:6px; border:1px solid #e2e8f0; border-radius:6px;"><?= htmlspecialchars($proposalText) ?></textarea>
+                </div>
+                <div class="settings-group">
+                    <label>Success Text Line 1</label>
+                    <textarea id="success-text-1-input" rows="2" style="width:100%; padding:6px; border:1px solid #e2e8f0; border-radius:6px;"><?= htmlspecialchars($successText1) ?></textarea>
+                </div>
+                <div class="settings-group">
+                    <label>Success Text Line 2</label>
+                    <textarea id="success-text-2-input" rows="2" style="width:100%; padding:6px; border:1px solid #e2e8f0; border-radius:6px;"><?= htmlspecialchars($successText2) ?></textarea>
+                </div>
+
+                <div class="settings-group">
+                    <label>Font Family</label>
+                    <select id="font-family-select">
+                        <option value="'Inter', sans-serif" <?= $fontFamily === "'Inter', sans-serif" ? 'selected' : '' ?>>Inter</option>
+                        <option value="'Dancing Script', cursive" <?= $fontFamily === "'Dancing Script', cursive" ? 'selected' : '' ?>>Dancing Script</option>
+                        <option value="'Pacifico', cursive" <?= $fontFamily === "'Pacifico', cursive" ? 'selected' : '' ?>>Pacifico</option>
+                        <option value="'Quicksand', sans-serif" <?= $fontFamily === "'Quicksand', sans-serif" ? 'selected' : '' ?>>Quicksand</option>
+                        <option value="'Caveat', cursive" <?= $fontFamily === "'Caveat', cursive" ? 'selected' : '' ?>>Caveat</option>
+                    </select>
+                </div>
+                <div class="settings-group">
+                    <label>Proposal Text Color</label>
+                    <input type="color" id="proposal-text-color-picker" value="<?= htmlspecialchars($proposalTextColor) ?>">
+                </div>
+                <div class="settings-group">
+                    <label>Success Page Text Color</label>
+                    <input type="color" id="second-page-text-color-picker" value="<?= htmlspecialchars($secondPageTextColor) ?>">
+                </div>
+
+                <div class="settings-group">
+                    <label>Proposal Text Size (rem)</label>
+                    <input type="number" id="proposal-text-size-input" step="0.1" value="<?= htmlspecialchars($proposalTextSize) ?>">
+                </div>
+                <div class="settings-group">
+                    <label>Success Text 1 Size (rem)</label>
+                    <input type="number" id="success-text-1-size-input" step="0.1" value="<?= htmlspecialchars($successText1Size) ?>">
+                </div>
+                <div class="settings-group">
+                    <label>Success Text 2 Size (rem)</label>
+                    <input type="number" id="success-text-2-size-input" step="0.1" value="<?= htmlspecialchars($successText2Size) ?>">
+                </div>
+
+                <div class="settings-group">
+                    <label>Background Color</label>
+                    <input type="color" id="bg-color-picker" value="<?= htmlspecialchars($bgColor) ?>">
+                </div>
+                <div class="settings-group">
+                    <label>Pop-up Color</label>
+                    <input type="color" id="popup-color-picker" value="<?= htmlspecialchars($popupColor) ?>">
+                </div>
+                
+                <div class="settings-group">
+                    <label>Success Box Y Offset (px)</label>
+                    <input type="number" id="second-page-box-pos-y-input" value="<?= htmlspecialchars($secondPageBoxPosY) ?>">
+                </div>
+                <div class="settings-group">
+                    <label>Image Border Radius (px)</label>
+                    <input type="number" id="image-border-radius-input" value="<?= htmlspecialchars($imageBorderRadius) ?>">
+                </div>
+                <div class="settings-group">
+                    <label>Background Image</label>
+                    <button class="btn-small" onclick="document.getElementById('bg-image-input').click()">Upload</button>
+                    <?php if ($bgImage): ?>
+                        <button class="btn-small" id="remove-bg-btn" style="margin-top:2px">Remove</button>
+                    <?php endif; ?>
+                    <input type="file" id="bg-image-input" accept="image/*">
+                </div>
             </div>
         </div>
     </div>
 
-    <div class="container">
+    <div class="container" id="main-container">
         <div id="proposal-box">
-            <h1>Gvantsa, would you be my valentine?</h1>
+            <h1 id="proposal-text-display"><?= htmlspecialchars($proposalText) ?></h1>
             
             <div class="image-preview-container has-image">
                 <img id="preview-img" src="<?= htmlspecialchars($valentineImage) ?>" alt="Valentine Image">
@@ -97,8 +183,8 @@ $popupColor = $settings['popup_color'] ?? '#ffccd5';
         </div>
 
         <div id="success-message">
-            <p class="success-text">Congratulations, you are now Sam's Valentine! ❤️</p>
-            <p class="success-text">He is so incredibly lucky to have someone in his life who would click yes.</p>
+            <p class="success-text" id="success-text-1-display"><?= htmlspecialchars($successText1) ?></p>
+            <p class="success-text success-text-small" id="success-text-2-display"><?= htmlspecialchars($successText2) ?></p>
             <div class="redirect-hint">Redirecting you to a special surprise in 15 seconds...</div>
         </div>
     </div>
@@ -109,4 +195,4 @@ $popupColor = $settings['popup_color'] ?? '#ffccd5';
     </script>
     <script src="assets/js/main.js?v=<?php echo time(); ?>"></script>
 </body>
-</html>
+</html>
\ No newline at end of file