diff --git a/background.js b/background.js
index 7a12aff..3180863 100644
--- a/background.js
+++ b/background.js
@@ -4,67 +4,86 @@ for (let i = 0; i < fontBtns.length; i++) {
   fontBtns[i].addEventListener("click", function (e) {
     Preference.fontSize = e.target.innerText;
     console.log("Hi");
-    chrome.tabs.query({ active: true, currentWindow: true }, function (tabs) {
-      chrome.tabs.sendMessage(tabs[0].id, {
-        action: "fontSize",
-        fontSize: e.target.innerText,
-      });
-    });
+    chrome.tabs.query(
+      {
+        active: true,
+        currentWindow: true,
+      },
+      function (tabs) {
+        chrome.tabs.sendMessage(tabs[0].id, {
+          action: "fontSize",
+          fontSize: e.target.innerText,
+        });
+      }
+    );
   });
 }
-const fontChange = document.querySelector("#fontChange")
-fontChange.addEventListener("change",function(e){
-
-const elements=document.getElementsByTagName("*")
-for(let i=0;i<elements.length;i++){
-  const element=elements[i];
-  const selectedFont=e.target.value
-  
- if (selectedFont === "Trebuchet MS") {
-   element.style.fontFamily = "Castellar, Trebuchet MS, sans-serif";
- } else if (selectedFont === "Arial") {
-   element.style.fontFamily = "Arial, sans-serif";
- } else if (selectedFont === "Baskerville") {
-   element.style.fontFamily = "Baskerville, serif";
- } else if (selectedFont === "Calibri") {
-   element.style.fontFamily = "Calibri, sans-serif";
- } else if (selectedFont === "Garamond") {
-   element.style.fontFamily = "Garamond, serif";
- } else if (selectedFont === "Verdana") {
-   element.style.fontFamily = "Verdana, sans-serif";
- } else if (selectedFont === "Georgia") {
-   element.style.fontFamily = "Georgia, serif";
- } else if (selectedFont === "Times New Roman") {
-   element.style.fontFamily = "Times New Roman,serif";
- } else if (selectedFont === "Helvetica") {
-   element.style.fontFamily = "Helvetica, sans-serif";
- } else if (selectedFont === "Monaco") {
-   element.style.fontFamily = "Monaco, Monospace";
- } else if (selectedFont === "OpenSans") {
-   element.style.fontFamily = "OpenSans-Regular, sans-serif";
- } else if (selectedFont === "Tahoma") {
-   element.style.fontFamily = "Tahoma,sans-serif";
- }
- else if(selectedFont=="Default"){
-  element.style.fontFamily = "";
-  
- }
-
- }
-
-
-})
+const fontChange = document.querySelector("#fontChange");
+fontChange.addEventListener("change", function (e) {
+  const elements = document.getElementsByTagName("*");
+  for (let i = 0; i < elements.length; i++) {
+    const element = elements[i];
+    const selectedFont = e.target.value;
+
+    switch (selectedFont) {
+      case "Trebuchet MS":
+        element.style.fontFamily = "Castellar, Trebuchet MS, sans-serif";
+        break;
+      case "Arial":
+        element.style.fontFamily = "Arial, sans-serif";
+        break;
+      case "Baskerville":
+        element.style.fontFamily = "Baskerville, serif";
+        break;
+      case "Calibri":
+        element.style.fontFamily = "Calibri, sans-serif";
+        break;
+      case "Garamond":
+        element.style.fontFamily = "Garamond, serif";
+        break;
+      case "Verdana":
+        element.style.fontFamily = "Verdana, sans-serif";
+        break;
+      case "Georgia":
+        element.style.fontFamily = "Georgia, serif";
+        break;
+      case "Times New Roman":
+        element.style.fontFamily = "Times New Roman,serif";
+        break;
+      case "Helvetica":
+        element.style.fontFamily = "Helvetica, sans-serif";
+        break;
+      case "Monaco":
+        element.style.fontFamily = "Monaco, Monospace";
+        break;
+      case "OpenSans":
+        element.style.fontFamily = "OpenSans-Regular, sans-serif";
+        break;
+      case "Tahoma":
+        element.style.fontFamily = "Tahoma,sans-serif";
+        break;
+      default:
+        element.style.fontFamily = "";
+    }
+  }
+});
 
 const fontStyleBtns = document.getElementsByClassName("fontStyle");
 for (let i = 0; i < fontStyleBtns.length; i++) {
   fontStyleBtns[i].addEventListener("click", function (e) {
     Preference.fontStyle = e.target.innerText;
-    chrome.tabs.query({ active: true, currentWindow: true }, function (tabs) {
-      chrome.tabs.sendMessage(tabs[0].id, {
-        action: "fontStyle",
-        fontStyle: e.target.innerText,
-      });
-    });
+    chrome.tabs.query(
+      {
+        active: true,
+        currentWindow: true,
+      },
+      function (tabs) {
+        chrome.tabs.sendMessage(tabs[0].id, {
+          action: "fontStyle",
+          fontStyle: e.target.innerText,
+        });
+      }
+    );
   });
 }
 
