diff --git a/src/interface/obsidian/src/chat_modal.ts b/src/interface/obsidian/src/chat_modal.ts
index 3b476dc3..59da36ac 100644
--- a/src/interface/obsidian/src/chat_modal.ts
+++ b/src/interface/obsidian/src/chat_modal.ts
@@ -16,10 +16,10 @@ export class KhojChatModal extends Modal {
         contentEl.addClass("khoj-chat");
 
         // Add title to the Khoj Chat modal
-        contentEl.createEl("h1", ({ attr: { id: "chat-title" }, text: "Khoj Chat" }));
+        contentEl.createEl("h1", ({ attr: { id: "khoj-chat-title" }, text: "Khoj Chat" }));
 
         // Create area for chat logs
-        contentEl.createDiv({ attr: { id: "chat-body", class: "chat-body" } });
+        contentEl.createDiv({ attr: { id: "khoj-chat-body", class: "khoj-chat-body" } });
 
         // Get conversation history from Khoj backend
         let chatUrl = `${this.setting.khojUrl}/api/chat?`;
@@ -37,6 +37,7 @@ export class KhojChatModal extends Modal {
             })
             .addButton((btn) => btn
                 .setButtonText("Send")
+                .setClass("khoj-chat-input-button")
                 .setCta()
                 .onClick(async () => { await this.getChatResponse(this.result) }));
     }
@@ -67,15 +68,15 @@ export class KhojChatModal extends Modal {
 
         // Append message to conversation history HTML element.
         // The chat logs should display above the message input box to follow standard UI semantics
-        let chat_body_el = this.contentEl.getElementsByClassName("chat-body")[0];
+        let chat_body_el = this.contentEl.getElementsByClassName("khoj-chat-body")[0];
         let chat_message_el = chat_body_el.createDiv({
             attr: {
                 "data-meta": `${emojified_sender} at ${message_time}`,
-                class: `chat-message ${sender}`
+                class: `khoj-chat-message ${sender}`
             },
         }).createDiv({
             attr: {
-                class: `chat-message-text ${sender}`
+                class: `khoj-chat-message-text ${sender}`
             },
             text: `${message}`
         })
diff --git a/src/interface/obsidian/styles.css b/src/interface/obsidian/styles.css
index 99703d3e..a1ee31dd 100644
--- a/src/interface/obsidian/styles.css
+++ b/src/interface/obsidian/styles.css
@@ -10,13 +10,12 @@ If your plugin does not need CSS, delete this file.
 :root {
     --khoj-chat-blue: #017eff;
     --khoj-chat-dark-grey: #475569;
-    --khoj-chat-light-grey: #aaa;
-    --khoj-chat-white: #f8fafc;
 }
 
 .khoj-chat {
     display: grid;
-    color: var(--khoj-chat-dark-grey);
+    background: var(--background-primary);
+    color: var(--text-normal);
     text-align: center;
     font-family: roboto, karma, segoe ui, sans-serif;
     font-size: 20px;
@@ -28,37 +27,37 @@ If your plugin does not need CSS, delete this file.
     margin: 10px;
 }
 
-#chat-title {
+#khoj-chat-title {
     font-weight: 200;
     color: var(--khoj-chat-blue);
 }
 
-#chat-body {
+#khoj-chat-body {
     font-size: medium;
     margin: 0px;
     line-height: 20px;
     overflow-y: scroll; /* Make chat body scroll to see history */
 }
 /* add chat metatdata to bottom of bubble */
-.chat-message::after {
+.khoj-chat-message::after {
     content: attr(data-meta);
     display: block;
     font-size: x-small;
-    color: var(--khoj-chat-dark-grey);
+    color: var(--text-muted);
     margin: -12px 7px 0 -5px;
 }
 /* move message by khoj to left */
-.chat-message.khoj {
+.khoj-chat-message.khoj {
     margin-left: auto;
     text-align: left;
 }
 /* move message by you to right */
-.chat-message.you {
+.khoj-chat-message.you {
     margin-right: auto;
     text-align: right;
 }
 /* basic style chat message text */
-.chat-message-text {
+.khoj-chat-message-text {
     margin: 10px;
     border-radius: 10px;
     padding: 10px;
@@ -68,14 +67,14 @@ If your plugin does not need CSS, delete this file.
     text-align: left;
 }
 /* color chat bubble by khoj blue */
-.chat-message-text.khoj {
-    color: var(--khoj-chat-white);
+.khoj-chat-message-text.khoj {
+    color: var(--text-on-accent);
     background: var(--khoj-chat-blue);
     margin-left: auto;
     white-space: pre-line;
 }
 /* add left protrusion to khoj chat bubble */
-.chat-message-text.khoj:after {
+.khoj-chat-message-text.khoj:after {
     content: '';
     position: absolute;
     bottom: -2px;
@@ -86,13 +85,13 @@ If your plugin does not need CSS, delete this file.
     transform: rotate(-60deg);
 }
 /* color chat bubble by you dark grey */
-.chat-message-text.you {
-    color: var(--khoj-chat-white);
+.khoj-chat-message-text.you {
+    color: var(--text-on-accent);
     background: var(--khoj-chat-dark-grey);
     margin-right: auto;
 }
 /* add right protrusion to you chat bubble */
-.chat-message-text.you:after {
+.khoj-chat-message-text.you:after {
     content: '';
     position: absolute;
     top: 91%;
@@ -104,32 +103,33 @@ If your plugin does not need CSS, delete this file.
     transform: rotate(-60deg)
 }
 
-#chat-footer {
+#khoj-chat-footer {
     padding: 0;
     display: grid;
     grid-template-columns: minmax(70px, 100%);
     grid-column-gap: 10px;
     grid-row-gap: 10px;
 }
-#chat-footer > * {
+#khoj-chat-footer > * {
     padding: 15px;
     border-radius: 5px;
     border: 1px solid var(--khoj-chat-dark-grey);
     background: #f9fafc
 }
-#chat-input.option:hover {
-    box-shadow: 0 0 11px var(--khoj-chat-light-grey);
+#khoj-chat-input.option:hover {
+    box-shadow: 0 0 11px var(--background-modifier-box-shadow);
 }
-#chat-input {
+#khoj-chat-input {
     font-size: medium;
 }
+}
 
 @media (pointer: coarse), (hover: none) {
-    #chat-body.abbr[title] {
+    #khoj-chat-body.abbr[title] {
         position: relative;
         padding-left: 4px;  /* space references out to ease tapping */
     }
-    #chat-body.abbr[title]:focus:after {
+    #khoj-chat-body.abbr[title]:focus:after {
         content: attr(title);
 
         /* position tooltip */
@@ -139,10 +139,10 @@ If your plugin does not need CSS, delete this file.
         z-index: 1;  /* show tooltip above chat messages */
 
         /* style tooltip */
-        background-color: #aaa;
-        color: var(--khoj-chat-white);
+        background-color: var(--background-secondary);
+        color: var(--text-muted);
         border-radius: 2px;
-        box-shadow: 1px 1px 4px 0 rgba(0, 0, 0, 0.4);
+        box-shadow: 1px 1px 4px 0 var(--background-modifier-box-shadow);
         font-size: 14px;
         padding: 2px 4px;
     }