diff --git a/Frontend/src/components/DoctorProfile.jsx b/Frontend/src/components/DoctorProfile.jsx
index 049beaa..839b102 100644
--- a/Frontend/src/components/DoctorProfile.jsx
+++ b/Frontend/src/components/DoctorProfile.jsx
@@ -1,60 +1,41 @@
-import React from "react";
-import { useParams, Link, useNavigate } from "react-router-dom";
-import { FaUserMd, FaCalendar, FaCertificate, FaUsers, FaCalendarPlus } from "react-icons/fa";
+import React from 'react';
+import { FaCalendarPlus } from 'react-icons/fa';
+import { useNavigate } from 'react-router-dom';
 
-const DoctorProfile = ({ doctors }) => {
-  const { id } = useParams();
-  const navigate = useNavigate();
-  const doctor = doctors.find(d => d.id === parseInt(id));
+const DoctorModal = ({ doctor, onClose, isOpen }) => {
+    const navigate = useNavigate(); // Initialize useNavigate
 
-  if (!doctor) {
-    return <div>Doctor not found</div>;
-  }
+    if (!isOpen) return null; // Return null if the modal is not open
 
-  const handleBookAppointment = () => {
-    navigate(`/appointments?doctorId=${doctor.id}`);
-  };
+    const handleBookAppointment = () => {
+        navigate(`/appointments?doctorId=${doctor.id}`); // Navigate to the appointments page
+        onClose(); // Close the modal after navigating
+    };
 
-  return (
-    <div className="bg-light min-h-screen p-8">
-      <Link to="/doctors" className="text-accent hover:underline mb-4 inline-block">&larr; Back to Doctors</Link>
-      <div className="bg-white rounded-lg shadow-lg p-6 max-w-2xl mx-auto">
-        <div className="flex flex-col md:flex-row items-center mb-6">
-          <img src={doctor.image} alt={doctor.name} className="w-32 h-32 rounded-full object-cover mb-4 md:mb-0 md:mr-6" />
-          <div>
-            <h1 className="text-3xl font-bold text-primary">{doctor.name}</h1>
-            <p className="text-xl text-gray-600">{doctor.specialty}</p>
-          </div>
+    return (
+        <div className="fixed inset-0 flex items-center justify-center bg-black bg-opacity-50">
+            <div className="bg-white rounded-lg p-6 max-w-md mx-auto relative z-10">
+                <button className="absolute top-2 right-2 text-gray-600" onClick={onClose}>
+                    &times;
+                </button>
+                <div className="flex flex-col items-center">
+                    <img src={doctor.image} alt={doctor.name} className="w-32 h-32 rounded-full object-cover mb-4" />
+                    <h1 className="text-2xl font-bold text-primary">{doctor.name}</h1>
+                    <p className="text-xl text-gray-600">{doctor.specialty}</p>
+                    <p className="text-gray-700 mb-2">Experience: {doctor.experience} years</p>
+                    <p className="text-gray-700 mb-2">Patients: {doctor.patients}</p>
+                    <p className="text-gray-700 mb-4">{doctor.bio}</p>
+                    <button 
+                        className="bg-accent text-primary px-6 py-2 rounded-full font-bold hover:bg-primary hover:text-accent transition duration-300 flex items-center justify-center"
+                        onClick={handleBookAppointment} // Handle the click to navigate
+                    >
+                        <FaCalendarPlus className="mr-2" />
+                        Book Appointment
+                    </button>
+                </div>
+            </div>
         </div>
-        <div className="grid grid-cols-1 md:grid-cols-2 gap-4 mb-6">
-          <div className="flex items-center">
-            <FaUserMd className="text-accent mr-2" />
-            <span>Experience: {doctor.experience} years</span>
-          </div>
-          <div className="flex items-center">
-            <FaCalendar className="text-accent mr-2" />
-            <span>Appointments: {doctor.appointments}</span>
-          </div>
-          <div className="flex items-center">
-            <FaCertificate className="text-accent mr-2" />
-            <span>Qualifications: {doctor.qualifications}</span>
-          </div>
-          <div className="flex items-center">
-            <FaUsers className="text-accent mr-2" />
-            <span>Patients: {doctor.patients}</span>
-          </div>
-        </div>
-        <p className="text-gray-700 mb-4">{doctor.bio}</p>
-        <button 
-          className="bg-accent text-primary px-6 py-2 rounded-full font-bold hover:bg-primary hover:text-accent transition duration-300 flex items-center justify-center"
-          onClick={handleBookAppointment}
-        >
-          <FaCalendarPlus className="mr-2" />
-          Book Appointment
-        </button>
-      </div>
-    </div>
-  );
+    );
 };
 
-export default DoctorProfile;
+export default DoctorModal;
diff --git a/Frontend/src/components/Doctors.jsx b/Frontend/src/components/Doctors.jsx
index 0a3accc..8900d18 100644
--- a/Frontend/src/components/Doctors.jsx
+++ b/Frontend/src/components/Doctors.jsx
@@ -1,19 +1,28 @@
 import React, { useState } from 'react';
 import { useNavigate } from 'react-router-dom';
 import { motion } from 'framer-motion';
-import { FaUserMd, FaSearch, FaEye, FaCalendarPlus } from 'react-icons/fa';
+import { FaSearch, FaCalendarPlus, FaInfoCircle } from 'react-icons/fa';
+import DoctorModal from './DoctorProfile'; // Import the modal component
 
 const Doctors = ({ doctors }) => {
     const navigate = useNavigate();
     const [searchTerm, setSearchTerm] = useState('');
+    const [selectedDoctor, setSelectedDoctor] = useState(null); // State to manage selected doctor
+    const [isModalOpen, setIsModalOpen] = useState(false); // State to manage modal visibility
 
     const filteredDoctors = doctors.filter(doctor =>
         doctor.name.toLowerCase().includes(searchTerm.toLowerCase()) ||
         doctor.specialty.toLowerCase().includes(searchTerm.toLowerCase())
     );
 
-    const handleBookAppointment = (doctorId) => {
-        navigate(`/appointments?doctorId=${doctorId}`);
+    const handleOpenModal = (doctor) => {
+        setSelectedDoctor(doctor);
+        setIsModalOpen(true); // Open the modal
+    };
+
+    const handleCloseModal = () => {
+        setIsModalOpen(false);
+        setSelectedDoctor(null); // Reset the selected doctor
     };
 
     return (
@@ -34,11 +43,11 @@ const Doctors = ({ doctors }) => {
             </div>
 
             <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4 sm:gap-6">
-                {filteredDoctors.map((doctor, index) => (
+                {filteredDoctors.map((doctor) => (
                     <motion.div
                         key={doctor.id}
-                        className="bg-white p-4 sm:p-6 rounded-lg shadow-lg transition-all duration-300 hover:shadow-xl"
-                        whileHover={{ scale: 1.03 }}
+                        className="bg-white p-4 sm:p-6 rounded-lg shadow-lg transition-all duration-300 relative cursor-pointer"
+                        onClick={() => handleOpenModal(doctor)} // Open modal when clicking on the card
                     >
                         <img src={doctor.image} alt={doctor.name} className="w-24 h-24 sm:w-32 sm:h-32 rounded-full mx-auto mb-4 object-cover" />
                         <h3 className="text-lg sm:text-xl font-semibold text-primary text-center mb-2">{doctor.name}</h3>
@@ -47,29 +56,73 @@ const Doctors = ({ doctors }) => {
                             <span>Patients: {doctor.patients}</span>
                             <span>Experience: {doctor.experience} years</span>
                         </div>
-                        <div className="flex flex-col sm:flex-row justify-center space-y-2 sm:space-y-0 sm:space-x-4">
-                            <motion.button
-                                whileHover={{ scale: 1.1 }}
-                                whileTap={{ scale: 0.9 }}
-                                className="bg-accent text-primary px-4 py-2 rounded-full font-bold flex items-center justify-center"
-                                onClick={() => navigate(`/doctor/${doctor.id}`)}
-                            >
-                                <FaEye className="mr-2" />
-                                View Profile
-                            </motion.button>
+
+                        {/* Book Appointment button */}
+                        <div className="flex justify-center">
                             <motion.button
                                 whileHover={{ scale: 1.1 }}
                                 whileTap={{ scale: 0.9 }}
                                 className="bg-primary text-accent px-4 py-2 rounded-full font-bold flex items-center justify-center"
-                                onClick={() => handleBookAppointment(doctor.id)}
+                                onClick={(e) => {
+                                    e.stopPropagation(); // Prevent triggering the card click event
+                                    navigate(`/appointments?doctorId=${doctor.id}`);
+                                }}
                             >
                                 <FaCalendarPlus className="mr-2" />
                                 Book Appointment
                             </motion.button>
                         </div>
+
+                        {/* 'i' button in bottom-right corner */}
+                        <motion.button
+                            whileHover={{ scale: 1.1 }}
+                            whileTap={{ scale: 0.9 }}
+                            className="absolute bottom-2 right-2 bg-accent text-black p-1.5 rounded-full flex items-center justify-center shadow-md"
+                            onClick={(e) => {
+                                e.stopPropagation(); // Prevent triggering the card click event
+                                handleOpenModal(doctor); // Open modal on 'i' button click
+                            }}
+                        >
+                            <FaInfoCircle className="text-sm" />
+                        </motion.button>
                     </motion.div>
                 ))}
             </div>
+
+            {/* Doctor Modal */}
+            {isModalOpen && selectedDoctor && (
+                <div 
+                    className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center"
+                    onClick={handleCloseModal} // Close modal when clicking outside
+                >
+                    <div 
+                        className="bg-white rounded-lg p-6 max-w-md mx-auto relative z-10"
+                        onClick={(e) => e.stopPropagation()} // Prevent click events from closing the modal
+                    >
+                        <button className="absolute top-2 right-2 text-gray-600" onClick={handleCloseModal}>
+                            &times;
+                        </button>
+                        <div className="flex flex-col items-center">
+                            <img src={selectedDoctor.image} alt={selectedDoctor.name} className="w-32 h-32 rounded-full object-cover mb-4" />
+                            <h1 className="text-2xl font-bold text-primary">{selectedDoctor.name}</h1>
+                            <p className="text-xl text-gray-600">{selectedDoctor.specialty}</p>
+                            <p className="text-gray-700 mb-2">Experience: {selectedDoctor.experience} years</p>
+                            <p className="text-gray-700 mb-2">Patients: {selectedDoctor.patients}</p>
+                            <p className="text-gray-700 mb-4">{selectedDoctor.bio}</p>
+                            <button 
+                                className="bg-accent text-primary px-6 py-2 rounded-full font-bold hover:bg-primary hover:text-accent transition duration-300 flex items-center justify-center"
+                                onClick={() => {
+                                    navigate(`/appointments?doctorId=${selectedDoctor.id}`);
+                                    handleCloseModal(); // Close the modal after navigating
+                                }}
+                            >
+                                <FaCalendarPlus className="mr-2" />
+                                Book Appointment
+                            </button>
+                        </div>
+                    </div>
+                </div>
+            )}
         </div>
     );
 };