diff --git a/src/code/index.html b/src/code/index.html
index 2336d70..0f4e57e 100644
--- a/src/code/index.html
+++ b/src/code/index.html
@@ -56,15 +56,15 @@ <h3>Commands</h3>
                     <tbody>
                         <tr>
                             <td><span class="cmd">\twitter</span></td>
-                            <td>Twitter</td>
+                            <td class="cmd-name">Twitter</td>
                         </tr>
                         <tr>
                             <td><span class="cmd">\github</span></td>
-                            <td>Github</td>
+                            <td class="cmd-name">Github</td>
                         </tr>
                         <tr>
                             <td><span class="cmd">\linkedin</span></td>
-                            <td>LinkedIn</td>
+                            <td class="cmd-name">LinkedIn</td>
                         </tr>
                 </table>
             </div>
diff --git a/src/code/index.js b/src/code/index.js
index eec9bc0..f2dcbcc 100644
--- a/src/code/index.js
+++ b/src/code/index.js
@@ -1,4 +1,4 @@
-'use strict';
+"use strict";
 console.log("Social Repo opened!");
 
 const infoBtn = document.getElementById("info-btn");
@@ -10,268 +10,278 @@ const edit = document.getElementById("edit");
 // ============== Header ==============
 
 infoBtn.addEventListener("click", () => {
-    console.log("Info button clicked!");
-    if (info.classList.contains("hidden")) {
-        info.classList.remove("hidden");
-        home.classList.add("hidden");
-        edit.classList.add("hidden");
-    } else {
-        info.classList.add("hidden");
-        home.classList.remove("hidden");
-        edit.classList.add("hidden");
-    }
+  console.log("Info button clicked!");
+  if (info.classList.contains("hidden")) {
+    info.classList.remove("hidden");
+    home.classList.add("hidden");
+    edit.classList.add("hidden");
+  } else {
+    info.classList.add("hidden");
+    home.classList.remove("hidden");
+    edit.classList.add("hidden");
+  }
 });
 
 editBtn.addEventListener("click", () => {
-    console.log("Edit button clicked!");
-    if (edit.classList.contains("hidden")) {
-        edit.classList.remove("hidden");
-        home.classList.add("hidden");
-        info.classList.add("hidden");
-    } else {
-        edit.classList.add("hidden");
-        home.classList.remove("hidden");
-        info.classList.add("hidden");
-    }
+  console.log("Edit button clicked!");
+  if (edit.classList.contains("hidden")) {
+    edit.classList.remove("hidden");
+    home.classList.add("hidden");
+    info.classList.add("hidden");
+  } else {
+    edit.classList.add("hidden");
+    home.classList.remove("hidden");
+    info.classList.add("hidden");
+  }
 });
 
 const showBtn = document.getElementById("table-btn");
 const table = document.getElementsByTagName("table")[0];
 
 showBtn.addEventListener("click", () => {
-    if (table.classList.contains("hidden")) {
-        showBtn.innerHTML = "Hide";
-        table.classList.remove("hidden");
-    } else {
-        showBtn.innerHTML = "Show";
-        table.classList.add("hidden");
-    }
+  if (table.classList.contains("hidden")) {
+    showBtn.innerHTML = "Hide";
+    table.classList.remove("hidden");
+  } else {
+    showBtn.innerHTML = "Show";
+    table.classList.add("hidden");
+  }
 });
 
 // ============== Utility Functions ==============
 
 function getSocialLinks() {
-    const socialLinks = {};
-    fetch("../social-links.json")
-        .then(response => {
-            if (!response.ok) {
-                throw new Error("Failed to fetch social links");
-            }
-            return response.json();
-        })
-        .then(jsonData => {
-            Object.keys(jsonData).slice(1).forEach(key => {
-                socialLinks[key] = jsonData[key];
-                createSocialLink(key, jsonData[key]);
-            });
-            return socialLinks;
-        })
-        .catch(error => {
-            console.error("Error reading social links file:", error);
-            return {};
+  const socialLinks = {};
+  fetch("../social-links.json")
+    .then((response) => {
+      if (!response.ok) {
+        throw new Error("Failed to fetch social links");
+      }
+      return response.json();
+    })
+    .then((jsonData) => {
+      Object.keys(jsonData)
+        .slice(1)
+        .forEach((key) => {
+          socialLinks[key] = jsonData[key];
+          createSocialLink(key, jsonData[key]);
         });
-    return socialLinks;
-};
+      return socialLinks;
+    })
+    .catch((error) => {
+      console.error("Error reading social links file:", error);
+      return {};
+    });
+  return socialLinks;
+}
 const socialLinks = getSocialLinks();
 
-
 // ============== Home ==============
 function showCopyMessage(key) {
-    console.log(`Copied ${key} to clipboard!`);
-};
+  console.log(`Copied ${key} to clipboard!`);
+}
 
 function createImage(key) {
-    const img = document.createElement("img");
-    img.classList.add("social-logo");
-    img.alt = key;
-    img.src = `../assets/logos/${key}.png`;
-    return img;
+  const img = document.createElement("img");
+  img.classList.add("social-logo");
+  img.alt = key;
+  img.src = `../assets/logos/${key}.png`;
+  return img;
 }
 
 const socialLinksContainer = document.getElementById("socialLinks");
 function createSocialLink(key, value) {
-    const li = document.createElement("li");
-    const img = createImage(key);
-    img.onload = () => {
-        li.appendChild(img);
-        li.addEventListener("click", () => {
-            navigator.clipboard.writeText(value); // Copy the value to clipboard
-            showCopyMessage(key);
-        });
-        socialLinksContainer.appendChild(li);
-    };
-    img.onerror = () => {
-        li.remove();
-    };
+  const li = document.createElement("li");
+  const img = createImage(key);
+  img.onload = () => {
+    li.appendChild(img);
+    li.addEventListener("click", () => {
+      navigator.clipboard.writeText(value); // Copy the value to clipboard
+      showCopyMessage(key);
+    });
     socialLinksContainer.appendChild(li);
+  };
+  img.onerror = () => {
+    li.remove();
+  };
+  socialLinksContainer.appendChild(li);
 }
 
 // ============== Random Placeholder Generation ==============
 const placeholderTexts = [
-    "Paste your Social Handle here",
-    "https://social.media/your_username",
-    "Ctrl + V your social media profile",
-    "Enter your profile link here",
-    "Share your social media URL",
-    "Drop your handle here",
-    "Provide your social media profile",
-    "Link to your social media",
-    "Type your username",
-    "Insert your social link",
-    "Enter your profile address",
-    "Submit your social profile URL",
-    "Add your social media handle",
-    "Copy and paste your profile URL",
-    "Insert your social media handle",
-    "Link your profile here",
-    "Add your social media link",
-    "Enter your social profile",
-    "Paste your profile URL here",
-    "Share your handle",
-    "Input your social media URL",
-    "Type in your profile link",
-    "Provide your social profile address",
-    "Paste your link here",
-    "Enter the URL to your profile",
-    "Drop your profile address",
-    "Share your social handle link",
-    "Input your handle",
-    "Add your social URL",
+  "Paste your Social Handle here",
+  "https://social.media/your_username",
+  "Ctrl + V your social media profile",
+  "Enter your profile link here",
+  "Share your social media URL",
+  "Drop your handle here",
+  "Provide your social media profile",
+  "Link to your social media",
+  "Type your username",
+  "Insert your social link",
+  "Enter your profile address",
+  "Submit your social profile URL",
+  "Add your social media handle",
+  "Copy and paste your profile URL",
+  "Insert your social media handle",
+  "Link your profile here",
+  "Add your social media link",
+  "Enter your social profile",
+  "Paste your profile URL here",
+  "Share your handle",
+  "Input your social media URL",
+  "Type in your profile link",
+  "Provide your social profile address",
+  "Paste your link here",
+  "Enter the URL to your profile",
+  "Drop your profile address",
+  "Share your social handle link",
+  "Input your handle",
+  "Add your social URL",
 ];
 
 // Function to generate a random placeholder text
 function getRandomPlaceholderText(placeholderTexts) {
-    const randomIndex = Math.floor(Math.random() * placeholderTexts.length);
-    return placeholderTexts[randomIndex];
+  const randomIndex = Math.floor(Math.random() * placeholderTexts.length);
+  return placeholderTexts[randomIndex];
 }
 
