diff --git a/public/images/footer.png b/public/images/footer.png
new file mode 100644
index 0000000..9449a68
Binary files /dev/null and b/public/images/footer.png differ
diff --git a/src/app/about-us/about.module.css b/src/app/about-us/about.module.css
index 3f09323..1199ee9 100644
--- a/src/app/about-us/about.module.css
+++ b/src/app/about-us/about.module.css
@@ -30,7 +30,7 @@
 
 .breadcrumb {
   font-size: 1.1rem;
-  color: #C5A059;
+  color: #c49c5c;
   font-family: var(--font-lato);
 }
 
@@ -96,7 +96,7 @@
 .sectionTitleCenter {
   font-family: var(--font-playfair);
   font-size: 3.5rem;
-  color: #C5A059;
+  color: #c49c5c;
   margin-bottom: 3rem;
   text-align: center;
   text-transform: uppercase;
@@ -117,14 +117,14 @@
   box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
   max-width: 100%;
   height: auto;
-  border: 4px solid #C5A059;
+  border: 2px solid #b07c4b
 }
 
 .menuButton {
   display: inline-block;
   padding: 15px 40px;
-  border: 2px solid #C5A059;
-  color: #C5A059;
+  border: 2px solid #b07c4b;
+  color: #c49c5c;
   font-family: var(--font-lato);
   font-size: 1.1rem;
   text-transform: uppercase;
@@ -136,7 +136,7 @@
 }
 
 .menuButton:hover {
-  background-color: #C5A059;
+  background-color: #c49c5c;
   color: #000;
 }
 
@@ -153,8 +153,8 @@
   background-color: #F5E6D3;
   padding: 2.5rem 2rem;
   text-align: center;
