Update app.py

app.py

@@ -3,19 +3,159 @@ import joblib
 import numpy as np
 from huggingface_hub import hf_hub_download
 
-# Page setup
+# Page configuration
 st.set_page_config(
     page_title="Loan Approval System",
     page_icon="🏦",
-    layout="wide",
+    layout="centered",
     initial_sidebar_state="collapsed"
 )
 
-# Custom styling (retain your existing full CSS here — unchanged)
-# You can paste your full <style> block here as-is
-st.markdown("""<style>...your existing CSS...</style>""", unsafe_allow_html=True)
+# Custom CSS for styling with the specified color theme
+st.markdown("""
+<style>
+    /* Color Theme */
+    :root {
+        --primary-purple: #7950F2;
+        --primary-purple-light: #9775F3;
+        --primary-purple-dark: #5F3DC4;
+        --complementary-orange: #FF5E3A;
+        --complementary-orange-light: #FF8A6C;
+        --light-gray: #F8F9FA;
+        --dark-gray: #343A40;
+    }
+    
+    /* Main containers */
+    .main .block-container {
+        padding: 2rem;
+        border-radius: 10px;
+        background-color: white;
+        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
+    }
+    
+    /* Font family - applied globally */
+    * {
+        font-family: 'Helvetica', 'Arial', sans-serif !important;
+    }
+    
+    /* Specific selectors to ensure Helvetica is applied everywhere */
+    body, .stMarkdown, p, h1, h2, h3, h4, h5, h6, .stButton, .stSelectbox, .stNumberInput,
+    .stTextInput, div, span, .streamlit-container, .stAlert, .stText, button, input, select,
+    textarea, .streamlit-expanderHeader, .streamlit-expanderContent {
+        font-family: 'Helvetica', 'Arial', sans-serif !important;
+    }
+    
+    /* Headers */
+    h1, h2, h3 {
+        color: var(--primary-purple-dark);
+    }
+    
+    /* Custom cards for sections */
+    .section-card {
+        background-color: var(--light-gray);
+        border-radius: 8px;
+        padding: 1.5rem;
+        margin-bottom: 1.5rem;
+        border-left: 4px solid var(--primary-purple);
+    }
+    
+    /* Remove purple left border from the first section card */
+    .remove-border {
+        border-left: none !important;
+    }
+    
+    /* Button styling */
+    .stButton > button {
+        background-color: var(--primary-purple);
+        color: white;
+        border: none;
+        border-radius: 5px;
+        padding: 0.5rem 1rem;
+        font-weight: bold;
+        width: 100%;
+        transition: all 0.3s;
+    }
+    .stButton > button:hover {
+        background-color: var(--primary-purple-dark);
+        transform: translateY(-2px);
+        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+    }
+    
+    /* Result styling */
+    .result-approved {
+        background-color: #E8F5E9;
+        border-left: 4px solid #4CAF50;
+        padding: 1rem;
+        border-radius: 5px;
+        margin-top: 1rem;
+    }
+    .result-rejected {
+        background-color: #FFEBEE;
+        border-left: 4px solid #F44336;
+        padding: 1rem;
+        border-radius: 5px;
+        margin-top: 1rem;
+    }
+    
+    /* Input widgets */
+    .stNumberInput, .stSelectbox {
+        margin-bottom: 1rem;
+    }
+    
+    /* Footer */
+    .footer {
+        text-align: center;
+        margin-top: 2rem;
+        padding-top: 1rem;
+        border-top: 1px solid #EEEEEE;
+        font-size: 0.8rem;
+        color: #666666;
+    }
+    
+    /* Divider */
+    .divider {
+        border-top: 1px solid #EEEEEE;
+        margin: 1.5rem 0;
+    }
+    
+    /* Badge */
+    .badge {
+        display: inline-block;
+        background-color: var(--complementary-orange);
+        color: white;
+        padding: 0.25rem 0.5rem;
+        border-radius: 4px;
+        font-size: 0.8rem;
+        margin-left: 0.5rem;
+    }
+    
+    /* Banner image styling */
+    .banner-image {
+        width: 100%;
+        margin-bottom: 1.5rem;
+        border-radius: 10px;
+        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
+    }
+    
+    /* Footer disclaimer */
+    .footer-disclaimer {
+        text-align: center;
+        margin-top: 2rem;
+        padding: 1rem;
+        border-top: 1px solid #EEEEEE;
+        font-size: 0.9rem;
+        color: #666666;
+        line-height: 1.5;
+        background-color: var(--light-gray);
+        border-radius: 5px;
+    }
+</style>
+""", unsafe_allow_html=True)
+
+# App header with banner image instead of title
+st.markdown('<img src="https://i.postimg.cc/R0gGW9kb/ACTION-PLAN.png" class="banner-image" alt="SmartLoanAI Banner">', unsafe_allow_html=True)
 
