diff --git a/package-lock.json b/package-lock.json
index 0550e34..5ee8a02 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -4216,6 +4216,112 @@
         "url": "https://github.com/sponsors/tannerlinsley"
       }
     },
+    "node_modules/@testing-library/dom": {
+      "version": "10.4.0",
+      "resolved": "https://registry.npmjs.org/@testing-library/dom/-/dom-10.4.0.tgz",
+      "integrity": "sha512-pemlzrSESWbdAloYml3bAJMEfNh1Z7EduzqPKprCH5S341frlpYnUEW0H72dLxa6IsYr+mPno20GiSm+h9dEdQ==",
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "@babel/code-frame": "^7.10.4",
+        "@babel/runtime": "^7.12.5",
+        "@types/aria-query": "^5.0.1",
+        "aria-query": "5.3.0",
+        "chalk": "^4.1.0",
+        "dom-accessibility-api": "^0.5.9",
+        "lz-string": "^1.5.0",
+        "pretty-format": "^27.0.2"
+      },
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@testing-library/dom/node_modules/ansi-styles": {
+      "version": "4.3.0",
+      "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
+      "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "color-convert": "^2.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/ansi-styles?sponsor=1"
+      }
+    },
+    "node_modules/@testing-library/dom/node_modules/aria-query": {
+      "version": "5.3.0",
+      "resolved": "https://registry.npmjs.org/aria-query/-/aria-query-5.3.0.tgz",
+      "integrity": "sha512-b0P0sZPKtyu8HkeRAfCq0IfURZK+SuwMjY1UXGBU27wpAiTwQAIlq56IbIO+ytk/JjS1fMR14ee5WBBfKi5J6A==",
+      "license": "Apache-2.0",
+      "peer": true,
+      "dependencies": {
+        "dequal": "^2.0.3"
+      }
+    },
+    "node_modules/@testing-library/dom/node_modules/chalk": {
+      "version": "4.1.2",
+      "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
+      "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==",
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "ansi-styles": "^4.1.0",
+        "supports-color": "^7.1.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/chalk?sponsor=1"
+      }
+    },
+    "node_modules/@testing-library/dom/node_modules/color-convert": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
+      "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "color-name": "~1.1.4"
+      },
+      "engines": {
+        "node": ">=7.0.0"
+      }
+    },
+    "node_modules/@testing-library/dom/node_modules/color-name": {
+      "version": "1.1.4",
+      "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
+      "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
+      "license": "MIT",
+      "peer": true
+    },
+    "node_modules/@testing-library/dom/node_modules/has-flag": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
+      "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
+      "license": "MIT",
+      "peer": true,
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/@testing-library/dom/node_modules/supports-color": {
+      "version": "7.2.0",
+      "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
+      "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "has-flag": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
     "node_modules/@testing-library/jest-dom": {
       "version": "5.17.0",
       "resolved": "https://registry.npmjs.org/@testing-library/jest-dom/-/jest-dom-5.17.0.tgz",
@@ -6382,6 +6488,13 @@
       "integrity": "sha512-x+VAiMRL6UPkx+kudNvxTl6hB2XNNCG2r+7wixVfIYwu/2HKRXimwQyaumLjMveWvT2Hkd/cAJw+QBMfJ/EKVw==",
       "license": "MIT"
     },
+    "node_modules/bezier-easing": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/bezier-easing/-/bezier-easing-2.1.0.tgz",
+      "integrity": "sha512-gbIqZ/eslnUFC1tjEvtz0sgx+xTK20wDnYMIA27VA04R7w6xxXQPZDbibjA9DTWZRA2CXtwHykkVzlCaAJAZig==",
+      "license": "MIT",
+      "peer": true
+    },
     "node_modules/bfj": {
       "version": "7.1.0",
       "resolved": "https://registry.npmjs.org/bfj/-/bfj-7.1.0.tgz",
@@ -6419,6 +6532,13 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/bindall-standalone": {
+      "version": "1.0.5",
+      "resolved": "https://registry.npmjs.org/bindall-standalone/-/bindall-standalone-1.0.5.tgz",
+      "integrity": "sha512-HDI7YBWXVJk/eoGz+e4lYQQJnYp1ZHcUvAY71lVptLMhQnDm86vD73AGPw2qIlgYR3P0bjmoAcXiA8qhFejBhA==",
+      "license": "MIT",
+      "peer": true
+    },
     "node_modules/bluebird": {
       "version": "3.7.2",
       "resolved": "https://registry.npmjs.org/bluebird/-/bluebird-3.7.2.tgz",
@@ -7759,6 +7879,16 @@
         "node": ">= 0.8"
       }
     },
+    "node_modules/dequal": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/dequal/-/dequal-2.0.3.tgz",
+      "integrity": "sha512-0je+qPKHEMohvfRTCEo3CrPG6cAzAYgmzKyxRiYSSDkS6eGJdyVJm7WaYA5ECaAD9wLB2T4EEeymA5aFVcYXCA==",
+      "license": "MIT",
+      "peer": true,
+      "engines": {
+        "node": ">=6"
+      }
+    },
     "node_modules/destroy": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/destroy/-/destroy-1.2.0.tgz",
@@ -13636,6 +13766,13 @@
         "shell-quote": "^1.8.1"
       }
     },
