diff --git a/Html-Files/Css-Files/appointStyle.css b/Html-Files/Css-Files/appointStyle.css
new file mode 100644
index 00000000..695513da
--- /dev/null
+++ b/Html-Files/Css-Files/appointStyle.css
@@ -0,0 +1,104 @@
+body {
+    margin: 0;
+    padding: 0;
+    background-color: #f9f9f9;
+}
+
+header {
+    background-color: #007074d5;
+    color: white;
+    padding: 15px;
+    text-align: center;
+}
+
+header .logo {
+    font-size: 24px;
+    font-weight: bold;
+}
+
+main {
+    padding: 20px;
+}
+
+h1 {
+    color: #333;
+}
+
+form {
+    background: white;
+    padding: 20px;
+    border-radius: 5px;
+    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
+}
+
+.form-section {
+    margin-bottom: 20px;
+}
+
+label {
+    display: block;
+    margin-bottom: 5px;
+}
+
+input[type="text"],
+input[type="email"],
+input[type="tel"],
+input[type="date"],
+textarea,
+select {
+    width: 100%;
+    padding: 10px;
+    margin-bottom: 10px;
+    border: 1px solid #ccc;
+    border-radius: 4px;
+}
+
+textarea {
+    height: 100px;
+}
+
+button {
+    background-color: #007074d5;
+    color: white;
+    padding: 15px 20px;
+    border: none;
+    border-radius: 4px;
+    cursor: pointer;
+    font-size: 16px;
+}
+
+button:hover {
+    background-color: #3fbcc0a4;
+}
+
+.contact-info-doc {
+    padding: 20px;
+    background-color: #f1f1f1;
+    margin-top: 20px;
+    border-radius: 5px;
+}
+
+footer {
+    background-color: #333;
+    color: white;
+    text-align: center;
+    padding: 10px 0;
+    width: 100%;
+    bottom: 0;
+}
+
+footer ul {
+    list-style-type: none;
+    padding: 0;
+    margin: 0;
+}
+
+footer ul li {
+    display: inline;
+    margin: 0 15px;
+}
+
+footer ul li a {
+    color: white;
+    text-decoration: none;
+}
diff --git a/Html-Files/appointScript.js b/Html-Files/appointScript.js
new file mode 100644
index 00000000..2d8ee089
--- /dev/null
+++ b/Html-Files/appointScript.js
@@ -0,0 +1,50 @@
+document.addEventListener("DOMContentLoaded", function() {
+    const existingPatientCheckbox = document.getElementById('existing-patient');
+    const patientIdInput = document.getElementById('patient-id');
+    const appointmentForm = document.getElementById('appointment-form');
+    const previewSection = document.getElementById('preview-section');
+    const previewDetails = document.getElementById('preview-details');
+    const doctorSelect = document.getElementById('doctor-select');
+    const appointmentDate = document.getElementById('appointment-date');
+    const timeSlotsDiv = document.getElementById('time-slots');
+
+    existingPatientCheckbox.addEventListener('change', function() {
+        if (this.checked) {
+            patientIdInput.style.display = 'block';
+        } else {
+            patientIdInput.style.display = 'none';
+        }
+    });
+
+    window.previewAppointment = function() {
+        const formData = new FormData(appointmentForm);
+        
+        let details = `
+            <strong>Doctor:</strong> ${formData.get('doctor')}<br>
+            <strong>Date:</strong> ${formData.get('date')}<br>
+            <strong>Time:</strong> ${formData.get('time-slot')}<br>
+            <strong>Name:</strong> ${formData.get('full-name')}<br>
+            <strong>Date of Birth:</strong> ${formData.get('dob')}<br>
+            <strong>Email:</strong> ${formData.get('email')}<br>
+            <strong>Phone:</strong> ${formData.get('phone')}<br>
+            <strong>Reason for Visit:</strong> ${formData.get('reason')}<br>
+            <strong>Existing Patient:</strong> ${formData.get('existing-patient') ? 'Yes' : 'No'}<br>
+            <strong>Patient ID:</strong> ${formData.get('patient-id')}
+        `;
+        previewDetails.innerHTML = details;
+        previewSection.style.display = 'block';
+        appointmentForm.style.display = 'none';
+    };
+
+    window.confirmAppointment = function() {
+        alert('Submitted successfully');
+        appointmentForm.reset();
+        previewSection.style.display = 'none';
+        appointmentForm.style.display = 'block';
+    };
+
+    window.editAppointment = function() {
+        previewSection.style.display = 'none';
+        appointmentForm.style.display = 'block';
+    };
+});
diff --git a/Html-Files/appointment.html b/Html-Files/appointment.html
new file mode 100644
index 00000000..139c3eb5
--- /dev/null
+++ b/Html-Files/appointment.html
@@ -0,0 +1,94 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Book an Appointment</title>
+    <link rel="stylesheet" href="./Css-Files/appointStyle.css">
+</head>
+<body>
+    <header>
+        <div class="logo">Doctor's Clinic</div>
+    </header>
+
+    <main>
+        <h1>Book an Appointment</h1>
+        <p>Schedule your visit with our expert doctors easily.</p>
+
+        <form id="appointment-form">
+            <div class="form-section">
+                <label for="doctor-select">Select a Doctor:</label>
+                <select id="doctor-select" name="doctor">
+                    <option value="doctor1">Dr. Vikas Chopra - Cardiologist</option>
+                    <option value="doctor2">Dr. Ajay Aggarwal - Cardiologist</option>
+                    <option value="doctor3">Dr. Soni Gupta - Dermatologist</option>
+                    <option value="doctor4">Dr. Jayant Jaswal - ENT Specialist</option>
+
+                </select>
+            </div>
+
+            <div class="form-section">
+                <label for="appointment-date">Choose a Date:</label>
+                <input type="date" id="appointment-date" name="date" required>
+            </div>
+
+            <div class="form-section">
+                <label for="time-slot">Select a Time:</label>
+                <select id="time-slot" name="time-slot" required>
+                    <option value="10:00 AM">10:00 AM</option>
+                    <option value="11:00 AM">11:00 AM</option>
+                    <option value="12:00 PM">12:00 PM</option>
+                    <option value="01:00 PM">01:00 PM</option>
+                    <option value="04:00 PM">04:00 PM</option>
+                </select>
+            </div>
+
+            <div class="form-section">
+                <label for="full-name">Full Name:</label>
+                <input type="text" id="full-name" name="full-name" required>
+
+                <label for="dob">Date of Birth:</label>
+                <input type="date" id="dob" name="dob" required>
+
+                <label for="email">Email Address:</label>
+                <input type="email" id="email" name="email" required>
+
+                <label for="phone">Phone Number:</label>
+                <input type="tel" id="phone" name="phone" required>
+
+                <label for="reason">Reason for Visit:</label>
+                <textarea id="reason" name="reason"></textarea>
+
+                <label>
+                    <input type="checkbox" name="existing-patient" id="existing-patient">
+                    Existing Patient
+                </label>
+                <input type="text" id="patient-id" name="patient-id" placeholder="Patient ID" style="display:none;">
+            </div>
+
+            <button type="button" onclick="previewAppointment()">Preview Appointment</button>
+        </form>
+
+        <div id="preview-section" style="display:none;">
+            <h2>Preview Appointment Details</h2>
+            <p id="preview-details"></p>
+            <button type="button" onclick="confirmAppointment()">Submit</button>
+            <button type="button" onclick="editAppointment()">Edit</button>
+        </div>
+    </main>
+
+    <div class="contact-info-doc">
+        <h2>Doctor's Contact Information</h2>
+        <p>123 Clinic Street, MediCity</p>
+        <p>Phone: +91 1234567890</p>
+        <p>Email: contact@clinic.com</p>
+    </div>
+
+    <footer>
+        <p>&copy; 2024 Doctor's Clinic</p>
+        <p>Opening Hours: Mon-Fri 10:00am - 5:00pm</p>
+    </footer>
+
+    <script src="appointScript.js"></script>
+</body>
+</html>
diff --git a/Html-Files/doc.html b/Html-Files/doc.html
index 22f09d3d..65b9cc20 100644
--- a/Html-Files/doc.html
+++ b/Html-Files/doc.html
@@ -48,7 +48,7 @@ <h1><a href="#">RapiDoc</a></h1>
 
     <button class="button home-button" onclick="window.location.href='/index.html'">Return Home</button>
 
