diff --git a/script.js b/script.js
index d726227..34eeb3e 100644
--- a/script.js
+++ b/script.js
@@ -18,88 +18,88 @@ function extractVariables(text) {
   const regex = /\${([^}]+)}/g;
   const variables = [];
   let match;
-  
+
   while ((match = regex.exec(text)) !== null) {
-    const [variable, defaultValue] = match[1].split(':').map(s => s.trim());
-    variables.push({ name: variable, default: defaultValue || '' });
+    const [variable, defaultValue] = match[1].split(":").map((s) => s.trim());
+    variables.push({ name: variable, default: defaultValue || "" });
   }
-  
-  return [...new Set(variables.map(v => JSON.stringify(v)))].map(v => JSON.parse(v));  // Remove duplicates
+
+  return [...new Set(variables.map((v) => JSON.stringify(v)))].map((v) =>
+    JSON.parse(v)
+  ); // Remove duplicates
 }
 
 function createVariableInputs(variables, container) {
-  const form = document.createElement('div');
-  form.className = 'variable-form';
-  
-  variables.forEach(variable => {
-    const wrapper = document.createElement('div');
-    wrapper.className = 'variable-input-wrapper';
-    
-    const label = document.createElement('label');
+  const form = document.createElement("div");
+  form.className = "variable-form";
+
+  variables.forEach((variable) => {
+    const wrapper = document.createElement("div");
+    wrapper.className = "variable-input-wrapper";
+
+    const label = document.createElement("label");
     label.textContent = variable.name;
-    label.style.fontWeight = '600';
-    
-    const input = document.createElement('input');
-    input.type = 'text';
-    input.className = 'variable-input';
+    label.style.fontWeight = "600";
+
+    const input = document.createElement("input");
+    input.type = "text";
+    input.className = "variable-input";
     input.placeholder = variable.default || `Enter ${variable.name}`;
     input.dataset.variable = variable.name;
-    input.dataset.default = variable.default || '';
-    
+    input.dataset.default = variable.default || "";
+
     wrapper.appendChild(label);
     wrapper.appendChild(input);
     form.appendChild(wrapper);
   });
-  
+
   container.appendChild(form);
   return form;
 }
-// Function to update the prompt preview with user input
-function updatePromptPreview(promptText, form) {
-  let previewText = promptText;
-  const inputs = form.querySelectorAll('.variable-input');
-  
-  inputs.forEach(input => {
-    const value = input.value.trim();
-    const variable = input.dataset.variable;
-    const defaultValue = input.dataset.default;
-    const pattern = new RegExp(`\\$\{${variable}[^}]*\}`, 'g');
-    let replacement;
-    if (value) {
-      // User entered value
-      replacement = value;
-    } else if (defaultValue) {
-      // Show default value with highlight
-      replacement = defaultValue;
-    } else {
-      // No value or default, show variable name
-      replacement = variable;
-    }
-    replacement = `<b>${replacement}</b>`;
-    
-    previewText = previewText.replace(pattern,replacement);
-  });
-  
-  return previewText;
-}
 
-function updatedContent(promptText) {
-  // Check if content has variables
+// Function to update the prompt preview with user input or default values
+function updatePromptPreview(promptText, form) {
   const variables = extractVariables(promptText);
-  
+
   if (variables.length === 0) {
     return promptText; // Return original text if no variables found
   }
-  
-  // Replace variables with their default values if they exist
-  let updatedText = promptText;
-  variables.forEach(variable => {
-    const pattern = new RegExp(`\\$\{${variable.name}[^}]*\}`, 'g');
-    const replacement = variable.default || `<b>${variable.name}</b>`;
-    updatedText = updatedText.replace(pattern, replacement);
-  });
-  
-  return updatedText;
+
+  let previewText = promptText;
+  // Replace variables with their default values without editting (for prompt cards, copy buttons, chat)
+  if (!form) {
+    variables.forEach(variable => {
+      const pattern = new RegExp(`\\$\{${variable.name}[^}]*\}`, 'g');
+      const replacement = variable.default || `<b>${variable.name}</b>`;
+      previewText = previewText.replace(pattern, replacement);
+    });
+  }
+  // Replace variables according to the user inputs.
+  else {
+    const inputs = form.querySelectorAll(".variable-input");
+
+    inputs.forEach((input) => {
+      const value = input.value.trim();
+      const variable = input.dataset.variable;
+      const defaultValue = input.dataset.default;
+    const pattern = new RegExp(`\\$\{${variable}[^}]*\}`, 'g');
+      let replacement;
+      if (value) {
+        // User entered value
+        replacement = value;
+      } else if (defaultValue) {
+        // Show default value with highlight
+        replacement = defaultValue;
+      } else {
+        // No value or default, show variable name
+        replacement = variable;
+      }
+      replacement = `<b>${replacement}</b>`;
+
+      previewText = previewText.replace(pattern, replacement);
+    });
+  }
+  return previewText;
 }
 
 // Initialize everything after DOM loads
@@ -216,11 +216,12 @@ async function initializeSearch() {
       const searchTerm = e.target.value.toLowerCase();
 
       const filteredPrompts = prompts.filter((prompt) => {
-        const matchesSearch = prompt.act.toLowerCase().includes(searchTerm) ||
+        const matchesSearch =
+          prompt.act.toLowerCase().includes(searchTerm) ||
           prompt.prompt.toLowerCase().includes(searchTerm);
 
         return isDevMode
-          ? (matchesSearch && prompt.for_devs === true)
+          ? matchesSearch && prompt.for_devs === true
           : matchesSearch;
       });
 
@@ -254,29 +255,32 @@ function updatePromptCount(filteredCount, totalCount) {
 
 function parseCSV(csv) {
   const lines = csv.split("\n");
-  const headers = lines[0].split(",").map((header) =>
-    header.replace(/"/g, "").trim()
-  );
+  const headers = lines[0]
+    .split(",")
+    .map((header) => header.replace(/"/g, "").trim());
 
-  return lines.slice(1).map((line) => {
-    const values = line.match(/(".*?"|[^",\s]+)(?=\s*,|\s*$)/g) || [];
-    const entry = {};
+  return lines
+    .slice(1)
+    .map((line) => {
+      const values = line.match(/(".*?"|[^",\s]+)(?=\s*,|\s*$)/g) || [];
+      const entry = {};
 
-    headers.forEach((header, index) => {
-      let value = values[index] ? values[index].replace(/"/g, "").trim() : "";
-      // Remove backticks from the act/title
-      if (header === "act") {
-        value = value.replace(/`/g, "");
-      }
-      // Convert 'TRUE'/'FALSE' strings to boolean for for_devs
-      if (header === "for_devs") {
-        value = value.toUpperCase() === "TRUE";
-      }
-      entry[header] = value;
-    });
+      headers.forEach((header, index) => {
+        let value = values[index] ? values[index].replace(/"/g, "").trim() : "";
+        // Remove backticks from the act/title
+        if (header === "act") {
+          value = value.replace(/`/g, "");
+        }
+        // Convert 'TRUE'/'FALSE' strings to boolean for for_devs
+        if (header === "for_devs") {
+          value = value.toUpperCase() === "TRUE";
+        }
+        entry[header] = value;
+      });
 
-    return entry;
-  }).filter((entry) => entry.act && entry.prompt);
+      return entry;
+    })
+    .filter((entry) => entry.act && entry.prompt);
 }
 
 function displaySearchResults(results) {
@@ -320,8 +324,9 @@ function displaySearchResults(results) {
       // Find the prompt card with matching title
       const cards = document.querySelectorAll(".prompt-card");
       const targetCard = Array.from(cards).find((card) => {
-        const cardTitle = card.querySelector(".prompt-title").textContent
-          .replace(/\s+/g, " ") // Normalize whitespace
+        const cardTitle = card
+          .querySelector(".prompt-title")
+          .textContent.replace(/\s+/g, " ") // Normalize whitespace
           .replace(/[\n\r]/g, "") // Remove newlines
           .trim();
 
@@ -330,8 +335,10 @@ function displaySearchResults(results) {
           .replace(/[\n\r]/g, "") // Remove newlines
           .trim();
 
-        return cardTitle.toLowerCase().includes(searchTitle.toLowerCase()) ||
-          searchTitle.toLowerCase().includes(cardTitle.toLowerCase());
+        return (
+          cardTitle.toLowerCase().includes(searchTitle.toLowerCase()) ||
+          searchTitle.toLowerCase().includes(cardTitle.toLowerCase())
+        );
       });
 
       if (targetCard) {
@@ -351,8 +358,8 @@ function displaySearchResults(results) {
         if (isMobile) {
           // On mobile, scroll the window
           const cardRect = targetCard.getBoundingClientRect();
-          const scrollTop = window.pageYOffset + cardRect.top - headerHeight -
-            20;
+          const scrollTop =
+            window.pageYOffset + cardRect.top - headerHeight - 20;
 
           window.scrollTo({
             top: scrollTop,
@@ -362,8 +369,8 @@ function displaySearchResults(results) {
           // On desktop, scroll the main-content container
           const mainContent = document.querySelector(".main-content");
           const cardRect = targetCard.getBoundingClientRect();
-          const scrollTop = mainContent.scrollTop + cardRect.top -
-            headerHeight - 20;
+          const scrollTop =
+            mainContent.scrollTop + cardRect.top - headerHeight - 20;
 
           mainContent.scrollTo({
             top: scrollTop,
@@ -404,12 +411,13 @@ function filterPrompts() {
     .then((csvText) => {
       const prompts = parseCSV(csvText);
       const filteredPrompts = prompts.filter((prompt) => {
-        const matchesSearch = !searchTerm ||
+        const matchesSearch =
+          !searchTerm ||
           prompt.act.toLowerCase().includes(searchTerm) ||
           prompt.prompt.toLowerCase().includes(searchTerm);
 
         return isDevMode
-          ? (matchesSearch && prompt.for_devs === true)
+          ? matchesSearch && prompt.for_devs === true
           : matchesSearch;
       });
 
@@ -418,7 +426,7 @@ function filterPrompts() {
         filteredPrompts.length,
         isDevMode
           ? prompts.filter((p) => p.for_devs === true).length
-          : prompts.length,
+          : prompts.length
       );
       displaySearchResults(filteredPrompts);
 
@@ -426,23 +434,29 @@ function filterPrompts() {
       const promptsGrid = document.querySelector(".prompts-grid");
       if (promptsGrid) {
         const cards = promptsGrid.querySelectorAll(
-          ".prompt-card:not(.contribute-card)",
+          ".prompt-card:not(.contribute-card)"
         );
         cards.forEach((card) => {
           const title = card.querySelector(".prompt-title").textContent.trim();
           const matchingPrompt = prompts.find((p) => {
-            const pTitle = p.act.replace(/\s+/g, " ").replace(/[\n\r]/g, "")
+            const pTitle = p.act
+              .replace(/\s+/g, " ")
+              .replace(/[\n\r]/g, "")
               .trim();
-            const cardTitle = title.replace(/\s+/g, " ").replace(/[\n\r]/g, "")
+            const cardTitle = title
+              .replace(/\s+/g, " ")
+              .replace(/[\n\r]/g, "")
               .trim();
-            return pTitle.toLowerCase() === cardTitle.toLowerCase() ||
+            return (
+              pTitle.toLowerCase() === cardTitle.toLowerCase() ||
               pTitle.toLowerCase().includes(cardTitle.toLowerCase()) ||
-              cardTitle.toLowerCase().includes(pTitle.toLowerCase());
+              cardTitle.toLowerCase().includes(pTitle.toLowerCase())
+            );
           });
 
           // Show card if not in dev mode or if it's a dev prompt in dev mode
           card.style.display =
-            (!isDevMode || (matchingPrompt && matchingPrompt.for_devs === true))
+            !isDevMode || (matchingPrompt && matchingPrompt.for_devs === true)
               ? ""
               : "none";
         });
@@ -485,23 +499,29 @@ function createPromptCards() {
       const isDevMode = document.getElementById("devModeToggle").checked;
 
       const promptElements = document.querySelectorAll(
-        "h2[id^=act] + p + blockquote",
+        "h2[id^=act] + p + blockquote"
       );
 
       promptElements.forEach((blockquote) => {
-        const title = blockquote.previousElementSibling.previousElementSibling
-          .textContent.trim();
+        const title =
+          blockquote.previousElementSibling.previousElementSibling.textContent.trim();
         const content = blockquote.textContent.trim();
 
         // Find matching prompt in CSV
         const matchingPrompt = prompts.find((p) => {
-          const csvTitle = p.act.replace(/\s+/g, " ").replace(/[\n\r]/g, "")
+          const csvTitle = p.act
+            .replace(/\s+/g, " ")
+            .replace(/[\n\r]/g, "")
             .trim();
-          const elementTitle = title.replace(/\s+/g, " ").replace(/[\n\r]/g, "")
+          const elementTitle = title
+            .replace(/\s+/g, " ")
+            .replace(/[\n\r]/g, "")
             .trim();
-          return csvTitle.toLowerCase() === elementTitle.toLowerCase() ||
+          return (
+            csvTitle.toLowerCase() === elementTitle.toLowerCase() ||
             csvTitle.toLowerCase().includes(elementTitle.toLowerCase()) ||
-            elementTitle.toLowerCase().includes(csvTitle.toLowerCase());
+            elementTitle.toLowerCase().includes(csvTitle.toLowerCase())
+          );
         });
 
         // Extract contributor from the paragraph element
@@ -546,9 +566,9 @@ function createPromptCards() {
         <div class="prompt-title">
             ${title}
             <div class="action-buttons">
-            <button class="chat-button" title="Open in AI Chat" onclick="openInChat(this, '${
-          encodeURIComponent(updatedContent(content.trim()))
-        }')">
+            <button class="chat-button" title="Open in AI Chat" onclick="openInChat(this, '${encodeURIComponent(
+              updatePromptPreview(content.trim())
+            )}')">
                 <svg class="chat-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                 <path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"></path>
                 </svg>
@@ -557,9 +577,9 @@ function createPromptCards() {
                 <line x1="12" y1="19" x2="20" y2="19"></line>
                 </svg>
             </button>
-            <button class="copy-button" title="Copy prompt" onclick="copyPrompt(this, '${
-          encodeURIComponent(updatedContent(content.trim()))
-        }')">
+            <button class="copy-button" title="Copy prompt" onclick="copyPrompt(this, '${encodeURIComponent(
+              updatePromptPreview(content.trim())
+            )}')">
                 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                 <path d="M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2"></path>
                 <rect x="8" y="2" width="8" height="4" rx="1" ry="1"></rect>
@@ -567,7 +587,7 @@ function createPromptCards() {
             </button>
             </div>
         </div>
-        <p class="prompt-content">${updatedContent(content)}</p>
+        <p class="prompt-content">${updatePromptPreview(content)}</p>
         <a href="https://github.com/${contributor}" class="contributor-badge" target="_blank" rel="noopener">@${contributor}</a>
         `;
 
@@ -585,7 +605,7 @@ function createPromptCards() {
         copyButton.addEventListener("click", async (e) => {
           e.stopPropagation();
           try {
-            await navigator.clipboard.writeText(updatedContent(content));
+            await navigator.clipboard.writeText(updatePromptPreview(content));
             copyButton.innerHTML = `
             <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                 <polyline points="20 6 9 17 4 12"></polyline>
@@ -695,36 +715,36 @@ function showModal(title, content) {
 
   const modalTitle = modalOverlay.querySelector(".modal-title");
   const modalContent = modalOverlay.querySelector(".modal-content");
-  
+
   // Extract variables from content
   const variables = extractVariables(content);
-  
+
   // Create variable inputs container if variables exist
   if (variables.length > 0) {
-    const variableContainer = document.createElement('div');
-    variableContainer.className = 'variable-container';
-    
+    const variableContainer = document.createElement("div");
+    variableContainer.className = "variable-container";
+
     const form = createVariableInputs(variables, variableContainer);
-    
-  // Initialize the modal content with updated prompt preview if variables exist
+
+    // Initialize the modal content with updated prompt preview if variables exist
     const previewText = updatePromptPreview(content, form);
     modalContent.innerHTML = previewText;
 
     // Add event listeners for real-time updates
-    form.addEventListener('input', () => {
+    form.addEventListener("input", () => {
       const previewText = updatePromptPreview(content, form);
       modalContent.innerHTML = previewText;
-      
+
       // Update chat button data
       const modalChatButton = modalOverlay.querySelector(".modal-chat-button");
       if (modalChatButton) {
         modalChatButton.dataset.content = previewText;
       }
     });
-    
+
     // Insert variable container before content
     modalContent.parentElement.insertBefore(variableContainer, modalContent);
-  }else{
+  } else {
     modalTitle.textContent = title;
     modalContent.textContent = content;
   }
@@ -735,15 +755,13 @@ function showModal(title, content) {
 
   if (!modalTitle || !modalContent) return;
 
-
-
   // Update chat button text with platform name and handle visibility
   const platform = document.querySelector(".platform-tag.active");
   const isDevMode = document.getElementById("devModeToggle").checked;
 
   if (platform) {
     const shouldHideChat = ["gemini", "llama"].includes(
-      platform.dataset.platform,
+      platform.dataset.platform
     );
     modalChatButton.style.display = shouldHideChat ? "none" : "flex";
 
@@ -758,13 +776,13 @@ function showModal(title, content) {
 
       modalChatButton.innerHTML = `
         <svg class="chat-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="display: ${
-        isDevMode ? "none" : "block"
-      }">
+          isDevMode ? "none" : "block"
+        }">
         <path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"></path>
         </svg>
         <svg class="terminal-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="display: ${
-        isDevMode ? "block" : "none"
-      }">
+          isDevMode ? "block" : "none"
+        }">
         <polyline points="4 17 10 11 4 5"></polyline>
         <line x1="12" y1="19" x2="20" y2="19"></line>
         </svg>
@@ -779,15 +797,14 @@ function showModal(title, content) {
   // Find the contributor for this prompt
   const promptCard = Array.from(document.querySelectorAll(".prompt-card")).find(
     (card) =>
-      card.querySelector(".prompt-title").textContent.trim() === title.trim(),
+      card.querySelector(".prompt-title").textContent.trim() === title.trim()
   );
 
   if (promptCard) {
     const contributorBadge = promptCard.querySelector(".contributor-badge");
     if (contributorBadge) {
       modalContributor.href = contributorBadge.href;
-      modalContributor.textContent =
-        `Contributed by ${contributorBadge.textContent}`;
+      modalContributor.textContent = `Contributed by ${contributorBadge.textContent}`;
     }
   }
 
@@ -828,22 +845,22 @@ function hideModal() {
   modalOverlay.remove();
 }
 
-let selectedPlatform = localStorage.getItem("selected-platform") ||
-  "github-copilot"; // Get from localStorage or default to github
+let selectedPlatform =
+  localStorage.getItem("selected-platform") || "github-copilot"; // Get from localStorage or default to github
 
 // Platform toggle functionality
 document.querySelectorAll(".platform-tag").forEach((button) => {
   button.addEventListener("click", () => {
-    document.querySelectorAll(".platform-tag").forEach((btn) =>
-      btn.classList.remove("active")
-    );
+    document
+      .querySelectorAll(".platform-tag")
+      .forEach((btn) => btn.classList.remove("active"));
     button.classList.add("active");
     selectedPlatform = button.dataset.platform;
     localStorage.setItem("selected-platform", selectedPlatform);
-  
+
     // Hide/show chat buttons based on platform
     const chatButtons = document.querySelectorAll(
-      ".chat-button, .modal-chat-button",
+      ".chat-button, .modal-chat-button"
     );
     const shouldHideChat = ["gemini", "llama"].includes(selectedPlatform);
     chatButtons.forEach((btn) => {
@@ -900,20 +917,20 @@ function openInChat(button, encodedPrompt) {
 // Existing copy function
 async function copyPrompt(button, encodedPrompt) {
   let promptText = decodeURIComponent(encodedPrompt);
-  
+
   // If there's a modal open, use the current state of variables
-  const modalContent = document.querySelector('.modal-content');
+  const modalContent = document.querySelector(".modal-content");
   if (modalContent) {
     // Get all variable inputs
-    const form = document.querySelector('.variable-form');
+    const form = document.querySelector(".variable-form");
     if (form) {
-      const inputs = form.querySelectorAll('.variable-input');
-      inputs.forEach(input => {
+      const inputs = form.querySelectorAll(".variable-input");
+      inputs.forEach((input) => {
         const value = input.value.trim();
         const variable = input.dataset.variable;
         const defaultValue = input.dataset.default;
-        const pattern = new RegExp(`\\$\{${variable}[^}]*\}`, 'g');
-        
+        const pattern = new RegExp(`\\$\{${variable}[^}]*\}`, "g");
+
         // Use value or default value
         const replacement = value || defaultValue || variable;
         promptText = promptText.replace(pattern, replacement);
@@ -922,7 +939,7 @@ async function copyPrompt(button, encodedPrompt) {
   }
 
   try {
-    await navigator.clipboard.writeText(updatedContent(promptText));
+    await navigator.clipboard.writeText(updatePromptPreview(promptText));
     const originalHTML = button.innerHTML;
     button.innerHTML = `
       <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
@@ -973,7 +990,7 @@ function hideCopilotSuggestion(switchToCopilot) {
 
   if (switchToCopilot) {
     const copilotButton = document.querySelector(
-      '[data-platform="github-copilot"]',
+      '[data-platform="github-copilot"]'
     );
     if (copilotButton) {
       copilotButton.click();
@@ -991,14 +1008,14 @@ function hideCopilotSuggestion(switchToCopilot) {
 
 // Function to update chat button icons based on dev mode
 function updateChatButtonIcons(isDevMode) {
-  document.querySelectorAll(".chat-button, .modal-chat-button").forEach(
-    (button) => {
+  document
+    .querySelectorAll(".chat-button, .modal-chat-button")
+    .forEach((button) => {
       const chatIcon = button.querySelector(".chat-icon");
       const terminalIcon = button.querySelector(".terminal-icon");
       if (chatIcon && terminalIcon) {
         chatIcon.style.display = isDevMode ? "none" : "block";
         terminalIcon.style.display = isDevMode ? "block" : "none";
       }
-    },
-  );
+    });
 }