-
 // ============== Search ==============
-const searchInput = document.querySelector('.search-input');
-const linksContainer = document.getElementById('links-container');
-const originalLinkBoxes = Array.from(document.querySelectorAll('.link-box'));
+const searchInput = document.querySelector(".search-input");
+const linksContainer = document.getElementById("links-container");
+const originalLinkBoxes = Array.from(document.querySelectorAll(".link-box"));
 
 function searchLinks() {
-    const searchText = searchInput.value.toLowerCase();
-
-    console.log('searchLinks function called');
-    console.log('Search text:', searchText);
-
-    // Clear the links container
-    linksContainer.innerHTML = '';
-
-    // Filter and append the appropriate link boxes
-    originalLinkBoxes.forEach(linkBox => {
-        const linkText = linkBox.querySelector('input').value.toLowerCase();
-        const iconAlt = linkBox.querySelector('.icon').alt.toLowerCase();
-
-        console.log('Link text:', linkText);
-        console.log('Icon alt:', iconAlt);
-
-        if (searchText === '' || linkText.includes(searchText) || iconAlt.includes(searchText)) {
-            console.log('Appending link box to container');
-            // Append a cloned link box to avoid removing it from the original array
-            linksContainer.appendChild(linkBox.cloneNode(true));
-        } else {
-            console.log('No match found, skipping link box');
-        }
-    });
+  const searchText = searchInput.value.toLowerCase();
+
+  console.log("searchLinks function called");
+  console.log("Search text:", searchText);
+
+  // Clear the links container
+  linksContainer.innerHTML = "";
+
+  // Filter and append the appropriate link boxes
+  originalLinkBoxes.forEach((linkBox) => {
+    const linkText = linkBox.querySelector("input").value.toLowerCase();
+    const iconAlt = linkBox.querySelector(".icon").alt.toLowerCase();
+
+    console.log("Link text:", linkText);
+    console.log("Icon alt:", iconAlt);
+
+    if (
+      searchText === "" ||
+      linkText.includes(searchText) ||
+      iconAlt.includes(searchText)
+    ) {
+      console.log("Appending link box to container");
+      // Append a cloned link box to avoid removing it from the original array
+      linksContainer.appendChild(linkBox.cloneNode(true));
+    } else {
+      console.log("No match found, skipping link box");
+    }
+  });
 }
 