@@ -73,9 +92,17 @@ for (let i = 0; i < images.length; i++) {
   images[i].addEventListener("click", function (e) {
     Preference.image = false;
     console.log("clicked");
-    chrome.tabs.query({ active: true, currentWindow: true }, function (tabs) {
-      chrome.tabs.sendMessage(tabs[0].id, { action: "image" });
-    });
+    chrome.tabs.query(
+      {
+        active: true,
+        currentWindow: true,
+      },
+      function (tabs) {
+        chrome.tabs.sendMessage(tabs[0].id, {
+          action: "image",
+        });
+      }
+    );
   });
 }
 
@@ -83,9 +110,17 @@ const imageAdd = document.getElementsByClassName("img-add");
 for (let i = 0; i < imageAdd.length; i++) {
   imageAdd[i].addEventListener("click", function (e) {
     Preference.image = true;
-    chrome.tabs.query({ active: true, currentWindow: true }, function (tabs) {
-      chrome.tabs.sendMessage(tabs[0].id, { action: "imageAdd" });
-    });
+    chrome.tabs.query(
+      {
+        active: true,
+        currentWindow: true,
+      },
+      function (tabs) {
+        chrome.tabs.sendMessage(tabs[0].id, {
+          action: "imageAdd",
+        });
+      }
+    );
   });
 }
 
@@ -94,12 +129,18 @@ const rate = document.querySelector("#rate");
 console.log(rate.value);
 for (let i = 0; i < textToSpeechHelper.length; i++) {
   textToSpeechHelper[i].addEventListener("click", function (e) {
-    chrome.tabs.query({ active: true, currentWindow: true }, function (tabs) {
-      chrome.tabs.sendMessage(tabs[0].id, {
-        action: "text-to-speech",
-        rate: rate.value,
-      });
-    });
+    chrome.tabs.query(
+      {
+        active: true,
+        currentWindow: true,
+      },
+      function (tabs) {
+        chrome.tabs.sendMessage(tabs[0].id, {
+          action: "text-to-speech",
+          rate: rate.value,
+        });
+      }
+    );
   });
 }
 
@@ -108,21 +149,35 @@ const textToSpeachSelected = document.getElementsByClassName(
 );
 for (let i = 0; i < textToSpeachSelected.length; i++) {
   textToSpeachSelected[i].addEventListener("click", function (e) {
-    chrome.tabs.query({ active: true, currentWindow: true }, function (tabs) {
-      chrome.tabs.sendMessage(tabs[0].id, {
-        action: "text-to-speech-selected",
-        rate: rate.value,
-      });
-    });
+    chrome.tabs.query(
+      {
+        active: true,
+        currentWindow: true,
+      },
+      function (tabs) {
+        chrome.tabs.sendMessage(tabs[0].id, {
+          action: "text-to-speech-selected",
+          rate: rate.value,
+        });
+      }
+    );
   });
 }
 
 const textToSpeechStop = document.getElementsByClassName("stop-speech");
 for (let i = 0; i < textToSpeechStop.length; i++) {
   textToSpeechStop[i].addEventListener("click", function (e) {
-    chrome.tabs.query({ active: true, currentWindow: true }, function (tabs) {
-      chrome.tabs.sendMessage(tabs[0].id, { action: "stop-speech" });
-    });
+    chrome.tabs.query(
+      {
+        active: true,
+        currentWindow: true,
+      },
+      function (tabs) {
+        chrome.tabs.sendMessage(tabs[0].id, {
+          action: "stop-speech",
+        });
+      }
+    );
   });
 }
 
@@ -130,9 +185,17 @@ const links = document.getElementsByClassName("link");
 for (let i = 0; i < links.length; i++) {
   links[i].addEventListener("click", function (e) {
     Preference.linkHighlight = true;
-    chrome.tabs.query({ active: true, currentWindow: true }, function (tabs) {
-      chrome.tabs.sendMessage(tabs[0].id, { action: "link-highlight" });
-    });
+    chrome.tabs.query(
+      {
+        active: true,
+        currentWindow: true,
+      },
+      function (tabs) {
+        chrome.tabs.sendMessage(tabs[0].id, {
+          action: "link-highlight",
+        });
+      }
+    );
   });
 }
 