+    "node_modules/lethargy": {
+      "version": "1.0.9",
+      "resolved": "https://registry.npmjs.org/lethargy/-/lethargy-1.0.9.tgz",
+      "integrity": "sha512-nFM8blpCF9rqIL5mRAaTGc78W8oQixVtsD86jbEPvcI13+lDUYJf3R7DZQQL7tCiBpbGpGKMX2gwJFO9hiaOkg==",
+      "license": "MIT",
+      "peer": true
+    },
     "node_modules/leven": {
       "version": "3.1.0",
       "resolved": "https://registry.npmjs.org/leven/-/leven-3.1.0.tgz",
@@ -13708,6 +13845,18 @@
         "node": ">=8"
       }
     },
+    "node_modules/locomotive-scroll": {
+      "version": "4.1.4",
+      "resolved": "https://registry.npmjs.org/locomotive-scroll/-/locomotive-scroll-4.1.4.tgz",
+      "integrity": "sha512-6i98cFF2SKg6wIPpwVPuo2FG8qL3USsdDeew78TEYZyLoqleMWNfkSDpWA6mPym4dOfTIBXc678VmGlkgx3fTA==",
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "bezier-easing": "^2.1.0",
+        "smoothscroll-polyfill": "^0.4.4",
+        "virtual-scroll": "^1.5.2"
+      }
+    },
     "node_modules/lodash": {
       "version": "4.17.21",
       "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz",
@@ -17666,6 +17815,13 @@
         "node": ">=8"
       }
     },
+    "node_modules/smoothscroll-polyfill": {
+      "version": "0.4.4",
+      "resolved": "https://registry.npmjs.org/smoothscroll-polyfill/-/smoothscroll-polyfill-0.4.4.tgz",
+      "integrity": "sha512-TK5ZA9U5RqCwMpfoMq/l1mrH0JAR7y7KRvOBx0n2869aLxch+gT9GhN3yUfjiw+d/DiF1mKo14+hd62JyMmoBg==",
+      "license": "MIT",
+      "peer": true
+    },
     "node_modules/sockjs": {
       "version": "0.3.24",
       "resolved": "https://registry.npmjs.org/sockjs/-/sockjs-0.3.24.tgz",
@@ -18761,6 +18917,13 @@
       "integrity": "sha512-eHY7nBftgThBqOyHGVN+l8gF0BucP09fMo0oO/Lb0w1OF80dJv+lDVpXG60WMQvkcxAkNybKsrEIE3ZtKGmPrA==",
       "license": "MIT"
     },
+    "node_modules/tiny-emitter": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/tiny-emitter/-/tiny-emitter-1.2.0.tgz",
+      "integrity": "sha512-rWjF00inHeWtT5UbQYAXoMI4hL6TRMqohuKCsODyPYYmfAxqfMnXLsIeNrbdPEkNxlk++rojVilTnI9IVmEBtA==",
+      "license": "MIT",
+      "peer": true
+    },
     "node_modules/tmpl": {
       "version": "1.0.5",
       "resolved": "https://registry.npmjs.org/tmpl/-/tmpl-1.0.5.tgz",
@@ -19033,6 +19196,20 @@
         "is-typedarray": "^1.0.0"
       }
     },
+    "node_modules/typescript": {
+      "version": "4.9.5",
+      "resolved": "https://registry.npmjs.org/typescript/-/typescript-4.9.5.tgz",
+      "integrity": "sha512-1FXk9E2Hm+QzZQ7z+McJiHL4NW1F2EzMu9Nq9i3zAaGqibafqYwCVU6WyWAuyQRRzOlxou8xZSyXLEN8oKj24g==",
+      "license": "Apache-2.0",
+      "peer": true,
+      "bin": {
+        "tsc": "bin/tsc",
+        "tsserver": "bin/tsserver"
+      },
+      "engines": {
+        "node": ">=4.2.0"
+      }
+    },
     "node_modules/unbox-primitive": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/unbox-primitive/-/unbox-primitive-1.0.2.tgz",
@@ -19303,6 +19480,19 @@
         "node": ">= 0.8"
       }
     },
+    "node_modules/virtual-scroll": {
+      "version": "1.5.2",
+      "resolved": "https://registry.npmjs.org/virtual-scroll/-/virtual-scroll-1.5.2.tgz",
+      "integrity": "sha512-7jDHwlKbHUho7CYU/HojE/VKFH8GV9P5fVWP2HCa7dRUOpVvwl93OBOKIIcb2mKd+vqsbVR/0zl0X70+3sUZqA==",
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "bindall-standalone": "^1.0.5",
+        "lethargy": "^1.0.2",
+        "object-assign": "^4.0.1",
+        "tiny-emitter": "^1.0.0"
+      }
+    },
     "node_modules/w3c-hr-time": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/w3c-hr-time/-/w3c-hr-time-1.0.2.tgz",
diff --git a/public/index.html b/public/index.html
index f9e29b1..b9178d0 100644
--- a/public/index.html
+++ b/public/index.html
@@ -10,6 +10,7 @@
       content="Web site created using create-react-app"
     />
     <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
+    <link href="https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;700&family=Poppins:wght@400;500;600&display=swap" rel="stylesheet" />
     <!--
       manifest.json provides metadata used when your web app is installed on a
       user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
