From 328a6ecd151f18bab16a91c7e5a773179c9217f5 Mon Sep 17 00:00:00 2001
From: Christopher Odoom <your.email@example.com>
Date: Fri, 24 Jul 2026 18:54:50 -0400
Subject: [PATCH 1/3] Add all-models index page

---
 routes/main_routes.py        | 11 +++++++++++
 templates/model_details.html |  4 ++--
 tests/test_main_routes.py    |  9 +++++++++
 3 files changed, 22 insertions(+), 2 deletions(-)

diff --git a/routes/main_routes.py b/routes/main_routes.py
index a3b2efc..e1514b7 100644
--- a/routes/main_routes.py
+++ b/routes/main_routes.py
@@ -668,6 +668,17 @@ def history():
             return redirect(url_for('auth.login', next=url_for('main.history')))
     except Exception as e:
         return render_template('error.html', error=str(e))
+@main.route('/models')
+def models_index():
+    """Display every available statistical model."""
+    model_database = current_app.config.get('MODEL_DATABASE', {})
+    return render_template(
+        'models_list.html',
+        models=sorted(model_database.items()),
+        group_name='All Statistical Models',
+    )
+
+
 @main.route('/models/<group_name>')
 def models_in_group(group_name):
     """Display models belonging to a specific group."""
diff --git a/templates/model_details.html b/templates/model_details.html
index 9bac7b6..77309cc 100644
--- a/templates/model_details.html
+++ b/templates/model_details.html
@@ -317,7 +317,7 @@ <h6>Academic Papers and References</h6>
 
                     <div class="text-center mt-4">
                         <a href="/" class="btn btn-primary">Back to Home</a>
-                        <a href="/models" class="btn btn-secondary">View All Models</a>
+                        <a href="{{ url_for('main.models_index') }}" class="btn btn-secondary">View All Models</a>
                     </div>
                 </div>
             </div>
@@ -327,4 +327,4 @@ <h6>Academic Papers and References</h6>
 
 <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
 <script src="{{ url_for('static', filename='js/page_search.js') }}"></script>
-{% endblock %} 
\ No newline at end of file
+{% endblock %}
diff --git a/tests/test_main_routes.py b/tests/test_main_routes.py
index 9f45860..6826a82 100644
--- a/tests/test_main_routes.py
+++ b/tests/test_main_routes.py
@@ -26,6 +26,15 @@ def test_double_encoded_model_group_url(self, client):
         assert b'Invalid model group' not in response.data
         assert b'Linear Regression' in response.data
 
+    def test_models_index(self, client):
+        """The all-models page lists models from the configured database."""
+        response = client.get('/models')
+
+        assert response.status_code == 200
+        assert b'All Statistical Models' in response.data
+        assert b'Linear Regression' in response.data
+        assert b'Logistic Regression' in response.data
+
     def test_double_encoded_model_detail_urls(self, client, monkeypatch):
         """Encoded model links work across detail and interpretation routes."""
         interpretation_module = ModuleType('utils.interpretation')

From 6468b3a9353740aae92859455f0a6f288cbce704 Mon Sep 17 00:00:00 2001
From: Christopher Odoom <your.email@example.com>
Date: Fri, 24 Jul 2026 19:00:53 -0400
Subject: [PATCH 2/3] Open full catalog from model links

---
 templates/base.html       |  4 ++--
 templates/home.html       |  6 +++---
 templates/results.html    |  2 +-
 tests/test_main_routes.py | 17 ++++++++++++++++-
 4 files changed, 22 insertions(+), 7 deletions(-)

diff --git a/templates/base.html b/templates/base.html
index 9ebe782..37bcf6f 100644
--- a/templates/base.html
+++ b/templates/base.html
@@ -420,7 +420,7 @@
                 <div class="col-6 col-md">
                     <h5>Explore</h5>
                     <ul class="list-unstyled text-small">
-                        <li><a class="link-light" href="{{ url_for('main.models_in_group', group_name='Regression Models') }}">Models</a></li>
+                        <li><a class="link-light" href="{{ url_for('main.models_index') }}">Models</a></li>
                         <li><a class="link-light" href="{{ url_for('main.history') }}">History</a></li>
                         <li><a class="link-light" href="{{ url_for('expert.experts_list') }}">Experts</a></li>
                         <li><a class="link-light" href="{{ url_for('questionnaire.index') }}">Questionnaire Designer</a></li>
@@ -557,4 +557,4 @@ <h3><i class="bi bi-robot me-2"></i>AI Assistant</h3>
     });
     </script>
 </body>
-</html> 
\ No newline at end of file
+</html>
diff --git a/templates/home.html b/templates/home.html
index 0602cc9..1dd8176 100644
--- a/templates/home.html
+++ b/templates/home.html
@@ -207,7 +207,7 @@ <h1>Statistical Model Suggester</h1>
                     <a href="{{ url_for('main.analysis_form') }}" class="btn btn-light btn-lg">
                         <i class="bi bi-graph-up me-2"></i>Start Your Analysis
                     </a>
-                    <a href="{{ url_for('main.models_in_group', group_name='Regression Models') }}" class="btn btn-outline-light btn-lg">
+                    <a href="{{ url_for('main.models_index') }}" class="btn btn-outline-light btn-lg">
                         <i class="bi bi-database me-2"></i>Browse Models
                     </a>
                 </div>
@@ -269,7 +269,7 @@ <h3 class="consultation-title">Expert Consultation</h3>
                     <i class="bi bi-book consultation-icon" style="color: #6f42c1;"></i>
                     <h3 class="consultation-title">Educational Resources</h3>
                     <p class="consultation-description">Access comprehensive documentation, tutorials, and examples for each statistical model in our database.</p>
-                    <a href="{{ url_for('main.models_in_group', group_name='Regression Models') }}" class="btn btn-purple">Learn More</a>
+                    <a href="{{ url_for('main.models_index') }}" class="btn btn-purple">Learn More</a>
                 </div>
             </div>
             <div class="col-md-6 col-lg-3">
@@ -317,4 +317,4 @@ <h3 class="consultation-title">Questionnaire Designer</h3>
 </div>
 {% endblock %}
 
-{% block container_end %}{% endblock %} 
\ No newline at end of file
+{% block container_end %}{% endblock %}
diff --git a/templates/results.html b/templates/results.html
index 4ef889d..2a0441f 100644
--- a/templates/results.html
+++ b/templates/results.html
@@ -116,7 +116,7 @@ <h6>{{ model_name }}</h6>
                     <div class="text-center mt-4">
                         <a href="{{ url_for('main.analysis_form') }}" class="btn btn-primary">Start New Analysis</a>
                         <a href="{{ url_for('main.history') }}" class="btn btn-secondary">View History</a>
-                        <a href="{{ url_for('main.models_in_group', group_name='Regression Models') }}" class="btn btn-info">Browse Models</a>
+                        <a href="{{ url_for('main.models_index') }}" class="btn btn-info">Browse Models</a>
                     </div>
                 </div>
             </div>
diff --git a/tests/test_main_routes.py b/tests/test_main_routes.py
index 6826a82..cd534bf 100644
--- a/tests/test_main_routes.py
+++ b/tests/test_main_routes.py
@@ -33,7 +33,22 @@ def test_models_index(self, client):
         assert response.status_code == 200
         assert b'All Statistical Models' in response.data
         assert b'Linear Regression' in response.data
-        assert b'Logistic Regression' in response.data
+        assert b'ARIMA' in response.data
+        assert b'Random Forest' in response.data
+
+    def test_generic_model_links_open_full_catalog(
+        self,
+        client,
+        sample_analysis_data,
+    ):
+        """Generic model links do not restrict visitors to regressions."""
+        home_response = client.get('/')
+        results_response = client.post('/results', data=sample_analysis_data)
+
+        assert home_response.status_code == 200
+        assert results_response.status_code == 200
+        assert home_response.data.count(b'href="/models"') >= 3
+        assert b'href="/models"' in results_response.data
 
     def test_double_encoded_model_detail_urls(self, client, monkeypatch):
         """Encoded model links work across detail and interpretation routes."""

From 40d358de5e47002e2b20e4e315e5e86b9fce2e05 Mon Sep 17 00:00:00 2001
From: Christopher Odoom <your.email@example.com>
Date: Fri, 24 Jul 2026 19:15:34 -0400
Subject: [PATCH 3/3] Redesign statistical model selection experience

---
 public/static/css/app.css     | 318 +++++++++++++++++
 public/static/css/chatbot.css |  86 ++---
 routes/main_routes.py         |  36 +-
 templates/analysis_form.html  |  83 ++---
 templates/base.html           | 640 +++++++++-------------------------
 templates/error.html          | 132 ++-----
 templates/history.html        |   4 +-
 templates/home.html           | 513 +++++++++++----------------
 templates/model_details.html  |  62 ++--
 templates/models_list.html    | 189 +++++++---
 templates/results.html        | 226 ++++++------
 templates/search_results.html |  86 +++--
 tests/test_main_routes.py     |   2 +-
 13 files changed, 1120 insertions(+), 1257 deletions(-)
 create mode 100644 public/static/css/app.css