-searchInput.addEventListener('input', searchLinks);
-console.log('Event listener attached to search input');
-
+searchInput.addEventListener("input", searchLinks);
+console.log("Event listener attached to search input");
 
 // ============== Link Validation ==============
 function updateLinkPreview(input) {
-    const button = input.parentNode.querySelector("button");
-    const value = input.value;
-    button.disabled = false;
-    button.dataset.inputValue = value;
-
-    // Add the event listener only once
-    if (!button.dataset.listenerAdded) {
-        button.addEventListener("click", openLink);
-        button.dataset.listenerAdded = true;  // Mark the listener as added
-    }
-
-    function openLink() {
-        // Use the latest input value stored in the data attribute
-        const value = button.dataset.inputValue;
-        window.open(value, "_blank");
-    }
-};
+  const button = input.parentNode.querySelector("button");
+  const value = input.value;
+  button.disabled = false;
+  button.dataset.inputValue = value;
+
+  // Add the event listener only once
+  if (!button.dataset.listenerAdded) {
+    button.addEventListener("click", openLink);
+    button.dataset.listenerAdded = true; // Mark the listener as added
+  }
+
+  function openLink() {
+    // Use the latest input value stored in the data attribute
+    const value = button.dataset.inputValue;
+    window.open(value, "_blank");
+  }
+}
 
 function isValidURL(url) {
-    const urlPattern = /^(http:\/\/|https:\/\/)[\w.-]+(?:\.[\w.-]+)+[\w\-\._~:/?#[\]@!$&'()*+,;=]+$/;
-    const mailtoPattern = /^(mailto:)?[^\s@]+@[^\s@]+\.[^\s@]+$/;
+  const urlPattern =
+    /^(http:\/\/|https:\/\/)[\w.-]+(?:\.[\w.-]+)+[\w\-\._~:/?#[\]@!$&'()*+,;=]+$/;
+  const mailtoPattern = /^(mailto:)?[^\s@]+@[^\s@]+\.[^\s@]+$/;
 
-    const isUrl = urlPattern.test(url);
-    const isMailto = mailtoPattern.test(url);
+  const isUrl = urlPattern.test(url);
+  const isMailto = mailtoPattern.test(url);
 
-    return isUrl || isMailto;
+  return isUrl || isMailto;
 }
 
 function validateInput(input) {
-    const previewButton = input.parentNode.querySelector("button");
-    if (isValidURL(input.value)) {
-        input.style.borderBottomColor = "green";
-        updateLinkPreview(input);
-    } else {
-        input.style.borderBottomColor = "red";
-        previewButton.disabled = true;
-    }
+  const previewButton = input.parentNode.querySelector("button");
+  if (isValidURL(input.value)) {
+    input.style.borderBottomColor = "green";
+    updateLinkPreview(input);
+  } else {
+    input.style.borderBottomColor = "red";
+    previewButton.disabled = true;
+  }
 }
 
 function removeIfEmpty(input) {
-    const linkBox = input.parentNode.parentNode;
-    const linkContainer = document.getElementById("links-container");
-    if (input.value === "" && linkContainer.contains(linkBox) && document.getElementById(linkBox.id) !== null) {
-        try {
-            linkBox.remove();
-        } catch (error) {
-        }
+  const linkBox = input.parentNode.parentNode;
+  const linkContainer = document.getElementById("links-container");
+  if (
+    input.value === "" &&
+    linkContainer.contains(linkBox) &&
+    document.getElementById(linkBox.id) !== null
+  ) {
+    try {
+      linkBox.remove();
+    } catch (error) {
+      console.log(error, "error");
     }
+  }
 }
 
 function getSocialName(url) {
-    for (const key in socialLinks) {
-        const value = socialLinks[key].replace("<username>", "");
-        const valueUrl = new URL(value)
-        const host = valueUrl.hostname.replace("www.", "");
-        if (url.includes(host)) {
-            return { key, value };
-        }
+  for (const key in socialLinks) {
+    const value = socialLinks[key].replace("<username>", "");
+    const valueUrl = new URL(value);
+    const host = valueUrl.hostname.replace("www.", "");
+    if (url.includes(host)) {
+      return { key, value };
     }
-    return null;
+  }
+  return null;
 }
 
 function setIcon(key, parentElement) {
-    const iconElement = parentElement.querySelector('.icon');
-    const logoPath = `../assets/logos/${key}.png`;
-    // png file must have the same name as the key.
-    const defaultLogoPath = '../assets/logos/default.png';
-
-    fetch(logoPath)
-        .then(response => {
-            if (!response.ok) {
-                throw new Error(`Logo not found:`);
-            }
-            iconElement.src = logoPath;
-        })
-        .catch(() => {
-            iconElement.src = defaultLogoPath;
-        });
+  const iconElement = parentElement.querySelector(".icon");
+  const logoPath = `../assets/logos/${key}.png`;
+  // png file must have the same name as the key.
+  const defaultLogoPath = "../assets/logos/default.png";
+
+  fetch(logoPath)
+    .then((response) => {
+      if (!response.ok) {
+        throw new Error(`Logo not found:`);
+      }
+      iconElement.src = logoPath;
+    })
+    .catch(() => {
+      iconElement.src = defaultLogoPath;
+    });
 }
 
 function UpdateLinkBox(button) {
-    const parentElement = button.parentNode;
-    const inputElement = parentElement.querySelector("input");
-    const inputValue = inputElement.value;
-    console.log("Placeholder value:", inputElement.placeholder);
-    console.log("Input value:", inputValue);
-
-    /*
+  const parentElement = button.parentNode;
+  const inputElement = parentElement.querySelector("input");
+  console.log(inputElement, "inputElement");
+  const inputValue = inputElement.value;
+  console.log("Placeholder value:", inputElement.placeholder);
+  console.log("Input value:", inputValue);
+
+  /*
     Fixes:
     - check if the input value is MAIL
     - If not MAIL
@@ -279,229 +289,252 @@ function UpdateLinkBox(button) {
     - validate complete profile URL using value of destructured object
     */
 
-    console.log(getSocialName(inputValue));
-    if (isValidURL(inputValue)) {
-        console.log("Valid URL!");
-        const socialName = getSocialName(inputValue);
-        if (!socialName) {
-            button.disabled = true;
-            setIcon(null, parentElement);
-            return;
-        }
-        const { key, value } = socialName;
-        console.log("Key found!:", key);
-        setIcon(key, parentElement);
-        button.disabled = false;
-        //! It should done when the link is completed
-        inputElement.style.borderBottomColor = "transparent";
-
-    } else {
-        console.log("No key found!");
-        setIcon(null, parentElement);
-        button.disabled = true;
-    };
+  console.log(getSocialName(inputValue));
+  if (isValidURL(inputValue)) {
+    console.log("Valid URL!");
+    const socialName = getSocialName(inputValue);
+    if (!socialName) {
+      button.disabled = true;
+      setIcon(null, parentElement);
+      return;
+    }
+    const { key, value } = socialName;
+    console.log("Key found!:", key);
+    setIcon(key, parentElement);
+    button.disabled = false;
+    //! It should done when the link is completed
+    inputElement.style.borderBottomColor = "transparent";
+  } else {
+    console.log("No key found!");
+    setIcon(null, parentElement);
+    button.disabled = true;
+  }
 }
 
 function updateAllLinkBox() {
-    document.querySelectorAll("#edit #links-container input[type='text']").forEach(input => {
-        input.addEventListener("input", () => {
-            validateInput(input);
-            const button = input.parentNode.querySelector("button");
-            console.log("Input changed!");
-            UpdateLinkBox(button);
-            removeIfEmpty(input);
-            console.log("Changed", input.placeholder);
-        });
+  document
+    .querySelectorAll("#edit #links-container input[type='text']")
+    .forEach((input) => {
+      input.addEventListener("input", () => {
+        validateInput(input);
+        const button = input.parentNode.querySelector("button");
+        console.log("Input changed!");
+        UpdateLinkBox(button);
+        removeIfEmpty(input);
+        console.log("Changed", input.placeholder);
+      });
     });
 }
 
 // ============== Focus Handlers  ==============
 function checkFocusOut(event, linkBox) {
-    let otherLinkBox = event.relatedTarget;
-    switch (otherLinkBox) {
-        case null:
-            otherLinkBox = "";
-            break;
-        case otherLinkBox.classList.contains("link-box"):
-            break;
-        case otherLinkBox.classList.contains("dragger"):
-            otherLinkBox = otherLinkBox.parentNode;
-            break;
-        case otherLinkBox.classList.contains("link"):
-            otherLinkBox = otherLinkBox.parentNode;
-            break;
-        case otherLinkBox.classList.contains("icon"):
-            otherLinkBox = otherLinkBox.parentNode.parentNode;
-            break;
-        case otherLinkBox.classList.contains("input"):
-            otherLinkBox = otherLinkBox.parentNode.parentNode;
-            break;
-        case otherLinkBox.classList.contains("preview"):
-            otherLinkBox = otherLinkBox.parentNode.parentNode;
-            break;
-        case otherLinkBox.classList.contains("share"):
-            otherLinkBox = otherLinkBox.parentNode.parentNode.parentNode;
-            break;
-        default:
-            otherLinkBox = "";
-            break;
-    };
-    return otherLinkBox.id !== linkBox.id;
-};
+  let otherLinkBox = event.relatedTarget;
+  switch (otherLinkBox) {
+    case null:
+      otherLinkBox = "";
+      break;
+    case otherLinkBox.classList.contains("link-box"):
+      break;
+    case otherLinkBox.classList.contains("dragger"):
+      otherLinkBox = otherLinkBox.parentNode;
+      break;
+    case otherLinkBox.classList.contains("link"):
+      otherLinkBox = otherLinkBox.parentNode;
+      break;
+    case otherLinkBox.classList.contains("icon"):
+      otherLinkBox = otherLinkBox.parentNode.parentNode;
+      break;
+    case otherLinkBox.classList.contains("input"):
+      otherLinkBox = otherLinkBox.parentNode.parentNode;
+      break;
+    case otherLinkBox.classList.contains("preview"):
+      otherLinkBox = otherLinkBox.parentNode.parentNode;
+      break;
+    case otherLinkBox.classList.contains("share"):
+      otherLinkBox = otherLinkBox.parentNode.parentNode.parentNode;
+      break;
+    default:
+      otherLinkBox = "";
+      break;
+  }
+  return otherLinkBox.id !== linkBox.id;
+}
 
 // ============== Add Link Box  ==============
 const addLinkBtn = document.querySelector(".add-link-btn");
 let idx = 0;
 function addLinkBox() {
-    const parentLinkBox = document.getElementById("links-container");
-    let randomPlaceholder = getRandomPlaceholderText(placeholderTexts);
-
-    const childBoxFormat = document.createElement('li');
-    childBoxFormat.classList.add('link-box', 'column');
-    childBoxFormat.setAttribute("draggable", true);
-    childBoxFormat.id = `link-box-${idx}`;
-
-    const draggerImg = document.createElement('img');
-    draggerImg.src = '../assets/logos/drag.png';
-    draggerImg.alt = 'dragger';
-    draggerImg.classList.add('dragger');
-    draggerImg.tabIndex = 1;
-    childBoxFormat.appendChild(draggerImg);
-
-    const linkDiv = document.createElement('div');
-    linkDiv.classList.add('link');
-    linkDiv.tabIndex = 2;
-    
-    const iconImg = document.createElement('img');
-    iconImg.src = '../assets/logos/default.png';
-    iconImg.alt = 'linkedin';
-    iconImg.classList.add('icon');
-    iconImg.tabIndex = 3;
-    linkDiv.appendChild(iconImg);
-    
-    const inputField = document.createElement('input');
-    inputField.type = 'text';
-    inputField.placeholder = randomPlaceholder;
-    inputField.classList.add('input');
-    inputField.tabIndex = 4;
-    linkDiv.appendChild(inputField);
-    
-    const previewBtn = document.createElement('button');
-    previewBtn.classList.add('preview');
-    previewBtn.disabled = true;
-    previewBtn.tabIndex = 5;
-    linkDiv.appendChild(previewBtn);
-    
-    const shareImg = document.createElement('img');
-    shareImg.src = '../assets/logos/share.png';
-    shareImg.alt = 'preview link';
-    shareImg.classList.add('share');
-    shareImg.tabIndex = 6;
-
-    previewBtn.appendChild(shareImg);
-    childBoxFormat.appendChild(linkDiv);
-    parentLinkBox.insertBefore(childBoxFormat, parentLinkBox.firstChild);  
-    idx += 1;
-
-    const linkBox = inputField.parentNode.parentNode;
-
-    linkBox.addEventListener('focusin', () => {
-        linkDiv.style.backgroundColor = "#eeeeee";
-    });
-    linkBox.addEventListener('focusout', () => {
-        linkDiv.style.backgroundColor = "#d0beff";
-    })
-
-    inputField.focus();
-    inputField.addEventListener('focusout', (event) => {
-        if (checkFocusOut(event, linkBox)) {
-            console.log("Focus Out");
-            removeIfEmpty(inputField);
-        }
-    });
+  const parentLinkBox = document.getElementById("links-container");
+  let randomPlaceholder = getRandomPlaceholderText(placeholderTexts);
+
+  const childBoxFormat = document.createElement("li");
+  childBoxFormat.classList.add("link-box", "column");
+  childBoxFormat.setAttribute("draggable", true);
+  childBoxFormat.id = `link-box-${idx}`;
+
+  const draggerImg = document.createElement("img");
+  draggerImg.src = "../assets/logos/drag.png";
+  draggerImg.alt = "dragger";
+  draggerImg.classList.add("dragger");
+  draggerImg.tabIndex = 1;
+  childBoxFormat.appendChild(draggerImg);
+
+  const linkDiv = document.createElement("div");
+  linkDiv.classList.add("link");
+  linkDiv.tabIndex = 2;
+
+  const iconImg = document.createElement("img");
+  iconImg.src = "../assets/logos/default.png";
+  iconImg.alt = "linkedin";
+  iconImg.classList.add("icon");
+  iconImg.tabIndex = 3;
+  linkDiv.appendChild(iconImg);
+
+  const inputField = document.createElement("input");
+  inputField.type = "text";
+  inputField.placeholder = randomPlaceholder;
+  inputField.classList.add("input");
+  inputField.tabIndex = 4;
+  linkDiv.appendChild(inputField);
+
+  const previewBtn = document.createElement("button");
+  previewBtn.classList.add("preview");
+  previewBtn.disabled = true;
+  previewBtn.tabIndex = 5;
+  linkDiv.appendChild(previewBtn);
+
+  const shareImg = document.createElement("img");
+  shareImg.src = "../assets/logos/share.png";
+  shareImg.alt = "preview link";
+  shareImg.classList.add("share");
+  shareImg.tabIndex = 6;
+
+  previewBtn.appendChild(shareImg);
+  childBoxFormat.appendChild(linkDiv);
+  parentLinkBox.insertBefore(childBoxFormat, parentLinkBox.firstChild);
+  idx += 1;
+
+  const linkBox = inputField.parentNode.parentNode;
+
+  linkBox.addEventListener("focusin", () => {
+    linkDiv.style.backgroundColor = "#eeeeee";
+  });
+  linkBox.addEventListener("focusout", () => {
+    linkDiv.style.backgroundColor = "#d0beff";
+  });
+
+  inputField.focus();
+  inputField.addEventListener("focusout", (event) => {
+    if (checkFocusOut(event, linkBox)) {
+      console.log("Focus Out");
+      removeIfEmpty(inputField);
+    }
+  });
 
-    addDnDHandlers(linkBox);
-    updateAllLinkBox();
-};
+  addDnDHandlers(linkBox);
+  updateAllLinkBox();
+}
 
-addLinkBtn.addEventListener('click', () => {
-    addLinkBox();
+addLinkBtn.addEventListener("click", () => {
+  addLinkBox();
 });
 
 // ============== Drag & Drop ==============
 var dragSrcEl = null;
 
 function handleDragStart(e) {
-    dragSrcEl = this;
-    e.dataTransfer.effectAllowed = 'move';
-    e.dataTransfer.setData('text/html', this.outerHTML);
-    this.classList.add('dragElem');
+  dragSrcEl = this;
+  e.dataTransfer.effectAllowed = "move";
+  e.dataTransfer.setData("text/html", this.outerHTML);
+  this.classList.add("dragElem");
 }
 function handleDragOver(e) {
-    e.preventDefault();
-    e.dataTransfer.dropEffect = 'move';
-    var top = this.getBoundingClientRect().top;
-    var bottom = this.getBoundingClientRect().bottom;
-    if (e.clientY < (top + bottom) / 2) {
-        this.classList.add('over-before');
-        this.classList.remove('over-after');
-    }
-    else {
-        this.classList.add('over-after');
-        this.classList.remove('over-before');
-    }
+  e.preventDefault();
+  e.dataTransfer.dropEffect = "move";
+  var top = this.getBoundingClientRect().top;
+  var bottom = this.getBoundingClientRect().bottom;
+  if (e.clientY < (top + bottom) / 2) {
+    this.classList.add("over-before");
+    this.classList.remove("over-after");
+  } else {
+    this.classList.add("over-after");
+    this.classList.remove("over-before");
+  }
 }
 
-function handleDragEnter(e) {
-
-}
+function handleDragEnter(e) {}
 
 function handleDragLeave(e) {
-    this.classList.remove('dragElem');
-    this.classList.remove('over-before');
-    this.classList.remove('over-after');
+  this.classList.remove("dragElem");
+  this.classList.remove("over-before");
+  this.classList.remove("over-after");
 }
 
 function handleDrop(e) {
-    e.stopPropagation();
-    if (dragSrcEl != this) {
-        this.parentNode.removeChild(dragSrcEl);
-
-        if (this.classList.contains('over-before')) {
-            this.parentNode.insertBefore(dragSrcEl, this);
-            addDnDHandlers(this.previousElementSibling);
-        }
-        else if (this.classList.contains('over-after')) {
-            this.parentNode.insertBefore(dragSrcEl, this.nextSibling);
-            addDnDHandlers(this.nextElementSibling);
-        }
-    } else {
-        console.log("THISSSS", this);
-        this.classList.remove('over');
+  e.stopPropagation();
+  if (dragSrcEl != this) {
+    this.parentNode.removeChild(dragSrcEl);
+
+    if (this.classList.contains("over-before")) {
+      this.parentNode.insertBefore(dragSrcEl, this);
+      addDnDHandlers(this.previousElementSibling);
+    } else if (this.classList.contains("over-after")) {
+      this.parentNode.insertBefore(dragSrcEl, this.nextSibling);
+      addDnDHandlers(this.nextElementSibling);
     }
-    dragSrcEl.classList.remove('dragElem');
-    this.classList.remove('over');
-    this.classList.remove('over-before');
-    this.classList.remove('over-after');
+  } else {
+    console.log("THISSSS", this);
+    this.classList.remove("over");
+  }
+  dragSrcEl.classList.remove("dragElem");
+  this.classList.remove("over");
+  this.classList.remove("over-before");
+  this.classList.remove("over-after");
 }
 
 function handleDragEnd(e) {
-    this.classList.remove('over-before');
-    this.classList.remove('over-after');
+  this.classList.remove("over-before");
+  this.classList.remove("over-after");
 }
 
 function addDnDHandlers(elem) {
-    elem.addEventListener('dragstart', handleDragStart, false);
-    elem.addEventListener('dragenter', handleDragEnter, false)
-    elem.addEventListener('dragover', handleDragOver, false);
-    elem.addEventListener('dragleave', handleDragLeave, false);
-    elem.addEventListener('drop', handleDrop, false);
-    elem.addEventListener('dragend', handleDragEnd, false);
+  elem.addEventListener("dragstart", handleDragStart, false);
+  elem.addEventListener("dragenter", handleDragEnter, false);
+  elem.addEventListener("dragover", handleDragOver, false);
+  elem.addEventListener("dragleave", handleDragLeave, false);
+  elem.addEventListener("drop", handleDrop, false);
+  elem.addEventListener("dragend", handleDragEnd, false);
 }
 
-
 // ============== Saving Links  ==============
 const saveBtn = document.getElementById("save-btn");
+const tableBody = document.querySelector(".hidden tbody");
+
+function createCommand(input) {
+  const { key } = getSocialName(input.value);
+  const tr = document.createElement("tr");
+  const td = document.createElement("td");
+  const span = document.createElement("span");
+  span.classList.add("cmd");
+  const secondTd = document.createElement("td");
+  secondTd.classList.add("cmd-name");
+  secondTd.innerText = key;
+  span.innerText = `\\${key}`;
+  td.appendChild(span);
+  tr.appendChild(td);
+  tr.appendChild(secondTd);
+  tableBody.appendChild(tr);
+}
+
 saveBtn.addEventListener("click", () => {
-    const links = Array.from(document.querySelectorAll(".link-box input"));
-});
\ No newline at end of file
+  const links = Array.from(document.querySelectorAll(".link-box input"));
+
+  //creating commands on click of save
+  const input = document.querySelector(
+    "#edit #links-container input[type='text']"
+  );
+
+  if (isValidURL(input.value)) {
+    createCommand(input);
+  }
+});
diff --git a/src/code/style.css b/src/code/style.css
index 1fd6433..9c4e6de 100644
--- a/src/code/style.css
+++ b/src/code/style.css
@@ -1,544 +1,547 @@
 @import url('https://fonts.googleapis.com/css2?family=Fira+Code:wght@300..700&family=M+PLUS+1+Code:wght@100..700&family=Raleway:ital,wght@0,100..900;1,100..900&display=swap');
 
 * {
-    margin: 0;
-    padding: 0;
-    box-sizing: border-box;
-    /* font-family: "Source Sans 3", sans-serif; */
-    font-family: "Raleway", sans-serif;
-    transition: all 300ms ease;
-    list-style-type: none;
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+  /* font-family: "Source Sans 3", sans-serif; */
+  font-family: 'Raleway', sans-serif;
+  transition: all 300ms ease;
+  list-style-type: none;
 }
 
 :root {
-    --primary-color: #7029ff;
-    --secondary-color: #b58fff;
-    --accent-color: #d0beff;
-    --text-color: #eeeeee;
-    --text-color-2: #242327;
+  --primary-color: #7029ff;
+  --secondary-color: #b58fff;
+  --accent-color: #d0beff;
+  --text-color: #eeeeee;
+  --text-color-2: #242327;
 }
 
 body {
-    width: 500px;
-    height: 450px;
-    font-family: Arial, Helvetica, sans-serif;
-    text-align: center;
-    scroll-behavior: smooth;
+  width: 500px;
+  height: 450px;
+  font-family: Arial, Helvetica, sans-serif;
+  text-align: center;
+  scroll-behavior: smooth;
 }
 
 a {
-    all: unset;
-    cursor: pointer;
+  all: unset;
+  cursor: pointer;
 }
 
 /* ============== Header ============== */
 
 header {
-    background-color: var(--primary-color);
-    color: var(--text-color);
-    padding: 0.8rem 2rem;
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
+  background-color: var(--primary-color);
+  color: var(--text-color);
+  padding: 0.8rem 2rem;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
 }
 
 #name a {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    gap: 0.5rem;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  gap: 0.5rem;
 }
 
 #name img {
-    width: 20px;
-    height: 20px;
+  width: 20px;
+  height: 20px;
 }
 
 #name h1 {
-    font-size: 1.5rem;
+  font-size: 1.5rem;
 }
 
 nav ul {
-    display: flex;
-    justify-content: space-around;
-    align-items: center;
-    gap: 1.5rem;
+  display: flex;
+  justify-content: space-around;
+  align-items: center;
+  gap: 1.5rem;
 }
 
 nav ul li {
-    list-style: none;
+  list-style: none;
 }
 
 nav li button {
-    width: 25px;
-    height: 25px;
-    border: none;
-    background-color: transparent;
+  width: 25px;
+  height: 25px;
+  border: none;
+  background-color: transparent;
 }
 
 nav li button:active {
-    transform: scale(0.9);
-    transition-duration: 100ms;
+  transform: scale(0.9);
+  transition-duration: 100ms;
 }
 
 #info-btn {
-    background-image: url("../assets/logos/info.png");
-    background-size: cover;
-    cursor: pointer;
+  background-image: url('../assets/logos/info.png');
+  background-size: cover;
+  cursor: pointer;
 }
 
 #info-btn:hover {
-    background-image: url("../assets/logos/info-hover.png");
+  background-image: url('../assets/logos/info-hover.png');
 }
 
 #edit-btn {