diff --git a/src/Pages/About.js b/src/Pages/About.js
index 4b1e419..e2bcea2 100644
--- a/src/Pages/About.js
+++ b/src/Pages/About.js
@@ -4,29 +4,41 @@ import { motion } from 'framer-motion';
 import Button from '../componets/Button';
 
 const AboutContainer = styled.div`
-  padding: 4rem 2rem;
+  padding: 6rem 2rem 4rem 2rem;
   max-width: 1200px;
   margin: 0 auto;
+  background-color: #fffbeb;
 `;
 
 const Title = styled(motion.h1)`
   font-size: 2.5rem;
-  margin-bottom: 2rem;
+  margin-bottom: 3rem;
   text-align: center;
+  color: #78350f;
+  font-weight: bold;
 `;
 
 const Content = styled(motion.div)`
   display: flex;
   flex-direction: column;
-  gap: 2rem;
-
+  gap: 3rem;
+  max-width: 1100px;
+  margin: 0 auto;
+  
   @media (min-width: 768px) {
     flex-direction: row;
+    align-items: center;
   }
 `;
 
 const TextContent = styled(motion.div)`
   flex: 1;
+  p {
+    color: #92400e;
+    font-size: 1.1rem;
+    line-height: 1.8;
+    margin-bottom: 1.5rem;
+  }
 `;
 
 const ImageContent = styled(motion.div)`
@@ -34,12 +46,14 @@ const ImageContent = styled(motion.div)`
   display: flex;
   justify-content: center;
   align-items: center;
+  padding: 1rem;
 `;
 
 const Image = styled(motion.img)`
   max-width: 100%;
   height: auto;
-  border-radius: 8px;
+  border-radius: 12px;
+  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
 `;
 
 function About() {
@@ -50,7 +64,7 @@ function About() {
         animate={{ opacity: 1, y: 0 }}
         transition={{ duration: 0.5 }}
       >
-        About  MsCafe
+        About MsCafe
       </Title>
       <Content>
         <TextContent
@@ -71,7 +85,10 @@ function About() {
           animate={{ opacity: 1, x: 0 }}
           transition={{ duration: 0.5, delay: 0.4 }}
         >
-          <Image src="https://img.freepik.com/free-photo/digital-lavender-style-interior-design_23-2151561226.jpg?t=st=1727763316~exp=1727766916~hmac=621a2fad85c2229414cc73a6d1c40e4525802c326c6494db624ca97d2fda6bc2&w=1380" alt="Zumar Cafe Interior" />
+          <Image 
+            src="https://img.freepik.com/free-photo/digital-lavender-style-interior-design_23-2151561226.jpg?t=st=1727763316~exp=1727766916~hmac=621a2fad85c2229414cc73a6d1c40e4525802c326c6494db624ca97d2fda6bc2&w=1380" 
+            alt="Zumar Cafe Interior" 
+          />
         </ImageContent>
       </Content>
     </AboutContainer>
diff --git a/src/Pages/Home.css b/src/Pages/Home.css
new file mode 100644
index 0000000..1b4f556
--- /dev/null
+++ b/src/Pages/Home.css
@@ -0,0 +1,98 @@
+/* CafeHome.css */
+@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;600;700&family=Poppins:wght@300;400;500;600&display=swap');
+
+:root {
+  --primary-coffee: #8B4513;
+  --secondary-coffee: #D2691E;
+  --cream: #FFE4B5;
+  --light-cream: #FDF5E6;
+  --dark-coffee: #2C130B;
+}
+
+/* Custom Scrollbar */
+::-webkit-scrollbar {
+  width: 10px;
+}
+
+::-webkit-scrollbar-track {
+  background: var(--light-cream);
+}
+
+::-webkit-scrollbar-thumb {
+  background: var(--primary-coffee);
+  border-radius: 5px;
+}
+
+::-webkit-scrollbar-thumb:hover {
+  background: var(--secondary-coffee);
+}
+
+/* Smooth Scroll Behavior */
+html {
+  scroll-behavior: smooth;
+}
+
+/* Coffee Steam Animation */
+@keyframes steam {
+  0% {
+    transform: translateY(0) translateX(-50%) scale(1);
+    opacity: 0.8;
+  }
+  50% {
+    transform: translateY(-20px) translateX(-50%) scale(1.2);
+    opacity: 0.4;
+  }
+  100% {
+    transform: translateY(-40px) translateX(-50%) scale(1);
+    opacity: 0;
+  }
+}
+
+.steam {
+  position: absolute;
+  top: -20px;
+  left: 50%;
+  transform: translateX(-50%);
+  font-size: 1.5rem;
+  color: var(--cream);
+  pointer-events: none;
+  animation: steam 3s infinite;
+}
+
+/* Feature Card Hover Effect */
+.feature-card:hover .steam {
+  opacity: 1;
+}
+
+/* Image Loading Animation */
+.lazy-image {
+  opacity: 0;
+  transition: opacity 0.3s ease-in-out;
+}
+
+.lazy-image.loaded {
+  opacity: 1;
+}
+
+/* Mobile Optimizations */
+@media (max-width: 768px) {
+  .hero-section {
+    background-attachment: scroll;
+  }
+  
+  .feature-card {
+    margin: 1rem;
+  }
+  
+  .specialty-image {
+    width: 250px;
+    height: 250px;
+    margin: 1rem;
+  }
+}
+
+/* Text Selection Color */
+::selection {
+  background: var(--secondary-coffee);
+  color: var(--cream);
+}
\ No newline at end of file
diff --git a/src/Pages/Home.js b/src/Pages/Home.js
index e94e0d3..5064dd9 100644
--- a/src/Pages/Home.js
+++ b/src/Pages/Home.js
@@ -5,12 +5,15 @@ import { ScrollTrigger } from 'gsap/ScrollTrigger';
 import styled from 'styled-components';
 import { motion } from 'framer-motion';
 import Button from '../componets/Button';
+import './Home.css';
 
 gsap.registerPlugin(ScrollTrigger);
 
 const HomeContainer = styled.div`
   padding: 0;
   max-width: 100%;
