Complete UI redesign with skeuomorphic elements and improved layout

- Added header with model author (yasserrmd) and space creator (Chris von Csefalvay) credits
- Added social links (GitHub, X/Twitter, website) in header
- Created skeuomorphic mini model card with gradient effects and shadows
- Built question carousel with 4 categories on right side
- Reorganized layout: chat on left, carousel on right
- Added BibTeX citation boxes for MIRIAD dataset and model
- Implemented clickable question buttons that populate input
- Enhanced visual hierarchy with professional design
- Improved responsive design for mobile/tablet
- Added smooth transitions and hover effects throughout

app.py

@@ -107,332 +107,617 @@ def generate_response(
     
     return response
 
-# Categorised example questions for better showcase
-EXAMPLE_CATEGORIES = {
-    "Patient Education": [
+# Question categories for the carousel
+QUESTION_CATEGORIES = {
+    "Patient education": [
         "What are the main types of dental cavities and how can I prevent them?",
         "Explain the stages of gum disease from gingivitis to periodontitis",
-        "What should I expect during my first dental cleaning appointment?",
+        "What should I expect during my first dental cleaning appointment?"
     ],
-    "Treatment Procedures": [
+    "Procedures": [
         "Walk me through the steps of a root canal treatment",
         "What's the difference between a crown and a veneer?",
-        "How does the dental implant process work from start to finish?",
+        "How does the dental implant process work from start to finish?"
     ],
-    "Oral Health & Prevention": [
+    "Preventative care advice": [
         "What's the proper brushing technique for optimal plaque removal?",
         "How does fluoride protect teeth and is it safe for children?",
-        "What foods should I avoid to maintain healthy teeth?",
+        "What foods should I avoid to maintain healthy teeth?"
     ],
-    "Paediatric Dentistry": [
-        "When should a child have their first dental visit?",
-        "Explain the tooth eruption timeline in children",
-        "How can parents help prevent early childhood cavities?",
-    ],
-    "Emergency & Post-Care": [
-        "What should I do if I knock out a permanent tooth?",
-        "How should I care for my mouth after wisdom tooth extraction?",
-        "What are signs of a dental infection that needs immediate attention?",
+    "Anatomy and terms": [
+        "Explain the anatomy of a tooth from crown to root",
+        "What are the different types of teeth and their functions?",
+        "What is the difference between enamel, dentin, and pulp?"
     ]
 }
 
-# Flatten examples for the Examples component
-EXAMPLES = []
-for category, questions in EXAMPLE_CATEGORIES.items():
-    for question in questions:
-        EXAMPLES.append([question])
-
-# Custom CSS for improved styling with proper dark mode support
+# Custom CSS for the redesigned interface
 custom_css = """
-/* Improved disclaimer box with proper dark mode support */
-.disclaimer-box {
-    background: linear-gradient(135deg, #fff9e6 0%, #fff3cd 100%);
-    border: 2px solid #f0ad4e;
-    border-radius: 10px;
-    padding: 16px 20px;
-    margin: 20px 0;
+/* Reset and base styles */
+* {
+    box-sizing: border-box;
+}
+
+/* Header with credits */
+.header-container {
+    background: linear-gradient(135deg, #1e40af 0%, #3b82f6 50%, #60a5fa 100%);
+    border-radius: 16px;
+    padding: 32px;
+    margin-bottom: 24px;
+    color: white;
+    text-align: center;
+    box-shadow: 0 8px 32px rgba(30, 64, 175, 0.3);
+}
+
+.dark .header-container {
+    background: linear-gradient(135deg, #1e3a8a 0%, #3730a3 50%, #4338ca 100%);
+}
+
+.header-title {
+    font-size: 40px;
+    font-weight: 800;
+    margin-bottom: 8px;
+    text-shadow: 0 2px 4px rgba(0,0,0,0.1);
+}
+
+.header-subtitle {
+    font-size: 18px;
+    opacity: 0.95;
+    margin-bottom: 16px;
+}
+
+.header-credits {
     font-size: 14px;
-    line-height: 1.6;
+    opacity: 0.9;
+    margin-bottom: 12px;
+}
+
+.header-credits a {
+    color: #fef3c7;
+    text-decoration: none;
+    font-weight: 500;
+}
+
+.header-credits a:hover {
+    color: #fde68a;
+    text-decoration: underline;
+}
+
+.social-links {
+    display: flex;
+    justify-content: center;
+    gap: 16px;
+    margin-top: 12px;
+}
+
+.social-link {
+    color: #e0e7ff;
+    text-decoration: none;
+    font-size: 14px;
+    padding: 4px 8px;
+    border-radius: 6px;
+    transition: all 0.2s;
+}
+
+.social-link:hover {
+    background: rgba(255,255,255,0.1);
+    color: white;
+}
+
+/* Mini model card - skeuomorphic design */
+.model-card {
+    background: linear-gradient(145deg, #f8fafc 0%, #e2e8f0 100%);
+    border: 1px solid #cbd5e1;
+    border-radius: 16px;
+    padding: 20px;
+    margin-bottom: 24px;
+    box-shadow: 
+        0 10px 25px rgba(0,0,0,0.1),
+        inset 0 1px 0 rgba(255,255,255,0.6);
     position: relative;
     overflow: hidden;
 }
 
-/* Dark mode disclaimer */
-.dark .disclaimer-box {
-    background: linear-gradient(135deg, #3d2f1f 0%, #4a3a28 100%);
-    border: 2px solid #d4a574;
-    color: #ffd9b3;
+.dark .model-card {
+    background: linear-gradient(145deg, #374151 0%, #1f2937 100%);
+    border: 1px solid #4b5563;
+    box-shadow: 
+        0 10px 25px rgba(0,0,0,0.3),
+        inset 0 1px 0 rgba(255,255,255,0.1);
 }
 
-.disclaimer-box::before {
+.model-card::before {
     content: '';
     position: absolute;
-    left: 0;
     top: 0;
-    bottom: 0;
-    width: 4px;
-    background: #f0ad4e;
-}
-
-.dark .disclaimer-box::before {
-    background: #d4a574;
+    left: 0;
+    right: 0;
+    height: 2px;
+    background: linear-gradient(90deg, #3b82f6, #8b5cf6, #ef4444, #f59e0b);
 }
 
-.disclaimer-title {
-    font-weight: 600;
-    color: #d58512;
-    margin-bottom: 8px;
+.model-card-title {
+    font-size: 20px;
+    font-weight: 700;
+    color: #1e293b;
+    margin-bottom: 12px;
     display: flex;
     align-items: center;
     gap: 8px;
 }
 
-.dark .disclaimer-title {
-    color: #ffa500;
+.dark .model-card-title {
+    color: #f1f5f9;
 }
 
-.disclaimer-text {
-    color: #856404;
+.model-stats {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
+    gap: 12px;
+    margin-bottom: 16px;
 }
 
-.dark .disclaimer-text {
-    color: #ffd9b3;
+.model-stat {
+    background: rgba(59, 130, 246, 0.1);
+    border: 1px solid rgba(59, 130, 246, 0.2);
+    border-radius: 8px;
+    padding: 8px 12px;
+    text-align: center;
 }
 
-/* Model capabilities cards */
-.capability-cards {
-    display: grid;
-    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
-    gap: 16px;
-    margin: 20px 0;
+.dark .model-stat {
+    background: rgba(59, 130, 246, 0.15);
+    border: 1px solid rgba(59, 130, 246, 0.3);
 }
 
-.capability-card {
-    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
-    border: 1px solid #dee2e6;
-    border-radius: 8px;
+.stat-value {
+    font-weight: 700;
+    font-size: 14px;
+    color: #3b82f6;
+}
+
+.dark .stat-value {
+    color: #60a5fa;
+}
+
+.stat-label {
+    font-size: 11px;
+    color: #64748b;
+    text-transform: uppercase;
+    letter-spacing: 0.5px;
+    margin-top: 2px;
+}
+
+.dark .stat-label {
+    color: #94a3b8;
+}
+
+.model-description {
+    color: #475569;
+    font-size: 14px;
+    line-height: 1.6;
+}
+
+.dark .model-description {
+    color: #cbd5e1;
+}
+
+/* Question carousel - right side */
+.question-carousel {
+    background: linear-gradient(145deg, #ffffff 0%, #f1f5f9 100%);
+    border: 1px solid #e2e8f0;
+    border-radius: 16px;
+    padding: 20px;
+    box-shadow: 
+        0 4px 16px rgba(0,0,0,0.08),
+        inset 0 1px 0 rgba(255,255,255,0.8);
+    height: fit-content;
+    position: sticky;
+    top: 20px;
+}
+
+.dark .question-carousel {
+    background: linear-gradient(145deg, #1f2937 0%, #111827 100%);
+    border: 1px solid #374151;
+    box-shadow: 
+        0 4px 16px rgba(0,0,0,0.2),
+        inset 0 1px 0 rgba(255,255,255,0.05);
+}
+
+.carousel-title {
+    font-size: 18px;
+    font-weight: 700;
+    color: #1e293b;
+    margin-bottom: 16px;
+    text-align: center;
+}
+
+.dark .carousel-title {
+    color: #f1f5f9;
+}
+
+.carousel-card {
+    background: linear-gradient(135deg, #fafafa 0%, #f4f4f5 100%);
+    border: 1px solid #e4e4e7;
+    border-radius: 12px;
     padding: 16px;
+    margin-bottom: 16px;
+    box-shadow: 
+        0 2px 8px rgba(0,0,0,0.06),
+        inset 0 1px 0 rgba(255,255,255,0.7);
     transition: transform 0.2s, box-shadow 0.2s;
 }
 
-.dark .capability-card {
-    background: linear-gradient(135deg, #2b2b2b 0%, #1f1f1f 100%);
-    border: 1px solid #404040;
+.dark .carousel-card {
+    background: linear-gradient(135deg, #374151 0%, #2d3748 100%);
+    border: 1px solid #4b5563;
+    box-shadow: 
+        0 2px 8px rgba(0,0,0,0.15),
+        inset 0 1px 0 rgba(255,255,255,0.05);
 }
 
-.capability-card:hover {
+.carousel-card:hover {
     transform: translateY(-2px);
-    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
+    box-shadow: 
+        0 4px 16px rgba(0,0,0,0.12),
+        inset 0 1px 0 rgba(255,255,255,0.7);
 }
 
-.dark .capability-card:hover {
-    box-shadow: 0 4px 12px rgba(255,255,255,0.1);
+.dark .carousel-card:hover {
+    box-shadow: 
+        0 4px 16px rgba(0,0,0,0.25),
+        inset 0 1px 0 rgba(255,255,255,0.05);
 }
 
-.capability-title {
+.carousel-card-title {
     font-weight: 600;
-    color: #495057;
+    color: #3b82f6;
+    margin-bottom: 12px;
+    font-size: 15px;
+}
+
+.dark .carousel-card-title {
+    color: #60a5fa;
+}
+
+.question-button {
+    display: block;
+    width: 100%;
+    background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
+    border: 1px solid #cbd5e1;
+    border-radius: 8px;
+    padding: 8px 12px;
     margin-bottom: 8px;
-    font-size: 16px;
+    font-size: 13px;
+    color: #475569;
+    text-align: left;
+    cursor: pointer;
+    transition: all 0.2s;
+    box-shadow: 0 1px 3px rgba(0,0,0,0.05);
 }
 
-.dark .capability-title {
-    color: #e9ecef;
+.dark .question-button {
+    background: linear-gradient(135deg, #4b5563 0%, #374151 100%);
+    border: 1px solid #6b7280;
+    color: #d1d5db;
 }
 
-.capability-description {
-    color: #6c757d;
-    font-size: 14px;
-    line-height: 1.5;
+.question-button:hover {
+    background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
+    color: white;
+    border-color: #3b82f6;
+    transform: translateY(-1px);
+    box-shadow: 0 2px 8px rgba(59, 130, 246, 0.3);
 }
 
-.dark .capability-description {
-    color: #adb5bd;
+.question-button:last-child {
+    margin-bottom: 0;
 }
 
-/* Stats badges */
-.stats-container {
-    display: flex;
-    gap: 16px;
-    flex-wrap: wrap;
-    margin: 16px 0;
+/* Main layout */
+.main-layout {
+    display: grid;
+    grid-template-columns: 2fr 1fr;
+    gap: 24px;
+    margin-bottom: 24px;
 }
 
-.stat-badge {
-    background: linear-gradient(135deg, #e7f3ff 0%, #cfe2ff 100%);
-    border: 1px solid #b6d4fe;
-    border-radius: 20px;
-    padding: 8px 16px;
-    display: flex;
-    align-items: center;
-    gap: 8px;
+@media (max-width: 1024px) {
+    .main-layout {
+        grid-template-columns: 1fr;
+    }
+    
+    .question-carousel {
+        position: static;
+    }
 }
 
-.dark .stat-badge {
-    background: linear-gradient(135deg, #1a3a52 0%, #0f2940 100%);
-    border: 1px solid #2563eb;
+/* Chat interface improvements */
+.chat-container {
+    background: linear-gradient(145deg, #ffffff 0%, #f8fafc 100%);
+    border: 1px solid #e2e8f0;
+    border-radius: 16px;
+    padding: 20px;
+    box-shadow: 
+        0 4px 16px rgba(0,0,0,0.08),
+        inset 0 1px 0 rgba(255,255,255,0.8);
 }
 
-.stat-label {
-    color: #0066cc;
-    font-weight: 500;
-    font-size: 12px;
-    text-transform: uppercase;
-    letter-spacing: 0.5px;
+.dark .chat-container {
+    background: linear-gradient(145deg, #1f2937 0%, #111827 100%);
+    border: 1px solid #374151;
+    box-shadow: 
+        0 4px 16px rgba(0,0,0,0.2),
+        inset 0 1px 0 rgba(255,255,255,0.05);
 }
 
-.dark .stat-label {
-    color: #60a5fa;
+/* Citation boxes */
+.citation-section {
+    margin-top: 32px;
+    padding-top: 24px;
+    border-top: 2px solid #e2e8f0;
 }
 
-.stat-value {
-    color: #004099;
+.dark .citation-section {
+    border-top: 2px solid #374151;
+}
+
+.citation-title {
+    font-size: 20px;
     font-weight: 700;
-    font-size: 14px;
+    color: #1e293b;
+    margin-bottom: 16px;
+    text-align: center;
 }
 
-.dark .stat-value {
-    color: #93bbfc;
+.dark .citation-title {
+    color: #f1f5f9;
 }
 
-/* Improved button styling */
-.gr-button-primary {
-    background: linear-gradient(135deg, #0066cc 0%, #0052a3 100%) !important;
-    border: none !important;
-    color: white !important;
-    font-weight: 600 !important;
-    transition: all 0.3s ease !important;
+.citation-boxes {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+    gap: 16px;
 }
 
-.gr-button-primary:hover {
-    background: linear-gradient(135deg, #0052a3 0%, #003d7a 100%) !important;
-    transform: translateY(-1px);
-    box-shadow: 0 4px 12px rgba(0, 102, 204, 0.3);
+.citation-box {
+    background: linear-gradient(145deg, #f8fafc 0%, #e2e8f0 100%);
+    border: 1px solid #cbd5e1;
+    border-radius: 12px;
+    padding: 16px;
+    box-shadow: 
+        0 4px 12px rgba(0,0,0,0.08),
+        inset 0 1px 0 rgba(255,255,255,0.6);
 }
 
-/* Chat improvements */
-.gr-chatbot {
-    border-radius: 12px !important;
-    border: 1px solid #dee2e6 !important;
+.dark .citation-box {
+    background: linear-gradient(145deg, #374151 0%, #1f2937 100%);
+    border: 1px solid #4b5563;
+    box-shadow: 
+        0 4px 12px rgba(0,0,0,0.2),
+        inset 0 1px 0 rgba(255,255,255,0.1);
 }
 
-.dark .gr-chatbot {
-    border: 1px solid #404040 !important;
+.citation-box h4 {
+    color: #3b82f6;
+    font-weight: 600;
+    margin-bottom: 8px;
+    font-size: 16px;
 }
 
-/* Example section styling */
-.example-category {
-    margin-bottom: 12px;
+.dark .citation-box h4 {
+    color: #60a5fa;
+}
+
+.citation-content {
+    background: #1f2937;
+    color: #e5e7eb;
     padding: 12px;
-    background: #f8f9fa;
     border-radius: 8px;
+    font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
+    font-size: 12px;
+    line-height: 1.4;
+    overflow-x: auto;
+    white-space: pre-wrap;
+    word-break: break-all;
+    margin-top: 8px;
+}
+
+.dark .citation-content {
+    background: #111827;
+    border: 1px solid #374151;
+}
+
+/* Advanced settings styling */
+.advanced-settings {
+    background: linear-gradient(145deg, #f1f5f9 0%, #e2e8f0 100%);
+    border: 1px solid #cbd5e1;
+    border-radius: 12px;
+    margin: 16px 0;
+    box-shadow: 
+        0 2px 8px rgba(0,0,0,0.06),
+        inset 0 1px 0 rgba(255,255,255,0.7);
+}
+
+.dark .advanced-settings {
+    background: linear-gradient(145deg, #374151 0%, #1f2937 100%);
+    border: 1px solid #4b5563;
+    box-shadow: 
+        0 2px 8px rgba(0,0,0,0.15),
+        inset 0 1px 0 rgba(255,255,255,0.05);
 }
 
-.dark .example-category {
-    background: #1f1f1f;
+/* Disclaimer styling */
+.disclaimer-box {
+    background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
+    border: 2px solid #f59e0b;
+    border-radius: 12px;
+    padding: 16px 20px;
+    margin: 20px 0;
+    box-shadow: 
+        0 4px 12px rgba(245, 158, 11, 0.2),
+        inset 0 1px 0 rgba(255,255,255,0.5);
+    position: relative;
+}
+
+.dark .disclaimer-box {
+    background: linear-gradient(135deg, #92400e 0%, #78350f 100%);
+    border: 2px solid #f59e0b;
+    color: #fef3c7;
+    box-shadow: 
+        0 4px 12px rgba(245, 158, 11, 0.3),
+        inset 0 1px 0 rgba(255,255,255,0.1);
+}
+
+.disclaimer-box::before {
+    content: '';
+    position: absolute;
+    left: 0;
+    top: 0;
+    bottom: 0;
+    width: 4px;
+    background: #f59e0b;
+    border-radius: 2px 0 0 2px;
 }
 
-.example-category-title {
+.disclaimer-title {
     font-weight: 600;
-    color: #495057;
+    color: #92400e;
     margin-bottom: 8px;
-    font-size: 14px;
-    text-transform: uppercase;
-    letter-spacing: 0.5px;
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    font-size: 15px;
 }
 
-.dark .example-category-title {
-    color: #e9ecef;
+.dark .disclaimer-title {
+    color: #fbbf24;
 }
 
-/* Header styling */
-.main-header {
-    background: linear-gradient(135deg, #0066cc 0%, #0052a3 100%);
-    color: white;
-    padding: 32px;
-    border-radius: 12px;
-    margin-bottom: 24px;
-    text-align: center;
+.disclaimer-text {
+    color: #78350f;
+    font-size: 14px;
+    line-height: 1.5;
 }
 
-.dark .main-header {
-    background: linear-gradient(135deg, #1e3a8a 0%, #1e40af 100%);
+.dark .disclaimer-text {
+    color: #fef3c7;
 }
 
-.header-title {
-    font-size: 36px;
-    font-weight: 700;
-    margin-bottom: 12px;
+/* Button improvements */
+.gr-button {
+    border-radius: 8px !important;
+    font-weight: 600 !important;
+    transition: all 0.2s ease !important;
 }
 
-.header-subtitle {
-    font-size: 18px;
-    opacity: 0.95;
-    font-weight: 400;
+.gr-button-primary {
+    background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%) !important;
+    border: none !important;
+    color: white !important;
+    box-shadow: 0 2px 4px rgba(59, 130, 246, 0.3) !important;
+}
+
+.gr-button-primary:hover {
+    background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%) !important;
+    transform: translateY(-1px) !important;
+    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.4) !important;
 }
 
-/* Mobile responsiveness */
+/* Responsive design */
 @media (max-width: 768px) {
-    .capability-cards {
-        grid-template-columns: 1fr;
-    }
-    
-    .stats-container {
-        flex-direction: column;
+    .header-title {
+        font-size: 28px;
     }
     
-    .stat-badge {
-        width: 100%;
-        justify-content: center;
+    .model-stats {
+        grid-template-columns: repeat(2, 1fr);
     }
     
-    .header-title {
-        font-size: 28px;
+    .social-links {
+        flex-wrap: wrap;
     }
     
-    .header-subtitle {
-        font-size: 16px;
+    .citation-boxes {
+        grid-template-columns: 1fr;
     }
 }
 """
 
-# Create Gradio interface with improved design
-with gr.Blocks(theme=gr.themes.Soft(), css=custom_css) as demo:
-    # Professional header with gradient
+# JavaScript for question button functionality
+question_js = """
+function setupQuestionButtons() {
+    document.addEventListener('click', function(e) {
+        if (e.target.classList.contains('question-button')) {
+            const question = e.target.textContent;
+            const textbox = document.querySelector('textarea[placeholder*="Ask about dental"]');
+            if (textbox) {
+                textbox.value = question;
+                textbox.dispatchEvent(new Event('input', { bubbles: true }));
+            }
+        }
+    });
+}
+
+document.addEventListener('DOMContentLoaded', setupQuestionButtons);
+"""
+
+# Create the Gradio interface
+with gr.Blocks(theme=gr.themes.Soft(), css=custom_css, js=question_js) as demo:
+    
+    # Header with credits and social links
     gr.HTML(
         """
-        <div class="main-header">
+        <div class="header-container">
             <h1 class="header-title">🦷 DentaInstruct-1.2B Demo</h1>
             <p class="header-subtitle">Advanced AI assistant for dental education and oral health information</p>
+            <div class="header-credits">
+                Model by <a href="https://huggingface.co/yasserrmd" target="_blank">yasserrmd</a> / 
+                Space by <a href="https://huggingface.co/chrisvoncsefalvay" target="_blank">Chris von Csefalvay</a>
+            </div>
+            <div class="social-links">
+                <a href="https://github.com/chrisvoncsefalvay" target="_blank" class="social-link">GitHub</a>
+                <a href="https://twitter.com/epichrisis" target="_blank" class="social-link">X/Twitter</a>
+                <a href="https://chrisvoncsefalvay.com" target="_blank" class="social-link">Website</a>
+            </div>
         </div>
         """
     )
     
-    # Model statistics and capabilities
+    # Mini model card with skeuomorphic design
     gr.HTML(
         """
-        <div class="stats-container">
-            <div class="stat-badge">
-                <span class="stat-label">Model Size</span>
-                <span class="stat-value">1.17B params</span>
+        <div class="model-card">
+            <div class="model-card-title">
+                🧠 Model Information
             </div>
-            <div class="stat-badge">
-                <span class="stat-label">Base Model</span>
-                <span class="stat-value">LFM2-1.2B</span>
+            <div class="model-stats">
+                <div class="model-stat">
+                    <div class="stat-value">1.17B</div>
+                    <div class="stat-label">Parameters</div>
+                </div>
+                <div class="model-stat">
+                    <div class="stat-value">LFM2-1.2B</div>
+                    <div class="stat-label">Base Model</div>
+                </div>
+                <div class="model-stat">
+                    <div class="stat-value">MIRIAD</div>
+                    <div class="stat-label">Dataset</div>
+                </div>
+                <div class="model-stat">
+                    <div class="stat-value">2048</div>
+                    <div class="stat-label">Context Length</div>
+                </div>
             </div>
-            <div class="stat-badge">
-                <span class="stat-label">Training Data</span>
-                <span class="stat-value">MIRIAD Dental</span>
-            </div>
-            <div class="stat-badge">
-                <span class="stat-label">Response Time</span>
-                <span class="stat-value">< 2 seconds</span>
+            <div class="model-description">
+                Specialised language model fine-tuned for dental education and oral health information. 
+                Built on efficient LFM2 architecture with supervised fine-tuning on comprehensive dental content.
             </div>
         </div>
         """
     )
     
-    # Improved disclaimer with better visibility
+    # Disclaimer box
     gr.HTML(
         """
         <div class="disclaimer-box">
@@ -448,42 +733,10 @@ with gr.Blocks(theme=gr.themes.Soft(), css=custom_css) as demo:
         """
     )
     
-    # Model capabilities showcase
-    gr.HTML(
-        """
-        <h2 style="margin-top: 24px; margin-bottom: 16px;">What can DentaInstruct help you with?</h2>
-        <div class="capability-cards">
-            <div class="capability-card">
-                <div class="capability-title">📚 Patient Education</div>
-                <div class="capability-description">Clear explanations of dental conditions, treatments, and procedures in patient-friendly language</div>
-            </div>
-            <div class="capability-card">
-                <div class="capability-title">🔍 Procedure Details</div>
-                <div class="capability-description">Step-by-step breakdowns of common dental procedures from cleanings to complex treatments</div>
-            </div>
-            <div class="capability-card">
-                <div class="capability-title">🛡️ Prevention Tips</div>
-                <div class="capability-description">Evidence-based oral hygiene guidance and preventive care recommendations</div>
-            </div>
-            <div class="capability-card">
-                <div class="capability-title">👶 Paediatric Dentistry</div>
-                <div class="capability-description">Specialised information about children's dental development and care</div>
-            </div>
-            <div class="capability-card">
-                <div class="capability-title">🚨 Emergency Guidance</div>
-                <div class="capability-description">Educational information about dental emergencies and post-treatment care</div>
-            </div>
-            <div class="capability-card">
-                <div class="capability-title">🦷 Anatomy & Terms</div>
-                <div class="capability-description">Detailed explanations of dental anatomy and professional terminology</div>
-            </div>
-        </div>
-        """
-    )
-    
-    # Main chat interface
-    with gr.Row():
-        with gr.Column(scale=1):
+    # Main layout with chat on left, carousel on right
+    with gr.Row(elem_classes="main-layout"):
+        # Left side - Chat interface
+        with gr.Column(scale=2, elem_classes="chat-container"):
             chatbot = gr.Chatbot(
                 height=500,
                 label="Dental Education Assistant",
@@ -505,9 +758,31 @@ with gr.Blocks(theme=gr.themes.Soft(), css=custom_css) as demo:
             with gr.Row():
                 submit = gr.Button("Send Question", variant="primary", scale=1)
                 clear = gr.Button("Clear Chat", scale=1)
+        
+        # Right side - Question carousel
+        with gr.Column(scale=1):
+            carousel_html = """
+            <div class="question-carousel">
+                <div class="carousel-title">💡 Quick Questions</div>
+            """
+            
+            for category, questions in QUESTION_CATEGORIES.items():
+                carousel_html += f"""
+                <div class="carousel-card">
+                    <div class="carousel-card-title">{category}</div>
+                """
+                for question in questions:
+                    carousel_html += f"""
+                    <button class="question-button" type="button">{question}</button>
+                    """
+                carousel_html += "</div>"
+            
+            carousel_html += "</div>"
+            
+            gr.HTML(carousel_html)
     
-    # Advanced settings in a collapsible section
-    with gr.Accordion("⚙️ Advanced Settings", open=False):
+    # Advanced settings in collapsible section
+    with gr.Accordion("⚙️ Advanced Settings", open=False, elem_classes="advanced-settings"):
         with gr.Row():
             with gr.Column(scale=1):
                 temperature = gr.Slider(
@@ -547,73 +822,34 @@ with gr.Blocks(theme=gr.themes.Soft(), css=custom_css) as demo:
                     info="Reduces repetitive phrases in responses"
                 )
     
-    # Example questions organised by category
-    with gr.Accordion("💡 Example Questions by Category", open=True):
-        gr.Examples(
-            examples=EXAMPLES[:8],  # Show first 8 examples
-            inputs=msg,
-            label="Quick Start Examples",
-        )
-        
-        # Additional categorised examples
-        gr.Markdown(
-            """
-            ### More Example Categories:
-            - **Patient Education**: Understanding conditions, prevention, and treatment basics
-            - **Treatment Procedures**: Detailed explanations of dental procedures
-            - **Oral Health & Prevention**: Daily care and preventive measures
-            - **Paediatric Dentistry**: Children's dental health and development
-            - **Emergency & Post-Care**: Urgent situations and aftercare instructions
-            """
-        )
-    
-    # About section with professional information
-    gr.Markdown(
+    # Citation boxes section
+    gr.HTML(
         """
-        ---
-        
-        ## About DentaInstruct-1.2B
-        
-        DentaInstruct-1.2B is a specialised language model fine-tuned specifically for dental education and oral health information. 
-        Built on the efficient LFM2-1.2B architecture, it combines compact size with domain expertise to provide accurate, 
-        educational content about dentistry.
-        
-        ### Key Features:
-        - **Specialised Training**: Fine-tuned on comprehensive dental educational content from the MIRIAD dataset
-        - **Efficient Architecture**: 1.17B parameters optimised for fast response times
-        - **Broad Coverage**: Knowledgeable about general dentistry, orthodontics, periodontics, endodontics, and more
-        - **Educational Focus**: Designed to explain complex dental concepts in accessible language
-        - **Multi-context Support**: Can handle patient education, professional discussions, and academic queries
-        
-        ### Technical Specifications:
-        - **Architecture**: Transformer-based language model
-        - **Base Model**: LiquidAI LFM2-1.2B
-        - **Training Method**: Supervised fine-tuning on dental domain data
-        - **Context Length**: 2048 tokens
-        - **Inference**: Optimised for GPU acceleration with bfloat16 precision
-        
-        ### Use Cases:
-        - Patient education materials and explanations
-        - Dental student study assistance
-        - Quick reference for dental terminology
-        - Understanding treatment options and procedures
-        - Oral health and hygiene guidance
-        
-        ### Important Considerations:
-        - This model is for educational purposes only
-        - Not intended for clinical decision-making
-        - Information should be verified with professional sources
-        - Always consult qualified dental professionals for personal health concerns
-        
-        ---
-        
-        **Model Creator**: [@yasserrmd](https://huggingface.co/yasserrmd) | 
-        **Space Developer**: [@chrisvoncsefalvay](https://huggingface.co/chrisvoncsefalvay) | 
-        **License**: Apache 2.0
-        
-        🔗 [Model Card](https://huggingface.co/yasserrmd/DentaInstruct-1.2B) | 
-        📊 [MIRIAD Dataset](https://huggingface.co/datasets/miriad) | 
-        💬 [Report Issues](https://huggingface.co/spaces/chrisvoncsefalvay/dental-vqa-comparison/discussions)
+        <div class="citation-section">
+            <div class="citation-title">📚 Citations</div>
+            <div class="citation-boxes">
+                <div class="citation-box">
+                    <h4>MIRIAD Dataset</h4>
+                    <p>Training dataset used for fine-tuning the dental knowledge base.</p>
+                    <div class="citation-content">@misc{miriad2024,
+  title={MIRIAD: A Multi-modal Instruction-following Dataset for Dentistry},
+  author={MIRIAD Team},
+  year={2024},
+  url={https://huggingface.co/datasets/miriad}
+}</div>
+                </div>
+                <div class="citation-box">
+                    <h4>DentaInstruct-1.2B Model</h4>
+                    <p>The fine-tuned model used in this demonstration.</p>
+                    <div class="citation-content">@misc{dentainstruct2024,
+  title={DentaInstruct-1.2B: A Dental Education Language Model},
+  author={yasserrmd},
+  year={2024},
+  url={https://huggingface.co/yasserrmd/DentaInstruct-1.2B}
+}</div>
+                </div>
+            </div>
+        </div>
         """
     )