@@ -140,55 +203,104 @@ const show_borders = document.getElementsByClassName("border");
 for (let i = 0; i < show_borders.length; i++) {
   show_borders[i].addEventListener("click", function (e) {
     Preference.borderHighlight = true;
-    chrome.tabs.query({ active: true, currentWindow: true }, function (tabs) {
-      chrome.tabs.sendMessage(tabs[0].id, { action: "link-border-highlight" });
-    });
+    chrome.tabs.query(
+      {
+        active: true,
+        currentWindow: true,
+      },
+      function (tabs) {
+        chrome.tabs.sendMessage(tabs[0].id, {
+          action: "link-border-highlight",
+        });
+      }
+    );
   });
 }
 
 const removeLinkHighlight = document.getElementsByClassName("remove-link-hg");
 for (let i = 0; i < links.length; i++) {
-    removeLinkHighlight[i].addEventListener('click', function (e) {
-        chrome.tabs.query({active: true, currentWindow: true}, function(tabs) {
-            chrome.tabs.sendMessage(tabs[0].id, {action: "link-highlight-remove"});
-        }
-        )
-    })
-};
+  removeLinkHighlight[i].addEventListener("click", function (e) {
+    chrome.tabs.query(
+      {
+        active: true,
+        currentWindow: true,
+      },
+      function (tabs) {
+        chrome.tabs.sendMessage(tabs[0].id, {
+          action: "link-highlight-remove",
+        });
+      }
+    );
+  });
+}
 
-const autoScrollFeature = document.getElementById('autoscroll');
+const autoScrollFeature = document.getElementById("autoscroll");
 let scrollerID;
 let speed = 2; // 1 - Fast | 2 - Medium | 3 - Slow //default speed is medium.
 let interval = speed * 5;
-const slow_speed = document.getElementById('slow_btn');
-const medium_speed = document.getElementById('medium_btn');
-const high_speed = document.getElementById('fast_btn');
-
-slow_speed.addEventListener("click",function(e){
-  chrome.tabs.query({active:true,currentWindow:true},function(tabs){
-    chrome.tabs.sendMessage(tabs[0].id,{action:"slowautoscroll",interval:15});
-  });
-})
-
-medium_speed.addEventListener("click",function(e){
-  chrome.tabs.query({active:true,currentWindow:true},function(tabs){
-    chrome.tabs.sendMessage(tabs[0].id,{action:"mediumautoscroll",interval:10});
-  });
-})
+const slow_speed = document.getElementById("slow_btn");
+const medium_speed = document.getElementById("medium_btn");
+const high_speed = document.getElementById("fast_btn");
+
+slow_speed.addEventListener("click", function (e) {
+  chrome.tabs.query(
+    {
+      active: true,
+      currentWindow: true,
+    },
+    function (tabs) {
+      chrome.tabs.sendMessage(tabs[0].id, {
+        action: "slowautoscroll",
+        interval: 15,
+      });
+    }
+  );
+});
 