+  background-color: #FDF5E6;
+  color: #2C130B;
 `;
 
 const HeroSection = styled.section`
@@ -20,65 +23,136 @@ const HeroSection = styled.section`
   justify-content: center;
   text-align: center;
   height: 100vh;
-  width:100vw;
-  background-image: url('https://cdn.pixabay.com/photo/2024/03/22/18/30/ai-generated-8650286_1280.png');
+  width: 100vw;
+  background-image: linear-gradient(
+    rgba(44, 19, 11, 0.7),
+    rgba(44, 19, 11, 0.7)
+  ), url('https://cdn.pixabay.com/photo/2024/03/22/18/30/ai-generated-8650286_1280.png');
   background-size: cover;
   background-position: center;
-  color: white;
+  background-attachment: fixed;
+  color: #FFE4B5;
+  position: relative;
+  
+  &::after {
+    content: '';
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    height: 100px;
+    background: linear-gradient(to top, #FDF5E6, transparent);
+  }
 `;
 
 const Title = styled(motion.h1)`
-  font-size: 4rem;
-  margin-bottom: 1rem;
+  font-size: 5rem;
+  margin-bottom: 1.5rem;
   text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
+  font-family: 'Playfair Display', serif;
+  color: #FFE4B5;
+  
+  @media (max-width: 768px) {
+    font-size: 3rem;
+  }
 `;
 
 const Subtitle = styled(motion.p)`
-  font-size: 1.5rem;
-  margin-bottom: 2rem;
+  font-size: 1.8rem;
+  margin-bottom: 2.5rem;
   text-shadow: 1px 1px 2px rgba(0,0,0,0.5);
+  font-family: 'Poppins', sans-serif;
+  color: #DEB887;
+  max-width: 600px;
+  line-height: 1.4;
+  
+  @media (max-width: 768px) {
+    font-size: 1.4rem;
+    padding: 0 20px;
+  }
+`;
+
+const StyledButton = styled(Button)`
+  background: #D2691E;
+  color: #FFE4B5;
+  padding: 1rem 2.5rem;
+  font-size: 1.2rem;
+  border-radius: 30px;
+  border: 2px solid #8B4513;
+  transition: all 0.3s ease;
+  font-family: 'Poppins', sans-serif;
+  text-transform: uppercase;
+  letter-spacing: 1px;
+  
+  &:hover {
+    background: #8B4513;
+    transform: translateY(-3px);
+    box-shadow: 0 5px 15px rgba(139, 69, 19, 0.3);
+  }
 `;
 
 const FeaturesSection = styled.section`
   display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
-  gap: 2rem;
-  padding: 4rem 2rem;
-  background-color: #f8f8f8;
+  grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
+  gap: 3rem;
+  padding: 6rem 4rem;
+  background: linear-gradient(135deg, #FDF5E6, #FFE4B5);
+  position: relative;
   overflow: visible;
+
+  &::before {
+    content: '☕';
+    position: absolute;
+    top: -30px;
+    left: 50%;
+    transform: translateX(-50%);
+    font-size: 3rem;
+    color: #8B4513;
+  }
+  
+  @media (max-width: 768px) {
+    padding: 4rem 2rem;
+    gap: 2rem;
+  }
 `;
 
 const FeatureCard = styled(motion.div)`
-  background-color: white;
-  padding: 2rem;
-  border-radius: 8px;
+  background: rgba(255, 255, 255, 0.9);
+  padding: 2.5rem;
+  border-radius: 15px;
   text-align: center;
-  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
-  transition: transform 0.3s ease, box-shadow 0.3s ease;
+  box-shadow: 0 10px 30px rgba(139, 69, 19, 0.1);
+  border: 1px solid rgba(210, 105, 30, 0.2);
+  backdrop-filter: blur(10px);
+  transition: all 0.4s ease;
 
   &:hover {
-    transform: scale(1.1);  
-    box-shadow: 0 8px 12px rgba(0, 0, 0, 0.2); 
+    transform: translateY(-10px);
+    box-shadow: 0 15px 40px rgba(139, 69, 19, 0.2);
   }
 `;
 
-
 const FeatureIcon = styled.img`
-  width: 350px;
-  height: 350px;
-  margin-bottom: 1rem;
-  
+  width: 100%;
+  height: 250px;
+  object-fit: cover;
+  border-radius: 10px;
+  margin-bottom: 1.5rem;
+  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
 `;
 
 const FeatureTitle = styled.h3`
-  font-size: 1.5rem;
-  margin-bottom: 0.5rem;
-  color: #333;
+  font-size: 1.8rem;
+  margin-bottom: 1rem;
+  color: #8B4513;
+  font-family: 'Playfair Display', serif;
 `;
 
 const FeatureDescription = styled.p`
-  font-size: 1rem;
-  color: #666;
+  font-size: 1.1rem;
+  color: #6B4423;
+  line-height: 1.6;
+  font-family: 'Poppins', sans-serif;
 `;
 
 const SpecialtySection = styled.section`
@@ -86,17 +160,59 @@ const SpecialtySection = styled.section`
   flex-wrap: wrap;
   justify-content: center;
   align-items: center;
-  padding: 4rem 2rem;
-  background-color: #fff;
+  padding: 6rem 2rem;
+  background: #2C130B;
+  position: relative;
+  
+  &::before {
+    content: 'Our Specialties';
+    position: absolute;
+    top: 2rem;
+    left: 50%;
+    transform: translateX(-50%);
+    font-size: 2.5rem;
+    color: #FFE4B5;
+    font-family: 'Playfair Display', serif;
+  }
 `;
 
 const SpecialtyImage = styled(motion.img)`