-# Load model once using caching
+# Load the trained model from Hugging Face
 @st.cache_resource
 def load_model():
     model_path = hf_hub_download(repo_id="ifiecas/LoanApproval-DT-v1.0", filename="best_pruned_dt.pkl")
@@ -23,279 +163,378 @@ def load_model():
 
 model = load_model()
 
+# Initialize session state for restart functionality
+if 'restart_clicked' not in st.session_state:
+    st.session_state.restart_clicked = False
 
-# Application banner
-st.markdown('<img src="https://i.postimg.cc/R0gGW9kb/ACTION-PLAN.png" class="banner-image" alt="SmartLoanAI Banner">', unsafe_allow_html=True)
-
-# Global disclaimer
-st.markdown("""<div class="footer-disclaimer" style="margin-bottom: 20px; background-color: #fff3cd; border-left: 4px solid #ffc107;">
-    <p><strong>Educational Project Disclaimer:</strong> This tool is a demonstration of machine learning model deployment and is not a real financial service. Loan decisions shown here are based on a sample dataset and trained model, intended for educational use only.</p>
-</div>""", unsafe_allow_html=True)
-
-
-# Use Streamlit Tabs
-tab_application, tab_about = st.tabs(["📝 Loan Application", "ℹ️ About the System"])
+# Create tabs for better organization
+tab1, tab2 = st.tabs(["Loan Application", "About the System"])
 
-with tab_application:
-    # Header
-    st.markdown("""
-    <h2 style="text-align: center; color: var(--primary-purple-dark); margin-bottom: 20px;">
-        Smart Loan Application System
-    </h2>
-    <p style="text-align: center; margin-bottom: 30px; font-size: 1.1rem;">
-        Fill out the form below to check your loan eligibility. Our system will evaluate your information instantly.
-    </p>
-    """, unsafe_allow_html=True)
-
-    # Input Sections
-    st.markdown('<div class="section-card"><h3>👤 Personal Information</h3>', unsafe_allow_html=True)
-    col1, col2, col3 = st.columns(3)
+with tab1:
+    # Reset all form values if restart was clicked
+    if st.session_state.restart_clicked:
+        st.session_state.restart_clicked = False  # Reset flag
+    
+    # Personal Information Section
+    st.markdown('<div class="section-card"><h3>Personal Information</h3>', unsafe_allow_html=True)
+    
+    col1, col2 = st.columns(2)
     with col1:
         gender = st.selectbox("Gender", ["Male", "Female"])
-        number_of_dependents = st.number_input("Number of Dependents", min_value=0, max_value=10, value=0)
-
+        education = st.selectbox("Education Level", ["Graduate", "Under Graduate"])
+    
     with col2:
         marital_status = st.selectbox("Marital Status", ["Married", "Not Married"])
-        self_employed = st.selectbox("Self-Employed", ["No", "Yes"])
-
-    with col3:
-        education = st.selectbox("Education Level", ["Graduate", "Under Graduate"])
+        number_of_dependents = st.number_input("Number of Dependents", min_value=0, max_value=10, value=0)
+    
+    self_employed = st.selectbox("Self-Employed", ["No", "Yes"])
     st.markdown('</div>', unsafe_allow_html=True)
-
-    st.markdown('<div class="section-card"><h3>💰 Financial Details</h3>', unsafe_allow_html=True)
-    col1, col2, col3 = st.columns(3)
+    
+    # Financial Details Section
+    st.markdown('<div class="section-card"><h3>Financial Details</h3>', unsafe_allow_html=True)
+    
+    col1, col2 = st.columns(2)
     with col1:
         applicant_income = st.number_input("Monthly Income ($)", min_value=0, value=5000)
