diff --git a/.idea/config/applicationhost.config b/.idea/config/applicationhost.config
index 175860584ece02bbf276b4eeaaabf2f8c0576d5d..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\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 c20ab103f26f4b76c3f7c7c8bd2dea59782b8ce7..7893138aacbde025c88a0df1d099807332acfb0b 100644
--- a/CI-ColorWebs/Pages/Index.cshtml
+++ b/CI-ColorWebs/Pages/Index.cshtml
@@ -4,20 +4,29 @@
     ViewData["Title"] = "Home page";
 }
 <style>
+
  body {
-   background-image: url("https://c8.alamy.com/comp/2D1P4N9/background-with-dotted-pattern-at-the-cornerswhite-backdrop-with-black-dotscirclesraster-modern-optical-pop-art-texture-for-posters-business-cards-2D1P4N9.jpg");
+ 
+   /* background-image: url("https://c8.alamy.com/comp/2D1P4N9/background-with-dotted-pattern-at-the-cornerswhite-backdrop-with-black-dotscirclesraster-modern-optical-pop-art-texture-for-posters-business-cards-2D1P4N9.jpg");
    background-position: 50% 50%;
    background-repeat: repeat;
+   
+    Commented out Akhil's previous code */
+   
  }
-</style>
+</style> 
 <script>src = 'site.js'</script>
 <div class="text-center">
-    <h1 class="display-4">Welcome</h1>
+    <div class = gifDiv>
+        <h1 class="introHeader">Welcome to Color Palette Generator!</h1>
+        <h2 class="introHeaderBelow">Inspiration Awaits!</h2>
+    </div>
     <h2>
-        <button id="genNew">Generate New Random Color</button>
+        <p class = "genPaletteInstructions">Click on the palette below to generate random colors</p>
+        <button id="genNew" class="button"></button>
         <br>
         <br>
-        <span id="palName"></span>
+        <span id="palName" class = "paletteName"></span>
         <br>
         <br>
         <span id="color"></span>
@@ -26,15 +35,15 @@
         <span id="color4"></span>
         <span id="color5"></span>
         <span id="color6"></span>
-        <canvas width = "700"></canvas>
+        <canvas width="700"></canvas>
     </h2>
     <h3>
         <p>View your pallete visualized through AI art:</p>
         <span id="linkai"></span>
     </h3>
-<h8>
-    <p>(Keep in mind AI art is not perfect and it may take a couple of tries before you get a result you like)</p>
-</h8>
+    <h8>
+        <p>(Keep in mind AI art is not perfect and it may take a couple of tries before you get a result you like)</p>
+    </h8>
 </div>
 
 
diff --git a/CI-ColorWebs/wwwroot/css/site.css b/CI-ColorWebs/wwwroot/css/site.css
index 5386bae8d72b5c98dc14fd888bf8cb88944b3b2b..d66090735e95224e2e0faca071ba5d023a820d9b 100644
--- a/CI-ColorWebs/wwwroot/css/site.css
+++ b/CI-ColorWebs/wwwroot/css/site.css
@@ -121,3 +121,70 @@ body {
   font-weight: 400;
   font-family: "Aileron", sans-serif;
 }
+
+.introHeader {
+  text-align: center;
+  font-size: 95px;
+  letter-spacing: 3px;
+  font-weight: bold;
+  margin-bottom: 105px;
+  margin-top: 150px;
+  color: #30332E;
+  
+}
+
+.introHeaderBelow{
+  text-align: center;
+  font-size: 40px;
+  letter-spacing: 2px;
+  font-weight: normal;
+  margin-bottom: 175px;
+  
+  color: #30332E;
+}
+
+.gifDiv{
+  background-image:url("https://media.giphy.com/media/v1.Y2lkPTc5MGI3NjExOWY4MDA3YmQ1OGY5OTBmZDYwNTlkMjVkYjI3ODIyMzJhZDhlMjNlNCZlcD12MV9pbnRlcm5hbF9naWZzX2dpZklkJmN0PWc/LriNaxs61RKYMlrZuY/giphy.gif"); 
+  background-repeat: round;
+  background-size: contain;
+  
+}
+
+.button{
+  padding: 100px 100px;
+  border-radius: 12px;
+  background-image: url("https://www.pngmart.com/files/9/Paint-Palette-PNG-Free-Download.png");
+  background-repeat: round;
+  color: black;
+  font-weight: bold;
+  text-align: center;
+  background-color: white;
+  border: 0 solid white;
+  
+}
+
+.button:hover{
+  box-shadow: 8px 8px lightgray;
+  transition: .7s;
+
+}
+
+.genPaletteInstructions{
+  margin-top: 100px;
+  margin-bottom: 150px;
+  color: #30332E;
+  text-align: center;
+  font-size: 30px;
+  font-weight: lighter;
+  font-style: oblique;
+}
+
+.paletteName{
+  font-weight: 500;
+  font-size: 30px;
+  color: #30332E;
+  margin-top: 200px;
+  margin-bottom: 200px;
+  text-align: center;
+  
+}