diff --git a/public/static/css/app.css b/public/static/css/app.css
new file mode 100644
index 0000000..63debd4
--- /dev/null
+++ b/public/static/css/app.css
@@ -0,0 +1,318 @@
+:root {
+    --navy-950: #0b1f33;
+    --navy-900: #102a43;
+    --navy-800: #183b56;
+    --navy-700: #274c6b;
+    --teal-700: #0f766e;
+    --teal-600: #0d9488;
+    --teal-100: #ccfbf1;
+    --teal-50: #f0fdfa;
+    --gold-500: #d8a42b;
+    --ink: #172b3a;
+    --muted: #607486;
+    --line: #dce5eb;
+    --surface: #ffffff;
+    --canvas: #f5f8fa;
+    --warm: #faf7f1;
+    --shadow-sm: 0 8px 24px rgba(16, 42, 67, 0.07);
+    --shadow-md: 0 18px 50px rgba(16, 42, 67, 0.12);
+    --radius-sm: 0.65rem;
+    --radius: 1rem;
+    --radius-lg: 1.5rem;
+}
+
+* { box-sizing: border-box; }
+
+html { scroll-behavior: smooth; }
+
+body {
+    min-height: 100vh;
+    display: flex;
+    flex-direction: column;
+    margin: 0;
+    color: var(--ink);
+    background: var(--canvas);
+    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+    line-height: 1.6;
+    -webkit-font-smoothing: antialiased;
+}
+
+a { color: var(--teal-700); }
+a:hover { color: var(--navy-800); }
+
+h1, h2, h3, h4, h5, h6 {
+    color: var(--navy-950);
+    font-weight: 700;
+    letter-spacing: -0.025em;
+}
+
+.skip-link {
+    position: fixed;
+    top: -5rem;
+    left: 1rem;
+    z-index: 2000;
+    padding: .65rem 1rem;
+    color: white;
+    background: var(--navy-950);
+    border-radius: .5rem;
+}
+.skip-link:focus { top: 1rem; }
+
+.app-navbar {
+    min-height: 76px;
+    background: rgba(16, 42, 67, .98);
+    box-shadow: 0 1px 0 rgba(255,255,255,.08);
+}
+
+.app-brand {
+    display: inline-flex;
+    align-items: center;
+    gap: .7rem;
+    color: white !important;
+    line-height: 1.05;
+}
+.app-brand strong,
+.app-brand small { display: block; }
+.app-brand strong { font-size: .98rem; letter-spacing: -.01em; }
+.app-brand small { margin-top: .2rem; color: #b9d4e5; font-size: .76rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }
+
+.brand-mark {
+    display: inline-grid;
+    width: 2.35rem;
+    height: 2.35rem;
+    flex: 0 0 2.35rem;
+    place-items: center;
+    color: var(--navy-950);
+    background: var(--teal-100);
+    border-radius: .75rem;
+    font-size: 1.2rem;
+}
+
+.app-navbar .nav-link {
+    padding: .55rem .75rem !important;
+    color: #d7e5ee !important;
+    border-radius: .55rem;
+    font-size: .94rem;
+    font-weight: 600;
+}
+.app-navbar .nav-link:hover,
+.app-navbar .nav-link.active { color: white !important; background: rgba(255,255,255,.09); }
+.app-navbar .navbar-toggler { border-color: rgba(255,255,255,.22); }
+.app-navbar .navbar-toggler-icon { filter: brightness(0) invert(1); }
+
+.app-navbar .dropdown-menu {
+    padding: .6rem;
+    border: 1px solid var(--line);
+    border-radius: .8rem;
+    box-shadow: var(--shadow-md);
+}
+.app-navbar .dropdown-item {
+    padding: .55rem .7rem;
+    border-radius: .45rem;
+    color: var(--ink);
+    font-size: .9rem;
+}
+.app-navbar .dropdown-item:hover { color: var(--navy-950); background: var(--teal-50); }
+.model-menu { width: min(340px, 90vw); max-height: 70vh; overflow-y: auto; }
+.model-menu-all { color: var(--teal-700) !important; font-weight: 700; }
+
+.app-search { width: min(240px, 100%); }
+.app-search > i {
+    position: absolute;
+    top: 50%;
+    left: .8rem;
+    z-index: 2;
+    color: #7991a3;
+    transform: translateY(-50%);
+}
+.app-search input {
+    width: 100%;
+    height: 40px;
+    padding: .5rem .8rem .5rem 2.3rem;
+    color: var(--ink);
+    background: white;
+    border: 1px solid rgba(255,255,255,.14);
+    border-radius: 999px;
+    outline: none;
+}
+.app-search input:focus { box-shadow: 0 0 0 3px rgba(45, 212, 191, .25); }
+
+.app-nav-cta { padding: .48rem .8rem; color: var(--navy-950) !important; font-weight: 700; }
+.avatar-circle {
+    display: inline-grid;
+    width: 36px;
+    height: 36px;
+    place-items: center;
+    color: var(--navy-950);
+    background: var(--teal-100);
+    border: 2px solid rgba(255,255,255,.45);
+    border-radius: 50%;
+    font-weight: 800;
+}
+
+.app-main { flex: 1; }
+.content { min-height: 60vh; padding-top: 2rem; padding-bottom: 3rem; }
+.flash-wrap { padding-top: 1rem; }
+.flash-wrap:empty { display: none; }
+
+.card {
+    border: 1px solid var(--line);
+    border-radius: var(--radius);
+    box-shadow: var(--shadow-sm);
+}
+.card-header {
+    padding: 1rem 1.25rem;
+    color: var(--navy-950);
+    background: var(--surface);
+    border-bottom: 1px solid var(--line);
+    border-radius: var(--radius) var(--radius) 0 0 !important;
+}
+.card-header.bg-primary,
+.card-header.bg-success,
+.bg-primary {
+    color: white !important;
+    background: var(--navy-900) !important;
+}
+.bg-success { background: var(--teal-700) !important; }
+.bg-info { color: var(--navy-950) !important; background: var(--teal-100) !important; }
+.text-primary { color: var(--teal-700) !important; }
+
+.btn {
+    border-radius: .65rem;
+    font-weight: 700;
+}
+.btn-primary,
+.btn-purple {
+    color: white;
+    background: var(--teal-700);
+    border-color: var(--teal-700);
+}
+.btn-primary:hover,
+.btn-purple:hover {
+    color: white;
+    background: #0b625c;
+    border-color: #0b625c;
+}
+.btn-outline-primary {
+    color: var(--teal-700);
+    border-color: var(--teal-700);
+}
+.btn-outline-primary:hover { color: white; background: var(--teal-700); border-color: var(--teal-700); }
+.btn-info { color: var(--navy-950); background: var(--teal-100); border-color: #99e7dc; }
+.btn-info:hover { color: var(--navy-950); background: #a8efe5; border-color: #74d9cb; }
+.btn-warning { color: var(--navy-950); background: #f7df9a; border-color: #e8c75f; }
+
+.form-control,
+.form-select {
+    border-color: #cbd8e0;
+    border-radius: .65rem;
+}
+.form-control:focus,
+.form-select:focus {
+    border-color: var(--teal-600);
+    box-shadow: 0 0 0 .22rem rgba(13,148,136,.14);
+}
+
+.badge { padding: .4em .65em; border-radius: 999px; font-weight: 650; }
+.alert-info { color: #23485b; background: #eaf7f8; border-color: #bfe5e7; }
+
+.page-eyebrow {
+    margin-bottom: .7rem;
+    color: var(--teal-700);
+    font-size: .78rem;
+    font-weight: 800;
+    letter-spacing: .12em;
+    text-transform: uppercase;
+}
+.page-lead { max-width: 680px; color: var(--muted); font-size: 1.1rem; }
+
+.model-library-card {
+    display: flex;
+    height: 100%;
+    flex-direction: column;
+    padding: 1.25rem;
+    color: inherit;
+    background: white;
+    border: 1px solid var(--line);
+    border-radius: 1rem;
+    text-decoration: none;
+    transition: .2s ease;
+}
+.model-library-card:hover {
+    color: inherit;
+    border-color: #8bd8cf;
+    box-shadow: var(--shadow-md);
+    transform: translateY(-3px);
+}
+.model-card-top { display: flex; justify-content: space-between; gap: 1rem; }
+.model-library-card h3 { margin-bottom: .7rem; font-size: 1.08rem; }
+.model-library-card .arrow { color: var(--teal-700); }
+.model-library-card p { color: var(--muted); font-size: .9rem; }
+.model-meta { display: flex; flex-wrap: wrap; gap: .35rem; margin-top: auto; }
+.model-meta span { padding: .25rem .5rem; color: var(--navy-700); background: var(--canvas); border-radius: 999px; font-size: .72rem; font-weight: 700; }
+
+.app-footer {
+    padding: 4rem 0 1.5rem;
+    color: #c6d8e4;
+    background: var(--navy-950);
+}
+.footer-brand {
+    display: inline-flex;
+    align-items: center;
+    gap: .7rem;
+    color: white;
+    text-decoration: none;
+    font-weight: 750;
+}
+.footer-copy { max-width: 440px; margin-top: 1rem; color: #9fb5c5; }
+.app-footer h2 { margin-bottom: 1rem; color: white; font-size: .8rem; letter-spacing: .12em; text-transform: uppercase; }
+.app-footer a:not(.footer-brand) { display: block; margin: .45rem 0; color: #c6d8e4; text-decoration: none; }
+.app-footer a:hover { color: white; }
+.footer-note { padding: 1rem; color: #cceee9; background: rgba(13,148,136,.12); border: 1px solid rgba(94,234,212,.18); border-radius: .8rem; }
+.footer-bottom {
+    display: flex;
+    justify-content: space-between;
+    gap: 1rem;
+    margin-top: 2.75rem;
+    padding-top: 1.25rem;
+    color: #829dad;
+    border-top: 1px solid rgba(255,255,255,.1);
+    font-size: .85rem;
+}
+
+#scrollToTopBtn {
+    position: fixed;
+    right: 1.25rem;
+    bottom: 1.25rem;
+    z-index: 1010;
+    display: grid;
+    width: 44px;
+    height: 44px;
+    place-items: center;
+    color: white;
+    background: var(--navy-800);
+    border: 0;
+    border-radius: 50%;
+    box-shadow: var(--shadow-md);
+    opacity: 0;
+    pointer-events: none;
+    transform: translateY(.5rem);
+    transition: .2s ease;
+}
+#scrollToTopBtn.show { opacity: 1; pointer-events: auto; transform: none; }
+
+@media (max-width: 991.98px) {
+    .app-navbar { padding: .7rem 0; }
+    .app-navbar .navbar-collapse { padding-top: .8rem; }
+    .app-search { width: 100%; }
+    .app-nav-cta { display: inline-block; margin-top: .4rem; }
+}
+
+@media (max-width: 767.98px) {
+    .content { padding-top: 1.25rem; }
+    .footer-bottom { flex-direction: column; }
+}
+
+@media (prefers-reduced-motion: reduce) {
+    *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; }
+}
diff --git a/public/static/css/chatbot.css b/public/static/css/chatbot.css
index d5c8656..d90d752 100644
--- a/public/static/css/chatbot.css
+++ b/public/static/css/chatbot.css
@@ -3,29 +3,31 @@
  */
 
 /* Chat icon */
-.chat-icon-container {
-    position: fixed;
-    bottom: 100px;
-    right: 30px;
+.chat-icon-container {
+    position: fixed;
+    bottom: 82px;
+    right: 20px;
     z-index: 1000;
 }
 
-#chat-icon {
-    width: 60px;
-    height: 60px;
-    background-color: #3498db;
+#chat-icon {
+    width: 52px;
+    height: 52px;
+    padding: 0;
+    background-color: #0f766e;
+    border: 0;
     border-radius: 50%;
     display: flex;
     justify-content: center;
     align-items: center;
     cursor: pointer;
-    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+    box-shadow: 0 10px 30px rgba(16, 42, 67, 0.22);
     transition: transform 0.3s, background-color 0.3s;
 }
 
-#chat-icon:hover {
-    transform: scale(1.05);
-    background-color: #2980b9;
+#chat-icon:hover {
+    transform: translateY(-2px);
+    background-color: #0b625c;
 }
 
 #chat-icon i {
@@ -34,15 +36,16 @@
 }
 
 /* Chat window */
-#chat-window {
+#chat-window {
     position: fixed;
-    bottom: 170px;
-    right: 30px;
-    width: 350px;
-    height: 500px;
+    bottom: 145px;
+    right: 20px;
+    width: min(380px, calc(100vw - 32px));
+    height: min(540px, calc(100vh - 180px));
     background-color: white;
-    border-radius: 12px;
-    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
+    border: 1px solid #dce5eb;
+    border-radius: 16px;
+    box-shadow: 0 18px 50px rgba(16, 42, 67, 0.18);
     display: flex;
     flex-direction: column;
     overflow: hidden;
@@ -61,8 +64,8 @@
 }
 
 /* Chat header */
-.chat-header {
-    background: linear-gradient(to right, #3498db, #2c3e50);
+.chat-header {
+    background: linear-gradient(125deg, #102a43, #124b55);
     color: white;
     padding: 15px;
     display: flex;
@@ -70,7 +73,8 @@
     align-items: center;
 }
 
-.chat-header h3 {
+.chat-header h3 {
+    color: white;
     margin: 0;
     font-size: 18px;
     font-weight: 600;
@@ -117,15 +121,15 @@
     word-wrap: break-word;
 }
 
-.user-message .message-bubble {
-    background-color: #3498db;
+.user-message .message-bubble {
+    background-color: #0f766e;
     color: white;
     border-top-right-radius: 4px;
 }
 
-.bot-message .message-bubble {
-    background-color: #f0f2f5;
-    color: #333;
+.bot-message .message-bubble {
+    background-color: #edf3f6;
+    color: #172b3a;
     border-top-left-radius: 4px;
 }
 
@@ -178,12 +182,12 @@
     outline: none;
 }
 
-#user-message:focus {
-    border-color: #3498db;
+#user-message:focus {
+    border-color: #0d9488;
 }
 
-#send-message {
-    background-color: #3498db;
+#send-message {
+    background-color: #0f766e;
     color: white;
     border: none;
     width: 40px;
@@ -197,21 +201,19 @@
     transition: background-color 0.3s;
 }
 
-#send-message:hover {
-    background-color: #2980b9;
+#send-message:hover {
+    background-color: #0b625c;
 }
 
 /* Responsive styles */
 @media (max-width: 768px) {
-    #chat-window {
-        width: 85%;
-        height: 60%;
-        right: 20px;
-        bottom: 160px;
+    #chat-window {
+        right: 16px;
+        bottom: 140px;
     }
     
-    .chat-icon-container {
-        right: 20px;
-        bottom: 90px;
+    .chat-icon-container {
+        right: 16px;
+        bottom: 78px;
     }
-} 
\ No newline at end of file
+}
diff --git a/routes/main_routes.py b/routes/main_routes.py
index e1514b7..b07960d 100644
--- a/routes/main_routes.py
+++ b/routes/main_routes.py
@@ -3,7 +3,6 @@
 from models import db, User, Analysis, get_model_details
 from datetime import datetime
 import json
-import random
 from collections import OrderedDict
 from urllib.parse import unquote
 main = Blueprint('main', __name__)
@@ -304,11 +303,6 @@ def get_model_recommendation(analysis_goal, dependent_variable, independent_vari
         if model_name == 'Linear Regression':
             score -= 0.25
             current_app.logger.debug(f"  - Linear Regression penalty: -0.25 → {score}")
-        # Add a small random component to break ties between similar models
-        # Increase the random component to improve diversity in recommendations
-        random_component = random.uniform(0, 0.2)
-        score += random_component
-        current_app.logger.debug(f"  + Random component: +{random_component:.4f} → {score:.4f}")
         # Give a strong bonus to clustering models when the goal is clustering
         if (analysis_goal == 'explore' or analysis_goal == 'cluster') and model_name in clustering_models:
             score += 10.0  # Very significant boost to ensure clustering models win for cluster analysis
@@ -326,7 +320,10 @@ def get_model_recommendation(analysis_goal, dependent_variable, independent_vari
     # First, identify the best matching model
     if model_scores:
         # Sort models by score
-        sorted_models = sorted(model_scores.items(), key=lambda x: x[1], reverse=True)
+        sorted_models = sorted(
+            model_scores.items(),
+            key=lambda item: (-item[1], item[0]),
+        )
         # Log top model scores for debugging
         current_app.logger.debug(f"TOP MODEL SCORES:")
         for model, score in sorted_models[:5]:  # Show top 5 models
@@ -672,10 +669,32 @@ def history():
 def models_index():
     """Display every available statistical model."""
     model_database = current_app.config.get('MODEL_DATABASE', {})
+    grouped_models = []
+    included_models = set()
+    for group_name, model_names in MODEL_GROUPS.items():
+        group_models = [
+            (name, model_database[name])
+            for name in model_names
+            if name in model_database and name not in included_models
+        ]
+        if group_models:
+            grouped_models.append((group_name, sorted(group_models)))
+            included_models.update(name for name, _details in group_models)
+
+    uncategorized_models = sorted(
+        (name, details)
+        for name, details in model_database.items()
+        if name not in included_models
+    )
+    if uncategorized_models:
+        grouped_models.append(('Additional Methods', uncategorized_models))
+
     return render_template(
         'models_list.html',
         models=sorted(model_database.items()),
         group_name='All Statistical Models',
+        grouped_models=grouped_models,
+        is_all_models=True,
     )
 
 
@@ -702,7 +721,8 @@ def models_in_group(group_name):
     return render_template(
         'models_list.html',
         models=sorted_models,
-        group_name=group_name # Pass group name for the title
+        group_name=group_name,
+        is_all_models=False,
     )
 @main.route('/model/<model_name>')
 def model_details(model_name):
diff --git a/templates/analysis_form.html b/templates/analysis_form.html
index 536fb1e..cd1c7ea 100644
--- a/templates/analysis_form.html
+++ b/templates/analysis_form.html
@@ -12,30 +12,30 @@
         box-shadow: none;
     }
 
-    /* Reset body background */
-    body {
-        background-color: transparent !important;
+    body {
+        background-color: #f5f8fa !important;
         margin: 0;
         padding: 0;
         font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
     }
 
-    .form-section {
+    .form-section {
         position: relative;
         width: 100%;
         padding: 0;
-        background-color: #e8f4f8;
+        background-color: #f5f8fa;
         background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='800' height='600' viewBox='0 0 800 600' preserveAspectRatio='none'%3E%3Cdefs%3E%3ClinearGradient id='bg-gradient' x1='0%25' y1='0%25' x2='100%25' y2='100%25'%3E%3Cstop offset='0%25' stop-color='%23e8f4f8' /%3E%3Cstop offset='100%25' stop-color='%23d0e8f0' /%3E%3C/linearGradient%3E%3C/defs%3E%3Crect width='100%25' height='100%25' fill='url(%23bg-gradient)' /%3E%3C!-- Grid lines --%3E%3Cpath d='M0 50 L800 50 M0 100 L800 100 M0 150 L800 150 M0 200 L800 200 M0 250 L800 250 M0 300 L800 300 M0 350 L800 350 M0 400 L800 400 M0 450 L800 450 M0 500 L800 500 M0 550 L800 550 M50 0 L50 600 M100 0 L100 600 M150 0 L150 600 M200 0 L200 600 M250 0 L250 600 M300 0 L300 600 M350 0 L350 600 M400 0 L400 600 M450 0 L450 600 M500 0 L500 600 M550 0 L550 600 M600 0 L600 600 M650 0 L650 600 M700 0 L700 600 M750 0 L750 600' stroke='%23cae0ea' stroke-width='0.5' stroke-opacity='0.5' /%3E%3C!-- Bar chart --%3E%3Crect x='150' y='280' width='15' height='70' fill='%23267b9c' opacity='0.7' /%3E%3Crect x='170' y='250' width='15' height='100' fill='%23267b9c' opacity='0.7' /%3E%3Crect x='190' y='220' width='15' height='130' fill='%23267b9c' opacity='0.7' /%3E%3Crect x='210' y='260' width='15' height='90' fill='%23267b9c' opacity='0.7' /%3E%3Crect x='230' y='240' width='15' height='110' fill='%23267b9c' opacity='0.7' /%3E%3Crect x='250' y='270' width='15' height='80' fill='%23267b9c' opacity='0.7' /%3E%3C!-- Line chart --%3E%3Cpath d='M50 400 L100 380 L150 390 L200 350 L250 320 L300 330 L350 310 L400 300' fill='none' stroke='%23267b9c' stroke-width='2' /%3E%3Ccircle cx='50' cy='400' r='3' fill='%23267b9c' /%3E%3Ccircle cx='100' cy='380' r='3' fill='%23267b9c' /%3E%3Ccircle cx='150' cy='390' r='3' fill='%23267b9c' /%3E%3Ccircle cx='200' cy='350' r='3' fill='%23267b9c' /%3E%3Ccircle cx='250' cy='320' r='3' fill='%23267b9c' /%3E%3Ccircle cx='300' cy='330' r='3' fill='%23267b9c' /%3E%3Ccircle cx='350' cy='310' r='3' fill='%23267b9c' /%3E%3Ccircle cx='400' cy='300' r='3' fill='%23267b9c' /%3E%3C!-- Pie chart --%3E%3Cpath d='M600 180 L600 100 A80 80 0 0 1 674 142 Z' fill='%23267b9c' opacity='0.7' /%3E%3Cpath d='M600 180 L674 142 A80 80 0 0 1 652 242 Z' fill='%234a98b5' opacity='0.7' /%3E%3Cpath d='M600 180 L652 242 A80 80 0 0 1 548 242 Z' fill='%2370b3c9' opacity='0.7' /%3E%3Cpath d='M600 180 L548 242 A80 80 0 0 1 526 142 Z' fill='%2396cedd' opacity='0.7' /%3E%3Cpath d='M600 180 L526 142 A80 80 0 0 1 600 100 Z' fill='%23bee9f2' opacity='0.7' /%3E%3C!-- Hexagons with icons --%3E%3Cpath d='M100 120 L125 105 L150 120 L150 150 L125 165 L100 150 Z' fill='%23267b9c' fill-opacity='0.2' stroke='%23267b9c' stroke-width='1.5' /%3E%3Ctext x='125' y='142' text-anchor='middle' font-family='Arial' font-size='16' fill='%23267b9c'%3E%E2%86%91%3C/text%3E%3Cpath d='M620 420 L645 405 L670 420 L670 450 L645 465 L620 450 Z' fill='%23267b9c' fill-opacity='0.2' stroke='%23267b9c' stroke-width='1.5' /%3E%3Ctext x='645' y='442' text-anchor='middle' font-family='Arial' font-size='16' fill='%23267b9c'%3E%E2%9C%93%3C/text%3E%3Cpath d='M700 150 L725 135 L750 150 L750 180 L725 195 L700 180 Z' fill='%23267b9c' fill-opacity='0.2' stroke='%23267b9c' stroke-width='1.5' /%3E%3Ctext x='725' y='172' text-anchor='middle' font-family='Arial' font-size='16' fill='%23267b9c'%3E%E2%86%92%3C/text%3E%3C!-- Connecting lines --%3E%3Cpath d='M150 135 L200 135 M260 350 L300 350 M670 435 L700 435 M400 300 L450 300 L450 380' stroke='%23267b9c' stroke-width='1' stroke-dasharray='5,5' stroke-opacity='0.7' /%3E%3C!-- Data points scatter --%3E%3Ccircle cx='480' cy='150' r='3' fill='%23267b9c' /%3E%3Ccircle cx='500' cy='170' r='3' fill='%23267b9c' /%3E%3Ccircle cx='520' cy='140' r='3' fill='%23267b9c' /%3E%3Ccircle cx='490' cy='190' r='3' fill='%23267b9c' /%3E%3Ccircle cx='510' cy='160' r='3' fill='%23267b9c' /%3E%3Ccircle cx='470' cy='180' r='3' fill='%23267b9c' /%3E%3C!-- Statistical curve --%3E%3Cpath d='M450 440 C500 340, 550 340, 600 440' fill='none' stroke='%23267b9c' stroke-width='2' stroke-opacity='0.7' /%3E%3C/svg%3E");
         background-size: cover;
         background-position: center;
         background-repeat: no-repeat;
-        min-height: 100vh;
+        min-height: calc(100vh - 76px);
     }
 
-    .form-content {
-        background-color: #fff;
-        border-radius: 12px;
-        box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
+    .form-content {
+        background-color: #fff;
+        border: 1px solid #dce5eb;
+        border-radius: 20px;
+        box-shadow: 0 18px 50px rgba(16, 42, 67, 0.10);
         padding: 40px;
         margin: 40px auto;
         position: relative;
@@ -44,26 +44,26 @@
     }
 
     .form-title {
-        color: #4F46E5;
-        font-size: 2.5rem;
+        color: #0b1f33;
+        font-size: clamp(2.2rem, 5vw, 3.5rem);
         font-weight: 700;
         text-align: center;
         margin-bottom: 1rem;
     }
 
     .form-subtitle {
-        color: #6B7280;
+        color: #607486;
         text-align: center;
         font-size: 1.1rem;
         margin-bottom: 2.5rem;
     }
 
-    .form-group {
-        background: #F9FAFB;
+    .form-group {
+        background: #f8fafb;
         padding: 25px;
         border-radius: 8px;
         margin-bottom: 25px;
-        border: 1px solid #E5E7EB;
+        border: 1px solid #dce5eb;
     }
 
     .form-label {
@@ -88,8 +88,8 @@
     }
 
     .form-control:focus, .form-select:focus {
-        border-color: #6366F1;
-        box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.2);
+        border-color: #0d9488;
+        box-shadow: 0 0 0 3px rgba(13, 148, 136, 0.14);
         outline: none;
     }
 
@@ -112,9 +112,9 @@
         padding: 6px 0;
     }
 
-    .btn-primary {
-        background-color: #4F46E5;
-        border-color: #4F46E5;
+    .btn-primary {
+        background-color: #0f766e;
+        border-color: #0f766e;
         color: white;
         padding: 12px 24px;
         font-size: 1rem;
@@ -122,9 +122,9 @@
         border-radius: 6px;
     }
 
-    .btn-primary:hover {
-        background-color: #4338CA;
-        border-color: #4338CA;
+    .btn-primary:hover {
+        background-color: #0b625c;
+        border-color: #0b625c;
     }
 
     .optional-badge {
@@ -149,22 +149,23 @@
 <div class="form-section">
     <div class="container py-5">
         <div class="form-content">
-            <h2 class="form-title">Statistical Model Finder</h2>
-            <p class="form-subtitle">Answer a few simple questions about your research, and we'll help you find the most appropriate statistical model. Don't worry if you're not sure about some answers - we'll guide you through each step!</p>
+            <div class="page-eyebrow text-center">Guided model selection</div>
+            <h1 class="form-title">Describe your research design</h1>
+            <p class="form-subtitle">Answer a few questions about your goal and data. The recommendation will include a rationale and compatible alternatives—not just a model name.</p>
             
             <!-- Example buttons -->
             <div class="text-center mb-4">
-                <button type="button" id="mixed-effects-example" class="btn btn-outline-primary me-2">
-                    <i class="bi bi-lightning-fill me-1"></i>Try Mixed Effects Model Example
-                </button>
-                <button type="button" id="elastic-net-example" class="btn btn-outline-success me-2">
-                    <i class="bi bi-lightning-fill me-1"></i>Try Elastic Net Example
-                </button>
-                <button type="button" id="linear-regression-example" class="btn btn-outline-info me-2">
-                    <i class="bi bi-lightning-fill me-1"></i>Try Linear Regression Example
-                </button>
-                <button type="button" id="cluster-analysis-example" class="btn btn-outline-warning me-2">
-                    <i class="bi bi-lightning-fill me-1"></i>Try Cluster Analysis Example
+                <button type="button" id="mixed-effects-example" class="btn btn-outline-primary btn-sm me-2 mb-2">
+                    Mixed-effects example
+                </button>
+                <button type="button" id="elastic-net-example" class="btn btn-outline-primary btn-sm me-2 mb-2">
+                    Elastic net example
+                </button>
+                <button type="button" id="linear-regression-example" class="btn btn-outline-primary btn-sm me-2 mb-2">
+                    Linear regression example
+                </button>
+                <button type="button" id="cluster-analysis-example" class="btn btn-outline-primary btn-sm me-2 mb-2">
+                    Cluster analysis example
                 </button>
                 <div class="help-text mt-2">
                     <i class="bi bi-info-circle me-1"></i>Click to auto-fill the form with inputs that would recommend different models
@@ -196,8 +197,7 @@ <h2 class="form-title">Statistical Model Finder</h2>
                         <option value="cluster">Group similar data points together</option>
                         <option value="hypothesis_test">Test a specific theory or hypothesis</option>
                         <option value="non_parametric">Compare groups without assuming normal distribution</option>
-                        <option value="predict">Predict numbers or counts</option>
-                        <option value="time_series">Analyze patterns over time</option>
+                        <option value="time_series">Analyze patterns over time</option>
                     </select>
                     <div class="help-text">
                         <i class="bi bi-lightbulb me-2"></i>Think about what you want to achieve with your analysis.
@@ -615,5 +615,6 @@ <h2 class="form-title">Statistical Model Finder</h2>
         independentVarsHelpCluster.classList.add('d-none');
     }
 }
-</script>
-{% endblock %} 
\ No newline at end of file
+</script>
+{% endblock %}
+{% block container_end %}{% endblock %}
diff --git a/templates/base.html b/templates/base.html
index 37bcf6f..dd03606 100644
--- a/templates/base.html
+++ b/templates/base.html
@@ -3,558 +3,230 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta name="theme-color" content="#102a43">
     <title>{% block title %}Statistical Model Suggester{% endblock %}</title>
-    
-    <!-- Page context for AI assistant -->
-    <meta name="page-context" content="{% block page_context %}Statistical Model Suggester - {{ self.title() }}{% endblock %}">
-    
-    <!-- Bootstrap CSS -->
+    <meta name="page-context" content="{% block page_context %}Statistical Model Suggester — {{ self.title() }}{% endblock %}">
+
     <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
-    
-    <!-- Bootstrap Icons -->
     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.0/font/bootstrap-icons.css">
-    
-    <!-- Chatbot CSS -->
+    <link rel="stylesheet" href="{{ url_for('static', filename='css/app.css') }}">
     <link rel="stylesheet" href="{{ url_for('static', filename='css/chatbot.css') }}">
-    
-    <!-- Custom CSS -->
-    <style>
-        body {
-            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
-            background-color: #f8f9fa;
-            min-height: 100vh;
-            display: flex;
-            flex-direction: column;
-        }
-
-        .navbar {
-            background-color: #8b1a1d;
-            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
-            margin-bottom: 2rem;
-        }
-
-        .navbar-brand {
-            font-weight: 600;
-            color: white !important;
-        }
-
-        .nav-link {
-            color: rgba(255, 255, 255, 0.85) !important;
-        }
-
-        .nav-link:hover {
-            color: white !important;
-        }
-
-        .card {
-            border: none;
-            border-radius: 0.5rem;
-            box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
-            margin-bottom: 1.5rem;
-        }
-
-        .card-header {
-            background-color: blue;
-            color: white;
-            font-weight: 500;
-            border-bottom: none;
-            padding: 1rem 1.25rem;
-        }
-
-        .btn-primary {
-            background-color: #007bff;
-            border-color: #007bff;
-        }
-
-        .btn-primary:hover {
-            background-color: #0069d9;
-            border-color: #0062cc;
-        }
-
-        .btn-outline-primary {
-            color: #007bff;
-            border-color: #007bff;
-        }
-
-        .btn-outline-primary:hover {
-            background-color: #007bff;
-            color: white;
-        }
-
-        .badge {
-            font-weight: 500;
-        }
-
-        .bg-primary {
-            background-color: #8b1a1d!important;
-        }
-
-        .bg-success {
-            background-color: #28a745 !important;
-        }
-
-        .bg-info {
-            background-color: #17a2b8 !important;
-        }
-
-        .auth-card {
-            max-width: 450px;
-            margin: 0 auto;
-            border-radius: 10px;
-            box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
-            overflow: hidden;
-        }
-
-        .auth-card .card-header, .auth-card .card-footer {
-            border: none;
-        }
-
-        .flash-messages {
-            margin-top: 1rem;
-        }
-
-        .dropdown-menu {
-            border: none;
-            box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
-        }
-
-        .dropdown-item:active {
-            background-color: #007bff;
-        }
-
-        footer {
-            background-color: #6d2e30;
-            border-top: 1px solid #e9ecef;
-            color: white;
-            padding: 1.5rem 0;
-            margin-top: auto;
-        }
-
-        footer a {
-            color: #007bff;
-        }
-
-        footer a:hover {
-            color: #0056b3;
-            text-decoration: none;
-        }
-
-        /* Style fixes for the profile page */
-        .avatar-circle {
-            background-color: #007bff !important;
-            width: 32px;
-            height: 32px;
-            border-radius: 50%;
-            color: white !important;
-            font-weight: 600;
-            font-size: 1rem;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-        }
-
-        /* Restore original styles for the model cards */
-        .model-card {
-            transition: all 0.2s ease-in-out;
-        }
-
-        .model-card:hover {
-            transform: translateY(-5px);
-            box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
-        }
-
-        .content {
-            flex: 1;
-            min-height: 70vh; /* Ensure content area has minimum height */
-        }
-
-        .nav-link.active {
-            font-weight: 600;
-            color: #0d6efd !important;
-        }
-
-        .dropdown-item.active {
-            background-color: #0d6efd;
-        }
-
-        .back-button {
-            position: fixed;
-            bottom: 80px; /* Move up slightly to make space */
-            left: 20px;  /* Move to the left */
-            z-index: 1000;
-            background-color: #0d6efd;
-            color: white;
-            border-radius: 50%;
-            width: 50px;
-            height: 50px;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            box-shadow: 0 2px 5px rgba(0,0,0,0.2);
-            transition: all 0.3s ease;
-        }
-
-        .back-button:hover {
-            background-color: #0b5ed7;
-            color: white;
-            transform: scale(1.1);
-        }
-
-        .back-button i {
-            font-size: 1.5rem;
-        }
-
-        /* Purple theme for questionnaire service */
-        .bg-purple {
-            background-color: #6f42c1;
-        }
-        
-        .btn-purple {
-            background-color: #6f42c1;
-            color: white;
-            border-color: #6f42c1;
-        }
-        
-        .btn-purple:hover {
-            background-color: #5e35b1;
-            color: white;
-            border-color: #5e35b1;
-        }
-        
-        .btn-outline-purple {
-            color: #6f42c1;
-            border-color: #6f42c1;
-            background-color: transparent;
-        }
-        
-        .btn-outline-purple:hover {
-            color: white;
-            background-color: #6f42c1;
-            border-color: #6f42c1;
-        }
-
-        /* Scroll to Top Button - New */
-        #scrollToTopBtn {
-            display: none; /* Hidden by default */
-            position: fixed;
-            bottom: 20px;
-            right: 20px;
-            z-index: 1010; /* Ensure it's above back button */
-            border: none;
-            outline: none;
-            background-color: #007bff;
-            color: white;
-            cursor: pointer;
-            padding: 10px 15px;
-            border-radius: 50%; /* Make it round */
-            font-size: 18px;
-            width: 50px;
-            height: 50px;
-            box-shadow: 0 2px 5px rgba(0,0,0,0.2);
-            transition: opacity 0.3s ease, visibility 0.3s ease;
-            opacity: 0;
-            visibility: hidden;
-        }
-
-        #scrollToTopBtn:hover {
-            background-color: #0056b3;
-        }
-
-        #scrollToTopBtn.show {
-            display: block; /* Or flex/inline-flex if needed */
-            opacity: 1;
-            visibility: visible;
-        }
-
-        /* Nested dropdown for Explore > Models */
-        .dropdown-submenu {
-            position: relative;
-        }
-        .dropdown-submenu .dropdown-menu {
-            top: 0;
-            left: 100%;
-            margin-left: .1rem;
-            display: none;
-        }
-        .dropdown-submenu:hover > .dropdown-menu {
-            display: block;
-        }
-
-        /* Coursera-style pill-shaped search bar */
-        .navbar .input-group .form-control {
-            border: none;
-            padding: 0.5rem 1rem;
-        }
-        .navbar .input-group .btn {
-            border: none;
-            padding: 0.5rem 1rem;
-            background-color: #ffffff;
-            color: #333;
-        }
-        .navbar .input-group .form-control:focus {
-            box-shadow: none;
-        }
-        /* Make the search icon blue */
-        .navbar .input-group .btn i {
-            color: #007bff;
-        }
-    </style>
-    
-    <!-- Page Search CSS -->
     <link rel="stylesheet" href="{{ url_for('static', filename='css/page_search.css') }}">
-    
     {% block extra_css %}{% endblock %}
 </head>
 
 <body>
-    <nav class="navbar navbar-expand-lg navbar-dark bg-primary">
-        <div class="container">
-            <a class="navbar-brand fw-bold" href="{{ url_for('main.home') }}">StatSnapp</a>
-            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
+    <a class="skip-link" href="#main-content">Skip to main content</a>
+
+    <nav class="navbar navbar-expand-lg app-navbar sticky-top" aria-label="Primary navigation">
+        <div class="container-xl">
+            <a class="navbar-brand app-brand" href="{{ url_for('main.home') }}">
+                <span class="brand-mark" aria-hidden="true"><i class="bi bi-bezier2"></i></span>
+                <span>
+                    <strong>Statistical Model</strong>
+                    <small>Suggester</small>
+                </span>
+            </a>
+
+            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav"
+                    aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
                 <span class="navbar-toggler-icon"></span>
             </button>
+
             <div class="collapse navbar-collapse" id="navbarNav">
-                <ul class="navbar-nav me-auto">
+                <ul class="navbar-nav ms-lg-4 me-auto align-items-lg-center">
                     <li class="nav-item">
-                        <a class="nav-link {% if request.path == '/' %}active{% endif %}" href="{{ url_for('main.home') }}">
-                            <i class="bi bi-house-door me-1"></i>Home
-                        </a>
+                        <a class="nav-link {% if request.endpoint == 'main.analysis_form' %}active{% endif %}"
+                           href="{{ url_for('main.analysis_form') }}">Find a model</a>
                     </li>
                     <li class="nav-item dropdown">
-                        <a class="nav-link dropdown-toggle" href="#" id="exploreDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
-                            Explore
+                        <a class="nav-link dropdown-toggle {% if request.endpoint in ['main.models_index', 'main.models_in_group', 'main.model_details'] %}active{% endif %}"
+                           href="{{ url_for('main.models_index') }}" data-bs-toggle="dropdown" aria-expanded="false">
+                            Model library
                         </a>
-                        <ul class="dropdown-menu" aria-labelledby="exploreDropdown">
-                            <li class="dropdown-submenu">
-                                <a class="dropdown-item dropdown-toggle" href="#" data-bs-toggle="dropdown" aria-expanded="false">Models</a>
-                                <ul class="dropdown-menu">
-                                    {% for group_name in model_groups %}
-                                    <li><a class="dropdown-item" href="{{ url_for('main.models_in_group', group_name=group_name) }}">{{ group_name }}</a></li>
-                                    {% endfor %}
-                                </ul>
-                            </li>
-                            <li><hr class="dropdown-divider"></li>
-                            <li><a class="dropdown-item" href="{{ url_for('main.history') }}">History</a></li>
-                            <li><a class="dropdown-item" href="{{ url_for('expert.experts_list') }}">Experts</a></li>
-                            <li><a class="dropdown-item" href="{{ url_for('questionnaire.index') }}">Questionnaire Designer</a></li>
-                        </ul>
+                        <div class="dropdown-menu model-menu">
+                            <a class="dropdown-item model-menu-all" href="{{ url_for('main.models_index') }}">
+                                <i class="bi bi-grid me-2"></i>View all models
+                            </a>
+                            <div class="dropdown-divider"></div>
+                            {% for group_name in model_groups %}
+                            <a class="dropdown-item" href="{{ url_for('main.models_in_group', group_name=group_name) }}">
+                                {{ group_name }}
+                            </a>
+                            {% endfor %}
+                        </div>
                     </li>
-                </ul>
-                <form class="d-flex flex-fill mx-3 position-relative" action="/search" method="get">
-                    <div class="input-group flex-fill">
-                        <input id="global-search-input" type="search" name="q" class="form-control rounded-start-pill" placeholder="What do you want to learn?" aria-label="Search" data-bs-toggle="dropdown" aria-expanded="false" autocomplete="off">
-                        <button class="btn btn-light rounded-end-pill" type="submit"><i class="bi bi-search"></i></button>
-                    </div>
-                    <ul id="global-search-suggestions" class="dropdown-menu w-100 mt-0"></ul>
-                </form>
-                <ul class="navbar-nav align-items-center">
-                    <li class="nav-item dropdown">
-                        <a class="nav-link" href="#" id="languageDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
-                            <i class="bi bi-globe me-1"></i>English
-                        </a>
-                        <ul class="dropdown-menu dropdown-menu-end" aria-labelledby="languageDropdown">
-                            <li><a class="dropdown-item" href="#">English</a></li>
-                            <li><a class="dropdown-item" href="#">Spanish</a></li>
-                        </ul>
+                    <li class="nav-item">
+                        <a class="nav-link {% if request.endpoint == 'questionnaire.index' %}active{% endif %}"
+                           href="{{ url_for('questionnaire.index') }}">Questionnaires</a>
                     </li>
                     <li class="nav-item">
-                        <a class="nav-link" href="#"><i class="bi bi-bell"></i></a>
+                        <a class="nav-link {% if request.endpoint == 'expert.experts_list' %}active{% endif %}"
+                           href="{{ url_for('expert.experts_list') }}">Expert support</a>
                     </li>
+                </ul>
+
+                <form class="app-search position-relative my-3 my-lg-0 me-lg-3" action="{{ url_for('main.search') }}" method="get" role="search">
+                    <i class="bi bi-search" aria-hidden="true"></i>
+                    <input id="global-search-input" type="search" name="q" placeholder="Search models"
+                           aria-label="Search statistical models" autocomplete="off">
+                    <ul id="global-search-suggestions" class="dropdown-menu w-100"></ul>
+                </form>
+
+                <ul class="navbar-nav align-items-lg-center">
+                    {% if current_user.is_authenticated %}
                     <li class="nav-item dropdown">
-                        {% if current_user.is_authenticated %}
-                        <a class="nav-link d-flex align-items-center p-0" href="#" id="userDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
-                            <div class="avatar-circle">{{ current_user.username[0]|upper }}</div>
-                            <i class="bi bi-caret-down-fill ms-1 text-white"></i>
+                        <a class="nav-link user-menu-trigger" href="#" id="userDropdown" role="button"
+                           data-bs-toggle="dropdown" aria-expanded="false">
+                            <span class="avatar-circle">{{ current_user.username[0]|upper }}</span>
+                            <span class="d-lg-none ms-2">{{ current_user.username }}</span>
                         </a>
                         <ul class="dropdown-menu dropdown-menu-end" aria-labelledby="userDropdown">
                             <li><a class="dropdown-item" href="{{ url_for('main.profile') }}"><i class="bi bi-person me-2"></i>Profile</a></li>
+                            <li><a class="dropdown-item" href="{{ url_for('main.history') }}"><i class="bi bi-clock-history me-2"></i>Analysis history</a></li>
                             {% if current_user.is_expert %}
-                            <li><a class="dropdown-item" href="{{ url_for('expert.my_consultations') }}"><i class="bi bi-chat-text me-2"></i>My Consultations</a></li>
+                            <li><a class="dropdown-item" href="{{ url_for('expert.my_consultations') }}"><i class="bi bi-chat-text me-2"></i>My consultations</a></li>
                             {% endif %}
                             {% if current_user.is_admin %}
-                            <li><a class="dropdown-item" href="{{ url_for('admin.dashboard') }}"><i class="bi bi-speedometer2 me-2"></i>Admin Dashboard</a></li>
-                            <li><a class="dropdown-item" href="{{ url_for('admin.expert_applications') }}"><i class="bi bi-person-badge me-2"></i>Expert Applications</a></li>
-                            <li><a class="dropdown-item" href="{{ url_for('admin.manage_experts') }}"><i class="bi bi-people-fill me-2"></i>Manage Experts</a></li>
-                            <li><a class="dropdown-item" href="{{ url_for('admin.email_templates') }}"><i class="bi bi-envelope me-2"></i>Email Templates</a></li>
-                            <li><a class="dropdown-item" href="{{ url_for('admin.users_list') }}"><i class="bi bi-person-lines-fill me-2"></i>Manage Users</a></li>
-                            <li><a class="dropdown-item" href="{{ url_for('admin.ai_settings') }}"><i class="bi bi-robot me-2"></i>AI Integration</a></li>
+                            <li><hr class="dropdown-divider"></li>
+                            <li><h6 class="dropdown-header">Administration</h6></li>
+                            <li><a class="dropdown-item" href="{{ url_for('admin.dashboard') }}"><i class="bi bi-speedometer2 me-2"></i>Dashboard</a></li>
+                            <li><a class="dropdown-item" href="{{ url_for('admin.expert_applications') }}"><i class="bi bi-person-badge me-2"></i>Expert applications</a></li>
+                            <li><a class="dropdown-item" href="{{ url_for('admin.users_list') }}"><i class="bi bi-people me-2"></i>Users</a></li>
+                            <li><a class="dropdown-item" href="{{ url_for('admin.ai_settings') }}"><i class="bi bi-robot me-2"></i>AI integration</a></li>
                             {% endif %}
                             <li><hr class="dropdown-divider"></li>
-                            <li><a class="dropdown-item" href="{{ url_for('auth.logout') }}"><i class="bi bi-box-arrow-right me-2"></i>Logout</a></li>
+                            <li><a class="dropdown-item" href="{{ url_for('auth.logout') }}"><i class="bi bi-box-arrow-right me-2"></i>Log out</a></li>
                         </ul>
-                        {% else %}
-                        <a class="nav-link" href="{{ url_for('auth.login') }}">Login</a>
-                        {% endif %}
                     </li>
+                    {% else %}
+                    <li class="nav-item"><a class="nav-link" href="{{ url_for('auth.login') }}">Log in</a></li>
+                    <li class="nav-item ms-lg-2"><a class="btn btn-sm btn-light app-nav-cta" href="{{ url_for('auth.register') }}">Create account</a></li>
+                    {% endif %}
                 </ul>
             </div>
         </div>
     </nav>
 
-    {% block container_start %}
-    <div class="container content">
-    {% endblock %}
-        <!-- Flash messages -->
-        {% with messages = get_flashed_messages(with_categories=true) %}
-            {% if messages %}
-                <div class="flash-messages">
+    <main id="main-content" class="app-main">
+        <div class="container-xl flash-wrap">
+            {% with messages = get_flashed_messages(with_categories=true) %}
+                {% if messages %}
                     {% for category, message in messages %}
-                        <div class="alert alert-{{ category }}">{{ message }}</div>
+                    <div class="alert alert-{{ category }} alert-dismissible fade show" role="alert">
+                        {{ message }}
+                        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
+                    </div>
                     {% endfor %}
-                </div>
-            {% endif %}
-        {% endwith %}
-
-        {% block content %}{% endblock %}
-    {% block container_end %}
-    </div>
-    {% endblock %}
+                {% endif %}
+            {% endwith %}
+        </div>
 
-    <footer class="mt-5 py-5" style="background-color: #6d2e30;">
-        <div class="container">
-            <div class="row text-white">
-                <div class="col-12 col-md">
-                    <a class="navbar-brand text-white fw-bold" href="{{ url_for('main.home') }}">StatSnapp</a>
-                    <small class="d-block mb-3 text-white-50">Your intelligent guide to statistical modeling</small>
+        {% block container_start %}<div class="container-xl content">{% endblock %}
+            {% block content %}{% endblock %}
+        {% block container_end %}</div>{% endblock %}
+    </main>
+
+    <footer class="app-footer">
+        <div class="container-xl">
+            <div class="row g-4 align-items-start">
+                <div class="col-lg-5">
+                    <a class="footer-brand" href="{{ url_for('main.home') }}">
+                        <span class="brand-mark" aria-hidden="true"><i class="bi bi-bezier2"></i></span>
+                        Statistical Model Suggester
+                    </a>
+                    <p class="footer-copy">Evidence-aware guidance for choosing, understanding, and communicating statistical models.</p>
                 </div>
-                <div class="col-6 col-md">
-                    <h5>Explore</h5>
-                    <ul class="list-unstyled text-small">
-                        <li><a class="link-light" href="{{ url_for('main.models_index') }}">Models</a></li>
-                        <li><a class="link-light" href="{{ url_for('main.history') }}">History</a></li>
-                        <li><a class="link-light" href="{{ url_for('expert.experts_list') }}">Experts</a></li>
-                        <li><a class="link-light" href="{{ url_for('questionnaire.index') }}">Questionnaire Designer</a></li>
-                    </ul>
+                <div class="col-6 col-lg-2">
+                    <h2>Explore</h2>
+                    <a href="{{ url_for('main.analysis_form') }}">Find a model</a>
+                    <a href="{{ url_for('main.models_index') }}">Model library</a>
+                    <a href="{{ url_for('expert.experts_list') }}">Experts</a>
                 </div>
-                <div class="col-6 col-md">
-                    <h5>Resources</h5>
-                    <ul class="list-unstyled text-small">
-                        <li><a class="link-light" href="#">Documentation</a></li>
-                        <li><a class="link-light" href="#">Tutorials</a></li>
-                        <li><a class="link-light" href="#">Blog</a></li>
-                    </ul>
+                <div class="col-6 col-lg-2">
+                    <h2>Tools</h2>
+                    <a href="{{ url_for('questionnaire.index') }}">Questionnaires</a>
+                    <a href="{{ url_for('main.history') }}">Analysis history</a>
+                    <a href="{{ url_for('main.contact') }}">Contact</a>
                 </div>
-                <div class="col-6 col-md">
-                    <h5>Connect</h5>
-                    <ul class="list-unstyled text-small">
-                        <li><a class="link-light" href="mailto:support@statisticalmodelsuggester.com"><i class="bi bi-envelope me-2"></i>Email</a></li>
-                        <li><a class="link-light" href="https://twitter.com/StatModelSuggest" target="_blank"><i class="bi bi-twitter me-2"></i>Twitter</a></li>
-                        <li><a class="link-light" href="https://www.linkedin.com/company/statistical-model-suggester" target="_blank"><i class="bi bi-linkedin me-2"></i>LinkedIn</a></li>
-                        <li><a class="link-light" href="https://github.com/codoom1/statistical-model-suggester" target="_blank"><i class="bi bi-github me-2"></i>GitHub</a></li>
-                    </ul>
-                </div>
-                <div class="col-6 col-md text-md-end">
-                    <p class="mb-0 text-white-50">© 2025 Statistical Model Suggester</p>
+                <div class="col-lg-3">
+                    <p class="footer-note"><i class="bi bi-shield-check me-2"></i>Recommendations support—not replace—statistical judgment.</p>
                 </div>
             </div>
+            <div class="footer-bottom">
+                <span>© 2026 Statistical Model Suggester</span>
+                <a href="https://github.com/codoom1/statistical_model_suggester" target="_blank" rel="noopener">
+                    <i class="bi bi-github me-1"></i>Source on GitHub
+                </a>
+            </div>
         </div>
     </footer>
 
-    <!-- Chatbot UI -->
     <div class="chat-icon-container">
-        <div id="chat-icon">
+        <button id="chat-icon" type="button" aria-label="Open statistical assistant">
             <i class="bi bi-chat-dots-fill"></i>
-        </div>
+        </button>
     </div>
-    
-    <div id="chat-window">
+    <div id="chat-window" aria-label="Statistical assistant">
         <div class="chat-header">
-            <h3><i class="bi bi-robot me-2"></i>AI Assistant</h3>
-            <button id="close-chat"><i class="bi bi-x-lg"></i></button>
+            <h3><i class="bi bi-robot me-2"></i>Statistical assistant</h3>
+            <button id="close-chat" type="button" aria-label="Close assistant"><i class="bi bi-x-lg"></i></button>
         </div>
         <div id="chat-messages"></div>
         <div class="chat-input">
-            <input type="text" id="user-message" placeholder="Ask me anything...">
-            <button id="send-message"><i class="bi bi-send-fill"></i></button>
+            <input type="text" id="user-message" placeholder="Ask about a model…" aria-label="Message">
+            <button id="send-message" type="button" aria-label="Send"><i class="bi bi-send-fill"></i></button>
         </div>
     </div>
 
-    <!-- Bootstrap Bundle with Popper -->
-    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
-    
-    <!-- Custom JavaScript -->
-    <script>
-        // Initialize tooltips
-        var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'))
-        var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
-            return new bootstrap.Tooltip(tooltipTriggerEl)
-        })
-    </script>
-    {% block scripts %}{% endblock %}
-
-    <!-- Chatbot JS -->
-    <script src="{{ url_for('static', filename='js/chatbot.js') }}"></script>
-
-    <!-- Back Button -->
-    <a href="javascript:history.back()" class="back-button" title="Go back">
-        <i class="bi bi-arrow-left"></i>
-    </a>
-
-    <!-- Scroll to Top Button -->
-    <button id="scrollToTopBtn" title="Go to top">
+    <button id="scrollToTopBtn" type="button" title="Back to top" aria-label="Back to top">
         <i class="bi bi-arrow-up"></i>
     </button>
 
+    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
+    <script src="{{ url_for('static', filename='js/chatbot.js') }}"></script>
     <script>
-        // Scroll to Top Button Logic
-        var scrollToTopBtn = document.getElementById("scrollToTopBtn");
-
-        // When the user scrolls down 100px from the top of the document, show the button
-        window.onscroll = function() {scrollFunction()};
+    document.addEventListener('DOMContentLoaded', function () {
+        document.querySelectorAll('[data-bs-toggle="tooltip"]').forEach(function (element) {
+            new bootstrap.Tooltip(element);
+        });
 
-        function scrollFunction() {
-            if (document.body.scrollTop > 100 || document.documentElement.scrollTop > 100) {
-                // Add the .show class if not already present
-                if (!scrollToTopBtn.classList.contains('show')) {
-                    scrollToTopBtn.classList.add('show');
+        const input = document.getElementById('global-search-input');
+        const suggestionsBox = document.getElementById('global-search-suggestions');
+        if (input && suggestionsBox) {
+            input.addEventListener('input', async function () {
+                const query = this.value.trim();
+                if (query.length < 2) {
+                    suggestionsBox.classList.remove('show');
+                    return;
+                }
+                try {
+                    const response = await fetch(`/api/search?q=${encodeURIComponent(query)}`);
+                    const suggestions = await response.json();
+                    suggestionsBox.innerHTML = suggestions.map(function (suggestion) {
+                        return `<li><a class="dropdown-item" href="${suggestion.url}">${suggestion.name}</a></li>`;
+                    }).join('');
+                    suggestionsBox.classList.toggle('show', suggestions.length > 0);
+                } catch (error) {
+                    suggestionsBox.classList.remove('show');
+                }
+            });
+            document.addEventListener('click', function (event) {
+                if (!input.contains(event.target) && !suggestionsBox.contains(event.target)) {
+                    suggestionsBox.classList.remove('show');
                 }
-            } else {
-                // Remove the .show class if present
-                 if (scrollToTopBtn.classList.contains('show')) {
-                    scrollToTopBtn.classList.remove('show');
-                 }
-            }
+            });
         }
 
-        // When the user clicks on the button, scroll to the top of the document smoothly
-        scrollToTopBtn.addEventListener('click', function(){
-            window.scrollTo({top: 0, behavior: 'smooth'});
+        const scrollButton = document.getElementById('scrollToTopBtn');
+        window.addEventListener('scroll', function () {
+            scrollButton.classList.toggle('show', window.scrollY > 320);
         });
-    </script>
-
-    <!-- Search autocomplete script -->
-    <script>
-    document.addEventListener('DOMContentLoaded', function() {
-        const input = document.getElementById('global-search-input');
-        const suggBox = document.getElementById('global-search-suggestions');
-        input.addEventListener('input', async function() {
-            const q = this.value.trim();
-            if (q.length < 2) { suggBox.classList.remove('show'); return; }
-            try {
-                const res = await fetch(`/api/search?q=${encodeURIComponent(q)}`);
-                const suggestions = await res.json();
-                let html = '';
-                suggestions.forEach(s => {
-                    html += `<li><a class="dropdown-item" href="${s.url}">${s.name}</a></li>`;
-                });
-                suggBox.innerHTML = html;
-                if (suggestions.length) suggBox.classList.add('show'); else suggBox.classList.remove('show');
-            } catch (e) { console.error(e); }
-        });
-        document.addEventListener('click', function(e) {
-            if (!input.contains(e.target) && !suggBox.contains(e.target)) {
-                suggBox.classList.remove('show');
-            }
-        });
-        input.addEventListener('keydown', function(e) {
-            if (e.key === 'Enter') {
-                if (suggBox.classList.contains('show')) {
-                    const first = suggBox.querySelector('a.dropdown-item');
-                    if (first) { e.preventDefault(); window.location = first.href; }
-                }
-            }
+        scrollButton.addEventListener('click', function () {
+            window.scrollTo({ top: 0, behavior: 'smooth' });
         });
     });
     </script>
+    {% block scripts %}{% endblock %}
 </body>
 </html>
diff --git a/templates/error.html b/templates/error.html
index f04581d..e6f9b6f 100644
--- a/templates/error.html
+++ b/templates/error.html
@@ -1,108 +1,24 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Error</title>
-    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
-    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.0/font/bootstrap-icons.css">
-    <link rel="stylesheet" href="{{ url_for('static', filename='css/page_search.css') }}">
-    <style>
-        .error-container { margin-top: 100px; }
-        /* Basic nav styling for search bar */
-        .search-nav {
-            background-color: #8b1a1d;
-            padding: 10px 0;
-            margin-bottom: 20px;
-        }
-        .search-nav .container {
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-        }
-        .search-nav a {
-            color: white;
-            text-decoration: none;
-            font-weight: bold;
-        }
-        .search-nav a:hover {
-            text-decoration: underline;
-        }
-        #page-search-form {
-            display: flex;
-            align-items: center;
-        }
-        #page-search-input {
-            max-width: 200px;
-        }
-    </style>
-</head>
-<body>
-    <!-- Simple navigation/search bar -->
-    <div class="search-nav">
-        <div class="container">
-            <a href="{{ url_for('main.home') }}">
-                <i class="bi bi-house-door me-1"></i>Return to Home
-            </a>
-            
-            <!-- Page Search Form -->
-            <form id="page-search-form" class="d-flex align-items-center" onsubmit="return pageSearch();">
-                <input id="page-search-input" class="form-control form-control-sm me-2" type="search" placeholder="Search page..." aria-label="Search this page">
-                <div class="dropdown">
-                    <button class="btn btn-sm btn-outline-light" type="button" id="pageSearchDropdown" data-bs-toggle="dropdown" aria-expanded="false" title="Search Options & Controls">
-                        <i class="bi bi-search"></i>
-                    </button>
-                    <ul class="dropdown-menu dropdown-menu-end p-2 shadow" aria-labelledby="pageSearchDropdown" style="min-width: 280px;">
-                        <li class="mb-2">
-                            <button class="btn btn-sm btn-primary w-100" type="submit">Search Now</button>
-                        </li>
-                        <li><hr class="dropdown-divider"></li>
-                        <li class="d-flex justify-content-around align-items-center mb-2">
-                            <div class="form-check form-switch">
-                                <input class="form-check-input" type="checkbox" role="switch" id="case-sensitive-check" title="Case sensitive">
-                                <label class="form-check-label small" for="case-sensitive-check">Case Sensitive (Aa)</label>
-                            </div>
-                            <div class="form-check form-switch">
-                                <input class="form-check-input" type="checkbox" role="switch" id="regex-check" title="Use regex">
-                                <label class="form-check-label small" for="regex-check">Use Regex (.*)</label>
-                            </div>
-                        </li>
-                        <li><hr class="dropdown-divider"></li>
-                        <li class="d-flex justify-content-between align-items-center">
-                            <span class="small me-2">Found: <span id="match-count" class="badge bg-secondary">0</span></span>
-                            <div>
-                                <button id="prev-match" type="button" class="btn btn-sm btn-outline-secondary me-1" title="Previous match"><i class="bi bi-chevron-up"></i></button>
-                                <button id="next-match" type="button" class="btn btn-sm btn-outline-secondary" title="Next match"><i class="bi bi-chevron-down"></i></button>
-                            </div>
-                        </li>
-                    </ul>
-                </div>
-            </form>
-        </div>
-    </div>
-
-    <div class="container error-container">
-        <div class="row justify-content-center">
-            <div class="col-md-8">
-                <div class="card">
-                    <div class="card-header bg-danger text-white">
-                        <h4 class="mb-0">Error</h4>
-                    </div>
-                    <div class="card-body">
-                        <div class="alert alert-danger">
-                            <h5>An error occurred:</h5>
-                            <p>{{ error }}</p>
-                        </div>
-                        <div class="text-center mt-4">
-                            <a href="/" class="btn btn-primary">Return to Home</a>
-                        </div>
-                    </div>
-                </div>
-            </div>
-        </div>
-    </div>
-
-    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
-    <script src="{{ url_for('static', filename='js/page_search.js') }}"></script>
-</body>
-</html> 
\ No newline at end of file
+{% extends "base.html" %}
+
+{% block title %}Something went wrong — Statistical Model Suggester{% endblock %}
+
+{% block extra_css %}
+<style>
+.error-state { max-width: 720px; margin: 4rem auto; padding: clamp(2rem, 6vw, 4rem); text-align: center; background: white; border: 1px solid var(--line); border-radius: 1.5rem; box-shadow: var(--shadow-md); }
+.error-icon { display: grid; width: 4rem; height: 4rem; margin: 0 auto 1.3rem; place-items: center; color: #9a5b16; background: #fff5d8; border-radius: 1.1rem; font-size: 1.7rem; }
+.error-state p { max-width: 560px; margin: 0 auto 1.6rem; color: var(--muted); }
+</style>
+{% endblock %}
+
+{% block content %}
+<section class="error-state" role="alert">
+    <div class="error-icon"><i class="bi bi-exclamation-triangle"></i></div>
+    <div class="page-eyebrow">An error occurred</div>
+    <h1>We could not complete that request.</h1>
+    <p>{{ error }}</p>
+    <div class="d-flex flex-wrap justify-content-center gap-2">
+        <a href="{{ url_for('main.home') }}" class="btn btn-primary">Return home</a>
+        <a href="{{ url_for('main.models_index') }}" class="btn btn-outline-primary">Browse model library</a>
+    </div>
+</section>
+{% endblock %}
diff --git a/templates/history.html b/templates/history.html
index 3a7f43b..d56de07 100644
--- a/templates/history.html
+++ b/templates/history.html
@@ -56,11 +56,11 @@ <h5 class="mb-1">{{ entry.research_question }}</h5>
                     {% endif %}
                     
                     <div class="text-center mt-4">
-                        <a href="{{ url_for('main.index') }}" class="btn btn-primary">Start New Analysis</a>
+                        <a href="{{ url_for('main.analysis_form') }}" class="btn btn-primary">Start New Analysis</a>
                     </div>
                 </div>
             </div>
         </div>
     </div>
 </div>
-{% endblock %} 
\ No newline at end of file
+{% endblock %}
diff --git a/templates/home.html b/templates/home.html
index 1dd8176..9fbf10d 100644
--- a/templates/home.html
+++ b/templates/home.html
@@ -1,320 +1,197 @@
-{% extends "base.html" %}
-
-{% block title %}Statistical Model Suggester{% endblock %}
-
-{% block container_start %}{% endblock %}
-
-{% block extra_css %}
-<style>
-/* Reset navbar margin for homepage */
-.navbar {
-    margin-bottom: 0 !important;
-    background-color: #8b1a1d !important; /* Dark red color similar to the reference image */
-    box-shadow: none;
-    border-bottom: none;
-}
-
-/* Reset body background */
-body {
-    background-color: transparent !important;
-    margin: 0;
-    padding: 0;
-    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
-}
-
-.hero {
-    position: relative;
-    width: 100%;
-    min-height: 400px; /* Adjusted height to match reference image */
-    display: flex;
-    align-items: center;
-    justify-content: flex-start; /* Left align content similar to reference */
-    margin: 0;
-    padding: 0;
-    background-color: #1a1a1a;
-    overflow: hidden;
-}
-
-.hero-background {
-    position: absolute;
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    margin: 0;
-    padding: 0;
-    background-image: url("{{ url_for('static', filename='images/stats-background.png') }}"), linear-gradient(to bottom, #1a1a1a, #333);
-    background-size: cover;
-    background-position: center;
-    background-repeat: no-repeat;
-    z-index: 1;
-}
-
-.container-fluid {
-    padding: 0;
-    margin: 0;
-    width: 100%;
-}
-
-.hero-overlay {
-    position: absolute;
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    background: rgba(0, 0, 0, 0.7); /* Darkened overlay to match reference image */
-    z-index: 2;
-}
-
-.hero-content {
-    position: relative;
-    z-index: 3;
-    color: white;
-    text-align: left; /* Left aligned like reference image */
-    padding: 2rem 3rem; /* Increased left padding to match reference */
-    max-width: 1200px;
-    width: 100%;
-}
-
-.hero h1 {
-    color: white !important;
-    font-size: 4rem; /* Slightly adjusted font size */
-    font-weight: 300;
-    margin-bottom: 1rem;
-    line-height: 1.2;
-    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
-}
-
-.hero p {
-    color: white !important;
-    font-size: 1.5rem;
-    font-weight: 300;
-    margin-bottom: 2rem;
-    opacity: 0.9;
-    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);
-    max-width: 80%; /* Constrain text width */
-}
-
-.hero .btn {
-    border-radius: 2px; /* Squared buttons more like reference */
-    padding: 0.5rem 1.5rem;
-    text-transform: uppercase;
-    font-weight: 500;
-    font-size: 0.9rem;
-    letter-spacing: 0.5px;
-}
-
-.hero .btn-light {
-    background-color: #ffffff;
-    border-color: #ffffff;
-    color: #333;
-}
-
-.hero .btn-outline-light {
-    border-color: #ffffff;
-    color: #ffffff;
-}
-
-.consultation-section {
-    padding: 5rem 0;
-    background-color: #f8f9fa;
-}
-
-.consultation-card {
-    background: white;
-    border-radius: 0.5rem;
-    box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
-    padding: 2rem;
-    height: 100%;
-    transition: all 0.2s ease-in-out;
-    will-change: transform;
-}
-
-.consultation-card:hover {
-    transform: translateY(-5px);
-    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
-}
-
-.consultation-icon {
-    font-size: 2.5rem;
-    color: #007bff;
-    margin-bottom: 1.5rem;
-}
-
-.consultation-title {
-    font-size: 1.5rem;
-    font-weight: 500;
-    margin-bottom: 1rem;
-    color: #212529;
-}
-
-.consultation-description {
-    color: #6c757d;
-    line-height: 1.6;
-    margin-bottom: 1.5rem;
-}
-.stats-section {
-    padding: 4rem 0;
-    background-color: rgba(255, 255, 255, 0.17);
-    color: #8b1a1d;
-}
-
-.stat-item {
-    text-align: center;
-    padding: 2rem;
-}
-
-.stat-number {
-    font-size: 3rem;
-    font-weight: 600;
-    color: #007bff;
-    margin-bottom: 0.5rem;
-}
-
-.stat-label {
-    font-size: 1.1rem;
-    color: #6c757d;
-}
-
-/* Adjust hero section styles for smaller screens */
-@media (max-width: 768px) {
-    .hero {
-        min-height: 300px;
-    }
-    
-    .hero h1 {
-        font-size: 3rem;
-    }
-    
-    .hero p {
-        font-size: 1.2rem;
-    }
-}
-</style>
-{% endblock %}
-
-{% block content %}
-<!-- Full width hero section -->
-<div class="container-fluid px-0">
-    <section class="hero" id="hero-section">
-        <div class="hero-background"></div>
-        <div class="hero-overlay"></div>
-        <div class="container">
-            <div class="hero-content">
-                <h1>Statistical Model Suggester</h1>
-                <p class="lead">Providing expert statistical guidance and model recommendations for your research needs</p>
-                <div class="d-flex gap-3">
-                    <a href="{{ url_for('main.analysis_form') }}" class="btn btn-light btn-lg">
-                        <i class="bi bi-graph-up me-2"></i>Start Your Analysis
-                    </a>
+{% extends "base.html" %}
+
+{% block title %}Statistical Model Suggester — Choose a model with confidence{% endblock %}
+{% block page_context %}Choose an appropriate statistical model based on research goal, outcome type, predictors, sample size, distribution, missingness, and data structure.{% endblock %}
+{% block container_start %}{% endblock %}
+
+{% block extra_css %}
+<style>
+.home-hero {
+    position: relative;
+    overflow: hidden;
+    padding: clamp(4.5rem, 9vw, 7.5rem) 0;
+    color: white;
+    background:
+        radial-gradient(circle at 82% 22%, rgba(45,212,191,.18), transparent 24rem),
+        linear-gradient(125deg, #0b1f33 0%, #102a43 58%, #124b55 100%);
+}
+.home-hero::after {
+    position: absolute;
+    right: -5rem;
+    bottom: -13rem;
+    width: 38rem;
+    height: 38rem;
+    content: "";
+    border: 1px solid rgba(255,255,255,.12);
+    border-radius: 50%;
+    box-shadow: 0 0 0 4rem rgba(255,255,255,.025), 0 0 0 8rem rgba(255,255,255,.018);
+}
+.hero-grid { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(320px, .85fr); gap: clamp(2.5rem, 7vw, 6rem); align-items: center; }
+.hero-kicker { display: inline-flex; gap: .5rem; align-items: center; margin-bottom: 1.25rem; color: #9ce9df; font-size: .78rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
+.home-hero h1 { max-width: 760px; margin-bottom: 1.4rem; color: white; font-size: clamp(2.7rem, 6vw, 5rem); line-height: 1.02; letter-spacing: -.055em; }
+.home-hero .lead { max-width: 660px; margin-bottom: 2rem; color: #c6d8e4; font-size: clamp(1.05rem, 2vw, 1.25rem); }
+.hero-actions { display: flex; flex-wrap: wrap; gap: .8rem; }
+.hero-actions .btn { padding: .8rem 1.15rem; }
+.hero-proof { display: flex; flex-wrap: wrap; gap: 1.25rem; margin-top: 2rem; color: #b8cbd8; font-size: .88rem; }
+.hero-proof i { color: #5eead4; }
+.method-card { padding: 1.4rem; color: #d8e7ef; background: rgba(255,255,255,.075); border: 1px solid rgba(255,255,255,.14); border-radius: 1.35rem; backdrop-filter: blur(12px); }
+.method-card h2 { margin-bottom: 1.2rem; color: white; font-size: .9rem; letter-spacing: .1em; text-transform: uppercase; }
+.method-step { display: grid; grid-template-columns: 2.2rem 1fr; gap: .8rem; padding: .9rem 0; border-top: 1px solid rgba(255,255,255,.1); }
+.method-step:first-of-type { border-top: 0; }
+.method-step span { display: grid; width: 2rem; height: 2rem; place-items: center; color: #0b1f33; background: #99f6e4; border-radius: .55rem; font-size: .8rem; font-weight: 850; }
+.method-step strong { display: block; color: white; }
+.method-step small { color: #a9c0ce; }
+.home-section { padding: clamp(4rem, 7vw, 6rem) 0; }
+.section-heading { display: flex; justify-content: space-between; gap: 2rem; align-items: end; margin-bottom: 2.25rem; }
+.section-heading h2 { max-width: 620px; margin: 0; font-size: clamp(2rem, 4vw, 3rem); }
+.section-heading p { max-width: 520px; margin: 0; color: var(--muted); }
+.journey-card { height: 100%; padding: 1.5rem; background: white; border: 1px solid var(--line); border-radius: 1rem; transition: transform .2s ease, box-shadow .2s ease; }
+.journey-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
+.journey-icon { display: grid; width: 3rem; height: 3rem; margin-bottom: 1.2rem; place-items: center; color: var(--teal-700); background: var(--teal-50); border-radius: .8rem; font-size: 1.35rem; }
+.journey-card h3 { font-size: 1.15rem; }
+.journey-card p { color: var(--muted); }
+.journey-card a { font-weight: 750; text-decoration: none; }
+.trust-band { padding: 2rem 0; background: var(--warm); border-block: 1px solid #ebe3d4; }
+.trust-stat { text-align: center; }
+.trust-stat strong { display: block; color: var(--navy-950); font-size: 1.8rem; }
+.trust-stat span { color: var(--muted); font-size: .9rem; }
+.principle { display: flex; gap: 1rem; padding: 1.25rem; }
+.principle i { color: var(--teal-700); font-size: 1.3rem; }
+.principle h3 { margin-bottom: .35rem; font-size: 1.05rem; }
+.principle p { margin: 0; color: var(--muted); font-size: .95rem; }
+.cta-panel { padding: clamp(2rem, 5vw, 4rem); color: white; background: var(--navy-900); border-radius: 1.5rem; box-shadow: var(--shadow-md); }
+.cta-panel h2 { max-width: 700px; color: white; font-size: clamp(2rem, 4vw, 3rem); }
+.cta-panel p { max-width: 640px; color: #bed2df; }
+@media (max-width: 991.98px) { .hero-grid { grid-template-columns: 1fr; } .method-card { max-width: 650px; } }
+@media (max-width: 767.98px) { .section-heading { display: block; } .section-heading p { margin-top: 1rem; } .hero-proof { display: grid; gap: .5rem; } }
+</style>
+{% endblock %}
+
+{% block content %}
+<section class="home-hero">
+    <div class="container-xl">
+        <div class="hero-grid">
+            <div>
+                <div class="hero-kicker"><i class="bi bi-check2-circle"></i> Evidence-aware model selection</div>
+                <h1>Choose the right statistical model—with reasons you can defend.</h1>
+                <p class="lead">Translate your research question and data structure into a focused recommendation, practical alternatives, assumptions, diagnostics, and implementation guidance.</p>
+                <div class="hero-actions">
+                    <a href="{{ url_for('main.analysis_form') }}" class="btn btn-light btn-lg">
+                        Start model selection <i class="bi bi-arrow-right ms-2"></i>
+                    </a>
                     <a href="{{ url_for('main.models_index') }}" class="btn btn-outline-light btn-lg">
-                        <i class="bi bi-database me-2"></i>Browse Models
-                    </a>
-                </div>
-            </div>
-        </div>
-    </section>
-</div>
-
-<script>
-document.addEventListener('DOMContentLoaded', function() {
-    const hero = document.getElementById('hero-section');
-    const heroBackground = document.querySelector('.hero-background');
-    
-    // Lazy-load the background image
-    const img = new Image();
-    img.src = "{{ url_for('static', filename='images/stats-background.png') }}";
-    img.loading = "lazy";
-    
-    img.onload = function() {
-        console.log('Background image loaded successfully');
-        heroBackground.style.backgroundImage = `url('${img.src}'), linear-gradient(to bottom, #1a1a1a, #333)`;
-        heroBackground.style.backgroundSize = 'cover';
-        heroBackground.style.backgroundPosition = 'center';
-        heroBackground.style.margin = '0';
-        heroBackground.style.padding = '0';
-        hero.classList.add('image-loaded');
-    };
-    
-    img.onerror = function(e) {
-        console.error('Background image failed to load:', e);
-        hero.classList.add('no-image');
-    };
-});
-</script>
-
-<!-- Container for the rest of the content -->
-<div class="container">
-    <section class="consultation-section">
-        <h2 class="text-center mb-5">Our Services</h2>
-        <div class="row g-4">
-            <div class="col-md-6 col-lg-3">
-                <div class="consultation-card">
-                    <i class="bi bi-cpu consultation-icon" style="color: #6f42c1;"></i>
-                    <h3 class="consultation-title">Model Selection</h3>
-                    <p class="consultation-description">Get personalized recommendations for the most appropriate statistical models based on your data characteristics and research goals.</p>
-                    <a href="{{ url_for('main.analysis_form') }}" class="btn btn-purple">Get Started</a>
-                </div>
-            </div>
-            <div class="col-md-6 col-lg-3">
-                <div class="consultation-card">
-                    <i class="bi bi-people consultation-icon" style="color: #6f42c1;"></i>
-                    <h3 class="consultation-title">Expert Consultation</h3>
-                    <p class="consultation-description">Connect with qualified statisticians for personalized guidance and validation of your analysis approach.</p>
-                    <a href="{{ url_for('expert.experts_list') }}" class="btn btn-purple">Find Experts</a>
-                </div>
-            </div>
-            <div class="col-md-6 col-lg-3">
-                <div class="consultation-card">
-                    <i class="bi bi-book consultation-icon" style="color: #6f42c1;"></i>
-                    <h3 class="consultation-title">Educational Resources</h3>
-                    <p class="consultation-description">Access comprehensive documentation, tutorials, and examples for each statistical model in our database.</p>
-                    <a href="{{ url_for('main.models_index') }}" class="btn btn-purple">Learn More</a>
-                </div>
-            </div>
-            <div class="col-md-6 col-lg-3">
-                <div class="consultation-card">
-                    <i class="bi bi-clipboard-check consultation-icon" style="color: #6f42c1;"></i>
-                    <h3 class="consultation-title">Questionnaire Designer</h3>
-                    <p class="consultation-description">Create professional research questionnaires tailored to your specific needs with our AI-powered questionnaire generator.</p>
-                    <a href="{{ url_for('questionnaire.index') }}" class="btn btn-purple">Create Now</a>
-                </div>
-            </div>
-        </div>
-    </section>
-
-    <section class="stats-section">
-        <div class="row">
-            <div class="col-md-4">
-                <div class="stat-item">
-                    <div class="mb-3">
-                        <i class="bi bi-bar-chart-line-fill" style="font-size: 3rem; color: #007bff;"></i>
-                    </div>
-                    <div class="stat-number">{{ stats.models_count }}</div>
-                    <div class="stat-label">Statistical Models</div>
-                </div>
-            </div>
-            <div class="col-md-4">
-                <div class="stat-item">
-                    <div class="mb-3">
-                        <i class="bi bi-clock-history" style="font-size: 3rem; color: #007bff;"></i>
-                    </div>
-                    <div class="stat-number">{{ stats.access_hours }}</div>
-                    <div class="stat-label">Hours of Model Access</div>
-                </div>
-            </div>
-            <div class="col-md-4">
-                <div class="stat-item">
-                    <div class="mb-3">
-                        <i class="bi bi-patch-check-fill" style="font-size: 3rem; color: #007bff;"></i>
-                    </div>
-                    <div class="stat-number">{{ stats.verification_rate }}</div>
-                    <div class="stat-label">Expert Verified Rate</div>
-                </div>
-            </div>
-        </div>
-    </section>
-</div>
-{% endblock %}
-
+                        Browse the model library
+                    </a>
+                </div>
+                <div class="hero-proof">
+                    <span><i class="bi bi-check2 me-1"></i>No statistical jargon required</span>
+                    <span><i class="bi bi-check2 me-1"></i>Assumptions made visible</span>
+                    <span><i class="bi bi-check2 me-1"></i>Python and R examples</span>
+                </div>
+            </div>
+            <aside class="method-card" aria-label="How recommendations are built">
+                <h2>From question to model</h2>
+                <div class="method-step">
+                    <span>01</span>
+                    <div><strong>Define the analytical goal</strong><small>Prediction, inference, classification, clustering, or time series.</small></div>
+                </div>
+                <div class="method-step">
+                    <span>02</span>
+                    <div><strong>Describe the data</strong><small>Outcome, predictors, sample size, missingness, and dependence.</small></div>
+                </div>
+                <div class="method-step">
+                    <span>03</span>
+                    <div><strong>Compare compatible methods</strong><small>Review the leading recommendation and credible alternatives.</small></div>
+                </div>
+                <div class="method-step">
+                    <span>04</span>
+                    <div><strong>Validate before reporting</strong><small>Check assumptions, diagnostics, limitations, and interpretation.</small></div>
+                </div>
+            </aside>
+        </div>
+    </div>
+</section>
+
+<section class="trust-band" aria-label="Platform overview">
+    <div class="container-xl">
+        <div class="row g-4">
+            <div class="col-4 trust-stat"><strong>{{ stats.models_count }}</strong><span>documented models</span></div>
+            <div class="col-4 trust-stat"><strong>{{ stats.access_hours }}</strong><span>self-guided access</span></div>
+            <div class="col-4 trust-stat"><strong>5+</strong><span>implementation ecosystems</span></div>
+        </div>
+    </div>
+</section>
+
+<section class="home-section">
+    <div class="container-xl">
+        <div class="section-heading">
+            <div>
+                <div class="page-eyebrow">A clearer analytical workflow</div>
+                <h2>Support for the decisions around the model—not just its name.</h2>
+            </div>
+            <p>Move from an initial question to a method you can explain, implement, check, and communicate to collaborators.</p>
+        </div>
+        <div class="row g-4">
+            <div class="col-md-6 col-xl-3">
+                <article class="journey-card">
+                    <div class="journey-icon"><i class="bi bi-signpost-split"></i></div>
+                    <h3>Model selection</h3>
+                    <p>Answer guided questions about your goal and data to narrow the candidate set.</p>
+                    <a href="{{ url_for('main.analysis_form') }}">Find a model <i class="bi bi-arrow-right"></i></a>
+                </article>
+            </div>
+            <div class="col-md-6 col-xl-3">
+                <article class="journey-card">
+                    <div class="journey-icon"><i class="bi bi-collection"></i></div>
+                    <h3>Model library</h3>
+                    <p>Compare assumptions, use cases, variable types, code, and interpretation guidance.</p>
+                    <a href="{{ url_for('main.models_index') }}">Explore models <i class="bi bi-arrow-right"></i></a>
+                </article>
+            </div>
+            <div class="col-md-6 col-xl-3">
+                <article class="journey-card">
+                    <div class="journey-icon"><i class="bi bi-ui-checks-grid"></i></div>
+                    <h3>Questionnaire design</h3>
+                    <p>Build research instruments that align measures with the intended analysis.</p>
+                    <a href="{{ url_for('questionnaire.index') }}">Design a questionnaire <i class="bi bi-arrow-right"></i></a>
+                </article>
+            </div>
+            <div class="col-md-6 col-xl-3">
+                <article class="journey-card">
+                    <div class="journey-icon"><i class="bi bi-people"></i></div>
+                    <h3>Expert review</h3>
+                    <p>Bring in a statistician when design, assumptions, or interpretation need deeper judgment.</p>
+                    <a href="{{ url_for('expert.experts_list') }}">Find an expert <i class="bi bi-arrow-right"></i></a>
+                </article>
+            </div>
+        </div>
+    </div>
+</section>
+
+<section class="home-section pt-0">
+    <div class="container-xl">
+        <div class="row g-4 mb-5">
+            <div class="col-lg-4 principle">
+                <i class="bi bi-eye"></i>
+                <div><h3>Transparent criteria</h3><p>Recommendations connect directly to the characteristics you provide.</p></div>
+            </div>
+            <div class="col-lg-4 principle">
+                <i class="bi bi-diagram-3"></i>
+                <div><h3>Alternatives included</h3><p>See other compatible approaches instead of a false single-answer result.</p></div>
+            </div>
+            <div class="col-lg-4 principle">
+                <i class="bi bi-clipboard2-pulse"></i>
+                <div><h3>Validation first</h3><p>Use assumptions and diagnostics before drawing substantive conclusions.</p></div>
+            </div>
+        </div>
+        <div class="cta-panel">
+            <div class="page-eyebrow text-info">Start with your research question</div>
+            <h2>Get a focused recommendation in a few guided steps.</h2>
+            <p class="mb-4">You do not need to know the model name in advance. Describe what you want to learn and what your data look like.</p>
+            <a href="{{ url_for('main.analysis_form') }}" class="btn btn-light btn-lg">Start model selection</a>
+        </div>
+    </div>
+</section>
+{% endblock %}
+
 {% block container_end %}{% endblock %}
diff --git a/templates/model_details.html b/templates/model_details.html
index 77309cc..2ec4b5a 100644
--- a/templates/model_details.html
+++ b/templates/model_details.html
@@ -4,41 +4,23 @@
 
 {% block extra_css %}
 <style>
+    .model-detail-shell { max-width: 1080px; margin: 0 auto; }
+    .model-detail-breadcrumb { margin-bottom: 1rem; color: var(--muted); font-size: .9rem; }
+    .model-detail-breadcrumb a { font-weight: 700; text-decoration: none; }
+    .model-detail-header {
+        padding: clamp(1.75rem, 4vw, 3rem) !important;
+        background: linear-gradient(125deg, #102a43, #124b55) !important;
+    }
+    .model-detail-header h1 { color: white; font-size: clamp(2.2rem, 5vw, 3.7rem); }
+    .model-detail-header p { max-width: 700px; margin: .7rem 0 0; color: #c6d8e4; }
+    .model-detail-body { padding: clamp(1.25rem, 3vw, 2.25rem); }
     .model-card { margin-bottom: 20px; }
     .implementation-tab { padding: 15px; }
     .resource-link { margin-bottom: 10px; }
-    /* Basic nav styling for search bar */
-    .search-nav {
-        background-color: #8b1a1d;
-        padding: 10px 0;
-        margin-bottom: 20px;
-    }
-    .search-nav .container {
-        display: flex;
-        justify-content: space-between;
-        align-items: center;
-    }
-    .search-nav a {
-        color: white;
-        text-decoration: none;
-        font-weight: bold;
-    }
-    .search-nav a:hover {
-        text-decoration: underline;
-    }
-    #page-search-form {
-        display: flex;
-        align-items: center;
-    }
-    #page-search-input {
-        max-width: 200px;
-    }
-
-    /* Style implementation tabs to stand out */
     .nav-tabs .nav-link {
         background-color: white;
-        border: 1px solid #0e7dec;
-        color: white;
+        border: 1px solid var(--line);
+        color: var(--navy-700);
         margin-right: 0.25rem;
         border-top-left-radius: .25rem;
         border-top-right-radius: .25rem;
@@ -53,18 +35,27 @@
         border: 1px solid #dee2e6;
         border-top: none;
     }
+    pre { padding: 1rem; background: #0b1f33 !important; border-radius: .7rem; }
+    pre code { color: #d6e7ef; }
 </style>
 {% endblock %}
 
 {% block content %}
-<div class="container mt-5">
+<div class="model-detail-shell py-3">
+    <div class="model-detail-breadcrumb">
+        <a href="{{ url_for('main.models_index') }}">Model library</a>
+        <i class="bi bi-chevron-right mx-1"></i>
+        <span>{{ model_name }}</span>
+    </div>
     <div class="row justify-content-center">
-        <div class="col-md-10">
+        <div class="col-12">
             <div class="card">
-                <div class="card-header bg-primary text-white">
-                    <h4 class="mb-0">{{ model_name }}</h4>
+                <div class="card-header model-detail-header">
+                    <div class="page-eyebrow text-info">Statistical model reference</div>
+                    <h1 class="mb-0">{{ model_name }}</h1>
+                    <p>Review when to use this method, its data requirements, implementation patterns, and interpretation guidance.</p>
                 </div>
-                <div class="card-body">
+                <div class="card-body model-detail-body">
                     <!-- Model Overview -->
                     <div class="mb-4">
                         <h5>Description</h5>
@@ -325,6 +316,5 @@ <h6>Academic Papers and References</h6>
     </div>
 </div>
 
-<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
 <script src="{{ url_for('static', filename='js/page_search.js') }}"></script>
 {% endblock %}
diff --git a/templates/models_list.html b/templates/models_list.html
index 3ad3e62..cca855e 100644
--- a/templates/models_list.html
+++ b/templates/models_list.html
@@ -1,46 +1,143 @@
-{% extends "base.html" %}
-
-{% block title %}Statistical Models{% endblock %}
-
-{% block content %}
-<div class="container mt-4">
-    <div class="row justify-content-center">
-        <div class="col-md-10">
-            <div class="card shadow">
-                <div class="card-header bg-primary text-white">
-                    <h4 class="mb-0">{{ group_name | replace('_', ' ') | title }}</h4>
-                    <p class="mb-0">Click on a model to view detailed information</p>
-                </div>
-                <div class="card-body">
-                    <div class="row">
-                        {% for model_name, model_info in models %}
-                        <div class="col-md-6 mb-4">
-                            <a href="{{ url_for('main.model_details', model_name=model_name) }}" class="text-decoration-none">
-                                <div class="card h-100 shadow-sm">
-                                    <div class="card-body">
-                                        <h5 class="card-title">{{ model_name }}</h5>
-                                        <p class="card-text">{{ model_info.description }}</p>
-                                        <div class="mt-2">
-                                            {% for goal in model_info.analysis_goals %}
-                                            <span class="badge bg-primary me-1">{{ goal }}</span>
-                                            {% endfor %}
-                                            {% for var_type in model_info.dependent_variable %}
-                                            <span class="badge bg-secondary me-1">{{ var_type }}</span>
-                                            {% endfor %}
-                                        </div>
-                                    </div>
-                                </div>
-                            </a>
-                        </div>
-                        {% endfor %}
-                    </div>
-
-                    <div class="text-center mt-4">
-                        <a href="{{ url_for('main.home') }}" class="btn btn-primary">Back to Home</a>
-                    </div>
-                </div>
-            </div>
-        </div>
-    </div>
-</div>
-{% endblock %} 
\ No newline at end of file
+{% extends "base.html" %}
+
+{% block title %}{{ group_name }} — Statistical Model Library{% endblock %}
+{% block page_context %}Browse {{ group_name }} with descriptions, analytical goals, and supported outcome types.{% endblock %}
+
+{% block extra_css %}
+<style>
+.library-header { padding: 2rem 0 1.25rem; }
+.library-header h1 { max-width: 760px; font-size: clamp(2.2rem, 5vw, 3.6rem); }
+.library-tools { position: sticky; top: 76px; z-index: 20; padding: 1rem 0; background: rgba(245,248,250,.94); border-bottom: 1px solid var(--line); backdrop-filter: blur(10px); }
+.library-search { position: relative; max-width: 580px; }
+.library-search i { position: absolute; top: 50%; left: 1rem; color: var(--muted); transform: translateY(-50%); }
+.library-search input { width: 100%; padding: .8rem 1rem .8rem 2.7rem; background: white; border: 1px solid var(--line); border-radius: .8rem; outline: none; }
+.library-search input:focus { border-color: var(--teal-600); box-shadow: 0 0 0 3px rgba(13,148,136,.12); }
+.group-nav { display: flex; gap: .5rem; padding: .75rem 0 .1rem; overflow-x: auto; scrollbar-width: thin; }
+.group-nav a { flex: 0 0 auto; padding: .4rem .7rem; color: var(--navy-700); background: white; border: 1px solid var(--line); border-radius: 999px; font-size: .8rem; font-weight: 700; text-decoration: none; }
+.library-group { padding: 2.4rem 0 .5rem; scroll-margin-top: 155px; }
+.library-group-heading { display: flex; justify-content: space-between; gap: 1rem; align-items: end; margin-bottom: 1.15rem; padding-bottom: .8rem; border-bottom: 1px solid var(--line); }
+.library-group-heading h2 { margin: 0; font-size: 1.45rem; }
+.library-group-heading span { color: var(--muted); font-size: .85rem; }
+.model-library-card { display: flex; height: 100%; flex-direction: column; padding: 1.25rem; color: inherit; background: white; border: 1px solid var(--line); border-radius: 1rem; text-decoration: none; transition: .2s ease; }
+.model-library-card:hover { color: inherit; border-color: #8bd8cf; box-shadow: var(--shadow-md); transform: translateY(-3px); }
+.model-card-top { display: flex; justify-content: space-between; gap: 1rem; }
+.model-library-card h3 { margin-bottom: .7rem; font-size: 1.08rem; }
+.model-library-card .arrow { color: var(--teal-700); }
+.model-library-card p { display: -webkit-box; overflow: hidden; margin-bottom: 1rem; color: var(--muted); font-size: .9rem; -webkit-box-orient: vertical; -webkit-line-clamp: 3; }
+.model-meta { display: flex; flex-wrap: wrap; gap: .35rem; margin-top: auto; }
+.model-meta span { padding: .25rem .5rem; color: var(--navy-700); background: var(--canvas); border-radius: 999px; font-size: .72rem; font-weight: 700; }
+.library-empty { display: none; padding: 3rem; text-align: center; color: var(--muted); }
+</style>
+{% endblock %}
+
+{% block container_start %}{% endblock %}
+{% block content %}
+<header class="library-header">
+    <div class="container-xl">
+        <div class="page-eyebrow">Statistical model library</div>
+        <h1>{{ group_name }}</h1>
+        <p class="page-lead">
+            {% if is_all_models %}
+            Explore methods by family, compare their intended uses, and open any model for assumptions, examples, and interpretation guidance.
+            {% else %}
+            Compare methods in this family and review the data requirements, assumptions, implementation examples, and interpretation guidance for each.
+            {% endif %}
+        </p>
+    </div>
+</header>
+
+<div class="library-tools">
+    <div class="container-xl">
+        <div class="d-flex flex-column flex-lg-row justify-content-between gap-3 align-items-lg-center">
+            <div class="library-search flex-grow-1">
+                <i class="bi bi-search"></i>
+                <input id="model-filter" type="search" placeholder="Filter by model name, goal, or description" aria-label="Filter model library">
+            </div>
+            <div class="text-muted small"><strong id="visible-model-count">{{ models|length }}</strong> models shown</div>
+        </div>
+        {% if is_all_models %}
+        <nav class="group-nav" aria-label="Model families">
+            {% for family_name, family_models in grouped_models %}
+            <a href="#{{ family_name|lower|replace(' ', '-')|replace('(', '')|replace(')', '') }}">{{ family_name }}</a>
+            {% endfor %}
+        </nav>
+        {% endif %}
+    </div>
+</div>
+
+<div class="container-xl pb-5">
+    {% if is_all_models %}
+        {% for family_name, family_models in grouped_models %}
+        <section class="library-group" id="{{ family_name|lower|replace(' ', '-')|replace('(', '')|replace(')', '') }}" data-model-group>
+            <div class="library-group-heading">
+                <h2>{{ family_name }}</h2>
+                <span>{{ family_models|length }} methods</span>
+            </div>
+            <div class="row g-3">
+                {% for model_name, model_info in family_models %}
+                <div class="col-md-6 col-xl-4 model-result" data-search="{{ model_name }} {{ model_info.description }} {{ model_info.analysis_goals|join(' ') }}">
+                    <a href="{{ url_for('main.model_details', model_name=model_name) }}" class="model-library-card">
+                        <div class="model-card-top"><h3>{{ model_name }}</h3><i class="bi bi-arrow-up-right arrow"></i></div>
+                        <p>{{ model_info.description }}</p>
+                        <div class="model-meta">
+                            {% for goal in model_info.analysis_goals[:3] %}<span>{{ goal|replace('_', ' ') }}</span>{% endfor %}
+                            {% for var_type in model_info.dependent_variable[:2] %}<span>{{ var_type }} outcome</span>{% endfor %}
+                        </div>
+                    </a>
+                </div>
+                {% endfor %}
+            </div>
+        </section>
+        {% endfor %}
+    {% else %}
+        <section class="library-group" data-model-group>
+            <div class="row g-3">
+                {% for model_name, model_info in models %}
+                <div class="col-md-6 col-xl-4 model-result" data-search="{{ model_name }} {{ model_info.description }} {{ model_info.analysis_goals|join(' ') }}">
+                    <a href="{{ url_for('main.model_details', model_name=model_name) }}" class="model-library-card">
+                        <div class="model-card-top"><h3>{{ model_name }}</h3><i class="bi bi-arrow-up-right arrow"></i></div>
+                        <p>{{ model_info.description }}</p>
+                        <div class="model-meta">
+                            {% for goal in model_info.analysis_goals[:3] %}<span>{{ goal|replace('_', ' ') }}</span>{% endfor %}
+                            {% for var_type in model_info.dependent_variable[:2] %}<span>{{ var_type }} outcome</span>{% endfor %}
+                        </div>
+                    </a>
+                </div>
+                {% endfor %}
+            </div>
+        </section>
+    {% endif %}
+    <div id="library-empty" class="library-empty">
+        <i class="bi bi-search fs-2 d-block mb-2"></i>
+        No models match that filter. Try a broader term such as “predict,” “binary,” or “time series.”
+    </div>
+</div>
+{% endblock %}
+{% block container_end %}{% endblock %}
+
+{% block scripts %}
+<script>
+document.addEventListener('DOMContentLoaded', function () {
+    const input = document.getElementById('model-filter');
+    const results = Array.from(document.querySelectorAll('.model-result'));
+    const groups = Array.from(document.querySelectorAll('[data-model-group]'));
+    const count = document.getElementById('visible-model-count');
+    const empty = document.getElementById('library-empty');
+
+    input.addEventListener('input', function () {
+        const query = this.value.trim().toLowerCase();
+        let visible = 0;
+        results.forEach(function (result) {
+            const matches = !query || result.dataset.search.toLowerCase().includes(query);
+            result.hidden = !matches;
+            if (matches) visible += 1;
+        });
+        groups.forEach(function (group) {
+            group.hidden = !group.querySelector('.model-result:not([hidden])');
+        });
+        count.textContent = visible;
+        empty.style.display = visible ? 'none' : 'block';
+    });
+});
+</script>
+{% endblock %}
diff --git a/templates/results.html b/templates/results.html
index 2a0441f..95870eb 100644
--- a/templates/results.html
+++ b/templates/results.html
@@ -1,126 +1,100 @@
-{% extends "base.html" %}
-
-{% block title %}Model Recommendation Results{% endblock %}
-
-{% block content %}
-<div class="container mt-5">
-    <div class="row justify-content-center">
-        <div class="col-md-10">
-            <div class="card">
-                <div class="card-header bg-success text-white">
-                    <h4 class="mb-0">Model Recommendation</h4>
-                </div>
-                <div class="card-body">
-                    <!-- Research Question -->
-                    <div class="mb-4">
-                        <h5>Research Question</h5>
-                        <p>{{ research_question }}</p>
-                    </div>
-
-                    <!-- Recommended Model -->
-                    <div class="mb-4">
-                        <h5>Recommended Model: {{ recommended_model }}</h5>
-                        <div class="alert alert-info">
-                            {{ explanation | safe }}
-                        </div>
-                        <div class="d-flex gap-2 flex-wrap">
-                            <a href="{{ url_for('main.model_details', model_name=recommended_model) }}" class="btn btn-primary">
-                                <i class="bi bi-info-circle me-1"></i> View Model Details
-                            </a>
-                            
-                            {% if recommended_model in MODEL_DATABASE and MODEL_DATABASE[recommended_model] is defined and MODEL_DATABASE[recommended_model].synthetic_data is defined %}
-                            <a href="{{ url_for('main.model_details', model_name=recommended_model) }}#synthetic-data" class="btn btn-success">
-                                <i class="bi bi-file-code me-1"></i> See Synthetic Data Example
-                            </a>
-                            {% endif %}
-                            
-                            <a href="{{ url_for('main.model_interpretation', model_name=recommended_model) }}" class="btn btn-warning">
-                                <i class="bi bi-book me-1"></i> Interpretation Guide
-                            </a>
-                        </div>
-                    </div>
-
-                    <!-- Alternative Models -->
-                    <div class="card">
-                        <div class="card-header">
-                            <h5 class="mb-0">Alternative Models</h5>
-                        </div>
-                        <div class="card-body">
-                            <div class="row">
-                                {% if alternative_models %}
-                                    {% for model_name in alternative_models %}
-                                        {% if model_name in MODEL_DATABASE %}
-                                            <div class="col-md-6 mb-3">
-                                                <div class="card h-100 border-primary">
-                                                    <div class="card-header bg-light">
-                                                        <span class="badge bg-info float-end">Recommended Alternative</span>
-                                                    </div>
-                                                    <div class="card-body">
-                                                        <h6>{{ model_name }}</h6>
-                                                        <p class="small">{{ MODEL_DATABASE[model_name].description }}</p>
-                                                        <div class="mt-auto">
-                                                            <a href="{{ url_for('main.model_details', model_name=model_name) }}" class="btn btn-sm btn-outline-primary">
-                                                                View Details
-                                                            </a>
-                                                            
-                                                            {% if model_name in MODEL_DATABASE and MODEL_DATABASE[model_name] is defined and MODEL_DATABASE[model_name].synthetic_data is defined %}
-                                                            <a href="{{ url_for('main.model_details', model_name=model_name) }}#synthetic-data" class="btn btn-sm btn-outline-success ms-1">
-                                                                Sample Code
-                                                            </a>
-                                                            {% endif %}
-                                                        </div>
-                                                    </div>
-                                                </div>
-                                            </div>
-                                        {% endif %}
-                                    {% endfor %}
-                                {% else %}
-                                    <div class="col-12">
-                                        <div class="alert alert-info">
-                                            No specific alternative models were found for your analysis requirements. The recommended model is the best fit.
-                                        </div>
-                                    </div>
-                                {% endif %}
-                            </div>
-                            
-                            {% if alternative_models|length < 2 %}
-                            <hr class="mt-4 mb-4">
-                            <h6 class="mb-3">Other Models to Consider</h6>
-                            <div class="row">
-                                {% set count = namespace(value=0) %}
-                                {% for model_name, model_info in MODEL_DATABASE.items() %}
-                                    {% if model_name != recommended_model and 
-                                       model_name not in alternative_models and
-                                       (analysis_goal in model_info.analysis_goals) and
-                                       (dependent_variable_type in model_info.dependent_variable) and
-                                       count.value < 2 %}
-                                        <div class="col-md-6 mb-3">
-                                            <div class="card h-100">
-                                                <div class="card-body">
-                                                    <h6>{{ model_name }}</h6>
-                                                    <p class="small">{{ model_info.description }}</p>
-                                                    <a href="{{ url_for('main.model_details', model_name=model_name) }}" class="btn btn-sm btn-outline-secondary">
-                                                        View Details
-                                                    </a>
-                                                </div>
-                                            </div>
-                                        </div>
-                                        {% set count.value = count.value + 1 %}
-                                    {% endif %}
-                                {% endfor %}
-                            </div>
-                            {% endif %}
-                        </div>
-                    </div>
-
-                    <div class="text-center mt-4">
-                        <a href="{{ url_for('main.analysis_form') }}" class="btn btn-primary">Start New Analysis</a>
-                        <a href="{{ url_for('main.history') }}" class="btn btn-secondary">View History</a>
-                        <a href="{{ url_for('main.models_index') }}" class="btn btn-info">Browse Models</a>
-                    </div>
-                </div>
-            </div>
-        </div>
-    </div>
-</div>
-{% endblock %}
+{% extends "base.html" %}
+
+{% block title %}Your model recommendation — Statistical Model Suggester{% endblock %}
+{% block page_context %}Recommendation result: {{ recommended_model }} for the research question {{ research_question }}. Review the rationale, alternatives, assumptions, and model documentation.{% endblock %}
+
+{% block extra_css %}
+<style>
+.result-shell { max-width: 1080px; margin: 0 auto; }
+.result-hero { position: relative; overflow: hidden; padding: clamp(2rem, 5vw, 3.5rem); color: white; background: linear-gradient(125deg, #102a43, #124b55); border-radius: 1.5rem; box-shadow: var(--shadow-md); }
+.result-hero::after { position: absolute; right: -5rem; bottom: -8rem; width: 20rem; height: 20rem; content: ""; border: 1px solid rgba(255,255,255,.16); border-radius: 50%; box-shadow: 0 0 0 3rem rgba(255,255,255,.025); }
+.result-hero > * { position: relative; z-index: 1; }
+.result-label { display: inline-flex; align-items: center; gap: .45rem; margin-bottom: 1rem; color: #99f6e4; font-size: .78rem; font-weight: 800; letter-spacing: .11em; text-transform: uppercase; }
+.result-hero h1 { max-width: 760px; margin-bottom: 1rem; color: white; font-size: clamp(2.25rem, 5vw, 3.8rem); }
+.result-question { max-width: 780px; margin: 0; color: #c8dbe6; font-size: 1.05rem; }
+.result-layout { display: grid; grid-template-columns: minmax(0, 1fr) 290px; gap: 1.5rem; margin-top: 1.5rem; }
+.result-panel { padding: 1.6rem; background: white; border: 1px solid var(--line); border-radius: 1rem; box-shadow: var(--shadow-sm); }
+.result-panel h2 { margin-bottom: 1rem; font-size: 1.25rem; }
+.rationale { color: #29485b; }
+.rationale ul { padding-left: 1.2rem; }
+.next-actions { display: grid; gap: .65rem; }
+.next-actions .btn { display: flex; justify-content: space-between; align-items: center; padding: .75rem .9rem; text-align: left; }
+.caution-note { margin-top: 1rem; padding: .9rem; color: #6d5724; background: #fff9e8; border: 1px solid #f2dfa5; border-radius: .75rem; font-size: .85rem; }
+.alternative-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
+.alternative-card { display: flex; min-height: 210px; flex-direction: column; padding: 1.25rem; color: inherit; background: white; border: 1px solid var(--line); border-radius: .9rem; text-decoration: none; transition: .2s ease; }
+.alternative-card:hover { color: inherit; border-color: #8bd8cf; box-shadow: var(--shadow-sm); transform: translateY(-2px); }
+.alternative-card h3 { font-size: 1.05rem; }
+.alternative-card p { color: var(--muted); font-size: .9rem; }
+.alternative-card span { margin-top: auto; color: var(--teal-700); font-size: .85rem; font-weight: 750; }
+.result-footer-actions { display: flex; flex-wrap: wrap; gap: .7rem; justify-content: center; margin-top: 2rem; }
+@media (max-width: 900px) { .result-layout { grid-template-columns: 1fr; } }
+@media (max-width: 650px) { .alternative-grid { grid-template-columns: 1fr; } }
+</style>
+{% endblock %}
+
+{% block content %}
+<div class="result-shell py-3">
+    <header class="result-hero">
+        <div class="result-label"><i class="bi bi-check2-circle"></i> Leading recommendation</div>
+        <h1>{{ recommended_model }}</h1>
+        <p class="result-question"><strong class="text-white">Your question:</strong> {{ research_question }}</p>
+    </header>
+
+    <div class="result-layout">
+        <section class="result-panel">
+            <div class="page-eyebrow">Why it fits</div>
+            <h2>Recommendation rationale</h2>
+            <div class="rationale">{{ explanation | safe }}</div>
+        </section>
+
+        <aside class="result-panel">
+            <div class="page-eyebrow">Continue your review</div>
+            <h2>Next steps</h2>
+            <div class="next-actions">
+                <a href="{{ url_for('main.model_details', model_name=recommended_model) }}" class="btn btn-primary">
+                    Model details <i class="bi bi-arrow-right"></i>
+                </a>
+                <a href="{{ url_for('main.model_interpretation', model_name=recommended_model) }}" class="btn btn-outline-primary">
+                    Interpretation guide <i class="bi bi-book"></i>
+                </a>
+                {% if recommended_model in MODEL_DATABASE and MODEL_DATABASE[recommended_model] is defined and MODEL_DATABASE[recommended_model].synthetic_data is defined %}
+                <a href="{{ url_for('main.model_details', model_name=recommended_model) }}#synthetic-data" class="btn btn-outline-secondary">
+                    Worked example <i class="bi bi-code-square"></i>
+                </a>
+                {% endif %}
+            </div>
+            <div class="caution-note"><i class="bi bi-exclamation-triangle me-1"></i>Confirm assumptions and diagnostics before interpreting estimates or predictions.</div>
+        </aside>
+    </div>
+
+    <section class="result-panel mt-4">
+        <div class="page-eyebrow">Compare before deciding</div>
+        <h2>Compatible alternatives</h2>
+        <p class="text-muted">These methods may also fit parts of your design. Compare their assumptions, interpretability, and validation requirements.</p>
+
+        <div class="alternative-grid mt-4">
+            {% if alternative_models %}
+                {% for model_name in alternative_models %}
+                    {% if model_name in MODEL_DATABASE %}
+                    <a href="{{ url_for('main.model_details', model_name=model_name) }}" class="alternative-card">
+                        <h3>{{ model_name }}</h3>
+                        <p>{{ MODEL_DATABASE[model_name].description }}</p>
+                        <span>Review this model <i class="bi bi-arrow-right"></i></span>
+                    </a>
+                    {% endif %}
+                {% endfor %}
+            {% else %}
+            <div class="alert alert-info mb-0">No close alternatives matched all the information provided. Review the leading model carefully and consult a statistician for high-stakes work.</div>
+            {% endif %}
+        </div>
+    </section>
+
+    <div class="result-footer-actions">
+        <a href="{{ url_for('main.analysis_form') }}" class="btn btn-primary"><i class="bi bi-arrow-repeat me-1"></i>Start another selection</a>
+        <a href="{{ url_for('main.models_index') }}" class="btn btn-outline-primary">Browse all models</a>
+        {% if current_user.is_authenticated %}
+        <a href="{{ url_for('main.history') }}" class="btn btn-outline-secondary">Analysis history</a>
+        {% endif %}
+    </div>
+</div>
+{% endblock %}
diff --git a/templates/search_results.html b/templates/search_results.html
index 6cae98f..8870982 100644
--- a/templates/search_results.html
+++ b/templates/search_results.html
@@ -1,56 +1,52 @@
 {% extends "base.html" %}
 
-{% block title %}Search Results{% endblock %}
+{% block title %}Search results for “{{ query }}”{% endblock %}
 
 {% block content %}
-<div class="container mt-4">
-  <div class="row justify-content-center">
-    <div class="col-md-10">
-      <div class="card shadow">
-        <div class="card-header bg-primary text-white">
-          <h4 class="mb-0">Search Results for "{{ query }}"</h4>
-        </div>
+<div class="py-3">
+    <div class="page-eyebrow">Search</div>
+    <h1>Results for “{{ query }}”</h1>
+    <p class="page-lead mb-4">Models and application pages matching your search.</p>
+
+    {% if page_results %}
+    <section class="card mb-4">
         <div class="card-body">
-          {% if page_results %}
-            <div class="mb-4">
-              <h5>Pages</h5>
-              {% for page in page_results %}
-                <a href="{{ page.url }}" class="d-block text-decoration-none mb-1">{{ page.name }}</a>
-              {% endfor %}
+            <h2 class="h5">Application pages</h2>
+            <div class="d-flex flex-wrap gap-2 mt-3">
+                {% for page in page_results %}
+                <a href="{{ page.url }}" class="btn btn-sm btn-outline-primary">{{ page.name }}</a>
+                {% endfor %}
             </div>
-          {% endif %}
-          {% if results %}
-            <div class="row">
-              {% for model_name, model_info in results %}
-              <div class="col-md-6 mb-4">
-                <a href="{{ url_for('main.model_details', model_name=model_name) }}" class="text-decoration-none">
-                  <div class="card h-100 shadow-sm">
-                    <div class="card-body">
-                      <h5 class="card-title">{{ model_name }}</h5>
-                      <p class="card-text">{{ model_info.description }}</p>
-                      <div class="mt-2">
-                        {% for goal in model_info.analysis_goals %}
-                        <span class="badge bg-primary me-1">{{ goal }}</span>
-                        {% endfor %}
-                        {% for var_type in model_info.dependent_variable %}
-                        <span class="badge bg-secondary me-1">{{ var_type }}</span>
-                        {% endfor %}
-                      </div>
+        </div>
+    </section>
+    {% endif %}
+
+    {% if results %}
+    <section>
+        <h2 class="h4 mb-3">Statistical models</h2>
+        <div class="row g-3">
+            {% for model_name, model_info in results %}
+            <div class="col-md-6 col-xl-4">
+                <a href="{{ url_for('main.model_details', model_name=model_name) }}" class="model-library-card">
+                    <div class="model-card-top"><h3>{{ model_name }}</h3><i class="bi bi-arrow-up-right arrow"></i></div>
+                    <p>{{ model_info.description }}</p>
+                    <div class="model-meta">
+                        {% for goal in model_info.analysis_goals[:3] %}<span>{{ goal|replace('_', ' ') }}</span>{% endfor %}
                     </div>
-                  </div>
                 </a>
-              </div>
-              {% endfor %}
             </div>
-          {% else %}
-            <p class="mt-3">No matching pages or models found for "{{ query }}".</p>
-          {% endif %}
-          <div class="mt-3">
-            <a href="{{ url_for('main.home') }}" class="btn btn-primary"><i class="bi bi-house-door me-1"></i>Back to Home</a>
-          </div>
+            {% endfor %}
+        </div>
+    </section>
+    {% elif not page_results %}
+    <section class="card">
+        <div class="card-body text-center py-5">
+            <i class="bi bi-search fs-2 text-muted"></i>
+            <h2 class="h4 mt-3">No matches found</h2>
+            <p class="text-muted">Try a model family, analytical goal, or outcome type.</p>
+            <a href="{{ url_for('main.models_index') }}" class="btn btn-primary">Browse all models</a>
         </div>
-      </div>
-    </div>
-  </div>
+    </section>
+    {% endif %}
 </div>
-{% endblock %} 
\ No newline at end of file
+{% endblock %}
diff --git a/tests/test_main_routes.py b/tests/test_main_routes.py
index cd534bf..4dc2d33 100644
--- a/tests/test_main_routes.py
+++ b/tests/test_main_routes.py
@@ -131,7 +131,7 @@ def test_model_recommendation_consistency(self, client):
         response2 = client.post('/results', data=test_data)
         assert response1.status_code == 200
         assert response2.status_code == 200
-        # Responses should be consistent (same model recommended)
+        assert response1.data == response2.data
     def test_different_analysis_goals(self, client):
         """Test different analysis goals produce appropriate models."""
         base_data = {