diff --git a/assets/css/custom.css b/assets/css/custom.css
index 86fa21f..d410f5e 100644
--- a/assets/css/custom.css
+++ b/assets/css/custom.css
@@ -181,21 +181,183 @@ section h2 {
     text-shadow: 0 0 5px #FFFFFF, 0 0 10px #00BFFF;
 }
 
-.ticket-form-container .form-control,
-.ticket-form-container .form-select {
-    background-color: #000010;
-    color: #FFFFFF;
-    border: 1px solid #00BFFF;
+/* Date Picker */
+.ticket-form-container .form-control[type="date"] {
+    color-scheme: dark;
+    position: relative;
 }
 
-.ticket-form-container .form-control:focus,
-.ticket-form-container .form-select:focus {
-    background-color: #000010;
-    color: #FFFFFF;
-    border-color: #FF00FF;
-    box-shadow: 0 0 10px #FF00FF;
+/* Calendar Icon Styling */
+.ticket-form-container .form-control[type="date"]::-webkit-calendar-picker-indicator {
+    cursor: pointer;
+    opacity: 1;
+    filter: invert(80%) sepia(100%) saturate(300%) hue-rotate(280deg) drop-shadow(0 0 6px #ff00ff); /* Glowing pink icon */
+    transition: filter 0.3s ease;
 }
 
-.ticket-form-container .form-control::-webkit-calendar-picker-indicator {
-    filter: invert(1);
+.ticket-form-container .form-control[type="date"]::-webkit-calendar-picker-indicator:hover {
+    filter: invert(90%) sepia(100%) saturate(500%) hue-rotate(180deg) drop-shadow(0 0 10px #00BFFF); /* Glowing cyan on hover */
+}
+
+/* --- Flatpickr Neon Theme --- */
+
+.flatpickr-calendar {
+    background: #0a001f;
+    border: 1px solid #ff00ff;
+    border-radius: 8px;
+    box-shadow: 0 0 15px #ff00ff;
+    width: 300px;
+    font-family: 'Orbitron', sans-serif;
+}
+
+.flatpickr-months .flatpickr-month {
+    color: #fff;
+    fill: #fff;
+    text-shadow: 0 0 5px #ff00ff;
+}
+
+.flatpickr-months .flatpickr-prev-month,
+.flatpickr-months .flatpickr-next-month {
+    color: #ff00ff;
+    fill: #ff00ff;
+    transition: all 0.3s ease;
+}
+
+.flatpickr-months .flatpickr-prev-month:hover,
+.flatpickr-months .flatpickr-next-month:hover {
+    color: #00BFFF;
+    fill: #00BFFF;
+}
+
+.flatpickr-current-month .flatpickr-monthDropdown-months {
+    background: #0a001f;
+    border: 1px solid #ff00ff;
+    color: #fff;
+}
+
+.flatpickr-current-month .numInput {
+    background: transparent;
+    color: #fff;
+    border: none;
+    text-shadow: 0 0 5px #ff00ff;
+}
+
+.flatpickr-weekdays {
+    background: #101020;
+}
+
+span.flatpickr-weekday {
+    color: #ff00ff;
+    font-weight: bold;
+    text-shadow: 0 0 3px #ff00ff;
+}
+
+.flatpickr-day {
+    color: #ccc;
+    border: 1px solid transparent;
+    transition: all 0.3s ease;
+}
+
+.flatpickr-day:hover {
+    background: #101020;
+    border-color: #00BFFF;
+    color: #00BFFF;
+}
+
+.flatpickr-day.today {
+    border-color: #ff00ff;
+    color: #ff00ff;
+    text-shadow: 0 0 5px #ff00ff;
+}
+
+.flatpickr-day.selected,
+.flatpickr-day.startRange,
+.flatpickr-day.endRange {
+    background: #ff00ff;
+    border-color: #ff00ff;
+    color: #000;
+    box-shadow: 0 0 10px #ff00ff;
+}
+
+.flatpickr-day.disabled,
+.flatpickr-day.prevMonthDay,
+.flatpickr-day.nextMonthDay {
+    color: #444;
+}
+
+.holo-relics-img {
+  object-position: top;
+}
+
+/* --- Choices.js Neon Theme --- */
+
+.choices {
+  margin-bottom: 1rem;
+  font-family: 'Orbitron', sans-serif;
+}
+
+.choices__inner {
+  background-color: #0a001f;
+  color: #BC13FE; /* MODIFIED: Neon Purple */
+  border: 1px solid #ff00ff;
+  box-shadow: 0 0 5px #ff00ff, 0 0 10px #ff00ff, 0 0 20px #ff00ff,
+              inset 0 0 5px rgba(255, 0, 255, 0.5);
+  border-radius: 8px;
+  padding: .375rem .75rem;
+  transition: all 0.3s ease;
+  min-height: auto;
+}
+
+.choices.is-open .choices__inner {
+  border-color: #00BFFF;
+  box-shadow: 0 0 10px #00BFFF, 0 0 20px #00BFFF, 0 0 40px #00BFFF,
+              inset 0 0 10px rgba(0, 191, 255, 0.6);
+}
+
+.choices__list--dropdown {
+  background-color: #0a001f;
+  border: 1px solid #00BFFF;
+  border-radius: 8px;
+  box-shadow: 0 0 15px #00BFFF;
+  margin-top: 5px;
+  color: #39FF14; /* MODIFIED: Neon Green */
+}
+
+.choices__item {
+  padding: 10px;
+}
+
+.choices__item--selectable.is-highlighted {
+  background-color: #BC13FE; /* MODIFIED: Neon Purple */
+  color: #000; /* MODIFIED: Black */
+}
+
+.choices__list [role=option] {
+    color: #39FF14; /* MODIFIED: Neon Green */
+}
+
+.choices__list--dropdown .choices__item--selectable.is-highlighted {
+    background-color: #BC13FE; /* MODIFIED: Neon Purple */
+    color: #000; /* MODIFIED: Black */
+}
+
+.choices__pointer {
+    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23ff00ff' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");
+    background-repeat: no-repeat;
+    background-position: center;
+    background-size: 16px 12px;
+    height: 100%;
+    width: 20px;
+    margin-top: 0;
+    border: none;
+    transition: transform 0.3s ease;
+}
+
+.choices.is-open .choices__pointer {
+    transform: rotate(-180deg);
+    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%2300BFFF' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");
+}
+
+.choices__item--choice {
+    padding: 0.5rem 1rem;
 }
diff --git a/assets/js/main.js b/assets/js/main.js
index c2f707c..49fc065 100644
--- a/assets/js/main.js
+++ b/assets/js/main.js
@@ -16,4 +16,18 @@ document.addEventListener('DOMContentLoaded', () => {
 
     const hiddenElements = document.querySelectorAll('.hidden-left, .hidden-right, .hidden-bottom');
     hiddenElements.forEach(el => observer.observe(el));
+
+    flatpickr("#visit-date", {
+        dateFormat: "Y-m-d",
+    });
+
+    const ticketType = new Choices('#ticket-type', {
+        searchEnabled: false,
+        itemSelectText: ''
+    });
+
+    const ticketQuantity = new Choices('#ticket-quantity', {
+        searchEnabled: false,
+        itemSelectText: ''
+    });
 });
diff --git a/index.php b/index.php
index 80d186b..e98fb53 100644
--- a/index.php
+++ b/index.php
@@ -6,6 +6,8 @@
     <title>Digital Museum</title>
     <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
     <link rel="stylesheet" href="assets/css/custom.css?v=<?php echo time(); ?>">
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css">
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/choices.js/public/assets/styles/choices.min.css"/>
 </head>
 <body>
 
@@ -39,7 +41,7 @@
             <div class="row">
                 <div class="col-md-4 mb-4">
                     <div class="exhibit-card hidden-left">
-                        <img src="https://picsum.photos/seed/exhibit1/800/600" alt="Abstract digital sculpture with flowing lights.">
+                        <img src="https://media.istockphoto.com/id/1367089822/vector/blue-glowing-swirl-light-effect-magic-abstract-frame-power-energy-of-circular-element.jpg?s=612x612&w=0&k=20&c=d5kDHchWlUENE1MtqJiiUmCt7SNEYQGlU6y0JvpKAP0=" alt="Abstract digital sculpture with flowing lights.">
                         <div class="card-body">
                             <h5 class="card-title">Luminous Forms</h5>
                             <p class="card-text">A dance of light and shadow, sculpted in the digital realm.</p>
@@ -48,16 +50,16 @@
                 </div>
                 <div class="col-md-4 mb-4">
                     <div class="exhibit-card hidden-bottom">
-                        <img src="https://picsum.photos/seed/exhibit2/800/600" alt="Interactive holographic display of ancient artifacts.">
+                        <img src="https://fydn.imgix.net/m/x1000/1f3fcb96-543b-4e38-929d-ad1e13a46c61.jpg?q=75&auto=format,compress&w=480&dpr=1" alt="Interactive holographic display of ancient artifacts." class="holo-relics-img">
                         <div class="card-body">
-                            <h5 class="card-title">Holo-Relics</h5>
+                            <h5 class="card-title">Holo relics</h5>
                             <p class="card-text">Ancient history brought to life through interactive holography.</p>
                         </div>
                     </div>
                 </div>
                 <div class="col-md-4 mb-4">
                     <div class="exhibit-card hidden-right">
-                        <img src="https://picsum.photos/seed/exhibit3/800/600" alt="A virtual reality experience of a surreal landscape.">
+                        <img src="https://media.licdn.com/dms/image/v2/D4E12AQHegyw27WmVOA/article-cover_image-shrink_720_1280/article-cover_image-shrink_720_1280/0/1669022700627?e=2147483647&v=beta&t=sCWZCe6juhtnPhHwKvSshY07hUoloLMaSj_I6XxoeqE" alt="A virtual reality experience of a surreal landscape.">
                         <div class="card-body">
                             <h5 class="card-title">VR Dreams</h5>
                             <p class="card-text">Step into another reality and explore breathtaking virtual worlds.</p>
@@ -141,6 +143,8 @@
     </footer>
 
     <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/flatpickr"></script>
+    <script src="https://cdn.jsdelivr.net/npm/choices.js/public/assets/scripts/choices.min.js"></script>
     <script src="assets/js/main.js?v=<?php echo time(); ?>"></script>
 </body>
 </html>
\ No newline at end of file