diff --git a/README.md b/README.md
index 7c70a62..fac0c85 100644
--- a/README.md
+++ b/README.md
@@ -18,3 +18,14 @@
     > Instructors can Accept, Reject or Delete workshops based on their preference, also they can postpone a workshop based on coordinators request.
 
 __NOTE__: Check docs/Getting_Started.md for more info.
+
+# Workshop Booking UI/UX Enhancement
+By SANSKAR KUMAWAT
+
+:- What I Did? -
+- Replaced the old table layout with "modern, dynamic cards" for better readability.  
+- Added a "hero section" with a clear title and description.  
+- Made the "booking modal" work with the new card layout.  
+- Ensured "mobile-friendly design" using CSS media queries.  
+- Improved "visual hierarchy": highlighted workshop names, duration, and buttons.  
+- Added subtle "hover effects" for better interactivity.  
diff --git a/cms/templates/cms_base.html b/cms/templates/cms_base.html
index 4f43329..1b21fab 100644
--- a/cms/templates/cms_base.html
+++ b/cms/templates/cms_base.html
@@ -11,7 +11,11 @@
     {{ page.imports | safe }}
     <script src="{% static 'cms/js/bootstrap.min.js' %}"></script>
     <link rel="stylesheet" href="{% static 'workshop_app/css/base.css' %}" type="text/css"/>
+    <link rel="stylesheet" href="{% static 'workshop_app/css/enhanced.css' %}" type="text/css"/>
+    <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;600;800&display=swap" rel="stylesheet">
 </head>
+<script src="{% static 'workshop_app/js/enhanced.js' %}" defer></script>
+
 <body>
 
 <nav class=" navbar navbar-dark navbar navbar-expand-lg bg-dark fixed-top">
@@ -56,4 +60,4 @@
 {{ page.content | safe }}
 </div>
 </body>