-    background-image: url("../assets/logos/edit.png");
-    background-size: cover;
-    cursor: pointer;
+  background-image: url('../assets/logos/edit.png');
+  background-size: cover;
+  cursor: pointer;
 }
 
 #edit-btn:hover {
-    background-image: url("../assets/logos/edit-hover.png");
+  background-image: url('../assets/logos/edit-hover.png');
 }
 
 /* ============== main ============== */
 main {
-    width: 100%;
-    height: 400px;
-    background-color: var(--secondary-color);
-    overflow-x: hidden;
+  width: 100%;
+  height: 400px;
+  background-color: var(--secondary-color);
+  overflow-x: hidden;
 }
 
 section {
-    width: 100%;
-    height: 100%;
-    display: flex;
-    flex-direction: column;
-    text-align: left;
-    gap: 1rem;
-    position: relative;
-    overflow-y: auto;
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  text-align: left;
+  gap: 1rem;
+  position: relative;
+  overflow-y: auto;
 }
 
 section::-webkit-scrollbar {
-    width: 0.6rem;
-    background-color: transparent;
+  width: 0.6rem;
+  background-color: transparent;
 }
 
 section::-webkit-scrollbar-thumb {
-    background: var(--primary-color);
-    height: 30px;
+  background: var(--primary-color);
+  height: 30px;
 }
 
 h2 {
-    font-size: 1.5rem;
+  font-size: 1.5rem;
 }
 
 p {
-    font-weight: 500;
+  font-weight: 500;
 }
 
 .hidden {
-    display: none;
-    padding: 0px;
-    margin: 0px;
+  display: none;
+  padding: 0px;
+  margin: 0px;
 }
 
