diff --git a/static/css/style.css b/static/css/style.css
index 8e3c2fc..80b0968 100644
--- a/static/css/style.css
+++ b/static/css/style.css
@@ -99,6 +99,7 @@ input, select {
     box-sizing: border-box;
     background: var(--input-bg);
     color: var(--text-color);
+    font-family: 'Space Mono', monospace;
     transition: background 0.3s ease, border-color 0.3s ease, color 0.3s ease;
 }
 
@@ -367,23 +368,55 @@ button.loading:hover {
     flex: 1;
     min-width: 200px;
     margin-right: 0;
+    padding: 10px;
+    border: 2px solid var(--border-color);
+    border-radius: 8px;
+    font-size: 16px;
+    box-sizing: border-box;
+    background: var(--input-bg);
+    color: var(--text-color);
+    transition: background 0.3s ease, border-color 0.3s ease, color 0.3s ease;
+    font-family: 'Space Mono', monospace;
+}
+
+.location-search input:focus {
+    outline: none;
+    border-color: #667eea;
 }
 
 .location-search button {
-    padding: 8px 15px;
-    background: #667eea;
+    font-family: 'Space Mono', monospace;
+    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
     color: white;
+    padding: 12px 24px;
     border: none;
-    border-radius: 4px;
+    border-radius: 25px;
+    font-size: 16px;
+    font-weight: bold;
     cursor: pointer;
     white-space: nowrap;
     width: auto;
     min-width: auto;
+    transition: all 0.3s ease;
+    box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3);
+    margin-top: 0;
 }
 
 .location-search button:hover {
-    background: #5a67d8;
+    transform: translateY(-2px);
+    box-shadow: 0 6px 20px rgba(102, 126, 234, 0.4);
+    background: linear-gradient(135deg, #5a67d8 0%, #6b46c1 100%);
+}
+
+.location-search button:disabled {
+    opacity: 0.6;
+    cursor: not-allowed;
+    transform: none;
+}
+
+.location-search button:disabled:hover {
     transform: none;
+    box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3);
 }
 
 #locationMap {