-</html>
\ No newline at end of file
+</html>
diff --git a/index.html b/index.html
new file mode 100644
index 0000000..fed7052
--- /dev/null
+++ b/index.html
@@ -0,0 +1,67 @@
+<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <title>Workshop Booking</title>
+  <link rel="stylesheet" href="style.css">
+  <link rel="script" href="script.js">
+  <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;600;800&display=swap" rel="stylesheet">
+
+</head>
+<body>
+
+  <header class="topbar">
+    <div class="topbar-inner">
+      <button class="logo">WorkshopHub</button>
+    </div>
+  </header>
+
+  <section class="hero">
+    <div class="hero-inner">
+      <h1>Discover & Book Workshops</h1>
+      <p class="muted">Learn new skills, meet great people, grow your career.</p>
+    </div>
+  </section>
+
+  <main>
+    <div id="cards" class="cards" role="list">
+      <!-- Cards will be injected by JS -->
+    </div>
+  </main>
+
+  <div id="modal" class="modal" aria-hidden="true">
+    <div class="modal-panel">
+      <button id="closeModal" class="close">✕</button>
+      <h2 id="modalTitle">Book workshop</h2>
+      <form id="bookingForm">
+        <input type="hidden" id="workshopId">
+        <label for="name">Full name</label>
+        <input id="name" name="name" required minlength="3" placeholder="Your full name">
+
+        <label for="email">Email</label>
+        <input id="email" name="email" required type="email" placeholder="you@example.com">
+
+        <label for="phone">Phone</label>
+        <input id="phone" name="phone" required pattern="[0-9]{7,15}" placeholder="10 digit phone">
+
+        <label for="college">College / Organisation</label>
+        <input id="college" name="college" placeholder="Your college (optional)">
+
+        <div class="form-actions">
+          <button type="submit" class="btn primary">Confirm booking</button>
+          <button type="button" id="cancelBtn" class="btn ghost">Cancel</button>
+        </div>
+      </form>
+    </div>
+  </div>
+
+  <div id="toast" class="toast"></div>
+
+  <footer class="site-footer">
+    <small>Made with ♥ for learners — clean, mobile-first, human-friendly</small>
+  </footer>
+
+  <script src="script.js" defer></script>
+</body>
+</html>
diff --git a/script.js b/script.js
new file mode 100644
index 0000000..4342fc8
--- /dev/null
+++ b/script.js
@@ -0,0 +1,67 @@
+const modal = document.getElementById('modal');
+const modalTitle = document.getElementById('modalTitle');
+const bookingForm = document.getElementById('bookingForm');
+const toast = document.getElementById('toast');
+
+const workshops = [
+  { id: 1, title: "Python Basics", desc: "Learn Python fundamentals", category: "python" },
+  { id: 2, title: "Web Development", desc: "Build responsive websites", category: "web" },
+  { id: 3, title: "Intro to ML", desc: "Start with Machine Learning", category: "ml" }
+];
+
+const cardsRoot = document.getElementById('cards');
+
+function renderCards(list) {
+  cardsRoot.innerHTML = '';
+  list.forEach(w => {
+    const card = document.createElement('div');
+    card.className = 'card';
+    card.innerHTML = `
+      <h3>${w.title}</h3>
+      <p>${w.desc}</p>
+      <button class="btn primary">Book Now</button>
+    `;
+    card.querySelector('button').addEventListener('click', () => openModal(w));
+    cardsRoot.appendChild(card);
+  });
+}
+
+function openModal(workshop) {
+  modalTitle.textContent = `Book: ${workshop.title}`;
+  document.getElementById('workshopId').value = workshop.id;
+  modal.setAttribute('aria-hidden', 'false');
+  document.getElementById('name').focus();
+}
+
+function closeModal() {
+  modal.setAttribute('aria-hidden', 'true');
+}
+
+document.getElementById('closeModal').addEventListener('click', closeModal);
+document.getElementById('cancelBtn').addEventListener('click', closeModal);
+
+bookingForm.addEventListener('submit', e => {
+  e.preventDefault();
+  const name = document.getElementById('name').value.trim();
+  const email = document.getElementById('email').value.trim();
+  const phone = document.getElementById('phone').value.trim();
+
+  if (!name || !email || !phone) {
+    return showToast('Please fill all required fields');
+  }
+
+  showToast('Booking confirmed!');
+  closeModal();
+
+  const all = JSON.parse(localStorage.getItem('bookings') || '[]');
+  all.push({ name, email, phone, ts: Date.now() });
+  localStorage.setItem('bookings', JSON.stringify(all));
+});
+
+function showToast(msg) {
+  toast.textContent = msg;
+  toast.classList.add('show');
+  setTimeout(() => toast.classList.remove('show'), 2500);
+}
+
+renderCards(workshops);
diff --git a/style.css b/style.css
new file mode 100644
index 0000000..af563a6
--- /dev/null
+++ b/style.css
@@ -0,0 +1,217 @@
+
+
+.hero-title {
+  font-family: 'Montserrat', sans-serif;
+  font-weight: 800;
+  font-size: 4rem;
+  line-height: 1.1;
+}
+
+:root {
+  --bg: #0f1720;
+  --card: #1a2432;
+  --muted: #a0a7b3;
+  --accent: #f79b72;
+  --radius: 14px;
+  --maxwidth: 1100px;
+  --transition: 0.25s ease;
+  font-family: 'Inter', system-ui, sans-serif;
+}
+
+* { box-sizing: border-box; margin: 0; padding: 0; }
+
+body {
+  background: linear-gradient(180deg, #040404 0%, #8d98b9 100%);
+  color: #e6eef6;
+  min-height: 100vh;
+  display: flex;
+  flex-direction: column;
+}
+
+.topbar {
+  background: rgba(10, 15, 25, 0.7);
+  backdrop-filter: blur(6px);
+  position: sticky;
+  top: 0;
+  z-index: 100;
+}
+
+.topbar-inner {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 12px 20px;
+  max-width: var(--maxwidth);
+  margin: auto;
+}
+
+.logo {
+  font-weight: 700;
+  font-size: 18px;
+  background: none;
+  border: none;
+  color: #fff;
+}
+
+.icon-btn {
+  background: none;
+  border: 0;
+  color: inherit;
+  font-size: 18px;
+  cursor: pointer;
+}
+
+.hero {
+  text-align: center;
+  padding: 40px 16px;
+}
+
+.hero h1 {
+  font-size: 26px;
+  margin-bottom: 10px;
+}
+
+.hero .muted {
+  color: var(--muted);
+}
+
+.cards {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
+  gap: 18px;
+  padding: 20px;
+  max-width: var(--maxwidth);
+  margin: auto;
+}
+
+.card {
+  background: var(--card);
+  border-radius: var(--radius);
+  padding: 16px;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  transition: transform var(--transition), box-shadow var(--transition);
+}
+
+.card:hover {
+  transform: translateY(-6px);
+  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.4);
+}
+
+.card h3 { margin-bottom: 8px; }
+.card p { color: var(--muted); font-size: 14px; }
+
+.btn {
+  padding: 10px 14px;
+  border-radius: 10px;
+  font-weight: 600;
+  cursor: pointer;
+  border: none;
+  transition: background var(--transition);
+}
+
+.btn.primary {
+  background: linear-gradient(90deg, var(--accent), #ffb88c);
+  color: #031018;
+}
+
+.btn.primary:hover {
+  filter: brightness(1.05);
+}
+
+.btn.ghost {
+  background: transparent;
+  border: 1px solid rgba(255, 255, 255, 0.2);
+  color: #fff;
+}
+
+.modal {
+  position: fixed;
+  inset: 0;
+  background: rgba(0,0,0,0.65);
+  display: none;
+  align-items: center;
+  justify-content: center;
+}
+
+.modal[aria-hidden="false"] {
+  display: flex;
+  animation: fadeIn 0.3s ease;
+}
+
+.modal-panel {
+  background: rgba(30, 40, 60, 0.9);
+  backdrop-filter: blur(10px);
+  border-radius: var(--radius);
+  padding: 24px;
+  width: 100%;
+  max-width: 420px;
+  animation: slideUp 0.35s ease;
+}
+
+.modal-panel h2 {
+  margin-bottom: 16px;
+}
+
+.modal-panel label {
+  display: block;
+  margin: 12px 0 4px;
+  font-size: 14px;
+  color: var(--muted);
+}
+
+.modal-panel input {
+  width: 100%;
+  padding: 10px;
+  border-radius: 8px;
+  border: none;
+  margin-bottom: 8px;
+  background: #222c3c;
+  color: #fff;
+}
+
+.close {
+  background: none;
+  border: none;
+  font-size: 20px;
+  color: #fff;
+  float: right;
+  cursor: pointer;
+}
+
+.toast {
+  position: fixed;
+  bottom: 20px;
+  left: 50%;
+  transform: translateX(-50%) translateY(100px);
+  background: var(--accent);
+  color: #031018;
+  padding: 12px 18px;
+  border-radius: 8px;
+  opacity: 0;
+  transition: all 0.4s ease;
+}
+
+.toast.show {
+  transform: translateX(-50%) translateY(0);
+  opacity: 1;
+}
+
+.site-footer {
+  text-align: center;
+  padding: 20px;
+  margin-top: auto;
+  font-size: 14px;
+  color: #040404;
+}
+
+@keyframes fadeIn {
+  from { opacity: 0; }
+  to { opacity: 1; }
+}
+
+@keyframes slideUp {
+  from { transform: translateY(40px); opacity: 0; }
+  to { transform: translateY(0); opacity: 1; }
+}
diff --git a/workshop_app/static/workshop_app/css/enhanced.css b/workshop_app/static/workshop_app/css/enhanced.css
new file mode 100644
index 0000000..ee14100
--- /dev/null
+++ b/workshop_app/static/workshop_app/css/enhanced.css
@@ -0,0 +1,244 @@
+
+
+.hero-title {
+  font-family: 'Montserrat', sans-serif;
+  font-weight: 800;
+  font-size: 4rem;
+  line-height: 1.1;
+}
+
+:root {
+  --bg: #0f1720;
+  --card: #1a2432;
+  --muted: #a0a7b3;
+  --accent: #f79b72;
+  --radius: 14px;
+  --maxwidth: 1100px;
+  --transition: 0.25s ease;
+  font-family: 'Inter', system-ui, sans-serif;
+}
+
+* { box-sizing: border-box; margin: 0; padding: 0; }
+
+body {
+  background: linear-gradient(180deg, #040404 0%, #8d98b9 100%);
+  color: #e6eef6;
+  min-height: 100vh;
+  display: flex;
+  flex-direction: column;
+}
+
+.topbar {
+  background: rgba(10, 15, 25, 0.7);
+  backdrop-filter: blur(6px);
+  position: sticky;
+  top: 0;
+  z-index: 100;
+}
+
+.topbar-inner {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 12px 20px;
+  max-width: var(--maxwidth);
+  margin: auto;
+}
+
+.logo {
+  font-weight: 700;
+  font-size: 18px;
+  background: none;
+  border: none;
+  color: #fff;
+}
+
+.icon-btn {
+  background: none;
+  border: 0;
+  color: inherit;
+  font-size: 18px;
+  cursor: pointer;
+}
+
+.hero {
+  text-align: center;
+  padding: 40px 16px;
+}
+
+.hero h1 {
+  font-size: 26px;
+  margin-bottom: 10px;
+}
+
+.hero .muted {
+  color: var(--muted);
+}
+
+.cards {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
+  gap: 18px;
+  padding: 20px;
+  max-width: var(--maxwidth);
+  margin: auto;
+}
+
+.card {
+  background: var(--card);
+  border-radius: var(--radius);
+  padding: 16px;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  transition: transform var(--transition), box-shadow var(--transition);
+}
+
+.card:hover {
+  transform: translateY(-5px);
+  box-shadow: 0 8px 20px rgba(0,0,0,0.15);
+  transition: all 0.3s ease;
+}
+
+
+.card h3 { margin-bottom: 8px; }
+.card p { color: var(--muted); font-size: 14px; }
+
+.btn {
+  padding: 10px 14px;
+  border-radius: 10px;
+  font-weight: 600;
+  cursor: pointer;
+  border: none;
+  transition: background var(--transition);
+}
+
+.btn.primary {
+  background: linear-gradient(90deg, var(--accent), #ffb88c);
+  color: #031018;
+}
+
+.btn.primary:hover {
+  filter: brightness(1.05);
+}
+
+.btn.ghost {
+  background: transparent;
+  border: 1px solid rgba(255, 255, 255, 0.2);
+  color: #fff;
+}
+
+.modal {
+  position: fixed;
+  inset: 0;
+  background: rgba(0,0,0,0.65);
+  display: none;
+  align-items: center;
+  justify-content: center;
+}
+
+.modal[aria-hidden="false"] {
+  display: flex;
+  animation: fadeIn 0.3s ease;
+}
+
+.modal-panel {
+  background: rgba(30, 40, 60, 0.9);
+  backdrop-filter: blur(10px);
+  border-radius: var(--radius);
+  padding: 24px;
+  width: 100%;
+  max-width: 420px;
+  animation: slideUp 0.35s ease;
+}
+
+.modal-panel h2 {
+  margin-bottom: 16px;
+}
+
+.modal-panel label {
+  display: block;
+  margin: 12px 0 4px;
+  font-size: 14px;
+  color: var(--muted);
+}
+
+.modal-panel input {
+  width: 100%;
+  padding: 10px;
+  border-radius: 8px;
+  border: none;
+  margin-bottom: 8px;
+  background: #222c3c;
+  color: #fff;
+}
+
+.close {
+  background: none;
+  border: none;
+  font-size: 20px;
+  color: #fff;
+  float: right;
+  cursor: pointer;
+}
+
+.toast {
+  position: fixed;
+  bottom: 20px;
+  left: 50%;
+  transform: translateX(-50%) translateY(100px);
+  background: var(--accent);
+  color: #031018;
+  padding: 12px 18px;
+  border-radius: 8px;
+  opacity: 0;
+  transition: all 0.4s ease;
+}
+
+.toast.show {
+  transform: translateX(-50%) translateY(0);
+  opacity: 1;
+}
+
+.site-footer {
+  text-align: center;
+  padding: 20px;
+  margin-top: auto;
+  font-size: 14px;
+  color: #040404;
+}
+
+@keyframes fadeIn {
+  from { opacity: 0; }
+  to { opacity: 1; }
+}
+
+@keyframes slideUp {
+  from { transform: translateY(40px); opacity: 0; }
+  to { transform: translateY(0); opacity: 1; }
+}
+@media (max-width: 600px) {
+  .cards {
+    flex-direction: column;
+    gap: 1rem;
+  }
+
+  .card {
+    width: 100%;
+    padding: 1rem;
+    font-size: 0.9rem;
+  }
+
+  .hero-inner h1 {
+    font-size: 1.8rem;
+  }
+
+  .hero-inner p {
+    font-size: 1rem;
+  }
+
+  .btn {
+    width: 100%;
+    text-align: center;
+  }
+}
diff --git a/workshop_app/static/workshop_app/js/enhanced.js b/workshop_app/static/workshop_app/js/enhanced.js
new file mode 100644
index 0000000..6219a52
--- /dev/null
+++ b/workshop_app/static/workshop_app/js/enhanced.js
@@ -0,0 +1,69 @@
+//js
+
+const modal = document.getElementById('modal');
+const modalTitle = document.getElementById('modalTitle');
+const bookingForm = document.getElementById('bookingForm');
+const toast = document.getElementById('toast');
+
+const workshops = [
+  { id: 1, title: "Python Basics", desc: "Learn Python fundamentals", category: "python" },
+  { id: 2, title: "Web Development", desc: "Build responsive websites", category: "web" },
+  { id: 3, title: "Intro to ML", desc: "Start with Machine Learning", category: "ml" }
+];
+
+const cardsRoot = document.getElementById('cards');
+
+function renderCards(list) {
+  cardsRoot.innerHTML = '';
+  list.forEach(w => {
+    const card = document.createElement('div');
+    card.className = 'card';
+    card.innerHTML = `
+      <h3>${w.title}</h3>
+      <p>${w.desc}</p>
+      <button class="btn primary">Book Now</button>
+    `;
+    card.querySelector('button').addEventListener('click', () => openModal(w));
+    cardsRoot.appendChild(card);
+  });
+}
+
+function openModal(workshop) {
+  modalTitle.textContent = `Book: ${workshop.title}`;
+  document.getElementById('workshopId').value = workshop.id;
+  modal.setAttribute('aria-hidden', 'false');
+  document.getElementById('name').focus();
+}
+
+function closeModal() {
+  modal.setAttribute('aria-hidden', 'true');
+}
+
+document.getElementById('closeModal').addEventListener('click', closeModal);
+document.getElementById('cancelBtn').addEventListener('click', closeModal);
+
+bookingForm.addEventListener('submit', e => {
+  e.preventDefault();
+  const name = document.getElementById('name').value.trim();
+  const email = document.getElementById('email').value.trim();
+  const phone = document.getElementById('phone').value.trim();
+
+  if (!name || !email || !phone) {
+    return showToast('Please fill all required fields');
+  }
+
+  showToast('Booking confirmed!');
+  closeModal();
+
+  const all = JSON.parse(localStorage.getItem('bookings') || '[]');
+  all.push({ name, email, phone, ts: Date.now() });
+  localStorage.setItem('bookings', JSON.stringify(all));
+});
+
+function showToast(msg) {
+  toast.textContent = msg;
+  toast.classList.add('show');
+  setTimeout(() => toast.classList.remove('show'), 2500);
+}
+
+renderCards(workshops);
diff --git a/workshop_app/templates/workshop_app/workshop_type_list.html b/workshop_app/templates/workshop_app/workshop_type_list.html
index 2369cc9..ceb0a72 100644
--- a/workshop_app/templates/workshop_app/workshop_type_list.html
+++ b/workshop_app/templates/workshop_app/workshop_type_list.html
@@ -1,85 +1,91 @@
 {% extends 'workshop_app/base.html' %}
 {% load custom_filters %}
+
 {% block title %}
-	View List of available Workshops
+    Discover & Book Workshops
 {% endblock %}
 
 {% block content %}
-    <div class="container">
-    <h2 class="text-center">Workshop Types</h2>
-    <br>
-    {% if request.user|has_group:"instructor" %}
-        <a href="{% url 'workshop_app:add_workshop_type' %}">
-        <button class="btn btn-md btn-primary float-right mb-3 mx-4">Add Workshop Type</button>
-        </a>
-        <br>
-    {% endif %}
-	<div class="container">
-		<table class="table table-hover">
-		  <thead>
-		    <tr>
-		      <th>Sr No</th>
-		      <th>Workshop Name</th>
-		      <th>Workshop Duration (Days)</th>
-		      <th>Action</th>
-		    </tr>
-		  </thead>
 
-		{% for w in workshop_type %}
-		  <tbody>
-		    <tr  >
-		      <td scope="row" id="{{ forloop.counter }}">{{ forloop.counter }}</td>
-		      <td>{{ w.name }}</td>
-		      <td>{{ w.duration }}</td>
-		      <td><a href="{% url 'workshop_app:workshop_type_details' w.id %}" class="btn btn-outline-info" class="accordion-toggle" >View Workshop Details</a></td>
-		    </tr>
-		  </tbody>
-		 {% endfor %}
-		</table>
-	</div>
+<!-- Hero Section -->
+<section class="hero">
+  <div class="hero-inner">
+    <h1>Discover & Book Workshops</h1>
+    <p class="muted">Learn new skills, meet great people, grow your career.</p>
+  </div>
+</section>
+
+<div class="container">
+
+  <!-- Instructor Add Workshop Button -->
+  {% if request.user|has_group:"instructor" %}
+    <a href="{% url 'workshop_app:add_workshop_type' %}">
+      <button class="btn btn-md btn-primary float-right mb-3 mx-4">Add Workshop Type</button>
+    </a>
+  {% endif %}
 
-	    <!-- The Modal -->
-	    <div id="mailModal" class="modal">
+  <!-- Workshop Cards -->
+  <div id="cards" class="cards" role="list">
+    {% for w in workshop_type %}
+      <div class="card" role="listitem">
+        <h3>{{ w.name }}</h3>
+        <p>Duration: {{ w.duration }} days</p>
+        <button class="btn primary bookBtn" data-id="{{ w.id }}" data-name="{{ w.name }}">
+          View / Book Workshop
+        </button>
+      </div>
+    {% empty %}
+      <p>No workshops available right now.</p>
+    {% endfor %}
+  </div>
 
-	    <!-- Modal content -->
-	    <div class="modal-content">
-		<span class="close">&times;</span>
-		<p>Separate Multiple Email Id's using <strong> comma (,)</strong></p>
-		<form action="{{URL_ROOT}}/share_details/" method="POST">
-		  {% csrf_token %}
-		    <label > Email: </label>
-		    <input name="email" type='email' multiple>
-		    <input type='submit'>
-		</form>
-	    </div>
-	    </div>
+  <!-- Pagination -->
+  <div class="Page-Nav" align="center">
+    <nav aria-label="Page navigation">
+      <ul class="pagination pagination-sm">
+        {% if workshop_type.has_previous %}
+          <li class="page-item">
+            <a class="page-link" tabindex="-1" href="?page={{ workshop_type.previous_page_number }}">Previous</a>
+          </li>
+        {% endif %}
+        <li class="page-item">
+          <span class="current">Page {{ workshop_type.number }} of {{ workshop_type.paginator.num_pages }}</span>
+        </li>
+        {% if workshop_type.has_next %}
+          <li class="page-item">
+            <a class="page-link" href="?page={{ workshop_type.next_page_number }}">Next</a>
+          </li>
+        {% endif %}
+      </ul>
+    </nav>
+  </div>
 
-<!-- Page Navigation -->
-	<div class="container">
+</div>
 
-		<div class="Page-Nav" align="center">
-		<nav aria-label="Page navigation">
-		 	<ul class="pagination pagination-sm">
-			  	<li class="page-item">
-			      {% if workshoptype.has_previous %}
-					<a class="page-link" tabindex="-1" 
-							href="?page={{ workshop_type.previous_page_number }}">Previous</a>
-				{% endif %}
-			    </li>
-			    <li class="page-item">
-			    <span class="current">
-				Page {{ workshop_type.number }} of {{ workshop_type.paginator.num_pages }}
-					</span>
-				</li>
-			    <li class="page-item">
-			    {% if workshop_type.has_next %}
-					<a class="page-link" href="?page={{ workshop_type.next_page_number }}">Next
-					</a>
-				{% endif %}
-			    </li>
-		  	</ul>
-		</nav>
-		</div>
-	</div>
+<!-- Booking Modal -->
+<div id="modal" class="modal" aria-hidden="true">
+  <div class="modal-panel">
+    <button id="closeModal" class="close">✕</button>
+    <h2 id="modalTitle">Book workshop</h2>
+    <form id="bookingForm">
+      <input type="hidden" id="workshopId">
+      <label for="name">Full name</label>
+      <input id="name" name="name" required minlength="3" placeholder="Your full name">
+      <label for="email">Email</label>
+      <input id="email" name="email" required type="email" placeholder="you@example.com">
+      <label for="phone">Phone</label>
+      <input id="phone" name="phone" required pattern="[0-9]{7,15}" placeholder="10 digit phone">
+      <label for="college">College / Organisation</label>
+      <input id="college" name="college" placeholder="Your college (optional)">
+      <div class="form-actions">
+        <button type="submit" class="btn primary">Confirm booking</button>
+        <button type="button" id="cancelBtn" class="btn ghost">Cancel</button>
+      </div>
+    </form>
+  </div>
 </div>
+
+<!-- Toast Notifications -->
+<div id="toast" class="toast"></div>
+
 {% endblock %}
