diff --git a/client/src/components/AboutSection.js b/client/src/components/AboutSection.js
index d6d70c9..bdd03c0 100644
--- a/client/src/components/AboutSection.js
+++ b/client/src/components/AboutSection.js
@@ -1,11 +1,14 @@
-import React, { useState } from "react";
-import styles from "./AboutSection.module.css";
+import React, { useState } from 'react';
+import { motion } from 'framer-motion';
+import { FaHospital, FaHeartbeat, FaUserMd, FaClinicMedical } from 'react-icons/fa';
+import styles from './AboutSection.module.css';
 
-import historyImg from "../assets/history.png";
-import visionImg from "../assets/vision.png";
-import missionImg from "../assets/mission.png";
-import urologyImg from "../assets/urology.png";
-import gynaeImg from "../assets/gyanaecology.png";
+// Import images
+import historyImg from '../assets/history.png';
+import visionImg from '../assets/vision.png';
+import missionImg from '../assets/mission.png';
+import urologyImg from '../assets/urology.png';
+import gynaeImg from '../assets/gyanaecology.png';
 
 const ReadMoreSection = ({
   title,
@@ -14,43 +17,129 @@ const ReadMoreSection = ({
   fullText,
   isExpanded,
   onToggle,
+  index
 }) => {
+  const cardVariants = {
+    hidden: { opacity: 0, y: 20 },
+    visible: (i) => ({
+      opacity: 1,
+      y: 0,
+      transition: {
+        delay: i * 0.1,
+        duration: 0.5,
+        ease: 'easeOut'
+      }
+    })
+  };
+
   return (
-    <div className={`${styles.card} ${isExpanded ? styles.expanded : ""}`}>
+    <motion.div 
+      className={`${styles.card} ${isExpanded ? styles.expanded : ''}`}
+      variants={cardVariants}
+      initial="hidden"
+      whileInView="visible"
+      viewport={{ once: true, margin: '-100px' }}
+      custom={index}
+    >
       <div className={styles.cardHeader}>
-        <h3>{title}</h3>
-        <img src={icon} alt={title} width={30} height={30} />
+        <div className={styles.iconContainer}>
+          <img src={icon} alt={title} className={styles.cardIcon} />
+        </div>
+        <h3 className={styles.cardTitle}>{title}</h3>
       </div>
-      <p className={styles.cardText}>{isExpanded ? fullText : shortText}</p>
-      <button
-        className={`${styles.readMoreButton} ${
-          isExpanded ? styles.expanded : ""
-        }`}
-        onClick={onToggle}
-      >
-        {isExpanded ? "Show Less" : "Read More"}
-      </button>
-    </div>
+      <div className={styles.cardContent}>
+        <p className={styles.cardText}>{isExpanded ? fullText : shortText}</p>
+        <button 
+          className={styles.readMoreButton}
+          onClick={onToggle}
+          aria-expanded={isExpanded}
+          aria-controls={`${title.toLowerCase().replace(/\s+/g, '-')}-content`}
+        >
+          {isExpanded ? (
+            <>
+              Show Less
+              <span className={styles.buttonIcon}>−</span>
+            </>
+          ) : (
+            <>
+              Read More
+              <span className={styles.buttonIcon}>+</span>
+            </>
+          )}
+        </button>
+      </div>
+    </motion.div>
   );
 };
 
-function AboutUs() {
+const AboutUs = () => {
   const [expandedCard, setExpandedCard] = useState(null);
 
   const handleToggle = (title) => {
     setExpandedCard((prev) => (prev === title ? null : title));
   };
 
+  const sectionVariants = {
+    hidden: { opacity: 0 },
+    visible: {
+      opacity: 1,
+      transition: {
+        staggerChildren: 0.1,
+        delayChildren: 0.2
+      }
+    }
+  };
+
+  const aboutCards = [
+    {
+      title: 'Our History',
+      icon: historyImg,
+      shortText: 'With over 15 years of dedicated service, our hospital has been at the forefront of medical excellence...',
+      fullText: 'With over 15 years of dedicated service, our hospital has been at the forefront of medical excellence, combining cutting-edge technology with compassionate care. Our journey began with a simple mission: to provide accessible, high-quality healthcare to our community. Today, we stand as a testament to that commitment, having served thousands of patients with integrity and expertise.'
+    },
+    {
+      title: 'Our Vision',
+      icon: visionImg,
+      shortText: 'To be the most trusted healthcare provider, known for excellence in patient care and medical innovation...',
+      fullText: 'To be the most trusted healthcare provider, known for excellence in patient care and medical innovation. We envision a future where everyone has access to comprehensive, compassionate, and affordable healthcare services. Through continuous improvement and community engagement, we strive to set new standards in medical care and patient experience.'
+    },
+    {
+      title: 'Our Mission',
+      icon: missionImg,
+      shortText: 'To provide exceptional healthcare services through a dedicated team of medical professionals...',
+      fullText: 'To provide exceptional healthcare services through a dedicated team of medical professionals, state-of-the-art technology, and a patient-centered approach. We are committed to improving the health and well-being of our community by delivering personalized, high-quality care with compassion and respect for all individuals.'
+    },
+    {
+      title: 'Urology Care',
+      icon: urologyImg,
+      shortText: 'Our urology department offers comprehensive care for all urological conditions...',
+      fullText: 'Our urology department offers comprehensive care for all urological conditions, from routine check-ups to complex surgical procedures. Our team of board-certified urologists utilizes the latest minimally invasive techniques to provide effective treatments with faster recovery times. We specialize in prostate health, kidney stones, urinary incontinence, and men\'s health issues.'
+    },
+    {
+      title: 'Gynecology Services',
+      icon: gynaeImg,
+      shortText: 'Comprehensive women\'s health services for every stage of life...',
+      fullText: 'Comprehensive women\'s health services for every stage of life. Our expert gynecologists provide compassionate care, from routine exams and family planning to advanced treatments for complex conditions. We prioritize your comfort and well-being, offering personalized care in a supportive environment. Our services include prenatal care, menopause management, and minimally invasive surgical options.'
+    }
+  ];
+
   return (
     <section className={styles.aboutUs} id="about">
       <div className={styles.aboutContainer}>
-        <h1>
-          <i
-            className="bi bi-house-door-fill"
-            style={{ fontSize: "50px", padding: "10px" }}
-          ></i>
-          About Us
-        </h1>
+        <motion.div 
+          className={styles.sectionHeader}
+          initial={{ opacity: 0, y: -20 }}
+          whileInView={{ opacity: 1, y: 0 }}
+          viewport={{ once: true }}
+          transition={{ duration: 0.6 }}
+        >
+          <span className={styles.sectionSubtitle}>Who We Are</span>
+          <h2 className={styles.sectionTitle}>About Our Hospital</h2>
+          <div className={styles.headerDivider}></div>
+          <p className={styles.sectionDescription}>
+            Providing exceptional healthcare services with compassion and expertise since our establishment.
+          </p>
+        </motion.div>
         <p className={styles.text}>
           Welcome to MidCity Hospital Urology and General Nursing Home, a
           leading healthcare institution renowned for its excellence in urology
@@ -60,34 +149,77 @@ function AboutUs() {
         </p>
       </div>
 
-      <div className={styles.cardGrid}>
-        <ReadMoreSection
-          title="Our History"
-          icon={historyImg}
-          shortText="Established in 2019, MidCity Hospital has been at the forefront of healthcare innovation..."
-          fullText="Established in 2019, MidCity Hospital has been at the forefront of healthcare innovation. Our founders, Dr. xyz and Dr. abc, envisioned a hospital that not only treated illnesses but also prioritized patient comfort and satisfaction. Over the decades, we have grown into a multifaceted healthcare provider, expanding our services to meet the evolving needs of our patients."
-          isExpanded={expandedCard === "Our History"}
-          onToggle={() => handleToggle("Our History")}
-        />
-
-        <ReadMoreSection
-          title="Our Vision"
-          icon={visionImg}
-          shortText="Our vision is to be a beacon of excellence in the healthcare industry..."
-          fullText="Our vision is to be a beacon of excellence in the healthcare industry, recognized for our innovative practices, clinical expertise, and unwavering commitment to patient care. We aim to set new standards in healthcare delivery and become the preferred choice for urology and gynecology services."
-          isExpanded={expandedCard === "Our Vision"}
-          onToggle={() => handleToggle("Our Vision")}
-        />
-
-        <ReadMoreSection
-          title="Our Mission"
-          icon={missionImg}
-          shortText="Our mission is to deliver exceptional healthcare services with a patient-centered approach..."
-          fullText="Our mission is to deliver exceptional healthcare services with a patient-centered approach. We strive to enhance the quality of life for our patients by offering advanced medical treatments and personalized care in a welcoming environment."
-          isExpanded={expandedCard === "Our Mission"}
-          onToggle={() => handleToggle("Our Mission")}
-        />
+      <motion.div 
+        className={styles.cardGrid}
+        variants={sectionVariants}
+        initial="hidden"
+        whileInView="visible"
+        viewport={{ once: true }}
+      >
+        {aboutCards.map((card, index) => (
+          <ReadMoreSection
+            key={card.title}
+            title={card.title}
+            icon={card.icon}
+            shortText={card.shortText}
+            fullText={card.fullText}
+            isExpanded={expandedCard === card.title}
+            onToggle={() => handleToggle(card.title)}
+            index={index}
+          />
+        ))}
+      </motion.div>
+
+      <div className={styles.statsContainer}>
+        <motion.div 
+          className={styles.statItem}
+          whileHover={{ y: -5 }}
+          transition={{ type: 'spring', stiffness: 300 }}
+        >
+          <FaHospital className={styles.statIcon} />
+          <div className={styles.statContent}>
+            <span className={styles.statNumber}>15+</span>
+            <span className={styles.statLabel}>Years Experience</span>
+          </div>
+        </motion.div>
+
+        <motion.div 
+          className={styles.statItem}
+          whileHover={{ y: -5 }}
+          transition={{ type: 'spring', stiffness: 300 }}
+        >
+          <FaUserMd className={styles.statIcon} />
+          <div className={styles.statContent}>
+            <span className={styles.statNumber}>50+</span>
+            <span className={styles.statLabel}>Expert Doctors</span>
+          </div>
+        </motion.div>
+
+        <motion.div 
+          className={styles.statItem}
+          whileHover={{ y: -5 }}
+          transition={{ type: 'spring', stiffness: 300 }}
+        >
+          <FaHeartbeat className={styles.statIcon} />
+          <div className={styles.statContent}>
+            <span className={styles.statNumber}>10,000+</span>
+            <span className={styles.statLabel}>Happy Patients</span>
+          </div>
+        </motion.div>
+
+        <motion.div 
+          className={styles.statItem}
+          whileHover={{ y: -5 }}
+          transition={{ type: 'spring', stiffness: 300 }}
+        >
+          <FaClinicMedical className={styles.statIcon} />
+          <div className={styles.statContent}>
+            <span className={styles.statNumber}>24/7</span>
+            <span className={styles.statLabel}>Emergency Care</span>
+          </div>
+        </motion.div>
       </div>
+
       <h2 className={styles.specialtiesHeading}>Specialties</h2>
 
       <div className={styles.specialties}>
diff --git a/client/src/components/AboutSection.module.css b/client/src/components/AboutSection.module.css
index b39122a..ec9d972 100644
--- a/client/src/components/AboutSection.module.css
+++ b/client/src/components/AboutSection.module.css
@@ -1,59 +1,8 @@
-.cardGrid {
-  display: flex;
-  gap: 20px;
-  flex-wrap: wrap;
-  justify-content: center;
-}
+/* Base Styles */
 .aboutUs {
-  padding: 60px 40px;
+  padding: 100px 5%;
   background-color: #ffffff;
-  box-shadow: 0 8px 24px #f6f5f7;
-  margin: 30px auto;
-  border-radius: 12px;
-  max-width: 1400px;
-}
-.aboutContainer {
-  max-width: 1200px;
-  margin: auto;
-  border-radius: 12px;
-}
-.aboutContainer h1 {
-  font-size: 2.8em;
-  color: #eef6f9; 
-  text-align: center;
-  margin-bottom: 30px;
-  background: #203394;
-  border: 1px solid #e2e8f0;
-  border-radius: 12px;
-  height: 120px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  font-weight: 600;
-  letter-spacing: -0.5px;
-  
-}
-
-.text {
-  font-size: 1.2em;
-  color: #1c2733; 
-  line-height: 1.7;
-  margin-bottom: 25px;
-  text-align: justify;
-  font-weight: 400;
-}
-.card {
-  background-color: white;
-  padding: 20px;
-  width: 300px;
-  border-radius: 10px;
-  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
-  transition: transform 0.3s ease, background-color 0.3s ease;
-  cursor: pointer;
-}
-
-.card.expanded {
-  background-color: #e6f0ff;
+  position: relative;
   transform: scale(1.05);
 }
 
diff --git a/client/src/components/HeroSection.js b/client/src/components/HeroSection.js
index 57fe100..8b33b8a 100644
--- a/client/src/components/HeroSection.js
+++ b/client/src/components/HeroSection.js
@@ -1,19 +1,85 @@
-import React from 'react';
+import React, { useState, useEffect } from 'react';
 import styles from './HeroSection.module.css';
 import pic1 from '../assets/pic5.webp';
+import { motion } from 'framer-motion';
 
 const HeroSection = () => {
+  const [imageLoaded, setImageLoaded] = useState(false);
+  const [windowWidth, setWindowWidth] = useState(window.innerWidth);
+
+  useEffect(() => {
+    const handleResize = () => setWindowWidth(window.innerWidth);
+    window.addEventListener('resize', handleResize);
+    return () => window.removeEventListener('resize', handleResize);
+  }, []);
+
+  const fadeInUp = {
+    hidden: { opacity: 0, y: 20 },
+    visible: {
+      opacity: 1,
+      y: 0,
+      transition: {
+        duration: 0.6,
+        ease: 'easeOut',
+      },
+    },
+  };
+
+  const imageVariants = {
+    hidden: { opacity: 0, scale: 0.9 },
+    visible: {
+      opacity: 1,
+      scale: 1,
+      transition: {
+        duration: 0.6,
+        delay: 0.2,
+        ease: 'easeOut',
+      },
+    },
+  };
+
   return (
-    <section className={styles.heroSection}>
+    <section className={styles.heroSection} id="home">
       <div className={styles.heroContainer}>
-        <div className={styles.heroImage}>
-          <img src={pic1} alt="Doctor with patient" />
-        </div>
-        <div className={styles.heroText}>
-          <p>
-            Welcome to <span className={styles.highlight}>MidCity Urology and General Nursing Home</span> — your trusted center for compassionate, reliable urological and general healthcare.
-          </p>
-        </div>
+        <motion.div 
+          className={styles.heroContent}
+          initial="hidden"
+          animate="visible"
+          variants={fadeInUp}
+        >
+          <div className={styles.heroText}>
+            <h1 className={styles.title}>
+              Quality Healthcare <span className={styles.highlight}>Made Accessible</span>
+            </h1>
+            <p className={styles.subtitle}>
+              Welcome to <span className={styles.highlight}>MidCity Urology and General Nursing Home</span> — your trusted center for compassionate, reliable urological and general healthcare.
+            </p>
+            <div className={styles.ctaButtons}>
+              <button className={`${styles.ctaButton} ${styles.primary}`}>
+                Book Appointment
+              </button>
+              <button className={`${styles.ctaButton} ${styles.secondary}`}>
+                Learn More
+              </button>
+            </div>
+          </div>
+        </motion.div>
+
+        <motion.div 
+          className={styles.heroImage}
+          initial="hidden"
+          animate="visible"
+          variants={imageVariants}
+        >
+          {!imageLoaded && <div className={styles.imagePlaceholder}></div>}
+          <img 
+            src={pic1} 
+            alt="Doctor with patient" 
+            className={`${styles.heroImg} ${imageLoaded ? styles.loaded : ''}`}
+            onLoad={() => setImageLoaded(true)}
+            loading="lazy"
+          />
+        </motion.div>
       </div>
     </section>
   );
diff --git a/client/src/components/HeroSection.module.css b/client/src/components/HeroSection.module.css
index 7674b19..f830cc9 100644
--- a/client/src/components/HeroSection.module.css
+++ b/client/src/components/HeroSection.module.css
@@ -1,23 +1,39 @@
 .heroSection {
-  background-color: #0f4613; 
-  padding: 40px 20px;
+  background: linear-gradient(135deg, #0f4613 0%, #1a7a2f 100%);
+  padding: 120px 5% 80px;
+  min-height: 90vh;
   display: flex;
-  flex-direction: column;
-  gap: 40px;
+  align-items: center;
+  position: relative;
+  overflow: hidden;
+  color: white;
 }
 
-.heroContainer,
-.messageContainer {
-  display: flex;
-  flex-direction: row;
+.heroSection::before {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: radial-gradient(circle at 80% 50%, rgba(255, 255, 255, 0.1) 0%, transparent 50%);
+  z-index: 1;
+}
+
+.heroContainer {
+  max-width: 1400px;
+  margin: 0 auto;
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 60px;
   align-items: center;
-  background-color: #ffffff;
-  border-radius: 16px;
-  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
-  overflow: hidden;
-  transition: transform 0.3s ease, box-shadow 0.3s ease;
-  gap: 30px;
-  padding: 30px;
+  position: relative;
+  z-index: 2;
+  width: 100%;
+}
+
+.heroContent {
+  max-width: 600px;
 }
 
 .heroContainer:hover,
@@ -26,49 +42,223 @@
   box-shadow: 0 12px 24px rgba(0, 0, 0, 0.15);
 }
 
+.heroImage {
+  position: relative;
+  width: 100%;
+  max-width: 600px;
+  height: 500px;
+  border-radius: 20px;
+  overflow: hidden;
+  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
+  background: rgba(255, 255, 255, 0.1);
+  backdrop-filter: blur(10px);
+  border: 1px solid rgba(255, 255, 255, 0.1);
+}
 
-.heroImage img,
-.messageImage img {
+.heroImg {
   width: 100%;
-  max-width: 450px;
-  height: auto;
+  height: 100%;
   object-fit: cover;
-  border-radius: 12px;
+  opacity: 0;
+  transition: opacity 0.6s ease-in-out;
+  border-radius: 20px;
 }
 
+.heroImg.loaded {
+  opacity: 1;
+}
 
-.heroText,
-.messageText {
-  flex: 1;
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
+.imagePlaceholder {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
+  background-size: 200% 100%;
+  animation: shimmer 1.5s infinite;
+  border-radius: 20px;
+}
+
+@keyframes shimmer {
+  0% { background-position: -200% 0; }
+  100% { background-position: 200% 0; }
 }
 
-.heroText p,
-.messageText p {
-  font-size: 18px;
-  line-height: 1.8;
-  color: #333;
-  font-weight: 500;
-  margin: 0;
+.heroText {
+  color: white;
 }
+
+.title {
+  font-size: 3.5rem;
+  font-weight: 800;
+  line-height: 1.2;
+  margin-bottom: 1.5rem;
+  background: linear-gradient(90deg, #ffffff, #e6ffed);
+  -webkit-background-clip: text;
+  background-clip: text;
+  color: transparent;
+}
+
+.subtitle {
+  font-size: 1.25rem;
+  line-height: 1.7;
+  margin-bottom: 2.5rem;
+  color: rgba(255, 255, 255, 0.9);
+  max-width: 90%;
+}
+
+.highlight {
+  color: #4ade80;
+  font-weight: 600;
+}
+
 .highlight {
   color: #0f4613;
   font-weight: bold;
 }
 
+.ctaButtons {
+  display: flex;
+  gap: 1rem;
+  margin-top: 2rem;
+}
+
+.ctaButton {
+  padding: 0.9rem 2rem;
+  border-radius: 50px;
+  font-weight: 600;
+  font-size: 1rem;
+  cursor: pointer;
+  transition: all 0.3s ease;
+  border: none;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  text-align: center;
+}
 
-@media (max-width: 1024px) {
-  .heroContainer,
-  .messageContainer {
-    flex-direction: column;
-    text-align: center;
-    padding: 20px;
+.ctaButton.primary {
+  background: #4ade80;
+  color: #0f4613;
+  box-shadow: 0 4px 15px rgba(74, 222, 128, 0.3);
+}
+
+.ctaButton.primary:hover {
+  background: #22c55e;
+  transform: translateY(-2px);
+  box-shadow: 0 6px 20px rgba(74, 222, 128, 0.4);
+}
+
+.ctaButton.secondary {
+  background: transparent;
+  color: white;
+  border: 2px solid rgba(255, 255, 255, 0.3);
+}
+
+.ctaButton.secondary:hover {
+  background: rgba(255, 255, 255, 0.1);
+  transform: translateY(-2px);
+}
+
+/* Responsive Design */
+@media (max-width: 1200px) {
+  .title {
+    font-size: 3rem;
   }
+  
+  .heroContainer {
+    gap: 40px;
+  }
+}
 
-  .heroImage img,
-  .messageImage img {
+@media (max-width: 992px) {
+  .heroContainer {
+    grid-template-columns: 1fr;
+    text-align: center;
+    padding-top: 60px;
+    gap: 40px;
+  }
+  
+  .heroContent {
     max-width: 100%;
+    margin: 0 auto;
+  }
+  
+  .subtitle {
+    max-width: 100%;
+    margin-left: auto;
+    margin-right: auto;
+  }
+  
+  .ctaButtons {
+    justify-content: center;
+  }
+  
+  .heroImage {
+    max-width: 500px;
+    height: 400px;
+    margin: 0 auto;
+  }
+}
+
+@media (max-width: 768px) {
+  .heroSection {
+    padding: 100px 5% 60px;
+    min-height: auto;
   }
+  
+  .title {
+    font-size: 2.5rem;
+    margin-bottom: 1rem;
+  }
+  
+  .subtitle {
+    font-size: 1.1rem;
+    margin-bottom: 2rem;
+  }
+  
+  .ctaButton {
+    padding: 0.8rem 1.5rem;
+    font-size: 0.95rem;
+  }
+  
+  .heroImage {
+    height: 350px;
+  }
+}
+
+@media (max-width: 576px) {
+  .title {
+    font-size: 2rem;
+  }
+  
+  .subtitle {
+    font-size: 1rem;
+  }
+  
+  .ctaButtons {
+    flex-direction: column;
+    gap: 0.75rem;
+  }
+  
+  .heroImage {
+    height: 280px;
+  }
+}
+
+/* Dark mode support */
+.dark .heroSection {
+  background: linear-gradient(135deg, #0a2e10 0%, #0f4f1f 100%);
+}
+
+.dark .title {
+  background: linear-gradient(90deg, #ffffff, #a7f3d0);
+  -webkit-background-clip: text;
+  background-clip: text;
+}
+
+.dark .heroImage {
+  background: rgba(0, 0, 0, 0.2);
+  border: 1px solid rgba(255, 255, 255, 0.05);
 }
\ No newline at end of file
diff --git a/client/src/components/ServiceSection.js b/client/src/components/ServiceSection.js
index 9ce389d..cde9731 100644
--- a/client/src/components/ServiceSection.js
+++ b/client/src/components/ServiceSection.js
@@ -1,15 +1,19 @@
-import React, { useRef, useEffect, useState } from "react";
-import { Link } from "react-router-dom";
-import styles from "./ServiceSection.module.css";
-
-import { FaCog } from "react-icons/fa";
-import {
-  FaPrescriptionBottleMedical,
-  FaVials,
-  FaStethoscope,
-} from "react-icons/fa6";
-import { GiScalpel } from "react-icons/gi";
-import { ChevronLeft, ChevronRight } from "lucide-react";
+import React, { useRef, useState, useEffect } from 'react';
+import { Link } from 'react-router-dom';
+import { motion, AnimatePresence } from 'framer-motion';
+import styles from './ServiceSection.module.css';
+
+// Icons
+import { FaCog, FaArrowRight } from 'react-icons/fa';
+import { FaPrescriptionBottleMedical, FaVials, FaStethoscope } from 'react-icons/fa6';
+import { GiScalpel } from 'react-icons/gi';
+import { IoIosArrowForward } from 'react-icons/io';
+
+// Images
+import pharmacy from '../assets/services/pharmacy.jpg';
+import labs from '../assets/services/labs.jpg';
+import checkup from '../assets/services/checkup.jpeg';
+import surgery from '../assets/services/surgery.jpeg';
 
 import pharmacy from "../assets/services/pharmacy.jpg";
 import labs from "../assets/services/labs.jpg";
@@ -41,7 +45,7 @@ const baseServices = [
     btnText: "Book Now",
     link: "/services/checkup",
   },
-   {
+  {
     title: "Surgery",
     icon: <GiScalpel style={{ marginLeft: "8px", fontSize: "20px" }} />,
     img: surgery,
@@ -57,10 +61,69 @@ const baseServices = [
     btnText: "Book Now",
     link: "/services/physiotherapy",
   },
-  
 ];
 
-function ServiceSection({ darkMode }) {
+const ServiceSection = ({ darkMode }) => {
+  const [activeTab, setActiveTab] = useState(0);
+  const [isHovered, setIsHovered] = useState(null);
+  const containerRef = useRef(null);
+
+  const serviceCategories = [
+    {
+      name: 'All Services',
+      filter: 'all',
+    },
+    {
+      name: 'Medical',
+      filter: 'medical',
+    },
+    {
+      name: 'Diagnostics',
+      filter: 'diagnostics',
+    },
+    {
+      name: 'Specialized',
+      filter: 'specialized',
+    },
+  ];
+
+  const services = baseServices.map((service, index) => ({
+    ...service,
+    category: index % 2 === 0 ? 'medical' : index % 3 === 0 ? 'diagnostics' : 'specialized',
+  }));
+
+  const filteredServices = activeTab === 0 
+    ? services 
+    : services.filter(service => service.category === serviceCategories[activeTab].filter);
+
+  const containerVariants = {
+    hidden: { opacity: 0 },
+    visible: {
+      opacity: 1,
+      transition: {
+        staggerChildren: 0.1,
+        delayChildren: 0.2,
+      },
+    },
+  };
+
+  const itemVariants = {
+    hidden: { y: 20, opacity: 0 },
+    visible: {
+      y: 0,
+      opacity: 1,
+      transition: {
+        duration: 0.5,
+        ease: 'easeOut',
+      },
+    },
+    hover: {
+      y: -10,
+      boxShadow: '0 20px 40px rgba(0, 0, 0, 0.15)',
+      transition: { duration: 0.3 },
+    },
+  };
+
   const modeClass = darkMode ? styles.dark : "";
   const sliderRef = useRef(null);
 
diff --git a/client/src/components/ServiceSection.module.css b/client/src/components/ServiceSection.module.css
index 3e8bde6..1b38c83 100644
--- a/client/src/components/ServiceSection.module.css
+++ b/client/src/components/ServiceSection.module.css
@@ -1,61 +1,410 @@
+/* Base Styles */
 .serviceSection {
+  padding: 100px 5%;
+  background-color: #ffffff;
+  position: relative;
+  overflow: hidden;
+}
+
+/* Section Header */
+.sectionHeader {
   text-align: center;
-  padding: 60px 20px;
-  background-color: #f9f9f9;
-  /* color: #13b33b; */
+  max-width: 800px;
+  margin: 0 auto 60px;
+  position: relative;
 }
 
+.sectionSubtitle {
+  display: inline-block;
+  color: #4f46e5;
+  background: rgba(79, 70, 229, 0.1);
+  padding: 8px 20px;
+  border-radius: 50px;
+  font-size: 1rem;
+  font-weight: 600;
+  margin-bottom: 15px;
+  letter-spacing: 1px;
+}
 
-.serviceSection h1 {
-  font-size: 2.5em;
-  margin-bottom: 20px;
-  border: white 1px; 
-  color: #e6f3e6; 
-  background-color: #203394; 
-  box-shadow: 0 4px 24px #727773;
-  border-radius: 10px;
-  height: 100px;
-  padding-top: 30px;
-  margin-bottom: 15px;;
-  width: 80%;
-  margin: 5px auto;
-  text-align: center;
+.sectionTitle {
+  font-size: 2.8rem;
+  color: #1f2937;
+  margin: 0 0 20px;
+  font-weight: 800;
+  line-height: 1.2;
+  background: linear-gradient(90deg, #1f2937, #4f46e5);
+  -webkit-background-clip: text;
+  background-clip: text;
+  color: transparent;
 }
 
-.cogIcon {
-  color: #1e90ff;
+.headerDivider {
+  width: 80px;
+  height: 4px;
+  background: linear-gradient(90deg, #4f46e5, #8b5cf6);
+  margin: 0 auto 25px;
+  border-radius: 2px;
 }
 
-.serviceContainer {
-  padding-top: 5px;
-  width: 500px;
+.sectionDescription {
+  font-size: 1.2rem;
+  color: #4b5563;
+  line-height: 1.7;
+  margin: 0 auto;
+  max-width: 700px;
+}
+
+
+/* Tabs */
+.tabContainer {
   display: flex;
+  justify-content: center;
   flex-wrap: wrap;
+  gap: 10px;
+  margin-bottom: 40px;
+}
+
+.tabButton {
+  padding: 10px 24px;
+  border: none;
+  background: #f3f4f6;
+  color: #4b5563;
+  border-radius: 50px;
+  font-size: 1rem;
+  font-weight: 600;
+  cursor: pointer;
+  transition: all 0.3s ease;
+  border: 1px solid #e5e7eb;
+}
+
+.tabButton:hover {
+  background: #e5e7eb;
+  color: #1f2937;
+}
+
+.tabButton.activeTab {
+  background: #4f46e5;
+  color: white;
+  box-shadow: 0 4px 14px rgba(79, 70, 229, 0.3);
+}
+
+.cogIcon {
+  color: #1e90ff;
+}
+
+/* Service Grid */
+.serviceGrid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
   gap: 30px;
+  margin: 40px 0;
+  position: relative;
+  z-index: 1;
+}
+
+.serviceCard {
+  background: #ffffff;
+  border-radius: 16px;
+  overflow: hidden;
+  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
+  transition: all 0.3s ease;
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  border: 1px solid #e5e7eb;
+}
+
+.serviceCard:hover {
+  transform: translateY(-8px);
+  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
+  border-color: #e0e7ff;
+}
+
+ /* Card Image */
+.cardImageContainer {
+  position: relative;
+  width: 100%;
+  padding-top: 65%; /* 4:3 aspect ratio */
+  overflow: hidden;
+}
+
+.serviceImage {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  transition: transform 0.5s ease;
+}
+
+.serviceCard:hover .serviceImage {
+  transform: scale(1.05);
+}
+
+.overlay {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: linear-gradient(to bottom, rgba(0,0,0,0.1), rgba(0,0,0,0.7));
+  z-index: 1;
+}
+
+.serviceIcon {
+  position: absolute;
+  top: 20px;
+  right: 20px;
+  z-index: 2;
+  width: 50px;
+  height: 50px;
+  background: rgba(255, 255, 255, 0.9);
+  border-radius: 12px;
+  display: flex;
+  align-items: center;
   justify-content: center;
-  background-color: whitesmoke;
+  color: #4f46e5;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+  transition: all 0.3s ease;
 }
 
- .box {
-  flex: 0 0 55%;        /* width 55%, flex-shrink: 0, no grow */
-  min-width: 300px;      /* ensures it doesn't shrink too much */
-  background: #f9f9f9;
-  border: 1px solid #ddd;
-  border-radius: 10px;
-  box-shadow: 0 2px 5px rgba(0,0,0,0.1);
+.serviceCard:hover .serviceIcon {
+  transform: scale(1.1) rotate(5deg);
+  background: #4f46e5;
+  color: white;
+}
+
+/* Card Content */
+.cardContent {
+  padding: 25px;
   display: flex;
   flex-direction: column;
-  justify-content: space-between;
-  transition: transform 0.3s ease, box-shadow 0.3s ease;
-  scroll-snap-align: start; 
+  flex-grow: 1;
+}
+
+.serviceTitle {
+  font-size: 1.4rem;
+  color: #1f2937;
+  margin: 0 0 12px;
+  font-weight: 700;
+  line-height: 1.3;
 }
 
+.serviceDescription {
+  color: #4b5563;
+  line-height: 1.7;
+  margin: 0 0 20px;
+  font-size: 1rem;
+  flex-grow: 1;
+}
 
-.box:hover {
-      transform:scale(1.05) !important;
-   box-shadow: 0 4px 24px #727773;
+.serviceButton {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+  background: transparent;
+  color: #4f46e5;
+  border: 2px solid #e0e7ff;
+  border-radius: 8px;
+  padding: 10px 20px;
+  font-size: 0.95rem;
+  font-weight: 600;
+  cursor: pointer;
+  transition: all 0.3s ease;
+  margin-top: auto;
+  width: fit-content;
+  text-decoration: none;
+}
+
+.serviceButton:hover {
+  background: #f5f3ff;
+  border-color: #c7d2fe;
+  color: #4338ca;
+  text-decoration: none;
+}
 
+.buttonIcon {
+  display: inline-flex;
+  transition: transform 0.3s ease;
+}
 
+/* CTA Section */
+.ctaContainer {
+  text-align: center;
+  margin-top: 60px;
+  padding: 40px;
+  background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
+  border-radius: 16px;
+  border: 1px solid #e2e8f0;
+}
+
+.ctaText {
+  font-size: 1.4rem;
+  color: #1f2937;
+  margin: 0 0 20px;
+  font-weight: 600;
+}
+
+.ctaButton {
+  display: inline-flex;
+  align-items: center;
+  gap: 10px;
+  background: #4f46e5;
+  color: white;
+  border: none;
+  border-radius: 8px;
+  padding: 12px 28px;
+  font-size: 1.1rem;
+  font-weight: 600;
+  cursor: pointer;
+  transition: all 0.3s ease;
+  text-decoration: none;
+  box-shadow: 0 4px 14px rgba(79, 70, 229, 0.3);
+}
+
+.ctaButton:hover {
+  background: #4338ca;
+  transform: translateY(-2px);
+  box-shadow: 0 6px 20px rgba(79, 70, 229, 0.4);
+  text-decoration: none;
+}
+
+.ctaIcon {
+  transition: transform 0.3s ease;
+}
+
+.ctaButton:hover .ctaIcon {
+  transform: translateX(5px);
+}
+
+/* Responsive Styles */
+@media (max-width: 1024px) {
+  .sectionTitle {
+    font-size: 2.4rem;
+  }
+  
+  .serviceGrid {
+    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
+    gap: 25px;
+  }
+}
+
+@media (max-width: 768px) {
+  .serviceSection {
+    padding: 80px 4%;
+  }
+  
+  .sectionTitle {
+    font-size: 2rem;
+  }
+  
+  .sectionDescription {
+    font-size: 1.1rem;
+  }
+  
+  .tabButton {
+    padding: 8px 16px;
+    font-size: 0.9rem;
+  }
+  
+  .serviceCard {
+    max-width: 100%;
+  }
+}
+
+@media (max-width: 576px) {
+  .sectionHeader {
+    margin-bottom: 40px;
+  }
+  
+  .sectionTitle {
+    font-size: 1.8rem;
+  }
+  
+  .sectionSubtitle {
+    font-size: 0.9rem;
+    padding: 6px 15px;
+  }
+  
+  .tabContainer {
+    gap: 8px;
+  }
+  
+  .tabButton {
+    padding: 6px 14px;
+    font-size: 0.85rem;
+  }
+  
+  .ctaContainer {
+    padding: 30px 20px;
+  }
+  
+  .ctaText {
+    font-size: 1.2rem;
+  }
+  
+  .ctaButton {
+    padding: 10px 20px;
+    font-size: 1rem;
+  }
+}
+
+/* Dark Mode */
+.dark .serviceSection,
+.dark .serviceCard,
+.dark .ctaContainer {
+  background-color: #1f2937;
+  color: #e5e7eb;
+}
+
+.dark .serviceCard {
+  background-color: #1f2937;
+  border-color: #374151;
+  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
+}
+
+.dark .serviceTitle {
+  color: #f3f4f6;
+}
+
+.dark .serviceDescription {
+  color: #9ca3af;
+}
+
+.dark .serviceButton {
+  color: #818cf8;
+  border-color: #3730a3;
+}
+
+.dark .serviceButton:hover {
+  background: rgba(79, 70, 229, 0.1);
+  color: #a5b4fc;
+}
+
+.dark .ctaContainer {
+  background: linear-gradient(135deg, #111827 0%, #1f2937 100%);
+  border-color: #374151;
+}
+
+.dark .ctaText {
+  color: #f3f4f6;
+}
+
+.dark .serviceIcon {
+  background: rgba(79, 70, 229, 0.2);
+  color: #a5b4fc;
+}
+
+.dark .serviceCard:hover .serviceIcon {
+  background: #4f46e5;
+  color: white;
+}
+
+.box:hover {
+  transform: scale(1.05) !important;
+  box-shadow: 0 4px 24px #727773;
 }
 
 .image img {
@@ -79,11 +428,9 @@
   flex: 1;
   padding: 10px;
   text-align: center;
-
   font-size: 1.2rem;
   font-weight: 600;
   margin: 15px 0 10px;
-
   display: flex;
   justify-content: center;
   align-items: center;
@@ -98,7 +445,6 @@
   text-align: justify;
   line-height: 1.5;
   margin-bottom: 12px;
-  /* Add this instead of flex-grow */
 }
 
 .bookButton {
@@ -172,12 +518,12 @@
   color: #eee;
 }
 
-
 :global(body.dark-mode) .serviceSection h1{
   background-color: #1e1e2f;
   color: #fff;
   box-shadow: 0 4px 24px #727773;
 }
+
 :global(body.dark-mode) .box {
   color: #ddd;
   background-color: #1e1e2f;
@@ -187,16 +533,14 @@
 
 :global(body.dark-mode) .box:hover {
   background-color: #202040;
-
-  box-shadow: 0 4px 15px rgb(239, 235, 235);;
-
+  box-shadow: 0 4px 15px rgb(239, 235, 235);
   box-shadow: 0 4px 20px rgb(239, 235, 235);
-
 }
 
 :global(body.dark-mode) .description {
   color: #c1bdbd;
 }
+
 :global(body.dark-mode) .text {
   color: white
 }
@@ -205,8 +549,6 @@
   color: white
 }
 
-
-
 :global(body.dark-mode) .serviceSection h1{
   color: #eef6f9;
   background: #203394;
@@ -223,6 +565,7 @@
   background: #121212;
   box-shadow: 0 10px 24px #000501;
 }
+
 .serviceSlider {
   display: flex;
   overflow-x: auto;
@@ -242,7 +585,6 @@
   flex: 0 0 auto;
   flex: 0 0 calc((100% - 80px) / 5); /* 5 cards, 4 gaps of 20px */
   scroll-snap-align: start;
-
 }
 
 .sliderWrapper {
@@ -267,7 +609,7 @@
 }
 
 .navButton {
-  background-color:#218838; 
+  background-color: #218838;
   color: white;
   border: none;
   border-radius: 50%;
diff --git a/client/src/components/styles.css b/client/src/components/styles.css
index af7ea4e..1e8df25 100644
--- a/client/src/components/styles.css
+++ b/client/src/components/styles.css
@@ -1,31 +1,60 @@
+/* Base Styles */
+:root {
+  --primary-color: #2563eb;
+  --secondary-color: #1e40af;
+  --text-color: #1f2937;
+  --light-bg: #f9fafb;
+  --white: #ffffff;
+  --gray-100: #f3f4f6;
+  --gray-200: #e5e7eb;
+  --gray-300: #d1d5db;
+  --gray-700: #374151;
+  --gray-900: #111827;
+  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
+  --shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
+  --shadow-md: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
+  --radius: 0.375rem;
+  --transition: all 0.2s ease-in-out;
+}
+
+/* Dark Mode */
+.dark-mode {
+  --text-color: #f9fafb;
+  --light-bg: #111827;
+  --white: #1f2937;
+  --gray-100: #1f2937;
+  --gray-200: #374151;
+  --gray-300: #4b5563;
+  --shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.3), 0 2px 4px -1px rgba(0, 0, 0, 0.2);
+}
+
 body {
-  font-family: Arial, sans-serif;
+  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
   margin: 0;
   padding: 0;
-  scroll-behavior: smooth; 
+  scroll-behavior: smooth;
+  color: var(--text-color);
+  background-color: var(--light-bg);
+  line-height: 1.5;
+  transition: var(--transition);
 }
 
+/* Navbar Styles */
 .header_container {
   display: flex;
-  width: 100vw;
   flex-direction: row;
   align-items: center;
   justify-content: space-between;
-
-  height: 80px;
-  width: 100%;
-
-  min-height: 80px;      /* Changed from height: 100px */
-
-  padding: 10px 20px;
-  background-color: #ffffff;
-  opacity: 0.9;
-  border-radius: 0px;
-  box-shadow: 0 0 10px rgba(0, 128, 0, 0.5);
+  padding: 0.75rem 5%;
+  background-color: var(--white);
+  box-shadow: var(--shadow);
   position: fixed;
   top: 0;
-  height: 120px;
+  left: 0;
+  right: 0;
+  height: 70px;
   z-index: 1000;
+  transition: var(--transition);
 }
 
 .img {
@@ -39,15 +68,24 @@ body {
   margin-top: 10px;
 }
 
+/* Navigation Menu */
 .nav_menu {
   flex: 1;
   display: flex;
   justify-content: center;
   align-items: center;
-  gap: 20px;
+  gap: 1.5rem;
+  margin: 0;
+  padding: 0;
 }
 
 .nav_link {
+  display: flex;
+  align-items: center;
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  gap: 1.5rem;
   list-style-type: none;
   display: flex;
   gap: 20px;
@@ -61,15 +99,26 @@ body {
   color: #203394;
 }
 
-.nav_link a {
+.nav_link li a {
   text-decoration: none;
-  color: #203394;
-  font-size: 22px;
-  padding: 2px 10px;
+  color: var(--text-color);
+  font-weight: 500;
+  font-size: 0.95rem;
+  transition: var(--transition);
   display: flex;
   align-items: center;
-  gap: 5px;
-  transition: color 0.3s ease;
+  gap: 0.5rem;
+  padding: 0.5rem 0.75rem;
+  border-radius: var(--radius);
+}
+
+.nav_link li a:hover {
+  color: var(--primary-color);
+  background-color: var(--gray-100);
+}
+
+.nav_link li a svg {
+  font-size: 1.1rem;
 }
 
 .nav_link a:hover {
@@ -77,6 +126,88 @@ body {
   text-decoration: none;
 }
 
+/* Logo Container */
+.logo-container {
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+  flex: 0 0 auto;
+  margin-right: 2rem;
+}
+
+.logo-img {
+  height: 40px;
+  width: auto;
+  transition: var(--transition);
+}
+
+/* Navigation */
+.nav_menu {
+  flex-grow: 1;
+  text-align: right;
+}
+
+.nav-auth-btn {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  background-color: var(--primary-color);
+  color: white;
+  padding: 6px 14px;
+  border: none;
+  border-radius: 20px;
+  cursor: pointer;
+  font-size: 18px;
+  text-decoration: none;
+  transition: all 0.3s ease;
+}
+
+.nav-auth-btn:hover {
+  background-color: green;
+  transform: translateY(-1px);
+}
+
+.auth-buttons {
+  display: flex;
+  align-items: center;
+  gap: 1rem;
+  margin-left: auto;
+}
+
+.auth-btn {
+  padding: 0.5rem 1rem;
+  border-radius: var(--radius);
+  font-weight: 500;
+  font-size: 0.9rem;
+  cursor: pointer;
+  transition: var(--transition);
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  text-decoration: none;
+}
+
+.auth-btn.primary {
+  background-color: var(--primary-color);
+  color: white;
+  border: 1px solid var(--primary-color);
+}
+
+.auth-btn.primary:hover {
+  background-color: var(--secondary-color);
+  border-color: var(--secondary-color);
+}
+
+.auth-btn.secondary {
+  background-color: transparent;
+  color: var(--primary-color);
+  border: 1px solid var(--primary-color);
+}
+
+.auth-btn.secondary:hover {
+  background-color: rgba(37, 99, 235, 0.1);
+}
+
 .toggle-wrapper {
   display: flex;
   align-items: center;
@@ -90,86 +221,74 @@ body {
   cursor: pointer;
 }
 
-@media (max-width: 768px) {
+@media (max-width: 992px) {
   .nav_menu {
     position: fixed;
-    top: 100px; 
+    top: 70px;
     left: 0;
     right: 0;
-    background: white;
+    background-color: var(--white);
     flex-direction: column;
-    align-items: center;
-    max-height: 0;
-    overflow: hidden;
-    transition: max-height 0.3s ease;
-    border-radius: 0 0 20px 20px;
-    box-shadow: 0 4px 8px rgba(0, 128, 0, 0.3);
+    padding: 1rem 0;
+    box-shadow: var(--shadow);
+    transform: translateY(-100%);
+    opacity: 0;
+    pointer-events: none;
+    transition: var(--transition);
     z-index: 999;
   }
 
   .nav_menu.active {
-    max-height: 300px; 
+    transform: translateY(0);
+    opacity: 1;
+    pointer-events: auto;
   }
 
   .nav_link {
     flex-direction: column;
-    gap: 15px;
-    padding: 15px 0;
-    color: #203394;
+    width: 100%;
+    gap: 0.5rem;
   }
 
-  .navbar__toggle {
-    display: block;
+  .nav_link li {
+    width: 100%;
+    text-align: center;
   }
-}
 
-body {
-  background-color: white;
-  color: #203394;
-  transition: background-color 0.3s ease, color 0.3s ease;
-}
+  .nav_link li a {
+    justify-content: center;
+    padding: 0.75rem 1rem;
+  }
 
-* {
-  box-sizing: border-box;
-  margin: 0;
-  padding: 0;
-}
+  .mobile-menu-btn {
+    display: block;
+    background: none;
+    border: none;
+    color: var(--text-color);
+    font-size: 1.5rem;
+    cursor: pointer;
+    padding: 0.5rem;
+    margin-left: 1rem;
+  }
 
-/* Header container */
-.header_container {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  padding: 10px 20px;
-  background-color: var(--header-bg, #fff);
-  border-bottom: 1px solid #ccc;
+  .auth-buttons {
+    margin-left: auto;
+  }
 }
 
-/* Logo */
-.logo-container {
-  flex-shrink: 0;
-}
-.logo-img {
-  width: 100px;
-  height: 100px;
-  object-fit: contain;
-}
+@media (max-width: 576px) {
+  .header_container {
+    padding: 0.75rem 1rem;
+  }
 
-/* Navigation */
-.nav_menu {
-  flex-grow: 1;
-  text-align: right;
-}
-.nav-auth-btn {
-  display: flex;
-  align-items: center;
-  gap: 6px;
-  background-color: #2f4fcb; 
-  color: white !important;
-  padding: 6px 14px;
-  border: none;
-  border-radius: 20px;
-  cursor: pointer;
+  .logo-img {
+    height: 35px;
+  }
+
+  .auth-btn {
+    padding: 0.4rem 0.75rem;
+    font-size: 0.85rem;
+  }
   font-size: 18px;
   text-decoration: none; 
   transition: all 0.3s ease;