-    <div class="slide-container swiper">
+  <div class="slide-container swiper">
         <div class="slide-content">
             <div class="card-wrapper swiper-wrapper">
                 <div class="card swiper-slide">
@@ -61,7 +61,7 @@ <h1><a href="#">RapiDoc</a></h1>
                     <div class="card-content">
                         <h2 class="name">Dr. Satbir Singh</h2>
                         <p class="discription">Cardiologist</p>
-                        <button class="button">Make an Appointment</button>
+                        <a href="appointment.html"><button class="button">Make an Appointment</button></a>
                     </div>
                 </div>
                 <div class="card swiper-slide">
@@ -74,7 +74,7 @@ <h2 class="name">Dr. Satbir Singh</h2>
                     <div class="card-content">
                         <h2 class="name">Dr. Vikas Chopra</h2>
                         <p class="discription">Cardiologist</p>
-                        <button class="button">Make an Appointment</button>
+                        <a href="appointment.html"><button class="button">Make an Appointment</button></a>
                     </div>
                 </div>
                 <div class="card swiper-slide">
@@ -87,7 +87,7 @@ <h2 class="name">Dr. Vikas Chopra</h2>
                     <div class="card-content">
                         <h2 class="name">Dr. Ajay Aggarwal</h2>
                         <p class="discription">Cardiologist</p>
