Update app.py

app.py

@@ -342,54 +342,56 @@ def main():
             </div>
             """, unsafe_allow_html=True)
         
-        # Modern Features section with gradient backgrounds and icons
+        # Modern Features section with Streamlit native components
         st.markdown("<br><br>", unsafe_allow_html=True)
         st.markdown("<h2 style='text-align:center;'>Key Features</h2>", unsafe_allow_html=True)
         
-        # Modern feature list with gradient backgrounds using emojis instead of Font Awesome
-        st.markdown("""
-        <div class="features-container">
-            <div class="feature-item">
-                <div class="feature-icon">
-                    <span style="font-size: 24px;">🔍</span>
-                </div>
-                <div class="feature-content">
-                    <h3>Intelligent Retrieval</h3>
-                    <p>Finds the most relevant clinical information from the MIMIC-IV-Ext dataset</p>
-                </div>
+        # Create a 2x2 grid for features using Streamlit columns
+        col1, col2 = st.columns(2)
+        
+        # Feature 1
+        with col1:
+            st.markdown("""
+            <div style="background: linear-gradient(135deg, rgba(72, 126, 176, 0.1), rgba(72, 126, 176, 0.2)); 
+                        padding: 20px; border-radius: 10px; height: 100%; 
+                        border: 1px solid rgba(255, 255, 255, 0.1); margin-bottom: 20px;">
+                <h3>🔍 Intelligent Retrieval</h3>
+                <p>Finds the most relevant clinical information from the MIMIC-IV-Ext dataset</p>
             </div>
-            
-            <div class="feature-item">
-                <div class="feature-icon">
-                    <span style="font-size: 24px;">🧠</span>
-                </div>
-                <div class="feature-content">
-                    <h3>Advanced Reasoning</h3>
-                    <p>Applies clinical knowledge to generate accurate diagnostic insights</p>
-                </div>
+            """, unsafe_allow_html=True)
+        
+        # Feature 2
+        with col2:
+            st.markdown("""
+            <div style="background: linear-gradient(135deg, rgba(72, 126, 176, 0.1), rgba(72, 126, 176, 0.2)); 
+                        padding: 20px; border-radius: 10px; height: 100%; 
+                        border: 1px solid rgba(255, 255, 255, 0.1); margin-bottom: 20px;">
+                <h3>🧠 Advanced Reasoning</h3>
+                <p>Applies clinical knowledge to generate accurate diagnostic insights</p>
             </div>
-            
-            <div class="feature-item">
-                <div class="feature-icon">
-                    <span style="font-size: 24px;">📄</span>
-                </div>
-                <div class="feature-content">
-                    <h3>Source Transparency</h3>
-                    <p>Provides references to all clinical sources used in generating responses</p>
-                </div>
+            """, unsafe_allow_html=True)
+        
+        # Feature 3
+        with col1:
+            st.markdown("""
+            <div style="background: linear-gradient(135deg, rgba(72, 126, 176, 0.1), rgba(72, 126, 176, 0.2)); 
+                        padding: 20px; border-radius: 10px; height: 100%; 
+                        border: 1px solid rgba(255, 255, 255, 0.1);">
+                <h3>📄 Source Transparency</h3>
+                <p>Provides references to all clinical sources used in generating responses</p>
             </div>
-            
-            <div class="feature-item">
-                <div class="feature-icon">
-                    <span style="font-size: 24px;">🌓</span>
-                </div>
-                <div class="feature-content">
-                    <h3>Dark/Light Theme Compatible</h3>
-                    <p>Optimized interface that works seamlessly in both dark and light themes</p>
-                </div>
+            """, unsafe_allow_html=True)
+        
+        # Feature 4
+        with col2:
+            st.markdown("""
+            <div style="background: linear-gradient(135deg, rgba(72, 126, 176, 0.1), rgba(72, 126, 176, 0.2)); 
+                        padding: 20px; border-radius: 10px; height: 100%; 
+                        border: 1px solid rgba(255, 255, 255, 0.1);">
+                <h3>🌓 Dark/Light Theme Compatible</h3>
+                <p>Optimized interface that works seamlessly in both dark and light themes</p>
             </div>
-        </div>
-        """, unsafe_allow_html=True)
+            """, unsafe_allow_html=True)
 
     # Chat interface
     elif st.session_state.page == 'chat':