@@ -696,11 +729,20 @@ input[readonly] {
 
 .other-genre-input input {
     width: 100%;
-    padding: 8px;
+    padding: 10px;
     border: 2px solid var(--border-color);
-    border-radius: 4px;
-    background: var(--input-bg);
+    border-radius: 8px;
+    font-size: 16px;
     box-sizing: border-box;
+    background: var(--input-bg);
+    color: var(--text-color);
+    transition: background 0.3s ease, border-color 0.3s ease, color 0.3s ease;
+    font-family: 'Space Mono', monospace;
+}
+
+.other-genre-input input:focus {
+    outline: none;
+    border-color: #667eea;
 }
 
 .clear-data-container {
@@ -1048,4 +1090,140 @@ input[readonly] {
     max-height: 0;
     opacity: 0;
     padding: 0;
+}
+
+/* ==========================================
+   Select2 Custom Styling for Timezone Dropdown
+   ========================================== */
+
+/* Main Select2 container */
+.select2-container--default .select2-selection--single {
+    background: var(--input-bg);
+    border: 2px solid var(--border-color);
+    border-radius: 8px;
+    height: 45px;
+    padding: 5px 10px;
+    transition: background 0.3s ease, border-color 0.3s ease;
+}
+
+.select2-container--default .select2-selection--single:focus,
+.select2-container--default.select2-container--open .select2-selection--single {
+    border-color: #667eea;
+    outline: none;
+}
+
+.select2-container--default .select2-selection--single .select2-selection__rendered {
+    color: var(--text-color);
+    line-height: 33px;
+    padding-left: 5px;
+    font-family: 'Space Mono', monospace;
+    font-size: 16px;
+}
+
+.select2-container--default .select2-selection--single .select2-selection__placeholder {
+    color: var(--text-secondary);
+}
+
+.select2-container--default .select2-selection--single .select2-selection__arrow {
+    height: 43px;
+    right: 5px;
+}
+
+/* Dropdown */
+.select2-container--default .select2-dropdown {
+    background: var(--input-bg);
+    border: 2px solid var(--border-color);
+    border-radius: 8px;
+    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
+    margin-top: 5px;
+    max-width: 100%;
+}
+
+/* Search box in dropdown */
+.select2-container--default .select2-search--dropdown .select2-search__field {
+    background: var(--input-bg);
+    border: 2px solid var(--border-color);
+    border-radius: 6px;
+    color: var(--text-color);
+    font-family: 'Space Mono', monospace;
+    padding: 8px;
+    margin: 8px;
+}
+
+.select2-container--default .select2-search--dropdown .select2-search__field:focus {
+    border-color: #667eea;
+    outline: none;
+}
+
+/* Dropdown results */
+.select2-container--default .select2-results__option {
+    background: var(--input-bg);
+    color: var(--text-color);
+    padding: 10px 12px;
+    font-family: 'Space Mono', monospace;
+    font-size: 14px;
+}
+
+.select2-container--default .select2-results__option--highlighted[aria-selected] {
+    background: #667eea;
+    color: white;
+}
+
+.select2-container--default .select2-results__option[aria-selected=true] {
+    background: var(--section-bg);
+    color: var(--text-color);
+}
+
+.select2-container--default .select2-results__option[aria-selected=true]:hover {
+    background: #667eea;
+    color: white;
+}
+
+/* Option groups */
+.select2-container--default .select2-results__group {
+    background: var(--section-bg);
+    color: var(--text-secondary);
+    font-weight: bold;
+    padding: 8px 12px;
+    font-size: 12px;
+    text-transform: uppercase;
+    letter-spacing: 0.5px;
+    border-top: 1px solid var(--border-color);
+}
+
+.select2-container--default .select2-results__option--group {
+    padding-left: 0;
+}
+
+.select2-container--default .select2-results__options--nested .select2-results__option {
+    padding-left: 20px;
+}
+
+/* Loading state */
+.select2-container--default .select2-results__option--loading {
+    color: var(--text-secondary);
+}
+
+/* No results message */
+.select2-container--default .select2-results__option--no-results {
+    color: var(--text-secondary);
+    background: var(--input-bg);
+}
+
+/* Width fix */
+.select2-container {
+    width: 100% !important;
+}
+
+.timezone-select {
+    width: 100%;
+}
+
+/* Dark mode adjustments */
+.dark-mode .select2-container--default .select2-selection--single .select2-selection__arrow b {
+    border-color: var(--text-color) transparent transparent transparent;
+}
+
+.dark-mode .select2-container--default.select2-container--open .select2-selection--single .select2-selection__arrow b {
+    border-color: transparent transparent var(--text-color) transparent;
 }
\ No newline at end of file
diff --git a/static/js/dropdown-button.js b/static/js/dropdown-button.js
new file mode 100644
index 0000000..08b594b
--- /dev/null
+++ b/static/js/dropdown-button.js
@@ -0,0 +1,26 @@
+// Dropdown button functionality
+function toggleDropdown() {
+    const dropdown = document.getElementById('chartDropdown');
+    dropdown.classList.toggle('show');
+}
+
+// Close dropdown when clicking outside
+document.addEventListener('click', function(event) {
+    const dropdown = document.getElementById('chartDropdown');
+    const toggleButton = document.querySelector('.dropdown-toggle');
+    
+    if (dropdown && !event.target.closest('.dropdown-button-wrapper')) {
+        dropdown.classList.remove('show');
+    }
+});
+
+// Prevent form submission when clicking the dropdown toggle
+document.addEventListener('DOMContentLoaded', function() {
+    const toggleButton = document.querySelector('.dropdown-toggle');
+    if (toggleButton) {
+        toggleButton.addEventListener('click', function(e) {
+            e.preventDefault();
+            e.stopPropagation();
+        });
+    }
+});
diff --git a/static/js/location-map.js b/static/js/location-map.js
index d2031b9..001747f 100644
--- a/static/js/location-map.js
+++ b/static/js/location-map.js
@@ -1,6 +1,7 @@
 // Interactive map for location selection using Leaflet
 let map;
 let marker;
+let currentTileLayer;
 
 document.addEventListener('DOMContentLoaded', function() {
     initMap();
@@ -23,6 +24,20 @@ document.addEventListener('DOMContentLoaded', function() {
             }
         });
     }
+    
+    // Listen for dark mode changes and update map tiles
+    const observer = new MutationObserver(function(mutations) {
+        mutations.forEach(function(mutation) {
+            if (mutation.attributeName === 'class') {
+                updateMapTiles();
+            }
+        });
+    });
+    
+    observer.observe(document.documentElement, {
+        attributes: true,
+        attributeFilter: ['class']
+    });
 });
 
 function initMap() {
@@ -35,10 +50,8 @@ function initMap() {
     // Make map globally available for form persistence
     window.map = map;
     
-    // Add OpenStreetMap tiles
-    L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
-        attribution: '© OpenStreetMap contributors'
-    }).addTo(map);
+    // Add appropriate tile layer based on current mode
+    updateMapTiles();
     
     // Add click listener to map
     map.on('click', function(e) {
@@ -143,6 +156,32 @@ function getTimezoneForLocation(lat, lng) {
     }
 }
 
+function updateMapTiles() {
+    if (!map) return;
+    
+    // Remove existing tile layer if present
+    if (currentTileLayer) {
+        map.removeLayer(currentTileLayer);
+    }
+    
+    const isDarkMode = document.documentElement.classList.contains('dark-mode');
+    
+    if (isDarkMode) {
+        // Dark mode: Use CartoDB Dark Matter tiles
+        currentTileLayer = L.tileLayer('https://{s}.basemaps.cartocdn.com/dark_all/{z}/{x}/{y}{r}.png', {
+            attribution: '© OpenStreetMap contributors © CARTO',
+            subdomains: 'abcd',
+            maxZoom: 19
+        }).addTo(map);
+    } else {
+        // Light mode: Use standard OpenStreetMap tiles
+        currentTileLayer = L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
+            attribution: '© OpenStreetMap contributors',
+            maxZoom: 19
+        }).addTo(map);
+    }
+}
+
 // Search for locations using Nominatim (OpenStreetMap's geocoding service)
 function searchLocation() {
     const searchInput = document.getElementById('locationSearch');
diff --git a/static/js/sparkles.js b/static/js/sparkles.js
index ee28afe..5bf1e2c 100644
--- a/static/js/sparkles.js
+++ b/static/js/sparkles.js
@@ -5,9 +5,9 @@ function createSparkle() {
     const sparkle = document.createElement('div');
     sparkle.className = 'sparkle';
     
-    // Random sparkle characters
-    const sparkleChars = ['✨', '⭐', '🌟', '💫', '🔮'];
-    sparkle.textContent = sparkleChars[Math.floor(Math.random() * sparkleChars.length)];
+    // Random star characters (matching star-trail)
+    const starChars = ['✦', '✧', '⋆', '✩', '✪', '✫', '✬', '✭', '✮', '✯'];
+    sparkle.textContent = starChars[Math.floor(Math.random() * starChars.length)];
     
     // Random position across the width
     sparkle.style.left = Math.random() * 100 + '%';
@@ -20,6 +20,12 @@ function createSparkle() {
     const size = Math.random() * 15 + 15;
     sparkle.style.fontSize = size + 'px';
     
+    // Random color (matching star-trail)
+    const colors = ['#FFD700', '#FFA500', '#FF69B4', '#9370DB', '#00CED1', '#FFFFFF', '#FFB6C1'];
+    const color = colors[Math.floor(Math.random() * colors.length)];
+    sparkle.style.color = color;
+    sparkle.style.textShadow = `0 0 ${size/2}px ${color}`;
+    
     // Some sparkles get extra twinkle
     if (Math.random() > 0.7) {
         sparkle.classList.add('twinkle');
diff --git a/static/js/timezone-select.js b/static/js/timezone-select.js
new file mode 100644
index 0000000..9294c03
--- /dev/null
+++ b/static/js/timezone-select.js
@@ -0,0 +1,21 @@
+// Initialize timezone selector with Select2
+document.addEventListener('DOMContentLoaded', function() {
+    // Initialize Select2 on the timezone select element
+    $('#timezone_offset').select2({
+        placeholder: 'Select or search for a timezone...',
+        allowClear: false,
+        width: '100%',
+        dropdownAutoWidth: false
+    });
+    
+    // If there's a stored value in localStorage, restore it
+    var storedTimezone = localStorage.getItem('timezone_offset');
+    if (storedTimezone) {
+        $('#timezone_offset').val(storedTimezone).trigger('change');
+    }
+    
+    // Save timezone to localStorage when changed
+    $('#timezone_offset').on('change', function() {
+        localStorage.setItem('timezone_offset', $(this).val());
+    });
+});
diff --git a/templates/base.html b/templates/base.html
index cf48f1d..126159a 100644
--- a/templates/base.html
+++ b/templates/base.html
@@ -35,8 +35,12 @@
     <link rel="preconnect" href="https://fonts.googleapis.com">
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
     <link href="https://fonts.googleapis.com/css2?family=Space+Mono:ital,wght@0,400;0,700;1,400;1,700&display=swap" rel="stylesheet">
+    <!-- Select2 for searchable dropdowns -->
+    <link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
     <link rel="stylesheet" href="{{ url_for('static', filename='css/style.css') }}">
     <!-- Dark mode script loaded early to prevent flash -->
+    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
     <script src="{{ url_for('static', filename='js/dark-mode.js') }}"></script>
     <script src="{{ url_for('static', filename='js/sparkles.js') }}"></script>
     <script src="{{ url_for('static', filename='js/star-trail.js') }}"></script>
diff --git a/templates/index.html b/templates/index.html
index e390d07..1dbde44 100644
--- a/templates/index.html
+++ b/templates/index.html
@@ -6,13 +6,14 @@
 <script src="{{ url_for('static', filename='js/form-persistence.js') }}"></script>
 <script src="{{ url_for('static', filename='js/button-loading.js') }}"></script>
 <script src="{{ url_for('static', filename='js/modal.js') }}"></script>
+<script src="{{ url_for('static', filename='js/timezone-select.js') }}"></script>
 <link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" />
 <script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>
 {% endblock %}
 
 {% block content %}
 <h1>🌟 <i>Astro Horoscope</i></h1>
-<p class="intro-text">Enter your birth information to generate your natal chart to get a super chill super accurate horoscope</p>
+<p class="intro-text">Enter your birth information to generate your personalized natal chart and detailed horoscope</p>
 
 <!-- Form data status indicator -->
 <div id="formDataStatus" class="form-data-status">
@@ -31,10 +32,106 @@ <h1>🌟 <i>Astro Horoscope</i></h1>
     </div>
     
     <div class="form-group">
-        <label for="timezone_offset">Timezone Offset (e.g., -04:00 for EDT, -05:00 for EST):</label>
-        <input type="text" id="timezone_offset" name="timezone_offset" required 
-               placeholder="-04:00" pattern="[+\-]?\d{1,2}:\d{2}">
-        <small class="field-hint">Format: +/-HH:MM (include daylight savings adjustment)</small>
+        <label for="timezone_offset">Timezone:</label>
+        <select id="timezone_offset" name="timezone_offset" required class="timezone-select">
+            <option value="">Select or search for a timezone...</option>
+            <optgroup label="Common US Timezones">
+                <option value="-05:00">Eastern Standard Time (EST) -05:00</option>
+                <option value="-04:00">Eastern Daylight Time (EDT) -04:00</option>
+                <option value="-06:00">Central Standard Time (CST) -06:00</option>
+                <option value="-05:00">Central Daylight Time (CDT) -05:00</option>
+                <option value="-07:00">Mountain Standard Time (MST) -07:00</option>
+                <option value="-06:00">Mountain Daylight Time (MDT) -06:00</option>
+                <option value="-08:00">Pacific Standard Time (PST) -08:00</option>
+                <option value="-07:00">Pacific Daylight Time (PDT) -07:00</option>
+                <option value="-09:00">Alaska Standard Time (AKST) -09:00</option>
+                <option value="-08:00">Alaska Daylight Time (AKDT) -08:00</option>
+                <option value="-10:00">Hawaii-Aleutian Standard Time (HST) -10:00</option>
+            </optgroup>
+            <optgroup label="Europe">
+                <option value="+00:00">Greenwich Mean Time (GMT) +00:00</option>
+                <option value="+01:00">British Summer Time (BST) +01:00</option>
+                <option value="+01:00">Central European Time (CET) +01:00</option>
+                <option value="+02:00">Central European Summer Time (CEST) +02:00</option>
+                <option value="+02:00">Eastern European Time (EET) +02:00</option>
+                <option value="+03:00">Eastern European Summer Time (EEST) +03:00</option>
+            </optgroup>
+            <optgroup label="Asia">
+                <option value="+05:30">India Standard Time (IST) +05:30</option>
+                <option value="+08:00">China Standard Time (CST) +08:00</option>
+                <option value="+09:00">Japan Standard Time (JST) +09:00</option>
+                <option value="+09:00">Korea Standard Time (KST) +09:00</option>
+                <option value="+05:45">Nepal Time (NPT) +05:45</option>
+                <option value="+06:00">Bangladesh Standard Time (BST) +06:00</option>
+                <option value="+07:00">Indochina Time (ICT) +07:00</option>
+            </optgroup>
+            <optgroup label="Australia/Pacific">
+                <option value="+08:00">Australian Western Standard Time (AWST) +08:00</option>
+                <option value="+09:30">Australian Central Standard Time (ACST) +09:30</option>
+                <option value="+10:30">Australian Central Daylight Time (ACDT) +10:30</option>
+                <option value="+10:00">Australian Eastern Standard Time (AEST) +10:00</option>
+                <option value="+11:00">Australian Eastern Daylight Time (AEDT) +11:00</option>
+                <option value="+12:00">New Zealand Standard Time (NZST) +12:00</option>
+                <option value="+13:00">New Zealand Daylight Time (NZDT) +13:00</option>
+            </optgroup>
+            <optgroup label="Americas (Other)">
+                <option value="-03:00">Argentina Time (ART) -03:00</option>
+                <option value="-03:00">Brasilia Time (BRT) -03:00</option>
+                <option value="-05:00">Colombia Time (COT) -05:00</option>
+                <option value="-06:00">Mexico City Time (CST) -06:00</option>
+                <option value="-04:00">Atlantic Standard Time (AST) -04:00</option>
+                <option value="-03:00">Atlantic Daylight Time (ADT) -03:00</option>
+            </optgroup>
+            <optgroup label="Africa/Middle East">
+                <option value="+02:00">South Africa Standard Time (SAST) +02:00</option>
+                <option value="+03:00">East Africa Time (EAT) +03:00</option>
+                <option value="+03:00">Arabia Standard Time (AST) +03:00</option>
+                <option value="+04:00">Gulf Standard Time (GST) +04:00</option>
+            </optgroup>
+            <optgroup label="All UTC Offsets">
+                <option value="-12:00">UTC-12:00</option>
+                <option value="-11:00">UTC-11:00</option>
+                <option value="-10:00">UTC-10:00</option>
+                <option value="-09:30">UTC-09:30</option>
+                <option value="-09:00">UTC-09:00</option>
+                <option value="-08:00">UTC-08:00</option>
+                <option value="-07:00">UTC-07:00</option>
+                <option value="-06:00">UTC-06:00</option>
+                <option value="-05:00">UTC-05:00</option>
+                <option value="-04:30">UTC-04:30</option>
+                <option value="-04:00">UTC-04:00</option>
+                <option value="-03:30">UTC-03:30</option>
+                <option value="-03:00">UTC-03:00</option>
+                <option value="-02:00">UTC-02:00</option>
+                <option value="-01:00">UTC-01:00</option>
+                <option value="+00:00">UTC+00:00</option>
+                <option value="+01:00">UTC+01:00</option>
+                <option value="+02:00">UTC+02:00</option>
+                <option value="+03:00">UTC+03:00</option>
+                <option value="+03:30">UTC+03:30</option>
+                <option value="+04:00">UTC+04:00</option>
+                <option value="+04:30">UTC+04:30</option>
+                <option value="+05:00">UTC+05:00</option>
+                <option value="+05:30">UTC+05:30</option>
+                <option value="+05:45">UTC+05:45</option>
+                <option value="+06:00">UTC+06:00</option>
+                <option value="+06:30">UTC+06:30</option>
+                <option value="+07:00">UTC+07:00</option>
+                <option value="+08:00">UTC+08:00</option>
+                <option value="+08:30">UTC+08:30</option>
+                <option value="+08:45">UTC+08:45</option>
+                <option value="+09:00">UTC+09:00</option>
+                <option value="+09:30">UTC+09:30</option>
+                <option value="+10:00">UTC+10:00</option>
+                <option value="+10:30">UTC+10:30</option>
+                <option value="+11:00">UTC+11:00</option>
+                <option value="+12:00">UTC+12:00</option>
+                <option value="+12:45">UTC+12:45</option>
+                <option value="+13:00">UTC+13:00</option>
+                <option value="+14:00">UTC+14:00</option>
+            </optgroup>
+        </select>
+        <small class="field-hint">Search or select your timezone (include daylight savings adjustment)</small>
     </div>
     
     <div class="form-group">
@@ -69,7 +166,7 @@ <h1>🌟 <i>Astro Horoscope</i></h1>
     <div class="form-group">
         <label>
             📍 Select Birth Location:
-            <button type="button" class="help-icon-btn" id="locationHelpBtn" title="Location Help">?</button>
+            <button type="button" class="help-icon-btn" id="locationHelpBtn" title="Location Help">❓</button>
         </label>
         <div class="location-selector">
             <div class="location-search">
@@ -85,14 +182,14 @@ <h1>🌟 <i>Astro Horoscope</i></h1>
         </div>
     </div>
     
-    <div class="form-group">
+    <div class="form-group" style="display: none;">
         <label for="latitude">Latitude (auto-filled from map):</label>
         <input type="text" id="latitude" name="latitude" required 
                placeholder="40n42" readonly>
         <small class="field-hint">Format: DDnMM for North, DDsM for South</small>
     </div>
     
-    <div class="form-group">
+    <div class="form-group" style="display: none;">
         <label for="longitude">Longitude (auto-filled from map):</label>
         <input type="text" id="longitude" name="longitude" required 
                placeholder="74w00" readonly>
diff --git a/tests/test_ux_improvements.py b/tests/test_ux_improvements.py
new file mode 100644
index 0000000..2572798
--- /dev/null
+++ b/tests/test_ux_improvements.py
@@ -0,0 +1,403 @@
+import unittest
+import os
+import sys
+from unittest.mock import patch, MagicMock
+
+# Add the parent directory to the path
+sys.path.insert(0, os.path.dirname(os.path.dirname(os.path.abspath(__file__))))
+
+from main import app
+
+
+class TestTimezoneDropdown(unittest.TestCase):
+    """Test timezone dropdown functionality"""
+
+    def setUp(self):
+        """Set up test client"""
+        self.app = app.test_client()
+        self.app.testing = True
+
+    def test_timezone_is_select_element(self):
+        """Test that timezone field is rendered as a select dropdown"""
+        response = self.app.get('/')
+        self.assertEqual(response.status_code, 200)
+        
+        # Check for select element instead of text input
+        self.assertIn(b'<select id="timezone_offset"', response.data)
+        self.assertIn(b'class="timezone-select"', response.data)
+
+    def test_timezone_has_common_us_timezones(self):
+        """Test that timezone dropdown includes common US timezones"""
+        response = self.app.get('/')
+        self.assertEqual(response.status_code, 200)
+        
+        # Check for common US timezone options
+        self.assertIn(b'Eastern Standard Time (EST)', response.data)
+        self.assertIn(b'Pacific Standard Time (PST)', response.data)
+        self.assertIn(b'Central Standard Time (CST)', response.data)
+        self.assertIn(b'Mountain Standard Time (MST)', response.data)
+
+    def test_timezone_has_international_timezones(self):
+        """Test that timezone dropdown includes international timezones"""
+        response = self.app.get('/')
+        self.assertEqual(response.status_code, 200)
+        
+        # Check for international timezone options
+        self.assertIn(b'Greenwich Mean Time (GMT)', response.data)
+        self.assertIn(b'Central European Time (CET)', response.data)
+        self.assertIn(b'India Standard Time (IST)', response.data)
+        self.assertIn(b'Japan Standard Time (JST)', response.data)
+
+    def test_timezone_has_utc_offsets(self):
+        """Test that timezone dropdown includes UTC offset options"""
+        response = self.app.get('/')
+        self.assertEqual(response.status_code, 200)
+        
+        # Check for UTC offset options
+        self.assertIn(b'UTC-05:00', response.data)
+        self.assertIn(b'UTC+00:00', response.data)
+        self.assertIn(b'UTC+09:00', response.data)
+
+    def test_timezone_has_optgroups(self):
+        """Test that timezone options are organized in optgroups"""
+        response = self.app.get('/')
+        self.assertEqual(response.status_code, 200)
+        
+        # Check for optgroup labels
+        self.assertIn(b'<optgroup label="Common US Timezones">', response.data)
+        self.assertIn(b'<optgroup label="Europe">', response.data)
+        self.assertIn(b'<optgroup label="Asia">', response.data)
+        self.assertIn(b'<optgroup label="All UTC Offsets">', response.data)
+
+    def test_timezone_select2_script_loaded(self):
+        """Test that Select2 library is loaded for timezone dropdown"""
+        response = self.app.get('/')
+        self.assertEqual(response.status_code, 200)
+        
+        # Check for Select2 CSS and JS
+        self.assertIn(b'select2.min.css', response.data)
+        self.assertIn(b'select2.min.js', response.data)
+
+    def test_timezone_select_js_accessible(self):
+        """Test that timezone-select.js file is accessible"""
+        response = self.app.get('/static/js/timezone-select.js')
+        self.assertEqual(response.status_code, 200)
+        self.assertIn(b'select2', response.data)
+        self.assertIn(b'timezone_offset', response.data)
+
+    def test_timezone_form_submission_with_dropdown(self):
+        """Test that form submission works with timezone dropdown"""
+        form_data = {
+            'birth_date': '1990-01-01',
+            'birth_time': '12:00',
+            'timezone_offset': '-05:00',
+            'latitude': '40n42',
+            'longitude': '74w00'
+        }
+
+        response = self.app.post('/chart', data=form_data)
+        self.assertEqual(response.status_code, 200)
+        # Should successfully generate chart with timezone data
+        self.assertIn(b'timezoneoffset', response.data.lower())
+
+
+class TestHiddenCoordinateFields(unittest.TestCase):
+    """Test that latitude and longitude fields are hidden"""
+
+    def setUp(self):
+        """Set up test client"""
+        self.app = app.test_client()
+        self.app.testing = True
+
+    def test_latitude_field_is_hidden(self):
+        """Test that latitude field is hidden with display:none"""
+        response = self.app.get('/')
+        self.assertEqual(response.status_code, 200)
+        
+        # Check that latitude field has display:none
+        response_text = response.data.decode('utf-8')
+        # Find the div containing latitude field
+        self.assertIn('style="display: none;"', response_text)
+        self.assertIn('id="latitude"', response_text)
+
+    def test_longitude_field_is_hidden(self):
+        """Test that longitude field is hidden with display:none"""
+        response = self.app.get('/')
+        self.assertEqual(response.status_code, 200)
+        
+        # Check that longitude field has display:none
+        response_text = response.data.decode('utf-8')
+        # Find the div containing longitude field
+        self.assertIn('style="display: none;"', response_text)
+        self.assertIn('id="longitude"', response_text)
+
+    def test_coordinate_fields_still_exist_in_dom(self):
+        """Test that coordinate fields exist in DOM (just hidden)"""
+        response = self.app.get('/')
+        self.assertEqual(response.status_code, 200)
+        
+        # Fields should still be present for form submission
+        self.assertIn(b'name="latitude"', response.data)
+        self.assertIn(b'name="longitude"', response.data)
+        self.assertIn(b'required', response.data)
+
+
+class TestMapDarkMode(unittest.TestCase):
+    """Test dark mode functionality for Leaflet map"""
+
+    def setUp(self):
+        """Set up test client"""
+        self.app = app.test_client()
+        self.app.testing = True
+
+    def test_location_map_js_has_dark_mode_support(self):
+        """Test that location-map.js includes dark mode functionality"""
+        response = self.app.get('/static/js/location-map.js')
+        self.assertEqual(response.status_code, 200)
+        
+        # Check for dark mode related code
+        self.assertIn(b'updateMapTiles', response.data)
+        self.assertIn(b'dark-mode', response.data)
+        self.assertIn(b'MutationObserver', response.data)
+
+    def test_location_map_js_has_dark_tiles(self):
+        """Test that location-map.js includes dark tile provider"""
+        response = self.app.get('/static/js/location-map.js')
+        self.assertEqual(response.status_code, 200)
+        
+        # Check for CartoDB dark tiles
+        self.assertIn(b'cartocdn.com/dark_all', response.data)
+
+    def test_location_map_js_has_light_tiles(self):
+        """Test that location-map.js includes light tile provider"""
+        response = self.app.get('/static/js/location-map.js')
+        self.assertEqual(response.status_code, 200)
+        
+        # Check for OpenStreetMap tiles
+        self.assertIn(b'tile.openstreetmap.org', response.data)
+
+    def test_location_map_js_observes_html_element(self):
+        """Test that location-map.js observes document.documentElement"""
+        response = self.app.get('/static/js/location-map.js')
+        self.assertEqual(response.status_code, 200)
+        
+        # Check that it observes documentElement (not body)
+        self.assertIn(b'document.documentElement', response.data)
+
+
+class TestSparklesUpdate(unittest.TestCase):
+    """Test sparkles.js updates for star characters and colors"""
+
+    def setUp(self):
+        """Set up test client"""
+        self.app = app.test_client()
+        self.app.testing = True
+
+    def test_sparkles_uses_star_characters(self):
+        """Test that sparkles.js uses star characters instead of emoji"""
+        response = self.app.get('/static/js/sparkles.js')
+        self.assertEqual(response.status_code, 200)
+        
+        # Check for star characters (UTF-8 encoded)
+        self.assertIn('✦'.encode('utf-8'), response.data)
+        self.assertIn('✧'.encode('utf-8'), response.data)
+        self.assertIn('⋆'.encode('utf-8'), response.data)
+        
+        # Should not have old emoji
+        self.assertNotIn('🌟'.encode('utf-8'), response.data)
+        self.assertNotIn('✨'.encode('utf-8'), response.data)
+
+    def test_sparkles_has_color_array(self):
+        """Test that sparkles.js includes color definitions"""
+        response = self.app.get('/static/js/sparkles.js')
+        self.assertEqual(response.status_code, 200)
+        
+        # Check for color array
+        self.assertIn(b'#FFD700', response.data)  # Gold
+        self.assertIn(b'#FFA500', response.data)  # Orange
+        self.assertIn(b'#FF69B4', response.data)  # Hot pink
+        self.assertIn(b'#9370DB', response.data)  # Purple
+
+    def test_sparkles_has_text_shadow(self):
+        """Test that sparkles.js applies text shadow for glow effect"""
+        response = self.app.get('/static/js/sparkles.js')
+        self.assertEqual(response.status_code, 200)
+        
+        # Check for textShadow property
+        self.assertIn(b'textShadow', response.data)
+
+    def test_sparkles_maintains_animation_logic(self):
+        """Test that sparkles.js maintains core animation functionality"""
+        response = self.app.get('/static/js/sparkles.js')
+        self.assertEqual(response.status_code, 200)
+        
+        # Core functions should still exist
+        self.assertIn(b'createSparkle', response.data)
+        self.assertIn(b'startSparkleRain', response.data)
+
+
+class TestSearchButtonStyling(unittest.TestCase):
+    """Test search button styling matches main buttons"""
+
+    def setUp(self):
+        """Set up test client"""
+        self.app = app.test_client()
+        self.app.testing = True
+
+    def test_search_button_has_gradient(self):
+        """Test that search button has gradient background"""
+        response = self.app.get('/static/css/style.css')
+        self.assertEqual(response.status_code, 200)
+        
+        # Check for gradient in location-search button
+        css_content = response.data.decode('utf-8')
+        self.assertIn('.location-search button', css_content)
+        self.assertIn('linear-gradient(135deg, #667eea 0%, #764ba2 100%)', css_content)
+
+    def test_search_button_has_rounded_corners(self):
+        """Test that search button has rounded pill shape"""
+        response = self.app.get('/static/css/style.css')
+        self.assertEqual(response.status_code, 200)
+        
+        css_content = response.data.decode('utf-8')
+        # Should have border-radius similar to main buttons
+        self.assertIn('border-radius: 25px', css_content)
+
+    def test_search_button_has_hover_effects(self):
+        """Test that search button has hover transform effect"""
+        response = self.app.get('/static/css/style.css')
+        self.assertEqual(response.status_code, 200)
+        
+        css_content = response.data.decode('utf-8')
+        self.assertIn('.location-search button:hover', css_content)
+        self.assertIn('translateY(-2px)', css_content)
+
+
+class TestFormInputStyling(unittest.TestCase):
+    """Test consistent styling across form inputs"""
+
+    def setUp(self):
+        """Set up test client"""
+        self.app = app.test_client()
+        self.app.testing = True
+
+    def test_all_inputs_have_space_mono_font(self):
+        """Test that all inputs use Space Mono font"""
+        response = self.app.get('/static/css/style.css')
+        self.assertEqual(response.status_code, 200)
+        
+        css_content = response.data.decode('utf-8')
+        # Base input and select styling should include font
+        self.assertIn("input, select", css_content)
+        self.assertIn("'Space Mono', monospace", css_content)
+
+    def test_location_search_input_consistent_styling(self):
+        """Test that location search input matches other inputs"""
+        response = self.app.get('/static/css/style.css')
+        self.assertEqual(response.status_code, 200)
+        
+        css_content = response.data.decode('utf-8')
+        self.assertIn('.location-search input', css_content)
+        self.assertIn('border-radius: 8px', css_content)
+        self.assertIn('font-size: 16px', css_content)
+
+    def test_other_genre_input_consistent_styling(self):
+        """Test that other genre input matches standard inputs"""
+        response = self.app.get('/static/css/style.css')
+        self.assertEqual(response.status_code, 200)
+        
+        css_content = response.data.decode('utf-8')
+        self.assertIn('.other-genre-input input', css_content)
+        self.assertIn('border-radius: 8px', css_content)
+        self.assertIn('font-size: 16px', css_content)
+
+    def test_inputs_have_focus_styling(self):
+        """Test that inputs have consistent focus styling"""
+        response = self.app.get('/static/css/style.css')
+        self.assertEqual(response.status_code, 200)
+        
+        css_content = response.data.decode('utf-8')
+        self.assertIn('input:focus', css_content)
+        self.assertIn('border-color: #667eea', css_content)
+
+
+class TestSelect2Styling(unittest.TestCase):
+    """Test Select2 custom styling for timezone dropdown"""
+
+    def setUp(self):
+        """Set up test client"""
+        self.app = app.test_client()
+        self.app.testing = True
+
+    def test_select2_container_styling(self):
+        """Test that Select2 container has custom styling"""
+        response = self.app.get('/static/css/style.css')
+        self.assertEqual(response.status_code, 200)
+        
+        css_content = response.data.decode('utf-8')
+        self.assertIn('.select2-container--default .select2-selection--single', css_content)
+        self.assertIn('border-radius: 8px', css_content)
+
+    def test_select2_dark_mode_styling(self):
+        """Test that Select2 has dark mode styling"""
+        response = self.app.get('/static/css/style.css')
+        self.assertEqual(response.status_code, 200)
+        
+        css_content = response.data.decode('utf-8')
+        self.assertIn('.dark-mode .select2', css_content)
+
+    def test_select2_uses_css_variables(self):
+        """Test that Select2 styling uses CSS variables for theme support"""
+        response = self.app.get('/static/css/style.css')
+        self.assertEqual(response.status_code, 200)
+        
+        css_content = response.data.decode('utf-8')
+        # Should use CSS variables for colors
+        self.assertIn('var(--input-bg)', css_content)
+        self.assertIn('var(--text-color)', css_content)
+        self.assertIn('var(--border-color)', css_content)
+
+
+class TestLocationHelp(unittest.TestCase):
+    """Test location help button styling"""
+
+    def setUp(self):
+        """Set up test client"""
+        self.app = app.test_client()
+        self.app.testing = True
+
+    def test_location_help_button_has_emoji(self):
+        """Test that location help button uses ❓ emoji"""
+        response = self.app.get('/')
+        self.assertEqual(response.status_code, 200)
+        
+        # Check for question mark emoji
+        self.assertIn('❓'.encode('utf-8'), response.data)
+        self.assertIn(b'id="locationHelpBtn"', response.data)
+
+
+class TestJQueryDependency(unittest.TestCase):
+    """Test jQuery dependency for Select2"""
+
+    def setUp(self):
+        """Set up test client"""
+        self.app = app.test_client()
+        self.app.testing = True
+
+    def test_jquery_loaded_before_select2(self):
+        """Test that jQuery is loaded before Select2"""
+        response = self.app.get('/')
+        self.assertEqual(response.status_code, 200)
+        
+        response_text = response.data.decode('utf-8')
+        jquery_pos = response_text.find('jquery-3.6.0.min.js')
+        select2_pos = response_text.find('select2.min.js')
+        
+        # jQuery should be loaded before Select2
+        self.assertGreater(jquery_pos, 0)
+        self.assertGreater(select2_pos, 0)
+        self.assertLess(jquery_pos, select2_pos)
+
+
+if __name__ == '__main__':
+    unittest.main()