-
 /* ============== Home Panel ============== */
 
-
 #socialLinks {
-    width: 100%;
-    height: fit-content;
-    padding: 2rem;
-    background-color: var(--secondary-color);
-    display: grid;
-    grid-template-columns: repeat(4, 1fr);
-    justify-items: center;
-    gap: 2rem 1rem;
+  width: 100%;
+  height: fit-content;
+  padding: 2rem;
+  background-color: var(--secondary-color);
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+  justify-items: center;
+  gap: 2rem 1rem;
 }
 
 #socialLinks li {
-    width: 65px;
-    height: 65px;
-    background-color: var(--accent-color);
-    border: 2px solid var(--primary-color);
-    border-radius: 7px;
+  width: 65px;
+  height: 65px;
+  background-color: var(--accent-color);
+  border: 2px solid var(--primary-color);
+  border-radius: 7px;
 }
 
 #socialLinks li:hover {
-    background-color: var(--primary-color);
-    cursor: pointer;
+  background-color: var(--primary-color);
+  cursor: pointer;
 }
 
-#socialLinks li:active, #socialLinks li:focus {
-    transform: scale(0.9);
-    transition-duration: 100ms;
+#socialLinks li:active,
+#socialLinks li:focus {
+  transform: scale(0.9);
+  transition-duration: 100ms;
 }
 
 #socialLinks li img {
