diff --git a/hospexplorer/ask/static/css/ask.css b/hospexplorer/ask/static/css/ask.css
index abe5aff..37f72d1 100644
--- a/hospexplorer/ask/static/css/ask.css
+++ b/hospexplorer/ask/static/css/ask.css
@@ -1,3 +1,220 @@
+/* Chat Layout */
+
+.chat-wrapper {
+    display: flex;
+    flex-direction: column;
+    height: calc(100vh - 1px);
+    max-height: 100vh;
+    margin: -1rem;
+    overflow: hidden;
+    position: relative;
+}
+
+/* Header */
+.chat-header {
+    display: flex;
+    align-items: center;
+    gap: 0.75rem;
+    padding: 1rem 1.5rem;
+    background: #ffffff;
+    border-bottom: 1px solid #e9ecef;
+    flex-shrink: 0;
+}
+
+.chat-header h5 {
+    font-weight: 700;
+    color: #212529;
+}
+
+/* Chat area */
+.chat-container {
+    flex: 1;
+    overflow-y: auto;
+    padding: 1.5rem 1.5rem 1rem 1.5rem;
+    background: #f8f9fa;
+    scroll-behavior: smooth;
+}
+
+/* Welcome */
+.chat-welcome {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    height: 100%;
+    text-align: center;
+    color: #6c757d;
+}
+
+.chat-welcome-icon {
+    width: 80px;
+    height: 80px;
+    border-radius: 50%;
+    background: #e9ecef;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    margin-bottom: 1.25rem;
+    color: #8c6bae;
+}
+
+.chat-welcome h4 {
+    font-weight: 700;
+    color: #343a40;
+    margin-bottom: 0.5rem;
+}
+
+/* Chat Messages */
+
+.chat-message {
+    display: flex;
+    gap: 0.75rem;
+    margin-bottom: 1.25rem;
+    max-width: 85%;
+    animation: fadeSlideIn 0.25s ease-out;
+}
+
+/* User messages - right-aligned */
+.chat-message-user {
+    margin-left: auto;
+    flex-direction: row-reverse;
+}
+
+/* LLM messages - left-aligned */
+.chat-message-assistant {
+    margin-right: auto;
+}
+
+/* Avatar */
+.chat-avatar {
+    width: 36px;
+    height: 36px;
+    border-radius: 50%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 0.7rem;
+    font-weight: 700;
+    text-transform: uppercase;
+    flex-shrink: 0;
+    letter-spacing: 0.02em;
+}
+
+.chat-message-user .chat-avatar {
+    background: #8c1d40;
+    color: #ffffff;
+}
+
+.chat-message-assistant .chat-avatar {
+    background: #e9ecef;
+    color: #495057;
+}
+
+/* Bubbles */
+.chat-bubble {
+    padding: 0.75rem 1rem;
+    border-radius: 1.125rem;
+    line-height: 1.55;
+    font-size: 0.925rem;
+    word-wrap: break-word;
+    overflow-wrap: break-word;
+}
+
+.chat-bubble-user {
+    background: #8c1d40;
+    color: #ffffff;
+    border-bottom-right-radius: 0.25rem;
+}
+
+.chat-bubble-assistant {
+    background: #ffffff;
+    color: #212529;
+    border: 1px solid #e2e2e2;
+    border-bottom-left-radius: 0.25rem;
+    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
+}
+
+/* Entrance animation */
+@keyframes fadeSlideIn {
+    from {
+        opacity: 0;
+        transform: translateY(8px);
+    }
+    to {
+        opacity: 1;
+        transform: translateY(0);
+    }
+}
+
+/* Input Bar */
+
+.chat-input-bar {
+    padding: 0.75rem 1.5rem;
+    background: #ffffff;
+    border-top: 1px solid #e9ecef;
+    flex-shrink: 0;
+}
+
+.chat-input-wrapper {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    background: #f8f9fa;
+    border: 1px solid #dee2e6;
+    border-radius: 1.5rem;
+    padding: 0.375rem 0.375rem 0.375rem 1.25rem;
+    transition: border-color 0.2s, box-shadow 0.2s;
+}
+
+.chat-input-wrapper:focus-within {
+    border-color: #8c1d40;
+    box-shadow: 0 0 0 3px rgba(140, 29, 64, 0.12);
+}
+
+.chat-input {
+    flex: 1;
+    border: none;
+    outline: none;
+    background: transparent;
+    font-size: 0.95rem;
+    color: #212529;
+    padding: 0.375rem 0;
+}
+
+.chat-input::placeholder {
+    color: #adb5bd;
+}
+
+.chat-send-btn {
+    width: 40px;
+    height: 40px;
+    border-radius: 50%;
+    border: none;
+    background: #8c1d40;
+    color: #ffffff;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    cursor: pointer;
+    transition: background-color 0.2s, transform 0.1s;
+    flex-shrink: 0;
+}
+
+.chat-send-btn:hover:not(:disabled) {
+    background: #6b1632;
+}
+
+.chat-send-btn:active:not(:disabled) {
+    transform: scale(0.95);
+}
+
+.chat-send-btn:disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+}
+
+/* Thinking / Loading Animation */
+
 .thinking-dots::after {
     content: '';
     animation: dots 1.5s steps(4, end) infinite;
@@ -10,60 +227,135 @@
     80%, 100% { content: '...'; }
 }
 