-  width: 300px;
-  height: 300px;
+  width: 280px;
+  height: 280px;
   object-fit: cover;
-  border-radius: 50%;
-  margin: 1rem;
-  box-shadow: 0 4px 6px rgba(0,0,0,0.1);
+  border-radius: 20px;
+  margin: 1.5rem;
+  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
+  border: 3px solid #8B4513;
+  transition: all 0.4s ease;
+
+  &:hover {
+    transform: scale(1.05) rotate(3deg);
+    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.4);
+  }
+`;
+
+const ScrollIndicator = styled(motion.div)`
+  position: absolute;
+  bottom: 40px;
+  left: 50%;
+  transform: translateX(-50%);
+  color: #FFE4B5;
+  font-size: 2rem;
+  cursor: pointer;
+  animation: bounce 2s infinite;
+
+  @keyframes bounce {
+    0%, 20%, 50%, 80%, 100% {
+      transform: translateY(0) translateX(-50%);
+    }
+    40% {
+      transform: translateY(-20px) translateX(-50%);
+    }
+    60% {
+      transform: translateY(-10px) translateX(-50%);
+    }
+  }
 `;
 
 function Home() {
@@ -148,20 +264,21 @@ function Home() {
         <Title
           initial={{ opacity: 0, y: -50 }}
           animate={{ opacity: 1, y: 0 }}
-          transition={{ duration: 0.5 }}
+          transition={{ duration: 0.8, ease: "easeOut" }}
         >
           Welcome to MsCafe
         </Title>
         <Subtitle
           initial={{ opacity: 0, y: -30 }}
           animate={{ opacity: 1, y: 0 }}
-          transition={{ duration: 0.5, delay: 0.2 }}
+          transition={{ duration: 0.8, delay: 0.2, ease: "easeOut" }}
         >
-          Experience the finest coffee in town
+          Where every cup tells a story and every sip is an adventure in flavor
         </Subtitle>
         <Link to="/shop">
-          <Button primary>Order Now</Button>
+          <StyledButton primary>Start Your Coffee Journey</StyledButton>
         </Link>
+        <ScrollIndicator>↓</ScrollIndicator>
       </HeroSection>
       <FeaturesSection ref={featuresRef}>
         <FeatureCard>
diff --git a/src/Pages/Shop.js b/src/Pages/Shop.js
index 1aebe38..9c622fd 100644
--- a/src/Pages/Shop.js
+++ b/src/Pages/Shop.js
@@ -6,21 +6,25 @@ import { addToCart } from '../Store/cartSlice';
 import Button from '../componets/Button';
 
 const ShopContainer = styled.div`
-  padding: 4rem 2rem;
+  padding: 6rem 2rem 4rem 2rem; // Added top padding for navbar
   max-width: 1200px;
   margin: 0 auto;
+  background-color: #fffbeb; // Warm background color
 `;
 
 const Title = styled(motion.h1)`
   font-size: 2.5rem;
   margin-bottom: 2rem;
   text-align: center;
+  color: #78350f; // Warm brown color
 `;
 
 const ProductGrid = styled.div`
   display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
   gap: 2rem;
+  max-width: 1100px; // Slightly reduced to center content more
+  margin: 0 auto;
 `;
 
 const ProductCard = styled(motion.div)`