-    padding: .7rem;
-    border-radius: inherit;
-    width: 100%;
-    height: 100%;
+  padding: 0.7rem;
+  border-radius: inherit;
+  width: 100%;
+  height: 100%;
 }
 
 /* ============== Info Panel ============== */
 
 #info {
-    padding: 1rem 2rem;
-    padding-bottom: 0;
+  padding: 1rem 2rem;
+  padding-bottom: 0;
 }
 
 #heading {
-    width: fit-content;
-    align-self: center;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    gap: 0.5rem;
-    padding: 1.2rem;
-    padding-bottom: 2rem;
-    background-color: var(--primary-color);
-    color: var(--text-color);
-    border-radius: 10px;
+  width: fit-content;
+  align-self: center;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 1.2rem;
+  padding-bottom: 2rem;
+  background-color: var(--primary-color);
+  color: var(--text-color);
+  border-radius: 10px;
 }
 
 #heading img {
-    width: 25px;
-    height: 25px;
+  width: 25px;
+  height: 25px;
 }
 
 #tagline {
-    font-size: 0.75rem;
-    font-weight: 500;
-    color: var(--text-color);
-    align-self: center;
-    position: absolute;
-    top: 70px;
+  font-size: 0.75rem;
+  font-weight: 500;
+  color: var(--text-color);
+  align-self: center;
+  position: absolute;
+  top: 70px;
 }
 
 h3 {
-    color: var(--primary-color);
-    font-size: 1.2rem;
-    font-weight: 800;
-    border-bottom: 2px solid var(--primary-color);
-    padding-bottom: 0.2rem;
-    margin-bottom: 0.5rem;
+  color: var(--primary-color);
+  font-size: 1.2rem;
+  font-weight: 800;
+  border-bottom: 2px solid var(--primary-color);
+  padding-bottom: 0.2rem;
+  margin-bottom: 0.5rem;
 }
 
 #about p,
 #commands p {
