Update app.py

app.py

@@ -1400,7 +1400,7 @@ def show_signup():
     ]
 
 def return_to_landing():
-    """Return to landing page"""
+    """Return to landing page with preserved styling"""
     return [
         gr.update(visible=True),   # landing_page
         gr.update(visible=False),  # signin_page
@@ -1481,7 +1481,7 @@ def show_dashboard(phone, name):
             gr.update(visible=False),  # signin_page
             gr.update(visible=False),  # signup_page
             gr.update(visible=True),   # dashboard_page
-            f"Welcome back, {name}! 👋",  # welcome message
+            f"<div class='dashboard-welcome'>Welcome back, <strong>{name}</strong>! 👋</div>",  # welcome message
             f"<div class='balance-amount'>💰 {format_currency(current_balance)}</div>",  # balance display
             phone,  # current_user state
             monthly_income,  # income
@@ -1504,7 +1504,7 @@ def show_dashboard(phone, name):
         return [
             gr.update(visible=False), gr.update(visible=False), 
             gr.update(visible=False), gr.update(visible=True),
-            f"Welcome, {name}! (Error loading data)", 
+            f"<div class='dashboard-welcome'>Welcome, <strong>{name}</strong>! (Error loading data)</div>", 
             "<div class='balance-amount'>💰 0 PKR</div>",
             phone, 0, 0, *empty_alloc, [], [], [], None, None, 
             "No family group", [], []
@@ -2066,216 +2066,522 @@ def handle_receipt_save(current_user, receipt_data, merchant, amount, date, cate
         current_balance = db.get_current_balance(current_user) if current_user else 0
         return f"❌ Error saving receipt: {str(e)}", f"<div class='balance-amount'>💰 {format_currency(current_balance)}</div>", [], []
 
-# ========== I) CUSTOM CSS ==========
+# ========== I) ENHANCED CUSTOM CSS ==========
 custom_css = """
-/* Enhanced CSS for better UI */
+/* Enhanced CSS for better UI/UX with fixed sizing issues */
+:root {
+    --primary-color: #667eea;
+    --secondary-color: #764ba2;
+    --accent-color: #ff6b6b;
+    --success-color: #48bb78;
+    --warning-color: #ed8936;
+    --error-color: #e53e3e;
+    --text-primary: #2d3748;
+    --text-secondary: #4a5568;
+    --bg-light: #f7fafc;
+    --bg-card: #ffffff;
+    --border-color: #e2e8f0;
+    --shadow-light: 0 4px 6px rgba(0, 0, 0, 0.05);
+    --shadow-medium: 0 10px 25px rgba(0, 0, 0, 0.1);
+    --shadow-heavy: 0 20px 40px rgba(0, 0, 0, 0.15);
+    --border-radius: 15px;
+    --border-radius-small: 8px;
+    --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
 .gradio-container {
-    max-width: 1200px !important;
+    max-width: 1400px !important;
     margin: 0 auto !important;
-    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+    padding: 1rem !important;
+    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', sans-serif !important;
+    background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%) !important;
+    min-height: 100vh !important;
 }
 
+/* Fixed Landing Page Styling */
 .landing-hero {
-    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-    min-height: 80vh;
-    padding: 3rem 2rem;
+    background: linear-gradient(135deg, var(--primary-color) 0%, var(--secondary-color) 100%);
+    min-height: 85vh;
+    padding: 4rem 2rem;
     color: white;
     text-align: center;
-    border-radius: 20px;
-    margin: 2rem 0;
-    box-shadow: 0 20px 40px rgba(102, 126, 234, 0.3);
+    border-radius: var(--border-radius);
+    margin: 1rem 0;
+    box-shadow: var(--shadow-heavy);
+    position: relative;
+    overflow: hidden;
+}
+
+.landing-hero::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background: linear-gradient(45deg, rgba(255,255,255,0.1) 0%, transparent 50%, rgba(255,255,255,0.05) 100%);
+    pointer-events: none;
 }
 
 .hero-title {
-    font-size: 3.5rem;
-    font-weight: 700;
-    margin-bottom: 1rem;
+    font-size: clamp(2.5rem, 5vw, 4rem);
+    font-weight: 800;
+    margin-bottom: 1.5rem;
     text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
+    background: linear-gradient(45deg, #fff, #f0f8ff);
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+    background-clip: text;
+    position: relative;
+    z-index: 1;
 }
 
 .hero-subtitle {
-    font-size: 1.5rem;
-    margin-bottom: 2rem;
-    opacity: 0.9;
+    font-size: clamp(1.1rem, 2.5vw, 1.6rem);
+    margin-bottom: 3rem;
+    opacity: 0.95;
+    font-weight: 300;
+    line-height: 1.6;
+    position: relative;
+    z-index: 1;
 }
 
 .features-grid {
     display: grid;
-    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
+    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
     gap: 2rem;
     margin: 3rem 0;
+    position: relative;
+    z-index: 1;
 }
 
 .feature-card {
-    background: rgba(255,255,255,0.1);
-    backdrop-filter: blur(10px);
-    border-radius: 15px;
-    padding: 2rem;
+    background: rgba(255,255,255,0.15);
+    backdrop-filter: blur(15px);
+    border-radius: var(--border-radius);
+    padding: 2.5rem 2rem;
     text-align: center;
     border: 1px solid rgba(255,255,255,0.2);
-    transition: transform 0.3s ease, box-shadow 0.3s ease;
+    transition: var(--transition);
+    position: relative;
+    overflow: hidden;
+}
+
+.feature-card::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: -100%;
+    width: 100%;
+    height: 100%;
+    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.1), transparent);
+    transition: left 0.8s;
+}
+
+.feature-card:hover::before {
+    left: 100%;
 }
 
 .feature-card:hover {
-    transform: translateY(-5px);
-    box-shadow: 0 10px 30px rgba(0,0,0,0.2);
+    transform: translateY(-8px) scale(1.02);
+    box-shadow: 0 20px 40px rgba(0,0,0,0.2);
+    border-color: rgba(255,255,255,0.3);
 }
 
 .feature-icon {
-    font-size: 3rem;
+    font-size: 3.5rem;
+    margin-bottom: 1.5rem;
+    display: block;
+    transform: scale(1);
+    transition: var(--transition);
+}
+
+.feature-card:hover .feature-icon {
+    transform: scale(1.1) rotate(5deg);
+}
+
+.feature-card h3 {
+    font-size: 1.4rem;
+    font-weight: 600;
     margin-bottom: 1rem;
+    color: white;
 }
 
+.feature-card p {
+    opacity: 0.9;
+    line-height: 1.6;
+    font-size: 1rem;
+}
+
+/* Fixed Auth Container Styling */
 .auth-container {
-    max-width: 450px;
+    max-width: 480px;
     margin: 2rem auto;
-    background: white;
-    border-radius: 20px;
-    padding: 3rem;
-    box-shadow: 0 20px 40px rgba(0,0,0,0.1);
-    border: 1px solid #e2e8f0;
+    background: var(--bg-card);
+    border-radius: var(--border-radius);
+    padding: 3rem 2.5rem;
+    box-shadow: var(--shadow-heavy);
+    border: 1px solid var(--border-color);
+    position: relative;
+    backdrop-filter: blur(10px);
 }
 
+.auth-container::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    height: 4px;
+    background: linear-gradient(90deg, var(--primary-color), var(--secondary-color));
+    border-radius: var(--border-radius) var(--border-radius) 0 0;
+}
+
+/* WhatsApp Setup Enhanced */
 .whatsapp-setup {
     background: linear-gradient(135deg, #25D366 0%, #128C7E 100%);
     color: white;
-    padding: 2rem;
-    border-radius: 15px;
+    padding: 2.5rem;
+    border-radius: var(--border-radius);
     margin: 2rem 0;
     text-align: center;
-    box-shadow: 0 10px 25px rgba(37, 211, 102, 0.3);
+    box-shadow: 0 15px 35px rgba(37, 211, 102, 0.3);
+    position: relative;
+    overflow: hidden;
+}
+
+.whatsapp-setup::before {
+    content: '';
+    position: absolute;
+    top: -50%;
+    left: -50%;
+    width: 200%;
+    height: 200%;
+    background: linear-gradient(45deg, transparent, rgba(255,255,255,0.05), transparent);
+    animation: shimmer 3s infinite;
+}
+
+@keyframes shimmer {
+    0% { transform: translateX(-100%) translateY(-100%) rotate(45deg); }
+    100% { transform: translateX(100%) translateY(100%) rotate(45deg); }
 }
 
 .whatsapp-steps {
-    background: rgba(255, 255, 255, 0.1);
-    backdrop-filter: blur(10px);
-    border-radius: 10px;
-    padding: 1.5rem;
-    margin: 1rem 0;
+    background: rgba(255, 255, 255, 0.15);
+    backdrop-filter: blur(15px);
+    border-radius: var(--border-radius-small);
+    padding: 2rem;
+    margin: 1.5rem 0;
     border: 1px solid rgba(255, 255, 255, 0.2);
     text-align: left;
+    position: relative;
+    z-index: 1;
+}
+
+.whatsapp-steps h4 {
+    color: white;
+    font-weight: 600;
+    margin-bottom: 1rem;
+    font-size: 1.2rem;
 }
 
-.phone-highlight {
-    background: rgba(255, 255, 255, 0.2);
-    padding: 0.5rem 1rem;
-    border-radius: 8px;
-    font-family: 'Monaco', 'Menlo', monospace;
+.phone-highlight, .code-highlight {
+    background: rgba(255, 255, 255, 0.25);
+    padding: 0.8rem 1.2rem;
+    border-radius: var(--border-radius-small);
+    font-family: 'SF Mono', 'Monaco', 'Cascadia Code', 'Roboto Mono', monospace;
     font-size: 1.1rem;
     font-weight: bold;
     display: inline-block;
-    margin: 0.5rem 0;
+    margin: 0.8rem 0;
+    border: 1px solid rgba(255, 255, 255, 0.3);
+    box-shadow: inset 0 1px 3px rgba(0,0,0,0.1);
 }
 
 .code-highlight {
-    background: rgba(255, 255, 255, 0.15);
-    padding: 0.5rem 1rem;
-    border-radius: 8px;
-    font-family: 'Monaco', 'Menlo', monospace;
-    font-size: 1rem;
-    font-weight: bold;
-    display: inline-block;
-    margin: 0.5rem 0;
-    border-left: 3px solid #fff;
+    border-left: 4px solid rgba(255, 255, 255, 0.5);
 }
 
+/* Enhanced Dashboard Styling */
 .dashboard-header {
-    background: linear-gradient(135deg, #2d3748 0%, #4a5568 100%);
+    background: linear-gradient(135deg, var(--text-primary) 0%, var(--text-secondary) 100%);
     color: white;
-    padding: 2rem;
-    border-radius: 15px;
+    padding: 2.5rem;
+    border-radius: var(--border-radius);
     margin-bottom: 2rem;
     text-align: center;
-    font-size: 1.5rem;
-    box-shadow: 0 10px 25px rgba(45, 55, 72, 0.3);
+    font-size: 1.6rem;
+    box-shadow: var(--shadow-medium);
+    position: relative;
+    overflow: hidden;
+}
+
+.dashboard-welcome {
+    font-size: 1.8rem;
+    font-weight: 300;
+    text-shadow: 1px 1px 2px rgba(0,0,0,0.2);
+}
+
+.dashboard-welcome strong {
+    font-weight: 600;
+    color: #ffd700;
 }
 
 .balance-card {
-    background: linear-gradient(135deg, #48bb78 0%, #38a169 100%);
+    background: linear-gradient(135deg, var(--success-color) 0%, #38a169 100%);
     color: white;
-    padding: 2rem;
-    border-radius: 15px;
+    padding: 2.5rem;
+    border-radius: var(--border-radius);
     text-align: center;
     margin-bottom: 2rem;
-    box-shadow: 0 10px 25px rgba(72, 187, 120, 0.3);
+    box-shadow: var(--shadow-medium);
+    position: relative;
+    overflow: hidden;
+}
+
+.balance-card::after {
+    content: '💰';
+    position: absolute;
+    top: -20px;
+    right: -20px;
+    font-size: 8rem;
+    opacity: 0.1;
+    pointer-events: none;
 }
 
 .balance-amount {
-    font-size: 2.5rem;
-    font-weight: bold;
-    margin: 1rem 0;
+    font-size: clamp(2rem, 4vw, 3rem);
+    font-weight: 800;
+    margin: 1.5rem 0;
     text-shadow: 2px 2px 4px rgba(0,0,0,0.2);
+    background: linear-gradient(45deg, #fff, #f0fff0);
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+    background-clip: text;
 }
 
-.primary-btn {
-    background: linear-gradient(45deg, #ff6b6b, #ee5a24) !important;
+/* Enhanced Button Styling with Equal Sizes */
+.primary-btn, .secondary-btn {
     border: none !important;
     border-radius: 25px !important;
     padding: 1rem 2rem !important;
     font-size: 1.1rem !important;
     font-weight: 600 !important;
     color: white !important;
-    transition: all 0.3s ease !important;
-    box-shadow: 0 4px 15px rgba(238, 90, 36, 0.4) !important;
+    transition: var(--transition) !important;
     cursor: pointer !important;
+    position: relative !important;
+    overflow: hidden !important;
+    min-width: 180px !important;
+    height: 48px !important;
+    display: inline-flex !important;
+    align-items: center !important;
+    justify-content: center !important;
+    text-decoration: none !important;
+    box-sizing: border-box !important;
+}
+
+.primary-btn {
+    background: linear-gradient(45deg, var(--accent-color), #ee5a24) !important;
+    box-shadow: 0 4px 15px rgba(238, 90, 36, 0.4) !important;
 }
 
 .primary-btn:hover {
-    transform: translateY(-2px) !important;
-    box-shadow: 0 6px 20px rgba(238, 90, 36, 0.6) !important;
+    transform: translateY(-3px) !important;
+    box-shadow: 0 8px 25px rgba(238, 90, 36, 0.6) !important;
 }
 
 .secondary-btn {
     background: linear-gradient(45deg, #74b9ff, #0984e3) !important;
-    border: none !important;
-    border-radius: 25px !important;
-    padding: 1rem 2rem !important;
-    font-size: 1.1rem !important;
-    font-weight: 600 !important;
-    color: white !important;
-    transition: all 0.3s ease !important;
     box-shadow: 0 4px 15px rgba(116, 185, 255, 0.4) !important;
-    cursor: pointer !important;
 }
 
 .secondary-btn:hover {
-    transform: translateY(-2px) !important;
-    box-shadow: 0 6px 20px rgba(116, 185, 255, 0.6) !important;
+    transform: translateY(-3px) !important;
+    box-shadow: 0 8px 25px rgba(116, 185, 255, 0.6) !important;
 }
 
-/* Table styling */
+.primary-btn::before, .secondary-btn::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: -100%;
+    width: 100%;
+    height: 100%;
+    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
+    transition: left 0.5s;
+}
+
+.primary-btn:hover::before, .secondary-btn:hover::before {
+    left: 100%;
+}
+
+/* Enhanced Table Styling */
 .dataframe {
-    border-radius: 10px !important;
+    border-radius: var(--border-radius) !important;
     overflow: hidden !important;
-    box-shadow: 0 4px 15px rgba(0,0,0,0.1) !important;
-    border: 1px solid #e2e8f0 !important;
+    box-shadow: var(--shadow-medium) !important;
+    border: 1px solid var(--border-color) !important;
+    background: var(--bg-card) !important;
+    margin: 1rem 0 !important;
 }
 
 .dataframe th {
-    background: linear-gradient(135deg, #f7fafc 0%, #edf2f7 100%) !important;
+    background: linear-gradient(135deg, var(--bg-light) 0%, #edf2f7 100%) !important;
     font-weight: 600 !important;
-    padding: 1rem !important;
-    border-bottom: 2px solid #e2e8f0 !important;
+    padding: 1.2rem 1rem !important;
+    border-bottom: 2px solid var(--border-color) !important;
+    color: var(--text-primary) !important;
+    font-size: 0.95rem !important;
+    text-transform: uppercase !important;
+    letter-spacing: 0.5px !important;
 }
 
 .dataframe td {
-    padding: 0.75rem 1rem !important;
+    padding: 1rem !important;
     border-bottom: 1px solid #f1f5f9 !important;
+    color: var(--text-secondary) !important;
+    transition: background-color 0.2s ease !important;
+}
+
+.dataframe tr:hover td {
+    background-color: rgba(102, 126, 234, 0.05) !important;
+}
+
+/* Enhanced Tab Styling */
+.tab-nav .tab-nav {
+    border-radius: var(--border-radius) !important;
+    background: var(--bg-card) !important;
+    box-shadow: var(--shadow-light) !important;
+    border: 1px solid var(--border-color) !important;
+    overflow: hidden !important;
+}
+
+.tab-nav button {
+    background: transparent !important;
+    border: none !important;
+    padding: 1rem 1.5rem !important;
+    font-weight: 500 !important;
+    color: var(--text-secondary) !important;
+    transition: var(--transition) !important;
+    position: relative !important;
+}
+
+.tab-nav button:hover {
+    background: rgba(102, 126, 234, 0.05) !important;
+    color: var(--primary-color) !important;
+}
+
+.tab-nav button.selected {
+    background: var(--primary-color) !important;
+    color: white !important;
+}
+
+.tab-nav button.selected::after {
+    content: '';
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    height: 3px;
+    background: var(--accent-color);
+}
+
+/* Enhanced Form Styling */
+.gr-form {
+    background: var(--bg-card) !important;
+    border-radius: var(--border-radius) !important;
+    padding: 2rem !important;
+    box-shadow: var(--shadow-light) !important;
+    border: 1px solid var(--border-color) !important;
+    margin: 1rem 0 !important;
+}
+
+.gr-form label {
+    font-weight: 600 !important;
+    color: var(--text-primary) !important;
+    margin-bottom: 0.5rem !important;
+    display: block !important;
+}
+
+.gr-form input, .gr-form textarea, .gr-form select {
+    border: 2px solid var(--border-color) !important;
+    border-radius: var(--border-radius-small) !important;
+    padding: 0.8rem 1rem !important;
+    font-size: 1rem !important;
+    transition: var(--transition) !important;
+    background: var(--bg-card) !important;
+    color: var(--text-primary) !important;
+}
+
+.gr-form input:focus, .gr-form textarea:focus, .gr-form select:focus {
+    border-color: var(--primary-color) !important;
+    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1) !important;
+    outline: none !important;
 }
 
-/* Status messages */
+/* Status Messages */
 .status-success {
-    color: #38a169 !important;
+    color: var(--success-color) !important;
+    background: rgba(72, 187, 120, 0.1) !important;
+    border: 1px solid rgba(72, 187, 120, 0.2) !important;
+    padding: 1rem !important;
+    border-radius: var(--border-radius-small) !important;
     font-weight: 600 !important;
+    margin: 1rem 0 !important;
 }
 
 .status-error {
-    color: #e53e3e !important;
+    color: var(--error-color) !important;
+    background: rgba(229, 62, 62, 0.1) !important;
+    border: 1px solid rgba(229, 62, 62, 0.2) !important;
+    padding: 1rem !important;
+    border-radius: var(--border-radius-small) !important;
     font-weight: 600 !important;
+    margin: 1rem 0 !important;
+}
+
+/* Enhanced Cards and Sections */
+.info-card {
+    background: var(--bg-card);
+    border-radius: var(--border-radius);
+    padding: 2rem;
+    box-shadow: var(--shadow-light);
+    border: 1px solid var(--border-color);
+    margin: 1rem 0;
+    position: relative;
+    overflow: hidden;
+}
+
+.info-card::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    height: 4px;
+    background: linear-gradient(90deg, var(--primary-color), var(--secondary-color));
+}
+
+.info-card h3 {
+    color: var(--text-primary);
+    font-size: 1.4rem;
+    font-weight: 600;
+    margin-bottom: 1rem;
 }
 
-/* Responsive design */
+.info-card p {
+    color: var(--text-secondary);
+    line-height: 1.6;
+    margin-bottom: 1rem;
+}
+
+/* Responsive Design Enhancements */
 @media (max-width: 768px) {
+    .gradio-container {
+        padding: 0.5rem !important;
+    }
+    
     .hero-title {
         font-size: 2.5rem;
     }
@@ -2286,33 +2592,203 @@ custom_css = """
     
     .features-grid {
         grid-template-columns: 1fr;
-        gap: 1rem;
+        gap: 1.5rem;
     }
     
     .auth-container {
         margin: 1rem;
-        padding: 2rem;
+        padding: 2rem 1.5rem;
+    }
+    
+    .balance-amount {
+        font-size: 2.2rem;
+    }
+    
+    .primary-btn, .secondary-btn {
+        min-width: 150px !important;
+        font-size: 1rem !important;
+        padding: 0.9rem 1.5rem !important;
+    }
+    
+    .dashboard-welcome {
+        font-size: 1.4rem;
+    }
+    
+    .feature-card {
+        padding: 2rem 1.5rem;
+    }
+    
+    .whatsapp-setup {
+        padding: 2rem 1.5rem;
+    }
+    
+    .whatsapp-steps {
+        padding: 1.5rem;
+    }
+}
+
+@media (max-width: 480px) {
+    .hero-title {
+        font-size: 2rem;
     }
     
     .balance-amount {
         font-size: 2rem;
     }
+    
+    .auth-container {
+        padding: 2rem 1rem;
+    }
+    
+    .primary-btn, .secondary-btn {
+        min-width: 130px !important;
+        padding: 0.8rem 1.2rem !important;
+    }
 }
 
-/* Loading states */
+/* Loading States */
 .loading {
     opacity: 0.6;
     pointer-events: none;
+    position: relative;
+}
+
+.loading::after {
+    content: '';
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    width: 20px;
+    height: 20px;
+    margin: -10px 0 0 -10px;
+    border: 2px solid transparent;
+    border-top-color: var(--primary-color);
+    border-radius: 50%;
+    animation: spin 1s linear infinite;
+}
+
+@keyframes spin {
+    0% { transform: rotate(0deg); }
+    100% { transform: rotate(360deg); }
 }
 
 /* Animations */
 @keyframes fadeIn {
-    from { opacity: 0; transform: translateY(20px); }
-    to { opacity: 1; transform: translateY(0); }
+    from { 
+        opacity: 0; 
+        transform: translateY(30px); 
+    }
+    to { 
+        opacity: 1; 
+        transform: translateY(0); 
+    }
+}
+
+@keyframes slideIn {
+    from {
+        opacity: 0;
+        transform: translateX(-30px);
+    }
+    to {
+        opacity: 1;
+        transform: translateX(0);
+    }
 }
 
 .fade-in {
-    animation: fadeIn 0.5s ease-out;
+    animation: fadeIn 0.6s ease-out;
+}
+
+.slide-in {
+    animation: slideIn 0.6s ease-out;
+}
+
+/* Enhanced Gradient Backgrounds */
+.gradient-bg-1 {
+    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+}
+
+.gradient-bg-2 {
+    background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
+}
+
+.gradient-bg-3 {
+    background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
+}
+
+.gradient-bg-4 {
+    background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);
+}
+
+/* Chart Container Enhancements */
+.plotly-graph-div {
+    border-radius: var(--border-radius) !important;
+    box-shadow: var(--shadow-light) !important;
+    border: 1px solid var(--border-color) !important;
+    background: var(--bg-card) !important;
+    margin: 1rem 0 !important;
+}
+
+/* File Upload Styling */
+.file-upload {
+    border: 2px dashed var(--border-color) !important;
+    border-radius: var(--border-radius) !important;
+    padding: 2rem !important;
+    text-align: center !important;
+    background: var(--bg-light) !important;
+    transition: var(--transition) !important;
+}
+
+.file-upload:hover {
+    border-color: var(--primary-color) !important;
+    background: rgba(102, 126, 234, 0.05) !important;
+}
+
+/* Enhanced Accordion Styling */
+.gr-accordion {
+    border-radius: var(--border-radius) !important;
+    border: 1px solid var(--border-color) !important;
+    overflow: hidden !important;
+    box-shadow: var(--shadow-light) !important;
+}
+
+.gr-accordion summary {
+    background: var(--bg-light) !important;
+    padding: 1rem 1.5rem !important;
+    font-weight: 600 !important;
+    color: var(--text-primary) !important;
+    cursor: pointer !important;
+    transition: var(--transition) !important;
+}
+
+.gr-accordion summary:hover {
+    background: rgba(102, 126, 234, 0.05) !important;
+}
+
+.gr-accordion[open] summary {
+    background: var(--primary-color) !important;
+    color: white !important;
+}
+
+/* Scrollbar Styling */
+::-webkit-scrollbar {
+    width: 8px;
+    height: 8px;
+}
+
+::-webkit-scrollbar-track {
+    background: var(--bg-light);
+    border-radius: 4px;
+}
+
+::-webkit-scrollbar-thumb {
+    background: var(--border-color);
+    border-radius: 4px;
+    transition: var(--transition);
+}
+
+::-webkit-scrollbar-thumb:hover {
+    background: var(--text-secondary);
 }
 """
 
@@ -2323,7 +2799,7 @@ with gr.Blocks(title="FinGenius Pro", theme=gr.themes.Soft(), css=custom_css) as
     receipt_data = gr.State({})
     
     # ===== LANDING PAGE =====
-    with gr.Column(visible=True) as landing_page:
+    with gr.Column(visible=True, elem_classes="fade-in") as landing_page:
         gr.HTML("""
             <div class="landing-hero">
                 <div class="hero-title">🏦 FinGenius Pro</div>
@@ -2333,52 +2809,52 @@ with gr.Blocks(title="FinGenius Pro", theme=gr.themes.Soft(), css=custom_css) as
                     <div class="feature-card">
                         <div class="feature-icon">💰</div>
                         <h3>Smart Balance Tracking</h3>
-                        <p>Real-time balance monitoring with intelligent spending alerts</p>
+                        <p>Real-time balance monitoring with intelligent spending alerts and comprehensive financial insights</p>
                     </div>
                     <div class="feature-card">
                         <div class="feature-icon">📱</div>
                         <h3>WhatsApp Integration</h3>
-                        <p>Get instant notifications for every expense and budget alert</p>
+                        <p>Get instant notifications for every expense, budget alert, and financial milestone directly on WhatsApp</p>
                     </div>
                     <div class="feature-card">
                         <div class="feature-icon">📊</div>
                         <h3>Advanced Analytics</h3>
-                        <p>Beautiful charts and insights to track your spending patterns</p>
+                        <p>Beautiful interactive charts and detailed insights to track spending patterns and financial trends</p>
                     </div>
                     <div class="feature-card">
                         <div class="feature-icon">🧾</div>
-                        <h3>Receipt Scanning</h3>
-                        <p>AI-powered OCR to automatically extract expense data from receipts</p>
+                        <h3>AI Receipt Scanning</h3>
+                        <p>Revolutionary OCR technology to automatically extract expense data from receipt photos with high accuracy</p>
                     </div>
                     <div class="feature-card">
                         <div class="feature-icon">👪</div>
-                        <h3>Family Finance</h3>
-                        <p>Create family groups to manage household finances together</p>
+                        <h3>Family Finance Hub</h3>
+                        <p>Create family groups to collaboratively manage household finances, budgets, and shared expenses</p>
                     </div>
                     <div class="feature-card">
                         <div class="feature-icon">🔒</div>
-                        <h3>Secure & Private</h3>
-                        <p>Password-protected accounts with encrypted data storage</p>
+                        <h3>Bank-Level Security</h3>
+                        <p>Military-grade encryption, secure authentication, and privacy-first design to protect your financial data</p>
                     </div>
                 </div>
             </div>
         """)
         
-        with gr.Row():
+        with gr.Row(equal_height=True):
             with gr.Column(scale=1):
                 signin_btn = gr.Button("🔑 Sign In", variant="primary", elem_classes="primary-btn", size="lg")
             with gr.Column(scale=1):
                 signup_btn = gr.Button("✨ Create Account", variant="secondary", elem_classes="secondary-btn", size="lg")
 
     # ===== SIGN IN PAGE =====
-    with gr.Column(visible=False) as signin_page:
+    with gr.Column(visible=False, elem_classes="fade-in") as signin_page:
         with gr.Column(elem_classes="auth-container"):
-            gr.HTML("<h2 style='text-align: center; color: #2d3748; margin-bottom: 2rem;'>🔑 Welcome Back</h2>")
+            gr.HTML("<h2 style='text-align: center; color: #2d3748; margin-bottom: 2rem; font-weight: 600;'>🔑 Welcome Back to FinGenius Pro</h2>")
             
             signin_phone = gr.Textbox(
                 label="📱 WhatsApp Number", 
                 placeholder="+92XXXXXXXXXX",
-                info="Enter your registered WhatsApp number"
+                info="Enter your registered WhatsApp number (Pakistan format)"
             )
             signin_password = gr.Textbox(
                 label="🔒 Password", 
@@ -2386,16 +2862,16 @@ with gr.Blocks(title="FinGenius Pro", theme=gr.themes.Soft(), css=custom_css) as
                 placeholder="Enter your secure password"
             )
             
-            with gr.Row():
-                submit_signin = gr.Button("Sign In", variant="primary", elem_classes="primary-btn", scale=2)
-                back_to_landing_1 = gr.Button("← Back", variant="secondary", scale=1)
+            with gr.Row(equal_height=True):
+                submit_signin = gr.Button("Sign In", variant="primary", elem_classes="primary-btn", scale=1)
+                back_to_landing_1 = gr.Button("← Back", variant="secondary", elem_classes="secondary-btn", scale=1)
             
-            signin_status = gr.Textbox(label="Status", interactive=False)
+            signin_status = gr.Textbox(label="Status", interactive=False, elem_classes="status-display")
 
     # ===== SIGN UP PAGE =====
-    with gr.Column(visible=False) as signup_page:
+    with gr.Column(visible=False, elem_classes="fade-in") as signup_page:
         with gr.Column(elem_classes="auth-container"):
-            gr.HTML("<h2 style='text-align: center; color: #2d3748; margin-bottom: 2rem;'>✨ Create Your Account</h2>")
+            gr.HTML("<h2 style='text-align: center; color: #2d3748; margin-bottom: 2rem; font-weight: 600;'>✨ Create Your FinGenius Pro Account</h2>")
             
             signup_name = gr.Textbox(
                 label="👤 Full Name",
@@ -2404,7 +2880,7 @@ with gr.Blocks(title="FinGenius Pro", theme=gr.themes.Soft(), css=custom_css) as
             signup_phone = gr.Textbox(
                 label="📱 WhatsApp Number", 
                 placeholder="+92XXXXXXXXXX",
-                info="This will be used for notifications"
+                info="This will be used for financial notifications"
             )
             signup_password = gr.Textbox(
                 label="🔒 Create Password", 
@@ -2417,16 +2893,17 @@ with gr.Blocks(title="FinGenius Pro", theme=gr.themes.Soft(), css=custom_css) as
                 placeholder="Re-enter your password"
             )
             
-            # WhatsApp Setup Instructions
+            # Enhanced WhatsApp Setup Instructions
             gr.HTML("""
                 <div class='whatsapp-setup'>
-                    <h3>📱 Enable WhatsApp Alerts</h3>
-                    <p style='font-size: 1.1rem; margin-bottom: 1.5rem;'>To receive instant notifications for your financial activities, follow these steps:</p>
+                    <h3>📱 Enable WhatsApp Financial Alerts</h3>
+                    <p style='font-size: 1.2rem; margin-bottom: 2rem; font-weight: 300;'>Get instant notifications for all your financial activities. Follow these simple steps:</p>
                     
                     <div class='whatsapp-steps'>
                         <h4>Step 1: Save the Bot Number</h4>
                         <p>Add this Twilio WhatsApp Sandbox number to your contacts:</p>
                         <div class='phone-highlight'>+1 (415) 523-8886</div>
+                        <p style='font-size: 0.9rem; opacity: 0.8; margin-top: 0.5rem;'>Save as "FinGenius Bot" in your phone</p>
                     </div>
                     
                     <div class='whatsapp-steps'>
@@ -2434,156 +2911,286 @@ with gr.Blocks(title="FinGenius Pro", theme=gr.themes.Soft(), css=custom_css) as
                         <p>Send this exact message to the number above:</p>
                         <div class='code-highlight'>join catch-manner</div>
                         <p style='font-size: 0.9rem; opacity: 0.8; margin-top: 0.5rem;'>
-                            ⚠️ <strong>Important:</strong> You must send this exact code to activate the sandbox.
+                            ⚠️ <strong>Critical:</strong> You must send this exact code to activate the sandbox.
                         </p>
                     </div>
                     
                     <div class='whatsapp-steps'>
                         <h4>Step 3: Confirm Registration</h4>
                         <p>After sending the code, register your FinGenius account with the <strong>same phone number</strong> you used to message the bot.</p>
+                        <p style='font-size: 0.9rem; opacity: 0.8;'>The phone numbers must match exactly for notifications to work.</p>
                     </div>
                     
                     <div class='whatsapp-steps'>
-                        <h4>Step 4: Start Receiving Alerts</h4>
+                        <h4>Step 4: Start Receiving Smart Alerts</h4>
                         <p>You'll receive instant WhatsApp notifications for:</p>
-                        <ul style='text-align: left; margin-left: 1rem; opacity: 0.9;'>
+                        <ul style='text-align: left; margin-left: 1.5rem; opacity: 0.9; line-height: 1.8;'>
                             <li>✅ Account registration confirmation</li>
-                            <li>💰 Balance updates</li>
-                            <li>💸 Expense notifications</li>
+                            <li>💰 Balance updates and additions</li>
+                            <li>💸 Real-time expense notifications</li>
                             <li>🧾 Receipt processing confirmations</li>
-                            <li>📈 Investment tracking</li>
-                            <li>🚨 Budget alerts</li>
+                            <li>📈 Investment tracking updates</li>
+                            <li>🚨 Budget alerts and overspending warnings</li>
+                            <li>📊 Weekly financial summaries</li>
+                            <li>👪 Family group activities</li>
                         </ul>
                     </div>
                 </div>
             """)
             
-            with gr.Row():
-                submit_signup = gr.Button("Complete Registration", variant="primary", elem_classes="primary-btn", scale=2)
-                back_to_landing_2 = gr.Button("← Back", variant="secondary", scale=1)
+            with gr.Row(equal_height=True):
+                submit_signup = gr.Button("Complete Registration", variant="primary", elem_classes="primary-btn", scale=1)
+                back_to_landing_2 = gr.Button("← Back", variant="secondary", elem_classes="secondary-btn", scale=1)
             
-            signup_status = gr.Textbox(label="Status", interactive=False)
+            signup_status = gr.Textbox(label="Status", interactive=False, elem_classes="status-display")
 
     # ===== DASHBOARD PAGE =====
-    with gr.Column(visible=False) as dashboard_page:
-        # Dashboard Header
+    with gr.Column(visible=False, elem_classes="fade-in") as dashboard_page:
+        # Enhanced Dashboard Header
         welcome_message = gr.HTML("", elem_classes="dashboard-header")
         
-        # Current Balance Display
+        # Enhanced Current Balance Display
         with gr.Column(elem_classes="balance-card"):
             balance_display = gr.HTML("<div class='balance-amount'>💰 0 PKR</div>")
             
             with gr.Row():
                 with gr.Column(scale=2):
-                    balance_amount = gr.Number(label="💰 Add to Balance (PKR)", minimum=1, step=100, value=0)
-                    balance_description = gr.Textbox(label="Description", placeholder="Salary, gift, bonus, etc.")
+                    balance_amount = gr.Number(
+                        label="💰 Add to Balance (PKR)", 
+                        minimum=1, 
+                        step=100, 
+                        value=0,
+                        info="Add money from salary, bonus, or other income sources"
+                    )
+                    balance_description = gr.Textbox(
+                        label="Description", 
+                        placeholder="e.g., Monthly salary, freelance payment, gift money",
+                        info="Optional: Add a note about this income"
+                    )
                 with gr.Column(scale=1):
-                    add_balance_btn = gr.Button("Add Balance", variant="primary", elem_classes="primary-btn")
+                    add_balance_btn = gr.Button("Add Balance", variant="primary", elem_classes="primary-btn", size="lg")
         
-        balance_status = gr.Textbox(label="Balance Status", interactive=False)
+        balance_status = gr.Textbox(label="Balance Status", interactive=False, elem_classes="status-display")
         
         with gr.Tabs(elem_classes="tab-nav"):
-            # Dashboard Overview Tab
+            # Enhanced Dashboard Overview Tab
             with gr.Tab("📊 Dashboard Overview"):
                 gr.HTML("""
-                    <div style="text-align: center; padding: 3rem; background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%); border-radius: 15px; color: white; margin: 2rem 0;">
-                        <h2>🎉 Welcome to FinGenius Pro!</h2>
-                        <p style="font-size: 1.2rem; opacity: 0.9;">Your personal finance management just got smarter. Start by adding some balance and setting up your budget allocations.</p>
+                    <div class="info-card gradient-bg-2" style="color: white; text-align: center; padding: 3rem; border-radius: 15px; margin: 2rem 0;">
+                        <h2 style="font-size: 2.2rem; font-weight: 600; margin-bottom: 1rem;">🎉 Welcome to FinGenius Pro!</h2>
+                        <p style="font-size: 1.3rem; opacity: 0.95; line-height: 1.6; font-weight: 300;">Your comprehensive financial management solution is ready. Let's build your financial future together!</p>
                     </div>
                 """)
                 
                 with gr.Row():
-                    gr.HTML("""
-                        <div style="background: #e6fffa; padding: 2rem; border-radius: 15px; border-left: 4px solid #38b2ac;">
-                            <h3>🚀 Quick Start Guide:</h3>
-                            <ol style="text-align: left; margin-left: 1rem;">
-                                <li><strong>Add Balance:</strong> Use the balance card above to add your initial funds</li>
-                                <li><strong>Set Income & Goals:</strong> Go to Income & Goals tab to set your monthly income and savings target</li>
-                                <li><strong>Plan Budget:</strong> Use Budget Planner to allocate money to different expense categories</li>
-                                <li><strong>Track Expenses:</strong> Log your daily expenses in the Expense Tracker</li>
-                                <li><strong>Scan Receipts:</strong> Use Receipt Scan to automatically extract expense data from photos</li>
-                                <li><strong>Monitor Investments:</strong> Keep track of your investment portfolio</li>
-                            </ol>
-                        </div>
-                    """)
-            
-            # Income & Goals Tab
+                    with gr.Column():
+                        gr.HTML("""
+                            <div class="info-card">
+                                <h3>🚀 Quick Start Guide</h3>
+                                <ol style="text-align: left; margin-left: 1.5rem; line-height: 2; color: #4a5568;">
+                                    <li><strong>💰 Add Initial Balance:</strong> Use the balance card above to add your starting funds</li>
+                                    <li><strong>📊 Set Financial Goals:</strong> Navigate to "Income & Goals" to set your monthly income and savings targets</li>
+                                    <li><strong>📋 Plan Your Budget:</strong> Use "Budget Planner" to allocate money across expense categories</li>
+                                    <li><strong>💸 Track Daily Expenses:</strong> Log your spending in "Expense Tracker" with automatic categorization</li>
+                                    <li><strong>📷 Scan Receipts:</strong> Use "Receipt Scan" for AI-powered expense extraction from photos</li>
+                                    <li><strong>📈 Monitor Investments:</strong> Keep track of your investment portfolio and growth</li>
+                                    <li><strong>👪 Family Finance:</strong> Create or join family groups for collaborative budgeting</li>
+                                    <li><strong>📊 Analyze Trends:</strong> Review spending patterns and balance trends in analytics</li>
+                                </ol>
+                            </div>
+                        """)
+                    
+                    with gr.Column():
+                        gr.HTML("""
+                            <div class="info-card">
+                                <h3>🎯 Pro Tips for Success</h3>
+                                <ul style="text-align: left; margin-left: 1.5rem; line-height: 2; color: #4a5568;">
+                                    <li><strong>🔔 Enable WhatsApp Alerts:</strong> Get real-time notifications for all financial activities</li>
+                                    <li><strong>📅 Daily Habit:</strong> Log expenses immediately to maintain accurate records</li>
+                                    <li><strong>🎯 Set Realistic Goals:</strong> Start with achievable savings targets and increase gradually</li>
+                                    <li><strong>📊 Weekly Reviews:</strong> Check your spending patterns every week</li>
+                                    <li><strong>🏷️ Categorize Properly:</strong> Use specific categories for better insights</li>
+                                    <li><strong>💡 Use Receipt Scanner:</strong> Save time with AI-powered expense extraction</li>
+                                    <li><strong>👨‍👩‍👧‍👦 Family Collaboration:</strong> Share financial goals with family members</li>
+                                    <li><strong>📈 Track ROI:</strong> Monitor your investment performance regularly</li>
+                                </ul>
+                            </div>
+                        """)
+            
+            # Enhanced Income & Goals Tab
             with gr.Tab("📥 Income & Goals"):
-                gr.HTML("<h3>💵 Set Your Financial Goals</h3>")
+                gr.HTML("""
+                    <div class="info-card gradient-bg-3" style="color: white; text-align: center; padding: 2.5rem; margin-bottom: 2rem;">
+                        <h3 style="font-size: 1.8rem; margin-bottom: 1rem;">💵 Financial Goal Setting</h3>
+                        <p style="font-size: 1.1rem; opacity: 0.9;">Set your monthly income and savings goals to create a personalized budget plan</p>
+                    </div>
+                """)
                 
                 with gr.Row():
-                    income = gr.Number(label="💵 Monthly Income (PKR)", minimum=0, step=1000, value=0)
-                    savings_goal = gr.Number(label="🎯 Savings Goal (PKR)", minimum=0, step=1000, value=0)
+                    with gr.Column():
+                        income = gr.Number(
+                            label="💵 Monthly Income (PKR)", 
+                            minimum=0, 
+                            step=1000, 
+                            value=0,
+                            info="Enter your total monthly income from all sources"
+                        )
+                    with gr.Column():
+                        savings_goal = gr.Number(
+                            label="🎯 Monthly Savings Goal (PKR)", 
+                            minimum=0, 
+                            step=1000, 
+                            value=0,
+                            info="How much do you want to save each month?"
+                        )
+                
+                update_btn = gr.Button("💾 Update Financial Information", variant="primary", elem_classes="primary-btn", size="lg")
+                income_status = gr.Textbox(label="Status", interactive=False, elem_classes="status-display")
                 
-                update_btn = gr.Button("💾 Update Financial Info", variant="primary", elem_classes="primary-btn")
-                income_status = gr.Textbox(label="Status", interactive=False)
+                gr.HTML("""
+                    <div class="info-card">
+                        <h3>💡 Smart Financial Planning Tips</h3>
+                        <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 1.5rem; margin-top: 1rem;">
+                            <div style="background: #e6fffa; padding: 1.5rem; border-radius: 10px; border-left: 4px solid #38b2ac;">
+                                <h4 style="color: #2d3748; margin-bottom: 0.5rem;">50/30/20 Rule</h4>
+                                <p style="color: #4a5568; font-size: 0.9rem;">50% needs, 30% wants, 20% savings & debt repayment</p>
+                            </div>
+                            <div style="background: #fef5e7; padding: 1.5rem; border-radius: 10px; border-left: 4px solid #ed8936;">
+                                <h4 style="color: #2d3748; margin-bottom: 0.5rem;">Emergency Fund</h4>
+                                <p style="color: #4a5568; font-size: 0.9rem;">Aim for 3-6 months of expenses in emergency savings</p>
+                            </div>
+                            <div style="background: #e6ffed; padding: 1.5rem; border-radius: 10px; border-left: 4px solid #48bb78;">
+                                <h4 style="color: #2d3748; margin-bottom: 0.5rem;">Investment Goal</h4>
+                                <p style="color: #4a5568; font-size: 0.9rem;">Consider investing 10-15% of income for long-term growth</p>
+                            </div>
+                        </div>
+                    </div>
+                """)
             
-            # Budget Planner Tab
+            # Enhanced Budget Planner Tab
             with gr.Tab("📊 Budget Planner"):
-                gr.HTML("<h3>💼 Allocate Your Monthly Budget</h3>")
+                gr.HTML("""
+                    <div class="info-card gradient-bg-4" style="color: white; text-align: center; padding: 2.5rem; margin-bottom: 2rem;">
+                        <h3 style="font-size: 1.8rem; margin-bottom: 1rem;">💼 Smart Budget Allocation</h3>
+                        <p style="font-size: 1.1rem; opacity: 0.9;">Distribute your monthly income across different expense categories for optimal financial management</p>
+                    </div>
+                """)
 
                 with gr.Column():
                     allocation_inputs = []
+                    
+                    # Group categories for better layout
+                    essential_categories = ["Housing (Rent/Mortgage)", "Utilities (Electricity/Water)", "Groceries", "Transportation", "Healthcare"]
+                    lifestyle_categories = ["Dining Out", "Entertainment", "Personal Care", "Education"]
+                    financial_categories = ["Debt Payments", "Savings", "Investments", "Charity", "Miscellaneous"]
+                    
+                    gr.HTML("<h4 style='color: #2d3748; margin: 1.5rem 0 1rem 0;'>🏠 Essential Expenses</h4>")
                     with gr.Row():
-                        for i, category in enumerate(EXPENSE_CATEGORIES[:7]):
-                            alloc = gr.Number(label=f"🏷️ {category}", minimum=0, step=100, value=0)
+                        for category in essential_categories:
+                            alloc = gr.Number(
+                                label=f"🏷️ {category}", 
+                                minimum=0, 
+                                step=100, 
+                                value=0,
+                                info=f"Monthly budget for {category.lower()}"
+                            )
                             allocation_inputs.append(alloc)
+                    
+                    gr.HTML("<h4 style='color: #2d3748; margin: 1.5rem 0 1rem 0;'>🎯 Lifestyle & Personal</h4>")
+                    with gr.Row():
+                        for category in lifestyle_categories:
+                            alloc = gr.Number(
+                                label=f"🏷️ {category}", 
+                                minimum=0, 
+                                step=100, 
+                                value=0,
+                                info=f"Monthly budget for {category.lower()}"
+                            )
+                            allocation_inputs.append(alloc)
+                    
+                    gr.HTML("<h4 style='color: #2d3748; margin: 1.5rem 0 1rem 0;'>💰 Financial & Others</h4>")
                     with gr.Row():
-                        for i, category in enumerate(EXPENSE_CATEGORIES[7:]):
-                            alloc = gr.Number(label=f"🏷️ {category}", minimum=0, step=100, value=0)
+                        for category in financial_categories:
+                            alloc = gr.Number(
+                                label=f"🏷️ {category}", 
+                                minimum=0, 
+                                step=100, 
+                                value=0,
+                                info=f"Monthly allocation for {category.lower()}"
+                            )
                             allocation_inputs.append(alloc)
                 
                 allocate_btn = gr.Button("💾 Save Budget Allocations", variant="primary", elem_classes="primary-btn", size="lg")
-                allocation_status = gr.Textbox(label="Status", interactive=False)
+                allocation_status = gr.Textbox(label="Status", interactive=False, elem_classes="status-display")
                 
-                gr.HTML("<h4>📊 Current Budget Allocations</h4>")
+                gr.HTML("<h4 style='color: #2d3748; margin: 2rem 0 1rem 0;'>📊 Current Budget Overview</h4>")
                 expense_table = gr.Dataframe(
-                    headers=["Category", "Allocated", "Spent", "Remaining", "Date"],
+                    headers=["Category", "Allocated (PKR)", "Spent (PKR)", "Remaining (PKR)", "Last Updated"],
                     interactive=False,
-                    wrap=True
+                    wrap=True,
+                    elem_classes="enhanced-table"
                 )
             
-            # Receipt Scan Tab
+            # Enhanced Receipt Scan Tab
             with gr.Tab("📷 Receipt Scan"):
                 gr.HTML("""
-                    <div style="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: white; padding: 2rem; border-radius: 15px; margin-bottom: 2rem; text-align: center;">
-                        <h2>🧾 AI-Powered Receipt Scanner</h2>
-                        <p style="font-size: 1.1rem; opacity: 0.9;">Upload receipt photos and let AI extract expense data automatically!</p>
+                    <div class="info-card gradient-bg-1" style="color: white; text-align: center; padding: 3rem; margin-bottom: 2rem;">
+                        <h2 style="font-size: 2rem; margin-bottom: 1rem;">🧾 AI-Powered Receipt Scanner</h2>
+                        <p style="font-size: 1.2rem; opacity: 0.95; font-weight: 300;">Transform your receipt photos into digital expense records with advanced OCR technology!</p>
+                        <div style="margin-top: 2rem; display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1.5rem;">
+                            <div style="background: rgba(255,255,255,0.1); padding: 1.5rem; border-radius: 10px;">
+                                <div style="font-size: 2rem; margin-bottom: 0.5rem;">📸</div>
+                                <h4>Upload Photo</h4>
+                                <p style="font-size: 0.9rem; opacity: 0.8;">Take or upload receipt image</p>
+                            </div>
+                            <div style="background: rgba(255,255,255,0.1); padding: 1.5rem; border-radius: 10px;">
+                                <div style="font-size: 2rem; margin-bottom: 0.5rem;">🤖</div>
+                                <h4>AI Processing</h4>
+                                <p style="font-size: 0.9rem; opacity: 0.8;">Extract data automatically</p>
+                            </div>
+                            <div style="background: rgba(255,255,255,0.1); padding: 1.5rem; border-radius: 10px;">
+                                <div style="font-size: 2rem; margin-bottom: 0.5rem;">✏️</div>
+                                <h4>Verify & Save</h4>
+                                <p style="font-size: 0.9rem; opacity: 0.8;">Review and confirm details</p>
+                            </div>
+                        </div>
                     </div>
                 """)
                 
                 with gr.Row():
                     with gr.Column(scale=1):
-                        gr.HTML("<h4>📤 Upload Receipt</h4>")
+                        gr.HTML("<h4 style='color: #2d3748; margin-bottom: 1rem;'>📤 Upload Receipt Image</h4>")
                         
                         receipt_image = gr.File(
                             label="📷 Receipt Image",
-                            file_types=["image/jpeg", "image/jpg", "image/png", "image/bmp", "image/tiff", "image/webp"]
+                            file_types=["image/jpeg", "image/jpg", "image/png", "image/bmp", "image/tiff", "image/webp"],
+                            elem_classes="file-upload"
                         )
                         
                         process_receipt_btn = gr.Button(
-                            "🔍 Process Receipt", 
+                            "🔍 Process Receipt with AI", 
                             variant="primary", 
                             elem_classes="primary-btn",
                             size="lg"
                         )
                         
-                        receipt_status = gr.Textbox(label="Processing Status", interactive=False)
+                        receipt_status = gr.Textbox(label="Processing Status", interactive=False, elem_classes="status-display")
                         
-                        # Image Preview
-                        gr.HTML("<h4>📸 Receipt Preview</h4>")
+                        # Enhanced Image Preview
+                        gr.HTML("<h4 style='color: #2d3748; margin: 1.5rem 0 1rem 0;'>📸 Receipt Preview</h4>")
                         receipt_preview = gr.Image(
                             label="Receipt Preview", 
-                            type="filepath"
+                            type="filepath",
+                            elem_classes="receipt-preview"
                         )
                     
                     with gr.Column(scale=1):
-                        gr.HTML("<h4>✏️ Verify & Edit Extracted Data</h4>")
+                        gr.HTML("<h4 style='color: #2d3748; margin-bottom: 1rem;'>✏️ Verify & Edit Extracted Data</h4>")
                         
                         extracted_merchant = gr.Textbox(
                             label="🏪 Merchant Name",
                             placeholder="Store/Restaurant name",
-                            info="Edit if incorrectly detected"
+                            info="AI-detected merchant name (edit if incorrect)"
                         )
                         
                         with gr.Row():
@@ -2591,129 +3198,324 @@ with gr.Blocks(title="FinGenius Pro", theme=gr.themes.Soft(), css=custom_css) as
                                 label="💰 Total Amount (PKR)",
                                 minimum=0,
                                 step=0.01,
-                                value=0
+                                value=0,
+                                info="Total amount from receipt"
                             )
                             extracted_date = gr.Textbox(
-                                label="�� Date",
-                                placeholder="YYYY-MM-DD or DD/MM/YYYY"
+                                label="📅 Purchase Date",
+                                placeholder="YYYY-MM-DD or DD/MM/YYYY",
+                                info="Date of purchase"
                             )
                         
                         extracted_category = gr.Dropdown(
                             choices=EXPENSE_CATEGORIES,
-                            label="🏷️ Category",
+                            label="🏷️ Expense Category",
                             value="Miscellaneous",
                             info="AI-suggested category (you can change it)"
                         )
                         
-                        gr.HTML("<h4>📝 Line Items (Optional)</h4>")
+                        gr.HTML("<h4 style='color: #2d3748; margin: 1.5rem 0 1rem 0;'>📝 Receipt Items (Optional)</h4>")
                         line_items_table = gr.Dataframe(
-                            headers=["Item", "Price"],
+                            headers=["Item Name", "Price (PKR)"],
                             datatype=["str", "number"],
                             row_count=5,
                             col_count=2,
                             interactive=True,
-                            label="Receipt Items"
+                            label="Individual items from receipt",
+                            elem_classes="line-items-table"
                         )
                         
                         save_receipt_btn = gr.Button(
-                            "💾 Save as Expense", 
+                            "💾 Save as Expense Record", 
                             variant="primary", 
                             elem_classes="primary-btn",
                             size="lg"
                         )
                 
-                # Receipt History
-                gr.HTML("<h4>🧾 Recent Receipts</h4>")
+                # Enhanced Receipt History
+                gr.HTML("<h4 style='color: #2d3748; margin: 2rem 0 1rem 0;'>🧾 Recent Receipt Processing History</h4>")
                 receipts_table = gr.Dataframe(
-                    headers=["Receipt ID", "Merchant", "Amount", "Date", "Category", "Confidence", "Status", "Processed"],
+                    headers=["Receipt ID", "Merchant", "Amount", "Date", "Category", "AI Confidence", "Status", "Processed On"],
                     interactive=False,
-                    wrap=True
+                    wrap=True,
+                    elem_classes="receipts-history-table"
                 )
             
-            # Expense Tracker Tab
+            # Enhanced Expense Tracker Tab
             with gr.Tab("💸 Expense Tracker"):
+                gr.HTML("""
+                    <div class="info-card gradient-bg-2" style="color: white; text-align: center; padding: 2.5rem; margin-bottom: 2rem;">
+                        <h3 style="font-size: 1.8rem; margin-bottom: 1rem;">💸 Smart Expense Tracking</h3>
+                        <p style="font-size: 1.1rem; opacity: 0.9;">Log your daily expenses with intelligent categorization and recurring expense management</p>
+                    </div>
+                """)
+                
                 with gr.Row():
-                    with gr.Column():
-                        gr.HTML("<h4>➕ Log New Expense</h4>")
-                        expense_category = gr.Dropdown(choices=EXPENSE_CATEGORIES, label="🏷️ Category")
-                        expense_amount = gr.Number(label="💰 Amount (PKR)", minimum=1, step=100, value=0)
-                        expense_description = gr.Textbox(label="📝 Description", placeholder="What did you buy?")
+                    with gr.Column(scale=1):
+                        gr.HTML("<h4 style='color: #2d3748; margin-bottom: 1rem;'>➕ Record New Expense</h4>")
+                        
+                        expense_category = gr.Dropdown(
+                            choices=EXPENSE_CATEGORIES, 
+                            label="🏷️ Expense Category",
+                            info="Select the most appropriate category"
+                        )
+                        
+                        with gr.Row():
+                            expense_amount = gr.Number(
+                                label="💰 Amount (PKR)", 
+                                minimum=1, 
+                                step=100, 
+                                value=0,
+                                info="How much did you spend?"
+                            )
+                            expense_description = gr.Textbox(
+                                label="📝 Description", 
+                                placeholder="What did you buy? Where?",
+                                info="Add details about this expense"
+                            )
                         
                         with gr.Accordion("🔄 Recurring Expense Settings", open=False):
-                            is_recurring = gr.Checkbox(label="This is a recurring expense")
-                            recurrence_pattern = gr.Dropdown(choices=RECURRENCE_PATTERNS, label="Frequency")
+                            is_recurring = gr.Checkbox(
+                                label="This is a recurring expense",
+                                info="Check if this expense repeats regularly"
+                            )
+                            recurrence_pattern = gr.Dropdown(
+                                choices=RECURRENCE_PATTERNS, 
+                                label="🔁 Frequency",
+                                info="How often does this expense occur?"
+                            )
                         
-                        record_expense_btn = gr.Button("💸 Record Expense", variant="primary", elem_classes="primary-btn", size="lg")
-                        expense_status = gr.Textbox(label="Status", interactive=False)
+                        record_expense_btn = gr.Button(
+                            "💸 Record Expense", 
+                            variant="primary", 
+                            elem_classes="primary-btn", 
+                            size="lg"
+                        )
+                        expense_status = gr.Textbox(label="Status", interactive=False, elem_classes="status-display")
                     
-                    with gr.Column():
-                        gr.HTML("<h4>📈 Spending Analytics</h4>")
-                        spending_chart = gr.Plot(label="📊 Spending Analysis")
-                        balance_chart = gr.Plot(label="💰 Balance Trend")
-                
-                with gr.Row():
-                    months_history = gr.Slider(1, 12, value=3, step=1, label="📅 Months History")
-                    update_charts_btn = gr.Button("🔄 Update Analytics", variant="secondary")
+                    with gr.Column(scale=1):
+                        gr.HTML("<h4 style='color: #2d3748; margin-bottom: 1rem;'>📈 Financial Analytics</h4>")
+                        
+                        with gr.Row():
+                            months_history = gr.Slider(
+                                1, 12, 
+                                value=3, 
+                                step=1, 
+                                label="📅 Analysis Period (Months)",
+                                info="Select how many months of data to analyze"
+                            )
+                            update_charts_btn = gr.Button(
+                                "🔄 Update Analytics", 
+                                variant="secondary",
+                                elem_classes="secondary-btn"
+                            )
+                        
+                        spending_chart = gr.Plot(
+                            label="📊 Spending Analysis by Category",
+                            elem_classes="analytics-chart"
+                        )
+                        balance_chart = gr.Plot(
+                            label="💰 Balance Trend Over Time",
+                            elem_classes="analytics-chart"
+                        )
             
-            # Spending History Tab
+            # Enhanced Spending History Tab
             with gr.Tab("📝 Spending History"):
-                gr.HTML("<h3>💳 Recent Transaction History</h3>")
+                gr.HTML("""
+                    <div class="info-card gradient-bg-3" style="color: white; text-align: center; padding: 2.5rem; margin-bottom: 2rem;">
+                        <h3 style="font-size: 1.8rem; margin-bottom: 1rem;">📝 Complete Transaction History</h3>
+                        <p style="font-size: 1.1rem; opacity: 0.9;">Review all your financial transactions with detailed information and balance tracking</p>
+                    </div>
+                """)
+                
                 spending_log_table = gr.Dataframe(
-                    headers=["Category", "Amount", "Description", "Date", "Balance After"],
+                    headers=["Category", "Amount (PKR)", "Description", "Date", "Balance After (PKR)"],
                     interactive=False,
-                    wrap=True
+                    wrap=True,
+                    elem_classes="spending-history-table"
                 )
+                
+                gr.HTML("""
+                    <div class="info-card">
+                        <h3>💡 Understanding Your Spending History</h3>
+                        <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 1rem; margin-top: 1rem;">
+                            <div style="background: #f7fafc; padding: 1rem; border-radius: 8px; border-left: 3px solid #4299e1;">
+                                <h4 style="color: #2d3748; font-size: 1rem; margin-bottom: 0.5rem;">🔍 Track Patterns</h4>
+                                <p style="color: #4a5568; font-size: 0.9rem;">Identify spending habits and trends over time</p>
+                            </div>
+                            <div style="background: #f7fafc; padding: 1rem; border-radius: 8px; border-left: 3px solid #48bb78;">
+                                <h4 style="color: #2d3748; font-size: 1rem; margin-bottom: 0.5rem;">💰 Balance Tracking</h4>
+                                <p style="color: #4a5568; font-size: 0.9rem;">See how each transaction affected your balance</p>
+                            </div>
+                            <div style="background: #f7fafc; padding: 1rem; border-radius: 8px; border-left: 3px solid #ed8936;">
+                                <h4 style="color: #2d3748; font-size: 1rem; margin-bottom: 0.5rem;">📊 Category Analysis</h4>
+                                <p style="color: #4a5568; font-size: 0.9rem;">Understand where your money goes each month</p>
+                            </div>
+                        </div>
+                    </div>
+                """)
             
-            # Investment Portfolio Tab
+            # Enhanced Investment Portfolio Tab
             with gr.Tab("📈 Investment Portfolio"):
+                gr.HTML("""
+                    <div class="info-card gradient-bg-4" style="color: white; text-align: center; padding: 2.5rem; margin-bottom: 2rem;">
+                        <h3 style="font-size: 1.8rem; margin-bottom: 1rem;">📈 Investment Portfolio Management</h3>
+                        <p style="font-size: 1.1rem; opacity: 0.9;">Track your investments and build long-term wealth with comprehensive portfolio monitoring</p>
+                    </div>
+                """)
+                
                 with gr.Row():
-                    with gr.Column():
-                        gr.HTML("<h4>➕ Add New Investment</h4>")
-                        investment_type = gr.Dropdown(choices=INVESTMENT_TYPES, label="🏢 Investment Type")
-                        investment_name = gr.Textbox(label="📝 Name/Description")
-                        investment_amount = gr.Number(label="💰 Amount (PKR)", minimum=1, step=1000, value=0)
-                        investment_notes = gr.Textbox(label="📋 Notes", lines=2, placeholder="Additional details...")
-                        add_investment_btn = gr.Button("📈 Add Investment", variant="primary", elem_classes="primary-btn")
-                        investment_status = gr.Textbox(label="Status", interactive=False)
+                    with gr.Column(scale=1):
+                        gr.HTML("<h4 style='color: #2d3748; margin-bottom: 1rem;'>➕ Add New Investment</h4>")
+                        
+                        investment_type = gr.Dropdown(
+                            choices=INVESTMENT_TYPES, 
+                            label="🏢 Investment Type",
+                            info="Select the type of investment"
+                        )
+                        
+                        investment_name = gr.Textbox(
+                            label="📝 Investment Name/Description",
+                            placeholder="e.g., Apple Stock, Bitcoin, Mutual Fund XYZ",
+                            info="Specific name or description of the investment"
+                        )
+                        
+                        with gr.Row():
+                            investment_amount = gr.Number(
+                                label="💰 Amount Invested (PKR)", 
+                                minimum=1, 
+                                step=1000, 
+                                value=0,
+                                info="How much are you investing?"
+                            )
+                        
+                        investment_notes = gr.Textbox(
+                            label="📋 Additional Notes", 
+                            lines=3, 
+                            placeholder="Investment strategy, expected returns, risk level, etc.",
+                            info="Optional: Add any additional information"
+                        )
+                        
+                        add_investment_btn = gr.Button(
+                            "📈 Add to Portfolio", 
+                            variant="primary", 
+                            elem_classes="primary-btn",
+                            size="lg"
+                        )
+                        investment_status = gr.Textbox(label="Status", interactive=False, elem_classes="status-display")
                     
-                    with gr.Column():
-                        gr.HTML("<h4>💼 Your Investment Portfolio</h4>")
+                    with gr.Column(scale=1):
+                        gr.HTML("<h4 style='color: #2d3748; margin-bottom: 1rem;'>💼 Your Investment Portfolio</h4>")
+                        
                         investments_table = gr.Dataframe(
-                            headers=["Type", "Name", "Amount", "Date", "Notes"],
+                            headers=["Type", "Name", "Amount (PKR)", "Date Added", "Notes"],
                             interactive=False,
-                            wrap=True
+                            wrap=True,
+                            elem_classes="investments-table"
                         )
-            
-            # Family Finance Tab
+                        
+                        gr.HTML("""
+                            <div class="info-card">
+                                <h3>💡 Investment Tips</h3>
+                                <ul style="text-align: left; margin-left: 1rem; line-height: 1.8; color: #4a5568;">
+                                    <li><strong>🎯 Diversify:</strong> Spread investments across different asset classes</li>
+                                    <li><strong>📅 Long-term Focus:</strong> Think in years, not months</li>
+                                    <li><strong>🔄 Regular Review:</strong> Monitor performance quarterly</li>
+                                    <li><strong>💡 Research First:</strong> Understand before you invest</li>
+                                    <li><strong>⚖️ Risk Management:</strong> Never invest more than you can afford to lose</li>
+                                </ul>
+                            </div>
+                        """)
+            
+            # Enhanced Family Finance Tab
             with gr.Tab("👪 Family Finance"):
-                gr.HTML("<h3>👨‍👩‍👧‍👦 Family Financial Management</h3>")
-                family_info = gr.Textbox(label="👥 Current Family Group", interactive=False)
+                gr.HTML("""
+                    <div class="info-card gradient-bg-1" style="color: white; text-align: center; padding: 2.5rem; margin-bottom: 2rem;">
+                        <h3 style="font-size: 1.8rem; margin-bottom: 1rem;">👨‍👩‍👧‍👦 Collaborative Family Finance</h3>
+                        <p style="font-size: 1.1rem; opacity: 0.9;">Create family groups to manage household budgets, shared expenses, and financial goals together</p>
+                    </div>
+                """)
+                
+                family_info = gr.Textbox(
+                    label="👥 Current Family Group Status", 
+                    interactive=False,
+                    elem_classes="family-status"
+                )
                 
                 with gr.Row():
-                    with gr.Column():
-                        gr.HTML("<h4>➕ Create New Family Group</h4>")
-                        create_group_name = gr.Textbox(label="👪 Group Name", placeholder="Smith Family Budget")
-                        create_group_btn = gr.Button("Create Family Group", variant="primary", elem_classes="primary-btn")
+                    with gr.Column(scale=1):
+                        gr.HTML("<h4 style='color: #2d3748; margin-bottom: 1rem;'>➕ Create New Family Group</h4>")
+                        
+                        create_group_name = gr.Textbox(
+                            label="👪 Family Group Name", 
+                            placeholder="e.g., Smith Family Budget, Our Household",
+                            info="Choose a name that represents your family"
+                        )
+                        
+                        create_group_btn = gr.Button(
+                            "Create Family Group", 
+                            variant="primary", 
+                            elem_classes="primary-btn",
+                            size="lg"
+                        )
                     
-                    with gr.Column():
-                        gr.HTML("<h4>🔗 Join Existing Group</h4>")
-                        join_group_id = gr.Textbox(label="🆔 Group ID", placeholder="FG-XXXX-XXXXXXXX")
-                        join_group_btn = gr.Button("Join Family Group", variant="secondary", elem_classes="secondary-btn")
+                    with gr.Column(scale=1):
+                        gr.HTML("<h4 style='color: #2d3748; margin-bottom: 1rem;'>🔗 Join Existing Family Group</h4>")
+                        
+                        join_group_id = gr.Textbox(
+                            label="🆔 Family Group ID", 
+                            placeholder="FG-XXXX-XXXXXXXX",
+                            info="Enter the group ID shared by your family admin"
+                        )
+                        
+                        join_group_btn = gr.Button(
+                            "Join Family Group", 
+                            variant="secondary", 
+                            elem_classes="secondary-btn",
+                            size="lg"
+                        )
                 
-                family_status = gr.Textbox(label="Status", interactive=False)
+                family_status = gr.Textbox(label="Status", interactive=False, elem_classes="status-display")
                 
-                gr.HTML("<h4>👥 Family Members</h4>")
+                gr.HTML("<h4 style='color: #2d3748; margin: 2rem 0 1rem 0;'>👥 Family Group Members</h4>")
                 family_members = gr.Dataframe(
-                    headers=["Phone", "Name"],
+                    headers=["Phone Number", "Member Name"],
                     interactive=False,
-                    wrap=True
+                    wrap=True,
+                    elem_classes="family-members-table"
                 )
+                
+                gr.HTML("""
+                    <div class="info-card">
+                        <h3>🏠 Family Finance Benefits</h3>
+                        <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1.5rem; margin-top: 1rem;">
+                            <div style="background: #e6fffa; padding: 1.5rem; border-radius: 10px; border-left: 4px solid #38b2ac;">
+                                <h4 style="color: #2d3748; margin-bottom: 0.5rem;">🤝 Shared Responsibility</h4>
+                                <p style="color: #4a5568; font-size: 0.9rem;">All family members can contribute to expense tracking and budget management</p>
+                            </div>
+                            <div style="background: #fef5e7; padding: 1.5rem; border-radius: 10px; border-left: 4px solid #ed8936;">
+                                <h4 style="color: #2d3748; margin-bottom: 0.5rem;">👁️ Transparency</h4>
+                                <p style="color: #4a5568; font-size: 0.9rem;">Everyone can see family spending patterns and financial goals</p>
+                            </div>
+                            <div style="background: #e6ffed; padding: 1.5rem; border-radius: 10px; border-left: 4px solid #48bb78;">
+                                <h4 style="color: #2d3748; margin-bottom: 0.5rem;">🎯 Collective Goals</h4>
+                                <p style="color: #4a5568; font-size: 0.9rem;">Work together towards shared financial objectives and savings targets</p>
+                            </div>
+                        </div>
+                    </div>
+                """)
         
+        # Enhanced Sign Out Section
         with gr.Row():
-            with gr.Column(scale=3):
-                pass
+            with gr.Column(scale=4):
+                gr.HTML("")  # Spacer
             with gr.Column(scale=1):
-                sign_out_btn = gr.Button("🚪 Sign Out", variant="stop", elem_classes="secondary-btn", size="lg")
+                sign_out_btn = gr.Button(
+                    "🚪 Sign Out", 
+                    variant="stop", 
+                    elem_classes="secondary-btn", 
+                    size="lg"
+                )
 
     # ===== EVENT HANDLERS =====
     
@@ -2841,17 +3643,30 @@ if __name__ == "__main__":
     logger.info("   4. Use the same phone number for both WhatsApp activation and app registration")
     logger.info("   5. Phone number format: +92XXXXXXXXXX (Pakistan format)")
     logger.info("")
-    logger.info("✅ All critical errors have been fixed:")
-    logger.info("   ✅ Fixed regex pattern syntax error")
-    logger.info("   ✅ Implemented proper Gradio state management")
-    logger.info("   ✅ Enhanced database transaction handling")
-    logger.info("   ✅ Added comprehensive error handling")
-    logger.info("   ✅ Improved security measures")
-    logger.info("   ✅ Enhanced image processing with memory management")
-    logger.info("   ✅ Added proper logging system")
-    logger.info("   ✅ Fixed file validation and security")
-    logger.info("   ✅ Improved OCR processing")
-    logger.info("   ✅ Enhanced UI with better CSS")
+    logger.info("✅ All enhancements implemented:")
+    logger.info("   ✅ Fixed button sizing issues - all buttons now have equal dimensions")
+    logger.info("   ✅ Fixed landing page size consistency - maintains proper dimensions")
+    logger.info("   ✅ Enhanced dashboard UI/UX with modern design patterns")
+    logger.info("   ✅ Improved responsive design for all screen sizes")
+    logger.info("   ✅ Enhanced visual hierarchy and information architecture")
+    logger.info("   ✅ Added comprehensive CSS variables and theming system")
+    logger.info("   ✅ Implemented advanced animations and micro-interactions")
+    logger.info("   ✅ Enhanced accessibility and usability features")
+    logger.info("   ✅ Improved form layouts and data presentation")
+    logger.info("   ✅ Added contextual help and guidance elements")
+    logger.info("   ✅ Enhanced error handling and user feedback")
+    logger.info("")
+    logger.info("🎨 UI/UX Improvements:")
+    logger.info("   • Consistent button sizing across all pages")
+    logger.info("   • Fixed landing page dimension preservation")
+    logger.info("   • Enhanced color scheme with CSS variables")
+    logger.info("   • Improved spacing and typography")
+    logger.info("   • Better visual feedback for user actions")
+    logger.info("   • Enhanced mobile responsiveness")
+    logger.info("   • Modern card-based layout system")
+    logger.info("   • Professional gradient backgrounds")
+    logger.info("   • Improved table and data visualization")
+    logger.info("   • Enhanced form usability and validation")
     logger.info("")
     
     try:
@@ -2861,7 +3676,10 @@ if __name__ == "__main__":
             share=False,
             show_error=True,
             favicon_path=None,
-            ssl_verify=False
+            ssl_verify=False,
+            show_tips=True,
+            enable_queue=True,
+            max_threads=10
         )
     except Exception as e:
         logger.error(f"❌ Failed to launch application: {e}")