diff --git a/css/screen.css b/css/screen.css
index 22400a0..cc3c030 100644
--- a/css/screen.css
+++ b/css/screen.css
@@ -188,7 +188,7 @@
             margin: 0;
         }
 
-        .pinColor {
+        .pinColorInput {
             border: none !important;
             outline: none;
             z-index: -100;
diff --git a/index.html b/index.html
index 1cbd8b3..61fec85 100644
--- a/index.html
+++ b/index.html
@@ -72,11 +72,11 @@ <h2>Options</h2>
             </div>
 
             <div id="pinColorPickerOption" class="pinColorPickerOption option disabled">
-                <label for="pinColor">Background color: </label>
+                <label for="pinColorInput">Background color: </label>
                 <p id="pinColorText" class="pinColorText">#000000</p>
-
             </div>
-            <input id="pinColor" class="pinColor noShow" type="color" value="#000000"/>
+            
+            <input id="pinColorInput" class="pinColorInput noShow" type="color" value="#000000"/>
 
 
             <button id="generateTemplateButton" class="noPrint">Generate Template</button>
diff --git a/js/script.js b/js/script.js
index 67503f4..65a4254 100644
--- a/js/script.js
+++ b/js/script.js
@@ -1,94 +1,77 @@
-
-const generateTemplateButton = document.getElementById("generateTemplateButton")
-const selectImageInput = document.getElementById('selectImageInput');
+// mainContent
+    // Preview Image Side
+    const imageNotSquareWarningDialog = document.getElementById('imageNotSquareWarning');
+    const previewImage = document.getElementById('previewImage');
+    const selectImageButton = document.getElementById('selectImageButton');
+    const fileName = document.getElementById('fileName');
+    const selectImageInput = document.getElementById('selectImageInput');
+
+    /// Options Side
+    const createPaddingCheckbox = document.getElementById('createPaddingCheckbox');
+    const IncludePinBackgroundCheckbox = document.getElementById('pinBackground');
+    const pinColorPickerOption = document.getElementById('pinColorPickerOption');
+    const pinColorText = document.getElementById('pinColorText');
+    const pinColorInput = document.getElementById('pinColorInput');
+
+    const generateTemplateButton = document.getElementById("generateTemplateButton")
+
+// image Grid 
 const imageContainer = document.getElementById('imageContainer');
-const previewImage = document.getElementById('previewImage');
-const imageNotSquareWarningDialog = document.getElementById('imageNotSquareWarning');
-const selectImageButton = document.getElementById('selectImageButton');
-const fileName = document.getElementById('fileName');
-const createPaddingCheckbox = document.getElementById('createPaddingCheckbox');
-const IncludePinBackgroundCheckbox = document.getElementById('pinBackground');
-const pinColorPickerOption = document.getElementById('pinColorPickerOption');
-
 
-const pinColorText = document.getElementById('pinColorText');
-const pinColor = document.getElementById('pinColor');
-
-const delay = (ms) => new Promise(resolve => setTimeout(resolve, ms));
+// Set default values
 
 if (localStorage.getItem("includePinPadding")) {
     createPaddingCheckbox.checked = localStorage.getItem("includePinPadding")
 }
-createPaddingCheckbox.addEventListener('change', () => {
-    localStorage.setItem("includePinPadding", createPaddingCheckbox.checked);
-});
 
 if (localStorage.getItem("pinBackground")) {
     setPrintBackgroundColor(localStorage.getItem("pinBackground"));
 }
 
-
 if (localStorage.getItem("includePinBackground") && localStorage.getItem("includePinBackground") === "true") {
     IncludePinBackgroundCheckbox.checked = (localStorage.getItem("includePinBackground"));
     pinColorPickerOption.classList.remove('disabled');
 }
 
+// Add event listeners 
 
-function createImageGrid() {
-    imageContainer.innerHTML = "";
+previewImage.addEventListener("click", function () {
+    selectImageInput.click();
+});
 
-    if (isImageUploaded()) {
-        const imageUrl = URL.createObjectURL(selectImageInput.files[0]);
-
-        // Create the grid of images
-        for (let row = 0; row < 6; row++) {
-            const imgRow = document.createElement("div");
-            imgRow.classList.add("imageRow");
-
-            for (let col = 0; col < 4; col++) {
-                const imgElement = document.createElement('img');
-                imgElement.src = imageUrl;
-                imgElement.alt = 'Duplicated Image';
-                imgElement.classList = ['pinImage'];
-
-                if (createPaddingCheckbox.checked) {
-                    imgElement.classList.add('pinImageWithPadding');
-                }
-                if (IncludePinBackgroundCheckbox.checked) {
-                    imgElement.classList.add('pinImageWithBackground');
-                }
-                imgRow.appendChild(imgElement);
-            }
-            imageContainer.appendChild(imgRow);
-        };
+selectImageButton.addEventListener("click", function () {
+    selectImageInput.click();
+});
 
-    };
-};
+selectImageInput.addEventListener("change", uploadedImageChanged);
 
-function uploadedImageChanged() {
-    changeFileName();
-    setImagePreview();
 
-    setTimeout(warnImageIsNotSquare, 100);
-};
+createPaddingCheckbox.addEventListener('change', () => {
+    localStorage.setItem("includePinPadding", createPaddingCheckbox.checked);
+});
 
-function changeFileName() {
-    const fileName = selectImageInput.files[0].name;
-    document.getElementById('fileName').innerHTML = fileName;
-};
+IncludePinBackgroundCheckbox.addEventListener('change', function(){
+    setIncludePinBackground(IncludePinBackgroundCheckbox.checked);
+});
 
-function warnImageIsNotSquare() {
-    if (imageIsSquare()) {
-        disableWarning();
-    } else{
-        showWarning("Image is not square");
-    }
-};
+pinColorText.addEventListener('click', () =>{
+    pinColorInput.click();
+});
+
+pinColorInput.addEventListener('input', () =>{
+    setPrintBackgroundColor(pinColorInput.value);
+});
+
+generateTemplateButton.addEventListener("click", function(){
+    if (isImageUploaded()) window.print();
+    else alert("Please upload an image first.");
+});
+
+// Unspecific functions
 
 function showWarning(message){
     imageNotSquareWarningDialog.querySelector('p').innerHTML = message;
     imageNotSquareWarningDialog.style.top = "0";
-
 }
 
 function disableWarning() {
@@ -96,68 +79,65 @@ function disableWarning() {
 }
 
 
-function imageIsSquare() {
-    const image = previewImage;
+// Funcitons
 
-    if (image.naturalWidth === image.naturalHeight) {
-        return true;
-    }
-    return false;
-}
-
-function setImagePreview() {
-    if (selectImageInput.files.length > 0) {
-        const imageUrl = URL.createObjectURL(selectImageInput.files[0]);
-        previewImage.src = imageUrl
-
-        createImageGrid(); // has to be here. if placed before print, the grid will not load in time for print
-    }
-}
+function createImageGrid() {
+    imageContainer.innerHTML = "";
 
-function setPrintBackgroundColor(color) {
-    document.body.style.setProperty('--printBackgroundColor', color);
-    localStorage.setItem("pinBackground", color);
-    pinColorText.innerHTML = color;
-}
+    if (isImageUploaded()) throw new Error("No image uploaded");
 
-function isImageUploaded(){
-    if (selectImageInput.files.length > 0) {
-        return true;
-    } 
-    return false;
-}
+    const imageUrl = URL.createObjectURL(selectImageInput.files[0]);
+    for (let row = 0; row < 6; row++) {
+        const imgRow = document.createElement("div");
+        imgRow.classList.add("imageRow");
 
-selectImageButton.addEventListener("click", function () {
-    selectImageInput.click();
-});
+        for (let col = 0; col < 4; col++) {
+            const imgElement = `
+            <img src="${imageUrl}" 
+                alt="Duplicated Image" 
+                class = "pinImage ${createPaddingCheckbox.checked ? 'pinImageWithPadding' : ''} ${IncludePinBackgroundCheckbox.checked ? 'pinImageWithBackground' : ''}"
+            />`;
 
-previewImage.addEventListener("click", function () {
-    selectImageInput.click();
-});
+            imgRow.innerHTML += imgElement;
+            
+        }
+        imageContainer.appendChild(imgRow);
+    };
+};
 
-selectImageInput.addEventListener("change", uploadedImageChanged);
+function uploadedImageChanged() {
+    changeFileName();
+    previewImage.src = URL.createObjectURL(selectImageInput.files[0])
+    createImageGrid(); // has to be here. if placed before print, the grid will not load in time for print
 
+    setTimeout(warnImageIsNotSquare, 100);
+};
 
-generateTemplateButton.addEventListener("click", function(){
-    if (isImageUploaded()){
-        window.print();
-    } else {
-        alert("Please upload an image first.");}
-});
 
 
+function isImageUploaded(){
+    if (selectImageInput.files.length > 0)return true;
+    return false;
+}
 
+function warnImageIsNotSquare() {
+    if (previewImage.naturalWidth === previewImage.naturalHeight) { // checks if image is square
+        disableWarning();
+    } else{
+        showWarning("Image is not square");
+    }
+};
 
+function changeFileName() {
+    const fileName = selectImageInput.files[0].name;
+    fileName.innerHTML = fileName;
+};
 
-IncludePinBackgroundCheckbox.addEventListener('change', function(){
-    setIncludePinBackground(IncludePinBackgroundCheckbox.checked);
-});
 
 function setIncludePinBackground(input){
     if (input){
         pinColorPickerOption.classList.remove('disabled');
         previewImage.classList.add('pinImageWithBackground');
-        
         localStorage.setItem("includePinBackground", true);
     } else {
         pinColorPickerOption.classList.add('disabled');
@@ -166,20 +146,8 @@ function setIncludePinBackground(input){
     }
 }
 
-pinColorText.addEventListener('click', () =>{
-    pinColor.click();
-});
-
-pinColor.addEventListener('input', () =>{
-    setPrintBackgroundColor(pinColor.value);
-});
-
-
-
-createPaddingCheckbox.addEventListener('change', function(){
-    if (createPaddingCheckbox.checked){
-        document.body.classList.add('padding');
-    } else {
-        document.body.classList.remove('padding');
-    }
-});
\ No newline at end of file
+function setPrintBackgroundColor(color) {
+    document.body.style.setProperty('--printBackgroundColor', color);
+    localStorage.setItem("pinBackground", color);
+    pinColorText.innerHTML = color;
+}
\ No newline at end of file