-    font-size: 0.9rem;
+  font-size: 0.9rem;
 }
 
 #about p strong {
-    color: var(--primary-color);
-    font-weight: 800;
+  color: var(--primary-color);
+  font-weight: 800;
 }
 
 #commands .cmd {
-    background-color: #c5aff3;
-    color: var(--primary-color);
-    font-family: "Fira Code", monospace;
-    letter-spacing: 1px;
-    font-size: 0.8rem;
-    font-weight: 600;
-    padding: 1px 10px;
-    border-radius: 5px;
+  background-color: #c5aff3;
+  color: var(--primary-color);
+  font-family: 'Fira Code', monospace;
+  letter-spacing: 1px;
+  font-size: 0.8rem;
+  font-weight: 600;
+  padding: 1px 10px;
+  border-radius: 5px;
+}
+
+#commands .cmd-name {
+  text-transform: capitalize;
 }
 
 #commands button {
-    margin-top: 5px;
-    background: var(--primary-color);
-    color: var(--text-color);
-    font-size: 0.9rem;
-    font-weight: 600;
-    border: none;
-    padding: 0.5rem 1rem;
-    border-radius: 5px;
-    cursor: pointer;
+  margin-top: 5px;
+  background: var(--primary-color);
+  color: var(--text-color);
+  font-size: 0.9rem;
+  font-weight: 600;
+  border: none;
+  padding: 0.5rem 1rem;
+  border-radius: 5px;
+  cursor: pointer;
 }
 
 #commands button:active {
-    transform: scale(0.9);
+  transform: scale(0.9);
 }
 
 table {
-    width: 100%;
-    border-collapse: collapse;
-    margin: 1rem 0;
+  width: 100%;
+  border-collapse: collapse;
+  margin: 1rem 0;
 }
 
 table tr {
-    border-bottom: 1px solid var(--primary-color);
-    font-size: 0.9rem;
-    font-weight: 700;
+  border-bottom: 1px solid var(--primary-color);
+  font-size: 0.9rem;
+  font-weight: 700;
 }
 
 table tr:hover {
-    background-color: #ffffff77;
+  background-color: #ffffff77;
 }
 
 table th {
-    background-color: var(--primary-color);
-    color: var(--text-color);
-    font-size: 1rem;
-    font-weight: 700;
-    padding: 0.5rem;
+  background-color: var(--primary-color);
+  color: var(--text-color);
+  font-size: 1rem;
+  font-weight: 700;
+  padding: 0.5rem;
 }
 
 table td {
-    color: var(--primary-color);
-    padding: 0.5rem;
-    width: 30%;
+  color: var(--primary-color);
+  padding: 0.5rem;
+  width: 30%;
 }
 
 #credits {
-    background-color: var(--secondary-color);
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    gap: 1.5rem;
-    font-size: 0.8rem;
-    padding: 1rem 0;
-    border-top: 2px solid var(--primary-color);
+  background-color: var(--secondary-color);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  gap: 1.5rem;
+  font-size: 0.8rem;
+  padding: 1rem 0;
+  border-top: 2px solid var(--primary-color);
 }
 
 #credits a:hover {
-    color: var(--text-color);
+  color: var(--text-color);
 }
 
 #images {
-    display: flex;
-    gap: 1.5rem;
+  display: flex;
+  gap: 1.5rem;
 }
 
 #images img {
-    width: 35px;
-    height: 35px;
+  width: 35px;
+  height: 35px;
 }
 
 #images img:hover {
-    transform: scale(1.1);
+  transform: scale(1.1);
 }
 
 /* ============== Edit Panel ============== */
 #edit {
-    gap: 0;
+  gap: 0;
 }
 
 .search-container {
-    background-color: var(--primary-color);
-    display: flex;
-    align-items: center;
-    padding: 10px 2.5rem 10px 2rem;
-    gap: 1rem;
+  background-color: var(--primary-color);
+  display: flex;
+  align-items: center;
+  padding: 10px 2.5rem 10px 2rem;
+  gap: 1rem;
 }
 
 .search-input {
-    flex: 1;
-    padding: 8px 12px;
-    border: none;
-    border-radius: 5px;
-    font-size: 0.9rem;
-    outline: none;
-    border: none;
-    background-color: var(--accent-color);
-    color: var(--primary-color);
-    font-weight: 600;
-    text-align: center;
-
+  flex: 1;
+  padding: 8px 12px;
+  border: none;
+  border-radius: 5px;
+  font-size: 0.9rem;
+  outline: none;
+  border: none;
+  background-color: var(--accent-color);
+  color: var(--primary-color);
+  font-weight: 600;
+  text-align: center;
 }
 
 /* Focus, hover, and active effects for search bar */
-.search-input:hover, .search-input:focus {
-    background-color: var(--text-color);
+.search-input:hover,
+.search-input:focus {
+  background-color: var(--text-color);
 }
 
 .add-link-btn {
-    width: 25px;
-    height: 25px;
-    background-color: transparent;
-    background-image: url("../assets/logos/plus.png");
-    background-size: cover;
-    border: none;
-    border-radius: 5px;
+  width: 25px;
+  height: 25px;
+  background-color: transparent;
+  background-image: url('../assets/logos/plus.png');
+  background-size: cover;
+  border: none;
+  border-radius: 5px;
 }
 
 .add-link-btn:hover {
-    background-image: url("../assets/logos/plus-hover.png");
+  background-image: url('../assets/logos/plus-hover.png');
 }
 
 .add-link-btn:active {
-    background-image: url("../assets/logos/plus-hover.png");
-    transform: scale(0.7);
+  background-image: url('../assets/logos/plus-hover.png');
+  transform: scale(0.7);
 }
 
 #links-container {
-    min-height: 270px;
-    max-height: 270px;
-    padding: 1rem 0;
-    display: flex;
-    flex-direction: column;
-    gap: 1rem;
-    list-style-type: none;
-    overflow-y: auto;
+  min-height: 270px;
+  max-height: 270px;
+  padding: 1rem 0;
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+  list-style-type: none;
+  overflow-y: auto;
 }
 
 #links-container::-webkit-scrollbar {
