diff --git a/src/khoj/interface/web/agents.html b/src/khoj/interface/web/agents.html
index 36bb4caf..7cac6b16 100644
--- a/src/khoj/interface/web/agents.html
+++ b/src/khoj/interface/web/agents.html
@@ -13,11 +13,10 @@
         <!--Add Header Logo and Nav Pane-->
         {% import 'utils.html' as utils %}
         {{ utils.heading_pane(user_photo, username, is_active, has_documents) }}
-        <!-- {{ agents }} -->
 
         <div id="agents-list">
             <div id="agents-header">
-                <h1 id="agents-list-title">Agents</h1>
+                <h1 id="agents-list-title">Chat with an Agent</h1>
                 <!-- <div id="create-agent">
                     <a href="/agents/create"><svg class="new-convo-button" viewBox="0 0 35 35" fill="#000000" viewBox="0 0 32 32" version="1.1" xmlns="http://www.w3.org/2000/svg">
                         <path d="M16 0c-8.836 0-16 7.163-16 16s7.163 16 16 16c8.837 0 16-7.163 16-16s-7.163-16-16-16zM16 30.032c-7.72 0-14-6.312-14-14.032s6.28-14 14-14 14 6.28 14 14-6.28 14.032-14 14.032zM23 15h-6v-6c0-0.552-0.448-1-1-1s-1 0.448-1 1v6h-6c-0.552 0-1 0.448-1 1s0.448 1 1 1h6v6c0 0.552 0.448 1 1 1s1-0.448 1-1v-6h6c0.552 0 1-0.448 1-1s-0.448-1-1-1z"></path>
@@ -36,13 +35,19 @@
                             <a href="/agent/{{ agent.slug }}">
                                 <h2>{{ agent.name }}</h2>
                             </a>
-                            <p>{{ agent.personality }}</p>
                         </div>
                         <div class="agent-info">
                             <button onclick="openChat('{{ agent.slug }}')">
                                 <img class="send-icon" src="/static/assets/icons/send.svg" alt="Chat">
                             </button>
                         </div>
+                        <div class="agent-personality">
+                            <a href="/agent/{{ agent.slug }}">
+                                <p>
+                                    {{ agent.personality }}
+                                </p>
+                            </a>
+                        </div>
                     </div>
                 {% endfor %}
             </div>
@@ -70,10 +75,15 @@
             margin: 0;
         }
 
-        .agent-info p {
-            height: 50px;
-            overflow: auto;
-            margin: 0px;
+        .agent-personality p {
+            white-space: inherit;
+            overflow: hidden;
+            height: 100px;
+        }
+
+        div.agent-personality {
+            text-align: left;
+            grid-column: span 3;
         }
 
         div.agent-info {
@@ -145,9 +155,9 @@
             gap: 20px;
             align-items: center;
             padding: 20px;
-            background-color: var(--frosted-background-color);
             box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
             border-radius: 8px;
+            background: linear-gradient(18.48deg,rgba(252, 213, 87, 0.25) 2.76%,rgba(197, 0, 0, 0) 17.23%),linear-gradient(200.6deg,rgba(244, 229, 68, 0.25) 4.13%,rgba(230, 26, 26, 0) 20.54%);
         }
 
         div.agent-info {