-high_speed.addEventListener("click",function(e){
-  chrome.tabs.query({active:true,currentWindow:true},function(tabs){
-    chrome.tabs.sendMessage(tabs[0].id,{action:"fastautoscroll",interval:5});
-  });
+medium_speed.addEventListener("click", function (e) {
+  chrome.tabs.query(
+    {
+      active: true,
+      currentWindow: true,
+    },
+    function (tabs) {
+      chrome.tabs.sendMessage(tabs[0].id, {
+        action: "mediumautoscroll",
+        interval: 10,
+      });
+    }
+  );
 });
 
+high_speed.addEventListener("click", function (e) {
+  chrome.tabs.query(
+    {
+      active: true,
+      currentWindow: true,
+    },
+    function (tabs) {
+      chrome.tabs.sendMessage(tabs[0].id, {
+        action: "fastautoscroll",
+        interval: 5,
+      });
+    }
+  );
+});
 
-const imageReader = document.getElementsByClassName('img-read');
+const imageReader = document.getElementsByClassName("img-read");
 for (let i = 0; i < imageReader.length; i++) {
   imageReader[i].addEventListener("click", function (e) {
-    chrome.tabs.query({ active: true, currentWindow: true }, function (tabs) {
-      chrome.tabs.sendMessage(tabs[0].id, { action: "image-reader" });
-    });
+    chrome.tabs.query(
+      {
+        active: true,
+        currentWindow: true,
+      },
+      function (tabs) {
+        chrome.tabs.sendMessage(tabs[0].id, {
+          action: "image-reader",
+        });
+      }
+    );
   });
 }
 
@@ -198,73 +310,106 @@ const backgroundColorChanger = document.getElementById(
 backgroundColorChanger.addEventListener("submit", function (e) {
   e.preventDefault();
   Preference.backgroundColor = e.target.color.value;
-  chrome.tabs.query({ active: true, currentWindow: true }, function (tabs) {
-    chrome.tabs.sendMessage(tabs[0].id, {
-      action: "backgroundColor",
-      backgroundColor: e.target.color.value,
-    });
-  });
+  chrome.tabs.query(
+    {
+      active: true,
+      currentWindow: true,
+    },
+    function (tabs) {
+      chrome.tabs.sendMessage(tabs[0].id, {
+        action: "backgroundColor",
+        backgroundColor: e.target.color.value,
+      });
+    }
+  );
 });
 
-const modeChanger = document.getElementsByClassName(
-  "modes"
-);
-for(let i=0;i < modeChanger.length;i++){
-  
-modeChanger[i].addEventListener("click", function (e) {
-  let modevalue = e.target.value;
-  console.log(modevalue);
-  chrome.tabs.query({ active: true, currentWindow: true }, function (tabs) {
-    chrome.tabs.sendMessage(tabs[0].id, {
-      action: "light-on-darkmode",
-      modevalue:e.target.value,
-    });
+const modeChanger = document.getElementsByClassName("modes");
+for (let i = 0; i < modeChanger.length; i++) {
+  modeChanger[i].addEventListener("click", function (e) {
+    let modevalue = e.target.value;
+    console.log(modevalue);
+    chrome.tabs.query(
+      {
+        active: true,
+        currentWindow: true,
+      },
+      function (tabs) {
+        chrome.tabs.sendMessage(tabs[0].id, {
+          action: "light-on-darkmode",
+          modevalue: e.target.value,
+        });
+      }
+    );
   });
-});
 }
 
 document
   .getElementsByClassName("revert-background-color")[0]
   .addEventListener("click", function (e) {
     Preference.backgroundColor = false;
-    chrome.tabs.query({ active: true, currentWindow: true }, function (tabs) {
-      chrome.tabs.sendMessage(tabs[0].id, {
-        action: "revert-background-color",
-      });
-    });
+    chrome.tabs.query(
+      {
+        active: true,
+        currentWindow: true,
+      },
+      function (tabs) {
+        chrome.tabs.sendMessage(tabs[0].id, {
+          action: "revert-background-color",
+        });
+      }
+    );
   });
 
-  
-  document
+document
   .getElementsByClassName("revert-Font-color")[0]
   .addEventListener("click", function (e) {
-    chrome.tabs.query({ active: true, currentWindow: true }, function (tabs) {
-      chrome.tabs.sendMessage(tabs[0].id, {
-        action: "revert-Font-color",
-      });
-    });
+    chrome.tabs.query(
+      {
+        active: true,
+        currentWindow: true,
+      },
+      function (tabs) {
+        chrome.tabs.sendMessage(tabs[0].id, {
+          action: "revert-Font-color",
+        });
+      }
+    );
   });
 
-
 const fontColorChanger = document.getElementById("fontColorChanger");
 fontColorChanger.addEventListener("submit", function (e) {
   e.preventDefault();
   Preference.fontColor = e.target.color.value;
-  chrome.tabs.query({ active: true, currentWindow: true }, function (tabs) {
-    chrome.tabs.sendMessage(tabs[0].id, {
-      action: "fontColor",
-      fontColor: e.target.color.value,
-    });
-  });
+  chrome.tabs.query(
+    {
+      active: true,
+      currentWindow: true,
+    },
+    function (tabs) {
+      chrome.tabs.sendMessage(tabs[0].id, {
+        action: "fontColor",
+        fontColor: e.target.color.value,
+      });
+    }
+  );
 });
 
 const highlightPara = document.getElementsByClassName("para-highlighter");
 for (let i = 0; i < highlightPara.length; i++) {
   highlightPara[i].addEventListener("click", function () {
     Preference.paraHighlight = true;
-    chrome.tabs.query({ active: true, currentWindow: true }, function (tabs) {
-      chrome.tabs.sendMessage(tabs[0].id, { action: "para-highlighter" });
-    });
+    chrome.tabs.query(
+      {
+        active: true,
+        currentWindow: true,
+      },
+      function (tabs) {
+        chrome.tabs.sendMessage(tabs[0].id, {
+          action: "para-highlighter",
+        });
+      }
+    );
   });
 }
 
@@ -274,11 +419,17 @@ const removeHighlightPara = document.getElementsByClassName(
 for (let i = 0; i < removeHighlightPara.length; i++) {
   removeHighlightPara[i].addEventListener("click", function () {
     Preference.paraHighlight = false;
-    chrome.tabs.query({ active: true, currentWindow: true }, function (tabs) {
-      chrome.tabs.sendMessage(tabs[0].id, {
-        action: "para-highlighter-remove",
-      });
-    });
+    chrome.tabs.query(
+      {
+        active: true,
+        currentWindow: true,
+      },
+      function (tabs) {
+        chrome.tabs.sendMessage(tabs[0].id, {
+          action: "para-highlighter-remove",
+        });
+      }
+    );
   });
 }
 
@@ -287,11 +438,17 @@ const highlightParaBackground = document.getElementsByClassName(
 );
 for (let i = 0; i < highlightParaBackground.length; i++) {
   highlightParaBackground[i].addEventListener("click", function () {
-    chrome.tabs.query({ active: true, currentWindow: true }, function (tabs) {
-      chrome.tabs.sendMessage(tabs[0].id, {
-        action: "para-highlighter-background",
-      });
-    });
+    chrome.tabs.query(
+      {
+        active: true,
+        currentWindow: true,
+      },
+      function (tabs) {
+        chrome.tabs.sendMessage(tabs[0].id, {
+          action: "para-highlighter-background",
+        });
+      }
+    );
   });
 }
 
@@ -300,11 +457,17 @@ const removeHighlightParaBackground = document.getElementsByClassName(
 );
 for (let i = 0; i < removeHighlightParaBackground.length; i++) {
   removeHighlightParaBackground[i].addEventListener("click", function () {
-    chrome.tabs.query({ active: true, currentWindow: true }, function (tabs) {
-      chrome.tabs.sendMessage(tabs[0].id, {
-        action: "para-highlighter-background-remove",
-      });
-    });
+    chrome.tabs.query(
+      {
+        active: true,
+        currentWindow: true,
+      },
+      function (tabs) {
+        chrome.tabs.sendMessage(tabs[0].id, {
+          action: "para-highlighter-background-remove",
+        });
+      }
+    );
   });
 }
 
@@ -325,36 +488,44 @@ selectedText[0].addEventListener("click", function () {
   const updateDefinition = document.getElementsByClassName(
     "select-text-definition"
   )[0];
-  chrome.tabs.query({ active: true, currentWindow: true }, function (tabs) {
-    chrome.tabs.sendMessage(
-      tabs[0].id,
-      { action: "select-text" },
-      async function (response) {
-        const loadingAnimation = ["|", "/", "-", "\\"];
-        let i = 0;
-        // Display the loading animation
-        const interval = setInterval(() => {
-          updateDefinition.innerHTML =
-            "\r" +
-            "Loading data from API... " +
-            loadingAnimation[i++ % loadingAnimation.length];
-        }, 100);
-        const word = response.data;
-        if (word) {
-          await fetchMeaning(word).then((definition) => {
+  chrome.tabs.query(
+    {
+      active: true,
+      currentWindow: true,
+    },
+    function (tabs) {
+      chrome.tabs.sendMessage(
+        tabs[0].id,
+        {
+          action: "select-text",
+        },
+        async function (response) {
+          const loadingAnimation = ["|", "/", "-", "\\"];
+          let i = 0;
+          // Display the loading animation
+          const interval = setInterval(() => {
+            updateDefinition.innerHTML =
+              "\r" +
+              "Loading data from API... " +
+              loadingAnimation[i++ % loadingAnimation.length];
+          }, 100);
+          const word = response.data;
+          if (word) {
+            await fetchMeaning(word).then((definition) => {
+              clearInterval(interval);
+              if (definition)
+                updateDefinition.innerHTML = word + " :- " + definition;
+              else updateDefinition.innerHTML = "Word not found!";
+            });
+          } else {
             clearInterval(interval);
-            if (definition)
-              updateDefinition.innerHTML = word + " :- " + definition;
-            else updateDefinition.innerHTML = "Word not found!";
-          });
-        } else {
-          clearInterval(interval);
-          updateDefinition.innerHTML =
-            "Please select word without space initially to get definition!";
+            updateDefinition.innerHTML =
+              "Please select word without space initially to get definition!";
+          }
         }
-      }
-    );
-  });
+      );
+    }
+  );
 });
 
 document.getElementById("checkbox").addEventListener("click", () => {
@@ -392,7 +563,7 @@ const wordArray = [
   "TRANSLATE",
   "MAGNIFIER",
   "REMOVE EMPHASIS",
-  "CASE CONVERTER"
+  "CASE CONVERTER",
 ];
 const speakerHelper = document.getElementsByClassName("speaker");
 for (let i = 0; i < speakerHelper.length; i++) {
@@ -404,12 +575,18 @@ for (let i = 0; i < speakerHelper.length; i++) {
 
 function handleZoom(zoomVal) {
   Preference.zoomVal = zoomVal;
-  chrome.tabs.query({ active: true, currentWindow: true }, function (tabs) {
-    chrome.tabs.sendMessage(tabs[0].id, {
-      action: "zoomPage",
-      zoomValue: zoomVal,
-    });
-  });
+  chrome.tabs.query(
+    {
+      active: true,
+      currentWindow: true,
+    },
+    function (tabs) {
+      chrome.tabs.sendMessage(tabs[0].id, {
+        action: "zoomPage",
+        zoomValue: zoomVal,
+      });
+    }
+  );
 }
 const zoomIn = document.getElementById("magni-inc");
 const zoomOut = document.getElementById("magni-dec");
@@ -441,18 +618,34 @@ resetZoom.addEventListener("click", () => {
 const remove_italics = document.getElementsByClassName("remove-italics");
 for (let i = 0; i < remove_italics.length; i++) {
   remove_italics[i].addEventListener("click", function (e) {
-    chrome.tabs.query({ active: true, currentWindow: true }, function (tabs) {
-      chrome.tabs.sendMessage(tabs[0].id, { action: "italics-remove" });
-    });
+    chrome.tabs.query(
+      {
+        active: true,
+        currentWindow: true,
+      },
+      function (tabs) {
+        chrome.tabs.sendMessage(tabs[0].id, {
+          action: "italics-remove",
+        });
+      }
+    );
   });
 }
 
 const remove_underscore = document.getElementsByClassName("remove-underscore");
 for (let i = 0; i < remove_underscore.length; i++) {
   remove_underscore[i].addEventListener("click", function (e) {
-    chrome.tabs.query({ active: true, currentWindow: true }, function (tabs) {
-      chrome.tabs.sendMessage(tabs[0].id, { action: "underscore-remove" });
-    });
+    chrome.tabs.query(
+      {
+        active: true,
+        currentWindow: true,
+      },
+      function (tabs) {
+        chrome.tabs.sendMessage(tabs[0].id, {
+          action: "underscore-remove",
+        });
+      }
+    );
   });
 }
 
@@ -461,33 +654,52 @@ const italics_underscore_reset = document.getElementsByClassName(
 );
 for (let i = 0; i < italics_underscore_reset.length; i++) {
   italics_underscore_reset[i].addEventListener("click", function (e) {
-    chrome.tabs.query({ active: true, currentWindow: true }, function (tabs) {
-      chrome.tabs.sendMessage(tabs[0].id, {
-        action: "reset_italics_underscore",
-      });
-    });
+    chrome.tabs.query(
+      {
+        active: true,
+        currentWindow: true,
+      },
+      function (tabs) {
+        chrome.tabs.sendMessage(tabs[0].id, {
+          action: "reset_italics_underscore",
+        });
+      }
+    );
   });
 }
 // Usage
 // Add click event listeners to buttons
-document.getElementById("upper-case-btn").addEventListener("click", function() {
-  convertCase("uppercase");
-});
-document.getElementById("lower-case-btn").addEventListener("click", function() {
-  convertCase("lowercase");
-});
+document
+  .getElementById("upper-case-btn")
+  .addEventListener("click", function () {
+    convertCase("uppercase");
+  });
+document
+  .getElementById("lower-case-btn")
+  .addEventListener("click", function () {
+    convertCase("lowercase");
+  });
 
 // Background script
 function convertCase(caseType) {
-  chrome.tabs.query({active: true, currentWindow: true}, function(tabs) {
-    chrome.tabs.sendMessage(tabs[0].id, {action:"convertCase",payload: caseType});
-  });
+  chrome.tabs.query(
+    {
+      active: true,
+      currentWindow: true,
+    },
+    function (tabs) {
+      chrome.tabs.sendMessage(tabs[0].id, {
+        action: "convertCase",
+        payload: caseType,
+      });
+    }
+  );
 }
 
-
 const savePreferenceBtn = document
   .getElementById("savePreferenceBtn")
   .addEventListener("click", savePreference);
+
 function savePreference(e) {
   //will save Preferences
   e.preventDefault();
@@ -508,7 +720,10 @@ document
     if (localPreference) {
       if (localPreference.fontSize) {
         chrome.tabs.query(
-          { active: true, currentWindow: true },
+          {
+            active: true,
+            currentWindow: true,
+          },
           function (tabs) {
             chrome.tabs.sendMessage(tabs[0].id, {
               action: "fontSize",
@@ -519,7 +734,10 @@ document
       }
       if (localPreference.fontStyle) {
         chrome.tabs.query(
-          { active: true, currentWindow: true },
+          {
+            active: true,
+            currentWindow: true,
+          },
           function (tabs) {
             chrome.tabs.sendMessage(tabs[0].id, {
               action: "fontStyle",
@@ -530,7 +748,10 @@ document
       }
       if (localPreference.image === false) {
         chrome.tabs.query(
-          { active: true, currentWindow: true },
+          {
+            active: true,
+            currentWindow: true,
+          },
           function (tabs) {
             chrome.tabs.sendMessage(tabs[0].id, {
               action: "image",
@@ -540,7 +761,10 @@ document
       }
       if (localPreference.image === true) {
         chrome.tabs.query(
-          { active: true, currentWindow: true },
+          {
+            active: true,
+            currentWindow: true,
+          },
           function (tabs) {
             chrome.tabs.sendMessage(tabs[0].id, {
               action: "imageAdd",
@@ -550,7 +774,10 @@ document
       }
       if (localPreference.backgroundColor) {
         chrome.tabs.query(
-          { active: true, currentWindow: true },
+          {
+            active: true,
+            currentWindow: true,
+          },
           function (tabs) {
             chrome.tabs.sendMessage(tabs[0].id, {
               action: "backgroundColor",
@@ -561,7 +788,10 @@ document
       }
       if (localPreference.backgroundColor === false) {
         chrome.tabs.query(
-          { active: true, currentWindow: true },
+          {
+            active: true,
+            currentWindow: true,
+          },
           function (tabs) {
             chrome.tabs.sendMessage(tabs[0].id, {
               action: "revert-background-color",
@@ -571,7 +801,10 @@ document
       }
       if (localPreference.zoomVal) {
         chrome.tabs.query(
-          { active: true, currentWindow: true },
+          {
+            active: true,
+            currentWindow: true,
+          },
           function (tabs) {
             chrome.tabs.sendMessage(tabs[0].id, {
               action: "zoomPage",
@@ -582,7 +815,10 @@ document
       }
       if (localPreference.paraHighlight === true) {
         chrome.tabs.query(
-          { active: true, currentWindow: true },
+          {
+            active: true,
+            currentWindow: true,
+          },
           function (tabs) {
             chrome.tabs.sendMessage(tabs[0].id, {
               action: "para-highlighter",
@@ -592,7 +828,10 @@ document
       }
       if (localPreference.paraHighlight === false) {
         chrome.tabs.query(
-          { active: true, currentWindow: true },
+          {
+            active: true,
+            currentWindow: true,
+          },
           function (tabs) {
             chrome.tabs.sendMessage(tabs[0].id, {
               action: "para-highlighter-remove",
@@ -602,7 +841,10 @@ document
       }
       if (localPreference.linkHighlight === true) {
         chrome.tabs.query(
-          { active: true, currentWindow: true },
+          {
+            active: true,
+            currentWindow: true,
+          },
           function (tabs) {
             chrome.tabs.sendMessage(tabs[0].id, {
               action: "link-highlight",
@@ -612,7 +854,10 @@ document
       }
       if (localPreference.borderHighlight === true) {
         chrome.tabs.query(
-          { active: true, currentWindow: true },
+          {
+            active: true,
+            currentWindow: true,
+          },
           function (tabs) {
             chrome.tabs.sendMessage(tabs[0].id, {
               action: "link-border-highlight",
@@ -622,7 +867,10 @@ document
       }
       if (localPreference.linkHighlight === false) {
         chrome.tabs.query(
-          { active: true, currentWindow: true },
+          {
+            active: true,
+            currentWindow: true,
+          },
           function (tabs) {
             chrome.tabs.sendMessage(tabs[0].id, {
               action: "link-highlight-remove",
diff --git a/css/styles.css b/css/styles.css
index 8868fcf..3eca855 100644
--- a/css/styles.css
+++ b/css/styles.css
@@ -5,7 +5,6 @@
   font-size: 26px;
 }
 
-
 .centered {
   text-align: center;
   width: 100%;
@@ -14,27 +13,28 @@
   flex-direction: column;
   align-items: center;
 }
-.header-options{
+
+.header-options {
   display: flex;
   align-items: center;
 }
-select{
+
+select {
   margin-left: 1em;
 }
 
 .preference,
 .preference button {
-  text-align:center;
+  text-align: center;
   align-items: center;
 }
 
 .images,
 .images button {
-  text-align:center;
+  text-align: center;
   align-items: center;
 }
 
-
 #about p {
   text-align: justify;
   user-select: none;
@@ -42,7 +42,7 @@ select{
 }
 
 body {
-  width: 500px;
+  width: 800px;
   background-color: rgb(69, 138, 249);
   color: #fff;
   transition: background-color 0.2s ease-in-out;
@@ -51,15 +51,18 @@ body {
 ::-webkit-scrollbar {
   width: 12px;
 }
+
 ::-webkit-scrollbar-track {
   background-color: pink;
   margin-block: 0.3em;
   border-radius: 10px;
 }
+
 ::-webkit-scrollbar-thumb {
   background-color: rgb(141, 215, 141);
   border-radius: 10px;
 }
+
 ::-webkit-scrollbar-thumb:hover {
   background-color: rgb(67, 171, 67);
 }
@@ -72,6 +75,7 @@ h1 {
   align-items: center;
   user-select: none;
 }
+
 button,
 .show-zoom-value {
   align-items: center;
@@ -91,6 +95,7 @@ button,
   position: relative;
   text-decoration: none;
 }
+
 .magni-cnt .show-zoom-value {
   text-align: center;
   margin-left: 130px;
@@ -128,7 +133,6 @@ button:hover {
   font-family: "Courier New", Courier, monospace;
   font-size: 16px;
   margin-left: 10px;
-
 }
 
 @media (min-width: 768px) {
@@ -136,46 +140,58 @@ button:hover {
     padding: 0 40px;
   }
 }
+
+#about {
+  width: 800px;
+}
+
 #about p {
   text-align: justify;
-
 }
+
 #rate-control {
   display: flex;
   align-items: center;
   gap: 1rem;
   margin: 1rem 0;
 }
-#rate-control input{
+
+#rate-control input {
   /* -webkit-appearance: none; */
   background: rgb(141, 215, 141);
   height: 8px;
   border-radius: 8px;
 }
-#rate::-webkit-slider-thumb{
+
+#rate::-webkit-slider-thumb {
   -webkit-appearance: none;
-appearance: none;
-height: 20px;
-width: 20px;
-border-radius: 50%;
-background: rgb(252, 77, 106);
+  appearance: none;
+  height: 20px;
+  width: 20px;
+  border-radius: 50%;
+  background: rgb(252, 77, 106);
 }
+
 .magnifier {
   display: flex;
   align-items: center;
   justify-content: space-between;
 }
+
 .magnifier button {
   padding: 0 25px;
 }
+
 .magni-cnt,
 .magni-cnt button {
   display: flex;
   align-items: center;
 }
+
 .magni-cnt button i {
   margin-right: 5px;
 }
+
 .show-zoom-value {
   /* width: 60px; */
   /* width: 100%;
@@ -184,22 +200,25 @@ background: rgb(252, 77, 106);
   padding: 10px 20px;
   margin-right: 0;
 }
+
 #magni {
   width: 100%;
 }
-.magnifier input{
+
+.magnifier input {
   /* -webkit-appearance: none; */
   background: rgb(141, 215, 141);
   height: 8px;
   border-radius: 8px;
 }
-#magni::-webkit-slider-thumb{
+
+#magni::-webkit-slider-thumb {
   -webkit-appearance: none;
-appearance: none;
-height: 20px;
-width: 20px;
-border-radius: 50%;
-background: rgb(252, 77, 106);
+  appearance: none;
+  height: 20px;
+  width: 20px;
+  border-radius: 50%;
+  background: rgb(252, 77, 106);
 }
 .dark-mode {
   background-color: #fff;
@@ -229,15 +248,16 @@ background: rgb(252, 77, 106);
   cursor: pointer;
   margin-top: 0.75em;
   margin-left: 0.75em;
-
 }
-.label span{
+
+.label span {
   font-size: 8px;
   color: white;
   margin-left: 20px;
   margin-top: 1px;
   transition: transform 0.2s linear;
 }
+
 .ball {
   width: 20px;
   height: 20px;
@@ -255,27 +275,45 @@ background: rgb(252, 77, 106);
 .checkbox:checked + .label span {
   transform: translateX(-20px);
 }
+
 .speaker {
   cursor: pointer;
   display: contents;
   user-select: none;
 }
-#fontChange {
-
-display: flex;
-justify-content: flex-end;
-margin-top:20px;
-
 
+#fontChange {
+  display: flex;
+  justify-content: flex-end;
+  margin-top: 20px;
 }
-.dropDown{
-   background-color: #ffdeda;
-   border-radius: 8px !important;
+
+.dropDown {
+  background-color: #ffdeda;
+  border-radius: 8px !important;
 }
-.convertBtns{
+
+.convertBtns {
   display: flex;
 }
-#upper-case-btn, #lower-case-btn {
+
+#upper-case-btn,
+#lower-case-btn {
   margin: 10px !important;
   padding: 0 14px !important;
 }
+
+section {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  justify-content: flex-start;
+}
+
+#fonts {
+  width: 70%;
+}
+
+#links {
+  width: 880px;
+}
\ No newline at end of file