-    width: 0.6rem;
-    background-color: transparent;
+  width: 0.6rem;
+  background-color: transparent;
 }
 
 #links-container::-webkit-scrollbar-thumb {
-    background: var(--primary-color);
-    height: 30px;
+  background: var(--primary-color);
+  height: 30px;
 }
 
 .link-box {
-    display: flex;
-    background-color: transparent;
-    flex-direction: row;
-    padding-right: 1.8rem;
-    justify-content: center;
-    align-items: center;
-    gap: 0.5rem;
+  display: flex;
+  background-color: transparent;
+  flex-direction: row;
+  padding-right: 1.8rem;
+  justify-content: center;
+  align-items: center;
+  gap: 0.5rem;
 }
 
 .dragger {
-    width: auto;
-    height: 25px;
-    visibility: hidden;
-    cursor: ns-resize;
+  width: auto;
+  height: 25px;
+  visibility: hidden;
+  cursor: ns-resize;
 }
 
 .link-box:focus-within .dragger,
 .link-box:hover .dragger {
-    visibility: visible;
+  visibility: visible;
 }
 
 .link {
-    width: 420px;
-    padding: 10px;
-    background-color: var(--accent-color);
-    display: flex;
-    justify-content: space-around;
-    align-items: center;
-    gap: 1rem;
-    border: 2px solid transparent;
-    border: 2px solid var(--primary-color);
-    border-radius: 10px;
+  width: 420px;
+  padding: 10px;
+  background-color: var(--accent-color);
+  display: flex;
+  justify-content: space-around;
+  align-items: center;
+  gap: 1rem;
+  border: 2px solid transparent;
+  border: 2px solid var(--primary-color);
+  border-radius: 10px;
 }
 
 .link-box:focus-within .link,
 .link-box:hover .link {
-    border-color: var(--primary-color);
-    background-color: var(--text-color);
+  border-color: var(--primary-color);
+  background-color: var(--text-color);
 }
 
 .icon {
-    width: 25px;
-    height: 25px;
+  width: 25px;
+  height: 25px;
 }
 
 .link button {
-    width: 40px;
-    height: 30px;
-    border: none;
-    background-color: transparent;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    cursor: pointer;
+  width: 40px;
+  height: 30px;
+  border: none;
+  background-color: transparent;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  cursor: pointer;
 }
 
 .link button:active {
-    transform: scale(0.8);
-    transition-duration: 100ms;
+  transform: scale(0.8);
+  transition-duration: 100ms;
 }
 
 .link button:disabled {
-    cursor: not-allowed;
-    opacity: 0.1;
+  cursor: not-allowed;
+  opacity: 0.1;
 }
 
 .link button img {
-    width: 20px;
-    height: 20px;
+  width: 20px;
+  height: 20px;
 }
 
-.link input[type="text"] {
-    flex: 1;
-    margin-top: 5px;
-    padding-bottom: 2px;
-    background-color: transparent;
-    font-size: 1rem;
-    border: none;
-    outline: none;
-    color: var(--primary-color);
-    font-family: "M PLUS 1 Code", monospace;
-    font-weight: 500;
-    border-bottom: 2px solid transparent;
-    caret-color: var(--primary-color);
-    caret: pointer;
+.link input[type='text'] {
+  flex: 1;
+  margin-top: 5px;
+  padding-bottom: 2px;
+  background-color: transparent;
+  font-size: 1rem;
+  border: none;
+  outline: none;
+  color: var(--primary-color);
+  font-family: 'M PLUS 1 Code', monospace;
+  font-weight: 500;
+  border-bottom: 2px solid transparent;
+  caret-color: var(--primary-color);
+  caret: pointer;
 }
 
-.link input[type="text"]:focus {
-    border-color: var(--primary-color);
+.link input[type='text']:focus {
+  border-color: var(--primary-color);
 }
 
-.link input[type="text"]::placeholder {
-    font-family: "Raleway", sans-serif;
-    font-weight: 500;
-    font-style: italic;
-    color: var(--text-color-2);
+.link input[type='text']::placeholder {
+  font-family: 'Raleway', sans-serif;
+  font-weight: 500;
+  font-style: italic;
+  color: var(--text-color-2);
 }
 
 /* ====== Drag & Drop ====== */
 
 .column.dragElem {
-    opacity: 0.1;
+  opacity: 0.1;
 }
 .column.over {
-    border-top: 2px solid orange;
+  border-top: 2px solid orange;
 }
 
 .column.over-before {
-    padding-top: 50px;
+  padding-top: 50px;
 }
 .column.over-after {
-    padding-bottom: 50px;
+  padding-bottom: 50px;
 }
 
 .column.drag-enter {
-    border: 2px dashed #000;
+  border: 2px dashed #000;
 }
 
 /* ====== Save Button ====== */
 #save-btn-area {
-    position: absolute;
-    bottom: 0;
-    width: 100%;
-    display: flex;
-    justify-content: center;
-    background-color: var(--secondary-color);
-    padding: 1rem;
+  position: absolute;
+  bottom: 0;
+  width: 100%;
+  display: flex;
+  justify-content: center;
+  background-color: var(--secondary-color);
+  padding: 1rem;
 }
 
 #save-btn {
-    padding: 0.7rem 2.3rem;
-    background-color: var(--primary-color);
-    color: var(--text-color);
-    font-weight: 600;
-    border: 2px solid transparent;
-    border-radius: 5px;
-    font-size: 0.9rem;
-    cursor: pointer;
+  padding: 0.7rem 2.3rem;
+  background-color: var(--primary-color);
+  color: var(--text-color);
+  font-weight: 600;
+  border: 2px solid transparent;
+  border-radius: 5px;
+  font-size: 0.9rem;
+  cursor: pointer;
 }
 
 #save-btn:active {
-    transform: scale(0.9);
-    transition-duration: 100ms;
+  transform: scale(0.9);
+  transition-duration: 100ms;
 }