diff --git a/.gitignore b/.gitignore
index d742a1f..17197ae 100644
--- a/.gitignore
+++ b/.gitignore
@@ -9,6 +9,7 @@ dist/
 build/
 *.min.css
 *.min.js
+styles/main.css
 
 # Environment variables
 .env
diff --git a/assets/images/first_homepage.jpg b/assets/images/first_homepage.jpg
new file mode 100644
index 0000000..f88db7d
Binary files /dev/null and b/assets/images/first_homepage.jpg differ
diff --git a/index.html b/index.html
index 829291a..b811292 100644
--- a/index.html
+++ b/index.html
@@ -95,61 +95,39 @@
 
     <main>
       <!-- Hero Section -->
-      <section
-        class="bg-gradient-to-br from-blue-600 to-purple-700 text-white text-center py-16 min-h-[60vh] flex items-center"
-      >
-        <div class="max-w-6xl mx-auto px-5">
-          <h1 class="text-5xl font-light mb-4">Welcome to KHY</h1>
-          <p class="text-xl mb-8 opacity-90">
-            Professional services and innovative solutions for your business
-          </p>
-          <button
-            class="bg-white text-blue-600 hover:bg-gray-100 px-8 py-4 text-lg rounded-lg transition-colors font-medium"
-          >
-            Get Started
-          </button>
+      <section class="relative h-screen mt-28">
+        <!-- Background Image -->
+        <div class="absolute inset-0 w-full h-full">
+          <img
+            src="assets/images/first_homepage.jpg"
+            alt="Modern interior design space"
+            class="w-full h-full object-cover object-top"
+          />
         </div>
-      </section>
 
-      <!-- Services Section -->
-      <section class="py-16 bg-white">
-        <div class="max-w-6xl mx-auto px-5">
-          <h2 class="text-4xl font-light text-center text-gray-800 mb-8">
-            Our Services
-          </h2>
-          <div class="grid grid-cols-1 md:grid-cols-3 gap-8 mt-12">
-            <div
-              class="bg-white p-8 rounded-lg shadow-lg text-center hover:-translate-y-1 transition-transform"
+        <!-- Overlay Content -->
+        <div
+          class="absolute z-10 inset-0 flex items-start justify-center pt-32 md:pt-40 lg:pt-48 -pr-2 md:pr-0 lg:pr-2 text-center text-dark-charcoal"
+        >
+          <h1
+            class="font-playfair font-light text-3xl md:text-4xl lg:text-5xl leading-tight tracking-wider"
+          >
+            Redefining the Artistry of<br />
+            <span class="font-normal">Furniture</span>
+          </h1>
+        </div>
+        <!-- Crafting Spaces Text -->
+        <div
+          class="absolute z-10 left-1/2 transform -translate-x-1/2 top-80 md:top-[24rem] lg:top-[29rem]"
+        >
+          <div
+            class="inline-block bg-black bg-opacity-70 text-white px-6 py-2 rounded-xl text-center"
+          >
+            <p
+              class="font-playfair font-light text-xl md:text-2xl lg:text-3xl leading-tight tracking-wider"
             >
-              <h3 class="text-2xl font-semibold text-gray-800 mb-4">
-                Professional Consulting
-              </h3>
-              <p class="text-gray-600">
-                Expert guidance and strategic solutions for your business
-                challenges.
-              </p>
-            </div>
-            <div
-              class="bg-white p-8 rounded-lg shadow-lg text-center hover:-translate-y-1 transition-transform"
-            >
-              <h3 class="text-2xl font-semibold text-gray-800 mb-4">
-                Project Management
-              </h3>
-              <p class="text-gray-600">
-                Comprehensive project management services to ensure successful
-                delivery.
-              </p>
-            </div>
-            <div
-              class="bg-white p-8 rounded-lg shadow-lg text-center hover:-translate-y-1 transition-transform"
-            >
-              <h3 class="text-2xl font-semibold text-gray-800 mb-4">
-                Client Support
-              </h3>
-              <p class="text-gray-600">
-                Dedicated support and maintenance for all your business needs.
-              </p>
-            </div>
+              crafting spaces that feel like home
+            </p>
           </div>
         </div>
       </section>
diff --git a/styles/main.css b/styles/main.css
index a5a8398..7742f84 100644
--- a/styles/main.css
+++ b/styles/main.css
@@ -554,22 +554,38 @@ video {
   display: none;
 }
 
-.static {
-  position: static;
-}
-
 .absolute {
   position: absolute;
 }
 
+.relative {
+  position: relative;
+}
+
+.inset-0 {
+  inset: 0px;
+}
+
 .left-0 {
   left: 0px;
 }
 