-                        <button class="button">Make an Appointment</button>
+                        <a href="appointment.html"><button class="button">Make an Appointment</button></a>
                     </div>
                 </div>
                 <div class="card swiper-slide">
@@ -100,7 +100,7 @@ <h2 class="name">Dr. Ajay Aggarwal</h2>
                     <div class="card-content">
                         <h2 class="name">Dr. Rajeev Kumar Rajput</h2>
                         <p class="discription">Cardiologist</p>
-                        <button class="button">Make an Appointment</button>
+                        <a href="appointment.html"><button class="button">Make an Appointment</button></a>
                     </div>
                 </div>
                 <div class="card swiper-slide">
@@ -113,7 +113,7 @@ <h2 class="name">Dr. Rajeev Kumar Rajput</h2>
                     <div class="card-content">
                         <h2 class="name">Dr. Nityanand Tripathi</h2>
                         <p class="discription">Cardiologist</p>
-                        <button class="button">Make an Appointment</button>
+                        <a href="appointment.html"><button class="button">Make an Appointment</button></a>
                     </div>
                 </div>
                 <div class="card swiper-slide">
@@ -126,7 +126,7 @@ <h2 class="name">Dr. Nityanand Tripathi</h2>
                     <div class="card-content">
                         <h2 class="name">Dr. Soni Gupta</h2>
                         <p class="discription">Dermatologist</p>
-                        <button class="button">Make an Appointment</button>
+                        <a href="appointment.html"><button class="button">Make an Appointment</button></a>
                     </div>
                 </div>
                 <div class="card swiper-slide">
@@ -139,7 +139,7 @@ <h2 class="name">Dr. Soni Gupta</h2>
                     <div class="card-content">
                         <h2 class="name">Dr. Ranjan Upadhyay</h2>
                         <p class="discription">Dermatologist</p>
-                        <button class="button">Make an Appointment</button>
+                        <a href="appointment.html"><button class="button">Make an Appointment</button></a>
                     </div>
                 </div>
                 <div class="card swiper-slide">
@@ -152,7 +152,7 @@ <h2 class="name">Dr. Ranjan Upadhyay</h2>
                     <div class="card-content">
                         <h2 class="name">Dr. Deepti Shrivastava</h2>
                         <p class="discription">Dermatologist</p>
-                        <button class="button">Make an Appointment</button>
+                        <a href="appointment.html"><button class="button">Make an Appointment</button></a>
                     </div>
                 </div>
                 <div class="card swiper-slide">
@@ -165,7 +165,7 @@ <h2 class="name">Dr. Deepti Shrivastava</h2>
                     <div class="card-content">
                         <h2 class="name">Dr. Manisha Chopra</h2>
                         <p class="discription">Dermatologist</p>
-                        <button class="button">Make an Appointment</button>
+                        <a href="appointment.html"><button class="button">Make an Appointment</button></a>
                     </div>
                 </div>
                 <div class="card swiper-slide">
@@ -178,7 +178,7 @@ <h2 class="name">Dr. Manisha Chopra</h2>
                     <div class="card-content">
                         <h2 class="name">Dr. Pradeep Bansal</h2>
                         <p class="discription">Dermatologist</p>
-                        <button class="button">Make an Appointment</button>
+                        <a href="appointment.html"><button class="button">Make an Appointment</button></a>
                     </div>
                 </div>
                 <div class="card swiper-slide">
@@ -191,7 +191,7 @@ <h2 class="name">Dr. Pradeep Bansal</h2>
                     <div class="card-content">
                         <h2 class="name">Dr. Jayant Jaswal</h2>
                         <p class="discription">Ear-nose-throat (ENT)</p>
-                        <button class="button">Make an Appointment</button>
+                        <a href="appointment.html"><button class="button">Make an Appointment</button></a>
                     </div>
                 </div>
                 <div class="card swiper-slide">
@@ -204,7 +204,7 @@ <h2 class="name">Dr. Jayant Jaswal</h2>
                     <div class="card-content">
                         <h2 class="name">Dr. Vibhuti</h2>
                         <p class="discription">Ear-nose-throat (ENT)</p>
-                        <button class="button">Make an Appointment</button>
+                        <a href="appointment.html"><button class="button">Make an Appointment</button></a>
                     </div>
                 </div>
             </div>