+        loan_amount = st.number_input("Loan Amount ($)", min_value=0, value=100000)
         credit_history = st.selectbox("Credit History Status", [1, 0], 
-            format_func=lambda x: "Good Credit History (1)" if x == 1 else "Poor Credit History (0)")
-
+                                     format_func=lambda x: "No existing unsettled loans (1)" if x == 1 else "Have unsettled loans (0)")
+    
     with col2:
         coapplicant_income = st.number_input("Co-Applicant's Income ($)", min_value=0)
-        location = st.selectbox("Property Location", ["Urban", "Semiurban", "Rural"])
-
-    with col3:
-        loan_amount = st.number_input("Loan Amount ($)", min_value=0, value=100000)
         loan_term = st.slider("Loan Term (months)", min_value=12, max_value=360, value=180, step=12)
+        location = st.selectbox("Property Location", ["Urban", "Semiurban", "Rural"])
+    
     st.markdown('</div>', unsafe_allow_html=True)
-
-    # Summary Section
+    
+    # Summary section - without DTI Assessment or Eligibility Check
+    st.markdown('<div class="section-card"><h3>Application Summary</h3>', unsafe_allow_html=True)
+    
     total_income = applicant_income + coapplicant_income
-    interest_rate = 0.05
+    
+    # Calculate monthly payment (simplified calculation)
+    interest_rate = 0.05  # Assuming 5% annual interest rate
     monthly_interest = interest_rate / 12
     num_payments = loan_term
-
+    
+    # Monthly payment using the loan amortization formula
     if monthly_interest == 0 or num_payments == 0:
         monthly_payment = 0
     else:
         monthly_payment = loan_amount * (monthly_interest * (1 + monthly_interest) ** num_payments) / \
-                          ((1 + monthly_interest) ** num_payments - 1)
-
-    debt_to_income_ratio = (monthly_payment / total_income) if total_income > 0 else 0
-    debt_to_income_percent = debt_to_income_ratio * 100
-
-    # Metrics
-    st.markdown('<div class="section-card"><h3>📊 Application Summary</h3>', unsafe_allow_html=True)
-    col1, col2, col3, col4 = st.columns(4)
-    col1.metric("Total Monthly Income", f"${total_income:,.2f}")
-    col2.metric("Estimated Monthly Payment", f"${monthly_payment:,.2f}")
-    col3.metric("Loan Term", f"{loan_term // 12} years")
-    col4.metric("Debt-to-Income Ratio", f"{debt_to_income_percent:.1f}%", 
-                delta=f"{debt_to_income_percent - 36:.1f}%" if debt_to_income_percent > 36 else "-", 
-                delta_color="normal" if debt_to_income_percent < 36 else "inverse")
-
-    st.caption("Note: Estimated payment assumes a 5.0% annual interest rate. A healthy debt-to-income ratio is usually under 36%.")
+                        ((1 + monthly_interest) ** num_payments - 1)
+    
+    # Calculate DTI for backend use only (not displayed)
+    dti = (monthly_payment / total_income) if total_income > 0 else 0
+    dti_percent = dti * 100
+    
+    # Display summary metrics
+    col1, col2, col3 = st.columns(3)
+    col1.metric("Total Monthly Income", f"${total_income:,}")
+    col2.metric("Estimated Monthly Payment", f"${monthly_payment:.2f}")
+    col3.metric("Loan Term", f"{loan_term//12} years")
+    
+    # Add interest rate disclaimer
+    st.markdown(f"""
+    <div style="font-size: 0.8rem; color: #666; margin-top: -10px; margin-bottom: 20px;">
+        * Estimated payment based on {interest_rate*100:.1f}% annual interest rate. Actual rates may vary.
+    </div>
+    """, unsafe_allow_html=True)
+    
     st.markdown('</div>', unsafe_allow_html=True)
-
-
-    # Action Buttons
-    col_main, col_reset = st.columns([3, 1])
-    with col_main:
-        check_button = st.button("🔍 Check Loan Approval Status", use_container_width=True)
-    with col_reset:
-        reset_button = st.button("🔄 Reset Form", use_container_width=True, help="Clear the form and start over")
-
-    if reset_button:
+    
+    # Prediction and restart buttons
+    col1, col2 = st.columns([3, 1])
+    
+    with col1:
+        predict_button = st.button("Check Loan Approval Status", use_container_width=True)
+    
+    with col2:
+        restart_button = st.button("🔄 Restart", use_container_width=True, 
+                                 help="Reset all form fields and start over")
+    
+    # Handle restart button click
+    if restart_button:
         st.session_state.restart_clicked = True