+.left-1\/2 {
+  left: 50%;
+}
+
 .top-0 {
   top: 0px;
 }
 
+.top-80 {
+  top: 20rem;
+}
+
+.z-10 {
+  z-index: 10;
+}
+
 .z-50 {
   z-index: 50;
 }
@@ -579,26 +595,18 @@ video {
   margin-right: auto;
 }
 
-.mb-4 {
-  margin-bottom: 1rem;
+.mt-28 {
+  margin-top: 7rem;
 }
 
-.mb-8 {
-  margin-bottom: 2rem;
-}
-
-.mt-12 {
-  margin-top: 3rem;
+.inline-block {
+  display: inline-block;
 }
 
 .flex {
   display: flex;
 }
 
-.grid {
-  display: grid;
-}
-
 .h-16 {
   height: 4rem;
 }
@@ -611,8 +619,8 @@ video {
   height: 100%;
 }
 
-.min-h-\[60vh\] {
-  min-height: 60vh;
+.h-screen {
+  height: 100vh;
 }
 
 .w-auto {
@@ -631,20 +639,29 @@ video {
   max-width: 80rem;
 }
 
-.grid-cols-1 {
-  grid-template-columns: repeat(1, minmax(0, 1fr));
+.-translate-x-1\/2 {
+  --tw-translate-x: -50%;
+  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+}
+
+.transform {
+  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+}
+
+.items-start {
+  align-items: flex-start;
 }
 
 .items-center {
   align-items: center;
 }
 
-.justify-between {
-  justify-content: space-between;
+.justify-center {
+  justify-content: center;
 }
 
-.gap-8 {
-  gap: 2rem;
+.justify-between {
+  justify-content: space-between;
 }
 
 .space-x-10 > :not([hidden]) ~ :not([hidden]) {
@@ -653,8 +670,13 @@ video {
   margin-left: calc(2.5rem * calc(1 - var(--tw-space-x-reverse)));
 }
 
-.rounded-lg {
-  border-radius: 0.5rem;
+.rounded-xl {
+  border-radius: 0.75rem;
+}
+
+.bg-black {
+  --tw-bg-opacity: 1;
+  background-color: rgb(0 0 0 / var(--tw-bg-opacity, 1));
 }
 
 .bg-gray-50 {
@@ -667,32 +689,23 @@ video {
   background-color: rgb(31 41 55 / var(--tw-bg-opacity, 1));
 }
 
-.bg-red-500 {
-  --tw-bg-opacity: 1;
-  background-color: rgb(239 68 68 / var(--tw-bg-opacity, 1));
-}
-
 .bg-white {
   --tw-bg-opacity: 1;
   background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
 }
 
-.bg-gradient-to-br {
-  background-image: linear-gradient(to bottom right, var(--tw-gradient-stops));
+.bg-opacity-70 {
+  --tw-bg-opacity: 0.7;
 }
 
-.from-blue-600 {
-  --tw-gradient-from: #2563eb var(--tw-gradient-from-position);
-  --tw-gradient-to: rgb(37 99 235 / 0) var(--tw-gradient-to-position);
-  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
+.object-cover {
+  -o-object-fit: cover;
+     object-fit: cover;
 }
 
-.to-purple-700 {
-  --tw-gradient-to: #7e22ce var(--tw-gradient-to-position);
-}
-
-.p-8 {
-  padding: 2rem;
+.object-top {
+  -o-object-position: top;
+     object-position: top;
 }
 
 .px-5 {
@@ -700,19 +713,14 @@ video {
   padding-right: 1.25rem;
 }
 
-.px-8 {
-  padding-left: 2rem;
-  padding-right: 2rem;
+.px-6 {
+  padding-left: 1.5rem;
+  padding-right: 1.5rem;
 }
 
-.py-16 {
-  padding-top: 4rem;
-  padding-bottom: 4rem;
-}
-
-.py-4 {
-  padding-top: 1rem;
-  padding-bottom: 1rem;
+.py-2 {
+  padding-top: 0.5rem;
+  padding-bottom: 0.5rem;
 }
 
 .py-8 {
@@ -720,6 +728,10 @@ video {
   padding-bottom: 2rem;
 }
 
+.pt-32 {
+  padding-top: 8rem;
+}
+
 .text-center {
   text-align: center;
 }
@@ -732,24 +744,9 @@ video {
   font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
 }
 
-.text-2xl {
-  font-size: 1.5rem;
-  line-height: 2rem;
-}
-
-.text-4xl {
-  font-size: 2.25rem;
-  line-height: 2.5rem;
-}
-
-.text-5xl {
-  font-size: 3rem;
-  line-height: 1;
-}
-
-.text-lg {
-  font-size: 1.125rem;
-  line-height: 1.75rem;
+.text-3xl {
+  font-size: 1.875rem;
+  line-height: 2.25rem;
 }
 
 .text-xl {
@@ -765,12 +762,12 @@ video {
   font-weight: 300;
 }
 
-.font-semibold {
-  font-weight: 600;
+.font-normal {
+  font-weight: 400;
 }
 
-.font-medium {
-  font-weight: 500;
+.leading-tight {
+  line-height: 1.25;
 }
 
 .tracking-wider {
@@ -782,9 +779,9 @@ video {
   color: rgb(0 0 0 / var(--tw-text-opacity, 1));
 }
 
-.text-gray-600 {
+.text-dark-charcoal {
   --tw-text-opacity: 1;
-  color: rgb(75 85 99 / var(--tw-text-opacity, 1));
+  color: rgb(47 47 47 / var(--tw-text-opacity, 1));
 }
 
 .text-gray-800 {
@@ -797,15 +794,6 @@ video {
   color: rgb(255 255 255 / var(--tw-text-opacity, 1));
 }
 
-.text-blue-600 {
-  --tw-text-opacity: 1;
-  color: rgb(37 99 235 / var(--tw-text-opacity, 1));
-}
-
-.opacity-90 {
-  opacity: 0.9;
-}
-
 .shadow-lg {
   --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
   --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
@@ -823,34 +811,55 @@ video {
   transition-duration: 150ms;
 }
 
-.transition-transform {
-  transition-property: transform;
-  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
-  transition-duration: 150ms;
-}
-
-.hover\:-translate-y-1:hover {
-  --tw-translate-y: -0.25rem;
-  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
-}
-
-.hover\:bg-red-600:hover {
-  --tw-bg-opacity: 1;
-  background-color: rgb(220 38 38 / var(--tw-bg-opacity, 1));
-}
-
-.hover\:bg-gray-100:hover {
-  --tw-bg-opacity: 1;
-  background-color: rgb(243 244 246 / var(--tw-bg-opacity, 1));
-}
-
 .hover\:text-gray-600:hover {
   --tw-text-opacity: 1;
   color: rgb(75 85 99 / var(--tw-text-opacity, 1));
 }
 
 @media (min-width: 768px) {
-  .md\:grid-cols-3 {
-    grid-template-columns: repeat(3, minmax(0, 1fr));
+  .md\:top-\[24rem\] {
+    top: 24rem;
+  }
+
+  .md\:pr-0 {
+    padding-right: 0px;
+  }
+
+  .md\:pt-40 {
+    padding-top: 10rem;
+  }
+
+  .md\:text-2xl {
+    font-size: 1.5rem;
+    line-height: 2rem;
+  }
+
+  .md\:text-4xl {
+    font-size: 2.25rem;
+    line-height: 2.5rem;
+  }
+}
+
+@media (min-width: 1024px) {
+  .lg\:top-\[29rem\] {
+    top: 29rem;
+  }
+
+  .lg\:pr-2 {
+    padding-right: 0.5rem;
+  }
+
+  .lg\:pt-48 {
+    padding-top: 12rem;
+  }
+
+  .lg\:text-3xl {
+    font-size: 1.875rem;
+    line-height: 2.25rem;
+  }
+
+  .lg\:text-5xl {
+    font-size: 3rem;
+    line-height: 1;
   }
 }
diff --git a/tailwind.config.js b/tailwind.config.js
index 05e2183..3fa2564 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -7,6 +7,33 @@ module.exports = {
         montserrat: ["Montserrat", "sans-serif"],
         playfair: ["Playfair Display", "serif"],
       },
+      colors: {
+        white: "#FFFFFF",
+        "dark-charcoal": "#2F2F2F",
+        black: "#000000",
+        "uc-gold": "#B8873F",
+        "floral-white": "#FBF9F3",
+        axolotl: "#6F776B",
+        "dark-charcoal-ii": "#212121",
+        "eerie-black": "#1A1A1A",
+        "taupe-gray": "#888888",
+        "davys-grey": "#595959",
+        "granite-gray": "#666666",
+        "light-silver": "#D7D7D7",
+        "quick-silver": "#A0A0A0",
+        linen: "#FAF0E6",
+      },
+      spacing: {
+        396: "396px",
+        398: "398px",
+        420: "420px",
+        259: "259px",
+        649: "649px",
+        183: "183px",
+        150: "150px",
+        100: "100px",
+        120: "120px",
+      },
       textShadow: {
         default: "0 2px 4px rgba(0,0,0,0.1)",
         lg: "2px 2px 4px rgba(0,0,0,0.3)",