diff --git a/.idea/config/applicationhost.config b/.idea/config/applicationhost.config
index a8fdd992d05675a6169cc9616744c29c0b5150d4..7d6c45fff07e0dc01762183d046f91439e920f44 100644
--- a/.idea/config/applicationhost.config
+++ b/.idea/config/applicationhost.config
@@ -156,7 +156,7 @@
       <virtualDirectoryDefaults allowSubDirConfig="true" />
       <site name="CI-ColorWebs" id="1">
         <application path="/" applicationPool="CI-ColorWebs AppPool">
-          <virtualDirectory path="/" physicalPath="C:\Users\aidan\OneDrive\Documents\GitHub\color-website2\CI-ColorWebs" />
+          <virtualDirectory path="/" physicalPath="C:\Users\Jagroop\Desktop\Ci IDE folder\color-website\CI-ColorWebs" />
         </application>
         <bindings>
           <binding protocol="http" bindingInformation="*:23781:localhost" />
diff --git a/CI-ColorWebs/Pages/Index.cshtml b/CI-ColorWebs/Pages/Index.cshtml
index 8a4e9066d6a98a85dd4d18572cd1927667cdd27f..e0af301ca0715ff5297e9521b7aab956253a8aa7 100644
--- a/CI-ColorWebs/Pages/Index.cshtml
+++ b/CI-ColorWebs/Pages/Index.cshtml
@@ -26,7 +26,7 @@ function copyHex(celement) {
 
     document.execCommand('copy');
     document.body.removeChild(input);
-    alert('Copied: ' + celement.innerText);
+    
 }
 </script>
 
@@ -43,13 +43,26 @@ function copyHex(celement) {
         <span id="palName" class = "paletteName"></span>
         <br>
         <br>
-        <button id="color" onclick="copyHex(color)"></button>
-        <button id="color2" onclick="copyHex(color2)"></button>
-        <button id="color3" onclick="copyHex(color3)"></button>
-        <button id="color4" onclick="copyHex(color4)"></button>
-        <button id="color5" onclick="copyHex(color5)"></button>
-        <button id="color6" onclick="copyHex(color6)"></button>
-        <canvas width="700" ></canvas>
+        <div class="hexDiv">
+            <script>
+                $(".hexcodeStyle").on("click", function () {
+                
+                $(".hexCodeStyle").removeClass("active");
+                
+                $(this).addClass("active");
+                
+                });
+
+            </script>
+            <button id="color" onclick="copyHex(color)" class="hexcodeStyle"></button>
+            <button id="color2" onclick="copyHex(color2)" class="hexcodeStyle"></button>
+            <button id="color3" onclick="copyHex(color3)" class="hexcodeStyle"></button>
+            <button id="color4" onclick="copyHex(color4)" class="hexcodeStyle"></button>
+            <button id="color5" onclick="copyHex(color5)" class="hexcodeStyle"></button>
+            <button id="color6" onclick="copyHex(color6)" class="hexcodeStyle"></button>
+
+        </div>
+        <canvas width="1000" height="500"></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 d66090735e95224e2e0faca071ba5d023a820d9b..12fc15d02b98d6707cdffa1e96683e3c435f9ca2 100644
--- a/CI-ColorWebs/wwwroot/css/site.css
+++ b/CI-ColorWebs/wwwroot/css/site.css
@@ -181,10 +181,67 @@ body {
 
 .paletteName{
   font-weight: 500;
-  font-size: 30px;
+  font-size: 35px;
   color: #30332E;
   margin-top: 200px;
   margin-bottom: 200px;
   text-align: center;
   
+  
+}
+
+.hexDiv {
+  width: 1000px;
+  display: flex;
+  flex-direction: row;
+  justify-content: space-evenly;
+  /*border: solid 2px black;*/
+  margin-left: 150px;
+  margin-bottom: 15px;
+}
+
+.hexcodeStyle {
+  font-size: 30px;
+  font-weight: normal;
+  margin-right: 15px;
+  margin-left: 8px;
+  text-align: center;
+  background-color: white;
+  position: relative;
+}
+
+
+.hexcodeStyle:before {
+  --scale: 0;
+  
+  position: absolute;
+  
+  top: -.25rem;
+  left: 50%;
+  padding: .3rem;
+  width: max-content;
+  background: lightgray;
+  transform: translateX(-50%) translateY(-100%) scale(var(--scale));
+  border-radius: .3rem;
+  text-align: center;
+  color: black;
+  font-size: 12px;
+  transition: 100ms;
+  transform-origin: bottom center;
+}
+
+.hexcodeStyle:hover::before{
+  --scale: 1;
+  content: 'Copy color';
+  
 }
+
+.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 d107aa2864052bf5507853de68b1e7b6c638bf30..4c2de82ed672b84cb91c0223649d9257502b4021 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, 116, 150);
+    context.fillRect(0, 0, 166, 500);
     document.getElementById("color").style.color = "#" + ranColor[0];
     color2.innerHTML = "#" + ranColor[1];
     context.fillStyle = '#' +ranColor[1];
-    context.fillRect(116, 0, 116, 150);
+    context.fillRect(166, 0, 166, 500);
     document.getElementById("color2").style.color = "#" + ranColor[1];
     color3.innerHTML = "#" + ranColor[2];
     context.fillStyle = '#' +ranColor[2];
-    context.fillRect(232, 0, 116, 150);
+    context.fillRect(332, 0, 166, 500);
     document.getElementById("color3").style.color = "#" + ranColor[2];
     color4.innerHTML = "#" + ranColor[3];
     context.fillStyle = '#' +ranColor[3];
-    context.fillRect(348, 0, 116, 150);
+    context.fillRect(498, 0, 166, 500);
     document.getElementById("color4").style.color = "#" + ranColor[3];
     color5.innerHTML = "#" + ranColor[4];
     context.fillStyle = '#' +ranColor[4];
-    context.fillRect(464, 0, 116, 150);
+    context.fillRect(664, 0, 166, 500);
     document.getElementById("color5").style.color = "#" + ranColor[4];
     color6.innerHTML = "#" + ranColor[5];
     context.fillStyle = '#' +ranColor[5];
-    context.fillRect(580, 0, 116, 150);
+    context.fillRect(830, 0, 166, 500);
     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>";
@@ -47,3 +47,13 @@ const cre = () => {
 
 genNew.addEventListener("click", cre);
 cre();
+
+
+$(document).ready(function() {
+    $('.hexcodeStyle').click(function() {
+        $(this).addClass('active');
+        setTimeout(function(){
+            $('.active').removeClass('active');
+        },2000);
+    });
+});