-/* Markdown content styling */
-.markdown-content h1,
-.markdown-content h2,
-.markdown-content h3 {
-    margin-top: 1rem;
+/* Markdown Content Styling (inside AI chat bubbles) */
+
+.chat-bubble-assistant h1,
+.chat-bubble-assistant h2,
+.chat-bubble-assistant h3 {
+    margin-top: 0.75rem;
     margin-bottom: 0.5rem;
     font-weight: 600;
 }
 
-.markdown-content h1 { font-size: 1.5rem; }
-.markdown-content h2 { font-size: 1.3rem; }
-.markdown-content h3 { font-size: 1.1rem; }
+.chat-bubble-assistant h1 { font-size: 1.3rem; }
+.chat-bubble-assistant h2 { font-size: 1.15rem; }
+.chat-bubble-assistant h3 { font-size: 1.05rem; }
+
+.chat-bubble-assistant p {
+    margin-bottom: 0.5rem;
+}
 
-.markdown-content p {
-    margin-bottom: 0.75rem;
+.chat-bubble-assistant p:last-child {
+    margin-bottom: 0;
 }
 
-.markdown-content code {
-    background-color: #f4f4f4;
-    padding: 0.2rem 0.4rem;
+.chat-bubble-assistant code {
+    background-color: #f0f0f0;
+    padding: 0.15rem 0.35rem;
     border-radius: 4px;
-    font-family: monospace;
-    font-size: 0.9em;
+    font-family: 'SF Mono', SFMono-Regular, Menlo, Monaco, Consolas, monospace;
+    font-size: 0.85em;
 }
 
-.markdown-content pre {
-    background-color: #f4f4f4;
-    padding: 1rem;
-    border-radius: 6px;
+.chat-bubble-assistant pre {
+    background-color: #1e1e2e;
+    color: #cdd6f4;
+    padding: 0.875rem 1rem;
+    border-radius: 0.5rem;
     overflow-x: auto;
+    margin: 0.5rem 0;
 }
 
-.markdown-content pre code {
+.chat-bubble-assistant pre code {
     background: none;
     padding: 0;
+    color: inherit;
 }
 
-.markdown-content ul,
-.markdown-content ol {
-    margin-bottom: 0.75rem;
-    padding-left: 1.5rem;
+.chat-bubble-assistant ul,
+.chat-bubble-assistant ol {
+    margin-bottom: 0.5rem;
+    padding-left: 1.25rem;
 }
 
-.markdown-content blockquote {
-    border-left: 4px solid #ddd;
-    padding-left: 1rem;
+.chat-bubble-assistant blockquote {
+    border-left: 3px solid #8c1d40;
+    padding-left: 0.75rem;
     margin-left: 0;
-    color: #666;
+    color: #555;
+    font-style: italic;
 }
 
-.markdown-content strong {
+.chat-bubble-assistant strong {
     font-weight: 700;
 }
 
-.markdown-content em {
+.chat-bubble-assistant em {
     font-style: italic;
 }
+
+/* User bubble links styling */
+.chat-bubble-user a {
+    color: #ffd4e0;
+    text-decoration: underline;
+}
+
+/* Assistant bubble links styling */
+.chat-bubble-assistant a {
+    color: #8c1d40;
+    text-decoration: underline;
+}
+
+/* Scroll to bottom button */
+
+.scroll-down-btn {
+    position: absolute;
+    bottom: 5rem;
+    left: 50%;
+    transform: translateX(-50%);
+    width: 40px;
+    height: 40px;
+    border-radius: 50%;
+    border: none;
+    background: #8c1d40;
+    color: #ffffff;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    cursor: pointer;
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
+    transition: background-color 0.2s, transform 0.1s;
+    z-index: 10;
+}
+
+.scroll-down-btn:hover {
+    background: #6b1632;
+}
+
+.scroll-down-btn:active {
+    transform: translateX(-50%) scale(0.95);
+}
+
+/* Responsive Adjustments */
+
+@media (max-width: 768px) {
+    .chat-message {
+        max-width: 95%;
+    }
+
+    .chat-input-wrapper {
+        padding-left: 1rem;
+    }
+
+    .chat-header {
+        padding: 0.75rem 1rem;
+    }
+
+    .chat-container {
+        padding: 1rem;
+    }
+
+    .chat-input-bar {
+        padding: 0.5rem 1rem;
+    }
+}
diff --git a/hospexplorer/ask/static/css/styles.css b/hospexplorer/ask/static/css/styles.css
index 07c61b4..e30f34f 100644
--- a/hospexplorer/ask/static/css/styles.css
+++ b/hospexplorer/ask/static/css/styles.css
@@ -10852,6 +10852,7 @@ textarea.form-control-lg {
 
 #page-content-wrapper {
   min-width: 100vw;
+  overflow: hidden;
 }
 
 body.sb-sidenav-toggled #wrapper #sidebar-wrapper {
diff --git a/hospexplorer/ask/templates/index.html b/hospexplorer/ask/templates/index.html
index c015a36..077d5df 100644
--- a/hospexplorer/ask/templates/index.html
+++ b/hospexplorer/ask/templates/index.html
@@ -2,57 +2,127 @@
 {% load static %}
 
 {% block content %}
-    <h1 class="mt-4">Hopper</h1>
-    <p></p>
-    <!--<p>
-        Make sure to keep all page content within the
-        <code>#page-content-wrapper</code>
-        . The top navbar is optional, and just for demonstration. Just create an element with the
-        <code>#sidebarToggle</code>
-        ID which will toggle the menu when clicked.
-    </p>-->
     <link rel="stylesheet" href="{% static 'css/ask.css' %}">
     <div
         x-data="{
             userQuery: '',
-            answers: [],
+            messages: [], // in-memory only; resets on page refresh (not persisted to localStorage, session, or DB)
             isLoading: false,
+            showScrollBtn: false,
 
             async getAnswer() {
+                if (!this.userQuery.trim()) return;
+
+                const question = this.userQuery.trim();
+                this.userQuery = '';
+
+                this.messages.push({ role: 'user', content: question });
+                this.$nextTick(() => this.scrollToBottom());
+
                 this.isLoading = true;
                 try {
-                    const response = await fetch('{% url 'ask:query-llm' %}?query=' + encodeURIComponent(this.userQuery));
+                    const response = await fetch('{% url 'ask:query-llm' %}?query=' + encodeURIComponent(question));
                     const data = await response.json();
                     if (!response.ok || data.error) {
-                        this.answers.push('Something went wrong. Please try again.');
+                        this.messages.push({ role: 'assistant', content: 'Something went wrong. Please try again.' });
                     } else {
-                        this.answers.push(data.message);
+                        this.messages.push({ role: 'assistant', content: data.message });
                     }
                 } catch (error) {
-                    this.answers.push('Something went wrong. Please try again.');
+                    this.messages.push({ role: 'assistant', content: 'Something went wrong. Please try again.' });
                 }
                 this.isLoading = false;
-            }
-        }">
+                this.$nextTick(() => this.scrollToBottom());
+            },
+
+            // Smoothly scrolls chat to the latest message
+            scrollToBottom() {
+                const c = this.$refs.chatContainer;
+                if (c) c.scrollTop = c.scrollHeight;
+            },
 
-        <div class="input-group mb-3">
-            <input type="text" class="form-control" placeholder="Ask me something!" aria-label="Recipient's username" aria-describedby="button-addon2" x-model="userQuery" @keyup.enter="getAnswer()">
-            <button type="button" class="btn btn-outline-secondary" id="button-addon2" @click="getAnswer()">Go!</button>
+            // Shows the scroll-down button when user has scrolled more than 150px from bottom
+            checkScroll() {
+                const c = this.$refs.chatContainer;
+                if (!c) return;
+                this.showScrollBtn = (c.scrollHeight - c.scrollTop - c.clientHeight) > 150;
+            }
+        }"
+        class="chat-wrapper"
+    >
+        <!-- Chat header -->
+        <div class="chat-header">
+            <h3 class="mb-0 mt-3">Hopper</h3>
         </div>
-        <div class="d-flex" style="height:100%;">
-            <div class="vr" style="margin-right: 30px;"></div> 
-            <ul class="list-group responses" style="width: 100%">
-            <template x-for="(answer, index) in answers" :key="index">
-                <li class="list-group-item markdown-content" x-html="marked.parse(answer)"></li>
+
+        <!-- Chat area -->
+        <div class="chat-container" x-ref="chatContainer" @scroll="checkScroll()">
+
+            <!-- Welcome state -->
+            <div x-show="messages.length === 0" class="chat-welcome">
+                <div class="chat-welcome-icon">
+                    <svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" fill="currentColor" viewBox="0 0 16 16">
+                        <path d="M5 8a1 1 0 1 1-2 0 1 1 0 0 1 2 0zm4 0a1 1 0 1 1-2 0 1 1 0 0 1 2 0zm3 1a1 1 0 1 0 0-2 1 1 0 0 0 0 2z"/>
+                        <path d="m2.165 15.803.02-.004c1.83-.363 2.948-.842 3.468-1.105A9.06 9.06 0 0 0 8 15c4.418 0 8-3.134 8-7s-3.582-7-8-7-8 3.134-8 7c0 1.76.743 3.37 1.97 4.6a10.437 10.437 0 0 1-.524 2.318l-.003.011a10.722 10.722 0 0 1-.244.637c-.079.186.074.394.272.362a21.673 21.673 0 0 0 .693-.125zm.8-3.108a1 1 0 0 0-.287-.801C1.618 10.83 1 9.468 1 8c0-3.192 3.004-6 7-6s7 2.808 7 6c0 3.192-3.004 6-7 6a8.06 8.06 0 0 1-2.088-.272 1 1 0 0 0-.711.074c-.387.196-1.24.57-2.634.893a10.97 10.97 0 0 0 .398-2z"/>
+                    </svg>
+                </div>
+                <h4>How can I help you today?</h4>
+                <p class="text-muted">Ask me anything about hospital data.</p>
+            </div>
+
+            <!-- Message list -->
+            <template x-for="(msg, index) in messages" :key="index">
+                <div :class="'chat-message chat-message-' + msg.role">
+                    <div class="chat-avatar" x-text="msg.role === 'user' ? 'You' : 'AI'"></div>
+                    <div class="chat-bubble"
+                         :class="'chat-bubble-' + msg.role"
+                         x-html="msg.role === 'assistant' ? marked.parse(msg.content) : msg.content">
+                    </div>
+                </div>
             </template>
-            <li x-show="isLoading" class="list-group-item">
-                <span class="thinking-dots">thinking</span>
-            </li>
-            </ul>
+
+            <!-- Loading indicator -->
+            <div x-show="isLoading" class="chat-message chat-message-assistant">
+                <div class="chat-avatar">AI</div>
+                <div class="chat-bubble chat-bubble-assistant">
+                    <span class="thinking-dots">Thinking</span>
+                </div>
+            </div>
         </div>
-        <div>
-    
+
+        <!-- Scroll to bottom button -->
+        <button
+            x-show="showScrollBtn"
+            x-transition
+            class="scroll-down-btn"
+            @click="scrollToBottom()"
+        >
+            <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" viewBox="0 0 16 16">
+                <path fill-rule="evenodd" d="M8 1a.5.5 0 0 1 .5.5v11.793l3.146-3.147a.5.5 0 0 1 .708.708l-4 4a.5.5 0 0 1-.708 0l-4-4a.5.5 0 0 1 .708-.708L7.5 13.293V1.5A.5.5 0 0 1 8 1z"/>
+            </svg>
+        </button>
+
+        <!-- Input bar -->
+        <div class="chat-input-bar">
+            <div class="chat-input-wrapper">
+                <input
+                    type="text"
+                    class="chat-input"
+                    placeholder="Ask me something..."
+                    x-model="userQuery"
+                    @keyup.enter="getAnswer()"
+                    :disabled="isLoading"
+                >
+                <button
+                    class="chat-send-btn"
+                    @click="getAnswer()"
+                    :disabled="isLoading || !userQuery.trim()"
+                >
+                    <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" viewBox="0 0 16 16">
+                        <path d="M15.854.146a.5.5 0 0 1 .11.54l-5.819 14.547a.75.75 0 0 1-1.329.124l-3.178-4.995L.643 7.184a.75.75 0 0 1 .124-1.33L15.314.037a.5.5 0 0 1 .54.11ZM6.636 10.07l2.761 4.338L14.13 2.576 6.636 10.07Zm6.787-8.201L1.591 6.602l4.339 2.76 7.494-7.493Z"/>
+                    </svg>
+                </button>
+            </div>
         </div>
     </div>
 {% endblock %}
-