diff --git a/CI-ColorWebs/Pages/Index.cshtml b/CI-ColorWebs/Pages/Index.cshtml
index e0af301ca0715ff5297e9521b7aab956253a8aa7..38cb731ea7ed25f114963f9ff817dac449730854 100644
--- a/CI-ColorWebs/Pages/Index.cshtml
+++ b/CI-ColorWebs/Pages/Index.cshtml
@@ -26,8 +26,10 @@ function copyHex(celement) {
 
     document.execCommand('copy');
     document.body.removeChild(input);
-    
+
 }
+
+
 </script>
 
 <div class="text-center">
@@ -62,7 +64,7 @@ function copyHex(celement) {
             <button id="color6" onclick="copyHex(color6)" class="hexcodeStyle"></button>
 
         </div>
-        <canvas width="1000" height="500"></canvas>
+        <canvas width="1000" height="200"></canvas>
     </h2>
     <h3>
         <p>View your pallete visualized through AI art:</p>
diff --git a/CI-ColorWebs/wwwroot/css/site.css b/CI-ColorWebs/wwwroot/css/site.css
index 12fc15d02b98d6707cdffa1e96683e3c435f9ca2..a0e5b379e65f5608f5e514c43c9e47fd4607e50d 100644
--- a/CI-ColorWebs/wwwroot/css/site.css
+++ b/CI-ColorWebs/wwwroot/css/site.css
@@ -208,6 +208,7 @@ body {
   text-align: center;
   background-color: white;
   position: relative;
+  border: white solid 0;
 }
 
 
@@ -239,9 +240,9 @@ body {
 .hexcodeStyle:active::before{
   
   content: 'Copied!';
-  animation-delay: 500ms;
-  
 }
 
 
 
+
+
diff --git a/CI-ColorWebs/wwwroot/js/site.js b/CI-ColorWebs/wwwroot/js/site.js
index 4c2de82ed672b84cb91c0223649d9257502b4021..b7bb2ef79b67555693421716f4e7162991668682 100644
--- a/CI-ColorWebs/wwwroot/js/site.js
+++ b/CI-ColorWebs/wwwroot/js/site.js
@@ -18,27 +18,27 @@ const cre = () => {
     document.getElementById("palName").style.fontSize = "xx-large";
     color.innerHTML = "#" + ranColor[0];
     context.fillStyle = '#' +ranColor[0];
-    context.fillRect(0, 0, 166, 500);
+    context.fillRect(0, 0, 166, 200);
     document.getElementById("color").style.color = "#" + ranColor[0];
     color2.innerHTML = "#" + ranColor[1];
     context.fillStyle = '#' +ranColor[1];
-    context.fillRect(166, 0, 166, 500);
+    context.fillRect(166, 0, 166, 200);
     document.getElementById("color2").style.color = "#" + ranColor[1];
     color3.innerHTML = "#" + ranColor[2];
     context.fillStyle = '#' +ranColor[2];
-    context.fillRect(332, 0, 166, 500);
+    context.fillRect(332, 0, 166, 200);
     document.getElementById("color3").style.color = "#" + ranColor[2];
     color4.innerHTML = "#" + ranColor[3];
     context.fillStyle = '#' +ranColor[3];
-    context.fillRect(498, 0, 166, 500);
+    context.fillRect(498, 0, 166, 200);
     document.getElementById("color4").style.color = "#" + ranColor[3];
     color5.innerHTML = "#" + ranColor[4];
     context.fillStyle = '#' +ranColor[4];
-    context.fillRect(664, 0, 166, 500);
+    context.fillRect(664, 0, 166, 200);
     document.getElementById("color5").style.color = "#" + ranColor[4];
     color6.innerHTML = "#" + ranColor[5];
     context.fillStyle = '#' +ranColor[5];
-    context.fillRect(830, 0, 166, 500);
+    context.fillRect(830, 0, 166, 200);
     document.getElementById("color6").style.color = "#" + ranColor[5];
     ailink = "?prompt=flower%20color(" + ranColor[0]+",%20" + ranColor[1]+ ",%20"+ ranColor[2]+ ",%20"+ ranColor[3]+ ",%20"+ ranColor[4]+ ",%20"+ ranColor[5]+ ")%20painting";
     var link = "<a href='https://www.craiyon.com/" + ailink + "' target='_blank'>here</a>";
@@ -49,11 +49,4 @@ genNew.addEventListener("click", cre);
 cre();
 
 
-$(document).ready(function() {
-    $('.hexcodeStyle').click(function() {
-        $(this).addClass('active');
-        setTimeout(function(){
-            $('.active').removeClass('active');
-        },2000);
-    });
-});
+