-  border: 4px solid #C5A059;
-  transition: transform 0.3s ease;
+  border: 2px solid #b07c4b;
+   transition: transform 0.3s ease;
 }
 
 .featureCard:hover {
@@ -168,7 +168,7 @@
   margin-bottom: 1.5rem;
   border-radius: 8px;
   overflow: hidden;
-  border: 2px solid #C5A059;
+  border: 2px solid #b07c4b;
 }
 
 .featureImage {
@@ -203,8 +203,8 @@
 
 .sliderBtn {
   background: transparent;
-  border: 2px solid #C5A059;
-  color: #C5A059;
+  border: 2px solid #b07c4b;
+  color: #c49c5c;
   font-size: 2.5rem;
   width: 50px;
   height: 50px;
@@ -217,15 +217,15 @@
 }
 
 .sliderBtn:hover {
-  background-color: #C5A059;
+  background-color: #c49c5c;
   color: #000;
 }
 
 .testimonialCard {
   background-color: #F5E6D3;
   padding: 3rem 2.5rem;
-  border: 4px solid #C5A059;
-  display: flex;
+  border: 2px solid #b07c4b;
+   display: flex;
   flex-direction: column;
   gap: 2rem;
   flex: 1;
@@ -254,7 +254,7 @@
   height: 70px;
   border-radius: 50%;
   overflow: hidden;
-  border: 3px solid #C5A059;
+  border: 3px solid #c49c5c;
   flex-shrink: 0;
 }
 
@@ -293,7 +293,7 @@
   height: 12px;
   border-radius: 50%;
   background: transparent;
-  border: 2px solid #C5A059;
+  border: 2px solid #b07c4b;
   cursor: pointer;
   transition: all 0.3s;
   padding: 0;
@@ -301,7 +301,7 @@
 
 .dot:hover,
 .activeDot {
-  background-color: #C5A059;
+  background-color: #c49c5c;
 }
 
 /* Call to Action Section */
@@ -320,13 +320,13 @@
   padding: 4rem 2rem;
   max-width: 800px;
   margin: 0 auto;
-  border: 4px solid #C5A059;
+  border: 2px solid #b07c4b
 }
 
 .ctaTitle {
   font-family: var(--font-playfair);
   font-size: 3rem;
-  color: #C5A059;
+  color: #c49c5c;
   margin-bottom: 1rem;
   text-transform: uppercase;
   letter-spacing: 2px;
@@ -342,8 +342,8 @@
 .ctaButton {
   display: inline-block;
   padding: 15px 40px;
-  border: 2px solid #C5A059;
-  color: #C5A059;
+  border: 2px solid #b07c4b;
+  color: #c49c5c;
   font-family: var(--font-lato);
   font-size: 1.1rem;
   text-transform: uppercase;
@@ -354,7 +354,7 @@
 }
 
 .ctaButton:hover {
-  background-color: #C5A059;
+  background-color: #c49c5c;
   color: #000;
 }
 
@@ -498,7 +498,7 @@
 
 .faqItem {
   background: #fff;
-  border: 2px solid #C5A059;
+  border: 2px solid #b07c4b;
   border-radius: 8px;
   overflow: hidden;
   transition: all 0.3s ease;
@@ -526,18 +526,18 @@
 }
 
 .faqQuestion:hover {
-  background-color: #C5A059;
+  background-color: #c49c5c;
 }
 
 .faqQuestionActive {
-  background-color: #C5A059;
+  background-color: #c49c5c;
   color: #fff;
 }
 
 .faqIcon {
   font-size: 1.5rem;
   font-weight: bold;
-  color: #C5A059;
+  color: #c49c5c;
   transition: transform 0.3s ease;
   flex-shrink: 0;
   margin-left: 1rem;
diff --git a/src/app/about-us/about_temp.css b/src/app/about-us/about_temp.css
index 0083cc0..1ed0327 100644
--- a/src/app/about-us/about_temp.css
+++ b/src/app/about-us/about_temp.css
@@ -30,7 +30,7 @@
 
 .breadcrumb {
   font-size: 1.1rem;
-  color: #C5A059;
+  color: #c49c5c;
   font-family: var(--font-lato);
 }
 
@@ -83,7 +83,7 @@
 .sectionTitle {
   font-family: var(--font-playfair);
   font-size: 3rem;
-  color: #C5A059;
+  color: #c49c5c;
   margin-bottom: 1.5rem;
   text-transform: uppercase;
   letter-spacing: 2px;
@@ -92,7 +92,7 @@
 .sectionTitleCenter {
   font-family: var(--font-playfair);
   font-size: 3.5rem;
-  color: #C5A059;
+  color: #c49c5c;
   margin-bottom: 3rem;
   text-align: center;
   text-transform: uppercase;
@@ -102,7 +102,7 @@
 .text {
   font-size: 1.1rem;
   line-height: 1.8;
-  color: #C5A059;
+  color: #c49c5c;
   margin-bottom: 1.5rem;
   opacity: 0.9;
   font-family: var(--font-lato);
@@ -113,14 +113,14 @@
   box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
   max-width: 100%;
   height: auto;
-  border: 4px solid #C5A059;
+  border: 2px solid #b07c4b
 }
 
 .menuButton {
   display: inline-block;
   padding: 15px 40px;
-  border: 2px solid #C5A059;
-  color: #C5A059;
+  border: 2px solid #b07c4b;
+  color: #c49c5c;
   font-family: var(--font-lato);
   font-size: 1.1rem;
   text-transform: uppercase;
@@ -132,7 +132,7 @@
 }
 
 .menuButton:hover {
-  background-color: #C5A059;
+  background-color: #c49c5c;
   color: #000;
 }
 
@@ -149,8 +149,8 @@
   background-color: #F5E6D3;
   padding: 2.5rem 2rem;
   text-align: center;
-  border: 4px solid #C5A059;
-  transition: transform 0.3s ease;
+  border: 2px solid #b07c4b;
+   transition: transform 0.3s ease;
 }
 
 .featureCard:hover {
@@ -164,5 +164,5 @@
   margin-bottom: 1.5rem;
   border-radius: 8px;
   overflow: hidden;
-  border: 2px solid #C5A059;
+  border: 2px solid #b07c4b;
 }
\ No newline at end of file
diff --git a/src/app/about/about.module.css b/src/app/about/about.module.css
index e9b2c7f..e787448 100644
--- a/src/app/about/about.module.css
+++ b/src/app/about/about.module.css
@@ -30,7 +30,7 @@
 
 .breadcrumb {
   font-size: 1.1rem;
-  color: #C5A059;
+  color: #c49c5c;
   font-family: var(--font-lato);
 }
 
@@ -96,7 +96,7 @@
 .sectionTitleCenter {
   font-family: var(--font-playfair);
   font-size: 3.5rem;
-  color: #C5A059;
+  color: #c49c5c;
   margin-bottom: 3rem;
   text-align: center;
   text-transform: uppercase;
@@ -106,7 +106,7 @@
 .text {
   font-size: 1.1rem;
   line-height: 1.8;
-  color: #5d4037;
+  /* color: #5d4037; */
   margin-bottom: 1.5rem;
   opacity: 0.9;
   font-family: var(--font-lato);
@@ -117,14 +117,14 @@
   box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
   max-width: 100%;
   height: auto;
-  border: 4px solid #C5A059;
+  border: 2px solid #b07c4b
 }
 
 .menuButton {
   display: inline-block;
   padding: 15px 40px;
-  border: 2px solid #C5A059;
-  color: #C5A059;
+  border: 2px solid #b07c4b;
+  color: #c49c5c;
   font-family: var(--font-lato);
   font-size: 1.1rem;
   text-transform: uppercase;
@@ -136,7 +136,7 @@
 }
 
 .menuButton:hover {
-  background-color: #C5A059;
+  background-color: #c49c5c;
   color: #000;
 }
 
@@ -153,8 +153,8 @@
   background-color: #F5E6D3;
   padding: 2.5rem 2rem;
   text-align: center;
-  border: 4px solid #C5A059;
-  transition: transform 0.3s ease;
+  border: 2px solid #b07c4b;
+   transition: transform 0.3s ease;
 }
 
 .featureCard:hover {
@@ -168,7 +168,7 @@
   margin-bottom: 1.5rem;
   border-radius: 8px;
   overflow: hidden;
-  border: 2px solid #C5A059;
+  border: 2px solid #b07c4b;
 }
 
 .featureImage {
@@ -203,8 +203,8 @@
 
 .sliderBtn {
   background: transparent;
-  border: 2px solid #C5A059;
-  color: #C5A059;
+  border: 2px solid #b07c4b;
+  color: #c49c5c;
   font-size: 2.5rem;
   width: 50px;
   height: 50px;
@@ -217,15 +217,15 @@
 }
 
 .sliderBtn:hover {
-  background-color: #C5A059;
+  background-color: #c49c5c;
   color: #000;
 }
 
 .testimonialCard {
   background-color: #F5E6D3;
   padding: 3rem 2.5rem;
-  border: 4px solid #C5A059;
-  display: flex;
+  border: 2px solid #b07c4b;
+   display: flex;
   flex-direction: column;
   gap: 2rem;
   flex: 1;
@@ -254,7 +254,7 @@
   height: 70px;
   border-radius: 50%;
   overflow: hidden;
-  border: 3px solid #C5A059;
+  border: 3px solid #c49c5c;
   flex-shrink: 0;
 }
 
@@ -293,7 +293,7 @@
   height: 12px;
   border-radius: 50%;
   background: transparent;
-  border: 2px solid #C5A059;
+  border: 2px solid #b07c4b;
   cursor: pointer;
   transition: all 0.3s;
   padding: 0;
@@ -301,7 +301,7 @@
 
 .dot:hover,
 .activeDot {
-  background-color: #C5A059;
+  background-color: #c49c5c;
 }
 
 /* Call to Action Section */
@@ -320,13 +320,13 @@
   padding: 4rem 2rem;
   max-width: 800px;
   margin: 0 auto;
-  border: 4px solid #C5A059;
+  border: 2px solid #b07c4b
 }
 
 .ctaTitle {
   font-family: var(--font-playfair);
   font-size: 3rem;
-  color: #C5A059;
+  color: #c49c5c;
   margin-bottom: 1rem;
   text-transform: uppercase;
   letter-spacing: 2px;
@@ -342,8 +342,8 @@
 .ctaButton {
   display: inline-block;
   padding: 15px 40px;
-  border: 2px solid #C5A059;
-  color: #C5A059;
+  border: 2px solid #b07c4b;
+  color: #c49c5c;
   font-family: var(--font-lato);
   font-size: 1.1rem;
   text-transform: uppercase;
@@ -354,7 +354,7 @@
 }
 
 .ctaButton:hover {
-  background-color: #C5A059;
+  background-color: #c49c5c;
   color: #000;
 }
 
@@ -443,18 +443,18 @@
   }
 
   .ctaButton {
-  display: inline-block;
-  padding: 12px 20px;
-  border: 2px solid #C5A059;
-  color: #C5A059;
-  font-family: var(--font-lato);
-  font-size: 12px;
-  text-transform: uppercase;
-  text-decoration: none;
-  transition: all 0.3s ease;
-  background: transparent;
-  letter-spacing: 1px;
-}
+    display: inline-block;
+    padding: 12px 20px;
+    border: 2px solid #b07c4b;
+    color: #c49c5c;
+    font-family: var(--font-lato);
+    font-size: 12px;
+    text-transform: uppercase;
+    text-decoration: none;
+    transition: all 0.3s ease;
+    background: transparent;
+    letter-spacing: 1px;
+  }
 }
 
 /* FAQ Section Styles */
@@ -516,7 +516,7 @@
 
 .faqItem {
   background: #fff;
-  border: 2px solid #C5A059;
+  border: 2px solid #b07c4b;
   border-radius: 8px;
   overflow: hidden;
   transition: all 0.3s ease;
@@ -544,18 +544,18 @@
 }
 
 .faqQuestion:hover {
-  background-color: #C5A059;
+  background-color: #c49c5c;
 }
 
 .faqQuestionActive {
-  background-color: #C5A059;
+  background-color: #c49c5c;
   color: #fff;
 }
 
 .faqIcon {
   font-size: 1.5rem;
   font-weight: bold;
-  color: #C5A059;
+  color: #c49c5c;
   transition: transform 0.3s ease;
   flex-shrink: 0;
   margin-left: 1rem;
@@ -614,14 +614,14 @@
     height: auto !important;
     object-fit: cover !important;
     border-radius: 12px;
-        border: 4px solid #c5a059;
+    border: 2px solid #b07c4b
   }
 
   .ctaButton {
     display: inline-block;
     padding: 12px 20px;
-    border: 2px solid #C5A059;
-    color: #C5A059;
+    border: 2px solid #b07c4b;
+    color: #c49c5c;
     font-family: var(--font-lato);
     font-size: 12px;
     text-transform: uppercase;
diff --git a/src/app/about/about.module.css.backup b/src/app/about/about.module.css.backup
index 9aaeda9..43ed6ce 100644
--- a/src/app/about/about.module.css.backup
+++ b/src/app/about/about.module.css.backup
@@ -30,7 +30,7 @@
 
 .breadcrumb {
   font-size: 1.1rem;
-  color: #C5A059;
+  color: #c49c5c;
   font-family: var(--font-lato);
 }
 
@@ -83,7 +83,7 @@
 .sectionTitle {
   font-family: var(--font-playfair);
   font-size: 3rem;
-  color: #C5A059;
+  color: #c49c5c;
   margin-bottom: 1.5rem;
   text-transform: uppercase;
   letter-spacing: 2px;
@@ -92,7 +92,7 @@
 .sectionTitleCenter {
   font-family: var(--font-playfair);
   font-size: 3.5rem;
-  color: #C5A059;
+  color: #c49c5c;
   margin-bottom: 3rem;
   text-align: center;
   text-transform: uppercase;
@@ -102,7 +102,7 @@
 .text {
   font-size: 1.1rem;
   line-height: 1.8;
-  color: #C5A059;
+  color: #c49c5c;
   margin-bottom: 1.5rem;
   opacity: 0.9;
   font-family: var(--font-lato);
@@ -113,14 +113,14 @@
   box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
   max-width: 100%;
   height: auto;
-  border: 4px solid #C5A059;
+  border: 2px solid #b07c4b
 }
 
 .menuButton {
   display: inline-block;
   padding: 15px 40px;
-  border: 2px solid #C5A059;
-  color: #C5A059;
+  border: 2px solid #b07c4b;
+  color: #c49c5c;
   font-family: var(--font-lato);
   font-size: 1.1rem;
   text-transform: uppercase;
@@ -132,7 +132,7 @@
 }
 
 .menuButton:hover {
-  background-color: #C5A059;
+  background-color: #c49c5c;
   color: #000;
 }
 
@@ -149,7 +149,7 @@
   background-color: #F5E6D3;
   padding: 2.5rem 2rem;
   text-align: center;
-  border: 4px solid #C5A059;
+  border: 2px solid #b07c4b
   transition: transform 0.3s ease;
 }
 
@@ -164,7 +164,7 @@
   margin-bottom: 1.5rem;
   border-radius: 8px;
   overflow: hidden;
-  border: 2px solid #C5A059;
+  border: 2px solid #b07c4b;
 }
 
 .featureImage {
@@ -199,8 +199,8 @@
 
 .sliderBtn {
   background: transparent;
-  border: 2px solid #C5A059;
-  color: #C5A059;
+  border: 2px solid #b07c4b;
+  color: #c49c5c;
   font-size: 2.5rem;
   width: 50px;
   height: 50px;
@@ -213,14 +213,14 @@
 }
 
 .sliderBtn:hover {
-  background-color: #C5A059;
+  background-color: #c49c5c;
   color: #000;
 }
 
 .testimonialCard {
   background-color: #F5E6D3;
   padding: 3rem 2.5rem;
-  border: 4px solid #C5A059;
+  border: 2px solid #b07c4b
   display: flex;
   flex-direction: column;
   gap: 2rem;
@@ -250,7 +250,7 @@
   height: 70px;
   border-radius: 50%;
   overflow: hidden;
-  border: 3px solid #C5A059;
+  border: 3px solid #c49c5c;
   flex-shrink: 0;
 }
 
@@ -289,7 +289,7 @@
   height: 12px;
   border-radius: 50%;
   background: transparent;
-  border: 2px solid #C5A059;
+  border: 2px solid #b07c4b;
   cursor: pointer;
   transition: all 0.3s;
   padding: 0;
@@ -297,7 +297,7 @@
 
 .dot:hover,
 .activeDot {
-  background-color: #C5A059;
+  background-color: #c49c5c;
 }
 
 /* Call to Action Section */
@@ -316,13 +316,13 @@
   padding: 4rem 2rem;
   max-width: 800px;
   margin: 0 auto;
-  border: 4px solid #C5A059;
+  border: 2px solid #b07c4b
 }
 
 .ctaTitle {
   font-family: var(--font-playfair);
   font-size: 3rem;
-  color: #C5A059;
+  color: #c49c5c;
   margin-bottom: 1rem;
   text-transform: uppercase;
   letter-spacing: 2px;
@@ -338,8 +338,8 @@
 .ctaButton {
   display: inline-block;
   padding: 15px 40px;
-  border: 2px solid #C5A059;
-  color: #C5A059;
+  border: 2px solid #b07c4b;
+  color: #c49c5c;
   font-family: var(--font-lato);
   font-size: 1.1rem;
   text-transform: uppercase;
@@ -350,7 +350,7 @@
 }
 
 .ctaButton:hover {
-  background-color: #C5A059;
+  background-color: #c49c5c;
   color: #000;
 }
 
@@ -394,8 +394,8 @@
 
 .sliderBtn {
   background: transparent;
-  border: 2px solid #C5A059;
-  color: #C5A059;
+  border: 2px solid #b07c4b;
+  color: #c49c5c;
   font-size: 2.5rem;
   width: 50px;
   height: 50px;
@@ -408,14 +408,14 @@
 }
 
 .sliderBtn:hover {
-  background-color: #C5A059;
+  background-color: #c49c5c;
   color: #000;
 }
 
 .testimonialCard {
   background-color: #F5E6D3;
   padding: 3rem 2.5rem;
-  border: 4px solid #C5A059;
+  border: 2px solid #b07c4b
   display: flex;
   flex-direction: column;
   gap: 2rem;
@@ -445,7 +445,7 @@
   height: 70px;
   border-radius: 50%;
   overflow: hidden;
-  border: 3px solid #C5A059;
+  border: 3px solid #c49c5c;
   flex-shrink: 0;
 }
 
@@ -484,7 +484,7 @@
   height: 12px;
   border-radius: 50%;
   background: transparent;
-  border: 2px solid #C5A059;
+  border: 2px solid #b07c4b;
   cursor: pointer;
   transition: all 0.3s;
   padding: 0;
@@ -492,7 +492,7 @@
 
 .dot:hover,
 .activeDot {
-  background-color: #C5A059;
+  background-color: #c49c5c;
 }
 
 /* Call to Action Section */
@@ -511,13 +511,13 @@
   padding: 4rem 2rem;
   max-width: 800px;
   margin: 0 auto;
-  border: 4px solid #C5A059;
+  border: 2px solid #b07c4b
 }
 
 .ctaTitle {
   font-family: var(--font-playfair);
   font-size: 3rem;
-  color: #C5A059;
+  color: #c49c5c;
   margin-bottom: 1rem;
   text-transform: uppercase;
   letter-spacing: 2px;
@@ -533,8 +533,8 @@
 .ctaButton {
   display: inline-block;
   padding: 15px 40px;
-  border: 2px solid #C5A059;
-  color: #C5A059;
+  border: 2px solid #b07c4b;
+  color: #c49c5c;
   font-family: var(--font-lato);
   font-size: 1.1rem;
   text-transform: uppercase;
@@ -545,7 +545,7 @@
 }
 
 .ctaButton:hover {
-  background-color: #C5A059;
+  background-color: #c49c5c;
   color: #000;
 }
 
@@ -655,7 +655,7 @@
 
 .faqItem {
   background: #fff;
-  border: 2px solid #C5A059;
+  border: 2px solid #b07c4b;
   border-radius: 8px;
   overflow: hidden;
   transition: all 0.3s ease;
@@ -683,18 +683,18 @@
 }
 
 .faqQuestion:hover {
-  background-color: #C5A059;
+  background-color: #c49c5c;
 }
 
 .faqQuestionActive {
-  background-color: #C5A059;
+  background-color: #c49c5c;
   color: #fff;
 }
 
 .faqIcon {
   font-size: 1.5rem;
   font-weight: bold;
-  color: #C5A059;
+  color: #c49c5c;
   transition: transform 0.3s ease;
   flex-shrink: 0;
   margin-left: 1rem;
diff --git a/src/app/about/about_temp.css b/src/app/about/about_temp.css
index 0083cc0..1ed0327 100644
--- a/src/app/about/about_temp.css
+++ b/src/app/about/about_temp.css
@@ -30,7 +30,7 @@
 
 .breadcrumb {
   font-size: 1.1rem;
-  color: #C5A059;
+  color: #c49c5c;
   font-family: var(--font-lato);
 }
 
@@ -83,7 +83,7 @@
 .sectionTitle {
   font-family: var(--font-playfair);
   font-size: 3rem;
-  color: #C5A059;
+  color: #c49c5c;
   margin-bottom: 1.5rem;
   text-transform: uppercase;
   letter-spacing: 2px;
@@ -92,7 +92,7 @@
 .sectionTitleCenter {
   font-family: var(--font-playfair);
   font-size: 3.5rem;
-  color: #C5A059;
+  color: #c49c5c;
   margin-bottom: 3rem;
   text-align: center;
   text-transform: uppercase;
@@ -102,7 +102,7 @@
 .text {
   font-size: 1.1rem;
   line-height: 1.8;
-  color: #C5A059;
+  color: #c49c5c;
   margin-bottom: 1.5rem;
   opacity: 0.9;
   font-family: var(--font-lato);
@@ -113,14 +113,14 @@
   box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
   max-width: 100%;
   height: auto;
-  border: 4px solid #C5A059;
+  border: 2px solid #b07c4b
 }
 
 .menuButton {
   display: inline-block;
   padding: 15px 40px;
-  border: 2px solid #C5A059;
-  color: #C5A059;
+  border: 2px solid #b07c4b;
+  color: #c49c5c;
   font-family: var(--font-lato);
   font-size: 1.1rem;
   text-transform: uppercase;
@@ -132,7 +132,7 @@
 }
 
 .menuButton:hover {
-  background-color: #C5A059;
+  background-color: #c49c5c;
   color: #000;
 }
 
@@ -149,8 +149,8 @@
   background-color: #F5E6D3;
   padding: 2.5rem 2rem;
   text-align: center;
-  border: 4px solid #C5A059;
-  transition: transform 0.3s ease;
+  border: 2px solid #b07c4b;
+   transition: transform 0.3s ease;
 }
 
 .featureCard:hover {
@@ -164,5 +164,5 @@
   margin-bottom: 1.5rem;
   border-radius: 8px;
   overflow: hidden;
-  border: 2px solid #C5A059;
+  border: 2px solid #b07c4b;
 }
\ No newline at end of file
diff --git a/src/app/blog/[id]/blogDetail.module.css b/src/app/blog/[id]/blogDetail.module.css
index caa2590..ae1bb43 100644
--- a/src/app/blog/[id]/blogDetail.module.css
+++ b/src/app/blog/[id]/blogDetail.module.css
@@ -19,7 +19,7 @@
 .heroTitle {
     font-family: var(--font-playfair);
     font-size: 4rem;
-    color: #C5A059;
+    color: #c49c5c;
     margin-bottom: 1rem;
     text-transform: uppercase;
     letter-spacing: 2px;
@@ -27,7 +27,7 @@
 
 .breadcrumb {
     font-size: 1.1rem;
-    color: #C5A059;
+    color: #c49c5c;
     font-family: var(--font-lato);
 }
 
@@ -50,7 +50,7 @@
     margin: 0 auto;
     background: #fff;
     padding: 3rem;
-    border: 4px solid #C5A059;
+    border: 2px solid #b07c4b
 }
 
 .meta {
@@ -63,7 +63,7 @@
 }
 
 .category {
-    background: #C5A059;
+    background: #c49c5c;
     color: #fff;
     padding: 0.5rem 1rem;
     border-radius: 4px;
@@ -89,7 +89,7 @@
     margin-bottom: 2.5rem;
     border-radius: 8px;
     overflow: hidden;
-    border: 3px solid #C5A059;
+    border: 3px solid #c49c5c;
 }
 
 .featuredImage img {
@@ -111,7 +111,7 @@
     color: #5d4037;
     margin: 2rem 0 1rem;
     padding-bottom: 0.5rem;
-    border-bottom: 2px solid #C5A059;
+    border-bottom: 2px solid #c49c5c;
 }
 
 .content h3 {
@@ -148,7 +148,7 @@
 }
 
 .content a {
-    color: #C5A059;
+    color: #c49c5c;
     text-decoration: underline;
     transition: color 0.3s;
 }
@@ -179,7 +179,7 @@
     content: "✓";
     position: absolute;
     left: 0;
-    color: #C5A059;
+    color: #c49c5c;
     font-weight: bold;
     font-size: 1.2rem;
 }
@@ -188,13 +188,13 @@
 .content blockquote {
     text-align: center;
     background: linear-gradient(135deg, #faf6f0 0%, #f5ede0 100%);
-    border-left: 6px solid #c5a059;
-    /* border-right: 6px solid #c5a059; */
+    border-left: 6px solid #c49c5c;
+    /* border-right: 6px solid #c49c5c; */
     /* max-width: 800px; */
     margin: 3rem 0px;
     padding: 10px 20px 10px 20px;
     position: relative;
-    box-shadow: 0 8px 24px #c5a05926;
+    box-shadow: 0 8px 24px #c49c5c26;
 }
 
 .content blockquote p {
@@ -214,7 +214,7 @@
     font-family: var(--font-lato);
     font-size: 1rem;
     font-style: normal;
-    color: #C5A059;
+    color: #c49c5c;
     font-weight: 600;
 }
 
@@ -232,8 +232,8 @@
     display: inline-block;
     padding: 12px 30px;
     background: transparent;
-    border: 2px solid #C5A059;
-    color: #C5A059;
+    border: 2px solid #b07c4b;
+    color: #c49c5c;
     font-family: var(--font-lato);
     font-size: 1rem;
     font-weight: 600;
@@ -244,7 +244,7 @@
 }
 
 .backButton:hover {
-    background: #C5A059;
+    background: #c49c5c;
     color: #fff;
 }
 
@@ -260,12 +260,12 @@
 .errorTitle {
     font-family: var(--font-playfair);
     font-size: 3rem;
-    color: #C5A059;
+    color: #c49c5c;
     margin-bottom: 2rem;
 }
 
 .backLink {
-    color: #C5A059;
+    color: #c49c5c;
     font-size: 1.2rem;
     text-decoration: underline;
 }
diff --git a/src/app/blog/[id]/page.tsx b/src/app/blog/[id]/page.tsx
index a6070f8..b6ff9c3 100644
--- a/src/app/blog/[id]/page.tsx
+++ b/src/app/blog/[id]/page.tsx
@@ -1,6 +1,3 @@
-'use client'
-
-import { useParams } from 'next/navigation';
 import Navbar from "@/components/Navbar/Navbar";
 import Footer from "@/components/Footer/Footer";
 import FAQ from "@/components/FAQ/FAQ";
@@ -9,9 +6,16 @@ import Link from "next/link";
 import styles from "./blogDetail.module.css";
 import { blogData } from "@/utils/constant";
 
-export default function BlogDetailPage() {
-    const params = useParams();
-    const slug = params.id as string;
+// Generate static paths for all blog posts
+export function generateStaticParams() {
+    return blogData.map((blog) => ({
+        id: blog.slug,
+    }));
+}
+
+export default async function BlogDetailPage({ params }: { params: Promise<{ id: string }> }) {
+    const { id } = await params;
+    const slug = id;
     const blog = blogData.find((b) => b.slug === slug);
 
     if (!blog) {
@@ -41,11 +45,12 @@ export default function BlogDetailPage() {
                 </div>
             </section>
 
+
             {/* Blog Content */}
             <article className={styles.article}>
                 <div className={styles.contentContainer}>
                     {/* Meta Information */}
-                   
+
                     {/* Featured Image */}
                     {blog.detailImage && (
                         <div className={styles.featuredImage}>
@@ -59,7 +64,7 @@ export default function BlogDetailPage() {
                         </div>
                     )}
 
-                     <div className={styles.meta}>
+                    <div className={styles.meta}>
                         <span className={styles.category}>{blog.category}</span>
                         <span className={styles.separator}>|</span>
                         <span className={styles.date}>{blog.date}</span>
@@ -91,4 +96,4 @@ export default function BlogDetailPage() {
             <Footer />
         </main>
     );
-}
+}
\ No newline at end of file
diff --git a/src/app/blog/blog.module.css b/src/app/blog/blog.module.css
index 9941fc9..986934a 100644
--- a/src/app/blog/blog.module.css
+++ b/src/app/blog/blog.module.css
@@ -21,7 +21,7 @@
 .heroTitle {
     font-family: var(--font-playfair);
     font-size: 4rem;
-    color: #C5A059;
+    color: #c49c5c;
     margin-bottom: 1rem;
     text-transform: uppercase;
     letter-spacing: 2px;
@@ -29,7 +29,7 @@
 
 .breadcrumb {
     font-size: 1.1rem;
-    color: #C5A059;
+    color: #c49c5c;
     font-family: var(--font-lato);
 }
 
@@ -57,8 +57,8 @@
 
 .card {
     background-color: #F5E6D3;
-    border: 4px solid #C5A059;
-    overflow: hidden;
+    border: 2px solid #b07c4b;
+     overflow: hidden;
     transition: transform 0.3s ease, box-shadow 0.3s ease;
 }
 
@@ -71,7 +71,7 @@
     position: relative;
     width: 100%;
     height: 250px;
-    border-bottom: 1px solid #C5A059;
+    border-bottom: 1px solid #c49c5c;
 }
 
 .cardContent {
@@ -93,7 +93,7 @@
 }
 
 .blogTitle a:hover {
-    color: #C5A059;
+    color: #c49c5c;
 }
 
 .date {
@@ -116,7 +116,7 @@
 .button {
     display: inline-block;
     padding: 10px 25px;
-    border: 2px solid #C5A059;
+    border: 2px solid #b07c4b;
     color: #5d4037;
     text-align: center;
     transition: all 0.3s ease;
@@ -128,7 +128,7 @@
 }
 
 .button:hover {
-    background-color: #C5A059;
+    background-color: #c49c5c;
     color: #fff;
 }
 
diff --git a/src/app/contact/contact.module.css b/src/app/contact/contact.module.css
index 3c66921..1c98d6a 100644
--- a/src/app/contact/contact.module.css
+++ b/src/app/contact/contact.module.css
@@ -20,7 +20,7 @@
 .heroTitle {
     font-family: var(--font-playfair);
     font-size: 4rem;
-    color: #C5A059;
+    color: #c49c5c;
     margin-bottom: 1rem;
     text-transform: uppercase;
     letter-spacing: 2px;
@@ -28,7 +28,7 @@
 
 .breadcrumb {
     font-size: 1.1rem;
-    color: #C5A059;
+    color: #c49c5c;
     font-family: var(--font-lato);
 }
 
@@ -61,7 +61,7 @@
 .formBlock {
     background-color: #F5E6D3;
     padding: 2.5rem;
-    border: 4px solid #C5A059;
+    border: 2px solid #b07c4b
 }
 
 .title {
@@ -70,7 +70,7 @@
     color: #5d4037;
     margin-bottom: 1rem;
     font-weight: 600;
-    border-bottom: 3px solid #C5A059;
+    border-bottom: 3px solid #c49c5c;
     padding-bottom: 0.5rem;
     display: inline-block;
 }
@@ -103,7 +103,7 @@
 
 .formLabel {
     font-family: var(--font-lato);
-    color: #C5A059;
+    color: #c49c5c;
     font-size: 0.95rem;
     font-weight: 600;
 }
@@ -113,7 +113,7 @@
     background: #fff;
     border: 1px solid #d4c5b0;
     padding: 0.9rem;
-    color: #C5A059;
+    color: #c49c5c;
     font-family: var(--font-lato);
     font-size: 0.95rem;
     transition: border-color 0.3s;
@@ -128,7 +128,7 @@
 .input:focus,
 .textarea:focus {
     outline: none;
-    border-color: #C5A059;
+    border-color: #c49c5c;
 }
 
 .textarea {
@@ -144,7 +144,7 @@
 }
 
 .submitButton {
-    background: #C5A059;
+    background: #c49c5c;
     border: none;
     color: #fff;
     padding: 15px 40px;
@@ -209,8 +209,8 @@
 .locationCard {
     background: #F5E6D3;
     padding: 1.5rem;
-    border: 4px solid #C5A059;
-    display: flex;
+    border: 2px solid #b07c4b;
+     display: flex;
     align-items: flex-start;
     gap: 1.5rem;
     transition: transform 0.3s;
@@ -221,7 +221,7 @@
 }
 
 .iconWrapper {
-    background: #C5A059;
+    background: #c49c5c;
     width: 50px;
     height: 50px;
     border-radius: 50%;
@@ -267,12 +267,12 @@
 .locationPhone {
     font-size: 1.2rem;
     font-weight: 600;
-    color: #C5A059;
+    color: #c49c5c;
 }
 
 .mapContainer {
-    border: 4px solid #C5A059;
-    overflow: hidden;
+    border: 2px solid #b07c4b;
+     overflow: hidden;
     margin-top: 0.5rem;
 }
 
@@ -284,7 +284,7 @@
 
 @media (max-width: 1024px) {
     .container {
-       grid-template-columns: repeat(2, 1fr);
+        grid-template-columns: repeat(2, 1fr);
         gap: 3rem;
     }
 
diff --git a/src/app/gallery/gallery.module.css b/src/app/gallery/gallery.module.css
index 6e7d3e7..140b1fa 100644
--- a/src/app/gallery/gallery.module.css
+++ b/src/app/gallery/gallery.module.css
@@ -21,7 +21,7 @@
 .heroTitle {
     font-family: var(--font-playfair);
     font-size: 4rem;
-    color: #C5A059;
+    color: #c49c5c;
     margin-bottom: 1rem;
     text-transform: uppercase;
     letter-spacing: 2px;
@@ -29,7 +29,7 @@
 
 .breadcrumb {
     font-size: 1.1rem;
-    color: #C5A059;
+    color: #c49c5c;
     font-family: var(--font-lato);
 }
 
@@ -46,7 +46,7 @@
     padding: 80px 10px;
     max-width: 1200px;
     margin: 0 auto;
-/* background-color: #0a0a0a; */
+    /* background-color: #0a0a0a; */
 }
 
 .tabs {
@@ -58,8 +58,8 @@
 
 .tab {
     background: transparent;
-    border: 2px solid #C5A059;
-    color: #C5A059;
+    border: 2px solid #b07c4b;
+    color: #c49c5c;
     padding: 12px 30px;
     font-size: 1rem;
     cursor: pointer;
@@ -72,7 +72,7 @@
 
 .tab:hover,
 .activeTab {
-    background-color: #C5A059;
+    background-color: #c49c5c;
     color: #F5E6D3;
 }
 
@@ -87,7 +87,7 @@
     aspect-ratio: 4/3;
     cursor: pointer;
     overflow: hidden;
-    border: 4px solid #C5A059;
+    border: 2px solid #b07c4b
 }
 
 .image {
@@ -118,9 +118,9 @@
 }
 
 .viewText {
-    color: #C5A059;
+    color: #c49c5c;
     font-size: 1.2rem;
-    border: 2px solid #C5A059;
+    border: 2px solid #b07c4b;
     padding: 0.5rem 1.5rem;
     font-family: var(--font-lato);
     text-transform: uppercase;
@@ -163,7 +163,7 @@
     right: 0;
     background: none;
     border: none;
-    color: #C5A059;
+    color: #c49c5c;
     font-size: 2.5rem;
     cursor: pointer;
     transition: color 0.3s;
@@ -178,8 +178,8 @@
     top: 50%;
     transform: translateY(-50%);
     background: rgba(197, 160, 89, 0.2);
-    border: 2px solid #C5A059;
-    color: #C5A059;
+    border: 2px solid #b07c4b;
+    color: #c49c5c;
     font-size: 2rem;
     padding: 1rem;
     cursor: pointer;
diff --git a/src/app/globals.css b/src/app/globals.css
index 76f17bd..5e9eeb2 100644
--- a/src/app/globals.css
+++ b/src/app/globals.css
@@ -1,11 +1,26 @@
 :root {
-  --color-gold: #b28839;
+  /* Color Variables */
+  --color-heading: #d3cab3;
+  --color-button: #d28839;
+  --color-paragraph: #c49c5c;
+  --color-border: #b07c4b;
   --color-dark: #0a0a0a;
   --color-input-bg: #e8e0d5;
   --color-text-light: #f5f5f5;
+
+  /* Legacy color support (mapped to new colors) */
+  --color-gold: #d28839;
+  /* Updated to button color */
+
+  /* Font Family Variables */
+  --font-menu: 'Canva Sans', sans-serif;
+  --font-heading: 'Playfair Display', serif;
+  --font-paragraph: 'Canva Sans', sans;
+
+  /* Legacy font support */
   --font-playfair: 'Playfair Display', serif;
-  --font-lato: 'Lato', sans-serif;
-  --font-cormorant: 'Cormorant Garamond', serif;
+  --font-lato: 'Canva Sans', sans;
+  --font-cormorant: 'Canva Sans', sans-serif;
 }
 
 * {
@@ -20,7 +35,7 @@ body {
   overflow-x: hidden;
   background-color: var(--color-dark);
   color: var(--color-text-light);
-  font-family: var(--font-cormorant);
+  font-family: var(--font-paragraph);
   font-weight: 300;
   /* Ensure default font is applied */
   -webkit-font-smoothing: antialiased;
@@ -30,4 +45,32 @@ body {
 a {
   color: inherit;
   text-decoration: none;
+}
+
+/* Global Heading Styles */
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  font-family: var(--font-heading);
+  color: var(--color-heading);
+}
+
+/* Global Paragraph Styles */
+p {
+  font-family: var(--font-paragraph);
+  color: var(--color-paragraph);
+}
+
+/* Global Button Styles */
+button {
+  font-family: var(--font-paragraph);
+  background-color: var(--color-button);
+}
+
+/* Global Border Utility */
+.border-standard {
+  border-color: var(--color-border);
 }
\ No newline at end of file
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
index acd0b0f..f9e770e 100644
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -1,39 +1,16 @@
 import type { Metadata } from "next";
-import { Playfair_Display, Lato, Cinzel, Inter, Cormorant_Garamond } from "next/font/google";
+import { Playfair_Display } from "next/font/google";
 import "./globals.css";
 import ScrollToTop from "@/components/ScrollToTop/ScrollToTop";
 
-const playfair = Playfair_Display({
+const playfairDisplay = Playfair_Display({
   subsets: ["latin"],
-  variable: "--font-playfair",
+  variable: "--font-heading",
   display: "swap",
 });
 
-const lato = Lato({
-  weight: ["300", "400", "700"],
-  subsets: ["latin"],
-  variable: "--font-lato",
-  display: "swap",
-});
-
-const cinzel = Cinzel({
-  subsets: ["latin"],
-  variable: "--font-cinzel",
-  display: "swap",
-});
-
-const inter = Inter({
-  subsets: ["latin"],
-  variable: "--font-inter",
-  display: "swap",
-});
-
-const cormorantGaramond = Cormorant_Garamond({
-  weight: ["300", "400"],
-  subsets: ["latin"],
-  variable: "--font-cormorant",
-  display: "swap",
-});
+// Note: Canva Sans is loaded via CDN in the head section below
+// We'll use system fonts as fallback in the CSS variables
 
 export const metadata: Metadata = {
   title: "Antalya Restaurant - Book A Table",
@@ -48,12 +25,16 @@ export default function RootLayout({
   children: React.ReactNode
 }) {
   return (
-    <html lang="en" className={`${playfair.variable} ${lato.variable} ${cinzel.variable} ${inter.variable} ${cormorantGaramond.variable}`}>
-      <body className={cormorantGaramond.className}>
+    <html lang="en" className={playfairDisplay.variable}>
+      <head>
+        <link rel="preconnect" href="https://fonts.cdnfonts.com" />
+        <link href="https://fonts.cdnfonts.com/css/canva-sans" rel="stylesheet" />
+      </head>
+      <body>
         <Navbar />
         {children}
         <ScrollToTop />
       </body>
     </html>
   )
-}
+}
\ No newline at end of file
diff --git a/src/app/menu/menu.module.css b/src/app/menu/menu.module.css
index 3948e8c..cb2e6d4 100644
--- a/src/app/menu/menu.module.css
+++ b/src/app/menu/menu.module.css
@@ -22,7 +22,7 @@
 .heroTitle {
     font-family: var(--font-playfair);
     font-size: 4rem;
-    color: #C5A059;
+    color: #c49c5c;
     margin-bottom: 1rem;
     text-transform: uppercase;
     letter-spacing: 2px;
@@ -30,7 +30,7 @@
 
 .breadcrumb {
     font-size: 1.1rem;
-    color: #C5A059;
+    color: #c49c5c;
     font-family: var(--font-lato);
 }
 
@@ -61,8 +61,8 @@
 
 .tab {
     background: transparent;
-    border: 2px solid #C5A059;
-    color: #C5A059;
+    border: 2px solid #b07c4b;
+    color: #c49c5c;
     padding: 12px 30px;
     font-size: 1rem;
     cursor: pointer;
@@ -75,7 +75,7 @@
 
 .tab:hover,
 .activeTab {
-    background-color: #C5A059;
+    background-color: #c49c5c;
     color: #F5E6D3;
     transform: translateY(-2px);
 }
@@ -89,7 +89,7 @@
 .menuCard {
     display: flex;
     gap: 1.2rem;
-    background: #c5a059;
+    background: #c49c5c;
     padding: 1.2rem;
     border: 1px solid rgba(197, 160, 89, 0.2);
     transition: all 0.4s ease;
@@ -134,7 +134,7 @@
 }
 
 .menuCard:hover {
-    background: #c5a059;
+    background: #c49c5c;
     border-color: #F5E6D3;
     transform: translateY(-5px);
     box-shadow: 0 10px 30px rgba(197, 160, 89, 0.2);
@@ -233,14 +233,14 @@
 
 .price {
     font-size: 1.2rem;
-     color: #F5E6D3;
+    color: #F5E6D3;
     font-weight: bold;
     font-family: var(--font-playfair);
 }
 
 .description {
     font-size: 0.9rem;
-     color: #F5E6D3;
+    color: #F5E6D3;
     line-height: 1.6;
     font-family: var(--font-lato);
     opacity: 0.85;
@@ -248,7 +248,7 @@
 
 @media (max-width: 968px) {
     .menuGrid {
-       grid-template-columns: repeat(2, 1fr);
+        grid-template-columns: repeat(2, 1fr);
     }
 }
 
@@ -288,7 +288,7 @@
     }
 }
 
-@media (max-width: 767px) and (min-width: 200px){
+@media (max-width: 767px) and (min-width: 200px) {
 
     .menuGrid {
         grid-template-columns: 1fr;
diff --git a/src/components/About/About.module.css b/src/components/About/About.module.css
index 00b1a58..da4aee7 100644
--- a/src/components/About/About.module.css
+++ b/src/components/About/About.module.css
@@ -63,13 +63,13 @@
     width: 60px;
     height: auto;
     margin-bottom: 30px;
-    color: #C5A059;
+    color: #c49c5c;
 }
 
 .title {
     font-family: var(--font-cinzel), serif;
     font-size: 3.5rem;
-    color: #C5A059;
+    color: #c49c5c;
     margin-bottom: 10px;
     text-transform: uppercase;
     letter-spacing: 2px;
@@ -79,7 +79,7 @@
 .subtitle {
     font-family: var(--font-cinzel), serif;
     font-size: 1.4rem;
-    color: #C5A059;
+    color: #c49c5c;
     margin-bottom: 40px;
     font-weight: 400;
 }
@@ -87,7 +87,7 @@
 .text {
     font-family: var(--font-inter), sans-serif;
     /* Or specific font from image */
-    color: #C5A059;
+    color: #c49c5c;
     /* Goldish text color as seen in image */
     line-height: 1.8;
     margin-bottom: 50px;
@@ -99,8 +99,8 @@
 .button {
     display: inline-block;
     padding: 15px 40px;
-    border: 2px solid #C5A059;
-    color: #C5A059;
+    border: 2px solid #b07c4b;
+    color: #c49c5c;
     font-family: var(--font-cinzel), serif;
     font-size: 1.1rem;
     text-transform: uppercase;
@@ -111,7 +111,7 @@
 }
 
 .button:hover {
-    background-color: #C5A059;
+    background-color: #c49c5c;
     color: #000;
 }
 
diff --git a/src/components/About/AboutTailwind.tsx b/src/components/About/AboutTailwind.tsx
index 7ab4fbb..106e50b 100644
--- a/src/components/About/AboutTailwind.tsx
+++ b/src/components/About/AboutTailwind.tsx
@@ -6,7 +6,7 @@ export default function AboutSection() {
     return (
         <section className="relative w-full bg-[#0a0a0a] py-20 px-4 sm:px-6 lg:px-8 flex justify-center items-center">
             {/* Main Container with Gold Border */}
-            <div className="relative w-full max-w-7xl border-4 border-[#C5A059] p-2 sm:p-4">
+            <div className="relative w-full max-w-7xl border-4 border-[#c49c5c] p-2 sm:p-4">
 
                 {/* Inner Flex Container */}
                 <div className="flex flex-col lg:flex-row w-full h-full">
@@ -31,12 +31,12 @@ export default function AboutSection() {
                         {/* Ornamental Icon */}
                         <div className="mb-6">
                             <svg width="40" height="40" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-                                <path d="M12 2L14.5 9.5L22 12L14.5 14.5L12 22L9.5 14.5L2 12L9.5 9.5L12 2Z" fill="#C5A059" />
+                                <path d="M12 2L14.5 9.5L22 12L14.5 14.5L12 22L9.5 14.5L2 12L9.5 9.5L12 2Z" fill="#c49c5c" />
                             </svg>
                         </div>
 
                         {/* Title */}
-                        <h2 className="text-[#C5A059] font-serif text-4xl lg:text-6xl uppercase tracking-widest mb-4">
+                        <h2 className="text-[#c49c5c] font-serif text-4xl lg:text-6xl uppercase tracking-widest mb-4">
                             About Antalya
                         </h2>
 
@@ -53,7 +53,7 @@ export default function AboutSection() {
                         </p>
 
                         {/* Button */}
-                        <button className="px-8 py-3 border-2 border-[#C5A059] text-[#C5A059] uppercase tracking-wider hover:bg-[#C5A059] hover:text-black transition-all duration-300 font-medium">
+                        <button className="px-8 py-3 border-2 border-[#c49c5c] text-[#c49c5c] uppercase tracking-wider hover:bg-[#c49c5c] hover:text-black transition-all duration-300 font-medium">
                             Learn More
                         </button>
                     </div>
diff --git a/src/components/Blogs/Blogs.module.css b/src/components/Blogs/Blogs.module.css
index 1e2f1e4..2181964 100644
--- a/src/components/Blogs/Blogs.module.css
+++ b/src/components/Blogs/Blogs.module.css
@@ -12,7 +12,7 @@
 .title {
     font-family: var(--font-cinzel), serif;
     font-size: 3.5rem;
-    color: #C5A059;
+    color: #c49c5c;
     margin-bottom: 60px;
     text-transform: uppercase;
     letter-spacing: 2px;
@@ -33,8 +33,8 @@
     background-color: #F5E6D3;
     /* Cream background */
     padding: 20px;
-    border: 4px solid #C5A059;
-    /* Gold border */
+    border: 2px solid #b07c4b;
+        /* Gold border */
     display: flex;
     flex-direction: column;
     align-items: center;
@@ -53,7 +53,7 @@
     width: 100%;
     height: 250px;
     margin-bottom: 25px;
-    border: 1px solid #C5A059;
+    border: 1px solid #c49c5c;
     /* Inner border for image */
 }
 
@@ -80,7 +80,7 @@
 .button {
     display: inline-block;
     padding: 10px 25px;
-    border: 2px solid #C5A059;
+    border: 2px solid #b07c4b;
     color: #5d4037;
     font-family: var(--font-inter), sans-serif;
     text-transform: uppercase;
@@ -93,7 +93,7 @@
 }
 
 .button:hover {
-    background-color: #C5A059;
+    background-color: #c49c5c;
     color: #fff;
 }
 
@@ -101,7 +101,7 @@
     position: absolute;
     top: 50%;
     transform: translateY(-50%);
-    color: #C5A059;
+    color: #c49c5c;
     font-size: 3rem;
     cursor: pointer;
     background: none;
@@ -129,7 +129,7 @@
 .viewMoreButton {
     display: inline-block;
     padding: 15px 40px;
-    border: 1px solid #C5A059;
+    border: 1px solid #c49c5c;
     color: #fff;
     font-family: var(--font-inter), sans-serif;
     text-transform: uppercase;
@@ -141,7 +141,7 @@
 }
 
 .viewMoreButton:hover {
-    background-color: #C5A059;
+    background-color: #c49c5c;
     color: #000;
 }
 
@@ -231,6 +231,7 @@
     .card:nth-child(2) {
         display: none;
     }
+
     .card:nth-child(3) {
         display: none;
     }
diff --git a/src/components/BookTable/BookTable.tsx b/src/components/BookTable/BookTable.tsx
index aa4203b..d2a243a 100644
--- a/src/components/BookTable/BookTable.tsx
+++ b/src/components/BookTable/BookTable.tsx
@@ -153,7 +153,7 @@ export default function BookTable() {
                                 name="name"
                                 required
                                 className={styles.input}
-                                placeholder="Your Full Name"
+                                placeholder="Name"
                                 value={formData.name}
                                 onChange={handleChange}
                             />
@@ -169,7 +169,7 @@ export default function BookTable() {
                                 name="phone"
                                 required
                                 className={styles.input}
-                                placeholder="(519) 000-0000"
+                                placeholder="Phone"
                                 value={formData.phone}
                                 onChange={handleChange}
                             />
@@ -197,7 +197,7 @@ export default function BookTable() {
                                 id="message"
                                 name="message"
                                 className={styles.textarea}
-                                placeholder="Any special requests..."
+                                placeholder="Message..."
                                 maxLength={500}
                                 value={formData.message}
                                 onChange={handleChange}
diff --git a/src/components/FAQ/FAQ.module.css b/src/components/FAQ/FAQ.module.css
index 408c88e..9d5b5f5 100644
--- a/src/components/FAQ/FAQ.module.css
+++ b/src/components/FAQ/FAQ.module.css
@@ -23,7 +23,7 @@
 
 .faqItem {
     background: #fff;
-    border: 2px solid #C5A059;
+    border: 2px solid #b07c4b;
     border-radius: 8px;
     overflow: hidden;
     transition: all 0.3s ease;
@@ -51,14 +51,14 @@
 }
 
 .faqQuestion.active {
-    background-color: #C5A059;
+    background-color: #c49c5c;
     color: #fff;
 }
 
 .icon {
     font-size: 1.5rem;
     font-weight: bold;
-    color: #C5A059;
+    color: #c49c5c;
     transition: transform 0.3s ease;
     flex-shrink: 0;
     margin-left: 1rem;
@@ -89,7 +89,7 @@
 }
 
 .faqContent a {
-    color: #C5A059;
+    color: #c49c5c;
     text-decoration: underline;
     transition: color 0.3s;
 }
diff --git a/src/components/Footer/Footer.module.css b/src/components/Footer/Footer.module.css
index 3835a1f..a849e3c 100644
--- a/src/components/Footer/Footer.module.css
+++ b/src/components/Footer/Footer.module.css
@@ -1,22 +1,22 @@
 .footer {
     position: relative;
     background-color: #2a0a0a;
-    background-image: url('/images/footer-bg.png');
+    background-image: url('/images/footer.png');
     background-size: cover;
     background-position: center;
     background-repeat: no-repeat;
-    color: #C5A059;
+    color: #d3cab3;
     padding: 60px 40px;
     font-family: var(--font-lato);
 }
 
 /* The Gold Border Container */
 .borderWrapper {
-    /* border: 2px solid #8B6E38; */
+    border: 4px solid #b07c4b;
     /* Darker gold/bronze border */
     padding: 40px;
     position: relative;
-    max-width: 1600px;
+    max-width: 1900px;
     margin: 0 auto;
 }
 
@@ -56,7 +56,7 @@
     font-size: 0.95rem;
     line-height: 1.6;
     margin-bottom: 2rem;
-    color: #C5A059;
+    color: #c49c5c;
     opacity: 0.9;
     max-width: 400px;
 }
@@ -74,7 +74,7 @@
     width: 40px;
     height: 40px;
     border-radius: 50%;
-    background-color: #C5A059;
+    background-color: #c49c5c;
     display: flex;
     align-items: center;
     justify-content: center;
@@ -99,7 +99,7 @@
     font-family: var(--font-playfair);
     font-size: 1.5rem;
     margin-bottom: 1.5rem;
-    color: #C5A059;
+    color: #d3cab3;
     text-transform: capitalize;
 }
 
@@ -116,7 +116,7 @@
 .link {
     font-family: var(--font-playfair);
     font-size: 1.1rem;
-    color: #C5A059;
+    color: #c49c5c;
     text-decoration: none;
     transition: color 0.3s ease;
 }
@@ -133,7 +133,7 @@
 .contactInfo {
     font-size: 1rem;
     line-height: 1.8;
-    color: #C5A059;
+    color: #c49c5c;
 }
 
 .address {
@@ -149,7 +149,7 @@
 }
 
 .contactRow a {
-    color: #C5A059;
+    color: #c49c5c;
     text-decoration: none;
     transition: color 0.3s;
 }
@@ -167,13 +167,13 @@
     font-family: var(--font-playfair);
     font-size: 1.3rem;
     margin: 2rem 0 1rem;
-    color: #C5A059;
+    color: #d3cab3;
 }
 
 .hours {
     font-size: 1rem;
     line-height: 1.8;
-    color: #C5A059;
+    color: #c49c5c;
 }
 
 /* Copyright */
@@ -183,18 +183,18 @@
     padding-top: 1.5rem;
     /* border-top: 1px solid rgba(197, 160, 89, 0.3); */
     font-size: 0.9rem;
-    color: #C5A059;
+    color: #c49c5c;
     opacity: 0.8;
 }
 
 .copyright a {
-    color: #fff;
+    color: #d3cab3;
     text-decoration: none;
     transition: color 0.3s;
 }
 
 .copyright a:hover {
-    color: #C5A059;
+    color: #d3cab3;
 }
 
 @media (max-width: 1024px) {
diff --git a/src/components/Gallery/Gallery.module.css b/src/components/Gallery/Gallery.module.css
index 71d3eac..851c874 100644
--- a/src/components/Gallery/Gallery.module.css
+++ b/src/components/Gallery/Gallery.module.css
@@ -10,7 +10,7 @@
 .title {
     font-family: var(--font-cinzel), serif;
     font-size: 3.5rem;
-    color: #C5A059;
+    color: #c49c5c;
     margin-bottom: 10px;
     text-transform: uppercase;
     letter-spacing: 2px;
@@ -31,11 +31,10 @@
     cursor: pointer;
     overflow: hidden;
     /* Outer golden border */
-    border: 4px solid #C5A059;
-    /* Inner border effect using box-shadow */
-    box-shadow:
-        inset 0 0 0 3px #2a1810,
-        inset 0 0 0 6px #C5A059;
+    border: 2px solid #b07c4b;
+        /* Inner border effect using box-shadow */
+    box-shadow: inset 0 0 0 3px #2a1810,
+        inset 0 0 0 6px #c49c5c;
     transition: transform 0.3s ease;
     background-color: #1a0f08;
 }
diff --git a/src/components/Hero/Hero.module.css b/src/components/Hero/Hero.module.css
index a1cb6bf..071fcf1 100644
--- a/src/components/Hero/Hero.module.css
+++ b/src/components/Hero/Hero.module.css
@@ -78,9 +78,9 @@
 }
 
 .btn {
-    padding: 15px 25px;
+    padding: 25px 40px;
     font-family: var(--font-lato);
-    font-size: 12px;
+    font-size: 20px;
     text-transform: uppercase;
     letter-spacing: 1px;
     cursor: pointer;
diff --git a/src/components/Navbar/Navbar.module.css b/src/components/Navbar/Navbar.module.css
index cae8bf1..f5687ad 100644
--- a/src/components/Navbar/Navbar.module.css
+++ b/src/components/Navbar/Navbar.module.css
@@ -82,7 +82,7 @@
 .bar {
     width: 30px;
     height: 3px;
-    background-color: #C5A059;
+    background-color: #c49c5c;
     transition: all 0.3s ease;
 }
 
@@ -139,7 +139,7 @@
 }
 
 .mobileNavLink:hover {
-    color: #C5A059;
+    color: #c49c5c;
 }
 
 @media (max-width: 1024px) {
diff --git a/src/components/PopularDishes/PopularDishes.module.css b/src/components/PopularDishes/PopularDishes.module.css
index c7f5c6e..1e00c40 100644
--- a/src/components/PopularDishes/PopularDishes.module.css
+++ b/src/components/PopularDishes/PopularDishes.module.css
@@ -11,7 +11,7 @@
 .title {
     font-family: var(--font-cinzel), serif;
     font-size: 3.5rem;
-    color: #C5A059;
+    color: #c49c5c;
     margin-bottom: 60px;
     text-transform: uppercase;
     letter-spacing: 2px;
@@ -30,9 +30,9 @@
     background-color: #F5E6D3;
     /* Cream background */
     padding: 20px;
-    border: 4px solid #C5A059;
-    /* Gold border */
-    display: flex;
+    border: 2px solid #b07c4b;
+        /* Gold border */
+        display: flex;
     flex-direction: column;
     align-items: center;
     transition: transform 0.3s ease;
@@ -47,14 +47,14 @@
     width: 100%;
     height: 300px;
     margin-bottom: 25px;
-    border: 1px solid #C5A059;
+    border: 1px solid #c49c5c;
     /* Inner border for image */
 }
 
 .dishName {
     font-family: var(--font-cinzel), serif;
     font-size: 1.8rem;
-    color: #c5a059;
+    color: #c49c5c;
     /* Dark brown text */
     margin-bottom: 15px;
     font-weight: 600;
@@ -74,8 +74,8 @@
 .button {
     display: inline-block;
     padding: 12px 30px;
-    border: 2px solid #C5A059;
-    color: #C5A059;
+    border: 2px solid #b07c4b;
+    color: #c49c5c;
     font-family: var(--font-inter), sans-serif;
     text-transform: uppercase;
     font-size: 0.9rem;
@@ -86,7 +86,7 @@
 }
 
 .button:hover {
-    background-color: #C5A059;
+    background-color: #c49c5c;
     color: #fff;
 }
 
@@ -97,7 +97,7 @@
 .viewMoreButton {
     display: inline-block;
     padding: 15px 40px;
-    border: 1px solid #C5A059;
+    border: 1px solid #c49c5c;
     color: #fff;
     font-family: var(--font-inter), sans-serif;
     text-transform: uppercase;
@@ -108,7 +108,7 @@
 }
 
 .viewMoreButton:hover {
-    background-color: #C5A059;
+    background-color: #c49c5c;
     color: #000;
 }
 
diff --git a/src/components/ScrollToTop/ScrollToTop.module.css b/src/components/ScrollToTop/ScrollToTop.module.css
index 457c52f..b408e9a 100644
--- a/src/components/ScrollToTop/ScrollToTop.module.css
+++ b/src/components/ScrollToTop/ScrollToTop.module.css
@@ -5,7 +5,7 @@
     width: 3.5rem;
     height: 3.5rem;
     border-radius: 50%;
-    background-color: #C5A059;
+    background-color: #c49c5c;
     /* Gold color matching the theme */
     color: #fff;
     border: none;
diff --git a/src/components/Testimonials/Testimonials.module.css b/src/components/Testimonials/Testimonials.module.css
index 6cd224f..984dc7a 100644
--- a/src/components/Testimonials/Testimonials.module.css
+++ b/src/components/Testimonials/Testimonials.module.css
@@ -20,7 +20,7 @@
     font-family: var(--font-cinzel), serif;
     /* Assuming Cinzel is available or similar serif */
     font-size: 3.5rem;
-    color: #C5A059;
+    color: #c49c5c;
     text-align: center;
     margin-bottom: 60px;
     letter-spacing: 2px;
@@ -104,7 +104,7 @@
     font-family: var(--font-inter), sans-serif;
     /* Assuming Inter or similar */
     font-size: 1.1rem;
-    color: #C5A059;
+    color: #c49c5c;
     margin-bottom: 30px;
     font-weight: 500;
 }
@@ -119,7 +119,7 @@
 }
 
 .stars {
-    color: #C5A059;
+    color: #c49c5c;
     font-size: 1.5rem;
     letter-spacing: 5px;
 }
@@ -128,7 +128,7 @@
     position: absolute;
     top: 50%;
     transform: translateY(-50%);
-    color: #C5A059;
+    color: #c49c5c;
     font-size: 3rem;
     cursor: pointer;
     background: none;
@@ -192,6 +192,7 @@
         max-width: 50%;
         margin: 0;
     }
+
     .card:nth-child(3) {
         display: none;
     }
@@ -246,6 +247,7 @@
     .card:nth-child(2) {
         display: none;
     }
+
     .card:nth-child(3) {
         display: none;
     }
diff --git a/src/components/Testimonials/TestimonialsTailwind.tsx b/src/components/Testimonials/TestimonialsTailwind.tsx
index 26c3e14..6025751 100644
--- a/src/components/Testimonials/TestimonialsTailwind.tsx
+++ b/src/components/Testimonials/TestimonialsTailwind.tsx
@@ -181,7 +181,7 @@ const TestimonialsSection: React.FC = () => {
                                                 </svg>
                                             ))}
                                         </div>
-                                        <button className="px-8 py-3 border-2 border-[#C5A059] text-[#C5A059] uppercase tracking-wider hover:bg-[#C5A059] hover:text-black transition-all duration-300 font-medium">
+                                        <button className="px-8 py-3 border-2 border-[#c49c5c] text-[#c49c5c] uppercase tracking-wider hover:bg-[#c49c5c] hover:text-black transition-all duration-300 font-medium">
                                             Learn More
                                         </button>
                                     </div>
@@ -189,7 +189,7 @@ const TestimonialsSection: React.FC = () => {
                             </div>
                         ))}
                     </div>
-                    
+
                 </div>
             </div>
         </section>