Updates

app.py

@@ -129,8 +129,13 @@ def generate_new_question(category_name, module_name, module):
 modules = load_modules()
 
 # Streamlit sidebar
-st.sidebar.title("Magic Math Quiz!")
-st.sidebar.markdown("<h6 style='font-size: 10px;'><a href='https://ghassem.com' target='_blank' style='color: black; text-decoration: none;'>By Ghassem Tofighi</a></h6>", unsafe_allow_html=True)
+st.sidebar.markdown(
+    """
+    <div style='background-color: #D3D3D3; padding: 10px; border-radius: 10px; text-align: center; color: black;'>
+    <h3 style='margin: 0;'>🪄 Magic Math Quiz!</h3>
+    <h6 style='margin: 0; font-size: 10px;'><a href="https://ghassem.com" target="_blank" style="color: black; text-decoration: none;'>By Ghassem Tofighi</a></h6>
+    </div>
+    """, unsafe_allow_html=True)
 
 st.sidebar.title("Quiz Categories")
 selected_category = st.sidebar.selectbox("Choose a category:", list(modules.keys()))
@@ -168,9 +173,13 @@ if selected_category:
 
 current_question = st.session_state.current_question
 
-# Display module title and description with a larger font for description
-st.markdown(f"### {selected_module_data['title']}")
-st.markdown(f"<span style='font-size: 14px;'>{selected_module_data['description']}</span>", unsafe_allow_html=True)
+# Display Category Title > Module Title with dark background and white font
+st.markdown(
+    f"""
+    <div style='background-color: #333; padding: 10px; border-radius: 5px; color: white;'>
+    {selected_category} > {selected_module_data['title']}
+    </div>
+    """, unsafe_allow_html=True)
 
 # Display the current question with larger font
 st.markdown(f"<span style='font-size: 18px;'><b>Q{st.session_state.current_index + 1}: {current_question['question']}</b></span>", unsafe_allow_html=True)