-        st.rerun()
-
-    # Function to preprocess inputs
-    def prepare_input():
+        st.rerun()  # Using st.rerun() instead of st.experimental_rerun()
+    
+    def preprocess_input():
+        # Convert categorical inputs to numerical format based on encoding reference
         gender_num = 0 if gender == "Male" else 1
-        marital_status_num = 1 if marital_status == "Married" else 0
-        education_num = 1 if education == "Graduate" else 0
-        self_employed_num = 1 if self_employed == "Yes" else 0
-        credit_history_num = credit_history
+        marital_status_num = 0 if marital_status == "Not Married" else 1
+        education_num = 0 if education == "Under Graduate" else 1
+        self_employed_num = 0 if self_employed == "No" else 1
+        credit_history_num = credit_history  # Already numerical (0,1)
+        
+        # One-Hot Encoding for Location
         location_semiurban = 1 if location == "Semiurban" else 0
         location_urban = 1 if location == "Urban" else 0
+        
+        # Convert Term from months to years
         term_years = loan_term / 12
-        credit_interaction = loan_amount * credit_history_num
-        income_term_ratio = total_income / term_years if term_years > 0 else 0
-
+        
+        # Compute Derived Features - use the same monthly payment calculated above
+        debt_to_income = monthly_payment / total_income if total_income > 0 else 0  
+        credit_amount_interaction = loan_amount * credit_history_num  # Interaction effect
+        income_term_ratio = total_income / term_years if term_years > 0 else 0  # Avoid divide by zero
+        
+        # Return array with all 16 features
         return np.array([[
             gender_num, marital_status_num, number_of_dependents, education_num, self_employed_num,
             applicant_income, coapplicant_income, loan_amount, credit_history_num,
-            total_income, debt_to_income_ratio, location_semiurban, location_urban, term_years,
-            credit_interaction, income_term_ratio
+            total_income, debt_to_income, location_semiurban, location_urban, term_years,
+            credit_amount_interaction, income_term_ratio
         ]])
-
-    # Make prediction and display results
-    if check_button:
-        st.toast("✅ Prediction complete! Scroll down to view your result.")
-        with st.spinner("Analyzing your application..."):
-            features = prepare_input()
-            model_result = model.predict(features)[0]
-
-            # Manual override rules
-            manually_rejected = False
-            reason = ""
+    
+    # Display prediction
+    if predict_button:
+        with st.spinner("Processing your application..."):
+            input_data = preprocess_input()
+            prediction = model.predict(input_data)
+            
+            # Apply additional rules to override the model in certain cases (backend only)
+            manual_rejection = False
+            
+            # Rule-based rejections that override the model (but don't show to user)
             if total_income < 1500:
-                manually_rejected = True
-                reason = "Total income is below the required minimum of $1,500."
-            elif debt_to_income_percent > 50:
-                manually_rejected = True
-                reason = "Debt-to-income ratio is too high (above 50%)."
-            elif credit_history == 0 and debt_to_income_percent > 35:
-                manually_rejected = True
-                reason = "Poor credit history and high debt-to-income ratio."
-
-            approved = (model_result == 1) and not manually_rejected
-
-            # Display outcome
-            if approved:
+                manual_rejection = True
+            elif dti_percent > 50:
+                manual_rejection = True
+            elif credit_history == 0 and dti_percent > 35:
+                manual_rejection = True
+            
+            # Final decision combines model prediction and manual eligibility checks
+            final_approval = (prediction[0] == 1) and not manual_rejection
+            
+            # Show result with enhanced styling
+            if final_approval:
                 st.markdown("""
                 <div class="result-approved">
                     <h3 style="color: #2E7D32;">✅ Loan Approved</h3>
-                    <p>Congratulations! Based on your information, you meet the eligibility criteria.</p>
-                    <ol>
-                        <li>Verification of documents</li>
-                        <li>Loan term negotiation</li>
-                        <li>Disbursement of funds</li>
-                    </ol>
-                    <p><em>This result is part of an educational simulation, not a real financial offer.</em></p>
+                    <p>Congratulations! Based on your information, you're eligible for this loan.</p>
                 </div>
                 """, unsafe_allow_html=True)
             else:
-                st.markdown(f"""
+                st.markdown("""
                 <div class="result-rejected">
                     <h3 style="color: #C62828;">❌ Loan Not Approved</h3>
-                    <p>Unfortunately, we cannot approve your application at this time.</p>
-                    <p><strong>Reason:</strong> {reason if reason else "Application does not meet current criteria."}</p>
-                    <p><strong>Suggestions:</strong></p>
-                    <ul>
-                        <li>Improve your credit history</li>
-                        <li>Lower your requested loan amount</li>
-                        <li>Add a co-applicant with income</li>
-                        <li>Reduce existing debt</li>
-                    </ul>
+                    <p>Unfortunately, based on your current information, we cannot approve your loan application.</p>
+                    <p>Consider improving your credit score, reducing existing debt, or applying with a co-applicant with higher income.</p>
                 </div>
                 """, unsafe_allow_html=True)
 
-
-with tab_about:
-    # Custom styling (already applied globally)
+with tab2:
+    # Add custom CSS for better styling
+    st.markdown("""
+    <style>
+        /* Main container styling */
+        .about-container {
+            background-color: #f8f9fa;
+            border-radius: 10px;
+            padding: 20px;
+            margin-bottom: 20px;
+        }
+        
+        /* Section styling */
+        .about-section {
+            margin-bottom: 25px;
+        }
+        
+        /* Section headers */
+        .section-header {
+            color: #1e3a8a;
+            font-size: 20px;
+            font-weight: 600;
+            margin-bottom: 10px;
+            border-bottom: 2px solid #e5e7eb;
+            padding-bottom: 5px;
+        }
+        
+        /* Regular text */
+        .about-text {
+            font-size: 16px;
+            line-height: 1.6;
+            color: #374151;
+        }
+        
+        /* Metrics card container */
+        .metrics-container {
+            display: flex;
+            flex-wrap: wrap;
+            gap: 15px;
+            margin: 15px 0;
+        }
+        
+        /* Individual metric card */
+        .metric-card {
+            background-color: white;
+            border-radius: 8px;
+            padding: 15px;
+            min-width: 120px;
+            box-shadow: 0 2px 4px rgba(0,0,0,0.05);
+            flex: 1;
+            text-align: center;
+        }
+        
+        /* Metric value */
+        .metric-value {
+            font-size: 22px;
+            font-weight: 600;
+            color: #2563eb;
+        }
+        
+        /* Metric label */
+        .metric-label {
+            font-size: 14px;
+            color: #6b7280;
+            margin-top: 5px;
+        }
+        
+        /* Footer styling */
+        .footer-disclaimer {
+            background-color: #f3f4f6;
+            border-radius: 8px;
+            padding: 15px;
+            margin-top: 30px;
+            border-left: 4px solid #9ca3af;
+            font-size: 14px;
+            color: #4b5563;
+        }
+        
+        /* Author bio section */
+        .author-bio {
+            display: flex;
+            align-items: center;
+            gap: 15px;
+            background-color: white;
+            border-radius: 8px;
+            padding: 15px;
+            margin: 20px 0;
+            box-shadow: 0 2px 4px rgba(0,0,0,0.05);
+        }
+        
+        /* Author image placeholder */
+        .author-image {
+            width: 60px;
+            height: 60px;
+            border-radius: 50%;
+            background-color: #e5e7eb;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            color: #9ca3af;
+            font-size: 20px;
+            font-weight: bold;
+        }
+    </style>
+    """, unsafe_allow_html=True)
     
-    # Container start
+    # Main content container
     st.markdown('<div class="about-container">', unsafe_allow_html=True)
-
-    # System Overview
+    
+    # System overview section
     st.markdown('<div class="about-section">', unsafe_allow_html=True)
     st.markdown('<h2 class="section-header">About the Loan Approval System</h2>', unsafe_allow_html=True)
-    st.markdown("""
-        <p class="about-text">
-        This prototype demonstrates a machine learning model deployed as an interactive loan approval simulation. 
-        It evaluates user inputs — such as income, credit history, and loan amount — to assess eligibility.
-        </p>
-    """, unsafe_allow_html=True)
+    st.markdown(
+        '<p class="about-text">Our AI-powered system evaluates loan applications using machine learning and '
+        'industry-standard criteria. It analyzes your financial information, credit history, and loan requirements '
+        'to provide fast, objective loan decisions.</p>', unsafe_allow_html=True
+    )
     st.markdown('</div>', unsafe_allow_html=True)
-
-    # Model Info
+    
+    # Model information section
     st.markdown('<div class="about-section">', unsafe_allow_html=True)
-    st.markdown('<h2 class="section-header">Machine Learning Model Details</h2>', unsafe_allow_html=True)
-    st.markdown("""
-        <p class="about-text">
-        The system uses a Decision Tree classifier. After evaluating multiple models (Logistic Regression, 
-        Random Forest, Support Vector Machine), the Decision Tree performed best with the selected features. 
-        Cost Complexity Pruning was used to fine-tune and avoid overfitting.
-        </p>
-    """, unsafe_allow_html=True)
+    st.markdown('<h2 class="section-header">About the ML Model</h2>', unsafe_allow_html=True)
+    st.markdown(
+        '<p class="about-text">The machine learning model powering this system is a Decision Tree classifier, '
+        'which outperformed several alternatives including KNN, Random Forest, Logistic Regression, and Support '
+        'Vector Machine in our testing phase. The model was refined using Cost Complexity Pruning (CCP) to identify '
+        'the optimal alpha value, preventing overfitting while maintaining high predictive accuracy.</p>', 
+        unsafe_allow_html=True
+    )
     st.markdown('</div>', unsafe_allow_html=True)
-
-    # Performance Metrics
+    
+    # Performance metrics section with cards
     st.markdown('<div class="about-section">', unsafe_allow_html=True)
-    st.markdown('<h2 class="section-header">Model Performance</h2>', unsafe_allow_html=True)
-    st.markdown("""
-        <div class="metrics-container">
-            <div class="metric-card">
-                <div class="metric-value">83.61%</div>
-                <div class="metric-label">Accuracy</div>
-            </div>
-            <div class="metric-card">
-                <div class="metric-value">80.77%</div>
-                <div class="metric-label">Precision</div>
-            </div>
-            <div class="metric-card">
-                <div class="metric-value">100.00%</div>
-                <div class="metric-label">Recall</div>
-            </div>
-            <div class="metric-card">
-                <div class="metric-value">89.36%</div>
-                <div class="metric-label">F1 Score</div>
-            </div>
-        </div>
-    """, unsafe_allow_html=True)
-
-    # Resource Link
-    st.markdown("""
-        <p class="about-text">
-        View the full modeling process, including feature engineering and model comparisons, at 
-        <a href="https://github.com/ifiecas/bankloan2" target="_blank" style="color: #2563eb;">this GitHub repository</a>.
-        </p>
-    """, unsafe_allow_html=True)
-
-    # Video Embed
-    st.markdown('<h2 class="section-header">Video Overview</h2>', unsafe_allow_html=True)
+    st.markdown('<h2 class="section-header">Model Performance Metrics</h2>', unsafe_allow_html=True)
+    
+    # Metrics cards using HTML for better styling
+    st.markdown(
+        '<div class="metrics-container">'
+        '  <div class="metric-card">'
+        '    <div class="metric-value">83.61%</div>'
+        '    <div class="metric-label">Accuracy</div>'
+        '  </div>'
+        '  <div class="metric-card">'
+        '    <div class="metric-value">80.77%</div>'
+        '    <div class="metric-label">Precision</div>'
+        '  </div>'
+        '  <div class="metric-card">'
+        '    <div class="metric-value">100.00%</div>'
+        '    <div class="metric-label">Recall</div>'
+        '  </div>'
+        '  <div class="metric-card">'
+        '    <div class="metric-value">89.36%</div>'
+        '    <div class="metric-label">F1 Score</div>'
+        '  </div>'
+        '</div>',
+        unsafe_allow_html=True
+    )
+    
+    # Link to documentation/more info
+    st.markdown(
+        '<p class="about-text">For more information about the modeling process (from loading the dataset to fine-tuning '
+        'the model), check here: <a href="https://github.com/ifiecas/bankloan2" target="_blank" style="color: #2563eb;">Github</a></p>',
+        unsafe_allow_html=True
+    )
+    
+    # YouTube video section
+    st.markdown('<h2 class="section-header">Brief Explanation</h2>', unsafe_allow_html=True)
+    st.markdown('<p class="about-text">Watch this video for a brief explanation of the assessment:</p>', unsafe_allow_html=True)
+    
+    # YouTube embed with responsive container
     st.markdown("""
-        <div style="position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden;">
-            <iframe 
-                style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;" 
-                src="https://www.youtube.com/embed/y88GidhkAE8?si=iesfB084u4qrtPB_" 
-                title="Assessment Explanation" 
-                frameborder="0" 
-                allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" 
-                allowfullscreen>
-            </iframe>
-        </div>
+    <div style="position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; margin-bottom: 20px;">
+        <iframe 
+            style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;" 
+            src="https://www.youtube.com/embed/y88GidhkAE8?si=iesfB084u4qrtPB_" 
+            title="Assessment Explanation" 
+            frameborder="0" 
+            allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" 
+            allowfullscreen>
+        </iframe>
+    </div>
     """, unsafe_allow_html=True)
-
-    # Author Credit
+    
+    st.markdown('</div>', unsafe_allow_html=True)
+    
+    # Author section with profile
     st.markdown('<div class="about-section">', unsafe_allow_html=True)
-    st.markdown('<h2 class="section-header">About the Creator</h2>', unsafe_allow_html=True)
-    st.markdown("""
-        <div class="author-bio">
-            <div class="author-image">IF</div>
-            <div>
-                <p style="margin: 0; font-weight: 600; color: #1f2937;">Ivy Fiecas-Borjal</p>
-                <p style="margin: 0; font-size: 14px; color: #6b7280;">Builder of AI/ML Experiences | Business Dev in Tech</p>
-                <p style="margin-top: 5px; font-size: 14px;">
-                    <a href="https://ifiecas.com/" target="_blank" style="color: #2563eb;">Visit Portfolio</a>
-                </p>
-            </div>
-        </div>
-    """, unsafe_allow_html=True)
-
-    # Personal note
-    st.markdown("""
-        <p class="about-text">
-        This app was created as part of a predictive analytics class at Victoria University (Melbourne) under Dr. Omid Ameri Sianaki. 
-        It was a fun and insightful learning experience!
-        </p>
-    """, unsafe_allow_html=True)
-
-    # Final disclaimer
-    st.markdown("""<div class="footer-disclaimer">
-        <p><strong>Educational Project Disclaimer:</strong> This application is a prototype created for demonstration purposes only. 
-        It is not affiliated with any real bank or financial institution.</p>
-        <p>© 2025 SmartLoanAI – A Machine Learning Showcase Project</p>
-    </div>""", unsafe_allow_html=True)
-
+    st.markdown('<h2 class="section-header">Behind the Build</h2>', unsafe_allow_html=True)
+    
+    st.markdown(
+        '<div class="author-bio">'
+        '  <div class="author-image">IF</div>'
+        '  <div>'
+        '    <p style="margin: 0; font-weight: 600; color: #1f2937;">Ivy Fiecas-Borjal</p>'
+        '    <p style="margin: 0; font-size: 14px; color: #6b7280;">Building with AI & ML | Biz Dev in Tech</p>'
+        '    <p style="margin-top: 5px; font-size: 14px;">'
+        '      <a href="https://ifiecas.com/" target="_blank" style="color: #2563eb; text-decoration: none;">Visit Portfolio</a>'
+        '    </p>'
+        '  </div>'
+        '</div>',
+        unsafe_allow_html=True
+    )
+    
+    st.markdown(
+        '<p class="about-text">Inspired by an assessment in BCO6008 Predictive Analytics class in Victoria University '
+        '(Melbourne) with Dr. Omid Ameri Sianaki. Enjoyed doing this and learned a lot! 😊</p>',
+        unsafe_allow_html=True
+    )
     st.markdown('</div>', unsafe_allow_html=True)
+    
+    # Disclaimer footer
+    st.markdown("""<div class="footer-disclaimer">
+        <p><strong>Educational Project Disclaimer:</strong> This application is a prototype created to demonstrate machine learning model deployment and is not an actual financial service. The loan approval decisions are based on a trained model for educational purposes only and should not be used for real financial decisions.</p>
+        <p>© 2025 SmartLoanAI - Machine Learning Showcase Project</p>
+    </div>""", unsafe_allow_html=True)