@@ -28,27 +32,35 @@ const ProductCard = styled(motion.div)`
   border-radius: 8px;
   overflow: hidden;
   box-shadow: 0 4px 6px rgba(0,0,0,0.1);
+  transition: box-shadow 0.3s ease;
+  
+  &:hover {
+    box-shadow: 0 8px 12px rgba(0,0,0,0.15);
+  }
 `;
 
 const ProductImage = styled.img`
   width: 100%;
-  height: 200px;
+  height: 220px;
   object-fit: cover;
 `;
 
 const ProductInfo = styled.div`
-  padding: 1rem;
+  padding: 1.25rem;
+  background-color: white;
 `;
 
 const ProductName = styled.h3`
   font-size: 1.2rem;
-  margin-bottom: 0.5rem;
+  margin-bottom: 0.75rem;
+  color: #78350f; // Warm brown color
 `;
 
 const ProductPrice = styled.p`
-  font-size: 1rem;
-  color: #666;
+  font-size: 1.1rem;
+  color: #92400e; // Slightly lighter brown
   margin-bottom: 1rem;
+  font-weight: 500;
 `;
 
 const products = [
diff --git a/src/componets/Navbar.css b/src/componets/Navbar.css
index 31691e0..03cb21a 100644
--- a/src/componets/Navbar.css
+++ b/src/componets/Navbar.css
@@ -1,7 +1,112 @@
+/* Navbar.css */
+@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;700&family=Poppins:wght@400;500;600&display=swap');
 
-a{
-    color:purple;
+body {
+  margin: 0;
+  padding-top: 80px;
+  background: #FDF5E6;
 }
-a:hover {
-    color: #7c2214;
-  }
\ No newline at end of file
+
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+/* Custom scrollbar for the mobile menu */
+.mobile-menu::-webkit-scrollbar {
+  width: 6px;
+}
+
+.mobile-menu::-webkit-scrollbar-track {
+  background: #2C130B;
+}
+
+.mobile-menu::-webkit-scrollbar-thumb {
+  background: #D2691E;
+  border-radius: 3px;
+}
+
+.mobile-menu::-webkit-scrollbar-thumb:hover {
+  background: #CD853F;
+}
+
+/* Add smooth scrolling to the page */
+html {
+  scroll-behavior: smooth;
+}
+
+/* Prevent body scroll when mobile menu is open */
+body.menu-open {
+  overflow: hidden;
+}
+
+/* Active link styles */
+.active-link {
+  color: #FFE4B5 !important;
+  position: relative;
+}
+
+.active-link::after {
+  content: '☕';
+  position: absolute;
+  font-size: 0.8rem;
+  bottom: -15px;
+  left: 50%;
+  transform: translateX(-50%);
+  color: #D2691E;
+}
+
+/* Responsive font sizes */
+@media (max-width: 768px) {
+  .logo {
+    font-size: 1.8rem;
+  }
+  
+  .nav-link {
+    font-size: 1rem;
+  }
+}
+
+/* Animation keyframes for menu items */
+@keyframes slideIn {
+  from {
+    opacity: 0;
+    transform: translateY(-10px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+.menu-item {
+  animation: slideIn 0.3s ease forwards;
+}
+
+/* Coffee steam animation */
+@keyframes steam {
+  0% {
+    transform: translateY(0) scale(1);
+    opacity: 0.8;
+  }
+  50% {
+    transform: translateY(-10px) scale(1.2);
+    opacity: 0.4;
+  }
+  100% {
+    transform: translateY(-20px) scale(1);
+    opacity: 0;
+  }
+}
+
+.steam {
+  position: absolute;
+  top: -15px;
+  left: 50%;
+  transform: translateX(-50%);
+  font-size: 1.2rem;
+  color: rgba(222, 184, 135, 0.6);
+  pointer-events: none;
+  animation: steam 2s infinite;
+}
\ No newline at end of file
diff --git a/src/componets/Navbar.js b/src/componets/Navbar.js
index 6ab784e..cf08477 100644
--- a/src/componets/Navbar.js
+++ b/src/componets/Navbar.js
@@ -1,35 +1,68 @@
-import React, { useState } from 'react';
+import React, { useState, useEffect } from 'react';
 import { Link } from 'react-router-dom';
 import { useSelector, useDispatch } from 'react-redux';
 import { logout } from '../Store/authSlice';
 import styled from 'styled-components';
 import { motion, AnimatePresence } from 'framer-motion';
-import './Navbar.css';
 
 const NavbarContainer = styled(motion.nav)`
   display: flex;
   justify-content: space-between;
   align-items: center;
   padding: 1rem 2rem;
-  color: white;
-  // box-shadow: 0 2px 4px rgba(0,0,0,0.1);
+  background: rgba(44, 19, 11, 0.95);
+  backdrop-filter: blur(10px);
+  box-shadow: 0 2px 20px rgba(30, 12, 5, 0.2);
   position: fixed;
-   
   top: 0;
   left: 0;
   right: 0;
   z-index: 1000;
+  transition: all 0.3s ease;
+  border-bottom: 2px solid #8B4513;
+
+  &.scrolled {
+    padding: 0.8rem 2rem;
+    background: rgba(44, 19, 11, 0.98);
+  }
+
+  &::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background: url('/coffee-beans-pattern.png') repeat;
+    opacity: 0.05;
+    pointer-events: none;
+  }
 `;
 
 const Logo = styled(motion.div)`
-  font-size: 1.5rem;
-  font-weight: bold;
-   
+  font-size: 2rem;
+  font-weight: 700;
+  font-family: 'Playfair Display', serif;
+  
+  a {
+    color: #D2691E;
+    text-decoration: none;
+    background: linear-gradient(to right, #D2691E, #CD853F);
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+    transition: all 0.3s ease;
+    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2);
+    
+    &:hover {
+      opacity: 0.9;
+    }
+  }
 `;
 
 const NavLinks = styled(motion.div)`
   display: flex;
-  gap: 1rem;
+  gap: 2.5rem;
+  align-items: center;
 
   @media (max-width: 768px) {
     display: none;
@@ -37,49 +70,113 @@ const NavLinks = styled(motion.div)`
 `;
 
 const NavLink = styled(motion.div)`
-  color: white;
-  text-decoration: none;
-  &:hover {
-    transition: 0.3s;
-    color: #7c2214;
+  position: relative;
+  
+  a {
+    color: #DEB887;
+    text-decoration: none;
+    font-weight: 500;
+    font-size: 1.1rem;
+    transition: all 0.3s ease;
+    font-family: 'Poppins', sans-serif;
+    
+    &:hover {
+      color: #FFE4B5;
+    }
+  }
+
+  &::after {
+    content: '☕';
+    position: absolute;
+    font-size: 0.8rem;
+    bottom: -15px;
+    left: 50%;
+    transform: translateX(-50%) scale(0);
+    transition: transform 0.3s ease;
+    color: #D2691E;
+  }
+
+  &:hover::after {
+    transform: translateX(-50%) scale(1);
   }
 `;
 
 const MobileMenuButton = styled(motion.button)`
   display: none;
   background: none;
-  border: none;
-  font-size: 1.5rem;
+  border: 2px solid #D2691E;
+  font-size: 1.8rem;
   cursor: pointer;
-  color: white;
+  color: #DEB887;
+  padding: 0.5rem;
+  border-radius: 8px;
+  transition: all 0.3s ease;
+
   @media (max-width: 768px) {
-    display: block;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  &:hover {
+    background: rgba(210, 105, 30, 0.2);
+    color: #FFE4B5;
   }
 `;
 
 const MobileMenu = styled(motion.div)`
   position: fixed;
-  top: 60px;
+  top: 72px;
   left: 0;
   right: 0;
-  color: white;
+  background: rgba(44, 19, 11, 0.98);
   padding: 1rem;
-  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
+  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
+  border-radius: 0 0 15px 15px;
+  border: 2px solid #8B4513;
+  border-top: none;
 `;
 
 const MobileNavLink = styled(motion.div)`
-  padding: 0.5rem 0;
-  border-bottom: 1px solid #eee;
-  &:last-child {
-    border-bottom: none;
+  padding: 1rem;
+  border-radius: 8px;
+  transition: all 0.3s ease;
+  margin-bottom: 0.5rem;
+  
+  a {
+    color: #DEB887;
+    text-decoration: none;
+    font-weight: 500;
+    display: block;
+    transition: all 0.3s ease;
+    font-family: 'Poppins', sans-serif;
+  }
+
+  &:hover {
+    background: rgba(210, 105, 30, 0.2);
+    
+    a {
+      color: #FFE4B5;
+      transform: translateX(10px);
+    }
   }
 `;
 
 function Navbar() {
   const [isOpen, setIsOpen] = useState(false);
+  const [scrolled, setScrolled] = useState(false);
   const isLoggedIn = useSelector((state) => state.auth.isLoggedIn);
   const dispatch = useDispatch();
 
+  useEffect(() => {
+    const handleScroll = () => {
+      setScrolled(window.scrollY > 20);
+    };
+
+    window.addEventListener('scroll', handleScroll);
+    return () => window.removeEventListener('scroll', handleScroll);
+  }, []);
+
   const handleLogout = () => {
     dispatch(logout());
   };
@@ -94,44 +191,46 @@ function Navbar() {
         initial={{ y: -100 }}
         animate={{ y: 0 }}
         transition={{ duration: 0.5 }}
+        className={scrolled ? 'scrolled' : ''}
       >
-        <Logo
-          whileHover={{ scale: 1.1 }}
-          whileTap={{ scale: 0.9 }}
-        >
+        <Logo whileHover={{ scale: 1.05 }} whileTap={{ scale: 0.95 }}>
           <Link to="/">MsCafe</Link>
         </Logo>
         <NavLinks>
-          <NavLink whileHover={{ scale: 1.1 }}>
+          <NavLink whileHover={{ scale: 1.05 }}>
             <Link to="/">Home</Link>
           </NavLink>
-          <NavLink whileHover={{ scale: 1.1 }}>
+          <NavLink whileHover={{ scale: 1.05 }}>
             <Link to="/shop">Shop</Link>
           </NavLink>
-          <NavLink whileHover={{ scale: 1.1 }}>
+          <NavLink whileHover={{ scale: 1.05 }}>
             <Link to="/about">About</Link>
           </NavLink>
-          <NavLink whileHover={{ scale: 1.1 }}>
-            <Link to="/testimonial">Testimonal</Link>
+          <NavLink whileHover={{ scale: 1.05 }}>
+            <Link to="/testimonial">Testimonial</Link>
           </NavLink>
-          <NavLink whileHover={{ scale: 1.1 }}>
+          <NavLink whileHover={{ scale: 1.05 }}>
             <Link to="/contact">Contact</Link>
           </NavLink>
           
           {isLoggedIn ? (
             <>
-              <NavLink whileHover={{ scale: 1.1 }}>
+              <NavLink whileHover={{ scale: 1.05 }}>
                 <Link to="/profile">Profile</Link>
               </NavLink>
-              <NavLink whileHover={{ scale: 1.1 }}>
+              <NavLink whileHover={{ scale: 1.05 }}>
                 <Link to="/cart">Cart</Link>
               </NavLink>
-              <NavLink whileHover={{ scale: 1.1 }} onClick={handleLogout}>
+              <NavLink 
+                whileHover={{ scale: 1.05 }} 
+                onClick={handleLogout}
+                style={{ cursor: 'pointer' }}
+              >
                 Logout
               </NavLink>
             </>
           ) : (
-            <NavLink whileHover={{ scale: 1.1 }}>
+            <NavLink whileHover={{ scale: 1.05 }}>
               <Link to="/login">Login</Link>
             </NavLink>
           )}
@@ -141,7 +240,7 @@ function Navbar() {
           whileHover={{ scale: 1.1 }}
           whileTap={{ scale: 0.9 }}
         >
-          ☰
+          {isOpen ? '×' : '☰'}
         </MobileMenuButton>
       </NavbarContainer>
       <AnimatePresence>
@@ -152,32 +251,39 @@ function Navbar() {
             exit={{ opacity: 0, y: -20 }}
             transition={{ duration: 0.3 }}
           >
-            <MobileNavLink whileHover={{ scale: 1.05 }}>
+            <MobileNavLink whileHover={{ scale: 1.02 }}>
               <Link to="/" onClick={toggleMenu}>Home</Link>
             </MobileNavLink>
-            <MobileNavLink whileHover={{ scale: 1.05 }}>
+            <MobileNavLink whileHover={{ scale: 1.02 }}>
               <Link to="/shop" onClick={toggleMenu}>Shop</Link>
             </MobileNavLink>
-            <MobileNavLink whileHover={{ scale: 1.05 }}>
+            <MobileNavLink whileHover={{ scale: 1.02 }}>
               <Link to="/about" onClick={toggleMenu}>About</Link>
             </MobileNavLink>
-            <MobileNavLink whileHover={{ scale: 1.05 }}>
+            <MobileNavLink whileHover={{ scale: 1.02 }}>
+              <Link to="/testimonial" onClick={toggleMenu}>Testimonial</Link>
+            </MobileNavLink>
+            <MobileNavLink whileHover={{ scale: 1.02 }}>
               <Link to="/contact" onClick={toggleMenu}>Contact</Link>
             </MobileNavLink>
             {isLoggedIn ? (
               <>
-                <MobileNavLink whileHover={{ scale: 1.05 }}>
+                <MobileNavLink whileHover={{ scale: 1.02 }}>
                   <Link to="/profile" onClick={toggleMenu}>Profile</Link>
                 </MobileNavLink>
-                <MobileNavLink whileHover={{ scale: 1.05 }}>
+                <MobileNavLink whileHover={{ scale: 1.02 }}>
                   <Link to="/cart" onClick={toggleMenu}>Cart</Link>
                 </MobileNavLink>
-                <MobileNavLink whileHover={{ scale: 1.05 }} onClick={() => { handleLogout(); toggleMenu(); }}>
+                <MobileNavLink 
+                  whileHover={{ scale: 1.02 }} 
+                  onClick={() => { handleLogout(); toggleMenu(); }}
+                  style={{ cursor: 'pointer' }}
+                >
                   Logout
                 </MobileNavLink>
               </>
             ) : (
-              <MobileNavLink whileHover={{ scale: 1.05 }}>
+              <MobileNavLink whileHover={{ scale: 1.02 }}>
                 <Link to="/login" onClick={toggleMenu}>Login</Link>
               </MobileNavLink>
             )}
@@ -188,4 +294,4 @@ function Navbar() {
   );
 }
 
-export default Navbar;
+export default Navbar;
\ No newline at end of file
diff --git a/src/componets/footer.js b/src/componets/footer.js
index 37a6be5..2e4b90b 100644
--- a/src/componets/footer.js
+++ b/src/componets/footer.js
@@ -3,59 +3,87 @@ import styled from 'styled-components';
 import { motion } from 'framer-motion';
 
 const FooterContainer = styled.footer`
-  background-color: #333;
-  color: white;
-  padding: 2rem;
+  background-color: #78350f;
+  color: #fffbeb;
+  padding: 3rem 2rem;
   text-align: center;
   position: relative;
   bottom: 0;
   width: 100%;
+  box-shadow: 0 -4px 6px rgba(0, 0, 0, 0.1);
+`;
+
+const FooterContent = styled.div`
+  max-width: 1200px;
+  margin: 0 auto;
+  
+  p {
+    margin: 0.5rem 0;
+    font-size: 1rem;
+    line-height: 1.6;
+    
+    &:first-child {
+      font-weight: 500;
+    }
+  }
 `;
 
 const SocialIcons = styled.div`
   display: flex;
   justify-content: center;
-  gap: 1rem;
-  margin-top: 1rem;
+  gap: 2rem;
+  margin-top: 1.5rem;
 `;
 
 const SocialIcon = styled(motion.a)`
-  color: white;
+  color: #fffbeb;
   font-size: 1.5rem;
   text-decoration: none;
+  padding: 0.5rem;
+  border-radius: 50%;
+  transition: color 0.3s ease;
+  
+  &:hover {
+    color: #fbbf24;
+  }
 `;
 
 function Footer() {
   return (
     <FooterContainer>
-      <p>&copy; 2023 MsCafe. All rights reserved.</p>
-      <p >Made by Mscoder</p>
-      <SocialIcons>
-        <SocialIcon
-          href="https://facebook.com"
-          target="_blank"
-          rel="noopener noreferrer"
-          whileHover={{ scale: 1.2 }}
-        >
-          <i className="fab fa-facebook-f"></i>
-        </SocialIcon>
-        <SocialIcon
-          href="https://twitter.com"
-          target="_blank"
-          rel="noopener noreferrer"
-          whileHover={{ scale: 1.2 }}
-        >
-          <i className="fab fa-twitter"></i>
-        </SocialIcon>
-        <SocialIcon
-          href="https://instagram.com"
-          target="_blank"
-          rel="noopener noreferrer"
-          whileHover={{ scale: 1.2 }}
-        >
-          <i className="fab fa-instagram"></i>
-        </SocialIcon>
-      </SocialIcons>
+      <FooterContent>
+        <p>&copy; 2023 MsCafe. All rights reserved.</p>
+        <p>Made with ♥ by Mscoder</p>
+        <SocialIcons>
+          <SocialIcon
+            href="https://facebook.com"
+            target="_blank"
+            rel="noopener noreferrer"
+            whileHover={{ scale: 1.2 }}
+            aria-label="Facebook"
+          >
+            <i className="fab fa-facebook-f"></i>
+          </SocialIcon>
+          <SocialIcon
+            href="https://twitter.com"
+            target="_blank"
+            rel="noopener noreferrer"
+            whileHover={{ scale: 1.2 }}
+            aria-label="Twitter"
+          >
+            <i className="fab fa-twitter"></i>
+          </SocialIcon>
+          <SocialIcon
+            href="https://instagram.com"
+            target="_blank"
+            rel="noopener noreferrer"
+            whileHover={{ scale: 1.2 }}
+            aria-label="Instagram"
+          >
+            <i className="fab fa-instagram"></i>
+          </SocialIcon>
+        </SocialIcons>
+      </FooterContent>
     </FooterContainer>
   );
 }